body.woocommerce-page main .container {
    padding: 1rem;
    padding-top: 0;
    font-family: var(--font-family-ui);
}




/*.woocommerce .content-area {
    padding: 1rem ;
}*/

@media screen and (min-width: 850px) {
    .woocommerce .woocommerce-breadcrumb,
    .woocommerce .woocommerce-products-header,
/*    .woocommerce .filter-buttons, */
    .woocommerce-result-count  {
        margin: 0 auto 0 120px;
        max-width: 1080px;
    }
}


.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button {
    background-color: var(--wp--preset--color--primary);
/*    color: var(--wp--preset--color--text-white);*/
}

/*Align vertical add to cart with quantity picker*/
.woocommerce form.cart {
    align-items: center;
    display: flex;
}

.woocommerce .single_add_to_cart_button,
.woocommerce-checkout .wc-block-checkout__actions_row button.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button {
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--dark-default) !important;
    border-radius: var(--radius-huge)  !important;
    padding: 0.9rem 1.9rem !important;
    font-size: 1rem !important;
    font-weight: bold;
}

.woocommerce a.button:hover {
    background-color: var(--wp--preset--color--primary-dark);
}

.woocommerce span.onsale {
    background: none !important;
    width: 60px;
    top: -1rem !important;
    right: -1rem !important;
/*    // background-color: var(--wp--preset--color--primary);*/
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price,
/* Stock line. WC paints "N in stock" in its olive `--wc-highlight` (#958e09),
   an off-brand pea-green; pin it to ink so it matches the variation
   availability line (which was already converted) on every product. */
.woocommerce div.product .stock,
.woocommerce-variation-availability .stock {
    color: var(--wp--preset--color--dark-default) !important;
}


.woocommerce a.button,
.woocommerce button {
/*  background: var(--wp--preset--color--dark-default) !important;*/
/*  color: var(--wp--preset--color--text-white);*/
  padding: var(--spacing-md) 1.25rem;
}


.woocommerce-breadcrumb a {
  display: inline;
}


/*.woocommerce ul.products li.product .price {
    color: var(--wp--preset--color--primary) !important;
}*/




body.woocommerce-page form label, 
body.woocommerce-page form input {
    font-family: var(--font-family-ui) !important;

}

@media screen and (min-width: 752px) {
    .wc-block-checkout__sidebar {
        position: sticky !important; 
        top: 2rem;
    }
}



/**
 * Single product galler
 * 
 */

.flex-control-nav.flex-control-thumbs {
    display: flex;
    list-style: none;
    gap: 1rem;
}

.flex-control-thumbs img {
    border-radius: var(--wp--custom--border-radius--card);
}



/* ==========================================================================
   WooCommerce Single Product Layout
   
   Two-column desktop layout (50/50), stacked on mobile.
   Fixed 1:1 aspect ratio on main gallery image to prevent height shifts
   when clicking through thumbnails. Images cropped to fill (object-fit: cover).
   
   Dependencies: --spacing-*, --radius-md, --radius-sm tokens from screen.css
   Scope: body.single-product (WooCommerce single product pages only)
   
   Place in woocommerce-overrides.css, replacing the previous single-product block.
   
   Key structural note:
     Flexslider injects a .flex-viewport wrapper around
     .woocommerce-product-gallery__wrapper and sets explicit inline height + width
     on both the viewport and each slide. The slides are floated with calculated
     widths (e.g. width: 468px). We cannot fight the float/width (Flexslider's JS
     recalculates on resize), but we CAN control the viewport height via
     aspect-ratio and position the slide content absolutely to fill it.
   
   Global reset conflict:
     screen.css has `img { height: auto; max-width: 100%; }` which prevents
     object-fit from working (object-fit requires explicit width AND height).
     Gallery img rules use !important to override this.
   ========================================================================== */


/* --- Content padding ---
   Adds horizontal breathing room on single product pages.
   Matches the 1rem padding used by .main-content-wrapper elsewhere.
   -------------------------------------------------------------------------- */
body.single-product .site-main {
    padding: 0 1rem;
    max-width: var(--wp--style--global--content-size, 1200px);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}


/* --- Two-column grid: gallery | summary ---
   WooCommerce default uses floats + explicit width on both
   .woocommerce-product-gallery and .summary. We override with grid on the
   parent and reset float/width on children.
   -------------------------------------------------------------------------- */
body.single-product div.product {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

@media (min-width: 781px) {
    body.single-product div.product {
        grid-template-columns: 1fr 1fr;
    }
}

/* Reset Woo's float-based layout on gallery and summary */
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-bottom: 0;
}

/* Tabs, related products, upsells, notices span full width below the two columns */
body.single-product div.product .woocommerce-tabs,
body.single-product div.product .related.products,
body.single-product div.product .up-sells,
body.single-product div.product .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}


/* --- Gallery: force fluid sizing ---
   Flexslider sets inline width on the gallery container and each slide.
   We override to make everything fluid within the grid column.
   -------------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery {
    overflow: hidden;
}

/* Flex-viewport: Flexslider injects this with an inline height (e.g. 468px).
   We kill the inline height and let aspect-ratio size it instead.
   position: relative creates the containing block for absolutely-positioned
   wrapper inside. */
body.single-product .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    position: relative;
}

/* Gallery wrapper — Flexslider sets width: 800% + transform for sliding.
   Absolute positioning pins it to the viewport's exact dimensions so
   floated children resolve height correctly against the aspect-ratio box. */
body.single-product .woocommerce-product-gallery__wrapper {
/*    position: absolute !important;*/
    inset: 0;
}

/* Individual slides — Flexslider sets inline width + float on each.
   The float/width are needed for Flexslider's slide math, so we keep them.
   We just ensure each slide fills the viewport height. */
body.single-product .woocommerce-product-gallery__image {
    height: 100% !important;
    overflow: hidden;
}

/* Slide images — object-fit: cover crops non-square images to fill the 1:1
   viewport. !important on height and object-fit is required to override the
   global `img { height: auto; max-width: 100%; }` reset in screen.css.
   Without explicit height, object-fit has no effect — the image renders at
   its natural aspect ratio and overflows. */
body.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}


/* --- Gallery thumbnails ---
   Evenly sized square thumbs in a horizontal row.
   -------------------------------------------------------------------------- */
