/*
 * Site header + footer — rebuilt to match the approved mockup exactly
 * (header-final-mockup.html), which itself matches blank2brand.com's
 * verified pixel values. Scoped to #b2b-announcement-bar, #b2b-utility-bar,
 * #masthead, #b2b-navbar, #b2b-mobile-drawer, #b2b-mobile-overlay, and
 * #b2b-site-footer only. Does NOT touch global typography — the rest of the
 * site keeps the Inter body font from the Customizer setting.
 */

/* ── Self-hosted Poppins, scoped to header/footer only ── */
@font-face {
    font-family: 'B2B Poppins';
    src: url('../fonts/poppins/poppins-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'B2B Poppins';
    src: url('../fonts/poppins/poppins-medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'B2B Poppins';
    src: url('../fonts/poppins/poppins-semibold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'B2B Poppins';
    src: url('../fonts/poppins/poppins-bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --b2b-hf-blue: #0088CC;
    --b2b-hf-blue-dark: #0A1628;
    --b2b-hf-text: #222529;
    --b2b-hf-muted: #6B7280;
    --b2b-hf-border: #EEEEEE;
    --b2b-hf-pink: #E91E8C;
    --b2b-hf-green: #1EA64C;
    /* Shared translucent hover/active fill for dropdown menu items
       (Account dropdown, Categories dropdown) -- per Victoria's request
       (2026-08-15) that the solid opaque blue used there read as "more
       transparent". Text switches to the solid blue instead of white so
       it stays legible against a lighter fill. */
    --b2b-hf-blue-soft: rgba(0,136,204,0.14);
}

#b2b-announcement-bar,
#b2b-utility-bar,
#masthead,
#b2b-navbar,
#b2b-mobile-drawer,
#b2b-mobile-overlay,
#b2b-site-footer {
    font-family: 'B2B Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
}
#b2b-announcement-bar *,
#b2b-utility-bar *,
#masthead *,
#b2b-navbar *,
#b2b-mobile-drawer *,
#b2b-mobile-overlay *,
#b2b-site-footer * {
    box-sizing: border-box;
}

/* ── Announcement bar ── */
#b2b-announcement-bar {
    background: var(--b2b-hf-blue-dark);
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 8px 40px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#b2b-announcement-bar b { font-weight: 700; }
#b2b-announcement-bar .b2b-short-copy { display: none; }
#b2b-announcement-bar .b2b-dim { color: rgba(255,255,255,0.55); margin-left: 6px; font-weight: 400; }
#b2b-announcement-close {
    position: absolute;
    right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #fff; opacity: 0.6;
    font-size: 15px; cursor: pointer; line-height: 1;
}

/* ── Utility bar ── */
#b2b-utility-bar {
    background: var(--b2b-hf-blue);
    color: #fff;
    font-size: 12.5px;
}
.b2b-utility__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 7px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.b2b-utility__left { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.b2b-utility__left .b2b-flag { width: 18px; height: 13px; border-radius: 2px; flex-shrink: 0; display: block; }
.b2b-utility__right { display: flex; align-items: center; gap: 18px; }
.b2b-utility__links { display: flex; align-items: center; }
.b2b-utility__links a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    opacity: 0.95;
    padding: 0 12px;
    position: relative;
    transition: opacity .15s, color .15s, filter .15s, transform .15s;
}
.b2b-utility__links a:first-child { padding-left: 0; }
.b2b-utility__links a:last-child { padding-right: 0; }
.b2b-utility__links a:not(:last-child)::after {
    content: '';
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 12px;
    background: rgba(255,255,255,0.35);
}
/* Consistent hover treatment across My Account/Login/Sign Up, Blog,
   Contact Us, Cart, and social icons, per Victoria's explicit spec
   (2026-08-16, glow color changed from orange to white same day):
   slight scale-up, white glow, navy (#072a69) color/fill. Overrides the
   generic blue glow from site-global.css for just these elements.
   transform:scale (not font-size) for the "enlarge" so line height/
   layout doesn't reflow; scale() on an inline element requires
   display:inline-block above to actually take effect. */
