/* * WooCommerce integration — commerce (product pages, cart, checkout, My Account) is a core part * of this product (BRD D5), but the theme never styled WooCommerce's own markup at all, so every * WooCommerce element (buttons, links, prices, sale badges, ratings, form fields, tabs) rendered * in WooCommerce's stock look, disconnected from the site's actual palette. * * Every rule below reads the same --nestling-* custom properties the rest of the theme uses * (theme/style.css's :root, overridden at runtime by the Customizer/Theme Options settings — see * inc/customizer-output.php). That's the point of doing this as ONE integration pass against * WooCommerce's own stable selectors, rather than template overrides: once written, every one of * these elements follows whatever palette an operator picks from here on, automatically — no * custom CSS needs writing again just because an operator changes their brand color. * * Deliberately NOT touched: `.woocommerce a.remove` (the cart's × remove-item link) and * `.woocommerce-message` / `.woocommerce-error` / `.woocommerce-info` (WooCommerce's own * success/error/info notices). Both carry semantic color (red = destructive/error, green = * success) that WooCommerce applies with `!important` — overriding that would trade a widely * understood convention for palette purity, which is the wrong trade for a "delete this item" or * "your payment failed" message. * * Only enqueued when WooCommerce is actually active (see inc/customizer-output.php) — no point * shipping this CSS to a site that isn't running it. */ /* * WooCommerce 11's own form fields carry a small design-token system of their own * (--wc-form-border-color/-width/-radius/-color-background/-color-text, set at :root by * WooCommerce's stylesheet and consumed by its more specific `.form-row .input-text`/`select` * rules — checkout/billing fields, for example). Redeclaring them here, once, on `.woocommerce` * lets every current AND future WooCommerce rule that reads them inherit the theme's palette * automatically, rather than this file having to out-specify each individual WooCommerce * selector one at a time as new ones turn up (exactly the checkout billing-field border color * that direct selector matching below couldn't reach, found live from a screenshot: WooCommerce's * own `.form-row .input-text` rule is more specific than a bare `.woocommerce input[type=...]` * selector could ever cleanly beat). */ .woocommerce { --wc-form-border-color: var(--nestling-line); --wc-form-border-width: 1px; --wc-form-border-radius: var(--nestling-radius-sm); --wc-form-color-background: var(--nestling-card); --wc-form-color-text: var(--nestling-ink); } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.4rem; border: 1px solid transparent; border-radius: var(--nestling-radius-md); background: var(--nestling-terracotta); color: #fff; font-family: var(--nestling-font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .woocommerce a.button:hover, .woocommerce a.button:focus, .woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce input.button:hover, .woocommerce input.button:focus, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus { background: var(--nestling-terracotta-ink); color: #fff; } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible, .woocommerce #respond input#submit:focus-visible { outline: 2px solid var(--nestling-terracotta-ink); outline-offset: 2px; } .woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce input.button.disabled, .woocommerce input.button:disabled { background: var(--nestling-line); color: var(--nestling-ink-soft); cursor: not-allowed; } /* * Every other WooCommerce link — My Account nav tabs, "Continue shopping", breadcrumbs, * order-again links, and so on — is a plain `a`, not `.button`. `:not(.button)` keeps this from * fighting the filled white button text color above (harmless either way, since the button rules * set color explicitly, but this is clearer), and `:not(.remove)` is the carve-out for the cart's * × explained in the file docblock. */ .woocommerce a:not(.button):not(.remove) { color: var(--nestling-terracotta); } .woocommerce a:not(.button):not(.remove):hover, .woocommerce a:not(.button):not(.remove):focus { color: var(--nestling-terracotta-ink); } /* Prices — the plain (non-sale) price, and the sale-price pairing (struck-through original + * new price), on both product-archive cards and the single-product page. */ .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--nestling-ink); font-family: var(--nestling-font-heading); } .woocommerce span.price del { color: var(--nestling-ink-soft); opacity: 1; text-decoration: line-through; } .woocommerce span.price ins { color: var(--nestling-terracotta); text-decoration: none; } /* The "Sale!" badge WooCommerce places on a discounted product — stock WooCommerce ships this * as a pink circle unrelated to any theme. */ .woocommerce span.onsale { background: var(--nestling-honey); color: #fff; font-family: var(--nestling-font-body); font-weight: 600; box-shadow: none; } /* Star ratings — matches the treatment .nestling-review-stars already uses elsewhere in this * theme (theme/style.css), so a WooCommerce-rendered rating and this theme's own review stars * read as the same visual language rather than two different star colors on the same page. */ .woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--nestling-honey); } /* Form fields — every text-like input, select, and textarea WooCommerce renders inside its own * `.woocommerce` wrapper: quantity steppers, the coupon field, checkout/My Account fields, AND * the shop archive's "Default sorting" dropdown (a standalone form outside checkout/account/cart * — missed by an earlier, narrower version of this rule that listed out specific contexts one at * a time instead of just matching the wrapper itself; broad-but-scoped is more robust here than * trying to enumerate every WooCommerce form WooCommerce might render). Scoped to `.woocommerce` * rather than a bare `input`/`select` selector so this never reaches into wp-admin or other * plugins' forms — WooCommerce applies that wrapper class consistently across every front-end * template (shop, single product, cart, checkout, My Account). */ .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="url"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce input[type="search"], .woocommerce textarea, .woocommerce select { border: 1px solid var(--nestling-line); border-radius: var(--nestling-radius-sm); background: var(--nestling-card); color: var(--nestling-ink); } .woocommerce input[type="text"]:focus, .woocommerce input[type="email"]:focus, .woocommerce input[type="tel"]:focus, .woocommerce input[type="url"]:focus, .woocommerce input[type="password"]:focus, .woocommerce input[type="number"]:focus, .woocommerce input[type="search"]:focus, .woocommerce textarea:focus, .woocommerce select:focus { border-color: var(--nestling-terracotta); outline: none; box-shadow: 0 0 0 1px var(--nestling-terracotta); } /* Single-product page tabs (Description / Reviews) — the active tab's underline/indicator. */ .woocommerce-tabs ul.tabs li a { color: var(--nestling-ink-soft); } .woocommerce-tabs ul.tabs li.active a { color: var(--nestling-ink); border-color: var(--nestling-terracotta); } .woocommerce-tabs ul.tabs li.active { border-color: var(--nestling-line); background: var(--nestling-card); } /* * The parental-consent checkbox WooCommerce's checkout injects just before "Place order" * (Compliance\ComplianceModule::renderConsentCheckbox(), hooked on * woocommerce_review_order_before_submit) wraps a full multi-sentence paragraph in a