/* ═══════════════════════════════════════════════════════════════════════════
   Hozio Studio — WooCommerce Styles
   Only loaded on WooCommerce pages (product, archive, cart, checkout).
   Token names match the hzo-* design system (visual-design-system.md).

   Scope: skins WC CORE templates (the markup WC renders with its own default
   classes) so the money pages read as the engine's design system: product
   loop cards, cart table + totals, checkout two-column + payment methods,
   account pages, notices, and the .woocommerce button family. Classic
   (shortcode) cart/checkout markup only — the Gutenberg cart/checkout BLOCKS
   render different markup and are not covered here.

   Conventions (match primitives.css):
     · tokens only — every color/space/radius/shadow is a var(--…)
     · mobile-first; desktop enhancements behind min-width queries
     · !important ONLY where WC core specificity forces it, each one
       commented (mirrors the trustindex.css / Fluent Forms precedent)
     · reduced-motion guard for anything that moves
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Product Gallery ────────────────────────────────────────────────────── */
.wc-product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.wc-gallery-main img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-input);
    cursor: zoom-in;
}

.wc-gallery-thumbs {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
}

.wc-gallery-thumb {
    flex: 0 0 80px;
    height: 80px;
    padding: 0;                     /* G15: reset the <button> to match the old <div> */
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-base) ease;
}
.wc-gallery-thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.wc-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-gallery-thumb.wc-thumb-active,
.wc-gallery-thumb:hover {
    border-color: var(--brand);
}

/* ─── Add to Cart ────────────────────────────────────────────────────────── */
.wc-add-to-cart-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.wc-add-to-cart-form .quantity input {
    width: 60px;
    text-align: center;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 16px; /* prevents iOS zoom */
}

.wc-out-of-stock {
    color: var(--error);
    font-weight: 600;
}

/* ─── Attributes Table ───────────────────────────────────────────────────── */
.wc-attributes-table {
    width: 100%;
    border-collapse: collapse;
}

.wc-attributes-table th,
.wc-attributes-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.wc-attributes-table th {
    font-weight: 600;
    color: var(--text-heading);
    width: 35%;
}