.b2b-utility__links a:hover {
    opacity: 1;
    text-decoration: none;
    color: #072a69;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.85));
    transform: scale(1.08);
}
.b2b-utility__social { display: flex; align-items: center; gap: 11px; margin-left: 4px; }
.b2b-utility__social a { display: inline-flex; transition: transform .15s; }
.b2b-utility__social svg { width: 14px; height: 14px; fill: #fff; opacity: 0.9; transition: fill .15s, opacity .15s, filter .15s; }
.b2b-utility__social a:hover { transform: scale(1.12); }
.b2b-utility__social a:hover svg { opacity: 1; fill: #072a69; filter: drop-shadow(0 0 6px rgba(255,255,255,0.85)); }

/* ── Main header — replaces Shoptimizer's default .main-header col-full ── */
#masthead { background: var(--b2b-hf-blue); border-top: 1px solid rgba(255,255,255,0.12); }
#masthead .main-header {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 24px 18px;
    display: flex;
    align-items: center;
    gap: 30px;
    width: auto;
    float: none;
}
#masthead .site-branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
#masthead .site-branding a { display: flex; align-items: center; }
#masthead .site-branding img { height: 44px; width: auto; display: block; }
#masthead .site-branding .site-title,
#masthead .site-branding .site-title a {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
}

/* Shoptimizer's generic .woocommerce-product-search:before rule
   (main.css ~609-630) draws its own gray magnifier icon absolutely
   positioned at the form's own top-left corner -- meant to overlap a
   plain default WooCommerce search input's left padding. Our pill search
   box has its own real icon-only submit button instead (b2b-searchbar
   button[type=submit] below), and the form's real edge no longer lines
   up with where the visible pill starts (the category dropdown sits
   first), so this leftover theme icon renders detached and floating to
   the left of the whole header bar -- confirmed via a user-provided
   DevTools screenshot 2026-08-13 (form#b2b-search-main.woocommerce-
   product-search.b2b-searchbar-form::before, 18x18, background:#ccc).
   Disabled here, scoped to this specific form class only, so any other
   real .woocommerce-product-search instance elsewhere on the site keeps
   its intended icon. */
#masthead .b2b-searchbar-form:before,
#b2b-mobile-drawer .b2b-searchbar-form:before {
    content: none !important;
    display: none !important;
}

/* Search box -- shared between the main header (#masthead) and the
   off-canvas mobile drawer (#b2b-mobile-drawer), since render_search_form()
   is called in both places with identical markup. */
#masthead .b2b-searchbar,
#b2b-mobile-drawer .b2b-searchbar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    max-width: 398px;
    height: 34px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: none;
}
#masthead .b2b-searchbar form.woocommerce-product-search,
#b2b-mobile-drawer .b2b-searchbar form.woocommerce-product-search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}
#masthead .b2b-searchbar input.search-field,
#b2b-mobile-drawer .b2b-searchbar input.search-field {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    border-right: 1px solid var(--b2b-hf-border);
    border-radius: 0;
    padding: 0 15px 0 20px;
    font-size: 13px;
    color: var(--b2b-hf-text);
    outline: none;
    box-shadow: none;
    font-family: inherit;
    background: transparent;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}
#masthead .b2b-searchbar input.search-field::placeholder,
#b2b-mobile-drawer .b2b-searchbar input.search-field::placeholder { color: #8D8D8D; }
/* .b2b-searchbar__cat is now purely the outer container (border-right
   divider only) -- the previously-native <select>'s visible styling
   (chevron-click-area fixes from earlier the same day) is superseded by
   the .b2b-cat-menu__trigger/__dropdown rules below, which replace the
   native <select> popup with a custom panel matching the Account
   dropdown exactly, per Victoria's explicit request (2026-08-15). The
   real <select> (.b2b-cat-menu__native) still exists for real form
   submission but is now visually hidden, not styled to look like a
   select at all. */