body.single-product .flex-control-thumbs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm) !important;
    padding: 0;
    list-style: none;
}

body.single-product .flex-control-thumbs li {
    flex: 1;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

body.single-product .flex-control-thumbs li:hover,
body.single-product .flex-control-thumbs li .flex-active {
    opacity: 1;
}

body.single-product .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}


/* --- Description: remove tab chrome ---
   Since the Additional Information tab is removed via PHP and only the
   Description tab remains, we strip the tab UI entirely and show the
   description content inline. The tab panel content stays visible.
   -------------------------------------------------------------------------- */
body.single-product .woocommerce-tabs ul.tabs {
    display: none !important;
}

/* Remove the redundant "Description" heading WooCommerce adds inside the panel */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child {
    display: none;
}

/* Reset panel styling — no tab-like chrome, just content */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}












/**
 * remove from cart in sheet
 **/
.notification-cart-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cart-item-remove {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    
    padding: 0.25rem;
    line-height: 1;

    background: #ecebeb !important;
    color: var(--wp--preset--color--bg-darker) !important;

    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    padding: 0 !important;
}
.cart-item-remove:hover {
    color: var(--wp--preset--color--dark-default, #333);
}










/* ==========================================================================
   Variation Chips
   
   Replaces WooCommerce variation <select> with tappable chip buttons.
   Reuses the site's existing .chip design tokens (font-family-ui, radius-sm,
   spacing-*, font-weight-semibold).
   
   Dependencies: variation-chips.js, existing design tokens from screen.css
   Scope: body.single-product table.variations
   
   Append to woocommerce-overrides.css after the single product layout block.
   ========================================================================== */

/* Hide the native select when chips are active */
body.single-product .variation-select--hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    min-width: 0 !important;
}

body.single-product .variation-select--hidden + .variation-chips + .reset_variations {
    display: none !important;
}  

/* Also hide the table layout — label becomes unnecessary with chips */
body.single-product table.variations {
    border: none;
}

body.single-product table.variations th.label {
    display: none;
}

body.single-product table.variations td.value {
    display: block;
    padding: 0;
}

/* Chip container */
.variation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Individual chip */
.variation-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.125rem;
    min-height: 40px;
    min-width: 56px;
    font-size: 0.9375rem;           /* 15px */
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-ui);
    line-height: 1;
    color: var(--wp--preset--color--dark-default);
    background: var(--apple-field-bg, #fff);
    border: 1.5px solid var(--apple-field-border, #d1d1d6);
    border-radius: 980px;           /* Pill shape */
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Hover */
@media (hover: hover) {
    .variation-chip:not(:disabled):hover {
        border-color: var(--wp--preset--color--dark-default);
    }
}

/* Focus visible (keyboard nav) */
.variation-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--apple-focus-ring, rgba(0, 125, 250, 0.25));
}

/* Active / selected */
.variation-chip--active {
    background: var(--wp--preset--color--dark-default);
    border-color: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white, #fff);
}

@media (hover: hover) {
    .variation-chip--active:not(:disabled):hover {
        background: var(--wp--preset--color--dark-default);
        border-color: var(--wp--preset--color--dark-default);
    }
}

/* Disabled / unavailable */
.variation-chip--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}




#wc-stripe-express-checkout-element {
/*    background: blue;*/
    min-height: 150px;
    display: block !important;
}











/* =============================================================================
   Nav Cart Item
   Styles the cart <li> injected by inc/nav-cart.php into .nav-primary.

   Mobile  (<851px): renders as a full-width row at the bottom of the
                     fullscreen overlay nav list, matching sibling link style.
   Desktop (≥851px): renders as an icon-only pill, sitting to the right
                     of the My Account icon.
   ============================================================================= */


/* =============================================================================
   Suppress WooCommerce's native add-to-cart button spinner.
   WC adds a CSS ::after spinner via the .loading class on
   .single_add_to_cart_button. CartButtonController injects its own
   .btn-spinner, so the native one must be hidden to prevent two spinners
   appearing simultaneously.
   ============================================================================= */

.single_add_to_cart_button.loading::after {
    display: none !important;
}





@media (max-width: 2px) {
    .wc-block-cart .wc-block-cart__submit-container--sticky {
        position: relative !important;
    }
}














/* ==========================================================================
   Product Card — Loop Integration
   woocommerce-overrides.css (append)

   Purpose:
     Bridges WooCommerce's product loop output (now using the card component
     via content-product.php override) with the existing card design system.
     Handles sale badge positioning, price styling, and grid reset so the
     <ul.products> behaves like the theme's .grid utility.

   Dependencies:
     - Card component CSS from screen.css (.card, .card__media, .card__body, etc.)
     - content-product.php template override (outputs .card.card-product markup)
     - woocommerce_sale_flash filter (SVG badge — already in woocommerce.php)

   Scope:
     .card-product (product-specific card variant)
     .woocommerce ul.products (WooCommerce product grid containers)

   ========================================================================== */


/* --- Product grid: reset WooCommerce's float-based layout ---
   WC applies floats + percentage widths to li.product via inline column
   classes (columns-2, columns-3, columns-4). We replace all of that with
   the theme's grid pattern. The column count still follows WC's setting
   via the .columns-N class — we just implement it with CSS grid instead
   of floats.
   -------------------------------------------------------------------------- */

.woocommerce ul.products::before {
    display: none; 
}
/* minmax(0, 1fr), not bare 1fr: bare 1fr = minmax(auto, 1fr), and the
 * card images' intrinsic min-content size can lock the track width in
 * Safari/WebKit — cards shrink with the window but never re-expand when
 * it grows. minmax(0, 1fr) removes the auto minimum so tracks stay
 * fluid in both directions in every engine. */
