/* ============================================================================
 * TopTan Wholesale — global shell (Phase 1)
 * Header · footer · category nav · mobile drawer · cookie consent.
 * Reference: design_handoff_toptan_redesign/designs/Homepage.dc.html (header),
 * DESIGN-SYSTEM.md. Loads LAST so it wins over the inherited b2b/fbl overlays.
 *
 * Rules honoured: restyle only — no markup/route/gate/hook changes. Every colour
 * references the Theme-Options palette (--fbl-*/--brand aliases), never hex.
 * Existing class hooks (.b2b-search-btn, .b2b-count, .mini-cart-icon, …) are kept.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Utility bar (desktop) — brand-deep band, muted teal text -> white on hover
 * Design: bg #0D4A46, text #B9D2CF, 12.5px. (bg already correct from b2b layer.)
 * ------------------------------------------------------------------------- */
.b2b-utilitybar {
    background: var(--fbl-brand-deep);
    font-size: 12.5px;
}
.b2b-utilitybar,
.b2b-utilitybar .b2b-utils > li {
    color: color-mix(in srgb, #ffffff 74%, var(--fbl-brand-deep));   /* ~#B9D2CF */
}
/* !important to beat b2b.css's hardcoded `.b2b-utilitybar a { color:#c3cbdb !important }` */
.b2b-utilitybar a { color: color-mix(in srgb, #ffffff 74%, var(--fbl-brand-deep)) !important; font-weight: 500; transition: color .15s ease; }
.b2b-utilitybar a:hover,
.b2b-utilitybar a:focus-visible { color: #fff !important; }
.b2b-utilitybar .b2b-utils-hotline strong { color: #fff; }

/* ---------------------------------------------------------------------------
 * 2. App bar — white, 1px bottom border
 * ------------------------------------------------------------------------- */
.b2b-appbar {
    position: relative;
    z-index: 2;
    background: var(--fbl-surface);
    border-bottom: 1px solid var(--fbl-border);
}
.b2b-appbar .b2b-search {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* ---------------------------------------------------------------------------
 * 3. Search bar — joined select(where present) + input + brand button.
 * Design: input border #C9D3D0, focus brand + tint ring; button brand,
 * radius on the outer corners only, weight 600, hover brand-deep.
 * ------------------------------------------------------------------------- */
/* Reset the inherited b2b "pill with inner button" into joined segments.
 * Selectors match/beat b2b.css (.b2b-appbar .b2b-search .form--quick-search…)
 * and its !important input rules. */
.b2b-appbar .b2b-search .b2b-search-form,
.b2b-appbar .b2b-search .form--quick-search.b2b-search-form {
    position: relative;
    display: flex;
    align-items: stretch;
    height: auto;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    isolation: isolate;
}
.b2b-appbar .b2b-search .b2b-search-form:focus-within {
    background: transparent;
    border: 0;
    border-radius: var(--r-control);
    box-shadow: 0 0 0 2px var(--fbl-brand-tint-2);
}
/* input = middle/left segment with its own border */
.b2b-appbar .b2b-search-form .input-search-product,
.b2b-appbar .b2b-search-form .b2b-search-input {
    /* Override the base theme's breakpoint-specific fixed input widths. The
       flexible input consumes the available form width without displacing the
       fixed search button when focus styles are applied. */
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    border: 1px solid var(--fbl-border-strong) !important;
    border-inline-end: 0 !important;
    border-radius: var(--r-control) 0 0 var(--r-control);
    background: var(--fbl-surface) !important;
    box-shadow: none !important;
    /* Base theme leaks `margin: 0 20px` onto .search-style-2 inputs, which shoves
       the input off the form's start edge — leaving the absolute search glyph
       stranded in the gap. Zero it so the input aligns and the glyph sits in the
       40px leading padding. */
    margin: 0 !important;
    /* Logical padding so the 40px glyph gutter is on the reading-start side in
       both LTR and RTL (beats rtl.css's blanket `input{padding-right:20px}`). */
    padding-block: 0 !important;
    padding-inline: 40px 14px !important;
    font-size: var(--fs-body);
    font-family: var(--font-text);
    color: var(--fbl-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.b2b-appbar .b2b-search-form .input-search-product::placeholder { color: var(--fbl-ink-3); }
.b2b-appbar .b2b-search-form .input-search-product:focus {
    outline: none;
    border-color: var(--fbl-brand) !important;
    box-shadow: none !important;
}
/* leading search glyph, anchored to the form's logical start (= input start) */
.b2b-appbar .b2b-search .b2b-search-icon {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fbl-ink-3);
    font-size: 20px;
    z-index: 2;
    pointer-events: none;
}
/* The Material-Symbols glyph is forced direction:ltr, so inset-inline-start
   resolves to the physical LEFT even under RTL. Pin it to the right in RTL. */
body[dir="rtl"] .b2b-appbar .b2b-search .b2b-search-icon {
    inset-inline-start: auto;
    left: auto;
    right: 13px;
}
/* category <select> (when the option is enabled) becomes the left cap */
.b2b-appbar .b2b-search-cats { flex: 0 0 auto; }
.b2b-appbar .b2b-search-cats::after { display: none; }
.b2b-appbar .b2b-search-cats select.product-category-select {
    height: 44px;
    max-width: 150px;
    border: 1px solid var(--fbl-border-strong);
    border-inline-end: 0;
    border-radius: var(--r-control) 0 0 var(--r-control);
    background: var(--fbl-bg);
    color: var(--fbl-ink-2);
    font-size: 13px;
    padding: 0 10px;
}
.b2b-appbar .b2b-search-form:has(.b2b-search-cats) .input-search-product {
    border-radius: 0;
    padding-inline-start: 14px !important;  /* no leading glyph when the category cap is shown */
}
.b2b-appbar .b2b-search-form:has(.b2b-search-cats) .b2b-search-icon { display: none; }
/* button = right segment, joined corners only */
.b2b-appbar .b2b-search .b2b-search-btn,
.b2b-appbar .b2b-search .b2b-search-btn.btn {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 84px;
    height: auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fbl-brand);
    border-radius: 0 var(--r-control) var(--r-control) 0;
    padding: 0 22px;
    background: var(--fbl-brand);
    color: #fff;
    font-size: var(--fs-body);
    font-weight: 600;
    font-family: var(--font-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    position: relative;
    inset: auto;
    transform: none;
    z-index: 1;
    white-space: nowrap;
}
.b2b-appbar .b2b-search .b2b-search-btn:hover,
.b2b-appbar .b2b-search .b2b-search-btn.btn:hover,
.b2b-appbar .b2b-search .b2b-search-btn:focus-visible {
    background: var(--fbl-brand-deep);
    border-color: var(--fbl-brand-deep);
    opacity: 1;
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * 4. App-bar action icons — square hit area, subtle hover fill (design hover
 *    #F4F6F5). Count badges keep their existing .b2b-count hook.
 * ------------------------------------------------------------------------- */
.b2b-appbar-actions .b2b-action > a,
.b2b-mobilebar .b2b-action > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: var(--r-control);
    color: var(--fbl-ink);
    transition: background .15s ease, color .15s ease;
}
.b2b-appbar-actions .b2b-action > a:hover,
.b2b-mobilebar .b2b-action > a:hover {
    background: color-mix(in srgb, var(--fbl-bg) 55%, var(--fbl-border));
    color: var(--fbl-brand);
}
.b2b-appbar-actions .b2b-action .material-symbols-outlined { font-size: 23px; }

/* Become-a-Vendor / Vendor-Panel CTA — secondary outline button per design */
.b2b-cta-vendor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fbl-brand);
    color: #fff !important;
    border: 1.5px solid var(--fbl-brand);
    border-radius: var(--r-control);
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    margin-inline-start: 8px;
    transition: background .15s ease, color .15s ease;
}
.b2b-cta-vendor:hover { background: var(--fbl-brand-deep); color: #fff !important; }
.b2b-cta-vendor .material-symbols-outlined { font-size: 19px; color: inherit; }

/* Account avatar fallback — brand-teal initial circle. Botble's generated default
   avatar_url uses random hashed background colours (e.g. bright green), which look
   off-brand in the header; show a clean teal initial when there's no real photo. */
.b2b-avatar-initial {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fbl-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}
/* Legacy style.css `.header-action-icon-2 > a span` (0,1,2) paints every action
   glyph in --color-body; the account markup keeps that class for JS hooks, so it
   drags the initial dark. Win the colour (and font-size) back with a scoped rule
   that beats it, keeping the profile initial white-on-teal. */
.b2b-appbar-actions .b2b-action > a .b2b-avatar-initial,
.b2b-mobilebar .b2b-action > a .b2b-avatar-initial {
    color: #fff;
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * 5. Category nav row — 13.5px/500 ink-2 links, hover brand + 2px underline;
 *    "All categories" reads brand/600. Design: Homepage.dc.html lines 50-55.
 * ------------------------------------------------------------------------- */
.b2b-navbar {
    position: relative;
    z-index: 1;
    background: var(--fbl-surface);
    border-bottom: 1px solid var(--fbl-border);
}
.b2b-mainmenu nav > ul > li > a,
.b2b-mainmenu nav a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fbl-ink-2);
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.b2b-mainmenu nav > ul > li > a:hover,
.b2b-mainmenu nav > ul > li.current-menu-item > a,
.b2b-mainmenu nav > ul > li.active > a {
    color: var(--fbl-brand);
    border-bottom-color: var(--fbl-brand);
}
.b2b-browse-btn { color: var(--fbl-brand); font-weight: 600; font-size: 13.5px; }
.b2b-browse-btn .b2b-browse-label { font-weight: 600; }

/* trust pill (kept — existing element) */
.b2b-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fbl-brand);
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 6. Account / cart dropdown panels — card surface, soft border + hover shadow
 * ------------------------------------------------------------------------- */
.b2b-action .account-dropdown,
.b2b-action .cart-dropdown-panel {
    border: 1px solid var(--fbl-border);
    border-radius: var(--r-card);
    background: var(--fbl-surface);
    box-shadow: var(--shadow-hover);
}
.b2b-appbar .b2b-action .account-dropdown ul li { display: block; width: 100%; }
.b2b-appbar .b2b-action .account-dropdown ul li a { display: flex !important; width: 100% !important; box-sizing: border-box; color: var(--fbl-ink); font-size: 13.5px; }
.b2b-action .account-dropdown ul li a:hover { color: var(--fbl-brand); background: var(--fbl-brand-tint); }

/* ---------------------------------------------------------------------------
 * 7. Footer — dark #12201E band, 12px uppercase white headings, muted links.
 * Design: Homepage.dc.html lines 173-193. bg already correct from b2b layer.
 * ------------------------------------------------------------------------- */
.b2b-footer { background: var(--fbl-footer-bg); color: var(--fbl-on-footer-muted); }
/* Same specificity as b2b.css's `.b2b-footer .footer-link-widget .widget-title`
 * (which set dark on-surface ink — illegible on the dark footer). Later cascade wins. */
.b2b-footer .footer-link-widget .widget-title,
.b2b-footer .widget-title,
.b2b-footer .footer-title {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.b2b-footer a,
.b2b-footer .b2b-footer-cols a {
    color: var(--fbl-on-footer-muted);
    font-size: 13px;
    transition: color .15s ease;
}
.b2b-footer a:hover,
.b2b-footer .b2b-footer-cols a:hover { color: #fff; }
.b2b-footer .widget-about p,
.b2b-footer .text-heading,
.b2b-footer .contact-infor li { color: var(--fbl-on-footer-muted); font-size: 13px; }
.b2b-footer-bottom-wrap { border-top: 1px solid var(--fbl-footer-border); }
.b2b-footer-copy,
.b2b-footer-bottom { color: var(--fbl-on-footer-muted); font-size: 12px; }

/* ---------------------------------------------------------------------------
 * 8. Breadcrumb / page-title bar — surface strip, muted trail, brand active.
 * ------------------------------------------------------------------------- */
.page-header.breadcrumb-wrap { background: var(--fbl-bg); border-bottom: 1px solid var(--fbl-border); }
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a { color: var(--fbl-ink-3); font-size: 13px; }
.breadcrumb .breadcrumb-item a:hover { color: var(--fbl-brand); }
.breadcrumb .breadcrumb-item.active { color: var(--fbl-ink); }
.archive-header .mb-15,
.page-header .archive-header h1 { color: var(--fbl-ink); }

/* ---------------------------------------------------------------------------
 * 9. Cookie consent (plugins/cookie-consent) — surface card, brand agree,
 *    secondary reject/customize. Classes: .site-notice__*. Wired to the
 *    plugin's own consent storage (JS untouched — js-* hooks preserved).
 * ------------------------------------------------------------------------- */
/* The plugin themes through var(--cc-primary), which it emits inline from
 * theme_option('primary_color'). That option is set to the brand (#115E59) for
 * this theme (see setup), so accept/customize/modal all render brand — no CSS
 * override needed. Belt-and-suspenders for the checkbox accent + message link: */
.site-notice__message a { color: var(--fbl-brand); }
.cookie-category input,
.site-notice input[type="checkbox"] { accent-color: var(--fbl-brand); }

/* ---------------------------------------------------------------------------
 * 10. Mobile drawer — brand accents on the existing b2b-drawer-* structure.
 * ------------------------------------------------------------------------- */
.b2b-drawer-login,
.b2b-drawer-switch { background: var(--fbl-brand); color: #fff !important; border-radius: var(--r-control); }
.b2b-drawer-login:hover,
.b2b-drawer-switch:hover { background: var(--fbl-brand-deep); color: #fff !important; }
.b2b-drawer-switch .material-symbols-outlined { color: inherit; }
.b2b-drawer-item:hover { background: var(--fbl-brand-tint); color: var(--fbl-brand); }
.b2b-drawer-badge { background: var(--fbl-brand); color: #fff; border-radius: var(--r-pill); }
.b2b-drawer-label { color: var(--fbl-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600; }