/* ─── Buttons — WC family → .hzo-btn treatment ───────────────────────────────
   WC renders its own button classes everywhere (loop add-to-cart, coupon,
   update cart, checkout, account). Two tiers, mirroring .hzo-btn:
     default .button  → outline (transparent, brand border/text) for secondary
                        actions: Apply coupon, Update cart, View, downloads
     .button.alt etc. → primary (accent fill): Proceed to checkout, Place
                        order, single Add to cart
   !important on background/color/border throughout this section: WC core ships
   `.woocommerce a.button.alt`-grade selectors (0,3,1) plus per-theme resets;
   the primitives.css .hzo-btn family already sets the same properties with
   !important, so parity here is required for the tokens to win. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: calc(var(--btn-padding-y, 14px) - 4px) calc(var(--btn-padding-x, 32px) - 10px);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--btn-weight, var(--fw-semibold, 600));
    line-height: 1;
    min-height: 44px;
    text-decoration: none;
    border-radius: var(--btn-radius, var(--radius-pill));
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform 0.1s;
    background: transparent !important;        /* !important: beats WC core .woocommerce a.button (bg #ebe9eb) */
    color: var(--btn-outline-color, var(--brand)) !important;   /* !important: beats WC core button color */
    border: 1px solid var(--btn-outline-color, var(--brand));
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--btn-outline-color, var(--brand)) !important;   /* !important: beats WC :hover bg */
    color: var(--btn-secondary-text, var(--text-on-brand)) !important; /* !important: beats WC :hover color */
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active { transform: translateY(1px); }
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Primary tier — accent fill (matches .hzo-btn--primary). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.checkout-button,
.woocommerce button.single_add_to_cart_button,
.woocommerce #place_order {
    background: var(--btn-primary-bg, var(--accent)) !important;     /* !important: beats WC .button.alt fill */
    color: var(--btn-primary-text, var(--text-on-accent)) !important; /* !important: beats WC .button.alt color */
    border-color: var(--btn-primary-bg, var(--accent));
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce #place_order:hover {
    background: var(--btn-primary-hover, var(--accent-text)) !important;   /* !important: beats WC hover fill */
    color: var(--btn-primary-hover-text, #fff) !important;                 /* bg darkens → flip text light (primitives pattern) */
    border-color: var(--btn-primary-hover, var(--accent-text));
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button:disabled[disabled] {
    opacity: 0.5 !important;   /* !important: WC core sets its own disabled palette with high specificity */
    cursor: not-allowed;
}

/* ─── Notices — WC banners → .hzo-alert treatment ────────────────────────────
   .woocommerce-message / -error / -info restyled to the .hzo-alert contract
   (left status rail, status bg/color pairs). WC's icon-font ::before and the
   fat left padding that reserves space for it are removed. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) var(--space-lg) !important;   /* !important: WC core reserves 3.5em left padding for its icon font */
    border: 0;
    border-left: 4px solid;
    border-radius: 4px;
    font-size: 15px;
    font-weight: var(--fw-medium, 500);
    line-height: 1.5;
    list-style: none;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-error li::before { content: none !important; }   /* !important: kills WC's icon-font glyph */
.woocommerce-message {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success-text, #166534);
}
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
    background: var(--color-info-bg, #EFF6FF);
    border-color: var(--color-info, #2563EB);
    color: var(--color-info, #2563EB);
}
.woocommerce-error {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--error-text, #991B1B);
}
.woocommerce-error li { margin: 0; }
/* Action link inside a notice (e.g. "Continue shopping") sits at the end. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { order: 2; margin-left: auto; }

/* ─── Quantity input — WC .quantity → .hzo-qty visual language ───────────────
   WC's cart/single templates render <div class="quantity"><input class="qty">.
   Skinned to read as the .hzo-qty capsule (pill, 44px touch target, centered
   numerals) without changing the native input semantics. */
.woocommerce .quantity .qty {
    width: 72px;
    min-height: 44px;
    padding: var(--space-sm);
    text-align: center;
    font-family: var(--font-body);
    font-size: 16px; /* prevents iOS zoom */
    font-weight: var(--fw-semibold, 600);
    font-variant-numeric: tabular-nums;
    color: var(--text-heading);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.woocommerce .quantity .qty:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px var(--brand-pale);
}

/* ─── Product loop — WC ul.products cards ────────────────────────────────────
   The native [products] renderer (used by [wc_product_loop]) emits
   ul.products > li.product.
   Cards read as .hzo-card: bordered surface, radius-card, soft rest shadow,
   hover lift on the clickable card. */
.woocommerce ul.products li.product {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    padding: var(--space-md);
    box-shadow: var(--card-shadow, var(--shadow-sm));
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: left;
}
.woocommerce ul.products li.product:hover {
    box-shadow: var(--card-hover-shadow, var(--shadow-lg));
    transform: translateY(-4px);
}
.woocommerce ul.products li.product a img {
    border-radius: var(--radius-input);
    margin: 0 0 var(--space-sm);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--fw-bold, 700);
    color: var(--text-heading);
    padding: 0;
}
.woocommerce ul.products li.product .price {
    color: var(--text-heading);
    font-weight: var(--fw-semibold, 600);
    font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del { color: var(--text-muted); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
/* Sale flash — brand pill, in-flow at the card corner. */
.woocommerce span.onsale {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 4px 12px;
    background: var(--brand);
    color: var(--text-on-brand);
    font-size: 0.75rem;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.4;
    border-radius: var(--radius-pill);
}
/* Star ratings stay universal amber (same rationale as trustindex.css). */
.woocommerce .star-rating span::before { color: #F5A623; }

/* Product-grid loading state — product-grid.js's refilter() sets aria-busy on
   the canonical [data-hzo-pg] root while a faceted query is in flight. Dim +
   freeze over the skeleton cards; the result is announced via hzo.announce. */
[data-hzo-pg] { transition: opacity var(--transition-base); }
[data-hzo-pg][aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
}
[data-hzo-pg]:focus { outline: none; }   /* programmatic re-anchor target, not a visual affordance */

/* ─── Cart page ──────────────────────────────────────────────────────────────
   The .woocommerce-cart-form table becomes a card surface; the totals box a
   second, elevated card. Two-column on desktop via grid on the .woocommerce
   wrapper (:has() — same support floor primitives.css already relies on);
   without :has support the layout falls back to WC's own stacked/float flow.
   Below 768px WC core's smallscreen stylesheet collapses the table rows
   (data-title labels) — we only re-skin, never restructure. */
@media (min-width: 1024px) {
    .woocommerce:has(.woocommerce-cart-form) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: var(--space-lg-2);
        align-items: start;
    }
    .woocommerce:has(.woocommerce-cart-form) .woocommerce-notices-wrapper { grid-column: 1 / -1; }
    .woocommerce .cart_collaterals .cart_totals {
        float: none;    /* WC layout css floats it right at 48% — the grid column owns width now */
        width: 100%;
    }
}

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    background: var(--card-bg, #fff);
    overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: var(--space-md);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.woocommerce table.shop_table thead th {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-alt);
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }

/* Line items */
.woocommerce-cart-form td.product-thumbnail img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-input);
    display: block;
}
.woocommerce-cart-form td.product-name a {
    color: var(--text-heading);
    font-weight: var(--fw-semibold, 600);
    text-decoration: none;
}
.woocommerce-cart-form td.product-name a:hover { color: var(--brand-text); }
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal {
    font-variant-numeric: tabular-nums;
    color: var(--text-heading);
}
.woocommerce-cart-form td.product-subtotal { font-weight: var(--fw-semibold, 600); }

/* Remove ✕ — mirrors .hzo-minicart__remove (quiet circle, warm on hover). */
.woocommerce table.shop_table td.product-remove a.remove {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: var(--fw-regular, 400);
    line-height: 1;
    color: var(--text-muted) !important;     /* !important: WC core hardcodes red on a.remove with !important */
    background: transparent;
    border-radius: 50%;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.woocommerce table.shop_table td.product-remove a.remove:hover {
    color: var(--error) !important;          /* !important: same WC core a.remove:hover !important fight */
    background: var(--error-bg);
}

/* Actions row: coupon + update button. */
.woocommerce-cart-form td.actions {
    background: var(--bg-alt);
    padding: var(--space-md);
}
.woocommerce-cart-form td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    float: none;
}
.woocommerce-cart-form td.actions .coupon .input-text {
    flex: 1 1 160px;
    min-height: 44px;
    padding: var(--input-padding, 12px 16px);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-body);
    background: var(--input-bg, #fff);
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--input-radius, var(--radius-input));
    transition: border-color 0.15s, box-shadow 0.15s;
}
.woocommerce-cart-form td.actions .coupon .input-text:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px var(--brand-pale);
}
@media (min-width: 640px) {
    .woocommerce-cart-form td.actions .coupon { max-width: 420px; }
    .woocommerce-cart-form td.actions button[name="update_cart"] { float: right; }
}