.woocommerce ul.products {
    display: grid;
    gap: var(--grid-gap, var(--spacing-xl));
    list-style: none;
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Float reset — WC sets float: left + width: 48% etc. on li.product */
.woocommerce ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

/* Column variants — match WC's columns-N classes */
@media (min-width: 768px) {
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Content frame for WooCommerce TAXONOMY archives (product categories, tags,
   attribute terms — e.g. /product-category/food/). /shop/ is wrapped by the
   ssb-shop plugin's .shop-zone (centered, max-width 1280, gutters 18px→40px), so
   its grid is constrained; bare taxonomy archives have no such wrapper and the
   grid ran edge-to-edge. Re-create the identical shop frame here so storefront
   archives read consistently. min(1280, 100% - gutters) matches .shop-zone at
   every width (40px gutters ≥1280, 18px floor on mobile). :not(post-type-archive-
   product) leaves the plugin-wrapped /shop/ untouched. */
body.woocommerce.archive:not(.post-type-archive-product) ul.products {
    width: min(1280px, calc(100% - clamp(36px, 6.25vw, 80px)));
    margin-inline: auto;
}

/* Cards inside the product grid fill their cell (no max-width cap) */
.woocommerce ul.products li.product .card {
    max-width: none;
    margin-bottom: 0;
    height: 100%;
}

/* Product loop image — beat WooCommerce default specificity.
   WC's `ul.products li.product a img { width:100%; height:auto; margin:0 0 1em }`
   has higher specificity than `.card__media img` and overrides the theme's
   cover/aspect-ratio layout. Symptom: on hover (and always on sale cards where
   .card__media is overflow:visible) the image's intrinsic height + 1em margin
   pushes the media well taller than its 1:1 aspect-ratio, making the thumbnail
   appear to grow. Reset width/height/margin here at matching specificity. */
.woocommerce ul.products li.product a.card-product .card__media img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    display: block;
    box-shadow: none;
}


/* --- Sale badge: absolute inside .card__media ---
   Positioned top-left so it overlays the product image.
   Targets .onsale directly because the woocommerce_sale_flash filter
   (ssb_add_custom_svg_sale_badge) replaces the entire element and outputs
   <span class="onsale"><img .../></span> — any extra classes passed in
   the template fallback are discarded.
   -------------------------------------------------------------------------- */

.card-product .card__media {
    position: relative;
}
.product.sale .card-product,
.product.sale .card-product .card__media {
    overflow: visible;

}

.product.sale .card-product .card__media img {
    border-top-left-radius: var(--radius-card); 
    border-top-right-radius: var(--radius-card); 
}

.card-product .card__media > .sale {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1;
    /* Reset any default WC badge styles (background, padding, etc.) since
       the SVG badge is self-contained. */
    background: none;
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    border-radius: 0;
}

/* SVG badge — size the img inside .onsale */
.card-product .card__media > .onsale img {
    display: block;
    width: 48px;
    height: auto;
}


/* --- Price inside card body ---
   Inherits card__body's flex column layout. Sits below the title.
   Reuses WC's .price class for del/ins sale formatting.
   -------------------------------------------------------------------------- */

.card--bleed.card-product .card__price.price,
.card-product .card__price.price  {
    font-size: 0.875rem  !important;         /* 15px */
    font-weight: var(--font-weight-semibold)  !important;
    color: var(--card-accent-text-secondary) !important;
    line-height: 1.4;
}

/* Sale pricing — struck-through original + highlighted sale price */
.card-product .card__price del {
    opacity: 0.5;
    font-weight: normal;
}


.card-product .card__price ins {
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}


/* --- Related / upsell / cross-sell section grids ---
   These sections output their own <ul.products> but may have different
   column defaults. Ensure they also get the grid treatment.
   -------------------------------------------------------------------------- */

/* minmax(0,1fr) — same Safari track-lock fix as the main shop grid above. */
.related.products ul.products,
.up-sells ul.products,
.cross-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .related.products ul.products,
    .up-sells ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .related.products ul.products,
    .up-sells ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}















/* ==========================================================================
   Shop Sort — Custom Listbox
   
   Replaces WooCommerce's native ordering <select> with a chip-trigger +
   listbox popover that matches the site's design system.
   
   Dependencies: .chip (screen.css), design tokens from :root
   Scope: .shop-sort (only present on shop/archive pages)
   
   Append to woocommerce-overrides.css.
   ========================================================================== */


/* ── 0. Hide native WC ordering form ──────────────────────────────────────
   The <form> stays in the DOM (source of truth for the <select> value),
   but is visually hidden. The custom .shop-sort UI sits beside it.
   ──────────────────────────────────────────────────────────────────────── */

form.woocommerce-ordering {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.shop-sort-native--hidden {
    /* Belt and suspenders — in case the form isn't hidden */
    position: absolute !important;
    opacity: 0;
    pointer-events: none;
}


/* ── 1. Wrapper — positioning context ─────────────────────────────────── */

.shop-sort {
    position: relative;
    display: inline-flex;
    z-index: 10;  /* Sit above product cards when listbox is open */
}


/* ── 2. Trigger button ────────────────────────────────────────────────── *
 *  Inherits .chip base styles (font, padding, radius, min-height).
 *  Adds a right-side caret and interactive states specific to sorting.
 * ──────────────────────────────────────────────────────────────────────── */

.shop-sort__trigger {
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
    border: 2px solid var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--dark-default);
    background: transparent;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.shop-sort__trigger:hover,
.shop-sort__trigger:focus-visible {
    background-color: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white, #fff);
}

/* Expanded state — visually "active" to connect trigger to open listbox */
.shop-sort__trigger[aria-expanded="true"] {
    background-color: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white, #fff);
}


/* ── 3. Caret ─────────────────────────────────────────────────────────── */

.shop-sort__caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.shop-sort__trigger[aria-expanded="true"] .shop-sort__caret {
    transform: rotate(180deg);
}


/* ── 4. Listbox popover ───────────────────────────────────────────────── */

.shop-sort__listbox {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    right: 0;
    min-width: 200px;
    max-width: 260px;
    margin: 0;
    padding: var(--spacing-xs) 0;
    list-style: none;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-default, #e0e0e0);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0s linear 0.15s;
}

.shop-sort__listbox--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0s linear 0s;
}


/* ── 5. Option items ──────────────────────────────────────────────────── */

.shop-sort__option {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.8125rem;
    font-family: var(--font-family-ui);
    font-weight: var(--font-weight-normal, 400);
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s ease;
    outline: none;
}

.shop-sort__option:hover,
.shop-sort__option:focus-visible {
    background-color: var(--surface-secondary, #f5f5f5);
}

.shop-sort__option--active {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--wp--preset--color--primary, #d32f2f);
}


/* ── 6. Loading state during AJAX fetch ───────────────────────────────── */

ul.products.shop-sort--loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}