#masthead .b2b-searchbar__cat,
#b2b-mobile-drawer .b2b-searchbar__cat {
    height: 100%;
    flex-shrink: 0;
}

/* WooCommerce's real product-search widget renders a plain
   <button type="submit" class="">Search</button> with no icon and no
   category dropdown -- style the real element (no search-submit class
   exists in the actual markup) and swap its text for an icon via a
   background-image, since the button's text node can't be replaced
   with an inline SVG through CSS alone. */
#masthead .b2b-searchbar button[type="submit"],
#b2b-mobile-drawer .b2b-searchbar button[type="submit"] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 15px;
    height: 100%;
    width: 46px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin: 0;
    font-size: 0;
    color: transparent;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
#masthead .b2b-searchbar button[type="submit"]:hover,
#b2b-mobile-drawer .b2b-searchbar button[type="submit"]:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* Account / wishlist / cart icon group */
#masthead .b2b-header-actions { display: flex; align-items: center; flex-shrink: 0; }
#masthead .b2b-action-group {
    display: flex; align-items: center; gap: 6px;
    padding: 0 18px;
    position: relative;
}
#masthead .b2b-action-group:not(:last-child)::after {
    content: '';
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 22px;
    background: rgba(255,255,255,0.28);
}
#masthead .b2b-action-group:first-child { padding-left: 0; }
#masthead .b2b-action-group:last-child { padding-right: 0; }
#masthead .b2b-action {
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none;
    width: 20px; height: 20px;
    position: relative;
    flex-shrink: 0;
}
#masthead .b2b-action svg { width: 21px; height: 21px; stroke: #fff; flex-shrink: 0; }
#masthead .b2b-action:hover svg { opacity: 0.85; }
#masthead .b2b-cart-badge {
    position: absolute; top: -8px; right: -9px;
    background: var(--b2b-hf-pink); color: #fff;
    font-size: 10px; font-weight: 700;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--b2b-hf-blue);
}
#masthead .b2b-action-chev {
    display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: .8;
    flex-shrink: 0;
    text-decoration: none;
}
#masthead .b2b-action-chev:hover { opacity: 1; }
#masthead .b2b-action-chev svg { width: 10px; height: 10px; }

/* Account trigger + chevron were previously plain <a> tags both linking
   straight to My Account -- no dropdown existed. Converted to <button>
   elements (see SiteHeaderFooter.php render_main_header()) so the real
   dropdown below can be toggled via JS; reset native button chrome so
   they still look identical to the old link-based icons. */
#masthead .b2b-account-trigger {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; cursor: pointer;
}

/* Account dropdown panel -- anchored to .b2b-action-group (already
   position:relative). Toggled via JS (site-header-account.js) adding/
   removing the [hidden] attribute and an .is-open class on the trigger
   group for the chevron-rotate affordance. */
#masthead .b2b-account-menu { position: relative; }
#masthead .b2b-account-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,23,40,.16);
    padding: 6px;
    display: flex;
    flex-direction: column;
    z-index: 60;
}
#masthead .b2b-account-dropdown[hidden] { display: none; }
#masthead .b2b-account-dropdown a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--b2b-hf-text);
    text-decoration: none;
    white-space: nowrap;
}
#masthead .b2b-account-dropdown a:hover { background: var(--b2b-hf-blue-soft); color: var(--b2b-hf-blue); }
#masthead .b2b-account-menu .b2b-action-chev svg { transition: transform .15s ease; }
#masthead .b2b-account-menu.is-open .b2b-action-chev svg { transform: rotate(180deg); }

/* Mini-cart dropdown -- cart icon + chevron were previously plain <a>
   links straight to the cart page with no dropdown, per Victoria's
   request (2026-08-15). Panel styled identically to the Account/Categories
   dropdowns (white card, border-radius, shadow, font) for visual
   consistency across all header dropdowns, plus its own item/summary/
   button layout for the real cart contents. */
