/* ==========================================================================
   Storefront chrome — theme-token-driven header + cart/account/search panels
   --------------------------------------------------------------------------
   Shared across every storefront (the Epicenter sell-site and every tenant
   store). Colour, type and radius come from the channel's storefront theme
   tokens (--sf-*), which StorefrontRenderer bakes onto :root for builder-
   served pages. Every var() carries the SettingsRegistry / DEFAULT_THEME_TOKENS
   default as its fallback, so legacy pages that never emit the tokens (Heat
   Applied's storefront, product/cart controllers) render with the same clean
   defaults instead of an unstyled bar.

   Loaded after app.css in page-wrapper.html so these rules win. Scoped to
   .sf-chrome / the storefront off-canvas panels; page content is untouched.
   ========================================================================== */

:root {
    /* Chrome-local derivations. Kept here (not in --sf-*) so they never collide
       with the tenant theme token set. */
    --sfc-bg:        var(--sf-color-background, #ffffff);
    --sfc-fg:        var(--sf-color-body-text, #212529);
    --sfc-primary:   var(--sf-color-primary, #0d6efd);
    --sfc-accent:    var(--sf-color-accent, #ffc107);
    --sfc-radius:    var(--sf-corner-radius, 0.375rem);
    --sfc-font:      var(--sf-font-body, inherit);
    --sfc-height:    64px;
}

/* ---- Bar ---------------------------------------------------------------- */
.sf-chrome.navbar {
    /* Pin to top. The legacy theme neutralises Bootstrap's fixed-top
       (.navbar.fixed-top{position:relative}); we re-assert a real fixed bar so
       it stays put and solidifies on scroll. Kept below Bootstrap's off-canvas
       z-index (1045) so the cart/account panels still overlay the bar. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--sfc-height);
    padding: 0;
    background: color-mix(in srgb, var(--sfc-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--sfc-fg) 10%, transparent);
    box-shadow: none;
    transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
    font-family: var(--sfc-font);
}
/* Solidifies once the page scrolls (toggled by the chrome script). */
.sf-chrome.navbar.sf-scrolled {
    background: color-mix(in srgb, var(--sfc-bg) 97%, transparent);
    box-shadow: 0 1px 18px -8px color-mix(in srgb, var(--sfc-fg) 45%, transparent);
    border-bottom-color: color-mix(in srgb, var(--sfc-fg) 14%, transparent);
}
.sf-chrome .navbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ---- Brand -------------------------------------------------------------- */
.sf-chrome .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0 18px 0 0;
    flex: 0 0 auto;
}
.sf-chrome .navbar-brand img {
    /* Definite cross-size + flex:none so the flex row gives the replaced
       element a real main size from its aspect ratio (max-height alone
       collapses to 0 against app.css's global img{max-width:100%}). */
    height: 32px;
    width: auto;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
    display: block;
}

/* ---- Primary nav -------------------------------------------------------- */
.sf-chrome .navbar-collapse { flex: 1 1 auto; }
.sf-chrome .navbar-nav {
    align-items: center;
    gap: 2px;
    flex-direction: row;
}
.sf-chrome .navbar-nav .nav-item { position: relative; }
.sf-chrome .navbar-nav .nav-link,
.sf-chrome .navbar-nav > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 1;
    color: color-mix(in srgb, var(--sfc-fg) 82%, transparent);
    text-decoration: none;
    border-radius: var(--sfc-radius);
    transition: color .18s ease, background .18s ease;
}
.sf-chrome .navbar-nav .nav-link::after,
.sf-chrome .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--sfc-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
}
.sf-chrome .navbar-nav .nav-link:hover,
.sf-chrome .navbar-nav .nav-link:focus,
.sf-chrome .navbar-nav > li > a:hover,
.sf-chrome .navbar-nav .nav-item.active > .nav-link {
    color: var(--sfc-fg);
}
.sf-chrome .navbar-nav .nav-link:hover::after,
.sf-chrome .navbar-nav > li > a:hover::after,
.sf-chrome .navbar-nav .nav-item.active > .nav-link::after {
    transform: scaleX(1);
}
/* Dropdown menus */
.sf-chrome .navbar-nav .dropdown-menu {
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--sfc-fg) 12%, transparent);
    border-radius: var(--sfc-radius);
    box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--sfc-fg) 55%, transparent);
    padding: 6px;
    background: var(--sfc-bg);
}
.sf-chrome .navbar-nav .dropdown-menu .dropdown-item {
    border-radius: calc(var(--sfc-radius) * .7);
    padding: 8px 12px;
    font-size: .88rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--sfc-fg) 85%, transparent);
}
.sf-chrome .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: color-mix(in srgb, var(--sfc-accent) 14%, transparent);
    color: var(--sfc-fg);
}