/* ==========================================================================
   Shop Toolbar
   
   Unified control bar above the product grid containing filter chips (left),
   item count (inline), and sort dropdown (right).
   
   Dependencies: .chip (screen.css), .shop-sort (woocommerce-overrides.css),
                 design tokens from :root
   Scope: .shop-toolbar (main shop page only)
   
   This section REPLACES the old "Shop Category Filter — 1. Chip bar" styles
   in screen.css. The product grid and transition state styles (sections 2–3)
   remain unchanged.
   ========================================================================== */


/* ── 1. Toolbar — flex row, chips left, sort right ────────────────────── */

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg, 1.5rem);
}


/* ── 2. Left side: filters + item count ───────────────────────────────── */

.shop-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    min-width: 0;                     /* Allow flex shrink for scroll */
    flex: 1;
}


/* ── 2b. Facet groups — label + chip row per filter axis ──────────────── *
 *  The toolbar carries two facets: Type (product_cat chips, incl. All) and
 *  Fit (pa_fit chips). Each sits in a .filter-group with a quiet uppercase
 *  label; a hairline divider separates the two on desktop. Active-state
 *  styling is unchanged — the engine paints data-filter-status the same in
 *  both groups (single active chip per [data-filter-group]).
 * ──────────────────────────────────────────────────────────────────────── */

.shop-toolbar .filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;                     /* Allow inner chip row to shrink + scroll */
}

.shop-toolbar .filter-group__label {
    font-family: 'Bowlby One SC', sans-serif;
    font-size: 0.875rem;              /* tiny preset — sanctioned tracked-cap sub-16px */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--dark-default);
    opacity: 0.6;
    white-space: nowrap;
    flex-shrink: 0;
}

.shop-toolbar .filter-group + .filter-group {
    border-left: 1px solid var(--hairline-ink);
    padding-left: var(--spacing-lg);
}


/* ── 2c. Fit segmented toggle ─────────────────────────────────────────── *
 *  The menu food/bar switcher pattern (screen.css .menu-intro__toggle,
 *  ~7103) adapted to the toolbar's LIGHT ground: ink hairlines/text where
 *  the menu version used white-based color-mix, three cells instead of
 *  two (Everyone | Women's | Men's — the leading cell is the explicit
 *  clear), no icons. The red ::before indicator slides between cells via
 *  [data-active], stamped by the filter engine. New selector namespace on
 *  purpose — do NOT reuse .menu-intro__toggle* (it bakes dark-ground
 *  colors).
 * ──────────────────────────────────────────────────────────────────────── */

.fit-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--hairline-ink);
    border-radius: var(--wp--custom--border-radius--sm, 4px);
    background: transparent;
    overflow: hidden;            /* Clip the sliding indicator to the 4px corners */
    position: relative;          /* Anchor + stacking context for ::before */
    isolation: isolate;
}

/* Sliding red indicator. width = one cell (33.333% of 3 cells), so each
 * translateX(100%) step advances exactly one cell — same math as the menu
 * switcher's 50%/100% with two cells. */