#masthead .b2b-mini-cart-trigger {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; cursor: pointer;
}
#masthead .b2b-mini-cart-menu { position: relative; }
#masthead .b2b-mini-cart-menu .b2b-action-chev svg { transition: transform .15s ease; }
#masthead .b2b-mini-cart-menu.is-open .b2b-action-chev svg { transform: rotate(180deg); }
#masthead .b2b-mini-cart-dropdown {
    /* Widened 320px -> 360px (2026-08-16) -- a horizontal scrollbar was
       appearing inside .b2b-mini-cart__items because the item title row
       (product name + Blank/Custom badge) plus the qty/price/breakdown
       meta row didn't reliably have enough room to wrap within 320px on
       longer product names, and no explicit overflow-x guard existed to
       force wrapping instead of letting content scroll sideways. Widening
       the panel gives that content real room instead of fighting it with
       tighter wrapping, and overflow-x:hidden below is a safety net so
       nothing can ever force a horizontal scrollbar again regardless of
       content length. */
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,23,40,.16);
    padding: 14px;
    z-index: 60;
    color: var(--b2b-hf-text);
    overflow-x: hidden;
}
#masthead .b2b-mini-cart-dropdown[hidden] { display: none; }
#masthead .b2b-mini-cart__empty {
    font-size: 13.5px; color: var(--b2b-hf-muted); text-align: center; padding: 12px 0;
}
#masthead .b2b-mini-cart__items {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 280px; overflow-y: auto; overflow-x: hidden;
    margin-bottom: 12px;
}
#masthead .b2b-mini-cart__item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
#masthead .b2b-mini-cart__item:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid var(--b2b-hf-border); }
#masthead .b2b-mini-cart__thumb {
    flex-shrink: 0; display: block; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--b2b-hf-border);
}
#masthead .b2b-mini-cart__thumb img { display: block; width: 52px; height: 52px; object-fit: cover; }
#masthead .b2b-mini-cart__item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
#masthead .b2b-mini-cart__item-titlerow { display: flex; align-items: center; gap: 6px; min-width: 0; }
#masthead .b2b-mini-cart__item-name {
    /* min-width:0 required -- flex items default to min-width:auto, which
       ignores text-overflow:ellipsis and instead grows the item (and its
       row/panel ancestors) to fit the full unwrapped product name, the
       real cause of the horizontal scrollbar this fixes. Same class of
       bug as the 2026-08-15 shop-page swatch-row overflow. */
    min-width: 0;
    font-size: 13px; font-weight: 600; color: var(--b2b-hf-text); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#masthead .b2b-mini-cart__item-name:hover { color: var(--b2b-hf-blue); }
#masthead .b2b-mini-cart__item-meta { font-size: 12px; color: var(--b2b-hf-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Blank vs Customized badge -- same classes/colors as the real cart page
   (assets/css/cart.css .b2b-badge--blank/--custom) copied here rather
   than loading all of cart.css site-wide, since the mini-cart needs this
   in the header on every page, per Victoria's explicit choice
   (2026-08-16) to keep this file scoped to just what it needs. */
#masthead .b2b-badge {
    display: inline-block; flex-shrink: 0;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 5px;
    letter-spacing: .02em; white-space: nowrap;
}
#masthead .b2b-badge--blank { background: #eef2ff; color: #3730a3; }
#masthead .b2b-badge--custom { background: #ecfdf5; color: #065f46; }

/* Size/color breakdown -- previously an inline .b2b-tip hover popup
   anchored to each item's own trigger link, which visually covered
   whatever item rows came after it in the scrollable list (reported
   2026-08-16). Rebuilt as a click-to-swap panel: .b2b-mini-cart__
   breakdown-trigger buttons (one per item, rendered in the loop above)
   each carry that item's breakdown HTML in a data-breakdown attribute;
   clicking one swaps it into ONE shared .b2b-mini-cart__breakdown-panel
   below .b2b-mini-cart__actions (assets/js/site-header-footer.js) --
   always the same fixed spot below the whole panel, per Victoria's
   explicit choice, never overlapping any item row regardless of which
   item's breakdown is open. The inner .b2b-tip__color/__colorhead/__dot/
   __sizes/__pair classes are reused as-is (same swatch+size+qty layout
   as the real cart page), only the outer popup/positioning mechanism
   changed. */
