/* ============================================================================
   SAB001 (Sabora) shop overrides - token VALUES + shop-scoped counter-rules,
   then the SAB001 skin block at the END of this file.
   Never edit core mobile-*.css rules; this file re-values what core exposes.
   Registered LAST via AddCssFileParts in Head.cshtml (no ?v= querystrings -
   production bundling silently drops query-suffixed files).

   BRAND DIRECTION (user decision 2026-09-29, design v1 "A"): LA clubwear
   manufacturer & wholesaler. rose #8c3b4a point colour (7.4:1 with white
   text), blush #f7e9e7 soft surfaces, ink #231f20 text and footer,
   Montserrat headings/nav/buttons + Lato body. ONE accent on desktop and
   mobile: the palette lives in wigstheme.css :root (global), the mobile
   block below only re-values the core --m-* chrome tokens.

   The slim mobile header, search sheet and footer accordion fixes below
   were inherited from the CHR001 branch (skin-neutral) and are kept.
   ICONS = one SVG line set drawn as CSS masks over the FontAwesome markup (sections (5), (12)); sizes 22/20/16 in (17).
   ============================================================================ */

/* ---- GLOBAL token re-values (must NOT be media-scoped) ----
   Custom properties resolve at computed-value time, so a token declared inside the
   767px block below would leave consumers at their core default on desktop and flip
   colour at the breakpoint. Tokens used at every viewport live here instead.

   BULK (tier price) badge, consumed by badge-shop-tokens-v1.css (core default
   #337ab7 on white): white text on rose is 7.4:1.
   --m-accent: core mobile-foundation declares a hot-pink default in a GLOBAL
   :root, and desktop consumers read it too (NpcTranslator's active pill
   fallback) - re-value it globally. */
:root {
    --badge-bulk: #8c3b4a;      /* rose, same accent as the chrome */
    --badge-bulk-fg: #ffffff;
    --m-accent: #8c3b4a;
    /* ContactUs view (core) font hooks: display = headings face, body = Lato */
    --contact-font-display: var(--font-primary);
    --contact-font-body: var(--font-default);
}

/* ---- core mobile chrome token re-values ---- */
@media (max-width: 767.98px) {
    :root {
        --m-header-bg: #ffffff;            /* light app-bar                  */
        --m-header-fg: #231f20;            /* ink icons/text on light        */
        --m-border: rgba(35, 31, 32, 0.10); /* dividers on light surfaces    */
        /* the drawer's scroll-scrim chevron: the core default is a WHITE stroke
           for the dark app-bar - invisible on this light drawer. Ink stroke. */
        --m-scrim-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
        /* the rose accent, the --gold* family and --red are global
           (wigstheme.css :root / html:root) - no mobile-only copies */
    }
}