/* Totals box — the elevated summary card. */
.woocommerce .cart_collaterals .cart_totals {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}
.woocommerce .cart_totals h2 {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--fs-h3, 20px);
    color: var(--text-heading);
}
.woocommerce .cart_totals table.shop_table {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    padding: var(--space-sm) 0;
    background: transparent;
}
.woocommerce .cart_totals table.shop_table th {
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-body);
    width: 40%;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
    border-top: 1px solid var(--border);
    border-bottom: 0;
    font-size: 1.0625rem;
    color: var(--text-heading);
}
.woocommerce .cart_totals .order-total .amount {
    font-family: var(--font-number);
    font-weight: var(--fw-bold, 700);
}
.woocommerce .wc-proceed-to-checkout {
    padding: var(--space-md) 0 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}
.woocommerce a.shipping-calculator-button { color: var(--brand-text); }

/* Empty cart. */
.woocommerce .cart-empty.woocommerce-info,
.woocommerce .wc-empty-cart-message .woocommerce-info { justify-content: center; }
.woocommerce .return-to-shop { text-align: center; margin: var(--space-lg) 0 0; }

/* ─── Checkout ────────────────────────────────────────────────────────────────
   Two-column ≥1024px: fields left, order review right in an elevated, sticky
   summary. Grid directly on form.woocommerce-checkout (its children are
   #customer_details, #order_review_heading, #order_review). Mobile: natural
   single-column flow. */