#masthead .b2b-mini-cart__breakdown-trigger {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--b2b-hf-blue); text-decoration: underline; cursor: pointer;
    font: inherit; font-size: 12px;
}
#masthead .b2b-mini-cart__breakdown-panel {
    border-top: 1px solid var(--b2b-hf-border);
    margin-top: 4px; padding-top: 10px; margin-bottom: 12px;
}
#masthead .b2b-mini-cart__breakdown-panel[hidden] { display: none; }
#masthead .b2b-mini-cart__breakdown-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
#masthead .b2b-mini-cart__breakdown-title { font-size: 12.5px; color: var(--b2b-hf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#masthead .b2b-mini-cart__breakdown-close {
    background: none; border: none; padding: 0; margin: 0;
    font-size: 18px; line-height: 1; color: var(--b2b-hf-muted); cursor: pointer;
    flex-shrink: 0;
}
#masthead .b2b-mini-cart__breakdown-close:hover { color: var(--b2b-hf-text); }
#masthead .b2b-mini-cart__breakdown-body {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 160px; overflow-y: auto;
}
#masthead .b2b-tip__color { display: flex; flex-direction: column; gap: 4px; }
#masthead .b2b-tip__color:not(:last-child) { padding-bottom: 8px; border-bottom: 1px solid var(--b2b-hf-border); }
#masthead .b2b-tip__colorhead { display: flex; align-items: center; gap: 6px; }
#masthead .b2b-tip__colorhead strong { color: var(--b2b-hf-text); font-weight: 700; font-size: 12px; }
#masthead .b2b-tip__dot { width: 11px; height: 11px; border-radius: 50%; object-fit: cover; border: 1px solid var(--b2b-hf-border); }
#masthead .b2b-tip__sizes { display: flex; flex-wrap: wrap; gap: 4px 6px; }
#masthead .b2b-tip__pair {
    font-size: 11px; color: var(--b2b-hf-muted);
    background: #f4f6fa; border-radius: 5px; padding: 2px 6px;
    white-space: nowrap;
}
#masthead .b2b-tip__pair em { color: var(--b2b-hf-text); font-style: normal; font-weight: 700; }
#masthead .b2b-mini-cart__summary {
    border-top: 1px solid var(--b2b-hf-border);
    padding-top: 10px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
#masthead .b2b-mini-cart__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--b2b-hf-muted); }
#masthead .b2b-mini-cart__row--total { font-size: 14px; font-weight: 700; color: var(--b2b-hf-text); }
#masthead .b2b-mini-cart__actions { display: flex; gap: 8px; }
#masthead .b2b-mini-cart__btn {
    flex: 1; text-align: center;
    padding: 10px 12px; border-radius: 7px;
    font-size: 13px; font-weight: 700; text-decoration: none;
}
#masthead .b2b-mini-cart__btn--secondary { background: var(--b2b-hf-blue-soft); color: var(--b2b-hf-blue); }
#masthead .b2b-mini-cart__btn--secondary:hover { background: rgba(0,136,204,0.22); }
#masthead .b2b-mini-cart__btn--primary { background: var(--b2b-hf-blue); color: #fff; }
#masthead .b2b-mini-cart__btn--primary:hover { background: var(--b2b-hf-blue-dark); }

/* Categories dropdown -- rebuilt to visually match the Account dropdown
   exactly (same white card, border-radius, shadow, spacing, hover states,
   font) per Victoria's explicit request (2026-08-15). The real category
   filter still works exactly as before -- .b2b-cat-menu__native is the
   same <select name="product_cat" form=""> the search widget's real GET
   submission reads, just visually hidden; this custom trigger+panel only
   drives its value via JS (site-header-footer.js) and never touches the
   actual filtering/submission logic. */