/* ---- Mega-dropdown (Heat Applied's multi-column pop-out nav) ------------- */
/* The generic .dropdown-menu framing above double-boxes the mega menu (app.css
   intentionally makes the mega .dropdown-menu transparent and lets .dropdown-inner
   be the panel). Neutralise the wrapper, then restyle the inner panel + links to
   the clean-modern, token-driven look. */
.sf-chrome .navbar-nav .mega-dropdown .dropdown-menu {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.sf-chrome .mega-dropdown .dropdown-menu .dropdown-inner {
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--sfc-fg) 10%, transparent);
    border-radius: var(--sfc-radius);
    background: var(--sfc-bg);
    box-shadow: 0 20px 46px -20px color-mix(in srgb, var(--sfc-fg) 50%, transparent);
    padding: 6px;
}
.sf-chrome .mega-dropdown .dropdown-inner .dropdown-column {
    padding: 18px 20px;
}
/* Column headings */
.sf-chrome .mega-dropdown .widget-title {
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sfc-fg);
    margin-bottom: 12px;
    padding-bottom: 12px;
}
.sf-chrome .mega-dropdown .widget-title .fs-2em { font-size: 1.5em; line-height: 1.05; }
/* Link rows */
.sf-chrome .mega-dropdown .widget-links ul { list-style: none; margin: 0 0 4px; padding: 0; }
.sf-chrome .mega-dropdown .widget-links ul li { margin: 0; }
.sf-chrome .mega-dropdown .widget-links ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: calc(var(--sfc-radius) * .7);
    color: color-mix(in srgb, var(--sfc-fg) 82%, transparent);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.sf-chrome .mega-dropdown .widget-links ul li a:hover {
    background: color-mix(in srgb, var(--sfc-accent) 14%, transparent);
    color: var(--sfc-fg);
}
/* Chevron indicator — accent, slides on hover */
.sf-chrome .mega-dropdown .widget-categories-indicator {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--sfc-accent);
    transition: transform .15s ease;
}
.sf-chrome .mega-dropdown .widget-links ul li a:hover .widget-categories-indicator {
    transform: translateX(2px);
}
/* Column CTA buttons — keep the brand-dark fill, just modernise the shape */
.sf-chrome .mega-dropdown .btn {
    border-radius: var(--sfc-radius);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 11px 16px;
}

/* ---- Right-side actions ------------------------------------------------- */
/* Reset the legacy absolute positioning (app.css .navbar-btns{position:absolute;
   right:0}) so the actions flow as a flex item and respect .navbar-inner's
   padding instead of pinning to the raw viewport edge. */
.sf-chrome .navbar-btns {
    position: static;
    height: auto;
    flex: 0 0 auto;
    margin-left: auto;
}
.sf-chrome .navbar-btns-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* app.css fixes .navbar-btn to width:80px at >=992px (legacy equal-width
   stacked buttons); the clean-modern actions size to their content instead —
   otherwise the Sign In pill clamps to 80px and its label overflows. */
.sf-chrome .navbar-btns .navbar-btn {
    width: auto;
    height: auto;
}
.sf-chrome .navbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-size: .86rem;
    font-weight: 600;
    /* app.css uppercases .navbar-btn; the clean-modern chrome uses normal case */
    text-transform: none;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--sfc-fg) 80%, transparent);
    background: transparent;
    border: 0;
    border-radius: var(--sfc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}
.sf-chrome .navbar-btn:hover { color: var(--sfc-fg); background: color-mix(in srgb, var(--sfc-fg) 6%, transparent); }
.sf-chrome .navbar-btn i,
.sf-chrome .navbar-btn svg { width: 18px; height: 18px; margin: 0 !important; }
.sf-chrome .navbar-btn svg { stroke-width: 2; }

/* Inline chrome icons (feather is being retired — the chrome ships its own
   self-contained SVGs so it never depends on feather.replace()). */
svg.sf-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: middle;
    stroke-width: 2;
}
.sf-chrome .navbar-btn svg.sf-ico { margin: 0 !important; }

/* The account dropdown toggle carries no <a class="navbar-btn"> wrapper in the
   active header — it is a .navbar-btn.dropdown. Keep it aligned. */
.sf-chrome .navbar-btn.dropdown > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}
.sf-chrome .navbar-btn.dropdown > .dropdown-toggle::after { margin-left: 2px; }

