/* * ericville26 — WooCommerce override layer (#1406) * ================================================ * Cart, checkout, the product-category archive, the header cart badge, and * every notice WooCommerce can raise. * * THE GOVERNING CONSTRAINT * ------------------------ * "Assume that WooCommerce's core cannot change and that it must be manually * overridden." Nothing in wp-content/plugins/woocommerce is edited. Cart and * Checkout are BLOCK surfaces — `wp:woocommerce/cart` and * `wp:woocommerce/checkout`, hydrated by React from the Store API — so their * markup is not ours to rewrite at all. Everything below reaches them the only * way left: by class name, from a stylesheet that loads after Woo's own * (`inc/headers/asset-loader.php` puts this file second-to-last, ahead of only * v26-base). Two consequences worth stating, because they are why some rules * look defensive: * * - Woo Blocks class names are a private API. Every selector below is * ADDITIVE — remove it and you get stock WooCommerce, never a broken page. * Nothing here sets `display:none` on a control, hides an error, or * repositions a payment element. * - Woo Blocks lays the cart and checkout out with CONTAINER queries on * `.wc-block-cart` / `.wc-block-checkout`. That is the root cause of the * 375px overflow this pass fixes — see §3. * * TOKENS ONLY. Not one literal colour, and no `rgba()` longhand. The file this * replaces had a hardcoded `rgba(255,255,255,.53)` on the checkout consent * checkbox (twice), which could not follow the theme into dark: on the dark * checkout it painted a near-white slab behind white text. * * SURFACES FOLLOW plan/design/1421-surface-ground.md * -------------------------------------------------- * The order-summary panels are the only raised surfaces on either page, and * they are a translucent LIFT (`--paper`) plus a cast shadow (`--raise`) — * not a fill and not a border. The file this replaces gave them * `background:var(--color-surface)` + `--shadow-md`; `--color-surface` now * bridges to `--paper` via v26-compat.css, so the fill was already relational, * but the shadow was a fixed grey that did nothing on the dark ground. Fields * are the mirror — a `--sunken` RECESS with no border, which is what lets a * form read as a form without drawing eleven rectangles on the page. * * WHAT WAS DELETED FROM THE OLD FILE, AND WHY * ------------------------------------------- * - `.woocommerce-page .default-page > *` — `.default-page` is index.php's * wrapper and no WooCommerce surface has ever used it. Dead rule. * - `.woocommerce-page .button { … !important }` — a global `!important` * accent fill on EVERY element Woo calls a button, including the notice * dismiss control and the coupon "Apply". Replaced by named rules. * - `.flex-viewport` / `.flex-control-nav` — FlexSlider, which this theme has * never loaded (the product gallery was slick, and is now neither). * - `.woocommerce-page .single-product div.product` and the `div.images` / * `div.summary` flex pair — Woo's stock single-product layout. This theme * overrides single-product.php wholesale, so those elements do not exist; * the product page is styled in css/page-product.css. * - `ul.woocommerce-order-overview` box-shadow / `.related` — kept, re-pointed * at tokens; the order-received page is real and reachable after a purchase. */ /* =========================================================================== * 1. Header cart badge * --------------------------------------------------------------------------- * Site-wide: header.php prints this inside the nav on every page, not just on * commerce surfaces. It is a count, so it uses the sans numeral face and the * accent, and it must stay legible against the shop pill's accent fill when * the cart link is the current item — hence the inverted pair below. * ========================================================================= */ .cart-count{ display:inline-flex;align-items:center;justify-content:center; min-width:22px;height:22px;padding:0 6px; background:var(--accent);color:var(--on-accent); border-radius:999px; font-family:var(--sans);font-size:var(--t-label);font-weight:700;line-height:1; letter-spacing:0; position:relative;top:-1px; } .current-menu-item .cart-count{background:var(--on-accent);color:var(--accent)} /* =========================================================================== * 2. The shell shared by cart and checkout * --------------------------------------------------------------------------- * page.php wraps both in `.content.general`, which basetags.css gives a bottom * margin and NOTHING else — no max-width, no gutter. So the block ran edge to * edge of the viewport with no gutter at 375, and had no measure at 1440. * Constraining it here is also half the overflow fix in §3: a container query * cannot report a sane width if its container has no width of its own. * * Scoped to the WooCommerce body class rather than to `.content.general`, * which every general page in the theme uses. * * `body.woocommerce-page` and not `body.tax-product_cat`: this theme filters * body_class down to five entries — `wp-theme-ericville26 theme-ericville26 * woocommerce woocommerce-page woocommerce-no-js` on an archive — so the * template-specific classes WordPress normally emits are simply not there. A * first attempt keyed on `tax-product_cat` matched nothing and the category * archive kept rendering flush to the viewport edge with its first row of * images clipped under the header. Read off the served markup, not assumed. * The single-product template does not use `.content.general` at all, so this * cannot reach it. * ========================================================================= */ body.woocommerce-page .content.general{ max-width:var(--col); margin:0 auto var(--space-xl); padding:60px var(--gut) 96px; width:100%; } /* The cart and checkout headings carry their own top margin, so those two pages take their clearance from the heading rather than from the shell. */ body.woocommerce-cart .content.general, body.woocommerce-checkout .content.general{padding-top:0} /* The page title, added to the cart and checkout page CONTENT as a core heading block (#1406) — the block-based cart prints no title of its own, so both pages previously began flush under the header with no top and no name. Content lives in the DB, presentation lives here. `display:block` is load-bearing: basetags.css carries `h1:not(.show){display:none}` at (0,1,1), a real rule rather than a reset, so without it the heading is emitted and never seen. Every ericville26 page stylesheet carries the same one-line antidote. */ body.woocommerce-cart .content.general > .wp-block-heading, body.woocommerce-checkout .content.general > .wp-block-heading{ display:block; font-family:var(--serif);color:var(--ink); font-weight:var(--disp-weight);letter-spacing:var(--disp-track); font-size:var(--t-d-sect);line-height:1.05; margin:60px 0 38px; } /* =========================================================================== * 3. The 375 overflow — the known bug on this ticket * --------------------------------------------------------------------------- * At a 375 viewport the cart rendered ~838px wide and clipped the line total * off the right edge. It is not a missing media query: Woo Blocks switched to * the mobile stack correctly the moment it believed it was narrow. The block * measures ITSELF, via `@container`, and it was measuring 838px because * * (a) `.content.general` set no width, so the block's containing block was * "as wide as the content wants", and * (b) the line-items TABLE has an intrinsic min-content width — thumbnail + * longest unbroken product name + the total column — of about 838px. * * So the table pushed the container wide, the container query read that width, * chose the desktop layout, and the desktop layout kept the table wide. A * self-reinforcing loop, which is why it never resolved at any viewport. * * §2 fixes (a). These three rules fix (b): the table is allowed to be narrower * than its content wants, and the two things that cannot shrink — the long * name and the thumbnail — are told how to give way. `min-width:0` is the * grid/flex escape hatch: without it a grid item's automatic minimum size is * its min-content size, which is the whole bug in one line. * ========================================================================= */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{max-width:100%;min-width:0} .wc-block-cart .wc-block-cart-items{width:100%;max-width:100%} .wc-block-cart .wc-block-cart-items td, .wc-block-cart .wc-block-cart-items th{min-width:0} .wc-block-components-product-name, .wc-block-cart-item__product{min-width:0;overflow-wrap:anywhere} /* Woo sizes the cart thumbnail off a 100px fixed column. At 375 that is 27% of the screen for a decorative image; the name and the price need the room. */ @media (max-width:560px){ .wc-block-cart .wc-block-cart-item__image{width:64px;padding-right:12px} .wc-block-cart .wc-block-cart-item__image img{width:64px;height:auto} } /* Woo's own sidebar padding assumes a themed container. */ @container (min-width:700px){ .wc-block-cart .wc-block-components-sidebar{padding-left:0} } /* =========================================================================== * 4. Cart — line items * --------------------------------------------------------------------------- * One hairline per row and one under the header row. Nothing else: the cart is * a list of things you chose, and a list does not need a box around each item. * ========================================================================= */ .wc-block-cart-items__header{ font-family:var(--sans);font-size:var(--t-label);font-weight:700; letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint); } .wc-block-cart-items__header th{border-bottom:1px solid var(--line);padding-bottom:12px} .wc-block-cart-items__row td{border-top:1px solid var(--line)} .wc-block-cart-items__row:first-child td{border-top:0} .wc-block-cart .wc-block-cart-item__image img{border-radius:var(--r-s);background:var(--sunken)} .wc-block-components-product-name{ font-family:var(--serif);font-size:var(--t-lead);font-weight:500;letter-spacing:var(--tr-lead); color:var(--ink);text-decoration:none; } a.wc-block-components-product-name:hover{color:var(--accent)} .wc-block-cart-item__prices .wc-block-components-product-price, .wc-block-cart-item__total .wc-block-components-product-price{ font-family:var(--sans);font-weight:600;color:var(--text); } /* Woo's small-container row is a grid that puts the line total on the SAME row as the product name (`grid-row-start:1`), with no gutter between them — so at 375 the title ran straight into "$0.00" with the two strings touching. A gutter, not a layout change: on desktop the total has its own right-aligned column and this padding is invisible. */ .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{ padding-left:14px; } .wc-block-components-product-metadata{color:var(--muted);font-size:var(--t-meta)} /* Remove. A destructive control, so it is quiet until you are on it — and it turns the ART accent's job over to a plain darkening rather than inventing a red the palette does not have. */ .wc-block-cart-item__remove-link{ min-height:0;color:var(--faint); transition:color var(--fast) var(--ease); } .wc-block-cart-item__remove-link:hover{color:var(--ink);outline-width:0;top:0} /* Quantity stepper. Hidden by Woo for a sold-individually product, so today it shows on nothing in this catalog — styled anyway, because the moment Eric prices a print or a hat it appears. A recess, not a bordered box. */ .wc-block-components-quantity-selector{ background:var(--sunken);border:0;border-radius:999px; max-width:112px; } .wc-block-components-quantity-selector::after{border:0} .wc-block-components-quantity-selector__input{ background:transparent;color:var(--ink); font-family:var(--sans);font-size:var(--t-meta);font-weight:600; } .wc-block-components-quantity-selector__button{ color:var(--muted);font-weight:600; transition:color var(--fast) var(--ease); } .wc-block-components-quantity-selector__button:hover:not(:disabled){color:var(--accent)} .wc-block-components-quantity-selector__button:disabled{color:var(--faint);opacity:.5} /* Cross-sells: Woo prints the heading from the page content whether or not any products follow it. It is a core heading block, so it is styled, not hidden — hiding it would also hide it on the day a cross-sell exists. */ .wp-block-woocommerce-cart-cross-sells-block .wp-block-heading{ font-family:var(--serif);font-size:var(--t-title);font-weight:500;letter-spacing:var(--tr-title); color:var(--ink);margin:44px 0 18px; } .wp-block-woocommerce-cart-cross-sells-block:not(:has(.wc-block-cart-cross-sells-product)){display:none} /* Empty cart. Woo's stock icon is a 100px grey outline drawing; the theme's register is a sentence and a way out. */ .wc-block-cart__empty-cart__title{ font-family:var(--serif);font-weight:500;letter-spacing:var(--tr-title); color:var(--ink); } .wc-block-cart__empty-cart__title.with-empty-cart-icon::before{opacity:.35} /* =========================================================================== * 5. Cart + checkout — the order-summary panel * --------------------------------------------------------------------------- * The one raised surface on either page, and the one place #1421 applies * literally: a translucent lift over whatever ground is behind it, plus a cast * shadow so it reads as ABOVE the page rather than as a wash painted on it. * No border. `--raise` is built from `--shade`, which stays dark through the * inversion, so the panel lifts in dark too. * ========================================================================= */ .wc-block-cart .wp-block-woocommerce-cart-order-summary-block, .wp-block-woocommerce-checkout-order-summary-block{ background:var(--paper); box-shadow:var(--raise); border:0;border-radius:var(--r-m); padding:26px 24px; } .wc-block-components-totals-item{ font-family:var(--sans);font-size:var(--t-meta);color:var(--text); } .wc-block-components-totals-item__label{color:var(--muted)} .wc-block-components-totals-item__value{color:var(--ink);font-weight:600} .wc-block-components-totals-wrapper{border-top:1px solid var(--line)} .wc-block-components-totals-wrapper:first-child{border-top:0} .wc-block-components-totals-footer-item{ font-family:var(--serif); } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:var(--t-title);font-weight:700;letter-spacing:var(--tr-title);color:var(--ink); } /* The order summary heading on checkout. */ .wc-block-components-order-summary .wc-block-components-panel__button{ font-family:var(--serif);font-size:var(--t-title);font-weight:500;letter-spacing:var(--tr-title);color:var(--ink); } .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-components-order-summary-item__description p{display:none} .wc-block-components-order-summary-item__image img{border-radius:var(--r-s);background:var(--sunken)} .wc-block-components-order-summary-item__quantity{ background:var(--ink);color:var(--bg);border:0; font-family:var(--sans);font-size:var(--t-label);font-weight:700; } /* Coupon panel — a disclosure, so it is a text control, not a box. */ .wc-block-components-panel__button{ font-family:var(--sans);font-size:var(--t-meta);font-weight:600;color:var(--accent); } /* =========================================================================== * 6. Buttons * --------------------------------------------------------------------------- * The same geometry and tokens as `:where(.ev26) .btn.accent` in * v26-components.css, restated rather than borrowed: these elements come out of * a React block and cannot be given a `.btn` class without editing core. * * Proceed-to-Checkout and Place-Order are full-width on purpose — they are the * one action on their column — but they are still pills, not the square slabs * the old `!important` fill produced. * ========================================================================= */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-button.wc-block-components-button:not(.is-link){ font-family:var(--sans);font-size:var(--t-meta);font-weight:700;letter-spacing:var(--tr-ui); border-radius:999px; background:var(--accent);border:1px solid var(--accent);color:var(--on-accent); box-shadow:none; transition:transform var(--fast) var(--ease),background var(--fast) var(--ease); } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-button.wc-block-components-button:not(.is-link):hover{ transform:translateY(-1px);background:var(--accent);color:var(--on-accent); } .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{padding:16px 24px;font-size:var(--t-meta)} /* Secondary Woo buttons (coupon Apply, "Return to cart"). Ghost, per the theme's .btn.ghost. */ .wc-block-components-button.outlined, .wc-block-components-button.is-link{ background:transparent;color:var(--ink); border:1px solid var(--line-strong);border-radius:999px; font-family:var(--sans);font-weight:600; } .wc-block-components-button.is-link{border:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px} /* =========================================================================== * 7. Checkout — steps and fields * --------------------------------------------------------------------------- * The step number was a hard 36px accent square hung 32px into the gutter with * three `!important`s. It is a circle now, sized off the type rather than off a * magic number, and the connector line between steps is a `--line` hairline * instead of being switched off — the line is the only thing that says the * steps are one sequence. * ========================================================================= */ .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before{ content:" " counter(checkout-step); display:grid;place-items:center; width:30px;height:30px;left:-46px; background:var(--accent);color:var(--on-accent); border-radius:999px; font-family:var(--sans);font-size:var(--t-meta);font-weight:700; } .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number{ padding:0 0 0 46px; } .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container::after{ border-left:1px solid var(--line); } .wc-block-components-checkout-step__title{ font-family:var(--serif);font-size:var(--t-title);font-weight:500;letter-spacing:var(--tr-title);color:var(--ink); } .wc-block-components-checkout-step__description{color:var(--muted);font-size:var(--t-meta)} /* Fields are a RECESS — the mirror of the raised summary panel, and the reason * the form reads as a form rather than as eleven rectangles drawn on the page. * * SPECIFICITY, measured not guessed. Woo ships * `.wc-block-components-form .wc-block-components-text-input input[type=text]` * at (0,3,1) with a hardcoded `background-color:#fff` and `color:#2b2d2f`. A * first attempt here at (0,2,1) lost every tie, so the dark checkout rendered * eleven WHITE fields on a near-black page — caught in the `after` capture, not * reasoned about. Each selector below therefore leads with the body class and * keeps Woo's own two, landing at (0,4,2). Woo's colours are literals, so there * is no way to reach them except to outrank them. * * THE ONE DELIBERATE BORDER ON THIS PASS. #1421 says do not solve a boundary by * drawing a rule, and no panel, card or well below has one. A text input is a * different object: it is an AFFORDANCE, not a surface — it has to say "type * here" before it is focused. In dark, --sunken resolves to #0A0C0B over a * #0F1211 ground, which is a real but very quiet step, so an unbordered field * would be nearly unfindable. A --line hairline, which inverts with the theme, * is the cheapest honest fix. Recorded as an exception rather than smuggled in. */ body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="text"], body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="email"], body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"], body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="number"], body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="url"], body.woocommerce-checkout .wc-block-components-form input[type="text"], body.woocommerce-checkout .wc-block-components-form input[type="email"], body.woocommerce-checkout .wc-block-components-form textarea, body.woocommerce-checkout .wc-block-components-form .wc-block-components-textarea, body.woocommerce-cart .wc-block-components-totals-coupon input[type="text"]{ background:var(--sunken);color:var(--ink); border:1px solid var(--line);border-radius:var(--r-m); font-family:var(--sans);font-size:var(--t-body); box-shadow:none; } body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label, body.woocommerce-checkout .wc-block-components-form label{color:var(--muted);font-family:var(--sans)} body.woocommerce-checkout .wc-block-components-form input:focus, body.woocommerce-checkout .wc-block-components-form textarea:focus{ background:var(--sunken);color:var(--ink); border-color:var(--accent); outline:2px solid var(--accent);outline-offset:1px; } /* The two : checkout.css sets * `.wc-blocks-components-select__container{background:#fff}` on the * WRAPPER and gives the select itself `background:none`. Painting the * select could only ever tint a white box that was already there. * * So: the wrapper carries the recess, the select stays transparent, and the * chevron — a hardcoded `fill:#2b2d2f`, invisible on a dark field — follows the * theme. Found by dumping the hydrated DOM and reading Woo's own stylesheet, * not by guessing at class names. */ body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container{ background:var(--sunken); border:1px solid var(--line);border-radius:var(--r-m); } body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select{ appearance:none;-webkit-appearance:none; background:none;border:0;color:var(--ink); font-family:var(--sans);font-size:var(--t-body); } body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus{ border:0;outline:2px solid var(--accent);outline-offset:1px; } body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label{color:var(--muted)} body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__expand{fill:var(--muted)} /* Woo draws a second outline as a ::after ring on the wrapper. One boundary is enough; the ring is the duplicate, so it goes. */ .wc-block-components-text-input::after, .wc-block-components-textarea::after, .wc-blocks-components-select::after{border:0} /* Checkboxes — the MailPoet consent block and "add a note". The old rules gave the label a border plus a `rgba(255,255,255,.53)` hover, which in dark was a near-white slab under white text. A recess on hover instead. */ .wc-block-components-checkbox label{ font-family:var(--sans);font-size:var(--t-body);color:var(--text); } #contact-fields .wc-block-components-checkbox label{ display:block;padding:14px 16px; border:0;border-radius:var(--r-m);background:var(--sunken); transition:background var(--fast) var(--ease); } #contact-fields .wc-block-components-checkbox label strong{color:var(--ink);font-weight:600} #contact-fields .wc-block-components-checkbox label em{color:var(--muted);font-style:italic} #contact-fields .wc-block-components-checkbox label:hover{ background:color-mix(in srgb,var(--recess) calc(var(--recess-a) * 2),transparent); } /* Woo ships `.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]` with a literal `background-color:#fff`, at (0,2,2). Matched here, or the box stays a white chip on the dark checkout. */ .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]{ border:1px solid var(--line-strong);border-radius:var(--r-s); background-color:var(--paper); } .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked{ background-color:var(--accent);border-color:var(--accent); } /* =========================================================================== * 8. Notices * --------------------------------------------------------------------------- * Both generations: the classic `.woocommerce-error/-info/-message` (raised by * the product page's add-to-cart POST) and the block `notice-banner` (raised * inside cart and checkout). Same surface model for both: a translucent lift * with a cast shadow and ONE coloured edge carrying the status. No fixed fill, * so they hold on the dark ground — the old rules put a `--shadow-md` grey * under them, which vanished in dark and left an unbounded block of text. * ========================================================================= */ .woocommerce-error, .woocommerce-info, .woocommerce-message, .wc-block-components-notice-banner{ background:var(--paper); box-shadow:var(--raise); border:0;border-left:3px solid var(--accent); border-radius:var(--r-m); font-family:var(--sans);font-size:var(--t-body);color:var(--text); margin:0 0 28px; } .woocommerce-error{border-left-color:var(--line-strong)} .wc-block-components-notice-banner.is-error{border-left-color:var(--line-strong)} .wc-block-components-notice-banner.is-success{border-left-color:var(--accent)} .wc-block-components-notice-banner > svg{fill:var(--muted)} .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{top:.8em;color:var(--accent)} .woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button{ display:inline-flex;float:none;position:static; font-family:var(--sans);font-size:var(--t-meta);font-weight:700; padding:9px 18px;border-radius:999px; background:var(--accent);color:var(--on-accent);border:0; } /* =========================================================================== * 9. The product-category archive * --------------------------------------------------------------------------- * `/product-category//` has no template in this theme, so it falls * through to index.php and renders WooCommerce's stock loop — a third visual * language on the site, and the destination the product breadcrumb points at. * It is styled here rather than given a template because the markup IS Woo's * and a template would only reproduce it. * * The result count and the sort dropdown stay hidden (inherited decision): a * four-product catalog does not need to be sorted, and "Showing all 3 results" * is the same count-noise #1450 removed sitewide. They are hidden, not * dequeued, so nothing breaks if the catalog grows. * ========================================================================= */ .woocommerce-result-count, .woocommerce-ordering{display:none} .woocommerce .woocommerce-products-header__title, .woocommerce .page-title{ display:block; /* basetags: h1:not(.show){display:none} */ font-family:var(--serif);color:var(--ink); font-weight:var(--disp-weight);letter-spacing:var(--disp-track); font-size:var(--t-d-sect);line-height:1.05;margin:60px 0 34px; } .woocommerce ul.products{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px; list-style:none;margin:0 0 80px;padding:0;border-width:0; } .woocommerce ul.products::before, .woocommerce ul.products::after{display:none} /* `body.woocommerce-page` on the front of every item rule below is load-bearing, not decoration. woocommerce-layout.css carries `.woocommerce.columns-3 ul.products li.product{width:30.75%}` at (0,3,2), which outranks a bare `.woocommerce ul.products li.product`. Left alone it composes catastrophically with the grid above: each item takes 30.75% OF ITS OWN 322px GRID COLUMN, so the cards rendered ~100px wide with the titles breaking one word per line. Prefixing lifts these to (0,4,3). */ body.woocommerce-page .woocommerce ul.products li.product{ margin:0;width:auto;float:none;display:flex;flex-direction:column;gap:12px; } body.woocommerce-page .woocommerce ul.products li.product a.woocommerce-loop-product__link{ display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit; } /* A recessed well, and the image sits IN it. The old rule faked hover with a 5px transparent border that turned accent — a 5px ring is a slab, and it also cropped the picture by 10px at rest. */ body.woocommerce-page .woocommerce ul.products li.product img{ width:100%;height:auto;border:0;margin:0; border-radius:var(--r-m);background:var(--sunken); transition:transform var(--fast) var(--ease); } body.woocommerce-page .woocommerce ul.products li.product a:hover img{transform:translateY(-2px)} body.woocommerce-page .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--serif);font-size:var(--t-lead);font-weight:500;letter-spacing:var(--tr-lead); color:var(--ink);padding:0;margin:0;text-transform:none; } /* Bug 1, FOURTH instance -- found by looking at the rendered category archive rather than at the two selectors the audit named. Same shelf, same fix as the shop list and the product page: the price is the other half of the ware's identity, so it shares the name's voice and is told apart by weight (700 against the title's 500), never by family. */ body.woocommerce-page .woocommerce ul.products li.product .price{ font-family:var(--serif);font-size:var(--t-lead);font-weight:700;letter-spacing:var(--tr-lead); color:var(--muted);background:none;padding:0;border-radius:0;line-height:1.4; } body.woocommerce-page .woocommerce ul.products li.product .price del{color:var(--faint);font-weight:400} body.woocommerce-page .woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--accent)} body.woocommerce-page .woocommerce ul.products li.product a.button{ align-self:flex-start;display:inline-flex;align-items:center; font-family:var(--sans);font-size:var(--t-meta);font-weight:700;letter-spacing:var(--tr-ui); padding:10px 18px;border-radius:999px; background:var(--accent);border:1px solid var(--accent);color:var(--on-accent); text-decoration:none;margin-top:2px; transition:transform var(--fast) var(--ease); } body.woocommerce-page .woocommerce ul.products li.product a.button:hover{transform:translateY(-1px)} .woocommerce a.added_to_cart{ display:inline-block;margin-top:6px; font-family:var(--sans);font-size:var(--t-meta);font-weight:600;color:var(--accent); text-decoration:underline;text-underline-offset:3px; } @media (max-width:900px){ .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px} } @media (max-width:560px){ .woocommerce ul.products{grid-template-columns:1fr;gap:30px} body.woocommerce-page .content.general{padding-left:22px;padding-right:22px;padding-bottom:64px} body.woocommerce-cart .content.general > .wp-block-heading, body.woocommerce-checkout .content.general > .wp-block-heading{margin:34px 0 24px} } /* =========================================================================== * 10. Order received / account * --------------------------------------------------------------------------- * Reachable the moment anyone downloads the plans. Not screenshot-verified on * this pass — placing an order requires a checkout POST, which is outside what * the headless runner does — so these are token substitutions on the rules that * were already there, nothing new. * ========================================================================= */ .woocommerce-page .woocommerce-order section{padding-left:0;padding-right:0} .woocommerce-page .woocommerce-order section h2{ font-family:var(--serif);font-size:var(--t-title);font-weight:500;letter-spacing:var(--tr-title);color:var(--ink); } ul.woocommerce-order-overview{ background:var(--paper);box-shadow:var(--raise); border:0;border-left:0;border-radius:var(--r-m); padding:22px 24px;list-style:none; font-family:var(--sans); } .woocommerce-page .related{ min-width:0;width:100%;padding:44px 0 0;border-top:1px solid var(--line); } .product_meta{display:none} /* Legacy brick price tags — the /lab/ and /art/ card grids still print these. */ :where(.brick-tags) .tag.price{color:var(--text);font-size:var(--t-meta);padding-left:0;opacity:.5} :where(.inverse) .brick-tags .tag.price{color:var(--bg)} .woocommerce .products ul.bricks-grid::after, .woocommerce .products ul.bricks-grid::before{display:none} .product-category{margin-bottom:var(--space-xl)}