#masthead .b2b-cat-menu,
#b2b-mobile-drawer .b2b-cat-menu { position: relative; }
#masthead .b2b-cat-menu__native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px; height: 1px;
}
#masthead .b2b-cat-menu__trigger {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0 12px; margin: 0;
    height: 100%;
    border-right: 1px solid var(--b2b-hf-border);
    font: inherit; font-size: 12.5px; color: #666;
    white-space: nowrap; flex-shrink: 0; cursor: pointer;
}
#masthead .b2b-cat-menu__label {
    max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
#masthead .b2b-cat-menu__trigger svg { width: 9px; height: 9px; flex-shrink: 0; color: #8D8D8D; transition: transform .15s ease; }
#masthead .b2b-cat-menu.is-open .b2b-cat-menu__trigger svg { transform: rotate(180deg); }
#masthead .b2b-cat-menu__dropdown {
    /* position:fixed (not absolute) -- .b2b-cat-menu sits inside
       .b2b-searchbar, which has overflow:hidden for its own pill-shaped
       clipping (rounded corners around the input/button). An
       absolutely-positioned dropdown is clipped by that ancestor's
       overflow, which is why the panel never visually appeared even
       though the [hidden] attribute/is-open class were toggling correctly
       (reported 2026-08-15: only the chevron rotated). position:fixed
       escapes the clipping ancestor entirely since it's positioned
       relative to the viewport; JS (site-header-footer.js) sets its
       top/left from the trigger's real on-screen position each time it
       opens, since a fixed element can no longer rely on a relative
       ancestor for placement. */
    position: fixed;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,23,40,.16);
    padding: 6px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}
#masthead .b2b-cat-menu__dropdown[hidden] { display: none; }
#masthead .b2b-cat-menu__dropdown a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--b2b-hf-text);
    text-decoration: none;
    white-space: nowrap;
}
/* .is-active (the currently-selected category) shows blue by default, but
   while the mouse is over the dropdown, hovering a DIFFERENT option should
   take over the highlight rather than showing two blue items at once
   (reported 2026-08-15: "All Categories" stayed blue while hovering
   "Caps", both looked selected simultaneously). The :hover rule already
   wins for whichever link the mouse is actually on; this just suppresses
   .is-active's own blue on all OTHER links while any link in the dropdown
   is hovered, so only one item is ever blue while interacting with the
   list -- .is-active still shows blue normally once the mouse leaves the
   dropdown entirely. */
#masthead .b2b-cat-menu__dropdown a:hover { background: var(--b2b-hf-blue-soft); color: var(--b2b-hf-blue); }
#masthead .b2b-cat-menu__dropdown:not(:hover) a.is-active { background: var(--b2b-hf-blue-soft); color: var(--b2b-hf-blue); }

/* Mobile hamburger trigger inside the main header row */
#masthead .b2b-mobile-toggle {
    display: none;
    align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: #fff; width: 24px; height: 24px; flex-shrink: 0;
    padding: 0;
}
#masthead .b2b-mobile-toggle svg { width: 22px; height: 22px; }