.fit-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 33.333%;
    height: 100%;
    background-color: var(--wp--preset--color--accent, #d32f2f);
    z-index: 0;
    transform: translateX(0);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fit-toggle[data-active="womens"]::before {
    transform: translateX(100%);
}

.fit-toggle[data-active="mens"]::before {
    transform: translateX(200%);
}

/* .woocommerce-scoped to outweigh the generic `.woocommerce button`
 * padding reset at the top of this file (0,1,1 vs the bare cell's 0,1,0 —
 * see feedback_wc_default_specificity). min-height asserts the 48px cell
 * regardless of padding fights. */
.woocommerce .fit-toggle__cell,
.fit-toggle__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 5.5rem;           /* Equal cells, sized to "Everyone" */
    min-height: 48px;            /* Above the 44px touch floor */
    padding: 0.875rem 1.25rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    /* Recessive ink (the menu version's 65% white, re-tokened for light ground) */
    color: color-mix(in srgb, var(--wp--preset--color--dark-default, #303333) 65%, transparent);
    background-color: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, background-color 0.18s ease;
    position: relative;
    z-index: 1;                  /* Sit above the sliding red indicator */
}

/* Hairline divider between cells (ink, not the menu's white-based one);
 * suppressed next to the active cell — the red fill terminates the
 * division cleanly. */
.fit-toggle__cell + .fit-toggle__cell {
    box-shadow: inset 1px 0 0 var(--hairline-ink);
}

.fit-toggle__cell.is-active,
.fit-toggle__cell.is-active + .fit-toggle__cell {
    box-shadow: none;
}

.fit-toggle__cell.is-active {
    color: var(--wp--preset--color--text-white, #fefefe); /* on red: 5.25:1 AA */
}

.fit-toggle__cell:not(.is-active):hover,
.fit-toggle__cell:not(.is-active):focus-visible {
    color: var(--wp--preset--color--dark-default, #303333);
    background-color: color-mix(in srgb, var(--wp--preset--color--dark-default, #303333) 6%, transparent);
}

/* Inset ring: the container's overflow:hidden (needed to clip the sliding
 * indicator) would crop an outside ring on every edge — draw it inside
 * the cell instead. Ink reads on both the cream inactive cell and the red
 * active fill (4.6:1, clears the 3:1 non-text bar). */
.fit-toggle__cell:focus-visible {
    outline: 2px solid var(--wp--preset--color--dark-default, #303333);
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .fit-toggle::before { transition: none; }   /* indicator pops to destination */
    .fit-toggle__cell { transition: none; }
}

/* Zero-result preview: a facet option that would produce an empty grid
 * against the other axis grays out (engine stamps data-filter-empty +
 * aria-disabled). Treatment matches .variation-chip--disabled. Hover
 * affordances are suppressed so the option reads inert. */
.shop-toolbar .filter-btn[data-filter-empty],
.woocommerce .fit-toggle__cell[data-filter-empty],
.fit-toggle__cell[data-filter-empty] {
    opacity: 0.35;
    cursor: not-allowed;
}

.fit-toggle__cell[data-filter-empty]:not(.is-active):hover {
    color: color-mix(in srgb, var(--wp--preset--color--dark-default, #303333) 65%, transparent);
    background-color: transparent;
}


/* Sort row label — mobile-only (the sort joins the labeled-row rhythm
 * below 600px; desktop keeps the bare right-aligned trigger). */
.shop-toolbar__sort-label {
    display: none;
}


/* ── 3. Filter chip row — horizontal scroll on overflow ───────────────── */

.shop-toolbar .filter-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
}

.shop-toolbar .filter-buttons::-webkit-scrollbar {
    display: none;                    /* Chrome/Safari */
}


/* ── 4. Filter chip button states ─────────────────────────────────────── *
 *  Inherits .chip base from screen.css. These rules add interactive
 *  states specific to the shop filter context.
 * ──────────────────────────────────────────────────────────────────────── */

.shop-toolbar .filter-btn {
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.3s cubic-bezier(0.625, 0.05, 0, 1),
        color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
    border: 2px solid transparent;
}

.shop-toolbar .filter-btn[data-filter-status="not-active"] {
    color: var(--wp--preset--color--dark-default);
    border: 2px solid var(--wp--preset--color--dark-default);
}

.shop-toolbar .filter-btn[data-filter-status="active"] {
    background-color: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white, #fff);
}


/* ── 5. Item count — subtle, secondary text ───────────────────────────── */

.shop-toolbar__count {
    font-family: var(--font-family-ui);
    font-size: 0.8125rem;             /* 13px — matches chip text */
    font-weight: var(--font-weight-normal, 400);
    color: var(--text-tertiary, #999);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}


/* ── 6. Right side: sort dropdown ─────────────────────────────────────── */

.shop-toolbar__sort {
    flex-shrink: 0;
}


/* ── 7. Mobile layout ─────────────────────────────────────────────────── *
 *  Below 600px: toolbar stacks. Each facet group becomes its own labeled
 *  row with an independent horizontal scroll — sharing one scroll row
 *  would bury the Fit chips off-screen past the type list. The vertical
 *  hairline divider drops (rows are separated by the gap instead).
 * ──────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 600px) {
    .shop-toolbar {
        flex-wrap: wrap;
    }

    .shop-toolbar__filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .shop-toolbar .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .shop-toolbar .filter-group + .filter-group {
        border-left: none;
        padding-left: 0;
    }

    .shop-toolbar .filter-group .filter-buttons {
        width: 100%;                   /* Each row scrolls independently */
    }

    .shop-toolbar .filter-btn {
        min-height: 44px;              /* Touch-target floor */
    }

    /* Fit toggle stretches to a full row of three equal 48px cells */
    .shop-toolbar .fit-toggle {
        width: 100%;
    }

    /* Sort becomes the last labeled row of the stack (Type → Fit → Sort):
     * quiet "Sort" label left, trigger chip right. Replaces the old
     * margin-left:auto float-right orphan. */
    .shop-toolbar__sort {
        width: 100%;
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .shop-toolbar__sort-label {
        display: block;
        margin-right: auto;            /* Label left, trigger right */
    }
}









/* ==========================================================================
   Quantity Stepper
   v1.0.0

   Styles the −/+ buttons injected by ssb_qty_stepper_minus/plus hooks.
   Layout mirrors the WC Cart Block stepper (wc-block-components-quantity-
   selector): horizontal row with minus | input | plus.

   Scope:
     .quantity:has(.ssb-qty-stepper__btn)
     Only applies when stepper buttons are present (classic templates).
     The WC Cart/Checkout Blocks render their own stepper with different
     markup and are unaffected.

   Dependencies: --font-family-ui, --wp--preset--color--* tokens from
   screen.css / theme.json.
   ========================================================================== */

/* --- Wrapper: flexbox row for minus | input | plus --- */
.quantity:has(.ssb-qty-stepper__btn) {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--apple-field-border, #d2d2d7);
    border-radius: var(--apple-radius, 12px);
    overflow: hidden;
    background: var(--apple-field-bg, #fff);
}

/* --- Shared button reset --- */
.ssb-qty-stepper__btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: var(--apple-height, 44px);
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--wp--preset--color--dark-default, #1d1d1f);
    font-family: var(--font-family-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) {
    .ssb-qty-stepper__btn:hover {
        background-color: color-mix(in srgb, var(--wp--preset--color--dark-default, #1d1d1f) 6%, transparent);
    }
}

.ssb-qty-stepper__btn:active {
    background-color: color-mix(in srgb, var(--wp--preset--color--dark-default, #1d1d1f) 12%, transparent);
}

/* --- Input: strip native number chrome, center text --- */
.quantity:has(.ssb-qty-stepper__btn) input.qty {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: center;
    width: 48px !important;
    min-height: auto !important;
    padding: 0 !important;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-family-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    color: var(--wp--preset--color--dark-default, #1d1d1f);
    -moz-appearance: textfield;
}

.quantity:has(.ssb-qty-stepper__btn) input.qty::-webkit-outer-spin-button,
.quantity:has(.ssb-qty-stepper__btn) input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove focus ring from input when inside stepper (wrapper gets it instead) */
.quantity:has(.ssb-qty-stepper__btn) input.qty:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Wrapper focus-within ring --- */
.quantity:has(.ssb-qty-stepper__btn):focus-within {
    border-color: var(--apple-focus, #007aff);
    box-shadow: var(--apple-shadow-rest, none), var(--apple-shadow-focus, 0 0 0 4px rgba(0, 122, 255, 0.25));
}


/* ==========================================================================
   iOS-notifications plugin — brand re-skin
   ==========================================================================
   Re-skins the ios-notifications-block plugin (cart bottom-sheet, banner
   toasts, inline alerts) from its default iOS palette to the State Street
   Brats brand. We override the plugin's concrete selectors here rather than
   editing the third-party plugin; this stylesheet is enqueued AFTER
   `ios-notifications-styles` (see the conditional dependency in functions.php)
   so matched specificity wins on source order — no !important needed except
   where the plugin itself uses it.

   Brand constants are hardcoded because the canonical --ssb-* tokens are
   section-scoped (screen.css:4849) and do NOT resolve on this body-level
   overlay. Ink/cream are stable brand constants; tan/red/dark use the global
   --wp--preset--color--* presets with hex fallbacks.
     ink  #0F0F0F / ink-soft #1A1A1A   cream #EFE2C7   cream surface #fbf7f0
   Philosophy: brand chrome (sheet, buttons, neutrals, the iOS-blue accents)
   is fully re-skinned; alert SEMANTICS (success-green / warning-amber /
   error-red) stay legible, warm-tuned, with error mapped to the brand red.
   ========================================================================== */

/* --- Bottom sheet surface & structure --- */
.bottom-sheet {
    background: rgba(251, 247, 240, 0.94); /* warm cream (--surface-form-box) */
    box-shadow: 0 -4px 24px rgba(15, 15, 15, 0.18);
}
.sheet-overlay {
    background: rgba(15, 15, 15, 0.45); /* warm ink scrim */
}
.sheet-handle {
    background: var(--wp--preset--color--primary, #c2a488);
}
.sheet-header {
    border-bottom: 1px solid rgba(201, 168, 119, 0.30);
}
.sheet-actions {
    background: rgba(251, 247, 240, 0.96);
    border-top: 1px solid rgba(201, 168, 119, 0.30);
}
.sheet-title {
    color: #0F0F0F;
}
.sheet-message {
    color: var(--wp--preset--color--dark-default, #303333);
}
.sheet-app-name,
.sheet-time {
    color: var(--wp--preset--color--primary-dark, #a38f79); /* decorative microcopy only */
}
.sheet-details {
    background: #ffffff;
}
.sheet-details p {
    color: var(--wp--preset--color--dark-default, #303333);
}

/* --- Sheet buttons (echo .btn-box--ink / .btn-box--ghost-ink) ---
   Primary maps to brand INK, not tan: white/cream on tan #c2a488 fails
   contrast (~1.9:1); cream on ink is ~14.5:1. */
.sheet-btn-primary {
    background: #0F0F0F;
    color: #EFE2C7;
}
.sheet-btn-primary:hover {
    background: #1A1A1A;
}
.sheet-btn-secondary {
    background: transparent;
    color: #0F0F0F;
    border: 1.5px solid #0F0F0F;
}
.sheet-btn-secondary:hover {
    background: #0F0F0F;
    color: #EFE2C7;
}
.sheet-btn:focus,
.sheet-btn:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 2px;
}

/* --- Cart item rows & upsell --- */
.notification-cart-item {
    background: #ffffff;
}
.cart-item-name,
.cart-item-price {
    color: #0F0F0F;
}
.cart-item-quantity {
    color: var(--wp--preset--color--dark-default, #303333); /* qty is load-bearing info */
}
.notification-cart-total {
    border-top: 2px solid rgba(201, 168, 119, 0.50);
    color: #0F0F0F;
}
.upsell-add-btn {
    background: var(--wp--preset--color--accent, #d32f2f); /* "add" = positive accent */
}
.upsell-add-btn:hover {
    background: #A02523;
}
.upsell-add-btn.adding {
    background: #3f7a3f; /* warm-shifted success green */
}
.notification-upsell-item {
    background: #FBF4E4;
    border: 1px solid var(--wp--preset--color--primary, #c2a488);
}
.notification-upsells {
    border-bottom: 1px solid rgba(201, 168, 119, 0.30);
}
.upsells-header {
    color: var(--wp--preset--color--dark-default, #303333); /* section label — load-bearing, keep AA contrast */
}

/* --- Banner notification (top toast) --- */
.banner-content {
    background: rgba(251, 247, 240, 0.92);
}
.banner-notification.active .banner-content {
    box-shadow: 0 4px 20px rgba(15, 15, 15, 0.16);
}
.banner-title {
    color: #0F0F0F;
}
.banner-message {
    color: var(--wp--preset--color--dark-default, #303333);
}
.banner-app-name,
.banner-time {
    color: var(--wp--preset--color--primary-dark, #a38f79);
}
.banner-close {
    background: rgba(15, 15, 15, 0.92);
}
.banner-close:hover {
    background: #0F0F0F;
}
.banner-close:focus,
.banner-close:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 2px;
}

/* --- Icon gradients (info → brand ink; error → brand red; success/warning
   stay semantic, warm-tuned). Glyph color unified to cream. --- */
.banner-icon.icon-info,
.sheet-icon.icon-info {
    background: linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%);
}
.banner-icon.icon-error,
.sheet-icon.icon-error {
    background: linear-gradient(135deg, #d32f2f 0%, #A02523 100%);
}
.banner-icon.icon-success,
.sheet-icon.icon-success {
    background: linear-gradient(135deg, #4f9a52 0%, #3f7a3f 100%);
}
.banner-icon.icon-warning,
.sheet-icon.icon-warning {
    background: linear-gradient(135deg, #E5A300 0%, #C77F00 100%);
}
.banner-icon,
.sheet-icon {
    color: #EFE2C7;
}

/* --- Inline alerts — semantic tints kept; info de-blued, error left-rule to
   brand red. Success/warning bg+text pairs left as-is (WCAG-AA already). --- */
.alert-inline.alert-info {
    background: #F2ECDF;
    color: #0F0F0F;
    border-left: 4px solid var(--wp--preset--color--primary-dark, #a38f79);
}
.alert-inline.alert-error {
    border-left: 4px solid var(--wp--preset--color--accent, #d32f2f);
}
.alert-inline.alert-success {
    border-left: 4px solid #3f7a3f;
}
.alert-inline.alert-warning {
    border-left: 4px solid #C77F00;
}

/* --- Add-to-cart success flash — keep GREEN (red on a success reads as an
   error), warm-shifted. Must match the plugin's own !important (line 775). --- */
.single_add_to_cart_button.success,
.add_to_cart_button.success {
    background: #3f7a3f !important;
}

/* --- Reduced motion: the plugin animates sheet/banner/alert/spinner with no
   guard. Honor the user's preference. --- */
@media (prefers-reduced-motion: reduce) {
    .bottom-sheet,
    .sheet-overlay,
    .banner-notification,
    .banner-content,
    .alert-inline,
    .notification-icon,
    .sheet-icon,
    .upsell-add-btn.adding,
    .btn-spinner {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   My Account — two-column shell (redesign)
   --------------------------------------------------------------------------
   Scoped to logged-in account pages (body.woocommerce-account). The greeting
   frame (.account-frame) spans both columns; nav + content sit side by side on
   desktop, single column below the canonical 850px breakpoint (DOM order
   preserved: nav then content — no order swapping). Content inside the wide
   content column is capped so forms/empty-states/dashboard inner content don't
   stretch the full width; tables may use the column.
   ========================================================================== */

body.woocommerce-account.logged-in .woocommerce {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
}

@media screen and (min-width: 850px) {
    body.woocommerce-account.logged-in .woocommerce {
        display: grid;
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        gap: var(--spacing-2xl, 3rem);
        align-items: start;
    }

    /* Greeting frame spans the full grid width above both columns. */
    body.woocommerce-account.logged-in .woocommerce > .account-frame {
        grid-column: 1 / -1;
    }

    /* Nav + content are direct grid children in WC's DOM order.
       WC core layout CSS floats these at width 30% / 68% — on a grid item the
       percentage resolves against the TRACK (30% of 280px = an 84px nav), so
       neutralize both and let the tracks own the sizing. */
    body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
        grid-column: 1;
        float: none;
        width: 100%;
    }
    body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
        grid-column: 2;
        float: none;
        width: 100%;
        min-width: 0; /* allow content (tables) to shrink inside the track */
    }
}

/* Below the grid breakpoint WC's 30%/68% floats are also wrong (we stack). */
@media screen and (max-width: 849px) {
    body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
    body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
        float: none;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Account form controls — UI sans, not the display serif.
   Averia Libre is the brand reading face; dropdowns and inputs in the account
   "tool" context use the platform UI stack instead. body-level scope is
   deliberate: select2/selectWoo appends its open dropdown to <body>, outside
   .woocommerce-MyAccount-content. */
body.woocommerce-account select,
body.woocommerce-account .woocommerce-MyAccount-content input,
body.woocommerce-account .woocommerce-MyAccount-content textarea,
body.woocommerce-account .select2-container,
body.woocommerce-account .select2-selection__rendered,
body.woocommerce-account .select2-results__option,
body.woocommerce-account .select2-search__field {
    font-family: var(--font-family-ui, system-ui, -apple-system, sans-serif);
}

/* Country/region — defaults to United States (see brats_account_address_country_default)
   and is visually de-emphasized: almost every customer is US, so the field
   reads as confirm-and-move-on, not a decision. */
body.woocommerce-account .woocommerce-address-fields #billing_country_field label,
body.woocommerce-account .woocommerce-address-fields #shipping_country_field label {
    font-size: 0.875rem;
    opacity: 0.7;
}
body.woocommerce-account .woocommerce-address-fields #billing_country_field .select2-selection__rendered,
body.woocommerce-account .woocommerce-address-fields #shipping_country_field .select2-selection__rendered,
body.woocommerce-account .woocommerce-address-fields #billing_country_field select,
body.woocommerce-account .woocommerce-address-fields #shipping_country_field select {
    font-size: 0.9375rem;
    color: var(--text-secondary, #666);
}

/* Cap non-table content so the wide column doesn't stretch line lengths.
   Tables (orders/downloads) opt out and may use the full column width. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-address-fields,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content form.edit-account,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .account-empty-state,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .u-columns,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods {
    max-width: 680px;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-orders-table,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .account-dash {
    max-width: none;
}

/* ── Account forms wrapped in the order-form box ──────────────────────────────
   Each My Account form (edit account, edit address, add payment method) gets the
   same light box as the new-order form (.ssb-form-box look — see screen.css).
   `> form` (DIRECT child) targets only the WC core forms; the nested GF order form
   (.fbb-new-order, several levels deep in a .card) is excluded by the child combinator. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > form {
    max-width: 680px;
    padding: var(--spacing-xl);
    background: var(--surface-form-box, #fff);
    border: 1px solid var(--hairline-ink, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md, 12px);
}

/* Saved-address overview (edit-address with no type) — billing + shipping as cards. */
body.woocommerce-account.logged-in .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spacing-lg);
    margin: 0;
}
/* WooCommerce-layout.css adds clearfix pseudos to .col2-set (content:" ";
   display:table). In a grid container those become GRID ITEMS — ::before takes
   cell (1,1) and shoves the two cards into (1,2) and (2,1), i.e. diagonal.
   Drop them so the two address cards are the only grid items. */
body.woocommerce-account.logged-in .woocommerce-Addresses::before,
body.woocommerce-account.logged-in .woocommerce-Addresses::after {
    content: none;
    display: none;
}
body.woocommerce-account.logged-in .woocommerce-Address {
    /* Override WooCommerce-layout.css `.col2-set .col-1/.col-2 { float; width:48% }`.
       In this grid container `float` is already ignored, but `width:48%` would
       resolve against the ~332px grid CELL (not the full row), shrinking each
       card to ~159px — the narrow/wonky columns. Let the grid cell size them. */
    width: auto;
    float: none;
    padding: var(--spacing-xl);
    background: var(--surface-form-box, #fff);
    border: 1px solid var(--hairline-ink, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md, 12px);
    min-width: 0;
}
body.woocommerce-account.logged-in .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
/* Tame the card title — the global h3 is a display heading (clamp up to 2.56rem)
   that wraps to two giant lines inside the card and forces a narrow column.
   This is a compact card heading, not a section title. flex: 1 1 auto keeps the
   title on its own line and lets WC's long "Edit Billing address" link wrap
   below it when the card is too narrow to hold both. */
body.woocommerce-account.logged-in .woocommerce-Address-title h3 {
    margin: 0;
    flex: 1 1 auto;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.2;
}
body.woocommerce-account.logged-in .woocommerce-Address-title .edit {
    flex: 0 0 auto;
    font-size: 0.95rem;
}
body.woocommerce-account.logged-in .woocommerce-Address address {
    font-style: normal;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ── add-payment-method: replace WooCommerce's default mauve/purple (#a46497) ──
   WC core paints the radios + payment box in its brand mauve. Re-brand to ink/red. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .payment_methods input[type="radio"],
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .payment_methods input[type="checkbox"] {
    accent-color: var(--ssb-red, #d32f2f);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-PaymentBox,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .payment_box {
    background: var(--surface-inset, #f0f0f0) !important;
    color: var(--text-primary);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-PaymentBox::before,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .payment_box::before {
    border-bottom-color: var(--surface-inset, #f0f0f0) !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-PaymentBox a,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content .payment_box a {
    color: var(--ssb-red-deep, #A02523);
}

/* ── Mobile: scroll sub-page content into view past the quick-links nav ────────
   On mobile the nav stacks above content; the #account-content anchor (echoed at
   content top by brats_account_content_anchor) + appended #account-content on the
   nav links jump the viewport to the content. scroll-margin clears the fixed nav. */
.account-content-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 90px;
}

/* ==========================================================================
   My Account — logged-out login screen (login / lost-password / reset)
   --------------------------------------------------------------------------
   Styles the shared shell (ssb_login_shell_open/close, inc/woocommerce.php)
   used by woocommerce/myaccount/form-login.php, form-lost-password.php and
   form-reset-password.php — so every logged-out account form sits in the SAME
   place: a plain white two-column layout, ink logo (linked home) on the left,
   the form on the right. No card, no shadow. index.php + page-template-full-width.php
   drop the narrow .container + page <h1> for this case (.ssb-login-page wrapper),
   so the shell owns the only <h1>. Tokens: screen.css :root.
   ========================================================================== */
/* Brand-white ground for the whole logged-out account screen (not the site's
   default warm-gray, not cream). Excludes logged-in account pages. */
body.woocommerce-account:not(.logged-in) {
    background: #fff;
}
.ssb-login-page {
    width: 100%;
    padding: clamp(2rem, 6vw, 4.5rem) var(--spacing-md, 20px);
    background: #fff;
    box-sizing: border-box;
}
.ssb-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax(0,..): tracks shrink below content min-width (Safari 1fr lock) */
    align-items: center;
    gap: clamp(1.75rem, 6vw, 4.5rem);
    max-width: 880px;
    margin: 0 auto;
    color: var(--ssb-ink, #0F0F0F);
}

/* Left: ink logo (linked home) + location line */
.ssb-login__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-width: 0;
    text-align: center;
}
.ssb-login__logo {
    display: block;
    width: clamp(150px, 17vw, 200px);
}
.ssb-login__logo svg {
    display: block;
    width: 100%;
    height: auto;
}
/* The emblem SVG hard-codes white fills (.st0 / .has-fill-white via an internal
   <style>); override to ink so it reads on the white ground. */
.ssb-login__logo .st0,
.ssb-login__logo .has-fill-white {
    fill: var(--ssb-ink, #0F0F0F);
}
.ssb-login__heritage {
    margin: 0;
    font-family: var(--font-family-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ssb-ink, #0F0F0F) 55%, transparent);
}

/* Right: the form column */
.ssb-login__main {
    min-width: 0;
}
.ssb-login__card {
    width: 100%;
    max-width: 360px;
}
.ssb-login__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    line-height: 1.05;
}
.ssb-login__subtitle {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}
.ssb-login__intro {
    margin: 0 0 1.5rem;
    color: color-mix(in srgb, var(--ssb-ink, #0F0F0F) 68%, transparent);
}

/* Form — reset WC's default `.woocommerce form.login` border/padding box (0,2,1).
   Match with 3 classes (0,3,0) so the form sits open on the white ground. */
.ssb-login .ssb-login__card .ssb-login__form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.ssb-login__form .form-row {
    margin: 0 0 1rem;
}
.ssb-login__form label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-family-ui);
    font-size: 0.8125rem;
    font-weight: 600;
}
.ssb-login__form .required {
    color: var(--ssb-red-deep, #A02523);
    border: 0;
}
.ssb-login__form input.input-text {
    width: 100%;
    min-width: 0; /* override the input's intrinsic min-width so it can shrink */
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid color-mix(in srgb, var(--ssb-ink, #0F0F0F) 20%, transparent);
    border-radius: var(--radius-sm, 4px);
    background: #fff;
    color: var(--ssb-ink, #0F0F0F);
    font-size: 16px; /* >=16px prevents iOS focus-zoom */
    line-height: 1.4;
}
.ssb-login__form input.input-text:focus {
    outline: none;
    border-color: var(--ssb-ink, #0F0F0F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssb-ink, #0F0F0F) 10%, transparent);
}

/* Remember me */
.ssb-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 1.1rem;
    font-family: var(--font-family-ui);
    font-size: 0.8125rem;
    cursor: pointer;
}
.ssb-login__rememberme input {
    width: auto;
    margin: 0;
}

/* Submit — restrained ink button, normal case (NOT the uppercase btn-box).
   WC's `.woocommerce button.button` (0,2,1) sets a tan fill; match its
   specificity with .button + a 3rd class (0,3,0) to win deterministically. */
.ssb-login .ssb-login__submit.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0.7rem 1.4rem;
    background: var(--ssb-ink, #0F0F0F);
    color: var(--ssb-cream, #EFE2C7);
    border: 1.5px solid var(--ssb-ink, #0F0F0F);
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-family-ui);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.ssb-login .ssb-login__submit.button:hover,
.ssb-login .ssb-login__submit.button:focus-visible {
    background: var(--ssb-ink-soft, #1A1A1A);
    color: var(--ssb-cream, #EFE2C7);
}
/* Register = secondary (outlined) */
.ssb-login .ssb-login__submit--ghost.button {
    background: transparent;
    color: var(--ssb-ink, #0F0F0F);
}
.ssb-login .ssb-login__submit--ghost.button:hover,
.ssb-login .ssb-login__submit--ghost.button:focus-visible {
    background: var(--ssb-ink, #0F0F0F);
    color: var(--ssb-cream, #EFE2C7);
}

/* Secondary links (Forgot password / Back to sign in) — small + quiet */
.ssb-login__lost {
    margin: 1rem 0 0;
    text-align: center;
}
.ssb-login__lost a {
    font-family: var(--font-family-ui);
    font-size: 0.8125rem;
    color: var(--ssb-ink, #0F0F0F);
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.7;
}
.ssb-login__lost a:hover,
.ssb-login__lost a:focus {
    opacity: 1;
}

/* Optional register block (only when WC registration is enabled) */
.ssb-login__register {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--ssb-ink, #0F0F0F) 12%, transparent);
}

@media (max-width: 781px) {
    .ssb-login {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 1.75rem;
        max-width: 380px;
    }
    .ssb-login__logo {
        width: 120px;
    }
    .ssb-login__card {
        max-width: none;
    }
}