/* Account dropdown positioning + hover bridge.
   app.css pins .account-dropdown-menu at top:66px (right:-44px) — an offset that
   assumed the legacy full-bar-height (~64px) button. The chrome shrinks the toggle
   to an inline-flex pill centred in the bar, so that 66px lands ~15px below the
   toggle's real bottom, opening a dead gap. Storefront dropdowns are hover-opened
   via CSS (.dropdown:hover > .dropdown-menu), so the gap drops the :hover before
   the cursor can reach the menu and it snaps shut. Re-anchor flush under the toggle
   and bridge the visual gap with a transparent ::before that keeps the hover chain
   intact (the pseudo is part of the menu's box, so hovering it holds .dropdown:hover). */
.sf-chrome .navbar-btns .dropdown-menu,
.sf-chrome .account-dropdown-menu {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 0;
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--sfc-fg) 12%, transparent);
    border-radius: var(--sfc-radius);
    box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--sfc-fg) 55%, transparent);
    padding: 6px;
    background: var(--sfc-bg);
}
.sf-chrome .navbar-btn.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.sf-chrome .account-dropdown-menu .dropdown-item {
    border-radius: calc(var(--sfc-radius) * .7);
    padding: 8px 12px;
    font-size: .88rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--sfc-fg) 85%, transparent);
}
.sf-chrome .account-dropdown-menu .dropdown-item:hover {
    background: color-mix(in srgb, var(--sfc-accent) 14%, transparent);
    color: var(--sfc-fg);
}

/* Sign In gets promoted to a solid pill so guests have one clear entry point. */
.sf-chrome .navbar-btn[href*="offcanvas-account"] {
    color: #fff;
    background: var(--sfc-primary);
    padding: 9px 18px;
}
.sf-chrome .navbar-btn[href*="offcanvas-account"]:hover {
    background: color-mix(in srgb, var(--sfc-primary) 86%, #000);
    color: #fff;
}

/* Cart button + live quantity badge */
.sf-chrome .navbar-btn-cart { position: relative; }
/* Badge pins to the icon corner (wrap holds only the badge + icon). */
.sf-chrome .sf-cart-ico-wrap { position: relative; display: inline-flex; }
.sf-chrome .navbar-btn-badge,
.sf-chrome .cart-quantity-display {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--sfc-accent) !important;
    border-radius: 999px;
}

/* Mobile menu toggle */
.sf-chrome .navbar-toggler {
    display: none;
    align-items: center;
    gap: 7px;
    border: 0;
    box-shadow: none;
}
@media (max-width: 991.98px) {
    .sf-chrome .navbar-toggler { display: inline-flex; }
    /* Desktop-only nav items: !important so the permission-gate jQuery
       .show() (inline display) cannot reveal them inside the collapsed
       mobile menu — never use d-none on jQuery-controlled elements. */
    .sf-chrome .sf-nav-desktop-only { display: none !important; }
    .sf-chrome .navbar-collapse {
        position: absolute;
        top: var(--sfc-height);
        left: 0; right: 0;
        background: var(--sfc-bg);
        border-bottom: 1px solid color-mix(in srgb, var(--sfc-fg) 12%, transparent);
        box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--sfc-fg) 55%, transparent);
        padding: 10px 16px 16px;
    }
    .sf-chrome .navbar-nav { flex-direction: column; align-items: stretch; gap: 0; }
    .sf-chrome .navbar-nav .nav-link,
    .sf-chrome .navbar-nav > li > a { padding: 12px 6px; }
    .sf-chrome .navbar-nav .nav-link::after,
    .sf-chrome .navbar-nav > li > a::after { display: none; }
}

/* Pin the page body below the fixed bar (the legacy theme relied on Bootstrap's
   fixed-top spacer; make it explicit and stable). margin-top: 0 cancels the
   legacy app.css desktop offsets (body margin 80px / margin-top 82px at
   >=992px — sized for the OLD fixed navbar) which otherwise stack an extra
   ~82px gap on top of this padding; scoped to sf-has-chrome so admin and any
   non-chrome surfaces keep the legacy offset they still rely on. */
body.sf-has-chrome { padding-top: var(--sfc-height); margin-top: 0; }

/* ==========================================================================
   Off-canvas panels — cart, account, search
   ========================================================================== */