@media (min-width: 1024px) {
    form.woocommerce-checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
        column-gap: var(--space-xl-2);
        align-items: start;
    }
    form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
    form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
    form.woocommerce-checkout #order_review {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        position: sticky;              /* summary keeps pace while the long field column scrolls */
        top: var(--space-lg);
    }
    /* Billing/shipping stack inside the left column (WC floats them 48/48,
       which would cramp the fields at this width). */
    form.woocommerce-checkout #customer_details .col-1,
    form.woocommerce-checkout #customer_details .col-2 {
        float: none;
        width: 100%;
    }
}

.woocommerce-checkout h3,
.woocommerce #order_review_heading {
    font-family: var(--font-heading);
    font-size: var(--fs-h3, 20px);
    color: var(--text-heading);
    margin: 0 0 var(--space-md);
}
form.woocommerce-checkout #customer_details .col-2 { margin-top: var(--space-lg); }

/* Field treatment — same tokens as .hzo-form (--input-*), so checkout inputs
   are pixel-identical to the engine's forms. !important on the field-level
   rules for the same reason primitives.css .hzo-form carries it: win against
   equal-specificity plugin/theme form CSS when source order isn't guaranteed. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: var(--input-padding, 12px 16px) !important;                       /* !important: .hzo-form parity */
    font-family: var(--font-body) !important;                                  /* !important: .hzo-form parity */
    font-size: 1rem !important;                                                /* !important: .hzo-form parity */
    color: var(--text-body) !important;                                        /* !important: .hzo-form parity */
    background: var(--input-bg, #fff) !important;                              /* !important: .hzo-form parity */
    border: 1px solid var(--input-border, var(--border)) !important;           /* !important: .hzo-form parity */
    border-radius: var(--input-radius, var(--radius-input)) !important;        /* !important: .hzo-form parity */
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--focus-ring) !important;      /* !important: pairs with the bordered rule above */
    box-shadow: 0 0 0 2px var(--brand-pale) !important;
}
.woocommerce form .form-row label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold, 600);
    color: var(--text-heading);
}
.woocommerce form .form-row .required { color: var(--error); text-decoration: none; }
.woocommerce form .form-row { margin-bottom: var(--space-md); }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--error) !important;           /* !important: pairs with the field rule above */
    box-shadow: 0 0 0 2px var(--error-bg) !important;
}

/* Select2 (WC's country/state dropdowns) — match the field treatment. */
.woocommerce .select2-container--default .select2-selection--single {
    min-height: 48px;
    padding: 10px 16px;
    background: var(--input-bg, #fff);
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--input-radius, var(--radius-input));
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    padding: 0;
    color: var(--text-body);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 10px; }
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px var(--brand-pale);
}
.select2-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--input-radius, var(--radius-input));
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand);
    color: var(--text-on-brand);
}

/* Order review card — elevated summary surface. */
.woocommerce-checkout #order_review {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}
.woocommerce-checkout #order_review table.shop_table {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    padding: var(--space-sm) 0;
    background: transparent;
    font-size: 0.9375rem;
}
.woocommerce-checkout #order_review table.shop_table thead th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
    border-top: 1px solid var(--border);
    font-size: 1.0625rem;
    color: var(--text-heading);
}
.woocommerce-checkout #order_review .order-total .amount {
    font-family: var(--font-number);
    font-weight: var(--fw-bold, 700);
}

