components.css 5.16
styles. Verified when Rank Math is installed. */
.breadcrumbs p{margin:0}
.breadcrumbs .separator{color:var(--faint);margin:0 8px}
.breadcrumbs .last{color:var(--ink)}
@media(max-width:1000px){
.shop-head{padding-top:calc(76px + 24px)}
.woocommerce .breadcrumbs,.woocommerce-page .breadcrumbs{padding-top:calc(76px + 14px)}
}
/* ---------------------------------------------------------------------------
Product page (PDP)
DESIGN.md 3.2 (.pdp-layout), 5.4 (spec table), 5.10 (price), 5.11 (pack
size + quantity), 5.12 (fields), 5.13 (tables), 5.18 (accordion), 7.1 (1:1).
Same specificity technique as the cart/checkout block at the foot of this
file: match the length of Woo's own selector and win on source order. That
is the cost of keeping woocommerce-general rather than restyling from zero.
------------------------------------------------------------------------ */
/* Clearance for the fixed 76px header, same idiom as .shop-head above. */
.single-product .site-main{padding-top:calc(76px + 18px)}
/* Woo's own breadcrumb until Rank Math replaces it (Task 14). DESIGN.md 5.16.
Its separators are bare text nodes, so they take the link colour rather than
5.16's --faint; the Rank Math markup the .breadcrumbs rules above target
does carry a .separator span. Scoped to the PDP on purpose: Woo prints the
same nav on the shop and taxonomy archives, where it currently sits behind
the fixed header and is a separate (pre-existing) question. */
.single-product .woocommerce-breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);padding:0 0 clamp(16px,2vw,24px)}
.single-product .woocommerce-breadcrumb a{color:var(--muted)}
.single-product .woocommerce-breadcrumb a:hover{color:var(--lime-ink)}
/* 3.2: 1fr 1fr, 48px gap, one column below 1001px (components.css). A float on
a grid item is already inert, but Woo's 48% widths are not. */
.pdp-layout{margin-bottom:clamp(40px,5vw,64px)}
.woocommerce div.product .pdp-layout>div.images,
.woocommerce div.product .pdp-layout>div.summary{float:none;width:auto;margin:0}
/* 7.1: PDP main image and gallery thumbs are 1:1, with the box reserved before
the file lands so CLS is zero. Woo floats thumbs at 25% from the second
child, which lands them in the same square. */
.pdp-media .woocommerce-product-gallery__image{aspect-ratio:1/1;overflow:hidden;
border:1px solid var(--line);border-radius:var(--radius)}
/* Woo sizes gallery images from a three-class selector of its own, so filling
the reserved square takes one class more than the component would need. */
.woocommerce div.product .pdp-media .woocommerce-product-gallery__image a{display:block;height:100%}
.woocommerce div.product .pdp-media .woocommerce-product-gallery__image img{
width:100%;height:100%;object-fit:cover}
/* Woo's script drops a lightbox trigger onto the gallery. With no photo it
would open a lightbox of nothing, which is a promise of a picture we do not
have (7.3), so it goes until a real image is set. */
.woocommerce-product-gallery--without-images .woocommerce-product-gallery__trigger{display:none}
/* Breeder line above the h1 (5.5 .badge--brand; 9.1 it is a , not a heading). */
.pdp-breeder{margin:0 0 12px}
.pdp-breeder a:hover{border-color:var(--lime-ink);color:var(--lime-ink)}
/* 2.3: the PDP h1 reuses the .section-head h2 clamp. */
.woocommerce div.product .product_title{font-size:clamp(30px,4.4vw,46px);text-transform:uppercase}
/* 5.10: the same .price component at 28px. */
.woocommerce div.product .entry-summary p.price,
.woocommerce div.product .entry-summary .woocommerce-variation-price .price{
font-family:var(--display);font-weight:800;font-size:28px;color:var(--ink);margin:14px 0 0}
.woocommerce div.product .entry-summary p.price del{color:var(--muted);font-size:15px;text-decoration-thickness:1px}
.woocommerce div.product .entry-summary p.price ins{color:inherit;text-decoration:none;background:none}
/* The spec table is the product story, so it sits between the price and the
buy box rather than under a tab. */
.pdp-specs{margin:24px 0 0}
.pdp-specs .eyebrow,.pdp-faq .eyebrow{display:block;margin-bottom:12px}
.pdp-faq{margin:32px 0 0}
/* Compliance line: the footer legal idiom (5.7), not a shouty mono label. */
.pdp-compliance{margin:16px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
line-height:1.7;color:var(--muted);max-width:60ch}
/* 5.11 pack size. This is Woo's dressed in the 5.12 field spec, not
5.11's .variation-swatch radio group: swapping the select out breaks Woo's
own add-to-cart-variation script, which needs a JS sync layer this task does
not own. Recorded in the Task 11 report. */
.woocommerce div.product form.cart{margin:24px 0 0}
.woocommerce div.product form.cart table.variations{display:block;width:100%;margin:0 0 18px;border:0}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{display:block;width:auto;padding:0;border:0}
.woocommerce div.product form.cart table.variations label{display:block;margin-bottom:7px;
font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
.woocommerce div.product form.cart .variations select{width:100%;min-height:44px;padding:14px 16px;
background:var(--surface2);border:1px solid var(--line2);border-radius:var(--radius-sm);
color:var(--ink);font:400 15px var(--body)}
.woocommerce div.product form.cart .variations select:hover{border-color:var(--line)}
/* 5.12 focus state. The outline ring itself is the global 9.2 :focus-visible
rule in base.css; only the border-color half is field-specific. */
.woocommerce div.product form.cart .variations select:focus-visible{border-color:var(--lime-ink)}
.woocommerce div.product form.cart .reset_variations{display:inline-block;margin-top:10px;
font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.woocommerce div.product form.cart .reset_variations:hover{color:var(--lime-ink)}
.woocommerce div.product form.cart .single_variation{margin-bottom:14px}
/* 5.11 quantity. Woo's markup carries no minus/plus buttons, so the box is
applied to the input itself rather than rebuilt around it. */
.woocommerce div.product form.cart .quantity{display:inline-block;margin-right:12px}
.woocommerce div.product form.cart .quantity .qty{width:88px;min-height:44px;padding:0 10px;
text-align:center;background:var(--surface2);border:1px solid var(--line2);
border-radius:var(--radius-sm);color:var(--ink);font:700 15px var(--mono)}
/* Add to cart is 5.1 .tag-btn--primary. The lime is a fill with #0A0C07 ink
(15.88:1), identical in both themes, so D2 does not apply. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit{float:none;
background:var(--lime);color:#0A0C07;border:1px solid transparent;
border-radius:var(--radius-pill);padding:14px 24px;
font:700 15px var(--body);letter-spacing:.01em;
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover{background:var(--lime);color:#0A0C07;
transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(168,255,4,.5)}
.woocommerce div.product form.cart .single_add_to_cart_button:active{transform:none}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled{opacity:.5;transform:none}
/* SKU / category / brand under the buy box. Mono label idiom (5.2). */
.woocommerce div.product .product_meta{display:flex;flex-direction:column;gap:6px;margin-top:24px;
font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.woocommerce div.product .product_meta a{color:var(--lime-ink)}
/* Tabs. Woo draws folder tabs with ::before/::after curls and a white fill;
both go, leaving a mono label row on a hairline. */
.woocommerce div.product .woocommerce-tabs{margin-top:clamp(40px,5vw,64px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:26px;
margin:0 0 24px;padding:0;border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:transparent;
border:0;border-radius:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after{display:none}
/* Woo fills the active tab white from a five-class selector, so this one has
to match its length. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:transparent;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:flex;align-items:center;
min-height:44px;padding:0;font-family:var(--mono);font-weight:700;font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--lime-ink)}
.woocommerce-Tabs-panel{max-width:68ch;font-size:17px;line-height:1.7;color:var(--ink)}
.woocommerce-Tabs-panel h2{font-size:28px;text-transform:uppercase;margin:0 0 14px}
.woocommerce-Tabs-panel p{margin:0 0 18px}
.woocommerce-Tabs-panel p:last-child{margin-bottom:0}
/* 5.13 .tag-table, applied to the attribute table Woo generates. */
.woocommerce div.product .shop_attributes{width:100%;border-collapse:collapse;margin:0}
.woocommerce div.product .shop_attributes th{width:38%;text-align:left;padding:12px 14px;
border-bottom:1px solid var(--line2);font-family:var(--mono);font-weight:700;font-size:11px;
letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.woocommerce div.product .shop_attributes td{padding:14px;border-bottom:1px solid var(--line);
font-size:14px;color:var(--ink)}
.woocommerce div.product .shop_attributes td p{margin:0}
/* Related products: Woo generates ul.products, mapped onto the 3.2 card grid
(4-up, 18px gap) the rest of the site uses. */
.woocommerce div.product .related,.woocommerce div.product .up-sells{margin-top:clamp(56px,7vw,84px)}
.woocommerce div.product .related>h2,.woocommerce div.product .up-sells>h2{
font-size:clamp(30px,4.4vw,46px);text-transform:uppercase;margin:0 0 34px}
.woocommerce div.product ul.products{display:grid;grid-template-columns:repeat(4,1fr);
gap:18px;margin:0;padding:0}
.woocommerce div.product ul.products::before,
.woocommerce div.product ul.products::after{display:none}
.woocommerce div.product ul.products li.product{width:auto;float:none;margin:0}
@media(max-width:1000px){
.woocommerce div.product ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.woocommerce div.product ul.products{grid-template-columns:1fr}
/* 5.1: full width when it is the sole action in a stacked form. */
.woocommerce div.product form.cart .single_add_to_cart_button{width:100%}
.woocommerce div.product form.cart .quantity{display:block;margin:0 0 12px}
}
/* ---------------------------------------------------------------------------
Cart, checkout, account, order-received (.woo-page, see page.php)
DESIGN.md 5.1 (buttons), 5.10 (price), 5.12 (fields), 5.13 (tables),
5.14 (notices), 9.3 (44px targets), 9.5 (the 18+ confirmation).
Golden rule from the blueprint: the order flow belongs to Woo. No cart,
checkout or account template is overridden anywhere - every selector below
dresses markup Woo generated. This file loads after Woo's three sheets, so
merely matching its specificity wins on source order, and :is() takes the
highest specificity of its arguments.
------------------------------------------------------------------------ */
/* One header offset, not two: the .woocommerce-page .breadcrumbs rule above
already clears the 76px header; .section would stack its own. */
.woocommerce-page .site-main>.section{padding-top:0}
/* Woo's section headings; the is page.php's. */
.woo-page :is(h2,h3){font-size:19px;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 16px}
.woo-page p{margin:0 0 14px}
/* 5.14 notices. Woo's grey fill, purple top rule and WooCommerce-font glyph
all go. The status word is generated content because the markup is Woo's, so
the tone is still not colour alone (9.1); Woo already sets role="alert" on
errors and messages, role="status" on info. */
.woocommerce-error,.woocommerce-message,.woocommerce-info{
position:relative;margin:0 0 22px;padding:14px 16px;list-style:none;font-size:14px;
color:var(--ink);background:var(--surface);border:1px solid var(--line);
border-left:3px solid var(--notice-accent);border-radius:var(--radius-sm);
--notice-accent:var(--chrome)}
.woocommerce-error{--notice-accent:var(--danger)}
.woocommerce-message{--notice-accent:var(--lime-ink)}
:is(.woocommerce-error,.woocommerce-message,.woocommerce-info)::before{
position:static;display:block;margin:0 0 6px;font:700 10px/1.4 var(--mono);
letter-spacing:.08em;text-transform:uppercase;color:var(--notice-accent);content:"Info"}
.woocommerce-error::before{content:"Error"}
.woocommerce-message::before{content:"Success"}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message) li{margin:0 0 4px}
/* Woo floats the notice's action button, which overlaps at 390px. */
.woocommerce-page :is(.woocommerce-message,.woocommerce-info) .button{float:none;margin:12px 0 0}
/* 5.1 buttons. Two variants cover everything Woo prints here: .alt (proceed
to checkout, place order) is --primary, the rest --ghost. */
.woo-page :is(a,button,input).button,.woo-page button.woocommerce-button{
display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;
padding:14px 24px;background:transparent;color:var(--ink);border:1px solid var(--line2);
border-radius:var(--radius-pill);font:700 15px var(--body);letter-spacing:.01em;
text-transform:none;text-shadow:none;transition:var(--dur) var(--ease);
transition-property:transform,box-shadow,border-color,color}
.woo-page :is(a,button,input).button:hover,.woo-page button.woocommerce-button:hover{
background:transparent;border-color:var(--lime-ink);color:var(--lime-ink);transform:translateY(-2px)}
/* Proceed to checkout and Place order both carry class="button alt". */
.woo-page :is(a,button,input).button.alt{background:var(--lime);color:#0A0C07;border-color:transparent}
.woo-page :is(a,button,input).button.alt:hover{box-shadow:0 10px 30px -8px rgba(168,255,4,.5)}
.woo-page :is(a,button,input).button:active{transform:none}
.woo-page :is(button.button:disabled,a.button.disabled){opacity:.5;transform:none;pointer-events:none}
/* 5.13 tables: cart, order review, thank-you detail, account orders. */
.woo-page table.shop_table{width:100%;margin:0 0 24px;border:0;border-collapse:collapse;border-radius:0}
.woo-page table.shop_table :is(th,thead th){padding:12px 14px;text-align:left;
border-bottom:1px solid var(--line2);font:700 11px var(--mono);letter-spacing:.08em;
text-transform:uppercase;color:var(--faint)}
.woo-page table.shop_table td{padding:14px;border-bottom:1px solid var(--line);
font-size:14px;color:var(--ink);vertical-align:middle}
.woo-page table.shop_table .amount{font-family:var(--mono);font-variant-numeric:tabular-nums}
.woo-page table.shop_table .order-total .amount{font:800 18px var(--display);color:var(--ink)}
.woo-page table.shop_table td.actions{padding:20px 0 0;border-bottom:0}
/* Cart lines. The remove glyph needs a 9.3 hit box. */
.woo-page td.product-thumbnail{width:92px}
.woo-page table.cart td.product-thumbnail img{width:64px;height:64px;object-fit:cover;
border:1px solid var(--line);border-radius:var(--radius-sm)}
.woo-page td.product-name a{font-weight:600}
.woo-page td.product-name a:hover{color:var(--lime-ink)}
.woo-page td.product-remove{width:44px}
.woo-page a.remove{display:grid;place-items:center;width:34px;height:34px;color:var(--muted)!important;
font-size:20px;line-height:1;background:transparent;border-radius:var(--radius-pill)}
.woo-page a.remove:hover{color:var(--danger)!important;background:var(--surface2)}
.woo-page td.product-quantity .qty{width:88px;min-height:44px;padding:0 8px;text-align:center;
font:700 15px var(--mono);background:var(--surface2);border:1px solid var(--line2);
border-radius:var(--radius-sm)}
/* One panel shape, four places. Bank details add an edge on top. */
.woo-page :is(.cart_totals,.woocommerce-order-overview,
.woocommerce-bacs-bank-details),.woo-page #order_review{
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
/* Cart actions + totals. */
.woo-page table.cart td.actions .coupon{display:flex;gap:10px;flex-wrap:wrap;float:none;margin:0 0 14px}
.woo-page table.cart td.actions .coupon .input-text{width:auto;min-width:0;flex:1 1 180px;
max-width:280px;padding:14px 16px;border:1px solid var(--line2)}
.woo-page table.cart td.actions .button{padding:14px 24px}
.woo-page .cart-collaterals{width:auto;float:none}
.woo-page .cart-collaterals .cart_totals{width:100%;max-width:420px;float:none;
margin-left:auto;padding:22px 24px}
.woo-page .cart_totals table.shop_table{margin:0}
.woo-page .cart_totals table.shop_table th{width:50%;padding-left:0}
.woo-page .cart_totals table.shop_table td{padding-right:0;text-align:right}
.woo-page .cart_totals .order-total :is(th,td){border-bottom:0}
.woo-page .wc-proceed-to-checkout{padding:18px 0 0}
.woo-page .wc-proceed-to-checkout a.checkout-button{display:flex;width:100%}
.woo-page p.return-to-shop{margin:20px 0 0}
/* --- Checkout ------------------------------------------------------------ */
/* Woo floats #customer_details at 48%; a grid is the 3.2 idiom. */
.woo-page #customer_details{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(24px,3vw,48px);margin-bottom:clamp(32px,4vw,48px)}
.woo-page #customer_details :is(.col-1,.col-2){float:none;width:auto;padding:0}
.woo-page #order_review_heading{margin-top:0}
/* 5.12 fields. Woo draws every checkout box from four custom properties of
its own, so re-pointing those at our tokens beats out-specifying
.woocommerce form .form-row .input-text. Padding is the one thing not behind
a property, and Woo's .5em is under the 9.3 minimum. */
.woo-page{--wc-form-color-background:var(--surface2);--wc-form-color-text:var(--ink);
--wc-form-border-color:var(--line2);--wc-form-border-radius:var(--radius-sm)}
.woo-page form .form-row :is(.input-text,select){padding:14px 16px;min-height:44px}
/* Woo clearfixes .col2-set and .order_details with ::before/::after, and on a
grid container those become grid items: billing lands in column two and the
overview gets an empty first cell. */
.woo-page :is(.col2-set,ul.order_details)::before,
.woo-page :is(.col2-set,ul.order_details)::after{content:none}
.woo-page .form-row{display:block;margin:0 0 18px;padding:0}
.woo-page .form-row label{display:block;margin-bottom:7px;font:700 11px var(--mono);
letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woo-page .form-row .woocommerce-input-wrapper{display:block;width:100%}
.woo-page form .form-row .required{color:var(--muted);text-decoration:none}
.woo-page :is(input[type=checkbox],input[type=radio]){width:auto;min-height:0;margin:0;padding:0;
accent-color:var(--lime-ink)}
.woo-page :is(.form-row-first,.form-row-last){width:auto;float:none}
/* Order review + payment are one panel, like cart totals. */
.woo-page #order_review{padding:22px 24px}
.woo-page #order_review :is(th,td):first-child{padding-left:0}
.woo-page #order_review :is(th,td):last-child{padding-right:0;text-align:right}
.woo-page #payment{background:transparent;border-radius:0}
.woo-page #payment .payment_methods{margin:0 0 18px;padding:0 0 18px;
border-bottom:1px solid var(--line)}
.woo-page #payment .payment_methods li{margin:0;padding:0;list-style:none}
.woo-page #payment .payment_methods label{display:inline-flex;align-items:center;min-height:44px;
margin:0;font:600 15px var(--body);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.woo-page #payment input.input-radio{margin-right:10px}
.woo-page #payment div.payment_box{margin:4px 0 0;padding:14px 16px;color:var(--muted);
font-size:14px;line-height:1.7;background:var(--surface2);border-radius:var(--radius-sm)}
.woo-page #payment div.payment_box::before{display:none}
.woo-page #payment div.form-row.place-order{margin:0;padding:0}
.woo-page .woocommerce-privacy-policy-text{margin:0 0 16px;font-size:13px;color:var(--muted)}
.woo-page :is(.payment_box,.woocommerce-privacy-policy-text) p:last-child{margin:0}
.woo-page button#place_order{width:100%;margin-top:4px}
/* The 18+ and collector confirmation (inc/woocommerce.php): the last thing
read before the order is placed, so it gets its own panel. */
.woo-page #tag_age_confirm_field{margin:0 0 16px;padding:14px 16px;background:var(--surface2);
border:1px solid var(--line2);border-radius:var(--radius-sm)}
/* Not flex: the label is one text run with a link inside it, and flex would
turn each run into an item and space them apart. */
.woo-page #tag_age_confirm_field label.checkbox{position:relative;display:block;margin:0;
padding-left:32px;font:400 14px/1.6 var(--body);letter-spacing:0;text-transform:none;
color:var(--ink);cursor:pointer}
.woo-page #tag_age_confirm_field input.input-checkbox{position:absolute;left:0;top:2px;
width:20px;height:20px;margin:0;cursor:pointer}
.woo-page :is(#tag_age_confirm_field,.woocommerce-LostPassword) a{color:var(--lime-ink);
text-decoration:underline;text-underline-offset:3px}
/* The word itself is real text now, put there by the woocommerce_form_field
filter in inc/woocommerce.php (9.5). This is only its marker styling, needed
because the label around it is body copy rather than a 5.12 field label. */
.woo-page #tag_age_confirm_field .required{font:700 10px var(--mono);letter-spacing:.08em;
text-transform:uppercase}
/* --- Order received (thank you) and account ------------------------------ */
.woo-page ul.woocommerce-order-overview{display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 28px;
padding:20px 24px;list-style:none}
.woo-page ul.woocommerce-order-overview li{margin:0;padding:0;border:0;float:none;
font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.woo-page ul.woocommerce-order-overview li strong{display:block;margin-top:6px;
font:600 16px var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
/* Bank details, printed by WC_Gateway_BACS on the thank-you page and in the
order email. Placeholders until Kenny sends the real details. */
.woo-page .woocommerce-bacs-bank-details{margin:0 0 28px;padding:20px 24px;list-style:none;
border-left:3px solid var(--lime-ink)}
.woo-page :is(.woocommerce-bacs-bank-details h2,.wc-bacs-bank-details-heading){margin:0 0 12px;font-size:16px}
.woo-page ul.wc-bacs-bank-details{margin:0}
.woo-page ul.wc-bacs-bank-details li{float:none;margin:0;padding:6px 0;border:0;
border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
.woo-page ul.wc-bacs-bank-details li:last-child{border-bottom:0}
.woo-page ul.wc-bacs-bank-details li strong{font-family:var(--mono)}
.woo-page .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:22px;margin:0 0 28px;
padding:0 0 14px;border-bottom:1px solid var(--line);list-style:none}
.woo-page .woocommerce-MyAccount-navigation a{display:flex;align-items:center;min-height:44px;
font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.woo-page .woocommerce-MyAccount-navigation li.is-active a{color:var(--lime-ink)}
.woo-page .woocommerce-form-login{max-width:440px;
border-color:var(--line);border-radius:var(--radius)}
/* --- Product reviews (PDP tab). Genuine buyer reviews stay enabled; only
invented ones are the DMCC 2024 problem. Same idiom as the forms above. --- */
.woocommerce #reviews :is(h2,h3){font-size:19px;text-transform:uppercase;margin:0 0 18px}
.woocommerce #reviews ol.commentlist{margin:0 0 28px;padding:0;list-style:none}
.woocommerce #reviews ol.commentlist li{margin:0 0 14px;padding:18px 20px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius)}
.woocommerce #reviews .comment-text{margin:0;padding:0;border:0;font-size:15px;line-height:1.7}
.woocommerce #reviews .comment-text p.meta{margin:0 0 8px;font:700 11px var(--mono);
letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.woocommerce :is(#reviews .star-rating span,.comment-form-rating .stars a){color:var(--lime-ink)}
.woocommerce #respond :is(p,.comment-form-rating){margin:0 0 16px}
.woocommerce #respond label{display:block;margin-bottom:7px;font:700 11px var(--mono);
letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* --- Responsive. Woo's smallscreen sheet already stacks .shop_table_responsive
below 768px from data-title; restyling that stack into 5.13's card is
cheaper and less fragile than rebuilding it. --- */
@media(max-width:1000px){
.woo-page #customer_details{grid-template-columns:1fr}
.woo-page .cart_totals{max-width:none}
}
@media(max-width:768px){
.woo-page table.shop_table_responsive tr{display:block;margin:0 0 12px;padding:4px 14px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.woo-page table.shop_table_responsive tr:nth-child(2n) td{background:transparent}
.woo-page table.shop_table_responsive td{padding:11px 0;border-bottom:1px solid var(--line)}
.woo-page table.shop_table_responsive td:last-child{border-bottom:0}
.woo-page table.shop_table_responsive tr td::before{float:left;font:700 11px var(--mono);
letter-spacing:.08em;text-transform:uppercase;color:var(--faint);content:attr(data-title)}
/* Woo hides the thumbnail here, so the remove glyph is the card's first
row, in the left position it holds in the desktop table. */
.woo-page table.shop_table_responsive td.product-remove{padding:6px 0 0;border:0}
.woo-page table.shop_table_responsive tr:has(td.actions){padding:0;background:transparent;border:0}
.woo-page table.shop_table_responsive td.actions{padding:14px 0;border:0}
.woo-page table.cart td.actions .coupon .input-text{max-width:none}
.woo-page table.cart td.actions .button{width:100%}
.woo-page :is(.cart_totals,#order_review,ul.woocommerce-order-overview,
.woocommerce-bacs-bank-details){padding:18px 16px}
}