/* ----------------------------------------------------------------------------
   Shop-specific mobile rules (inherited from CHR001, skin-neutral — NOT part of
   the token convention). Mobile-scoped; the desktop skin is the SAB001 block.
   ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* wigstheme: `--header-padding` (was 20px 70px, now 0) consumed by
       `.header { padding: var(--header-padding) }` (L700) — the proven GOL001
       leak pattern #1 (squeezed the mobile header into a 250px column).
       Re-value for mobile only; the literal is zeroed too. */
    :root {
        --header-padding: 0;
        --header-menu-padding: 0;
    }
    .header { padding: 0 !important; }

    /* wigstheme `.footer-upper { padding: 30px 35px !important }`
       — leak pattern #2 (GOL001/LTJ001 had the identical rule). Align with the
       core mobile footer rhythm. Equal !important + later load order wins. */
    .footer-upper { padding: 24px 0 !important; }
    .footer-upper .container { max-width: 100%; margin-left: 0; margin-right: 0; }

    /* wigstheme `.main-menu.goToTop { position: fixed;
       z-index: 9999; top: 0 }` (applied by simplex.js on scroll) — desktop
       scroll-pinned menu bar. The core mobile chrome owns stickiness
       (.header) and the drawer; a second fixed bar at z9999 would paint over
       the mobile UI. Neutralise in the mobile range. */
    .main-menu.goToTop,
    .navbar.navbar-inverse.goToTop {
        position: static !important;
        z-index: auto !important;
        top: auto !important;
        left: auto !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    /* wigstheme pins EVERY header-links FA glyph absolute
       (left:10px / top:50% / translate) + host padding for the desktop row:
       .ico-account / .ico-wishlist / .ico-logout / .ico-login / .ico-register
       (cart handled separately below). In the drawer / mobile chrome the core
       lays these out in flow — unpin so glyphs sit inline with their labels. */
    .ico-account, .ico-wishlist, .ico-logout, .ico-login, .ico-register {
        padding-left: 0 !important;
    }
    .ico-account::before, .ico-wishlist::before, .ico-logout::before,
    .ico-login::before, .ico-register::before {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 8px 0 0 !important;
    }

    /* light app-bar needs a hairline + soft shadow to separate from white page
       content (a dark bar separates by contrast alone) */
    .header .header-lower {
        border-bottom: 1px solid var(--m-border);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }

    /* ---- light-surface search pill (core pill is tuned for the DARK GOL001
       bar: translucent-white bg + white placeholder = invisible on white) ---- */
    .header .header-lower .search-box .search-nav {
        background: #f4f4f4 !important;          /* --grey-50  */
        color: #1a1a1a !important;
        height: 48px;
        border: 1px solid #dddddd !important;     /* --grey-200 */
    }
    .header .header-lower .search-box .search-nav::placeholder { color: #999999; }
    .header .header-lower .search-box .search-box-button,
    .header .header-lower .search-box .search-box-button::before {
        color: #1a1a1a !important;
    }
    /* sweep finding 2026-06-05: the magnifier button computes 40px (<44 touch
       floor) — match the 48px search pill so the hit-area spans its full row */
    .header .header-lower .search-box .search-box-button {
        min-height: 48px;
        min-width: 44px;
    }

    /* ========================================================================
       SLIM 1-ROW HEADER + FULL-SCREEN SEARCH OVERLAY (GOL002 pattern, user
       request 2026-06-05). The core 2-row header keeps its markup; this shop
       hides the persistent search row on phones and re-opens it as an overlay
       via .m-search-toggle (mobile-shop.js toggles html.m-search-open).
       NOTE: header-search-col is ALSO the desktop search — every rule
       here is ≤767-scoped; desktop keeps the in-row search box untouched.
       ======================================================================== */
    /* row-1 (sab001-ui-round2 P2): [≡][🔍]  logo  [👤][🛍] - two 44px slots on each side keep the logo geometrically
       centred. Bootstrap 3's .row clearfix ::before/::after are flex items too (with the row gap they pushed the
       logo ~19px off centre), so they go. */
    .header .header-lower .row::before,
    .header .header-lower .row::after { content: none !important; display: none !important; }
    .header .header-lower .m-menu-toggle-wrap   { order: 1; flex: 0 0 44px; }
    .header .header-lower .m-search-toggle-wrap { order: 2; flex: 0 0 44px; }
    .header .header-lower .header-logo-col      { order: 3; flex: 1 1 auto; text-align: center; }
    .header .header-lower .m-account-wrap       { order: 4; flex: 0 0 44px; }
    .header .header-lower .header-cart-col      { order: 5; flex: 0 0 44px; width: 44px; padding: 0; }
    .m-account-link {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; min-height: 44px; color: var(--m-header-fg);
    }
    /* the logo gets the room: no row gap between the 44px slots, 8px side padding (was 6px gaps + 15px padding,
       which shrank the logo to 160px at 390) */
    .header .header-lower > .container { padding-left: 8px; padding-right: 8px; }
    .header .header-lower .row { gap: 0 !important; margin-left: 0; margin-right: 0; }
    .header .header-lower .header-logo-col { padding-left: 4px; padding-right: 4px; }

    /* 4 controls + logo must keep ONE row even at 320px (GOL002 lesson:
       cart wrapped to a second line). Never wrap, let the logo shrink. */
    .header .header-lower .row { flex-wrap: nowrap; }
    .header .header-lower .header-logo-col { min-width: 0; overflow: hidden; }
    .header .header-lower .header-logo img {
        max-width: 100%; height: auto; max-height: 40px; object-fit: contain;
    }

    .m-search-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; min-height: 44px;
        border: 0; background: none; cursor: pointer;
        color: var(--m-header-fg);
    }
    /* search toggle icon = the FA glyph itself (this skin's icon language is FA —
       no Lucide mask needed, unlike GOL002) */
    .m-search-toggle i.fa {
        font-size: 18px; line-height: 1;
        color: var(--m-header-fg);
    }

    /* search col: hidden in the bar; opens as a TOP SHEET (user feedback
       2026-06-05: the fullscreen overlay felt claustrophobic — Zara/Nike
       pattern instead: search bar pinned top, dimmed page visible below,
       backdrop tap closes). z-index above the docked menu drawer
       (~99999-100000); JS also enforces mutual exclusivity. */
    .header .header-lower .header-search-col { display: none; }
    html.m-search-open .header .header-lower .header-search-col {
        display: flex; align-items: center; gap: 4px;
        position: fixed; top: 0; left: 0; right: 0; bottom: auto;
        z-index: 100010;
        background: #ffffff; padding: 12px 12px 12px 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    }
    html.m-search-open .header .header-lower .header-search-col .search-box {
        flex: 1 1 auto !important;
        /* GOL002 round finding (668598a5) — same latent bug here: core's
           in-row `.search-box{width:100%!important}` also fires inside the
           SHEET, forcing full sheet width with no shrink (pill ran off the
           right edge on narrow desktop-UA windows). Size as a flex item. */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible; /* the theme's .search-box{overflow:hidden} CLIPPED
                              the autocomplete dropdown (281px list invisible —
                              the "autocomplete doesn't work on mobile" report) */
        position: static;  /* anchor the suggestions to the SHEET, not the pill:
                              full-width rows read better (user 2026-06-05;
                              Amazon/ASOS pattern) — the list was indented to
                              the pill's left edge past the ✕ */
    }
    /* dimmed backdrop below the sheet; tap-to-close handled in mobile-shop.js */
    html.m-search-open::after {
        content: "";
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 100005; /* below the sheet (100010), above everything else */
    }
    html.m-search-open { overflow: hidden; } /* scroll-lock on the scrollport */
    /* the sheet lives INSIDE the sticky .header whose stacking context is
       low — lift the whole header context while the search is open so the
       bottom nav / sticky CTA / a11y button can't paint over it. */
    html.m-search-open .header { z-index: 100010 !important; }
    /* the z-lift also raises the REST of the header (app-bar row) above the
       page backdrop — it showed undimmed under the sheet. Dim the header's
       own box with a local pseudo: z1 sits above its static content but
       below the fixed sheet inside the same context. */
    html.m-search-open .header::after {
        content: "";
        position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
        pointer-events: none;
    }
    html.m-search-open .m-pdp-cta,
    html.m-search-open .mobile-bottom-nav,
    html.m-search-open .at-trigger { visibility: hidden !important; }
    html.m-search-open .m-search-close {
        display: flex; align-items: center; justify-content: center;
        position: static; /* in-row, right of the pill */
        flex: 0 0 44px;
        width: 44px; height: 44px;
        border: 0; background: none; cursor: pointer;
        font-size: 28px; line-height: 1; color: #202020;
    }

    /* ---- autocomplete dropdown, sheet-tuned (suggestions render under the
       pill; jQuery UI positions it inline relative to .search-box) ---- */
    html.m-search-open .search-box .ui-autocomplete {
        position: absolute !important;
        top: 100% !important;          /* flush under the sheet (its anchor now) */
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-height: min(60vh, 480px);
        overflow-y: auto;
        background: #ffffff;
        border: 0;                      /* full-bleed: no side chrome */
        border-top: 1px solid #f0f0f0;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
        padding: 6px 0;
        list-style: none;
    }
    html.m-search-open .search-box .ui-autocomplete li,
    html.m-search-open .search-box .ui-autocomplete .ui-menu-item {
        display: flex; align-items: center;
        min-height: 44px;
        padding: 6px 14px;
        font-size: 15px;
        color: #1a1a1a;
    }
    html.m-search-open .search-box .ui-autocomplete img {
        width: 36px; height: 36px; object-fit: cover;
        border-radius: 6px; margin-right: 10px;
    }

    /* ---- cart icon & counter ---- */
    /* wigstheme family pins the FA \f07a glyph absolute + host padding for the
       DESKTOP header row. The core mobile cart slot centres its own \f07a —
       undo the pins so the two rule sets agree on one centred glyph. */
    .header .header-cart-col .ico-cart {
        padding-left: 0 !important;
        /* user report 2026-06-05: the cart glyph floated ABOVE the other
           controls' centre line. The link box itself was centred (44px,
           cy matching ≡/🔍) but display:block leaves the ::before glyph in
           inline flow at the TOP of the box — the toggles centre theirs via
           inline-flex. Make the cart a flex-centred box too (a ::before of a
           flex container becomes a flex item => centred). */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px;
        min-height: 44px;
    }
    .header .header-cart-col .ico-cart::before {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
    /* the static guest fallback cart link duplicates the flyout's own
       .ico-cart for LOGGED-IN users (the flyout renders nothing for B2B
       guests — verified live: two 44px \f07a glyphs side by side). When the
       flyout wrapper exists, the fallback yields. */
    .header .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback {
        display: none !important;
    }

    /* STATE-DEPENDENT double counter (the GOL002 "double cart" lesson,
       f2ee2c0c): nop's `.cart-qty` span only renders WITH ITEMS IN CART —
       the core .m-cart-badge is THE mobile counter; hide the text qty. */
    .header .header-cart-col .cart-qty {
        display: none !important;
    }
    .header .header-cart-col .cart-qty::before,
    .header .header-cart-col .cart-qty::after {
        content: none !important;
        display: none !important;
    }

    /* the in-menu flyout-search entry duplicates the header's search row */
    #mobile-menu .header-links #flyout-search { display: none !important; }

    /* bottom-nav: 3-tab layout (user decision 2026-06-05, LTJ001 pattern).
       Search lives in the always-visible header search row; Categories in the
       hamburger. Remaining 3 tabs (Home / Account / Cart) spread wider =
       bigger touch zones. */
    .mobile-bottom-nav li:has(> a[href*="/search"]),
    .mobile-bottom-nav li:has(> a[data-target="#mobile-menu"]) { display: none; }

    /* bottom-nav: icons + labels one colour on the light bar; active accent
       comes from --m-accent (core) */
    .mobile-bottom-nav a, .mobile-bottom-nav span { color: var(--m-header-fg); }

    /* hero pagination: simplex pins white square dots via
       `.master-wrapper-content > .nop-slider span.swiper-pagination-bullet`
       — white dots are invisible below the imagery on the light page bg
       (GOL001/GOL002 lesson). Neutral grey inactive, brand accent active —
       match the theme's specificity. */
    .master-wrapper-content > .nop-slider span.swiper-pagination-bullet {
        background-color: #bbbbbb; opacity: 1; border-radius: 50%;
    }
    .master-wrapper-content > .nop-slider span.swiper-pagination-bullet-active {
        background-color: var(--m-accent, #8c3b4a);
    }

    /* ---- touch: desktop hover affordances go STICKY after a tap ---- */
    /* cart variant rows: re-assert the MOBILE base border (grouped-v2:2584
       gives rows a 2px #e9ecef left border ≤768) so the tapped state looks
       identical to rest (LTJ001 lesson: fixed desktop values JUMP on tap). */
    .shopping-cart-page .full-cart-variant-row:hover,
    .shopping-cart-page .full-cart-variant-row:focus,
    .shopping-cart-page .full-cart-variant-row:focus-within,
    .shopping-cart-page .full-cart-variant-row:active {
        border-left: 2px solid #e9ecef !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    /* checkout button hover lifts -2px + shadow — sticky transform after tap
       shifts the CTA; pin it down on touch widths. */
    .full-cart-checkout-button:hover,
    .checkout-button:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* PDP qty stepper (3rd-shop recurring trap): the theme pins
       .addtocart-quantity-box to a fixed width with overflow:hidden, so the
       third stepper key clips once the core 44px touch floor inflates the
       keys. Rebuild as a content-sized flex group [−][input][+]. Icons stay
       FontAwesome: the spans carry <i class="fa fa-plus/fa-minus"> children —
       keep THOSE as the only glyphs (span text muted, no doubles). */
    .product-details-page .addtocart-quantity-box {
        display: inline-flex !important;
        align-items: stretch;
        border: 1px solid #dddddd;
        border-radius: 10px;
        overflow: hidden;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }
    .product-details-page .addtocart-quantity-box .qty-input {
        order: 2;
        width: 56px !important;
        border: 0 !important;
        border-left: 1px solid #dddddd !important;
        border-right: 1px solid #dddddd !important;
        border-radius: 0 !important;
        text-align: center;
    }
    .product-details-page .addtocart-quantity-box .decrease-quantity { order: 1; }
    .product-details-page .addtocart-quantity-box .increase-quantity { order: 3; }
    .product-details-page .increase-quantity,
    .product-details-page .decrease-quantity {
        position: static !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: 42px !important;
        min-height: var(--m-touch-min, 44px);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: #f4f4f4 !important;
        background-image: none !important;
        font-size: 0;        /* mute any text glyphs on the span itself */
        cursor: pointer;
    }
    .product-details-page .increase-quantity::before,
    .product-details-page .decrease-quantity::before,
    .product-details-page .increase-quantity::after,
    .product-details-page .decrease-quantity::after { content: none !important; }

    /* the FA <i> children are THE icons — restore their glyph size/colour */
    .product-details-page .increase-quantity i.fa,
    .product-details-page .decrease-quantity i.fa {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 14px !important;
        line-height: 1 !important;
        color: var(--m-header-fg, #1a1a1a) !important;
        opacity: 1 !important;
        position: static !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* (back-to-top: now handled by CORE — mobile-foundation.css re-seats
       #backTop above the bottom tab bar since 2026-06-05; the button colour
       follows this shop's token re-values automatically.) */

    /* a11y focus ring on the open drawer: core focuses #mobile-menu on open
       (WCAG); theme variants paint the UA outline GOLD (#e59700) — recolour
       to the shop accent so the ring stays visible AND on-brand. */
    /* KEYBOARD focus only (IJO001 lesson 2026-06-06: the brand ring fired on
       every tap-open via programmatic focus() and read as an error border;
       :focus-visible keeps it for keyboard users). */
    #mobile-menu:focus { outline: none; }
    #mobile-menu:focus-visible {
        outline: 2px solid var(--m-accent, #8c3b4a);
        outline-offset: -2px;
    }
}

/* INTENTIONALLY UNSCOPED (the one exception to the ≤767 rule): unlike GOL002,
   this shop's header-search-col also renders on DESKTOP, so the overlay close
   button inside it must default to hidden at every width. It only appears
   under html.m-search-open (mobile-scoped rule above). */
.m-search-close { display: none; }

/* NpcTranslator — shop tokens (values only; never edit core .npc-tr rules).
   Unscoped on purpose so desktop gets the brand accent too (rose #8c3b4a: white text 7.4:1).
   On the rose utility bar and the ink footer the active pill flips to white (SAB001 block). */
.npc-tr, .npc-tr-banner, .npc-tr-progress { --npc-tr-active-bg: #8c3b4a; --npc-tr-active-fg: #fff; --npc-tr-banner-accent: #8c3b4a; }

/* ===== SAB001 (Sabora) =====
   Shop skin for design v1 "A" (docs/02-design/features/sab001-storefront.design.md
   §8.1-8.4, §8.6 skin). Palette / type TOKENS live in wigstheme.css :root
   (--sab-*, --rd-accent-red*, --black, --font-*); this block holds the RULES.
   It renders LAST (AddCssFileParts): equal-specificity ties go to it, and the
   wigstheme / simplex !important rules are out-ranked with !important plus a
   higher specificity where noted. Core views keep their markup - everything
   below targets existing classes.
   Breakpoints: phone <= 767 / desktop >= 768 (core standard). The promo tiles
   follow NpcBanner's own mobile-art switch (<= 768).
   ============================================================================ */

:root {
    --sab-gutter: clamp(16px, 4.45vw, 64px); /* 64px side padding at 1440 */
    --sab-content: 1312px;                    /* content width at 1440 */
    /* PDP selected states / multi-colour bulk add (product-details-minimal.css
       + multicolor-bulk-add-*.css read these) */
    --accent-red: #8c3b4a;
    --accent-red-hover: #6e2a39;
    --multicolor-add-bg: #8c3b4a;
    --multicolor-add-bg-hover: #6e2a39;
}
/* cart css declares its blue palette in its own :root and may load after this
   file (view-level <link>) - html:root (0,1,1) out-ranks :root regardless of order */
html:root {
    --nop-primary: #8c3b4a;
    --nop-primary-hover: #6e2a39;
    --nop-primary-active: #6e2a39;
}

/* ---------------------------------------------------------------------------
   1. TYPE + BUTTONS (all pages)
   --------------------------------------------------------------------------- */
body { color: var(--sab-ink); }

/* page titles: Montserrat 300, uppercase, .08em, centred.
   .page ... .panel-heading beats the ContactUs view's inline <style> (0,2,1)
   and b2b-registration.css (0,3,1). */
.page .page-title.panel-heading,
.page .page-title {
    border: 0;
    background: none;
    text-align: center;
}
.page .page-title.panel-heading h1,
.page .page-title h1 {
    font-family: var(--font-primary) !important;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sab-ink);
    margin: 8px 0 24px;
}
@media (max-width: 767.98px) {
    .page .page-title.panel-heading h1,
    .page .page-title h1 { font-size: 22px; margin: 4px 0 16px; }
}

/* primary button: rose fill, white text (7.4:1), >= 44px, flat (the base theme
   lifts buttons -2px with a shadow on hover) */
.btn.btn-primary,
.button-1,
.google-authenticator-conteiner .buttons button {
    background-color: var(--sab-rose) !important;
    border: 1px solid var(--sab-rose) !important;
    color: #fff !important;
    border-radius: 0 !important;
    min-height: 44px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: none !important;
    transform: none !important;
}
/* the flyout cart's checkout button (its css pins it ink at 0,4,0 !important) */
.flyout-cart-wrapper .flyout-cart-footer .flyout-cart-footer-buttons .flyout-cart-checkout-button.flyout-cart-checkout-button {
    background-color: var(--sab-rose) !important;
    border-color: var(--sab-rose) !important;
    color: #fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.button-1:hover,
.button-1:focus,
.google-authenticator-conteiner .buttons button:hover {
    background-color: var(--sab-rose-dark) !important;
    border-color: var(--sab-rose-dark) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
/* secondary button: 1px ink outline */
.btn.btn-default,
.payment-method .save-customer-info-button {
    background: transparent !important;
    border: 1px solid var(--sab-ink) !important;
    color: var(--sab-ink) !important;
    border-radius: 0 !important;
    font: 500 12px var(--font-primary) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.payment-method .save-customer-info-button:hover,
.payment-method .save-customer-info-button:focus {
    background: var(--sab-ink) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}
/* keyboard focus stays visible on the flat buttons */
.btn:focus-visible,
.button-1:focus-visible {
    outline: 2px solid var(--sab-rose) !important;
    outline-offset: 2px;
}

/* pager: rose current page */
.pager li.current-page > span {
    background: var(--sab-rose) !important;
    border-color: var(--sab-rose) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   2. HEADER (desktop >= 768; phones keep the core v3 app-bar)
   --------------------------------------------------------------------------- */
/* simplex pads .header 15px 20px / 18px 35px / 20px 50px (!important) between
   500 and 1199px - the rose bar runs edge to edge instead */
.header {
    padding: 0 !important;
    background: #fff !important;
}

/* black (ink) utility bar (36px): announcement left, EN/ES right - owner 2026-10-01 (was rose + tagline) */
.header .header-upper {
    height: auto;
    background: var(--sab-ink);
    color: #fff;
}
/* EN/ES on the dark bar: white outline, white active pill with ink text */
.header .header-upper .npc-tr {
    --npc-tr-active-bg: #fff;
    --npc-tr-active-fg: var(--sab-ink);
    --npc-tr-border: rgba(255, 255, 255, .5);
    color: #fff;
}
.header .header-upper .npc-tr .npc-tr__opt { color: #fff; }
.header .header-upper .npc-tr .npc-tr__opt[aria-pressed="true"] { color: var(--sab-ink); }
.header .header-upper .npc-tr .npc-tr__opt span { color: inherit; }
.header .header-upper .npc-tr .npc-tr__opt:focus-visible { outline-color: #fff; }

@media (min-width: 768px) {
    /* simplex pins .html-home-page .header .container to 95% !important */
    .header .header-upper > .container,
    .header .header-lower > .container {
        width: 100% !important;
        max-width: calc(var(--sab-content) + 2 * var(--sab-gutter)) !important;
        margin: 0 auto;
        padding: 0 var(--sab-gutter);
    }
    .header .header-upper .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 36px;
        margin: 0;
    }
    .header .header-upper .row::before,
    .header .header-upper .row::after { content: none; }
    .header .header-upper .row > [class*="col-"] {
        width: auto;
        float: none;
        padding: 0;
    }
    .header .header-upper .header-selectors-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    /* 96px row, 3 equal columns: search | logo | account links + cart */
    .header .header-lower {
        padding: 0;
        border-bottom: 0;   /* logo row + menu row read as one white header (a hairline between them split it, user 2026-10-01) */
    }
    .header .header-lower .row {
        display: grid;
        /* sides share the rest equally, so the logo stays centred */
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 24px;
        align-items: center;
        min-height: 96px;
        margin: 0;
    }
    .header .header-lower .row::before,
    .header .header-lower .row::after { content: none; }
    .header .header-lower .row > [class*="col-"] {
        width: auto;
        float: none !important;   /* .pull-left */
        padding: 0;
        min-height: 0;
    }

    /* search: underline field, 300px */
    .header .header-lower .header-search-col .search-box {
        float: none;
        width: 300px;
        max-width: 100%;
        margin: 0;
        overflow: visible;
    }
    .header .header-lower .header-search-col .search-box .navbar-form {
        margin: 0;
        padding: 0;
        width: 100%;
        border: 0;
        box-shadow: none;
    }
    .header .header-lower .header-search-col .search-box .form-group {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: none;
        margin: 0;
        border-bottom: 1px solid var(--sab-ink);
    }
    .header .header-lower .header-search-col .search-box .search-nav {
        width: 100%;
        height: 38px;
        padding: 0 36px 0 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none;
        font: 400 14px var(--font-default);
        color: var(--sab-ink) !important;
    }
    .header .header-lower .header-search-col .search-box .search-nav::placeholder { color: #5c5456; }
    .header .header-lower .header-search-col .search-box .btn.search-box-button {
        right: 0;
        top: 2px;
        width: 34px;
        height: 34px;
    }
    .header .header-lower .header-search-col .search-box .btn.search-box-button::before {
        color: var(--sab-ink);
        opacity: 1;
    }

    /* logo: centred at its native 404x50 like saboraclothing.com (was 24px, design v1 "A") */
    .header .header-lower .header-logo-col { justify-self: center; }
    .header .header-lower .header-logo { text-align: center; }
    .header .header-lower .header-logo a { display: inline-flex; align-items: center; }
    .header .header-lower .header-logo img {
        display: block;
        max-height: 50px;
        width: auto;
        max-width: 100%;
    }

    /* right: SIGN IN, rose REGISTER, cart */
    .header .header-lower .header-cart-col {
        justify-self: end;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px 20px;
    }
    .header .header-lower .header-links-wrapper .header-top-right {
        float: none;
        width: auto;
    }
    .header .header-lower .header-top-right ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 4px 20px;
        margin: 0;
        padding: 0;
    }
    .header .header-lower .header-top-right ul li { float: none; }
    .header .header-lower .header-top-right ul li.login,
    .header .header-lower .header-top-right ul li.my-account { order: 1; }
    .header .header-lower .header-top-right ul li.register,
    .header .header-lower .header-top-right ul li.logout { order: 2; }
    /* wishlist lives in the footer (Favorite items) and the account pages */
    .header .header-lower .header-top-right ul li.my-wishlist { display: none; }
    .header .header-lower .header-top-right ul li a {
        float: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        margin: 0;
        padding: 0 !important;
        border: 0;
        background: none !important;
        font-family: var(--font-primary);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--sab-ink) !important;
    }
    .header .header-lower .header-top-right ul li a:hover,
    .header .header-lower .header-top-right ul li a:focus { color: var(--sab-rose) !important; }
    .header .header-lower .header-top-right ul li a span { color: inherit !important; }
    /* the base theme pins a FontAwesome glyph before every header link */
    .header .header-lower .header-top-right ul li a::before {
        content: none !important;
        display: none !important;
    }
    .header .header-lower .header-top-right ul li.register a {
        padding: 0 16px !important;
        background: var(--sab-rose) !important;
        color: #fff !important;
    }
    .header .header-lower .header-top-right ul li.register a:hover,
    .header .header-lower .header-top-right ul li.register a:focus {
        background: var(--sab-rose-dark) !important;
        color: #fff !important;
    }

    /* cart: signed-in flyout link or the guest fallback - one 40px hit area (the icon itself is 22px, section (5)) */
    .header .header-lower .header-cart-col .flyout-main-wrapper {
        float: none;
        margin: 0;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .ico-cart {
        float: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: auto !important;
        min-height: 44px;
        padding: 0 0 0 28px !important;
        color: var(--sab-ink) !important;
        text-decoration: none;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .ico-cart::before {
        font-size: 20px;
        color: var(--sab-ink);
        opacity: 1;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .cart-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .header .header-lower .header-cart-col .shopping-cart-link .cart-qty {
        font: 400 12px var(--font-default);
        color: var(--sab-ink) !important;
    }
    .header .header-lower .header-cart-col a.m-cart-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--sab-ink) !important;
        text-decoration: none;
    }
    .header .header-lower .header-cart-col a.m-cart-fallback::before {
        content: "\f07a";
        font: normal normal normal 20px/1 FontAwesome;
    }
    .header .header-lower .header-cart-col a.m-cart-fallback .cart-qty { display: none; }
}
/* the guest fallback yields to the real flyout link at every width */
.header .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback { display: none !important; }

/* main nav: 48px, centred caps, SALE in rose (TopMenu markup, CSS only).
   Type matches saboraclothing.com: Lato 14px 400 (live asks 500, Lato has none), letter-spacing 1px, ~30px apart */
@media (min-width: 768px) {
    .header-menu {
        margin-bottom: 32px;
        border-bottom: 1px solid var(--sab-line);
        background: #fff !important;
    }
    .html-home-page .header-menu { margin-bottom: 0; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 30px;
        float: none;
        width: 100%;
        margin: 0;
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li { float: none; }
    /* simplex reserves 35px for a chevron that is hidden on desktop */
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a.dropdown-toggle { padding-right: 0 !important; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a {
        float: none;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0;
        background: transparent;
        font-family: var(--font-default);
        font-size: 14px;
        font-weight: 400;   /* Lato has no 500 - it always rendered 400 (live asks 500 and gets 400 too) */
        line-height: 1.2;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sab-ink);
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a:hover,
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a:focus,
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.active > a,
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown.open > a {
        background: transparent !important;
        color: var(--sab-rose) !important;
    }
    /* wigstheme paints every header-menu link black !important (0,1,1) */
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li > a[href$="/sale"] {
        color: var(--sab-rose) !important;
        font-weight: 700;   /* Lato has no 600 - it always rendered 700 */
    }
    /* drop the base theme's hover triangle under dropdown parents */
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > a:hover::before { content: none; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu {
        border: 1px solid var(--sab-line);
        border-radius: 0;
        box-shadow: 0 8px 20px rgba(35, 31, 32, .08);
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a {
        padding: 10px 18px !important;
        background: #fff !important;
        font: 400 13px var(--font-default);
        letter-spacing: .04em;
        color: var(--sab-ink) !important;
    }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before { content: none; }
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a:hover { color: var(--sab-rose) !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .header-menu .main-menu .navbar.navbar-inverse .nav.navbar-nav { column-gap: 24px; }
    .header .header-lower .header-cart-col,
    .header .header-lower .header-top-right ul { column-gap: 12px; }
    .header .header-lower .header-top-right ul li a { letter-spacing: .08em; }
    /* private messages stay reachable from the account pages */
    .header .header-lower .header-top-right ul li:has(> .ico-inbox) { display: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* tight side columns: the cart shows its icon only (the count stays for
       screen readers and in the flyout) */
    .header .header-lower .header-cart-col .shopping-cart-link .cart-qty {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    /* black strip (30px) with the announcement; EN/ES stays in the menu drawer and the footer on
       phones, so with no announcement the strip has nothing to show and is hidden */
    .header .header-upper { padding-block: 0; }
    .header .header-upper:not(:has(.announcement-bar)) { display: none; }
    .header .header-upper .row { justify-content: center; min-height: 30px; }
    .header .header-upper .header-selectors-col { display: none; }
    /* the account links sit in the drawer on phones (TopMenu .mobile-menu-account) */
    .header .header-lower .header-links-wrapper { display: none; }
}
@media (max-width: 374px) {
    .html-home-page .sab-cat-bars a { letter-spacing: .1em; }
}

/* ---------------------------------------------------------------------------
   3. HOME: category bars + promo tiles (NpcBanner, zone main_column_after)
   --------------------------------------------------------------------------- */
/* the home column carries the promo tiles as direct children: a 12-col grid
   lays them 7:5 inside the 1312px content width */
.html-home-page .master-column-wrapper > .container > .row > .col-md-12 {
    float: none;
    max-width: calc(var(--sab-content) + 30px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
}
.html-home-page .master-column-wrapper > .container > .row > .col-md-12 > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.html-home-page .sab-cat-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.html-home-page .sab-cat-bars li { margin: 0; }
.html-home-page .sab-cat-bars a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 12px;
    border: 1px solid var(--sab-ink);
    background: #fff;
    color: var(--sab-ink);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .22em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.html-home-page .sab-cat-bars a:hover,
.html-home-page .sab-cat-bars a:focus {
    background: var(--sab-ink);
    border-color: var(--sab-ink);
    color: #fff !important;
}
.html-home-page .sab-cat-bars a.is-sale {
    background: var(--sab-rose);
    border-color: var(--sab-rose);
    color: #fff;
}
.html-home-page .sab-cat-bars a.is-sale:hover,
.html-home-page .sab-cat-bars a.is-sale:focus {
    background: var(--sab-rose-dark);
    border-color: var(--sab-rose-dark);
}

.html-home-page .npc-banner.sab-promo {
    display: block;
    margin: 32px 0 0;
    overflow: hidden;
    background: var(--sab-blush);
}
.html-home-page .npc-banner.sab-promo .npc-banner-link,
.html-home-page .npc-banner.sab-promo picture {
    display: block;
    width: 100%;
    max-width: none;
}
.html-home-page .npc-banner.sab-promo img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}
@media (min-width: 769px) {
    .html-home-page .master-column-wrapper > .container > .row > .col-md-12 > .sab-promo--wide { grid-column: span 7; }
    .html-home-page .master-column-wrapper > .container > .row > .col-md-12 > .sab-promo--narrow { grid-column: span 5; }
    /* the desktop pair is one 2592x1040 artwork cut 1512 + 1080 (~ the 7/5 split) with the text baked in: the wide
       card keeps its image ratio and the narrow one stretches to the same row height. A fixed 520px height cropped
       "10% OFF" / the SALE caption bar as soon as the window got narrower than ~1300px (2026-10-03). */
    .html-home-page .npc-banner.sab-promo--wide { aspect-ratio: 1512 / 1040; }
    .html-home-page .npc-banner.sab-promo--narrow { align-self: stretch; }
    .html-home-page .npc-banner.sab-promo--narrow img { object-position: center bottom; }   /* caption bar is at the bottom */
    .html-home-page .npc-banner.sab-promo .npc-banner-link,
    .html-home-page .npc-banner.sab-promo picture,
    .html-home-page .npc-banner.sab-promo img { height: 100%; }
    .html-home-page .npc-banner.sab-promo img { object-fit: cover; }
}
@media (max-width: 767.98px) {
    .html-home-page .sab-cat-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }
    .html-home-page .sab-cat-bars a {
        height: 52px;
        font-size: 12px;
        letter-spacing: .18em;
    }
}
@media (max-width: 768px) {
    .html-home-page .npc-banner.sab-promo { margin-top: 12px; }
    .html-home-page .page.home-page + .npc-banner.sab-promo { margin-top: 20px; }
}

/* ---------------------------------------------------------------------------
   4. FOOTER: blush newsletter band + ink 4-column block
   --------------------------------------------------------------------------- */
.html-home-page .footer { margin-top: 72px; }
.footer { margin-top: 48px; }

.footer .footer-upper {
    padding: 48px var(--sab-gutter) !important;
    border-bottom: 0 !important;
    background: var(--sab-blush) !important;
}
.footer .footer-upper > .container { width: 100%; max-width: 100%; padding: 0; }
.footer .footer-upper .row { margin: 0; display: flex; justify-content: center; }
.footer .footer-upper .newsletter-wrapper { width: 100%; float: none; padding: 0; }
.footer .footer-upper .newsletter-email {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.footer .footer-upper .newsletter-email strong {
    float: none;
    margin: 0;
    color: var(--sab-ink) !important;
    font-family: var(--font-default);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}
.footer .footer-upper .newsletter-email .form-group {
    float: none;
    display: flex;
    width: 520px;
    max-width: 100%;
    margin: 0;
}
.footer #newsletter-subscribe-block #newsletter-email {
    float: none;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--sab-ink) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--sab-ink) !important;
    font: 400 15px var(--font-default);
    box-shadow: none !important;
}
.footer #newsletter-subscribe-block #newsletter-subscribe-button {
    float: none;
    flex: 0 0 auto;
    height: 54px;
    max-height: none;
    margin: 0 !important;
    padding: 0 30px !important;
    border: 1px solid var(--sab-ink) !important;
    border-radius: 0 !important;
    background: var(--sab-ink) !important;
    color: #fff !important;
    font: 600 12px var(--font-primary) !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    transform: none !important;
    box-shadow: none !important;
}
.footer #newsletter-subscribe-block #newsletter-subscribe-button:hover,
.footer #newsletter-subscribe-block #newsletter-subscribe-button:focus {
    background: var(--sab-rose) !important;
    border-color: var(--sab-rose) !important;
}
.footer .footer-upper .newsletter-validation,
.footer .footer-upper .newsletter-result-block { color: var(--sab-ink); }

/* ink block */
.footer .footer-middle {
    padding: 52px 0 36px !important;
    background: var(--sab-ink) !important;
}
.footer .footer-middle > .container,
.footer .footer-lower > .container {
    width: 100% !important;
    max-width: calc(var(--sab-content) + 2 * var(--sab-gutter)) !important;
    margin: 0 auto;
    padding: 0 var(--sab-gutter);
}
.footer .footer-middle .title { margin: 0 0 16px; }
/* column titles / links: Lato caps like saboraclothing.com (16px 700 / 13px 400) */
.footer .footer-middle .title strong {
    color: #fff !important;
    font-family: var(--font-default) !important;   /* wigstheme sets the heading font !important */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.footer .footer-middle .column ul { margin: 0; padding: 0; }
.footer .footer-middle .column ul li {
    margin: 0 0 10px;
    text-transform: none;
}
.footer .footer-middle .column ul li a {
    display: inline;
    margin: 0;
    padding: 0;
    color: #fff !important;
    font: 400 13px/1.8 var(--font-default);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
}
/* rose on ink is too dark (2.2:1): hover goes blush + underline */
.footer .footer-middle .column ul li a:hover,
.footer .footer-middle .column ul li a:focus {
    color: var(--sab-blush) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
/* (1) logo + FooterContact topic */
.footer .footer-middle .footer-logo { margin: 0 0 12px; }
.footer .footer-middle .footer-logo img {
    display: block;
    height: auto;
    max-height: 22px;   /* saboraclothing.com footer logo = 178x22 */
    width: auto;
    max-width: 100%;
    /* white version of a dark logo: invert, then 'screen' drops any (now black)
       background into the ink panel */
    filter: invert(1);
    mix-blend-mode: screen;
}
.footer .footer-middle .footer-contact .topic-html-content-title { display: none; }
.footer .footer-middle .footer-contact .topic-html-content,
.footer .footer-middle .footer-contact .topic-html-content-body,
.footer .footer-middle .footer-contact address,
.footer .footer-middle .footer-contact p {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--sab-muted-on-ink);
    font: normal 400 14px/1.7 var(--font-default);
    letter-spacing: 0;
    text-align: left;
}
.footer .footer-middle .footer-contact a {
    color: #fff !important;
    text-decoration: none;
}
.footer .footer-middle .footer-contact a:hover { text-decoration: underline !important; }

/* bottom row: copyright | English / Espanol | back to top */
.footer .footer-lower {
    padding: 0 0 12px;
    background: var(--sab-ink) !important;
}
.footer .footer-lower-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    min-height: 60px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.footer .footer-lower .footer-disclaimer {
    margin: 0;
    color: var(--sab-muted-on-ink) !important;
    font: 400 13px var(--font-default);
}
.footer .footer-lower .footer-lower-zone {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.footer .footer-lower .npc-tr-footer.container {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.footer .footer-lower .npc-tr {
    --npc-tr-active-bg: #fff;
    --npc-tr-active-fg: var(--sab-ink);
    --npc-tr-border: rgba(255, 255, 255, .5);
}
/* wigstheme paints every footer-lower descendant white !important */
.footer .footer-lower .npc-tr .npc-tr__opt[aria-pressed="true"],
.footer .footer-lower .npc-tr .npc-tr__opt[aria-pressed="true"] * { color: var(--sab-ink) !important; }
.footer .footer-lower .footer-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: #fff !important;
    font: 500 11px var(--font-primary);
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
}
.footer .footer-lower .footer-back-to-top:hover { text-decoration: underline !important; }
.footer .footer-lower .footer-credits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 4px 0 8px;
    font: 400 11px var(--font-default);
    opacity: .7;
}
.footer .footer-lower .footer-credits .designedby { text-align: left; }
.footer .footer-lower .footer-credits .designedby > span + span { margin-left: 8px; }

@media (min-width: 768px) {
    .footer .footer-middle > .container > .row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px;
        margin: 0;
    }
    .footer .footer-middle > .container > .row::before,
    .footer .footer-middle > .container > .row::after { content: none; }
    .footer .footer-middle > .container > .row > .column {
        width: auto;
        max-width: none;
        float: none;
        flex: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer .footer-middle > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .html-home-page .footer { margin-top: 36px; }
    .footer { margin-top: 32px; }
    .footer .footer-upper { padding: 32px 16px !important; }
    .footer .footer-upper .newsletter-email { align-items: stretch; gap: 12px; }
    .footer .footer-upper .newsletter-email strong { font-size: 14px; letter-spacing: .16em; }
    .footer .footer-upper .newsletter-email .form-group {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .footer .footer-upper #newsletter-subscribe-block #newsletter-email {
        height: 50px !important;
        border-right: 1px solid var(--sab-ink) !important;
        font-size: 16px;
    }
    .footer .footer-upper #newsletter-subscribe-block #newsletter-subscribe-button {
        width: 100% !important;
        height: 50px !important;
    }

    .footer .footer-middle { padding: 8px 0 0 !important; }
    .footer .footer-middle > .container { padding: 0 16px; }
    /* accordions first (core m-acc), the always-open contact block below */
    .footer .footer-middle .container > .row {
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .footer .footer-middle .column {
        border-block-end: 1px solid rgba(255, 255, 255, .18);
        text-align: left;
    }
    .footer .footer-middle .column .title {
        display: flex;
        align-items: center;
        min-height: 52px;
        margin: 0;
        padding-block: 0;
        color: #fff;
    }
    .footer .footer-middle .column.m-acc > .title::after { color: #fff; }
    .footer .footer-middle .column ul li { margin: 0; }
    .footer .footer-middle .column .nav-list > li > a { min-height: 44px; display: flex; }
    .footer .footer-middle .footer-contact {
        order: 2;
        border-block-end: 0;
        padding: 22px 0 6px;
    }
    .footer .footer-middle .footer-logo img { max-height: 18px; }
    .footer .footer-middle .footer-contact address { font-size: 15px; line-height: 1.6; }

    .footer .footer-lower > .container { padding: 0 16px; }
    .footer .footer-lower-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-top: 0;
        padding: 8px 0 0;
    }
    .footer .footer-lower .footer-lower-zone { order: 1; margin-left: 0; }
    .footer .footer-lower .footer-disclaimer { order: 2; font-size: 12px; }
    .footer .footer-lower .footer-back-to-top { order: 3; }
    .footer .footer-lower .npc-tr-footer { justify-content: flex-start; padding-block: 0 !important; }
}

/* ---------------------------------------------------------------------------
   5. PAGES (Design §8.4) - CSS on the existing core markup
   --------------------------------------------------------------------------- */

/* 5.1 listing pages (category / search / new / manufacturer): 3 columns on
   desktop (phones: core mobile-category.css keeps 2). Page-scoped so product
   carousels / PDP grids keep their own columns. Selector specificity (0,5,0)
   + later load beats catalog-viewmode-custom.css (0,5,0 !important). */
@media (min-width: 768px) {
    .html-category-page .product-grid .item-grid.row,
    .html-search-page .product-grid .item-grid.row,
    .html-recently-added-products-page .product-grid .item-grid.row,
    .html-manufacturer-page .product-grid .item-grid.row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 24px;
        row-gap: 8px;
        margin: 0 !important;
        overflow: visible !important;
    }
    .html-category-page .product-grid .item-grid.row::before,
    .html-category-page .product-grid .item-grid.row::after,
    .html-search-page .product-grid .item-grid.row::before,
    .html-search-page .product-grid .item-grid.row::after,
    .html-recently-added-products-page .product-grid .item-grid.row::before,
    .html-recently-added-products-page .product-grid .item-grid.row::after,
    .html-manufacturer-page .product-grid .item-grid.row::before,
    .html-manufacturer-page .product-grid .item-grid.row::after { content: none !important; display: none !important; }
    .html-category-page .product-grid .item-grid .item-box.item-box,
    .html-search-page .product-grid .item-grid .item-box.item-box,
    .html-recently-added-products-page .product-grid .item-grid .item-box.item-box,
    .html-manufacturer-page .product-grid .item-grid .item-box.item-box {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        float: none !important;
        clear: none !important;
        padding: 0 !important;
        margin: 0 0 24px !important;
    }
}

/* 5.2 product box: portrait picture (core 3:4), 2-line name, rose price */
.product-grid .product-item .product-title-inline a,
.product-grid .product-item .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sab-ink);
    font-family: var(--font-default);
}
.product-grid .product-item .prices .actual-price,
.product-grid .product-item .prices-inline .actual-price {
    color: var(--sab-rose);
    font-weight: 700;
}

/* 5.3 product details: caps name, Montserrat accordion headers */
.product-details-page .product-name h1 {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sab-ink);
}
.product-details-page .panel-heading .panel-title,
.product-details-page .panel-heading .panel-title a,
.product-details-page .product-details-tabs .nav-tabs > li > a {
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.product-details-page .prices .product-price,
.product-details-page .prices .product-price span { color: var(--sab-rose); }

/* 5.4 login: centred title, the two existing blocks as blush cards, returning
   customer first (it is the second column in the markup) */
.login-page .customer-blocks > .row:first-child { display: flex; flex-wrap: wrap; }
.login-page .customer-blocks > .row:first-child::before,
.login-page .customer-blocks > .row:first-child::after { content: none; }
.login-page .customer-blocks > .row:first-child > div:has(.returning-wrapper) { order: -1; }
.login-page .returning-wrapper,
.login-page .new-wrapper {
    height: 100%;
    margin: 0 0 24px;
    padding: 32px;
    background: var(--sab-blush);
    border: 0;
    box-shadow: none;
}
.login-page .returning-wrapper fieldset,
.login-page .new-wrapper fieldset { margin: 0; padding: 0; border: 0; }
.login-page .returning-wrapper legend,
.login-page .new-wrapper legend {
    margin: 0 0 20px;
    border: 0;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sab-ink);
}
.login-page .returning-wrapper .form-control {
    height: 46px;
    border: 1px solid #cfc3c1;
    border-radius: 0;
    background: #fff;
}
.login-page .returning-wrapper .login-button { width: 100%; min-height: 48px; }
.login-page .returning-wrapper .form-group .col-md-3 { width: 100%; float: none; }
/* new customer: nop copy + Register as the secondary (outline) button */
.login-page .new-wrapper .register-button {
    min-height: 48px;
    background: transparent !important;
    border: 1px solid var(--sab-ink) !important;
    color: var(--sab-ink) !important;
}
.login-page .new-wrapper .register-button:hover,
.login-page .new-wrapper .register-button:focus {
    background: var(--sab-ink) !important;
    border-color: var(--sab-ink) !important;
    color: #fff !important;
}
.login-page .topic-html-content {
    margin: 8px 0 0;
    font-family: var(--font-default);
    color: var(--sab-ink);
}
@media (max-width: 767.98px) {
    .login-page .returning-wrapper,
    .login-page .new-wrapper { height: auto; padding: 24px 16px; }
}

/* 5.5 register: the 3 existing wizard tabs read as a rose step bar */
.b2b-registration-wizard .nav-tabs { background: #fff; }
.b2b-registration-wizard .nav-tabs > li > a,
.b2b-registration-wizard .tab-title {
    font-family: var(--font-primary);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.b2b-registration-wizard .tab-title { font-size: 13px; font-weight: 500; }
.b2b-registration-wizard .nav-tabs > li.active > a,
.b2b-registration-wizard .nav-tabs > li.active > a:hover,
.b2b-registration-wizard .nav-tabs > li.active > a:focus { color: var(--sab-rose); }
.b2b-registration-wizard .fieldset-header h3 {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.registration-page .page-title .subtitle { font-family: var(--font-default); }

/* 5.6 info pages: left help menu (core markup .has-help-nav .help-nav, §8.6) */
.has-help-nav .help-nav h2,
.has-help-nav .help-nav h3,
.has-help-nav .help-nav h4 {
    margin: 0 0 10px;
    font-family: var(--font-primary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sab-rose);
}
.has-help-nav .help-nav ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.has-help-nav .help-nav li { margin: 0; }
.has-help-nav .help-nav a {
    display: block;
    padding: 6px 0;
    color: var(--sab-ink) !important;
    font: 400 14px/1.5 var(--font-default);
    text-decoration: none;
}
.has-help-nav .help-nav a:hover,
.has-help-nav .help-nav a:focus { color: var(--sab-rose) !important; }
.has-help-nav .help-nav a[aria-current="page"] {
    color: var(--sab-rose) !important;
    font-weight: 700;
}
.topic-page .page-body { font-family: var(--font-default); line-height: 1.7; }
@media (max-width: 767.98px) {
    /* horizontal chip row (scrolls), not a stacked list */
    .has-help-nav .help-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 0 16px;
        padding: 0 15px 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .has-help-nav .help-nav::-webkit-scrollbar { display: none; }
    .has-help-nav .help-nav h2,
    .has-help-nav .help-nav h3,
    .has-help-nav .help-nav h4 { display: none; }
    .has-help-nav .help-nav ul {
        display: flex;
        flex: 0 0 auto;
        gap: 8px;
        margin: 0;
    }
    .has-help-nav .help-nav li { flex: 0 0 auto; }
    .has-help-nav .help-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid #cfc3c1;
        border-radius: 999px;
        white-space: nowrap;
        font-size: 13px;
    }
    .has-help-nav .help-nav a[aria-current="page"] {
        border-color: var(--sab-rose);
        background: var(--sab-rose);
        color: #fff !important;
    }
}

/* 5.7 contact: rose SUBMIT (fonts via the --contact-font-* hooks); info layout = "info pages" below */
.contact-page__info .topic-html-content-body a { color: var(--sab-rose) !important; }

/* 5.8 cart / checkout: carded groups, rose CHECKOUT */
.shopping-cart-page .full-cart-container,
.shopping-cart-page .full-cart-totals-section,
.checkout-page .opc .step {
    border: 1px solid var(--sab-line);
    background: #fff;
}
.shopping-cart-page .full-cart-totals-section { background: var(--sab-blush); padding: 20px; }
.shopping-cart-page .full-cart-header,
.shopping-cart-page .full-cart-header * {
    font-family: var(--font-primary);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.full-cart-checkout-button,
.checkout-button {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    letter-spacing: .16em;
    min-height: 48px;
}
.checkout-page .opc .step-title h2 {
    font-family: var(--font-primary) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* 5.9 my account: menu 3/12 | content 9/12, scrolling tab row on phones */
@media (min-width: 992px) {
    .html-account-page .master-column-wrapper .sidebar { width: 25%; }
    .html-account-page .master-column-wrapper .side-content { width: 75%; }
}
.html-account-page .block-account-navigation .title strong {
    font-family: var(--font-primary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.html-account-page .block-account-navigation .listbox a {
    color: var(--sab-ink);
    font-family: var(--font-default);
}
.html-account-page .block-account-navigation .listbox a.active,
.html-account-page .block-account-navigation .listbox a:hover { color: var(--sab-rose) !important; }
@media (max-width: 767.98px) {
    .html-account-page .block-account-navigation { margin: 0 0 16px; }
    .html-account-page .block-account-navigation .title { display: none; }
    .html-account-page .block-account-navigation .listbox { display: block !important; border: 0; }
    .html-account-page .block-account-navigation .listbox ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .html-account-page .block-account-navigation .listbox li { flex: 0 0 auto; border: 0; }
    .html-account-page .block-account-navigation .listbox li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px !important;
        border: 1px solid #cfc3c1;
        border-radius: 999px;
        white-space: nowrap;
        background: none !important;
    }
    .html-account-page .block-account-navigation .listbox li a.active {
        border-color: var(--sab-rose);
        background: var(--sab-rose) !important;
        color: #fff !important;
    }
    .html-account-page .block-account-navigation .listbox li a.active::before { content: none !important; }
}

/* SAB001: on phones the hero pagination row is static (mobile-banner.css) and shows the theme's grey slider
   background under the art; keep that row on blush so the hero reads as one block */
/* same specificity as wigstheme's `.master-wrapper-content > .swiper.nop-slider` (grey-200 !important), later in order */
.master-wrapper-content > .swiper.nop-slider,
.nop-slider {
    background: var(--sab-blush, #f7e9e7) !important;
}

/* ===========================================================================
   SAB001 benchmark match (saboraclothing.com, measured 2026-10-01)
   =========================================================================== */
/* (1) ONE black row = announcement bar + EN/ES. The announcement (NewsWidget) renders inside
   .header-tagline-col (no tagline any more). The admin back colour / image is not painted here:
   the row stays ink (local news item set to the same #231f20).
   Readability: white on ink #231f20 = 16.3:1 (AAA); every text/link/icon in the row is forced white,
   since rich-editor text can carry its own colour and the theme's link blue would fail. */
.header .header-upper .header-tagline-col { min-width: 0; flex: 1 1 auto; }
.header .header-upper .announcement-bar {
    position: relative;
    width: 100%;
    border: 0 !important;
    background: transparent !important;   /* overrides the inline admin colour/image */
    background-image: none !important;
    color: #fff !important;
}
.header .header-upper .announcement-bar__content { max-width: none; margin: 0; }
.header .header-upper .announcement-bar__text,
.header .header-upper .announcement-bar__text * {
    color: #fff !important;                /* rich-editor text may carry its own colour */
    font-family: var(--font-default) !important;
    font-size: 13px !important;
    background: transparent !important;
}
.header .header-upper .announcement-bar__text {
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header .header-upper .announcement-bar__link {
    margin-left: 14px;
    font-weight: 400 !important;
    letter-spacing: .14em;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.header .header-upper .announcement-bar__link:hover,
.header .header-upper .announcement-bar__link:focus-visible { opacity: 1; text-decoration-thickness: 2px; }
.header .header-upper .announcement-bar__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 768px) {
    /* EN/ES keep their natural width; the announcement takes the rest of the row */
    .header .header-upper .header-selectors-col { flex: 0 0 auto; padding-left: 24px !important; }
}
@media (max-width: 767.98px) {
    /* phones: the announcement replaces the short tagline in the 30px strip, centred */
    .header .header-upper .header-tagline-col { width: 100%; }
    .header .header-upper .announcement-bar__text,
    .header .header-upper .announcement-bar__text * { font-size: 11px !important; }
    .header .header-upper .announcement-bar__text { line-height: 30px; letter-spacing: .08em; }
    .header .header-upper .announcement-bar__link { margin-left: 8px; letter-spacing: .08em; }
}

/* (2) footer contact = Store record lines + FooterContact topic (hours), one line each */
.footer .footer-middle .footer-contact address.footer-contact__store { margin: 0; }
.footer .footer-middle .footer-contact .footer-contact__line { display: block; }

/* (3) announcement row geometry (2026-10-01): the message sits centred on the whole row (not hugging the
   left), EN/ES stays pinned right, and the row is a fixed 36px at every desktop width (at 800px the
   EN/ES pill used to stretch it to 42px and drop the text 3px). The close button is not offered in the
   merged row: the row stays for EN/ES anyway, and on phones its 44px box overflowed the 30px strip. */
.header .header-upper .announcement-bar__close { display: none !important; }
.header .header-upper .announcement-bar { padding: 0 !important; text-align: center; }
.header .header-upper .announcement-bar__content { justify-content: center; }
@media (min-width: 768px) {
    .header .header-upper .row { position: relative; height: 36px; min-height: 36px; }
    .header .header-upper .header-tagline-col {
        position: absolute;
        inset: 0 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 140px !important;   /* EN/ES is ~113px: keep the centred message clear of it on both sides */
        pointer-events: none;
    }
    .header .header-upper .header-tagline-col .announcement-bar { pointer-events: auto; width: auto; max-width: 100%; }
    .header .header-upper .header-selectors-col { margin-left: auto; position: relative; z-index: 1; }
    .header .header-upper .header-selectors-wrapper,
    .header .header-upper .npc-tr { max-height: 30px; }
}
@media (max-width: 767.98px) {
    .header .header-upper .announcement-bar { padding: 0 12px !important; }
}


/* (4) masthead: no sticky pinning; hide on scroll down / show on scroll up (sab-masthead-v8.js), and on the
   home page at the very top a transparent masthead over a full-bleed hero (2026-10-01).
   Replaces: simplex.js pinning only the nav bar (.main-menu.goToTop, fixed z9999) on desktop. Phones keep the
   core .header hide-on-scroll; the wrapper must not become the sticky containing block there. */
.main-menu.goToTop,
.navbar.navbar-inverse.goToTop {
    position: static !important;
    top: auto !important;
    width: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}
@media (max-width: 767.98px) {
    .sab-masthead { display: contents; }
}
@media (min-width: 768px) {
    /* html + body both carry overflow-x:hidden, which makes BODY its own scroll container, so sticky never
       engages. clip hides the same horizontal overflow without creating a scroll container. */
    html, body { overflow-x: clip !important; }
    /* Safari <= 15 has no clip: hidden on BODY only (html visible) propagates to the viewport - no scroll container */
    @supports not (overflow-x: clip) {
        html { overflow-x: visible !important; }
        body { overflow-x: hidden !important; }
    }
    .sab-masthead {
        position: sticky;
        top: 0;
        z-index: 1029;
        background: #fff;
        transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
    }
    .sab-masthead:not(.is-top) { box-shadow: 0 2px 14px rgba(35, 31, 32, .08); }
    body.sab-mh-hidden .sab-masthead { transform: translateY(-100%); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sab-masthead { transition: none; }
}

/* home, at the top (desktop): the banner starts under the solid white logo row and only the MENU row lies
   transparent over it (section (9)). sab-masthead-v8.js measures the banner pixels under EACH menu item on every
   slide change and gives it white (.sab-tone-dark) or ink/rose type (.is-adaptive); an item on a dark/light edge
   gets a chip (section (10)). Glass fallback (video slides, unloaded or cross-origin art): .is-glass-dark = dark
   band + white type, else a light band - colours in section (8). Banner art: keep text clear of the top ~60px. */
.html-home-page .master-wrapper-content > .nop-slider { margin-top: calc(-1 * var(--sab-overlay-h, 0px)); }
.html-home-page .sab-masthead.is-top { background: transparent; }
.html-home-page .sab-masthead.is-top .header-lower,
.html-home-page .sab-masthead.is-top .header-menu,
.html-home-page .sab-masthead.is-top .header-menu .main-menu,
.html-home-page .sab-masthead.is-top .header-menu .navbar {
    background: transparent !important;
    border-color: transparent !important;
    transition: background-color .3s ease;
}
/* transparent: a soft halo in the item's own tone for the edges of busier areas */
.html-home-page .sab-masthead.is-top.is-adaptive .header-lower a:not(.sab-tone-dark),
.html-home-page .sab-masthead.is-top.is-adaptive .header-menu .nav.navbar-nav > li > a:not(.sab-tone-dark) { text-shadow: 0 0 6px rgba(255, 255, 255, .75); }
/* items over dark pixels: white type/icons/logo; SALE white + bold (rose cannot promise contrast on a photo);
   REGISTER keeps its rose fill (white on rose 7.4:1) and is never toned. The #id beats the cart/SALE/search rules
   that pin ink or rose with !important. */
.html-home-page #sab-masthead.is-top img.sab-tone-dark { filter: invert(1); }
.html-home-page #sab-masthead.is-top a.sab-tone-dark,
.html-home-page #sab-masthead.is-top a.sab-tone-dark *,
.html-home-page #sab-masthead.is-top a.sab-tone-dark::before,
.html-home-page #sab-masthead.is-top .m-menu-toggle.sab-tone-dark,
.html-home-page #sab-masthead.is-top .m-menu-toggle.sab-tone-dark *,
.html-home-page #sab-masthead.is-top .m-search-toggle.sab-tone-dark,
.html-home-page #sab-masthead.is-top .m-search-toggle.sab-tone-dark *,
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .search-nav,
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .btn.search-box-button,
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .btn.search-box-button::before {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.html-home-page #sab-masthead.is-top a.sab-tone-dark[href$="/sale"] { color: #fff !important; font-weight: 700; }
/* white type over dark art cannot turn rose on hover (low contrast, and the tone colour is !important): underline */
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-dark:hover,
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-dark:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark { border-bottom-color: rgba(255, 255, 255, .9) !important; }
.html-home-page #sab-masthead.is-top .form-group.sab-tone-dark .search-nav::placeholder { color: rgba(255, 255, 255, .85) !important; }

/* (5) header icons = one SVG line set (24px grid, 1.5 stroke, round caps) instead of the FontAwesome font
   glyphs (menu 0c9, search 002, cart 07a). Drawn as a CSS mask on the existing elements, so the core
   markup is untouched and the icon takes the element's text colour (hover / rose states keep working).
   Cart -> shopping bag (fashion convention). Proposal for the rest of the site: docs/03-analysis/sab001-svg-icons.md */
:root {
    /* header icons (sab001-ui-round2 P2/P3): one size, 22px, phone + desktop (iOS HIG toolbar glyph range, 44px touch
       targets on phones) and a LIGHTER 1.5 stroke than the site set (1.8, section (12)) so the thin SABORA wordmark
       leads and the icons read as secondary - at 1.8 the icons had the logo's own weight and height and the row read
       as one string of glyphs (user, 2026-10-01). Same drawings as gen_icons.py, stroke 1.5. */
    --sab-ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --sab-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E");
    --sab-ico-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13.5H5.7z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3C/svg%3E");
    --sab-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
    --sab-header-icon: var(--sab-icon-lg);   /* 24px since (22c) */
}
.header .header-lower .m-menu-toggle .fa-bars::before,
.header .header-lower .m-search-toggle .fa-search::before,
.header .header-lower .search-box .btn.search-box-button::before,
.header .header-lower .ico-cart::before,
.header .header-lower .m-account-link .fa-user-o::before {
    content: "" !important;
    display: inline-block !important;
    width: var(--sab-header-icon) !important;
    height: var(--sab-header-icon) !important;
    font-size: 0 !important;
    background-color: currentColor !important;
    -webkit-mask: var(--sab-ico) center / contain no-repeat;
    mask: var(--sab-ico) center / contain no-repeat;
    vertical-align: middle;
    opacity: 1 !important;   /* the core mobile cart glyph is drawn at .7 */
}
.header .header-lower .m-menu-toggle .fa-bars::before { --sab-ico: var(--sab-ico-menu); }
.header .header-lower .m-search-toggle .fa-search::before,
.header .header-lower .search-box .btn.search-box-button::before { --sab-ico: var(--sab-ico-search); }
.header .header-lower .ico-cart::before { --sab-ico: var(--sab-ico-bag); }
.header .header-lower .m-account-link .fa-user-o::before { --sab-ico: var(--sab-ico-user); }
@media (min-width: 768px) {
    /* desktop cart: the base theme pins the font glyph absolutely inside 28px of left padding */
    .header .header-lower .header-cart-col .shopping-cart-link .ico-cart,
    .header .header-lower .header-cart-col a.ico-cart { padding-left: 0 !important; gap: 8px; min-height: 36px; }   /* 44px overflowed the 36px row 4px down */
    .header .header-lower .header-cart-col .ico-cart::before { position: static !important; transform: none !important; margin: 0 !important; }
    /* one header icon size (sab001-ui-round2 P3, 22px + header stroke 1.5; was bag 26 / search 20) */
}

/* (6) logo sizes = saboraclothing.com, measured on the drawn glyphs at 768-1920px (2026-10-01):
   header 404x50 above 1024px, 323x40 (80%) at 768-1024px; footer fluid = 12.4% of the window width,
   min 128px (live: 157px @1280, 178 @1440, 190 @1536, 239 @1920). Phones keep their own sizes (the live
   site is not responsive there). */
@media (min-width: 768px) and (max-width: 1024px) {
    .header .header-lower .header-logo img { max-height: 40px; }
}
@media (min-width: 768px) {
    .footer .footer-middle .footer-logo img {
        width: max(128px, 12.4vw);
        max-width: 100%;
        height: auto;
        max-height: none;
    }
}

/* (7) page-by-page match with saboraclothing.com (measured at 1440, 2026-10-01). Accent colours stay.
   Titles: live = Lato 25px 700 caps, centred, no tracking (was Montserrat 28px 300 .08em). */
.page .page-title.panel-heading h1,
.page .page-title h1 {
    font-family: var(--font-default) !important;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    margin: 4px 0 18px;
}
@media (max-width: 767.98px) {
    .page .page-title.panel-heading h1,
    .page .page-title h1 { font-size: 21px; margin: 4px 0 14px; }
}
/* info pages (topics + contact): live = side menu 210px at the left edge, right-aligned Lato caps;
   content column 978px, 90px away, title centred above a 1px bordered box (no blush band) */
.topic-page.has-help-nav .page-title.panel-heading,
.contact-page__wrapper.has-help-nav .page-title.panel-heading { text-align: center; }
.topic-page.has-help-nav .page-title.panel-heading h1,
.contact-page__wrapper.has-help-nav .page-title.panel-heading h1 {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    text-align: center;
}
.has-help-nav .help-nav h2,
.has-help-nav .help-nav h3,
.has-help-nav .help-nav h4 {
    margin: 0 0 4px;
    font-family: var(--font-default) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--sab-ink);
}
.has-help-nav .help-nav a {
    padding: 2px 0;
    font: 400 14px/1.6 var(--font-default);
    text-transform: uppercase;
}
.has-help-nav .help-nav a[aria-current="page"] {
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (min-width: 992px) {
    /* live: menu at 22px from the window edge at 1440 = a 1396px column with no inner gutters */
    .master-column-wrapper > .container:has(.has-help-nav) { width: 100% !important; max-width: 1396px !important; padding-inline: 0; }   /* contact: the theme pins .html-contact-page .container to 95% */
    .master-column-wrapper > .container:has(.has-help-nav) > .row { margin-inline: 0; }
    .master-column-wrapper > .container:has(.has-help-nav) > .row > [class*="col-"],
    .topic-page.has-help-nav,
    .contact-page__wrapper.has-help-nav { padding-inline: 0 !important; }
    .has-help-nav .help-nav-row {
        display: grid;
        grid-template-columns: 210px minmax(0, 978px);
        column-gap: 90px;
        margin: 0;
    }
    .has-help-nav .help-nav-row::before,
    .has-help-nav .help-nav-row::after { content: none; }
    .has-help-nav .help-nav-row > [class*="col-"] { width: auto; float: none; padding: 0; }
    .has-help-nav .help-nav { text-align: right; }
    .has-help-nav .help-nav ul { margin: 0 0 30px; }
    .contact-page__wrapper.has-help-nav { max-width: none !important; }
    .topic-page.has-help-nav .help-nav-content > .page-body,
    .contact-page__wrapper.has-help-nav .help-nav-content > .contact-details {
        padding: 30px 36px;
        border: 1px solid #ddd;
    }
}
/* contact: info centred inside the box (no blush card); labels in a left column like the live form;
   SUBMIT centred, auto width (rose kept) */
.contact-page__info { padding: 0 0 24px; background: none; text-align: center; }
@media (min-width: 768px) {
    .contact-page .contact-form__group {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
    }
    .contact-page .contact-form__group > label { padding-top: 8px; }
    .contact-page .contact-form__group > :not(label):not(input):not(textarea):not(select) { grid-column: 2; }
}
.contact-page .contact-form__group > label {
    font: 400 13px/1.4 var(--font-default) !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;   /* live: "Your Name *" */
    color: var(--sab-ink) !important;
}
.contact-page .contact-form__submit { text-align: center; }
.contact-page .contact-form__submit .contact-us-button { width: auto !important; min-width: 160px; display: inline-flex; justify-content: center; }
/* login: live = two white boxes with a 1px border, Lato 20px 700 headings followed by a rule,
   13px labels; primary button full width (rose kept) */
.login-page .returning-wrapper,
.login-page .new-wrapper {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
}
.login-page .returning-wrapper fieldset legend,
.login-page .new-wrapper.register-block fieldset legend {   /* = simplex's own selectors (0,3,2) / (0,4,2) */
    display: flex;
    padding: 0;
    border-bottom: 0;
    align-items: center;
    gap: 16px;
    width: 100%;
    font-family: var(--font-default);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}
.login-page .returning-wrapper fieldset legend::after,
.login-page .new-wrapper.register-block fieldset legend::after {
    content: "";
    flex: 1 1 auto;
    max-width: 140px;
    margin-left: auto;
    border-top: 2px solid var(--sab-ink);
}
.login-page .returning-wrapper label,
.login-page .returning-wrapper .forgot-password a {
    font: 400 13px/1.4 var(--font-default);
    color: var(--sab-ink);
}
.login-page .returning-wrapper .login-button,
.login-page .new-wrapper .register-button {
    width: 100%;
    font-family: var(--font-default) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

/* (8) full banner + header polish (2026-10-01)
   - the header retone is MEASURED at the start of a slide change and APPLIED with a short --sab-tone-ms (240ms, set
     by sab-masthead-v8.js) centred on the cross-fade's 50 % blend, on autoplay and dot click alike
   - glass fallback: the menu row near-opaque (.9 light / .86 dark; the logo row above is always white)
   - arrows: 44px round buttons that stay visible on any art; bullets with a ring
   - the transitions are declared WITHOUT .is-top so leaving the top animates too (they used to apply only while at
     the top: scrolling down flipped the menu row from transparent to white in one frame, coming back faded - 2026-10-02) */
.html-home-page #sab-masthead .header-lower,
.html-home-page #sab-masthead .header-menu {
    transition: background-color var(--sab-tone-ms, .3s) ease;
}
.html-home-page #sab-masthead .header-lower a,
.html-home-page #sab-masthead .header-lower a *,
.html-home-page #sab-masthead .header-lower a::before,
.html-home-page #sab-masthead .header-lower .search-nav,
.html-home-page #sab-masthead .header-lower .btn.search-box-button::before,
.html-home-page #sab-masthead .header-lower .m-menu-toggle,
.html-home-page #sab-masthead .header-lower .m-search-toggle,
.html-home-page #sab-masthead .header-lower .header-logo img,
.html-home-page #sab-masthead .header-lower .form-group,
.html-home-page #sab-masthead .header-menu .nav.navbar-nav > li > a {
    /* no text-shadow here: an interpolated halo over a half-faded slide read as blurred type (v8 switches it) */
    transition: color var(--sab-tone-ms, .24s) ease, background-color var(--sab-tone-ms, .24s) ease,
                filter var(--sab-tone-ms, .24s) ease, border-color var(--sab-tone-ms, .24s) ease;
}
.html-home-page #sab-masthead.is-top:not(.is-adaptive):not(.is-glass-dark) .header-menu { background: rgba(255, 255, 255, .9) !important; }
.html-home-page #sab-masthead.is-top.is-glass-dark .header-menu { background: rgba(35, 31, 32, .86) !important; }
.html-home-page #sab-masthead.is-top:not(.is-adaptive) .header-menu { box-shadow: inset 0 1px 0 rgba(128, 128, 128, .18); }
@media (prefers-reduced-motion: reduce) {
    .html-home-page #sab-masthead.is-top * { transition: none !important; }
}
.master-wrapper-content > .nop-slider .swiper-button-prev,
.master-wrapper-content > .nop-slider .swiper-button-next {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 2px 10px rgba(35, 31, 32, .18);
    color: var(--sab-ink);
    transition: background-color .2s ease, transform .2s ease;
}
.master-wrapper-content > .nop-slider .swiper-button-prev { left: 20px; }
.master-wrapper-content > .nop-slider .swiper-button-next { right: 20px; }
.master-wrapper-content > .nop-slider .swiper-button-prev::after,
.master-wrapper-content > .nop-slider .swiper-button-next::after { font-size: 16px; font-weight: 700; color: var(--sab-ink); }
.master-wrapper-content > .nop-slider .swiper-button-prev:hover,
.master-wrapper-content > .nop-slider .swiper-button-next:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 767.98px) {
    .master-wrapper-content > .nop-slider .swiper-button-prev,
    .master-wrapper-content > .nop-slider .swiper-button-next { display: none; }   /* swipe on phones */
}


/* (9) the banner starts UNDER the logo row (2026-10-01: it looked cut by it): the logo row is always solid white,
   only the menu row lies over the banner (desktop); phones get no overlap at all. Slide cross-fade = 1.2s ease-in-out
   (duration set by sab-masthead-v8.js, the curve here). */
.html-home-page #sab-masthead.is-top .header-lower {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--sab-line) !important;
}
@media (max-width: 767.98px) {
    .html-home-page #sab-masthead.is-top .header-menu {
        background: var(--m-header-bg, #fff) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
.master-wrapper-content > .nop-slider .swiper-slide { transition-timing-function: cubic-bezier(.45, 0, .25, 1) !important; }
/* full-image slides keep the art's ratio even with a stale cached plugin styles.css (the old copy lacks height:auto and the
   img height attribute then squashes the art - sab001-ui-round2 P11); this bundle is hash-busted */
.nop-slider picture .slider-img,
.nop-slider .swiper-full-link .slider-img { height: auto !important; }
/* real cross-fade: the plugin hides every non-active slide with visibility, so the outgoing slide vanished at the
   start of a change and the incoming one faded in over the blush slider background - the header kept the old
   (white) tone over that light flash. Keep all slides painted and let opacity (Swiper's fade) do the work; the active
   slide stays on top (z-index 10), so clicks still reach it. */
.nop-slider.swiper-fade .swiper-slide { visibility: visible !important; }

/* (10) no backdrop blur on the menu row over the banner: it smeared whatever photo lies under it (the model's head,
   2026-10-01). The glass fallback is a plain translucent tint now; adaptive mode stays fully transparent. */
.html-home-page #sab-masthead.is-top .header-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* per-item chip (sab-masthead-v8.js): a menu item over a dark/light edge of the art gets a 28px tinted band behind
   its own label only - the row stays transparent and the photo is not covered. The band is a pseudo element so it
   fades (opacity) with the type instead of popping in (a gradient background cannot transition). */
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a {
    position: relative;
    isolation: isolate;
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 28px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .9);
    opacity: 0;
    transition: opacity var(--sab-tone-ms, .24s) ease, background-color var(--sab-tone-ms, .24s) ease;
    z-index: -1;
    pointer-events: none;
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip {
    margin-inline: -10px;
    padding-inline: 10px !important;
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip::after { opacity: 1; }
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip.sab-tone-dark::after {
    background: rgba(35, 31, 32, .82);
}
.html-home-page #sab-masthead.is-top .header-menu .nav.navbar-nav > li > a.sab-tone-chip.sab-tone-dark { text-shadow: none; }

/* (11) no "bounce" on load: the banner's pull-up must be right on the FIRST paint. The script used to set
   --sab-overlay-h only after load, so the banner painted 51px low and then jumped up. The menu row is 51px at every
   desktop width (measured 800-1920); the script still re-measures, normally to the same value. */
@media (min-width: 768px) {
    :root { --sab-overlay-h: 51px; }
}

/* (12) site-wide SVG icons (2026-10-01, docs/03-analysis/sab001-svg-icons.md - approved: class map, bag for cart
   everywhere, social marks in the same line style). Every FontAwesome 4.7 class the storefront uses (theme views,
   plugin views, scripts) and every theme CSS glyph hook is redrawn with one line set: 24px grid, 1.8 stroke, round
   caps, painted in currentColor through a CSS mask. Markup is untouched; an unmapped class keeps the FA glyph
   (fa-spinner keeps its animation). Generated by gen_icons.py (see the skill) - edit the icon table, not the URIs. */
:root {
    --sab-i-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13M12 16.5h.01'/%3E%3C/svg%3E");
    --sab-i-alert-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 20h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E");
    --sab-i-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --sab-i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --sab-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13.5H5.7z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3C/svg%3E");
    --sab-i-bag-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13.5H5.7z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3Cpath d='M12 12.5v5M9.5 15h5'/%3E%3C/svg%3E");
    --sab-i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='M3.5 7.5 12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E");
    --sab-i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
    --sab-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    --sab-i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E");
    --sab-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sab-i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --sab-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --sab-i-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
    --sab-i-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 7-5 5 5 5M11 7l-5 5 5 5'/%3E%3C/svg%3E");
    --sab-i-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 7 5 5-5 5M13 7l5 5-5 5'/%3E%3C/svg%3E");
    --sab-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    --sab-i-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14M5 7l-2.5 6a2.5 2.5 0 0 0 5 0zM19 7l-2.5 6a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E");
    --sab-i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
    --sab-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
    --sab-i-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E");
    --sab-i-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3h-3a4.5 4.5 0 0 0-4.5 4.5V10H7v3.5h2.5V21H13v-7.5h3l.5-3.5H13V7.5A1 1 0 0 1 14 6.5h3z'/%3E%3C/svg%3E");
    --sab-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5v18h11V6.5z'/%3E%3Cpath d='M14 3v3.5h3.5M9 12h6M9 15.5h6'/%3E%3C/svg%3E");
    --sab-i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l2 2h10V19H3z'/%3E%3C/svg%3E");
    --sab-i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E");
    --sab-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z'/%3E%3C/svg%3E");
    --sab-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9-9.4C2 7.3 4.3 4.5 7.3 4.5c2 0 3.6 1.1 4.7 2.8 1.1-1.7 2.7-2.8 4.7-2.8 3 0 5.3 2.8 4.3 6.1-1.5 4.8-9 9.4-9 9.4z'/%3E%3C/svg%3E");
    --sab-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M6 9.5V20h12V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");
    --sab-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");
    --sab-i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M17.3 6.7h.01'/%3E%3C/svg%3E");
    --sab-i-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l4 4-4 4M14 12H4'/%3E%3C/svg%3E");
    --sab-i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5v16h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
    --sab-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
    --sab-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --sab-i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8.5 10.5h.01M12 10.5h.01M15.5 10.5h.01'/%3E%3C/svg%3E");
    --sab-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --sab-i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.5-1L19.5 8 16 4.5 5 15.5z'/%3E%3Cpath d='m13.5 7 3.5 3.5'/%3E%3C/svg%3E");
    --sab-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --sab-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
    --sab-i-pinterest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10.6 20.5 1.9-8.2'/%3E%3Cpath d='M9.2 14.5a3.8 3.8 0 1 1 3.3 1.3c-.9 0-1.5-.4-1.8-.9'/%3E%3C/svg%3E");
    --sab-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --sab-i-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.5h10V9M7 17H4V9h16v8h-3'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E");
    --sab-i-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6 4 12l6 6M4 12h9.5a6.5 6.5 0 0 1 6.5 6.5'/%3E%3C/svg%3E");
    --sab-i-rss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8'/%3E%3Ccircle cx='6' cy='18' r='1'/%3E%3C/svg%3E");
    --sab-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E");
    --sab-i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10.5l7 3 3 7zM21 3 10 13.5'/%3E%3C/svg%3E");
    --sab-i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h7M4 12h5M4 18h3M17 5v14M14 16l3 3 3-3'/%3E%3C/svg%3E");
    --sab-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5V20h16V9.5M3 5h18l-1 4.5H4zM9.5 20v-5h5v5'/%3E%3C/svg%3E");
    --sab-i-thumbs-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate%28180 12 12%29'%3E%3Cpath d='M7 10.5V20H4v-9.5zM7 10.5l4-7c1.5 0 2.5 1 2.2 2.6l-.6 3.4H19a1.6 1.6 0 0 1 1.6 1.9l-1.4 7a1.9 1.9 0 0 1-1.9 1.6H7'/%3E%3C/g%3E%3C/svg%3E");
    --sab-i-thumbs-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10.5V20H4v-9.5zM7 10.5l4-7c1.5 0 2.5 1 2.2 2.6l-.6 3.4H19a1.6 1.6 0 0 1 1.6 1.9l-1.4 7a1.9 1.9 0 0 1-1.9 1.6H7'/%3E%3C/svg%3E");
    --sab-i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6 7l1 13h10l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E");
    --sab-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h11v10h-11zM13.5 9.5h4l3.5 3.5v3h-7.5'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
    --sab-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
    --sab-i-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20.5c.8-4 3.6-6 7-6s6.2 2 7 6M19 6.5v6M16 9.5h6'/%3E%3C/svg%3E");
    --sab-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4.5L20 20h-4.5zM20 4l-6.6 7.2M10.6 12.8 4 20'/%3E%3C/svg%3E");
    --sab-i-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='3.5'/%3E%3Cpath d='M10 9.3v5.4l4.6-2.7z'/%3E%3C/svg%3E");
}
.fa.fa-bars::before,
.fa.fa-navicon::before,
.fa.fa-reorder::before,
.fa.fa-search::before,
.fa.fa-shopping-cart::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before,
.fa.fa-cart-plus::before,
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-caret-left::before,
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-caret-right::before,
.fa.fa-arrow-circle-right::before,
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-caret-down::before,
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-caret-up::before,
.fa.fa-angle-double-right::before,
.fa.fa-angle-double-left::before,
.fa.fa-arrow-right::before,
.fa.fa-long-arrow-right::before,
.fa.fa-arrow-left::before,
.fa.fa-long-arrow-left::before,
.fa.fa-plus::before,
.fa.fa-minus::before,
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-remove::before,
.fa.fa-check::before,
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before,
.fa.fa-exclamation-triangle::before,
.fa.fa-warning::before,
.fa.fa-exclamation-circle::before,
.fa.fa-info-circle::before,
.fa.fa-trash::before,
.fa.fa-trash-o::before,
.fa.fa-truck::before,
.fa.fa-ship::before,
.fa.fa-credit-card::before,
.fa.fa-credit-card-alt::before,
.fa.fa-eye::before,
.fa.fa-eye-slash::before,
.fa.fa-sort-amount-asc::before,
.fa.fa-sort-amount-desc::before,
.fa.fa-user::before,
.fa.fa-user-o::before,
.fa.fa-user-plus::before,
.fa.fa-heart::before,
.fa.fa-heart-o::before,
.fa.fa-envelope::before,
.fa.fa-envelope-o::before,
.fa.fa-print::before,
.fa.fa-file-pdf-o::before,
.fa.fa-file::before,
.fa.fa-file-o::before,
.fa.fa-file-text-o::before,
.fa.fa-pencil::before,
.fa.fa-edit::before,
.fa.fa-pencil-square-o::before,
.fa.fa-home::before,
.fa.fa-map-marker::before,
.fa.fa-map-marker-alt::before,
.fa.fa-rss::before,
.fa.fa-rss-square::before,
.fa.fa-thumbs-up::before,
.fa.fa-thumbs-o-up::before,
.fa.fa-thumbs-down::before,
.fa.fa-thumbs-o-down::before,
.fa.fa-reply::before,
.fa.fa-mail-reply::before,
.fa.fa-mail-reply-all::before,
.fa.fa-reply-all::before,
.fa.fa-folder::before,
.fa.fa-folder-open::before,
.fa.fa-folder-o::before,
.fa.fa-folder-open-o::before,
.fa.fa-arrows-alt::before,
.fa.fa-expand::before,
.fa.fa-store::before,
.fa.fa-box::before,
.fa.fa-cube::before,
.fa.fa-th::before,
.fa.fa-th-large::before,
.fa.fa-paper-plane::before,
.fa.fa-paper-plane-o::before,
.fa.fa-comment::before,
.fa.fa-comment-o::before,
.fa.fa-comments::before,
.fa.fa-comment-dots::before,
.fa.fa-cog::before,
.fa.fa-gear::before,
.fa.fa-sign-in::before,
.fa.fa-sign-out::before,
.fa.fa-balance-scale::before,
.fa.fa-phone::before,
.fa.fa-facebook::before,
.fa.fa-facebook-f::before,
.fa.fa-facebook-official::before,
.fa.fa-facebook-square::before,
.fa.fa-instagram::before,
.fa.fa-twitter::before,
.fa.fa-twitter-square::before,
.fa.fa-youtube::before,
.fa.fa-youtube-play::before,
.fa.fa-youtube-square::before,
.fa.fa-pinterest::before,
.fa.fa-pinterest-p::before,
.fa.fa-pinterest-square::before,
.pager li.previous-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-prev::before,
.ocarousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::before,
.pager li.next-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-next::before,
.ocarousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-next::before,
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before,
.block.block-account-navigation .listbox > ul > li > a.active::before,
.block-manufacturer-navigation.box-shadow-wrapper .listbox > ul > li.active > a::before,
.box-shadow-wrapper .listbox > ul > li.active.last > a::before,
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before,
.footer .footer-middle .column.m-acc > .title::after,
.forum-search-box .btn.search-box-button::before,
.no-result::before,
.header-top-right ul li .ico-account::before,
#mobile-menu .mobile-menu-account .ico-account::before,
.header-top-right ul li .ico-wishlist::before,
#mobile-menu .mobile-menu-account .ico-wishlist::before,
.fa-icons .ocarousel .item-box .add-to-wishlist-button::before,
.fa-icons .ocarousel .item-box .add-to-compare-list-button::before,
.header-top-right ul li .ico-logout::before,
#mobile-menu .mobile-menu-account .ico-logout::before,
.header-top-right ul li .ico-login::before,
#mobile-menu .mobile-menu-account .ico-login::before,
.header-top-right ul li .ico-register::before,
#mobile-menu .mobile-menu-account .ico-register::before,
#mobile-menu .mobile-menu-account .ico-inbox::before,
#mobile-menu .mobile-menu-account a.ico-admin::before,
#backTop::after {
    content: "" !important;
    background-color: currentColor !important;
    -webkit-mask: var(--sab-i) center / contain no-repeat;
    mask: var(--sab-i) center / contain no-repeat;
    font-family: inherit !important;
}
.fa.fa-bars::before,
.fa.fa-navicon::before,
.fa.fa-reorder::before,
.fa.fa-search::before,
.fa.fa-shopping-cart::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before,
.fa.fa-cart-plus::before,
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-caret-left::before,
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-caret-right::before,
.fa.fa-arrow-circle-right::before,
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-caret-down::before,
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-caret-up::before,
.fa.fa-angle-double-right::before,
.fa.fa-angle-double-left::before,
.fa.fa-arrow-right::before,
.fa.fa-long-arrow-right::before,
.fa.fa-arrow-left::before,
.fa.fa-long-arrow-left::before,
.fa.fa-plus::before,
.fa.fa-minus::before,
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-remove::before,
.fa.fa-check::before,
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before,
.fa.fa-exclamation-triangle::before,
.fa.fa-warning::before,
.fa.fa-exclamation-circle::before,
.fa.fa-info-circle::before,
.fa.fa-trash::before,
.fa.fa-trash-o::before,
.fa.fa-truck::before,
.fa.fa-ship::before,
.fa.fa-credit-card::before,
.fa.fa-credit-card-alt::before,
.fa.fa-eye::before,
.fa.fa-eye-slash::before,
.fa.fa-sort-amount-asc::before,
.fa.fa-sort-amount-desc::before,
.fa.fa-user::before,
.fa.fa-user-o::before,
.fa.fa-user-plus::before,
.fa.fa-heart::before,
.fa.fa-heart-o::before,
.fa.fa-envelope::before,
.fa.fa-envelope-o::before,
.fa.fa-print::before,
.fa.fa-file-pdf-o::before,
.fa.fa-file::before,
.fa.fa-file-o::before,
.fa.fa-file-text-o::before,
.fa.fa-pencil::before,
.fa.fa-edit::before,
.fa.fa-pencil-square-o::before,
.fa.fa-home::before,
.fa.fa-map-marker::before,
.fa.fa-map-marker-alt::before,
.fa.fa-rss::before,
.fa.fa-rss-square::before,
.fa.fa-thumbs-up::before,
.fa.fa-thumbs-o-up::before,
.fa.fa-thumbs-down::before,
.fa.fa-thumbs-o-down::before,
.fa.fa-reply::before,
.fa.fa-mail-reply::before,
.fa.fa-mail-reply-all::before,
.fa.fa-reply-all::before,
.fa.fa-folder::before,
.fa.fa-folder-open::before,
.fa.fa-folder-o::before,
.fa.fa-folder-open-o::before,
.fa.fa-arrows-alt::before,
.fa.fa-expand::before,
.fa.fa-store::before,
.fa.fa-box::before,
.fa.fa-cube::before,
.fa.fa-th::before,
.fa.fa-th-large::before,
.fa.fa-paper-plane::before,
.fa.fa-paper-plane-o::before,
.fa.fa-comment::before,
.fa.fa-comment-o::before,
.fa.fa-comments::before,
.fa.fa-comment-dots::before,
.fa.fa-cog::before,
.fa.fa-gear::before,
.fa.fa-sign-in::before,
.fa.fa-sign-out::before,
.fa.fa-balance-scale::before,
.fa.fa-phone::before,
.fa.fa-facebook::before,
.fa.fa-facebook-f::before,
.fa.fa-facebook-official::before,
.fa.fa-facebook-square::before,
.fa.fa-instagram::before,
.fa.fa-twitter::before,
.fa.fa-twitter-square::before,
.fa.fa-youtube::before,
.fa.fa-youtube-play::before,
.fa.fa-youtube-square::before,
.fa.fa-pinterest::before,
.fa.fa-pinterest-p::before,
.fa.fa-pinterest-square::before {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -.2em;
}
.fa.fa-bars::before,
.fa.fa-navicon::before,
.fa.fa-reorder::before { --sab-i: var(--sab-i-menu); }
.fa.fa-search::before { --sab-i: var(--sab-i-search); }
.fa.fa-shopping-cart::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before { --sab-i: var(--sab-i-bag); }
.fa.fa-cart-plus::before { --sab-i: var(--sab-i-bag-plus); }
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-caret-left::before { --sab-i: var(--sab-i-chevron-left); }
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-caret-right::before,
.fa.fa-arrow-circle-right::before { --sab-i: var(--sab-i-chevron-right); }
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-caret-down::before { --sab-i: var(--sab-i-chevron-down); }
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-caret-up::before { --sab-i: var(--sab-i-chevron-up); }
.fa.fa-angle-double-right::before { --sab-i: var(--sab-i-chevrons-right); }
.fa.fa-angle-double-left::before { --sab-i: var(--sab-i-chevrons-left); }
.fa.fa-arrow-right::before,
.fa.fa-long-arrow-right::before { --sab-i: var(--sab-i-arrow-right); }
.fa.fa-arrow-left::before,
.fa.fa-long-arrow-left::before { --sab-i: var(--sab-i-arrow-left); }
.fa.fa-plus::before { --sab-i: var(--sab-i-plus); }
.fa.fa-minus::before { --sab-i: var(--sab-i-minus); }
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-remove::before { --sab-i: var(--sab-i-close); }
.fa.fa-check::before { --sab-i: var(--sab-i-check); }
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before { --sab-i: var(--sab-i-check-circle); }
.fa.fa-exclamation-triangle::before,
.fa.fa-warning::before { --sab-i: var(--sab-i-alert-triangle); }
.fa.fa-exclamation-circle::before { --sab-i: var(--sab-i-alert-circle); }
.fa.fa-info-circle::before { --sab-i: var(--sab-i-info); }
.fa.fa-trash::before,
.fa.fa-trash-o::before { --sab-i: var(--sab-i-trash); }
.fa.fa-truck::before,
.fa.fa-ship::before { --sab-i: var(--sab-i-truck); }
.fa.fa-credit-card::before,
.fa.fa-credit-card-alt::before { --sab-i: var(--sab-i-card); }
.fa.fa-eye::before { --sab-i: var(--sab-i-eye); }
.fa.fa-eye-slash::before { --sab-i: var(--sab-i-eye-off); }
.fa.fa-sort-amount-asc::before,
.fa.fa-sort-amount-desc::before { --sab-i: var(--sab-i-sort); }
.fa.fa-user::before,
.fa.fa-user-o::before { --sab-i: var(--sab-i-user); }
.fa.fa-user-plus::before { --sab-i: var(--sab-i-user-plus); }
.fa.fa-heart::before,
.fa.fa-heart-o::before { --sab-i: var(--sab-i-heart); }
.fa.fa-envelope::before,
.fa.fa-envelope-o::before { --sab-i: var(--sab-i-mail); }
.fa.fa-print::before { --sab-i: var(--sab-i-printer); }
.fa.fa-file-pdf-o::before,
.fa.fa-file::before,
.fa.fa-file-o::before,
.fa.fa-file-text-o::before { --sab-i: var(--sab-i-file); }
.fa.fa-pencil::before,
.fa.fa-edit::before,
.fa.fa-pencil-square-o::before { --sab-i: var(--sab-i-pen); }
.fa.fa-home::before { --sab-i: var(--sab-i-home); }
.fa.fa-map-marker::before,
.fa.fa-map-marker-alt::before { --sab-i: var(--sab-i-pin); }
.fa.fa-rss::before,
.fa.fa-rss-square::before { --sab-i: var(--sab-i-rss); }
.fa.fa-thumbs-up::before,
.fa.fa-thumbs-o-up::before { --sab-i: var(--sab-i-thumbs-up); }
.fa.fa-thumbs-down::before,
.fa.fa-thumbs-o-down::before { --sab-i: var(--sab-i-thumbs-down); }
.fa.fa-reply::before,
.fa.fa-mail-reply::before,
.fa.fa-mail-reply-all::before,
.fa.fa-reply-all::before { --sab-i: var(--sab-i-reply); }
.fa.fa-folder::before,
.fa.fa-folder-open::before,
.fa.fa-folder-o::before,
.fa.fa-folder-open-o::before { --sab-i: var(--sab-i-folder); }
.fa.fa-arrows-alt::before,
.fa.fa-expand::before { --sab-i: var(--sab-i-expand); }
.fa.fa-store::before { --sab-i: var(--sab-i-store); }
.fa.fa-box::before,
.fa.fa-cube::before { --sab-i: var(--sab-i-box); }
.fa.fa-th::before,
.fa.fa-th-large::before { --sab-i: var(--sab-i-grid); }
.fa.fa-paper-plane::before,
.fa.fa-paper-plane-o::before { --sab-i: var(--sab-i-send); }
.fa.fa-comment::before,
.fa.fa-comment-o::before,
.fa.fa-comments::before,
.fa.fa-comment-dots::before { --sab-i: var(--sab-i-message); }
.fa.fa-cog::before,
.fa.fa-gear::before { --sab-i: var(--sab-i-gear); }
.fa.fa-sign-in::before { --sab-i: var(--sab-i-login); }
.fa.fa-sign-out::before { --sab-i: var(--sab-i-logout); }
.fa.fa-balance-scale::before { --sab-i: var(--sab-i-compare); }
.fa.fa-phone::before { --sab-i: var(--sab-i-phone); }
.fa.fa-facebook::before,
.fa.fa-facebook-f::before,
.fa.fa-facebook-official::before,
.fa.fa-facebook-square::before { --sab-i: var(--sab-i-facebook); }
.fa.fa-instagram::before { --sab-i: var(--sab-i-instagram); }
.fa.fa-twitter::before,
.fa.fa-twitter-square::before { --sab-i: var(--sab-i-x); }
.fa.fa-youtube::before,
.fa.fa-youtube-play::before,
.fa.fa-youtube-square::before { --sab-i: var(--sab-i-youtube); }
.fa.fa-pinterest::before,
.fa.fa-pinterest-p::before,
.fa.fa-pinterest-square::before { --sab-i: var(--sab-i-pinterest); }
.pager li.previous-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-prev::before,
.ocarousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::before,
.pager li.next-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-next::before,
.ocarousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-next::before,
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before,
.block.block-account-navigation .listbox > ul > li > a.active::before,
.block-manufacturer-navigation.box-shadow-wrapper .listbox > ul > li.active > a::before,
.box-shadow-wrapper .listbox > ul > li.active.last > a::before,
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before { --sab-i: var(--sab-i-chevron-right); }
.footer .footer-middle .column.m-acc > .title::after { --sab-i: var(--sab-i-chevron-down); }
.forum-search-box .btn.search-box-button::before,
.no-result::before { --sab-i: var(--sab-i-search); }
.header-top-right ul li .ico-account::before,
#mobile-menu .mobile-menu-account .ico-account::before { --sab-i: var(--sab-i-user); }
.header-top-right ul li .ico-wishlist::before,
#mobile-menu .mobile-menu-account .ico-wishlist::before,
.fa-icons .ocarousel .item-box .add-to-wishlist-button::before { --sab-i: var(--sab-i-heart); }
.fa-icons .ocarousel .item-box .add-to-compare-list-button::before { --sab-i: var(--sab-i-compare); }
.header-top-right ul li .ico-logout::before,
#mobile-menu .mobile-menu-account .ico-logout::before { --sab-i: var(--sab-i-logout); }
.header-top-right ul li .ico-login::before,
#mobile-menu .mobile-menu-account .ico-login::before { --sab-i: var(--sab-i-login); }
.header-top-right ul li .ico-register::before,
#mobile-menu .mobile-menu-account .ico-register::before { --sab-i: var(--sab-i-user-plus); }
#mobile-menu .mobile-menu-account .ico-inbox::before { --sab-i: var(--sab-i-mail); }
#mobile-menu .mobile-menu-account a.ico-admin::before { --sab-i: var(--sab-i-gear); }
#backTop::after { --sab-i: var(--sab-i-chevron-up); }
/* pseudo glyph hooks: a font glyph had no box of its own - give each one an icon-sized box, or an icon-sized
   mask inside the fixed box the theme already gives it */
.pager li.previous-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-prev::before,
.ocarousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::before,
.pager li.next-page a::before,
.ocarousel-grid .ocarousel .owl-nav button.owl-next::before,
.ocarousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-next::before,
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before,
.block.block-account-navigation .listbox > ul > li > a.active::before,
.block-manufacturer-navigation.box-shadow-wrapper .listbox > ul > li.active > a::before,
.box-shadow-wrapper .listbox > ul > li.active.last > a::before,
.box-shadow-wrapper .listbox ul li .sublist li a:hover::before,
.box-shadow-wrapper .listbox ul li .sublist li.active.last > a::before,
.footer .footer-middle .column.m-acc > .title::after,
.header-top-right ul li .ico-account::before,
#mobile-menu .mobile-menu-account .ico-account::before,
.header-top-right ul li .ico-wishlist::before,
#mobile-menu .mobile-menu-account .ico-wishlist::before,
.fa-icons .ocarousel .item-box .add-to-wishlist-button::before,
.fa-icons .ocarousel .item-box .add-to-compare-list-button::before,
.header-top-right ul li .ico-logout::before,
#mobile-menu .mobile-menu-account .ico-logout::before,
.header-top-right ul li .ico-login::before,
#mobile-menu .mobile-menu-account .ico-login::before,
.header-top-right ul li .ico-register::before,
#mobile-menu .mobile-menu-account .ico-register::before,
#mobile-menu .mobile-menu-account .ico-inbox::before,
#mobile-menu .mobile-menu-account a.ico-admin::before {
    display: inline-block;
    width: 1.1em !important;
    height: 1.1em !important;
    line-height: 1 !important;
    vertical-align: -.15em;
}
.forum-search-box .btn.search-box-button::before {
    -webkit-mask-size: 20px;
    mask-size: 20px;
}
.no-result::before {
    width: 34px;
    height: 34px;
    margin-inline: auto;
}
#backTop::after {
    width: 100%;
    height: 100%;
    -webkit-mask-size: 18px;
    mask-size: 18px;
}

/* (13) floating buttons on the right edge share one centre line on desktop: the accessibility button (46px at
   right 20px) and #backTop (55px incl. padding, theme default right 40px) were 24px apart (user report). */
@media (min-width: 768px) {
    #backTop { right: 16px !important; }
}

/* (14) company pages = saboraclothing.com (About us, Contact us, Customer service, Terms; measured at 1440, 2026-10-01).
   Topic HTML: operations/deploy/unpublished/sab001/topics/. Live's own body font falls back to Times - we keep Lato. */
.topic-page .page-body { font-size: 13px; line-height: 21px; }
@media (min-width: 992px) {
    .topic-page.has-help-nav .help-nav-content > .page-body { padding: 40px 70px; }   /* live: text inset 70px in the 978px box */
    .topic-page.has-help-nav .help-nav-content > .page-body:has(.sab-topic-center) { padding: 24px 18px; }   /* About: lines nearly box-wide */
}
.topic-page .page-body h2,
.topic-page .page-body h3 {
    font-family: var(--font-default) !important;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sab-ink);
}
.topic-page .page-body h2 { font-size: 18px; line-height: 1.3; margin: 26px 0 12px; }
.topic-page .page-body h3 { font-size: 13px; line-height: 21px; margin: 24px 0 0; }   /* Customer service: Return / Shipping / Cancellation Policy */
.topic-page .page-body h2:first-child,
.topic-page .page-body h3:first-child { margin-top: 0; }
/* About us: centred 16px lines, a blank line between them */
.topic-page .page-body .sab-topic-center { text-align: center; font-size: 16px; line-height: 19px; }
.topic-page .page-body .sab-topic-center p { margin: 0 0 38px; }
.topic-page .page-body .sab-topic-center p:last-child { margin-bottom: 0; }
/* Terms: the bold caps notice 18px, the agreement line 15px, then 13px; lists flush left with text markers "1." / "a)" */
.topic-page .page-body .sab-terms-lead { font-size: 18px; line-height: 23px; margin-bottom: 12px; }
.topic-page .page-body .sab-terms-intro { font-size: 15px; line-height: 23px; }
.topic-page .page-body ol { list-style: none; padding-left: 0; counter-reset: sab-ol; }
.topic-page .page-body ol > li { counter-increment: sab-ol; }
.topic-page .page-body ol > li::before { content: counter(sab-ol) ". "; }
.topic-page .page-body ol[type="a"] > li::before { content: counter(sab-ol, lower-alpha) ") "; }
/* live leaves a blank line pair between Terms paragraphs (text gap 50px; measured block by block) */
.topic-page .page-body .sab-terms-lead ~ p,
.topic-page .page-body .sab-terms-lead ~ ol { margin-bottom: 45px; }
/* Contact us: info centred, 13px lines under 16px bold headings; SUBMIT Lato 18 bold (rose kept) */
/* .contact-page prefix: ContactUs.cshtml's inline <style> (later in the cascade) sets the p left !important */
.contact-page .contact-page__info .topic-html-content-body,
.contact-page .contact-page__info .topic-html-content-body p {
    font: 400 13px/20px var(--font-default) !important;
    text-align: center !important;
    color: var(--sab-ink) !important;
}
.contact-page .contact-page__info .topic-html-content-body p { margin: 0 0 14px !important; }
.contact-page .contact-page__info .topic-html-content-body a[href^="tel:"] { color: var(--sab-ink) !important; text-decoration: none; }   /* live: plain text */
.contact-page .contact-page__info .topic-html-content-body strong { font: 700 16px/24px var(--font-default) !important; letter-spacing: normal !important; }
.contact-page .contact-form__submit .contact-us-button { font: 700 18px/1 var(--font-default) !important; letter-spacing: .02em !important; }

/* (15) search UX (sab001-ui-round2 P4, 2026-10-02)
   desktop: the underline field turns rose 2px on focus, a clear button appears while there is text;
   phones: the top sheet gets a 44px rounded field with a rose focus ring and a "Cancel" text button;
   autocomplete rows 48px with 40px thumbnails and a "see all results" row; guests see a sign-in hint;
   results page: "Results for "q"" + count, and category links when nothing was found. */
.search-box .search-nav::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-box .search-clear {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #5c5456; font-size: 20px; line-height: 1; cursor: pointer;
}
.search-box .search-clear[hidden] { display: none; }
.search-box .search-clear:hover, .search-box .search-clear:focus-visible { background: rgba(35, 31, 32, .08); color: var(--sab-ink); }
.search-guest-hint { margin: 6px 0 0; font: 400 12px/1.4 var(--font-default); color: #5c5456; }
.search-guest-hint a { color: var(--sab-rose); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
    .header .header-lower .header-search-col .search-box .form-group { border-bottom-width: 1px; transition: border-color .15s ease, box-shadow .15s ease; }
    .header .header-lower .header-search-col .search-box .search-nav:focus,
    .header .header-lower .header-search-col .search-box .search-nav:focus-visible { outline: none !important; box-shadow: none !important; }
    .header .header-lower .header-search-col .search-box .form-group:focus-within {
        border-bottom-color: var(--sab-rose) !important;
        box-shadow: 0 1px 0 0 var(--sab-rose);   /* 2px total without moving the text */
    }
    .header .header-lower .header-search-col .search-box .search-nav { height: 40px; padding-right: 64px; }
    .header .header-lower .header-search-col .search-box .search-clear { right: 34px; }
    .header .header-lower .header-search-col .search-box .btn.search-box-button { top: 3px; }
    /* under the 40px field: .search-box has no height of its own (floated children), so top:100% sat ON the field and
       the hint overlapped the placeholder (sab001-shop Act-1) */
    .header .header-lower .header-search-col .search-guest-hint { position: absolute; top: 44px; left: 0; margin: 0; white-space: nowrap; }
    .header .header-lower .header-search-col .search-box .ui-autocomplete { border: 1px solid var(--sab-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
}
@media (max-width: 767.98px) {
    html.m-search-open .header .header-lower .header-search-col .search-box .search-nav {
        height: 44px; border-radius: 22px; padding: 0 76px 0 16px;
        background: #f4f4f4 !important; border: 1px solid transparent !important;
        font-size: 16px;   /* >= 16px: iOS does not zoom the page on focus */
    }
    /* ONE quiet focus state: the theme's 2px rose outline + Bootstrap's glow + a ring stacked into the heavy wine double
       border the user flagged (2026-10-01 screenshot) */
    html.m-search-open .header .header-lower .header-search-col .search-box .search-nav:focus,
    html.m-search-open .header .header-lower .header-search-col .search-box .search-nav:focus-visible {
        background: #fff !important; border-color: var(--sab-rose) !important;
        box-shadow: none !important; outline: none !important;
    }
    html.m-search-open .header .header-lower .header-search-col .search-box .form-group { border: 0 !important; box-shadow: none !important; }
    /* Cancel on the RIGHT of the field (iOS / app convention) */
    html.m-search-open .header .header-lower .header-search-col .search-box { order: 1; }
    html.m-search-open .header .header-lower .header-search-col .search-box .search-clear { right: 44px; }
    html.m-search-open .header .header-lower .header-search-col .search-box .search-box-button { min-height: 44px; }
    html.m-search-open .m-search-close {
        order: 2;
        flex: 0 0 auto; width: auto; padding: 0 4px 0 8px;
        font: 600 15px var(--font-default); letter-spacing: .01em; color: var(--sab-ink);
    }
    html.m-search-open .search-box .ui-autocomplete li,
    html.m-search-open .search-box .ui-autocomplete .ui-menu-item { min-height: 48px; }
    html.m-search-open .search-box .ui-autocomplete img { width: 40px !important; height: 40px; object-fit: cover; border-radius: 6px; }
    html.m-search-open .search-guest-hint { padding: 0 16px; }
}
.search-box .ui-autocomplete .search-all-results a { font-weight: 600; color: var(--sab-rose) !important; }
.html-search-page .page-title .search-summary { margin: 4px 0 0; font: 400 14px var(--font-default); color: #5c5456; text-align: inherit; }
.html-search-page .search-empty-suggest { margin: 8px 0 24px; font: 400 14px var(--font-default); }
.html-search-page .search-empty-suggest ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.html-search-page .search-empty-suggest a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--sab-ink); color: var(--sab-ink); text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}
.html-search-page .search-empty-suggest a:hover { background: var(--sab-ink); color: #fff; }

/* (16) phones: the tab bar follows the header (sab001-ui-round2 P5) - scrolling DOWN slides both away, any scroll UP
   brings both back. State = body.m-hdr-hidden from mobile-header-v3.js (never set at the top, with the drawer open,
   while focus is in the header incl. the search sheet, or with reduced motion). Same .2s as the header. */
@media (max-width: 767.98px) {
    .mobile-bottom-nav { transition: transform .2s ease; }
    body.m-hdr-hidden .mobile-bottom-nav { transform: translateY(100%); }
}

/* (17) one size system for icons, form fields and buttons (sab001-shop Act-1, 2026-10-02; user: "inconsistency
   icon/font size", "login input text too small"). Measured before (docs/03-analysis/sab001-shop.analysis.md R-1..R-5):
   chrome icons 22 / 20.7 / 17.6 / 16.5 / 14.9 / 12.6 px + a 16px font glyph on the hero arrows; desktop inputs
   14 / 15 / 16 px; labels 13/400, 13/400 cap, 14/600, 14/700; buttons Montserrat 12/500, Lato 15/700, Lato 18/700,
   Lato 13/700; header links Montserrat 12 next to a Lato 14 menu; side-nav and section titles in two families.
   Now: three icon sizes, one field size, one label style, one button style, Lato for every UI role.
   This section is last on purpose - it wins over sections (5), (7), (12), (14) and the base theme. */
:root {
    --sab-icon-lg: 24px;     /* chrome: header row + phone tab bar (22 -> 24 for readability, section (22c)) */
    --sab-icon-md: 20px;     /* UI: drawer account links, footer accordion, floating back-to-top, slider arrows */
    --sab-icon-sm: 16px;     /* inline markers inside text: side-nav arrows, "Back to top", "Messages" */
    --sab-fs-input: 16px;    /* every field, every viewport (16 also stops iOS zooming on focus) */
    --sab-fs-label: 14px;
    --sab-fs-button: 14px;
    /* tab bar = chrome: same 1.5 stroke as the header set (section (5)); home / sort only exist at 1.8 */
    --sab-ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M6 9.5V20h12V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");
    --sab-ico-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h7M4 12h5M4 18h3M17 5v14M14 16l3 3 3-3'/%3E%3C/svg%3E");
}

/* (17a) icons */
.mobile-bottom-nav i.fa::before {
    width: var(--sab-icon-lg) !important;
    height: var(--sab-icon-lg) !important;
    vertical-align: middle;
}
.mobile-bottom-nav i.fa-home::before { --sab-i: var(--sab-ico-home); }
.mobile-bottom-nav i.fa-sort-amount-asc::before { --sab-i: var(--sab-ico-sort); }
.mobile-bottom-nav i.fa-search::before { --sab-i: var(--sab-ico-search); }
.mobile-bottom-nav i.fa-shopping-cart::before { --sab-i: var(--sab-ico-bag); }
.mobile-bottom-nav i.fa-user::before,
.mobile-bottom-nav i.fa-user-o::before { --sab-i: var(--sab-ico-user); }
#mobile-menu .mobile-menu-account li a[class^="ico-"]::before,
.header-links li a[class^="ico-"]::before,
.footer .footer-middle .column.m-acc > .title::after {
    width: var(--sab-icon-md) !important;
    height: var(--sab-icon-md) !important;
    vertical-align: middle;
}
#backTop::after {
    -webkit-mask-size: var(--sab-icon-md);
    mask-size: var(--sab-icon-md);
}
.footer-back-to-top .fa::before,
.block.block-account-navigation .listbox a .fa::before,
.block.block-account-navigation .listbox > ul > li > a.active::before,
.box-shadow-wrapper .listbox ul li a::before {
    width: var(--sab-icon-sm) !important;
    height: var(--sab-icon-sm) !important;
    vertical-align: -.2em;
}
/* product page Add to cart: the theme paints a cart PNG as the button background; every other cart in the shop is the
   line-set bag (section (12)) -> same bag, md size, in the button's text colour */
.product-add-button .add-to-cart-button {
    position: relative;
    background-image: none !important;
}
.product-add-button .add-to-cart-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: var(--sab-icon-md);
    height: var(--sab-icon-md);
    margin-top: calc(var(--sab-icon-md) / -2);
    background-color: currentColor;
    -webkit-mask: var(--sab-i-bag) center / contain no-repeat;
    mask: var(--sab-i-bag) center / contain no-repeat;
}
@media (min-width: 768px) {
    .product-add-button .add-to-cart-button { padding-left: calc(16px + var(--sab-icon-md) + 10px) !important; padding-right: 22px !important; }
}
/* hero / banner slider arrows: Swiper's own icon font (a 16px bold glyph) -> the chevrons of the line set */
.master-wrapper-content > .swiper > .swiper-button-prev::after,
.master-wrapper-content > .swiper > .swiper-button-next::after {
    content: "" !important;
    width: var(--sab-icon-md);
    height: var(--sab-icon-md);
    font-size: 0 !important;
    background-color: currentColor;
    -webkit-mask: var(--sab-i) center / contain no-repeat;
    mask: var(--sab-i) center / contain no-repeat;
}
.master-wrapper-content > .swiper > .swiper-button-prev::after { --sab-i: var(--sab-i-chevron-left); }
.master-wrapper-content > .swiper > .swiper-button-next::after { --sab-i: var(--sab-i-chevron-right); }

/* (17b) form fields: 16px everywhere (was 14 in forms / 15 newsletter on desktop) */
.master-wrapper-page .form-control,
.master-wrapper-page input[type="text"],
.master-wrapper-page input[type="email"],
.master-wrapper-page input[type="password"],
.master-wrapper-page input[type="tel"],
.master-wrapper-page input[type="number"],
.master-wrapper-page input[type="search"],
.master-wrapper-page select,
.master-wrapper-page textarea,
.header .search-box input.search-nav,
.footer .newsletter-subscribe-text,
.npc-lp-root .npc-lp-input {
    font-family: var(--font-default) !important;
    font-size: var(--sab-fs-input) !important;
}
/* size-matrix pack quantity cells (PDP): the matrix plugin's in-body <style> pins 12-13px !important at (0,3,0);
   and the matrix css pins `#matrix-table > tbody > tr:nth-child(n) > td.pack-cell > input` 1.3rem !important (1,2,4);
   mobile-foundation-v2's (0,3,1) fix measured 13px on the served page -> out-rank all of them */
html body .matrix-container[data-is-pack-sale] .pack-input,
html body .matrix-container[data-is-pack-sale] .pack-input-individual,
html body .matrix-container .pack-input.pack-input,
html body .matrix-container .pack-input-individual.pack-input-individual,
html body #pack-count-input,
html body #matrix-table tbody tr:nth-child(n) td.pack-cell > input { font-size: var(--sab-fs-input) !important; }
.master-wrapper-page .form-control::placeholder,
.master-wrapper-page input::placeholder,
.master-wrapper-page textarea::placeholder { font-size: var(--sab-fs-input); }

/* (17c) field labels: one style (was login 13/400, contact 13/400 capitalised, register 14/600, account 14/700) */
.master-column-wrapper .page form label:not(.sr-only),
.master-column-wrapper .page form .control-label,
.product-selectors label,
.login-page .returning-wrapper label,
.login-page .returning-wrapper .forgot-password a {
    font-family: var(--font-default) !important;
    font-size: var(--sab-fs-label) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--sab-ink);
}
/* checkbox captions and links next to fields read as text, not as field names */
.master-column-wrapper .page form .remember-text,
.master-column-wrapper .page form input[type="checkbox"] + label,
.master-column-wrapper .page form label.news-letter,
.master-column-wrapper .page form .newsletter-label,
.login-page .returning-wrapper .forgot-password a { font-size: var(--sab-fs-label) !important; font-weight: 400 !important; }
.b2b-registration-wizard label,
.registration-page .checkbox label { font-size: var(--sab-fs-label) !important; }
/* table header captions (size matrix "COLOR" select-all) are not field labels: keep the header style */
html body #matrix-table thead label,
html body .matrix-table thead label {
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* (17d) buttons: one style for primary and secondary (was Montserrat 12/500 .14em, Lato 15/700, Lato 18/700 contact,
   Lato 13/700 order search, Montserrat 12/600 2.4px Subscribe) */
.btn.btn-primary,
.btn.btn-default,
.button-1,
.button-2,
.login-page .returning-wrapper .login-button,
.login-page .new-wrapper .register-button,
.contact-page .contact-form__submit .contact-us-button,
.footer .newsletter-subscribe-button,
.flyout-cart-wrapper .flyout-cart-footer-buttons .btn,
.oh-btn,
.m-pdp-cta .m-pdp-add,
.npc-lp-root .npc-lp-submit,
.footer #newsletter-subscribe-block #newsletter-subscribe-button {
    font-family: var(--font-default) !important;
    font-size: var(--sab-fs-button) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* (17e) headings and header links in the UI family */
@media (min-width: 768px) {
    /* SIGN IN / REGISTER / MY ACCOUNT beside the Lato 14 menu: same family and tracking, one step smaller */
    .header .header-lower .header-top-right ul li a,
    .header .header-lower .header-top-right ul li a span {
        font-family: var(--font-default) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        letter-spacing: 1px !important;
    }
}
/* newsletter heading = the other footer headings (was Montserrat 18 / 14 2px, wigstheme pins Montserrat !important) */
.footer .footer-upper .newsletter-email strong {
    font-family: var(--font-default) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}
/* account side-nav title = info-page side-nav title (section (7): Lato 14/700) */
.html-account-page .block-account-navigation .title strong {
    font-family: var(--font-default) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
/* form section titles (Your Personal Details, Company Details, Account Information ...) */
.master-column-wrapper .page form h3,
.master-column-wrapper .page form legend,
.b2b-registration-wizard .fieldset-header h3 {
    font-family: var(--font-default) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* (17f) product grid caption = design §8.4 5.2 (ink name, rose price). The shared theme pins the price #2c3e50 16px
   !important (simplex.styles.css `.caption .details .prices-inline .price.actual-price`) and product-box-caption-minimal
   pins the name #333 / #999 - neither colour is in the Sabora palette. Name and price share one size per viewport
   (phones had a 16px price next to a 15px name). Fabric line #999 on white was 2.8:1 -> #5c5456 (7:1). */
html body .product-grid .item-box .product-item .caption .details .product-title-inline a,
html body .product-grid .item-box .product-title a {
    color: var(--sab-ink) !important;
    font-family: var(--font-default) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
html body .product-grid .item-box .caption .details .prices-inline .price.actual-price,
html body .product-grid .item-box .prices .actual-price {
    color: var(--sab-rose) !important;
    font-family: var(--font-default) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
html body .product-grid .item-box .caption .details .prices-inline .old-price,
html body .product-grid .item-box .prices .old-price { color: #5c5456 !important; font-size: 13px !important; }
html body .product-grid .item-box .product-item .caption .details .description { color: #5c5456 !important; }
@media (max-width: 767.98px) {
    html body .product-grid .item-box .product-item .caption .details .product-title-inline a,
    html body .product-grid .item-box .product-title a,
    html body .product-grid .item-box .caption .details .prices-inline .price.actual-price,
    html body .product-grid .item-box .prices .actual-price { font-size: 15px !important; }
    html body .product-grid .item-box .product-item .caption .details .description { font-size: 12px !important; }   /* was 11 */
}

/* (17g) the rest of the icon system
   - desktop dropdown items: section (2) removed the chevron (`content: none`), section (12)'s hook list brought it back
     with `content: "" !important` - keep it off (only matters if sub-categories return; the menu is 1-depth now)
   - floating back-to-top = the accessibility button's 46px box on one centre line (was 35 + 2x10 padding = 55px)
   - search clear: the typed "x" (20px glyph) -> the line-set close icon at the inline size
   - drawer icons / chevrons: one opacity (were .9 / .8 / .85) */
.header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown .dropdown-menu li a::before { content: none !important; }
#backTop {
    box-sizing: border-box !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
}
@media (min-width: 768px) {
    #backTop { right: 20px !important; }
}
.search-box .search-clear { font-size: 0 !important; color: #5c5456; }
.search-box .search-clear::before {
    content: "";
    width: var(--sab-icon-sm);
    height: var(--sab-icon-sm);
    background-color: currentColor;
    -webkit-mask: var(--sab-i-close) center / contain no-repeat;
    mask: var(--sab-i-close) center / contain no-repeat;
}
@media (max-width: 767.98px) {
    #mobile-menu .mobile-menu-account li a[class^="ico-"]::before,
    .header-menu .navbar-collapse.in li.dropdown > .fa-angle-down { opacity: 1 !important; }
}

/* (18) /login (2026-10-02, user: "login page UI/UX/layout"). Before: the new-customer box was mostly empty while the
   wholesale rules sat detached under the page, headings carried a long trailing rule that wrapped on phones, labels
   ended in colons, the password eye was a bitmap and the focused field had a heavy double rose ring.
   Now: one 960px column of two equal cards - sign in (white, primary) and new customer (blush) holding the wholesale
   note (moved into the card in Login.cshtml) and the Register action; short accent bar under each heading; 48px fields
   with an ink focus ring; remember / forgot on one row; line-set eye button (keyboard reachable). Phones: stacked. */
.login-page .customer-blocks { max-width: 960px; margin: 0 auto; }
.login-page .customer-blocks > .row:first-child { margin: 0; gap: 24px; align-items: stretch; }
.login-page .customer-blocks > .row:first-child > div { float: none; flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
.login-page .returning-wrapper,
.login-page .new-wrapper {
    height: 100%;
    margin: 0 !important;
    padding: 40px !important;
    border-radius: 0;
}
.login-page .returning-wrapper { background: #fff !important; border: 1px solid #e3d8d6 !important; }
.login-page .new-wrapper { background: var(--sab-blush) !important; border: 1px solid var(--sab-blush) !important; }
.login-page .returning-wrapper fieldset legend,
.login-page .new-wrapper.register-block fieldset legend {
    display: block !important;
    width: 100%;
    margin: 0 0 28px !important;
    font-family: var(--font-default) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    color: var(--sab-ink);
}
.login-page .returning-wrapper fieldset legend::after,
.login-page .new-wrapper.register-block fieldset legend::after {
    display: block;
    width: 32px;
    max-width: none;
    margin: 12px 0 0;
    border-top: 2px solid var(--sab-rose);
}
.login-page .returning-wrapper .form-group { margin: 0 0 18px; }
.login-page .returning-wrapper .form-group .control-label { display: block; float: none; width: auto; margin: 0 0 6px; padding: 0; text-align: left; }
.login-page .returning-wrapper .form-group > div[class*="col-"] { float: none; width: auto; padding: 0; }
.login-page .returning-wrapper .form-control {
    height: 48px !important;
    padding: 0 14px;
    border: 1px solid #cfc3c1 !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-page .returning-wrapper .form-control:focus {
    border-color: var(--sab-ink) !important;
    box-shadow: 0 0 0 1px var(--sab-ink) !important;
    outline: none;
}
.login-page .returning-wrapper .login-password { position: relative; }
.login-page .returning-wrapper .login-password .form-control { padding-right: 52px; }
.login-page .password-eye {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none !important;
    opacity: 1;
    color: #5c5456;
    cursor: pointer;
}
.login-page .password-eye::before {
    content: "";
    position: absolute;
    inset: 12px;
    background-color: currentColor;
    -webkit-mask: var(--sab-i-eye-off) center / contain no-repeat;
    mask: var(--sab-i-eye-off) center / contain no-repeat;
}
.login-page .password-eye.password-eye-open::before {
    -webkit-mask-image: var(--sab-i-eye);
    mask-image: var(--sab-i-eye);
}
.login-page .password-eye:hover,
.login-page .password-eye:focus-visible { color: var(--sab-ink); }
.login-page .password-eye:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: -4px; }
.login-page .returning-wrapper .remember-me .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-height: 44px;
}
.login-page .returning-wrapper .remember-me input[type="checkbox"] {
    position: static;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sab-ink);
}
.login-page .returning-wrapper .remember-me .remember-text { margin: 0; padding: 0; cursor: pointer; }
.login-page .returning-wrapper .forgot-password { margin-left: auto; float: none; }
.login-page .returning-wrapper .forgot-password a { text-decoration: underline; text-underline-offset: 3px; }
.login-page .returning-wrapper .login-button { margin-top: 6px; }
/* new customer card: short copy, the wholesale note as a callout, Register at the bottom */
.login-page .new-wrapper.register-block fieldset,
.login-page .new-wrapper.register-block .text { display: flex; flex-direction: column; height: 100%; }
.login-page .new-wrapper .login-newcustomer-text { margin: 0 0 20px; font: 400 15px/1.6 var(--font-default); color: #5c5456; }
.login-page .login-wholesale-note { margin: 0 0 28px; }
.login-page .login-wholesale-note .topic-block { margin: 0; }
.login-page .login-wholesale-note .topic-block-body,
.login-page .login-wholesale-note .topic-html-content {
    margin: 0 !important;
    padding: 16px 18px;
    background: #fff;
    border-left: 3px solid var(--sab-rose);
    font: 400 14px/1.6 var(--font-default);
    text-align: left !important;
    color: var(--sab-ink);
}
.login-page .login-wholesale-note p { margin: 0; }
.login-page .login-wholesale-note * { text-align: left !important; }   /* the topic body is centred inline */
.login-page .new-wrapper .form-group { margin: auto 0 0; }
.login-page .new-wrapper .form-group > .control-label:empty { display: none; }
.login-page .new-wrapper .form-group .controls { margin: 0; }
@media (max-width: 767.98px) {
    .login-page .customer-blocks > .row:first-child { flex-direction: column; gap: 16px; }
    /* a 0 basis in a column collapses the cards (they overlapped the footer) - size them by their content */
    .login-page .customer-blocks > .row:first-child > div { flex: 0 0 auto; width: 100%; }
    .login-page .returning-wrapper,
    .login-page .new-wrapper { height: auto; padding: 28px 20px !important; }
    .login-page .returning-wrapper fieldset legend,
    .login-page .new-wrapper.register-block fieldset legend { margin-bottom: 22px !important; font-size: 20px !important; }
    .login-page .new-wrapper .form-group { margin-top: 0; }
}

/* (19) /register = the /login card style (2026-10-02, user: "register page in the same style"). Before: ~800px of
   blank space under every step (b2b-registration.css min-height 1500 / 1100px), labels in a left column with short
   28px fields and trailing colons, two rules around each step header, faint #ccc inactive steps, a green "completed"
   step, and the newsletter checkbox floating alone in a grey box under the wizard.
   Now: one 720px white card under the step bar; Lato 22/700 step heading + rose accent bar; labels on top (14/600,
   required mark beside the label), 48px fields with the ink focus ring; Back (outline) / Continue (primary) on one
   row (stacked on phones); newsletter inside step 3 before Register (Register.cshtml, SAB001 only); "Already have an
   account? Sign in" under the card. */
.registration-page .b2b-registration-wizard { max-width: 720px; margin: 0 auto; }
.registration-page .page-title .subtitle { display: none !important; }   /* "Create your business account in three easy steps" (user, 2026-10-02) */
/* step bar */
.registration-page .b2b-registration-wizard .nav-tabs { margin: 0 0 24px; border-bottom: 1px solid #e3d8d6; background: none; }
.registration-page .b2b-registration-wizard .nav-tabs > li > a {
    font: 700 13px/1 var(--font-default) !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #776e70 !important;            /* was #ccc (1.6:1) -> 4.9:1 */
}
.registration-page .b2b-registration-wizard .nav-tabs > li.disabled > a { color: #776e70 !important; }
.registration-page .b2b-registration-wizard .nav-tabs > li.active > a { color: var(--sab-rose) !important; border-bottom-color: var(--sab-rose); }
.registration-page .b2b-registration-wizard .tab-title { font: inherit !important; letter-spacing: inherit; color: inherit !important; }
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number {
    width: 28px;
    height: 28px;
    background: #e9e2e1;
    color: var(--sab-ink);
    font: 700 13px/1 var(--font-default);
    box-shadow: none;
    transform: none;
}
.registration-page .b2b-registration-wizard .nav-tabs > li.active .tab-number,
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.current { background: var(--sab-rose); color: #fff; }
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.completed { background: var(--sab-ink); color: #fff; }   /* was green #28a745 */
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number { position: relative; z-index: 1; }   /* phones: the connector line ran through the number */
/* the card: no fixed heights (they left ~800px of blank page under each step) */
.registration-page .b2b-registration-wizard .tab-content {
    min-height: 0 !important;
    padding: 40px;
    background: #fff;
    border: 1px solid #e3d8d6;
}
.registration-page .b2b-registration-wizard .tab-content > .tab-pane { min-height: 0 !important; padding: 0 !important; }
/* the steps were absolutely positioned panes (slide animation) - that is what needed the fixed heights and why a pane
   ignored the card padding. Normal flow at every width, only the active step shown (= the phone rule in
   b2b-registration.css) */
.registration-page .b2b-registration-wizard .tab-pane {
    position: static !important;
    transform: none !important;
    transition: none !important;
}
.registration-page .b2b-registration-wizard .tab-pane:not(.active) { display: none !important; }
.registration-page .b2b-registration-wizard .tab-pane.active { display: block !important; opacity: 1 !important; visibility: visible !important; }
.registration-page .b2b-registration-wizard #company-tab { padding-bottom: 0 !important; }
/* step 3: the address partial and the newsletter were grey boxes inside the card - flatten them */
.registration-page .b2b-registration-wizard .address-section,
.registration-page .b2b-registration-wizard .newsletter-section {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.registration-page .b2b-registration-wizard .address-section h4,
.registration-page .b2b-registration-wizard .address-section .title {
    margin: 8px 0 18px;
    font: 700 16px/1.3 var(--font-default) !important;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sab-ink);
}
.registration-page .b2b-registration-wizard .checkbox { margin: 0; padding: 0; }
.registration-page .b2b-registration-wizard .checkbox label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; font: 400 14px/1.4 var(--font-default) !important; }
.registration-page .b2b-registration-wizard input[type="checkbox"] { position: static; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--sab-ink); }
/* empty validation slots (the seller-permit one kept ~60px of blank space) take no room until there is a message */
.registration-page .b2b-registration-wizard .field-validation-valid { display: none !important; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"]:not(:has(> :not(.field-validation-valid))) { display: none; }
.registration-page .b2b-registration-wizard #seller-permit-file { margin: 0 !important; padding: 8px 10px !important; }
.registration-page .b2b-registration-wizard input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 0 16px;
    height: 32px;
    border: 1px solid var(--sab-ink);
    border-radius: 0;
    background: #fff;
    color: var(--sab-ink);
    font: 700 12px/1 var(--font-default);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
/* finished step: the check replaces the number (they overlapped) */
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.completed { color: transparent !important; }
.registration-page .b2b-registration-wizard .nav-tabs > li .tab-number.completed::after {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    font-size: 0 !important;
    background-color: #fff;
    -webkit-mask: var(--sab-i-check) center / contain no-repeat;
    mask: var(--sab-i-check) center / contain no-repeat;
}
.registration-page .b2b-registration-wizard .fieldset { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.registration-page .b2b-registration-wizard .fieldset-header { margin: 0 0 28px; padding: 0; border: 0 !important; }
.registration-page .b2b-registration-wizard .fieldset-header::before,
.registration-page .b2b-registration-wizard .fieldset-header::after { content: none !important; }
.registration-page .b2b-registration-wizard .fieldset-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--font-default) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--sab-ink) !important;
}
.registration-page .b2b-registration-wizard .fieldset-header h3::after {
    content: "";
    display: block;
    width: 32px;
    margin: 12px 0 0;
    border-top: 2px solid var(--sab-rose);
}
.registration-page .b2b-registration-wizard .fieldset-header .help-text {
    margin: 16px 0 0;
    padding: 0;
    border: 0 !important;
    font: 400 15px/1.6 var(--font-default);
    color: #5c5456;
}
/* fields: label on top, required mark beside it, field full width, validation under it */
.registration-page .b2b-registration-wizard .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    margin: 0 0 18px;
}
.registration-page .b2b-registration-wizard .form-group::before,
.registration-page .b2b-registration-wizard .form-group::after { content: none; }
.registration-page .b2b-registration-wizard .form-group > .control-label {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
}
.registration-page .b2b-registration-wizard .form-group > .form-title-required.visible-xs { order: 1; display: inline-block !important; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] .form-title-required { display: none !important; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"]:empty { display: none; }
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] + div[class*="col-"] { order: 3; }
.registration-page .b2b-registration-wizard .form-group.email-availability { margin: -12px 0 12px; }
.registration-page .b2b-registration-wizard .form-control {
    height: 48px !important;
    padding: 0 14px;
    border: 1px solid #cfc3c1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.registration-page .b2b-registration-wizard textarea.form-control { height: auto !important; min-height: 96px; padding: 12px 14px; }
.registration-page .b2b-registration-wizard input[type="file"].form-control { height: auto !important; padding: 10px 14px; }
.registration-page .b2b-registration-wizard .form-control:focus {
    border-color: var(--sab-ink) !important;
    box-shadow: 0 0 0 1px var(--sab-ink) !important;
    outline: none;
}
.registration-page .b2b-registration-wizard .help-block { margin: 6px 0 0; font: 400 13px/1.5 var(--font-default); color: #5c5456; }
/* messages under their field (b2b-registration.css floated them absolutely to the right with a pink band that ran
   past the card and over the next label) */
.registration-page .b2b-registration-wizard .form-group > div[class*="col-"] { position: static !important; left: auto !important; }
.registration-page .b2b-registration-wizard .field-validation-error,
.registration-page .b2b-registration-wizard .field-validation-error span {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    font: 400 13px/1.4 var(--font-default) !important;
    color: #b42318 !important;
}
.registration-page .b2b-registration-wizard .input-validation-error { border-color: #b42318 !important; }
/* newsletter (moved into step 3) */
.registration-page .b2b-registration-wizard .newsletter-section { margin: 8px 0 4px; }
.registration-page .register-newsletter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    font: 400 14px/1.4 var(--font-default) !important;
    color: var(--sab-ink);
    cursor: pointer;
}
.registration-page .register-newsletter input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--sab-ink); }
/* step buttons */
.registration-page .b2b-registration-wizard .wizard-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 12px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #efe1de;
}
.registration-page .b2b-registration-wizard .wizard-buttons .btn { min-width: 200px; min-height: 48px; margin: 0; }
.registration-page .b2b-registration-wizard .wizard-buttons .prev-tab { margin-right: auto; }
.registration-page .b2b-registration-wizard .wizard-buttons .btn-default {
    background: transparent !important;
    border: 1px solid var(--sab-ink) !important;
    color: var(--sab-ink) !important;
}
.registration-page .b2b-registration-wizard .wizard-buttons .btn-default:hover,
.registration-page .b2b-registration-wizard .wizard-buttons .btn-default:focus { background: var(--sab-ink) !important; color: #fff !important; }
.registration-page .register-signin-link { margin: 24px 0 0; text-align: center; font: 400 15px/1.6 var(--font-default); color: #5c5456; }
.registration-page .register-signin-link a { color: var(--sab-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.registration-page .captcha-section,
.registration-page .accept-privacy-policy { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 767.98px) {
    .registration-page .b2b-registration-wizard .tab-content { padding: 28px 20px; }
    .registration-page .b2b-registration-wizard .fieldset-header h3 { font-size: 20px !important; }
    .registration-page .b2b-registration-wizard .wizard-buttons { flex-direction: column-reverse; }
    .registration-page .b2b-registration-wizard .wizard-buttons .btn { width: 100%; min-width: 0; }
    .registration-page .b2b-registration-wizard .wizard-buttons .prev-tab { margin-right: 0; }
}

/* (20) shop tokens for the core components (product-card-nav-v1.css, plugin matrix.skin-v2.css) - 2026-10-02.
   The components hold structure + behaviour; Sabora only sets values here (global :root, never inside a media query).
   The card arrows left section (12)'s icon hook list: product-card-nav-v1.css now draws them from these tokens. */
:root {
    /* product-card picture slider */
    --card-nav-fg: var(--sab-ink);
    --card-nav-icon-size: var(--sab-icon-md);
    --card-nav-icon-prev: var(--sab-i-chevron-left);
    --card-nav-icon-next: var(--sab-i-chevron-right);
    --card-dot-color: rgba(35, 31, 32, .25);
    --card-dot-active: var(--sab-rose);
    /* size/colour matrix (PDP) */
    --mx-font: var(--font-default);
    --mx-fg: var(--sab-ink);
    --mx-muted: #5c5456;
    --mx-head-fg: #5c5456;
    --mx-border: #e3d8d6;
    --mx-row-stripe: #fbf5f4;
    --mx-row-selected: #fdf8f7;          /* paler than the blush chips and TOTAL row, so both still read */
    --mx-accent: var(--sab-rose);
    --mx-check-accent: var(--sab-rose);
    --mx-chip-bg: var(--sab-blush);
    --mx-chip-fg: var(--sab-ink);
    --mx-total-bg: var(--sab-blush);
    --mx-total-fg: var(--sab-ink);
    --mx-radius: 2px;
}

/* (21) footer logo + company info sizes (2026-10-02, user: "improve the footer logo and company info text size").
   Before: the logo drew ~12px-tall letterspaced glyphs (178px wide @1440 = the live site's 12.4vw) and the address
   lines were 14px grey - both read smaller than the 13-14px caps column links next to them. Now the logo is the
   largest thing in the footer and the info lines are body size, still in the muted-on-ink tone (10.7:1). */
@media (min-width: 768px) {
    .footer .footer-middle .footer-logo { margin: 0 0 18px; }
    .footer .footer-middle .footer-logo img { width: clamp(200px, 16vw, 260px); }
    .footer .footer-middle .footer-contact .topic-html-content,
    .footer .footer-middle .footer-contact .topic-html-content-body,
    .footer .footer-middle .footer-contact address,
    .footer .footer-middle .footer-contact p { font-size: 16px; line-height: 1.75; }
}
@media (max-width: 767.98px) {
    .footer .footer-middle .footer-logo { margin: 0 0 14px; }
    .footer .footer-middle .footer-logo img { max-height: 24px; }
    .footer .footer-middle .footer-contact .topic-html-content,
    .footer .footer-middle .footer-contact .topic-html-content-body,
    .footer .footer-middle .footer-contact address,
    .footer .footer-middle .footer-contact p { font-size: 16px; line-height: 1.7; }
}

/* (22) header-cart-col = icon buttons (2026-10-02, user: "SVG icons with a hover tooltip; header icons consistent in size
   and border"). Desktop only - the phone header was already [menu][search] logo [account][bag]. Every link (Messages,
   My account, Log out, Sign in, Register, cart) is one 40px round button holding the 22px line icon (--sab-icon-lg,
   same as search and the phone header); #sab-masthead (the SAB-only wrapper in _Root.cshtml) out-weighs the
   desktop text-link rules above (li.register a, (17e) type). The words stay in the DOM as the accessible name and come back as a tooltip
   (sab-header-icons-v1.js adds .sab-tip / the cart's .sab-count). Register loses its rose fill: one look for all. */
:root {
    /* header chrome set (stroke 1.5, like --sab-ico-search/-bag/-user): the four header links that had none */
    --sab-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
    --sab-ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5v16h4M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
    --sab-ico-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l4 4-4 4M14 12H4'/%3E%3C/svg%3E");
    --sab-ico-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20.5c.8-4 3.6-6 7-6s6.2 2 7 6M19 6.5v6M16 9.5h6'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
    .header .header-lower .header-cart-col,
    .header .header-lower .header-top-right ul { gap: 4px 6px !important; }
    #sab-masthead .header .header-lower .header-top-right ul li a,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid transparent !important;
        border-radius: 50% !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }
    #sab-masthead .header .header-lower .header-top-right ul li a:hover,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:hover,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:hover {
        background: var(--sab-blush) !important;
        border-color: var(--sab-blush) !important;
        color: var(--sab-rose) !important;
    }
    #sab-masthead .header .header-lower .header-top-right ul li a:focus-visible,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:focus-visible,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: 2px; }
    /* one glyph per link, the line set (the earlier desktop rule hid these to show words) */
    #sab-masthead .header .header-lower .header-top-right ul li a::before,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart::before,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback::before {
        content: "" !important;
        display: block !important;
        position: static !important;
        flex: 0 0 auto;
        width: var(--sab-icon-lg) !important;
        height: var(--sab-icon-lg) !important;
        margin: 0 !important;
        font-size: 0 !important;
        background-color: currentColor !important;
        -webkit-mask: var(--sab-i) center / contain no-repeat !important;
        mask: var(--sab-i) center / contain no-repeat !important;
    }
    /* the chrome set throughout (stroke 1.5, as search and the phone header); the base theme dims some glyphs to .7 */
    #sab-masthead .header .header-lower .header-top-right ul li a::before { opacity: 1 !important; }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-inbox::before { --sab-i: var(--sab-ico-mail); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-account::before { --sab-i: var(--sab-ico-user); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-logout::before { --sab-i: var(--sab-ico-logout); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-login::before { --sab-i: var(--sab-ico-login); }
    #sab-masthead .header .header-lower .header-top-right ul li a.ico-register::before { --sab-i: var(--sab-ico-user-plus); }
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart::before,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback::before { --sab-i: var(--sab-ico-bag); opacity: 1 !important; }
    /* words: read by screen readers, not drawn */
    #sab-masthead .header .header-lower .header-top-right ul li a > span:not(.sab-tip):not(.sab-count):not(.inbox-badge),
    #sab-masthead .header .header-lower .header-cart-col a.ico-cart .cart-label,
    #sab-masthead .header .header-lower .header-cart-col a.ico-cart .cart-qty {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    /* counts: unread messages (plugin markup) and cart products (script) share one badge */
    #sab-masthead .header .header-lower .header-top-right ul li a .inbox-badge,
    #sab-masthead .header .header-lower .header-cart-col a .sab-count {
        position: absolute;
        top: 2px;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--sab-rose) !important;
        color: #fff !important;
        font: 700 10px/1 var(--font-default) !important;
        letter-spacing: 0 !important;
        pointer-events: none;
    }
    #sab-masthead .header .header-lower .header-cart-col a .sab-count[hidden] { display: none; }
    /* tooltip */
    #sab-masthead .header .header-lower .header-cart-col a .sab-tip {
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        z-index: 1001;
        padding: 6px 9px;
        border-radius: 2px;
        background: var(--sab-ink);
        color: #fff !important;
        font: 500 11px/1 var(--font-default) !important;
        letter-spacing: .08em !important;
        text-transform: uppercase;
        white-space: nowrap;
        transform: translate(-50%, -2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    }
    #sab-masthead .header .header-lower .header-cart-col a:hover > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a:focus-visible > .sab-tip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }
    /* the guest fallback still yields to the real flyout link (the 40px rule above would otherwise show both carts),
       and the flyout wrapper is centred on the row like the list (its link sat 3px low) */
    #sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback { display: none !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link { display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; height: 40px; }
    /* cart: its flyout opens BELOW on hover, so the caption sits to the left of the button (also keeps it in the window) */
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback > .sab-tip { top: 50%; left: auto; right: calc(100% + 6px); transform: translate(2px, -50%); }
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:hover > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:focus-visible > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:hover > .sab-tip,
    #sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:focus-visible > .sab-tip { transform: translate(0, -50%); }
}

/* (22b) the rest of the icon outliers from size_audit.py (2026-10-02): the phone menu glyph box was 22x24.5 (line
   height), the breadcrumb home 14.9 / 16.1px (font-scaled), the PDP picture arrows 28px, and ShareThis drew brand-colour
   tiles with 16px <img> logos. Now: menu 22 square like its neighbours, home = --sab-icon-sm, picture arrows =
   --sab-icon-md (as the hero/card arrows), share buttons = the header's round outline buttons with ink glyphs. */
.header .header-lower .m-menu-toggle .fa-bars { display: inline-flex; width: var(--sab-icon-lg); height: var(--sab-icon-lg); line-height: 1; }
.breadcrumb .fa.fa-home {
    display: inline-flex;
    width: var(--sab-icon-sm);
    height: var(--sab-icon-sm);
    font-size: 0 !important;
    line-height: 1;
    vertical-align: -.2em;
}
.breadcrumb .fa.fa-home::before { width: 100% !important; height: 100% !important; }
html body .product-details-page .picture-wrapper .picture-nav svg { width: var(--sab-icon-md) !important; height: var(--sab-icon-md) !important; min-width: 0 !important; }
.sharethis-inline-share-buttons .st-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid #e3d8d6 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease !important;
}
.sharethis-inline-share-buttons .st-btn:hover { background: var(--sab-blush) !important; border-color: var(--sab-blush) !important; top: 0 !important; }
.sharethis-inline-share-buttons .st-btn > img {
    width: var(--sab-icon-sm) !important;
    height: var(--sab-icon-sm) !important;
    top: auto !important;
    filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(1180%) hue-rotate(296deg) brightness(95%) contrast(93%); /* -> ink #231f20 */
}
.sharethis-inline-share-buttons .st-btn > .st-label { display: none !important; }

/* (22c) readability (2026-10-02, user: "improve icon size and border for readability"). The chrome icons were 22px line
   glyphs at stroke 1.5 with no frame - light on the white header. Now 24px (--sab-icon-lg, also the tab bar) at stroke
   1.75 (all --sab-ico-* tokens), and every header button - desktop links + cart, phone menu / search / account / bag -
   is the same circle (40px desktop, 44px phones = touch target) with a hairline ring that darkens on hover. The phone bag drew 16x22 (its link was 79px wide
   with the hidden count) and the PDP picture arrows 16x20 inside 28px buttons: both fixed here. */
:root { --sab-icon-ring: #e3d8d6; }
#sab-masthead .header .header-lower .header-top-right ul li a,
#sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart,
#sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback,
#sab-masthead .header .header-lower .m-menu-toggle,
#sab-masthead .header .header-lower .m-search-toggle,
#sab-masthead .header .header-lower .m-account-link {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--sab-icon-ring) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--sab-ink) !important;
}
#sab-masthead .header .header-lower .header-top-right ul li a:hover,
#sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart:hover,
#sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback:hover,
#sab-masthead .header .header-lower .m-menu-toggle:hover,
#sab-masthead .header .header-lower .m-search-toggle:hover,
#sab-masthead .header .header-lower .m-account-link:hover {
    border-color: var(--sab-ink) !important;
    background: var(--sab-blush) !important;
    color: var(--sab-ink) !important;
}
#sab-masthead .header .header-lower .header-top-right ul li a::before,
#sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart::before,
#sab-masthead .header .header-lower .header-cart-col a.m-cart-fallback::before,
#sab-masthead .header .header-lower .m-menu-toggle .fa::before,
#sab-masthead .header .header-lower .m-search-toggle .fa::before,
#sab-masthead .header .header-lower .m-account-link .fa::before {
    flex: 0 0 auto !important;
    width: var(--sab-icon-lg) !important;
    height: var(--sab-icon-lg) !important;
    min-width: var(--sab-icon-lg) !important;
    top: auto !important;
    transform: none !important;   /* the base theme shrinks + lifts the account / log-out glyph (scale .85, -12px) */
}
#sab-masthead .header .header-lower .m-menu-toggle .fa,
#sab-masthead .header .header-lower .m-search-toggle .fa,
#sab-masthead .header .header-lower .m-account-link .fa { display: inline-flex !important; width: var(--sab-icon-lg) !important; height: var(--sab-icon-lg) !important; line-height: 1 !important; }
/* the circle rule above must not resurrect the guest cart fallback next to the real flyout link (any width) */
#sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper ~ a.m-cart-fallback { display: none !important; }
@media (max-width: 767.98px) {
    /* phones keep the 44px touch target (header_icons_check): the circle is the button itself */
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart,
    #sab-masthead .header .header-lower .m-menu-toggle,
    #sab-masthead .header .header-lower .m-search-toggle,
    #sab-masthead .header .header-lower .m-account-link { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
    /* the phone bag: count and label are visually hidden already; the link is the 40px circle, nothing wider */
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart { font-size: 0 !important; gap: 0 !important; position: relative; }
    #sab-masthead .header .header-lower .header-cart-col .shopping-cart-link a.ico-cart > span:not(.sab-count) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
    html body .product-details-page .picture-wrapper .picture-nav { width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* (22d) desktop search button = the header-cart-col circle (user: "consistent header-search-col's icon with
   header-cart-col"): 40px, hairline ring, 24px chrome glyph, same hover. It sits at the right end of the underlined field;
   the underline stops short of it so the ring is not cut by the line. */
@media (min-width: 768px) {
    #sab-masthead .header .header-lower .header-search-col .search-box .form-group { border-bottom: 0 !important; box-shadow: none !important; position: relative; }
    #sab-masthead .header .header-lower .header-search-col .search-box .search-nav {
        height: 40px !important;
        margin-right: 48px;
        width: calc(100% - 48px) !important;
        padding-right: 30px !important;
        border-bottom: 1px solid var(--sab-ink) !important;
    }
    #sab-masthead .header .header-lower .header-search-col .search-box .form-group:focus-within .search-nav { border-bottom-color: var(--sab-rose) !important; box-shadow: 0 1px 0 0 var(--sab-rose); }
    #sab-masthead .header .header-lower .header-search-col .search-box .search-clear { right: 52px !important; }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid var(--sab-icon-ring) !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: var(--sab-ink) !important;
        transition: background-color .15s ease, border-color .15s ease;
    }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button:hover { border-color: var(--sab-ink) !important; background: var(--sab-blush) !important; }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: 2px; }
    #sab-masthead .header .header-lower .header-search-col .search-box .btn.search-box-button::before {
        position: static !important;
        width: var(--sab-icon-lg) !important;
        height: var(--sab-icon-lg) !important;
        margin: 0 !important;
        transform: none !important;
        color: var(--sab-ink) !important;
        text-shadow: none !important;
    }
}

/* (23) sidebars + type outliers (2026-10-02, user: "improve the sidebar icons; icon/font/button consistency on every
   active page"). The account menu had a black title bar (14px) and FontAwesome filled circle-arrows (a rose chevron
   on the active row); the info-page help menu was right-aligned caps with plain 14px headings - two looks for one role.
   Now one sidebar: 13px caps heading on a hairline, 44px rows in 14px Lato, an 18px line icon per destination (account
   and help menus alike), active row = rose text + 2px rose rail on the paler blush. */
:root {
    --sab-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    --sab-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
    --sab-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.3l-5.7 3 1.1-6.3-4.6-4.5 6.4-.9z'/%3E%3C/svg%3E");
    --sab-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
    --sab-side-icon: 18px;
}
/* desktop only: phones keep their own chip rows for both menus (account: section (7); help: e7_help_nav) */
@media (min-width: 768px) {
    html body .has-help-nav .help-nav h2,
    html body .has-help-nav .help-nav h3,
    html body .has-help-nav .help-nav h4 {
        display: block;
        margin: 0 0 4px !important;
        padding: 0 0 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--sab-icon-ring) !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font: 700 13px/1.2 var(--font-default) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }
    html body .has-help-nav .help-nav ul { margin: 0 0 24px !important; padding: 0 !important; list-style: none; }
    html body .has-help-nav .help-nav ul li > a {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 12px !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-left: 2px solid transparent !important;
        border-bottom: 1px solid #f3ecea !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font: 400 14px/1.3 var(--font-default) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-align: left !important;
        text-decoration: none !important;
        transition: background-color .15s ease, color .15s ease;
    }
    html body .has-help-nav .help-nav ul li > a:hover { background: var(--sab-blush) !important; }
    html body .has-help-nav .help-nav ul li > a[aria-current="page"] {
        border-left-color: var(--sab-rose) !important;
        background: #fdf8f7 !important;
        color: var(--sab-rose) !important;
        font-weight: 700 !important;
    }
    html body .has-help-nav .help-nav ul li > a::before {
        content: "" !important;
        display: block !important;
        position: static !important;
        flex: 0 0 auto;
        width: var(--sab-side-icon) !important;
        height: var(--sab-side-icon) !important;
        margin: 0 !important;
        font-size: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        background-color: currentColor !important;
        -webkit-mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
        mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
    }
    html body .has-help-nav .help-nav ul li > a[href$="/about-us"]::before { --sab-i: var(--sab-i-info); }
    html body .has-help-nav .help-nav ul li > a[href$="/contactus"]::before { --sab-i: var(--sab-i-phone); }
    html body .has-help-nav .help-nav ul li > a[href$="/shipping-returns"]::before { --sab-i: var(--sab-i-truck); }
    html body .has-help-nav .help-nav ul li > a[href$="/conditions-of-use"]::before { --sab-i: var(--sab-i-file); }
    html body .has-help-nav .help-nav ul li > a[href$="/privacy-notice"]::before { --sab-i: var(--sab-i-lock); }
        html body .block.block-account-navigation, html body .block.block-account-navigation.well, html body .block.block-account-navigation.box-shadow-wrapper { margin: 0 0 28px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
        html body .block.block-account-navigation .title.main-title {
            display: block;
            margin: 0 0 4px !important;
            padding: 0 0 10px !important;
            border: 0 !important;
            border-bottom: 1px solid var(--sab-icon-ring) !important;
            background: none !important;
            color: var(--sab-ink) !important;
            font: 700 13px/1.2 var(--font-default) !important;
            letter-spacing: .1em !important;
            text-transform: uppercase !important;
            text-align: left !important;
        }
        html body .block.block-account-navigation .title.main-title strong { padding: 0 !important; border: 0 !important; background: none !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; }
        html body .block.block-account-navigation .listbox { padding: 0 !important; border: 0 !important; background: none !important; }
        html body .block.block-account-navigation .listbox ul, html body .block.block-account-navigation .listbox ul li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none; }
        html body .block.block-account-navigation .listbox ul li > a {
            position: relative;
            display: flex !important;
            align-items: center;
            gap: 12px !important;
            min-height: 44px;
            margin: 0 !important;
            padding: 0 12px !important;
            border: 0 !important;
            border-left: 2px solid transparent !important;
            border-bottom: 1px solid #f3ecea !important;
            background: none !important;
            color: var(--sab-ink) !important;
            font: 400 14px/1.3 var(--font-default) !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            text-align: left !important;
            text-decoration: none !important;
            transition: background-color .15s ease, color .15s ease;
        }
        html body .block.block-account-navigation .listbox ul li > a:hover { background: var(--sab-blush) !important; }
        html body .block.block-account-navigation .listbox ul li > a.active {
            border-left-color: var(--sab-rose) !important;
            background: #fdf8f7 !important;
            color: var(--sab-rose) !important;
            font-weight: 700 !important;
        }
        html body .block.block-account-navigation .listbox ul li > a::before {
            content: "" !important;
            display: block !important;
            position: static !important;
            flex: 0 0 auto;
            width: var(--sab-side-icon) !important;
            height: var(--sab-side-icon) !important;
            margin: 0 !important;
            font-size: 0 !important;
            transform: none !important;
            opacity: 1 !important;
            background-color: currentColor !important;
            -webkit-mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
            mask: var(--sab-i, var(--sab-i-chevron-right)) center / contain no-repeat !important;
        }
        html body .block.block-account-navigation .listbox ul li > a .fa { display: none !important; }
        html body .block.block-account-navigation .listbox > ul > li.customer-info > a::before { --sab-i: var(--sab-i-user); }
        html body .block.block-account-navigation .listbox > ul > li.customer-addresses > a::before { --sab-i: var(--sab-i-pin); }
        html body .block.block-account-navigation .listbox > ul > li.customer-orders > a::before { --sab-i: var(--sab-i-box); }
        html body .block.block-account-navigation .listbox > ul > li.downloadable-products > a::before { --sab-i: var(--sab-i-download); }
        html body .block.block-account-navigation .listbox > ul > li.back-in-stock-subscriptions > a::before { --sab-i: var(--sab-i-bell); }
        html body .block.block-account-navigation .listbox > ul > li.reward-points > a::before { --sab-i: var(--sab-i-star); }
        html body .block.block-account-navigation .listbox > ul > li.change-password > a::before { --sab-i: var(--sab-i-lock); }
        html body .block.block-account-navigation .listbox > ul > li.customer-messages-nav > a::before { --sab-i: var(--sab-i-mail); }
        html body .block.block-account-navigation .listbox > ul > li.customer-avatar > a::before { --sab-i: var(--sab-i-user); }
        html body .block.block-account-navigation .listbox > ul > li.gdpr-tools > a::before, html body .block.block-account-navigation .listbox > ul > li.check-gift-card-balance > a::before, html body .block.block-account-navigation .listbox > ul > li.recurring-payments > a::before { --sab-i: var(--sab-i-card); }
        html body .block.block-account-navigation .listbox > ul > li.return-requests > a::before { --sab-i: var(--sab-i-reply); }
}
/* phones: the help-menu chips lost their side padding to the later desktop rule (5.6 "padding: 2px 0"), so the words
   touched the pill edge ("ABOUT US"). Same words as the desktop sidebar (sentence case, 14px), ring border, 44px. */
@media (max-width: 767.98px) {
    html body .has-help-nav .help-nav ul li > a {
        padding: 0 18px !important;
        border: 1px solid var(--sab-icon-ring) !important;
        background: #fff !important;
        color: var(--sab-ink) !important;
        font: 400 14px/1 var(--font-default) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-decoration: none !important;
    }
    html body .has-help-nav .help-nav ul li > a[aria-current="page"] {
        border-color: var(--sab-rose) !important;
        background: var(--sab-rose) !important;
        color: #fff !important;
        font-weight: 700 !important;
    }
}
/* type outliers: footer "Back to top" was the only Montserrat in the footer; breadcrumb current item capitalize/none */
html body .footer a.footer-back-to-top { font: 700 12px/1 var(--font-default) !important; letter-spacing: .12em !important; text-transform: uppercase; }
html body .breadcrumb li a,
html body .breadcrumb li a span,
html body .breadcrumb li > span,
html body .breadcrumb strong { font: 400 13px/1.3 var(--font-default) !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
html body .breadcrumb strong.current-item,
html body .breadcrumb strong.active,
html body .breadcrumb li:last-child > strong { font-weight: 700 !important; color: var(--sab-ink) !important; }

/* (24) catalog toolbar (2026-10-02, user: "improve the catalog-unified-toolbar UI/UX"). Before: the price filter sat in
   a bordered card with a heavy black jQuery UI bar and a tiny "0 - 10000"; Sort by / Display were bold 13px labels on
   34px native selects; the grid/list toggles were 18px glyphs in square boxes. Now one row between hairlines: caps
   labels (12px, muted), 40px selects with the ring border and a line chevron, a 2px rose range with 16px round
   handles, and the view toggles as the header's 40px ring buttons (selected = ink ring on blush). Desktop only -
   phones sort from the bottom tab bar. */
@media (min-width: 768px) {
    html body .catalog-unified-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 28px;
        margin: 0 0 24px !important;
        padding: 8px 0 !important;
        border-top: 1px solid var(--sab-icon-ring);
        border-bottom: 1px solid var(--sab-icon-ring);
        background: none !important;
    }
    html body .catalog-unified-toolbar .catalog-filter-bar-h, html body .catalog-unified-toolbar #product-selectors { float: none !important; margin: 0 !important; padding: 0 !important; }
    html body .catalog-unified-toolbar .price-range-filter {
        display: flex !important;
        align-items: center;
        gap: 16px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    /* always-open row on tablets too: the title is a label (the core 768-1200 pill guard is 0,5,0 - outranked here) */
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.box-shadow-wrapper.price-range-filter .title.main-title {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        pointer-events: none !important;
        cursor: default !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.price-range-filter .title.main-title::after { display: none !important; }
    /* the core tablet layout keeps the dropdown card (absolute, 220px, shadow) and a 50% block - not a row */
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.price-range-filter { flex: 0 0 auto !important; min-width: 0 !important; }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .block.price-range-filter .filter-content {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .price-range-filter .selected-price-range { flex: 0 0 auto; margin: 0 !important; white-space: nowrap; }
    html body .catalog-unified-toolbar .catalog-filter-bar-h .price-range-filter #price-range-slider { flex: 0 0 200px; order: -1; }   /* label | slider | from-to at every width */
    html body .catalog-unified-toolbar .price-range-filter .title strong,
    html body .catalog-unified-toolbar #product-selectors label {
        margin: 0 !important;
        color: #5c5456 !important;
        font: 700 12px/1 var(--font-default) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        white-space: nowrap;
    }
    html body .catalog-unified-toolbar .price-range-filter .filter-content { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sab-ink); font: 400 13px/1 var(--font-default); font-variant-numeric: tabular-nums; }
    html body .catalog-unified-toolbar #price-range-slider { width: 200px !important; height: 2px !important; margin: 0 8px !important; border: 0 !important; border-radius: 1px !important; background: var(--sab-icon-ring) !important; }
    html body .catalog-unified-toolbar #price-range-slider .ui-slider-range { height: 2px !important; top: 0 !important; border: 0 !important; background: var(--sab-rose) !important; }
    html body .catalog-unified-toolbar #price-range-slider .ui-slider-handle {
        top: -7px !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: -8px !important;
        border: 1.5px solid var(--sab-ink) !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: none !important;
        cursor: grab;
        outline: none;
    }
    html body .catalog-unified-toolbar #price-range-slider .ui-slider-handle:focus-visible { box-shadow: 0 0 0 3px rgba(140, 59, 74, .25) !important; }
    html body .catalog-unified-toolbar #product-selectors { display: flex !important; align-items: center; gap: 24px; }
    html body .catalog-unified-toolbar #product-selectors > div { float: none !important; width: auto !important; padding: 0 !important; }
    html body .catalog-unified-toolbar #product-selectors .row { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; }
    html body .catalog-unified-toolbar #product-selectors .row > div { float: none !important; width: auto !important; padding: 0 !important; }
    html body .catalog-unified-toolbar #product-selectors select.form-control {
        height: 40px !important;
        min-width: 0;
        padding: 0 36px 0 12px !important;
        border: 1px solid var(--sab-icon-ring) !important;
        border-radius: 2px !important;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat !important;
        box-shadow: none !important;
        color: var(--sab-ink) !important;
        font: 400 14px/1 var(--font-default) !important;
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    html body .catalog-unified-toolbar #products-orderby { width: 180px !important; }
    html body .catalog-unified-toolbar #products-pagesize { width: 84px !important; }
    html body .catalog-unified-toolbar #product-selectors select.form-control:hover { border-color: var(--sab-ink) !important; }
    html body .catalog-unified-toolbar #product-selectors select.form-control:focus { border-color: var(--sab-ink) !important; outline: 2px solid var(--sab-ink); outline-offset: 1px; }
    html body .catalog-unified-toolbar .product-viewmode .grid-list-icon { display: flex !important; gap: 8px; float: none !important; width: auto !important; padding: 0 !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--sab-icon-ring) !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: var(--sab-ink) !important;
        transition: background-color .15s ease, border-color .15s ease;
    }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon svg { width: 20px !important; height: 20px !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon:hover { background: var(--sab-blush) !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon.selected { border-color: var(--sab-ink) !important; background: var(--sab-blush) !important; }
    html body .catalog-unified-toolbar .product-viewmode a.viewmode-icon:focus-visible { outline: 2px solid var(--sab-ink); outline-offset: 2px; }
}

/* (25) company pages: readability + hierarchy (2026-10-03, user: "About us / Contact us / Customer service / Terms:
   visual readability and visual hierarchy"). Section (14) copied saboraclothing.com: 13px/21px text in a 1px grey box
   with ~140 characters per line, section heads 13px bold (= body), About centred, Terms gaps of 45px. Now (copy
   unchanged, CSS only): no box, one 720px reading column, 16px/1.75 body in a softened ink, a clear ladder of
   title (25) > lead (19-20) > section head (18) > body (16) > label (12 caps), hairline section breaks, About's three
   notes as one blush callout, Terms' caps notice as a callout with hanging list numbers, Contact's facts as three
   labelled columns (stacked on phones). */
:root { --sab-read: #3b3536; --sab-hair: #eee6e4; }
html body .topic-page .page-body {
    max-width: 720px;
    margin: 0 auto !important;
    padding: 4px 0 8px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--sab-read);
    font: 400 16px/1.75 var(--font-default) !important;
    text-align: left;
}
html body .topic-page .page-body p { margin: 0 0 1.1em; font: inherit; color: inherit; }
html body .topic-page .page-body strong { color: var(--sab-ink); }
html body .topic-page .page-body a { color: var(--sab-rose); text-decoration: underline; text-underline-offset: 3px; }
/* section heads: Customer service h3 / Terms h2 */
html body .topic-page .page-body h2,
html body .topic-page .page-body h3 {
    margin: 40px 0 12px !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid var(--sab-hair);
    color: var(--sab-ink) !important;
    font: 700 18px/1.35 var(--font-default) !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}
html body .topic-page .page-body > h2:first-child,
html body .topic-page .page-body > h3:first-child,
html body .topic-page .page-body > div:first-child > h2:first-child,
html body .topic-page .page-body > div:first-child > h3:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0; }
/* About: lead + body + the three notes as ONE blush callout (the asterisks stay - they are the copy) */
html body .topic-page .page-body .sab-topic-center { text-align: left !important; font: inherit !important; }
html body .topic-page .page-body .sab-topic-center p { margin: 0 0 1.1em !important; }
html body .topic-page .page-body .sab-topic-center p:first-child { color: var(--sab-ink); font-size: 20px !important; line-height: 1.6 !important; }
html body .topic-page .page-body .sab-topic-center p:nth-child(n+3) {
    margin: 0 !important;
    padding: 4px 24px !important;
    border-left: 3px solid var(--sab-rose);
    background: var(--sab-blush);
    color: var(--sab-ink);
    font-size: 15px !important;
    line-height: 1.7 !important;
}
html body .topic-page .page-body .sab-topic-center p:nth-child(3) { margin-top: 28px !important; padding-top: 18px !important; }
html body .topic-page .page-body .sab-topic-center p:last-child { padding-bottom: 18px !important; }
/* Terms: the caps notice as a callout, the intro as the lead, body 15px, sections on hairlines, hanging numbers */
html body .topic-page .page-body .sab-terms-lead {
    margin: 0 0 24px !important;
    padding: 20px 24px !important;
    border-left: 3px solid var(--sab-rose);
    background: var(--sab-blush);
    font: 700 13px/1.75 var(--font-default) !important;
    letter-spacing: .02em;
    color: var(--sab-ink);
}
html body .topic-page .page-body .sab-terms-intro { color: var(--sab-ink); font: 400 19px/1.6 var(--font-default) !important; margin-bottom: 8px !important; }
html body .topic-page .page-body .sab-terms-lead ~ p,
html body .topic-page .page-body .sab-terms-lead ~ ol { margin: 0 0 1.1em !important; font-size: 15px !important; line-height: 1.8 !important; }
html body .topic-page .page-body .sab-terms-lead ~ p.sab-terms-intro { font-size: 19px !important; line-height: 1.6 !important; margin-bottom: 8px !important; }   /* the sibling rule above is equally specific */
html body .topic-page .page-body ol { margin: 0 0 1.1em !important; padding: 0 !important; }
html body .topic-page .page-body ol > li { position: relative; margin: 0 0 .6em; padding-left: 30px; }
html body .topic-page .page-body ol > li::before { position: absolute; left: 0; top: 0; color: var(--sab-rose); font-weight: 700; }
html body .topic-page .page-body ol ol { margin: .6em 0 0 !important; }
/* Contact: no box; Address / Phone / Business hours as three labelled columns between hairlines */
html body .contact-page .contact-details { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
html body .contact-page .contact-page__info { max-width: 720px; margin: 0 auto 8px; }
html body .contact-page .contact-page__info .topic-html-content-body {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--sab-hair);
    border-bottom: 1px solid var(--sab-hair);
}
html body .contact-page .contact-page__info .topic-html-content-body p {
    margin: 0 !important;
    padding: 22px 16px !important;
    color: var(--sab-read) !important;
    font: 400 16px/1.65 var(--font-default) !important;
    text-align: center !important;
}
html body .contact-page .contact-page__info .topic-html-content-body p + p { border-left: 1px solid var(--sab-hair); }
html body .contact-page .contact-page__info .topic-html-content-body strong,
html body .contact-page .contact-page__info .topic-html-content-body p:has(a[href^="tel:"])::before {
    display: block;
    margin: 0 0 8px;
    color: #5c5456 !important;
    font: 700 12px/1.2 var(--font-default) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}
html body .contact-page .contact-page__info .topic-html-content-body p:has(a[href^="tel:"])::before { content: "Phone"; }
html body .contact-page .contact-page__info .topic-html-content-body br:first-of-type { display: none; }   /* the label is a block now */
html body .contact-page .contact-page__info .topic-html-content-body a[href^="tel:"] { color: var(--sab-ink) !important; font-weight: 700; font-size: 18px; text-decoration: none; }
html body .contact-page .contact-page__info .topic-html-content-body a[href^="tel:"]:hover { color: var(--sab-rose) !important; }
/* the form sits in the same 720px column; the info block's bottom hairline already separates it (no second rule) */
html body .contact-page .contact-page__form { max-width: 720px; margin: 0 auto !important; padding-top: 36px !important; border-top: 0 !important; }
@media (max-width: 767.98px) {
    html body .topic-page .page-body { padding: 0 2px 8px !important; font-size: 16px !important; }
    html body .topic-page .page-body .sab-topic-center p:first-child { font-size: 18px !important; }
    html body .topic-page .page-body .sab-terms-lead ~ p.sab-terms-intro { font-size: 17px !important; }
    html body .topic-page .page-body h2, html body .topic-page .page-body h3 { margin-top: 32px !important; padding-top: 24px !important; font-size: 17px !important; }
    html body .contact-page .contact-page__info .topic-html-content-body { grid-template-columns: 1fr; }
    html body .contact-page .contact-page__info .topic-html-content-body p + p { border-left: 0; border-top: 1px solid var(--sab-hair); }
    html body .contact-page .contact-page__info .topic-html-content-body p { padding: 18px 8px !important; }
}

/* (26) listing view modes = products per row (2026-10-03, core _CatalogSelectors: "3 per row" / "4 per row").
   Section 5.1 pinned every listing to repeat(3) !important, so the 4-up mode rendered 3 per row too. The 4-up
   grid gets its own column count (one more class = wins over 5.1); phones stay 2-up (5.1 is desktop-only). */
@media (min-width: 768px) {
    .html-category-page .product-grid.viewmode-4col .item-grid.row,
    .html-search-page .product-grid.viewmode-4col .item-grid.row,
    .html-recently-added-products-page .product-grid.viewmode-4col .item-grid.row,
    .html-manufacturer-page .product-grid.viewmode-4col .item-grid.row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 20px;
    }
}

/* (27) "On this page" on long topic pages (2026-10-03, user: section list for Terms - 26 sections). Built by
   sab-topic-toc-v1.js from the topic's h2s; two columns on desktop, one on phones; section heads keep clear of the
   masthead when jumped to. */
html body .topic-page .page-body .sab-toc {
    margin: 8px 0 36px;
    padding: 20px 24px 14px;
    border: 1px solid var(--sab-hair);
    border-radius: 2px;
    background: #fff;
}
html body .topic-page .page-body .sab-toc__title {
    margin: 0 0 12px !important;
    color: #5c5456 !important;
    font: 700 12px/1.2 var(--font-default) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .topic-page .page-body .sab-toc__list { margin: 0 !important; padding: 0 !important; list-style: none; columns: 2; column-gap: 32px; }
html body .topic-page .page-body .sab-toc__list > li { margin: 0; padding: 0 !important; break-inside: avoid; }
html body .topic-page .page-body .sab-toc__list > li::before { content: none !important; }
html body .topic-page .page-body .sab-toc__list a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f3ecea;
    color: var(--sab-ink) !important;
    font: 400 14px/1.4 var(--font-default);
    text-decoration: none !important;
    text-transform: none;
}
html body .topic-page .page-body .sab-toc__list a:hover { color: var(--sab-rose) !important; }
html body .topic-page .page-body .sab-toc__num { flex: 0 0 22px; color: var(--sab-rose); font-weight: 700; font-variant-numeric: tabular-nums; }
html body .topic-page .page-body h2[id] { scroll-margin-top: 140px; }
@media (max-width: 767.98px) {
    html body .topic-page .page-body .sab-toc { padding: 16px 16px 10px; }
    html body .topic-page .page-body .sab-toc__list { columns: 1; }
    html body .topic-page .page-body h2[id] { scroll-margin-top: 120px; }
}

/* (28) notification tokens for the core toasts (notifications-v1.css / .js, 2026-10-03). Sabora: white card on the
   ink type, the hairline of the rest of the skin, square-ish corners, Lato; links in rose; states in muted tones
   that sit next to the rose instead of the stock bright green / red. Desktop: under the header icon row. */
:root {
    --nt-font: var(--font-default);
    --nt-size: 14px;
    --nt-bg: #fff;
    --nt-fg: var(--sab-ink);
    --nt-border: #e3d8d6;
    --nt-radius: 2px;
    --nt-success: #3d7a5a;
    --nt-error: #a3242f;
    --nt-warning: #9a5b00;
    --nt-link: var(--sab-rose);
    --nt-muted: #5c5456;
    --nt-top: 132px;
    --nt-shadow: 0 14px 36px rgba(35, 31, 32, .16), 0 2px 6px rgba(35, 31, 32, .06);
}

/* (29) phone menu drawer (2026-10-03, user: "hamburger menu popover UI/UX"). Core v4 makes the drawer fill the screen
   under the header and turns the hamburger into a close. Sabora look: category rows 54px in 15px caps on hairlines
   (were 12px bold on black rules) with a chevron for "goes somewhere", SALE in rose, the account block as a labelled
   section of 48px icon rows, the language switch compact at the top. */
:root { --sab-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E"); }
@media (max-width: 767.98px) {
    .header .header-lower .m-menu-toggle[aria-expanded="true"] .fa-bars::before { --sab-ico: var(--sab-ico-close); --sab-i: var(--sab-ico-close); }
    #sab-masthead .header-menu .navbar-collapse.in { background: #fff !important; border-top: 1px solid var(--sab-hair) !important; }
    /* mobile-header-v4.js focuses the panel on open (keyboard users land in it) - no ring on the whole drawer */
    #sab-masthead .header-menu .navbar-collapse.in:focus { outline: none !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav { margin: 0 !important; padding: 4px 0 0 !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li { position: relative; border: 0 !important; border-bottom: 1px solid var(--sab-hair) !important; background: none !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a {
        display: flex !important;
        align-items: center;
        min-height: 54px;
        padding: 0 48px 0 20px !important;
        border: 0 !important;
        background: none !important;
        color: var(--sab-ink) !important;
        font: 600 15px/1.2 var(--font-default) !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li:not(.dropdown) > a::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        background-color: #9a8f8d;
        -webkit-mask: var(--sab-i-chevron-right) center / contain no-repeat;
        mask: var(--sab-i-chevron-right) center / contain no-repeat;
    }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a[href$="/sale"] { color: var(--sab-rose) !important; }
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a:active,
    #sab-masthead .header-menu .navbar-collapse .nav.navbar-nav > li > a:focus-visible { background: var(--sab-blush) !important; }
    #sab-masthead .header-menu .navbar-collapse .dropdown-menu li a { min-height: 48px; display: flex !important; align-items: center; padding: 0 20px 0 32px !important; font: 400 15px/1.3 var(--font-default) !important; letter-spacing: 0 !important; text-transform: none !important; }
    /* account block */
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account { margin-top: 20px !important; border-top: 0 !important; }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account .m-menu-section-title {
        padding: 0 20px 8px !important;
        border-bottom: 1px solid var(--sab-hair);
        color: #5c5456 !important;
        font: 700 12px/1.2 var(--font-default) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase;
    }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account .header-top-right li { border-bottom: 1px solid var(--sab-hair) !important; }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account .header-top-right li a {
        display: flex !important;
        align-items: center;
        gap: 14px;
        min-height: 48px;
        padding: 0 20px !important;
        color: var(--sab-ink) !important;
        font: 400 15px/1.2 var(--font-default) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        border: 0 !important;   /* the li carries the one hairline */
    }
    #sab-masthead .header-menu .navbar-collapse .mobile-menu-account li a[class^="ico-"]::before { width: 20px !important; height: 20px !important; flex: 0 0 20px; }
    /* language switch: compact row at the top */
    #sab-masthead .header-menu .navbar-collapse .npc-tr { margin: 12px 20px 8px !important; }
}

/* (30) login popover / sheet (2026-10-03, user: "mobile login popover UI/UX"). Core: eye-icon password toggle,
   drag-down-to-close sheet, 44px foot links. Sabora: the title in the page-title family (Lato 22, was Montserrat 20). */
:root { --npc-lp-title-font: var(--font-default); --npc-lp-title-size: 22px; }
/* wigstheme pins every h1-h6 to Montserrat with !important; the dialog title is a heading of the UI, not of the page */
.npc-lp-root .npc-lp-title { font-family: var(--npc-lp-title-font) !important; }

/* (31) cart page + flyout cart tokens for the core cart-skin-v1.css (2026-10-03, user: "flyout cart / cart page UI,
   UX, readability"): Lato, ink figures, the skin hairline, blush bands and chips, rose checkout. The cart icon's
   tooltip stays hidden while its flyout is open (it sat on top of the neighbouring icons). */
:root {
    --cart-font: var(--font-default);
    --cart-fg: var(--sab-ink);
    --cart-muted: #5c5456;
    --cart-line: #e3d8d6;
    --cart-surface: #fff;
    --cart-soft: #fbf5f4;
    --cart-accent: var(--sab-rose);
    --cart-accent-fg: #fff;
    --cart-radius: 2px;
    --cart-chip-bg: var(--sab-blush);
}
#sab-masthead .header .header-lower .header-cart-col:has(.flyout-cart-wrapper.active) a.ico-cart > .sab-tip,
#sab-masthead .header .header-lower .header-cart-col .flyout-main-wrapper:hover a.ico-cart > .sab-tip { display: none !important; }

/* (32) flyout cart anchored to the bag icon (2026-10-03, user: "flyout cart popover display location is distorted").
   Theme simplex.styles.css puts the wrapper 20px in from the cart column (right:20px) and the responsive sheet adds
   left:10px, so below ~1200px the 440-580px card ran past the viewport and above it the caret (core
   flyout-cart-arrow.css, 16px, right:20px) sat left of the bag. The card's right edge = the column's right edge = the
   bag's right edge, and the caret is centred under the 40px bag (20 - 16/2). The theme's old png arrow is off. */
@media (min-width: 768px) {
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper { left: auto !important; right: 0 !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper::before { content: none !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper .flyout-cart { right: 0 !important; }   /* core tablet sheet: right:10px */
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper .flyout-cart::before { left: auto !important; right: 12px !important; }
    #sab-masthead .header .header-lower .header-cart-col .flyout-cart-wrapper .flyout-cart::after { left: auto !important; right: 13.6px !important; }
}

/* (33) header logo on one continuous curve + breathing room (2026-10-03, user: "validate logo size when resizing
   window and mobile view"). Before, three rules stepped the size while resizing: 404 > 323 at 1024 (section 6)
   > 266 at 1023 > 200 at 768 > back to 323 at 767 > 152 at 390. Now: 404px (native) from 1200px; a straight
   line 200px @768 -> 404px @1200 (~321 @1024, the benchmark's 80%) that also keeps the tablet search field
   >= 170px; phones take what fits between the four 44px buttons, capped at the same 200px (no jump at 767/768),
   with 6px either side (the logo cell touched the account button). */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #sab-masthead .header .header-lower .header-logo img {
        width: clamp(200px, 47.22vw - 162.6px, 404px) !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
    }
}
@media (max-width: 767.98px) {
    #sab-masthead .header .header-lower .header-logo-col { padding-inline: 6px !important; }
    #sab-masthead .header .header-lower .header-logo img { max-width: min(100%, 200px) !important; }
}

/* (34) /login: Sign in and Register on one line (2026-10-03, user: "horizontal align 'sign in'/'register' buttons").
   The two cards were already equal height, but each button sat right after its own content, so Register landed
   20px lower at 1024-1440 and 111px lower at 768. Side by side (>= 768px) each card is a column and its action row
   takes the free space above it (margin-top: auto) - both buttons end on the cards' bottom padding. Phones stack. */
@media (min-width: 768px) {
    .login-page .returning-wrapper,
    .login-page .new-wrapper { display: flex; flex-direction: column; }
    .login-page .returning-wrapper > fieldset,
    .login-page .new-wrapper > fieldset,
    .login-page .returning-wrapper > fieldset > .form-fields,
    .login-page .returning-wrapper > fieldset > .form-fields > form,
    .login-page .new-wrapper > fieldset > .text { display: flex; flex-direction: column; flex: 1 1 auto; }
    .login-page .returning-wrapper form > .form-group:has(.login-button),
    .login-page .new-wrapper .text > .form-group:has(.register-button) { margin-top: auto !important; margin-bottom: 0 !important; }
}

/* (35) compact breadcrumb area (2026-10-05, user: "reduce the breadcrumb's top/bottom space so more products fit one
   screen"). Category pages at 1440x900 spent 114px on one line of breadcrumb: the menu row's 32px bottom margin
   (it collapses out of the masthead), a 51px band (15px padding) and a 30px margin below; the toolbar then kept 24px
   above the grid. Now 12 / 36 / 12 and 16 - ~74px more product. Only on pages with a breadcrumb; the home page keeps
   its spacing (the hero overlay is measured from the menu row). */
html:not(.html-home-page):has(.breadcrumb-wrapper) #sab-masthead .header-menu { margin-bottom: 12px !important; }
html body .breadcrumb-wrapper ul.breadcrumb { padding-top: 8px !important; padding-bottom: 8px !important; margin-bottom: 12px !important; }
html body .catalog-unified-toolbar { margin-bottom: 16px !important; }