/* Payment methods — .hzo-option-card rows (border, radius, brand ring when
   selected). WC's grey #payment box is flattened; each method becomes a card. */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
    margin-top: var(--space-md);
}
.woocommerce-checkout #payment ul.payment_methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 0 var(--space-md);
    margin: 0;
    border-bottom: 1px solid var(--border);
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    margin: 0;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    background: var(--card-bg, #fff);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
}
/* Selected row — brand ring. The wash pairs a brand-mixed SURFACE with an
   on-surface ink so it flips together with the archetype: on a light site
   it's ~--brand-pale on dark text; under Midnight it's a brand-tinted dark
   surface with light text (a bare --brand-pale wash would strand the
   --text-heading label as near-white on a light wash). */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface, #fff));
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    display: inline;
    font-weight: var(--fw-semibold, 600);
    color: var(--on-surface, var(--text-heading));
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
    accent-color: var(--brand);
    width: 18px;
    height: 18px;
    margin-right: var(--space-sm);
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
/* Method description panel — flat inset, no WC speech-bubble arrow. */
.woocommerce-checkout #payment div.payment_box {
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-alt);
    border-radius: var(--radius-input);
    color: var(--text-body);
    font-size: 0.875rem;
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }   /* WC's ::before triangle */
.woocommerce-checkout #payment .place-order { padding: var(--space-md) 0 0; }
.woocommerce-checkout #payment button#place_order {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--space-md); font-size: 0.875rem; color: var(--text-muted); }

/* Coupon toggle above the form reads as the info alert it wraps. */
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: var(--space-lg); }
.woocommerce form.checkout_coupon {
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-lg);
}

/* ─── Account pages ──────────────────────────────────────────────────────────
   Navigation as a clean list-tab rail; content region gets card surfaces.
   Two-column ≥900px via grid on the wrapper (:has(), same fallback story as
   the cart grid — without it WC's 30/68 float layout still applies). */
@media (min-width: 900px) {
    .woocommerce:has(.woocommerce-MyAccount-navigation) {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--space-xl-2);
        align-items: start;
    }
    .woocommerce .woocommerce-MyAccount-navigation,
    .woocommerce .woocommerce-MyAccount-content {
        float: none;    /* WC layout css floats these at 30%/68% */
        width: 100%;
    }
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px var(--space-md);
    border-radius: var(--radius-input);
    color: var(--text-body);
    font-weight: var(--fw-medium, 500);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--bg-alt);
    color: var(--text-heading);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--brand-pale);
    color: var(--brand-text);
    font-weight: var(--fw-semibold, 600);
}
.woocommerce-MyAccount-navigation ul li a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
    font-family: var(--font-heading);
    color: var(--text-heading);
}
/* Address / detail tiles as cards. */
.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-column {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    padding: var(--space-lg);
    box-shadow: var(--card-shadow, var(--shadow-sm));
}
.woocommerce-MyAccount-content .woocommerce-Address address { border: 0; padding: 0; }
/* Orders / downloads tables inherit the shop_table card treatment above. */
.woocommerce-MyAccount-content table.shop_table .button { min-height: 36px; padding: 8px 18px; font-size: 0.8125rem; }

/* Login / register forms (account page, logged out). */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
    max-width: 480px;
    padding: var(--space-lg);
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--card-radius, var(--radius-card));
    background: var(--card-bg, #fff);
    box-shadow: var(--card-shadow, var(--shadow-sm));
}
.woocommerce form.woocommerce-form-login .lost_password a { color: var(--brand-text); }

/* ─── Header cart-count badge (fragment contract) ────────────────────────────
   .hzo-cart-count is re-rendered by the woocommerce_add_to_cart_fragments
   filter in includes/wc-ajax.php. The stock header doesn't ship one yet — any
   theme that adds <span class="hzo-cart-count">0</span> beside its cart link
   opts in. NOTE: this stylesheet only loads on WC pages; if the fleet adopts
   a persistent header badge, move this block to primitives.css so it is
   styled on every page of a commerce site. */
.hzo-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--brand);
    color: var(--text-on-brand);
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    border-radius: var(--radius-pill);
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────
   Everything above that translates, lifts, or fades holds still. */
@media (prefers-reduced-motion: reduce) {
    .wc-gallery-thumb,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce table.shop_table td.product-remove a.remove,
    .woocommerce ul.products li.product,
    .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
    .woocommerce-MyAccount-navigation ul li a,
    [data-hzo-pg] {
        transition: none;
    }
    .woocommerce ul.products li.product:hover { transform: none; }
    .woocommerce a.button:active,
    .woocommerce button.button:active,
    .woocommerce input.button:active { transform: none; }
    form.woocommerce-checkout #order_review { position: static; }   /* sticky reads as motion while scrolling */
}