/* ── Nav bar ── */
#b2b-navbar { background: #fff; border-bottom: 1px solid var(--b2b-hf-border); }
.b2b-navbar__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
}
.b2b-navlinks { display: flex; align-items: center; gap: 28px; height: 100%; }
.b2b-navlinks ul { display: flex; align-items: center; gap: 28px; height: 100%; list-style: none; margin: 0; padding: 0; }
.b2b-navlinks li { height: 100%; display: flex; align-items: center; }
.b2b-navlinks a {
    color: var(--b2b-hf-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.12px;
    line-height: 16px;
    display: flex; align-items: center; gap: 5px;
    height: 100%;
    border-bottom: 2px solid transparent;
    transition: color .15s;
}
.b2b-navlinks .current-menu-item > a,
.b2b-navlinks .current_page_item > a { color: var(--b2b-hf-blue); border-bottom-color: var(--b2b-hf-blue); }
.b2b-navlinks a:hover { color: var(--b2b-hf-blue); }
.b2b-navlinks li.menu-item-has-children > a::after {
    content: '';
    width: 10px; height: 10px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.b2b-navlinks ul ul { display: none; }

.b2b-navbar__cta {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700;
    color: var(--b2b-hf-text);
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.b2b-navbar__cta:hover { color: var(--b2b-hf-blue); }
.b2b-navbar__cta .b2b-tag {
    background: var(--b2b-hf-green);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* ── Off-canvas mobile nav drawer ── */
#b2b-mobile-drawer {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 290px; max-width: 85vw;
    background: #fff;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
}
#b2b-mobile-drawer.is-open { transform: translateX(0); }
.b2b-mobile-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--b2b-hf-blue);
}
.b2b-mobile-drawer__head img { height: 28px; width: auto; }
.b2b-mobile-drawer__close {
    background: none; border: none; cursor: pointer; color: #fff;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.b2b-mobile-drawer__close svg { width: 18px; height: 18px; }
.b2b-mobile-drawer__search { padding: 16px; border-bottom: 1px solid var(--b2b-hf-border); }
.b2b-mobile-drawer__search .b2b-searchbar { max-width: none; }
.b2b-mobile-drawer__links { list-style: none; margin: 0; padding: 8px 0; }
.b2b-mobile-drawer__links li { border-bottom: 1px solid var(--b2b-hf-border); }
.b2b-mobile-drawer__links ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.b2b-mobile-drawer__links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    color: var(--b2b-hf-text); text-decoration: none;
    font-size: 14.5px; font-weight: 500;
}
.b2b-mobile-drawer__links .current-menu-item > a,
.b2b-mobile-drawer__links .current_page_item > a { color: var(--b2b-hf-blue); font-weight: 700; }
.b2b-mobile-drawer__social { display: flex; gap: 14px; padding: 18px 16px; }
.b2b-mobile-drawer__social a { color: var(--b2b-hf-muted); display: flex; }
.b2b-mobile-drawer__social svg { width: 18px; height: 18px; fill: currentColor; }

#b2b-mobile-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1999;
}
#b2b-mobile-overlay.is-open { display: block; }
body.b2b-mobile-panel-opened { overflow: hidden; }