#offcanvas-cart.offcanvas,
#offcanvas-account.offcanvas,
#offcanvas-search.offcanvas {
    width: 400px;
    max-width: 92vw;
    background: var(--sfc-bg);
    color: var(--sfc-fg);
    border: 0;
    box-shadow: -20px 0 50px -24px color-mix(in srgb, var(--sfc-fg) 60%, transparent);
    font-family: var(--sfc-font);
}
#offcanvas-cart .offcanvas-header,
#offcanvas-account .offcanvas-header,
#offcanvas-search .offcanvas-header {
    padding: 20px 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--sfc-fg) 10%, transparent);
}
#offcanvas-cart .offcanvas-title,
#offcanvas-account .offcanvas-title,
#offcanvas-search .offcanvas-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sfc-fg);
}
#offcanvas-cart .offcanvas-body,
#offcanvas-account .offcanvas-body,
#offcanvas-search .offcanvas-body { padding: 0; }
#offcanvas-cart .offcanvas-body-inner,
#offcanvas-account .offcanvas-body-inner,
#offcanvas-search .offcanvas-body-inner { padding: 22px; }

/* ---- Cart: reflow so line items scroll and the summary sticks ----------- */
#offcanvas-cart .offcanvas-body-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 0;
}
/* Line item list grows and scrolls */
#offcanvas-cart .cart-line-items-sidebar {
    order: 1;
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 -6px;
    padding: 4px 6px !important;
}
#offcanvas-cart .cart-line-items-sidebar .empty-table {
    text-align: center;
    color: color-mix(in srgb, var(--sfc-fg) 55%, transparent);
    padding: 40px 0;
}
/* Clear-cart sits just under the list */
#offcanvas-cart .clear-cart { order: 2; padding: 6px 0 2px; }
#offcanvas-cart .clear-cart a { color: #dc3545; font-weight: 600; }
/* The summary/checkout block sticks to the bottom */
#offcanvas-cart .offcanvas-body-inner > hr { display: none; }
#offcanvas-cart .cart-summary {
    order: 3;
    margin: 0 -22px;
    padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--sfc-fg) 12%, transparent);
    background: color-mix(in srgb, var(--sfc-fg) 3%, var(--sfc-bg));
}
#offcanvas-cart .cart-summary .sf-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
#offcanvas-cart .cart-summary .sf-subtotal-row .lbl {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--sfc-fg) 60%, transparent);
}
#offcanvas-cart .cart-summary .cart-subtotal-display {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sfc-fg) !important;
}
#offcanvas-cart .cart-summary .btn-checkout {
    width: 100%;
    padding: 13px 16px;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: var(--sfc-accent);
    border: 0;
    border-radius: var(--sfc-radius);
    box-shadow: none;
}
#offcanvas-cart .cart-summary .btn-checkout:hover {
    background: color-mix(in srgb, var(--sfc-accent) 88%, #000);
    color: #fff;
}
#offcanvas-cart .cart-summary .sf-cart-secondary {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
#offcanvas-cart .cart-summary .btn-share,
#offcanvas-cart .cart-summary a[href$="cart/"] {
    flex: 1 1 0;
    padding: 10px 12px;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    color: var(--sfc-fg);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--sfc-fg) 20%, transparent);
    border-radius: var(--sfc-radius);
    text-decoration: none;
}
#offcanvas-cart .cart-summary .btn-share:hover,
#offcanvas-cart .cart-summary a[href$="cart/"]:hover {
    background: color-mix(in srgb, var(--sfc-fg) 6%, transparent);
    color: var(--sfc-fg);
}

/* ---- Account / search polish ------------------------------------------- */
#offcanvas-account .nav-tabs { border-bottom: 1px solid color-mix(in srgb, var(--sfc-fg) 12%, transparent); }
#offcanvas-account .nav-tabs .nav-link {
    font-weight: 600;
    font-size: .9rem;
    color: color-mix(in srgb, var(--sfc-fg) 60%, transparent);
    border: 0;
}
#offcanvas-account .nav-tabs .nav-link.active {
    color: var(--sfc-fg);
    background: transparent;
    border-bottom: 2px solid var(--sfc-accent);
}
#offcanvas-account .btn-primary {
    background: var(--sfc-primary);
    border-color: var(--sfc-primary);
    border-radius: var(--sfc-radius);
    padding: 11px 16px;
    font-weight: 700;
}
#offcanvas-account .input-group-text { background: color-mix(in srgb, var(--sfc-fg) 4%, transparent); border-color: color-mix(in srgb, var(--sfc-fg) 15%, transparent); }
#offcanvas-account .form-control { border-color: color-mix(in srgb, var(--sfc-fg) 15%, transparent); }