/* ── Responsive ── */
@media (max-width: 1160px) {
    #masthead .b2b-searchbar { max-width: none; }
}
@media (max-width: 992px) {
    #b2b-utility-bar { display: none; }
    #b2b-announcement-bar { font-size: 11.5px; padding: 7px 32px; }

    #masthead .b2b-mobile-toggle { display: flex; }
    /* height:auto is required here -- Shoptimizer's own theme CSS sets a
       fixed height on .main-header for its normal single-row desktop
       layout (confirmed live via DevTools Computed panel, 2026-08-15:
       height resolved to 70px even at mobile widths). flex-wrap:wrap alone
       does NOT grow a flex container past an explicit height; it just lets
       wrapped content overflow past the container's fixed box instead.
       Since #masthead itself is a plain block element with no height/
       overflow of its own, that overflow was never clipped -- it rendered
       as a second visual row (the mobile search bar, order:4 below) sitting
       ~24-58px below where the header's own box visually ended, directly
       on top of the shop page's "Home / Shop" breadcrumb underneath it.
       This bug pre-dates this session's work entirely; it was only ever
       reproducible at true mobile widths, which nothing had verified live
       with real pixel measurements until this investigation. */
    #masthead .main-header { flex-wrap: wrap; height: auto; padding: 12px 16px 14px; gap: 12px 14px; }
    #masthead .site-branding { order: 2; flex: 1; justify-content: center; align-self: center; }
    #masthead .site-branding img { height: 32px; }
    #masthead .b2b-searchbar { order: 4; flex: 1 1 100%; width: 100%; max-width: none; }
    #masthead .b2b-searchbar__cat { display: none; }
    #masthead .b2b-header-actions { order: 3; gap: 14px; }

    .b2b-navlinks { display: none; }
    .b2b-navbar__inner { justify-content: center; height: auto; padding: 10px 16px; }
}
@media (max-width: 400px) {
    #b2b-announcement-bar { font-size: 10.5px; padding: 7px 28px; }
    #b2b-announcement-bar .b2b-long-copy { display: none; }
    #b2b-announcement-bar .b2b-short-copy { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
#b2b-site-footer { background: #F7F8F9; color: var(--b2b-hf-text); }
#b2b-site-footer a { text-decoration: none; color: inherit; }

.b2b-footer-ribbon { background: var(--b2b-hf-blue); }
.b2b-footer-ribbon-inner {
    max-width: 1320px; margin: 0 auto; padding: 20px 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.b2b-footer-ribbon-inner h3 { color: #fff; font-size: 20px; font-weight: 700; margin: 0; }
.b2b-btn-contact {
    background: #fff; color: var(--b2b-hf-blue) !important;
    font-size: 13px; font-weight: 700;
    padding: 10px 22px; border-radius: 7px;
}
.b2b-btn-contact:hover { background: #F0F5FF; }

.b2b-footer-columns {
    max-width: 1320px; margin: 0 auto; padding: 44px 24px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.b2b-footer-col h4 {
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    margin: 0 0 16px; color: var(--b2b-hf-text);
}
.b2b-footer-col ul { list-style: none; margin: 0 0 14px; padding: 0; }
.b2b-footer-col li { margin-bottom: 9px; }
.b2b-footer-col a { font-size: 13.5px; color: var(--b2b-hf-muted); transition: color .15s; }
.b2b-footer-col a:hover { color: var(--b2b-hf-blue); }
.b2b-footer-contact-item { margin-bottom: 14px; font-size: 13.5px; color: var(--b2b-hf-muted); }
.b2b-footer-contact-item strong { display: block; color: var(--b2b-hf-text); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.b2b-footer-contact-item a { color: var(--b2b-hf-muted); }
.b2b-footer-contact-item a:hover { color: var(--b2b-hf-blue); }
.b2b-footer-social { display: flex; gap: 10px; margin-top: 16px; }
.b2b-footer-social a {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--b2b-hf-blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.b2b-footer-social a:hover { background: var(--b2b-hf-blue-dark); }
.b2b-footer-social svg { width: 14px; height: 14px; fill: currentColor; }

.b2b-footer-newsletter { background: #EEF2F5; }
.b2b-footer-newsletter-inner {
    max-width: 1320px; margin: 0 auto; padding: 26px 24px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.b2b-footer-newsletter-inner h4 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: .03em; }
.b2b-footer-newsletter-inner form { display: flex; gap: 0; flex: 0 1 420px; }
.b2b-footer-newsletter-inner input {
    flex: 1; min-width: 0; border: 1px solid var(--b2b-hf-border); border-right: none;
    border-radius: 6px 0 0 6px; padding: 11px 14px; font-size: 13px; outline: none;
}
.b2b-footer-newsletter-inner button {
    background: var(--b2b-hf-blue); color: #fff; border: none; border-radius: 0 6px 6px 0;
    padding: 0 22px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.b2b-footer-newsletter-inner button:hover { background: var(--b2b-hf-blue-dark); }

.b2b-footer-bottom { background: var(--b2b-hf-blue-dark); }
.b2b-footer-bottom-inner {
    max-width: 1320px; margin: 0 auto; padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.b2b-footer-bottom-inner p { color: rgba(255,255,255,0.7); font-size: 12.5px; margin: 0; }
.b2b-footer-payment-icons { display: flex; gap: 8px; align-items: center; }
.b2b-footer-payment-icons svg { height: 26px; width: 41px; flex-shrink: 0; }

@media (max-width: 900px) {
    .b2b-footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .b2b-footer-columns { grid-template-columns: 1fr; }
    .b2b-footer-ribbon-inner,
    .b2b-footer-newsletter-inner,
    .b2b-footer-bottom-inner { justify-content: center; text-align: center; }
    .b2b-footer-newsletter-inner form { flex-basis: 100%; }
}