/* ============================================================
   Storefront header v2 — utility bar · main bar · hanging search tab
   Markup: src/Http/Views/storefront/_header.php
   Behaviour: assets/js/storefront-header.js
   The search box itself is .bp-search from storefront.css, untouched —
   "same size and styling as the home-page search" is literal.
   ============================================================ */
.sh-in {
    max-width: 1680px; margin: 0 auto; display: flex; align-items: center;
    padding: 0 calc(24px + env(safe-area-inset-right, 0px)) 0 calc(24px + env(safe-area-inset-left, 0px));
}
.sh-sp { margin-left: auto; }
.sh-util svg, .sh-main svg, .sh-drawer svg {
    width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- utility bar ---- */
.sh-util {
    background: #fff; border-bottom: 1px solid #ece7f5; color: #5b4f75;
    font-size: 0.78rem; font-weight: 500;
    padding-top: env(safe-area-inset-top, 0px);
}
.sh-util .sh-in { min-height: 36px; gap: 18px; }
.sh-util a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sh-util a:hover { color: var(--brand, #7c3aed); }
.sh-util svg { width: 14px; height: 14px; }
.sh-partner { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 800; color: #1e1033; padding-right: 18px; border-right: 1.5px dashed #b3a2dc; }
.sh-partner svg { color: var(--brand, #7c3aed); width: 15px; height: 15px; }
.sh-promo { min-width: 0; color: #3b3352 !important; }
.sh-promo svg { color: var(--brand, #7c3aed); }
.sh-promo-t { overflow: hidden; text-overflow: ellipsis; }
.sh-promo-t b { color: #1e1033; font-weight: 700; }
.sh-promo-cta { color: var(--brand, #7c3aed); font-weight: 700; }
.sh-u svg, .sh-acct svg { color: var(--brand, #7c3aed); }
.sh-acct { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sh-acct a { color: var(--brand, #7c3aed) !important; font-weight: 700; }
.sh-acct b { color: #1e1033; }
.sh-staff { color: #9ca3af !important; opacity: 0.5; }
.sh-staff:hover { opacity: 1; }

/* ---- main bar ---- */
.sh-main {
    position: sticky; top: 0; z-index: 50; background: #fff;
    box-shadow: 0 10px 26px rgba(30, 16, 51, 0.10);
}
.sh-main .sh-in { height: 76px; gap: 22px; position: relative; z-index: 2; background: #fff; }
.sh-logo { display: inline-flex; align-items: center; flex: none; }
.sh-logo img { height: 38px; width: auto; display: block; }
.sh-logo-mark { display: none !important; }
/* Dashed rule between the logo and the departments. */
.sh-div { flex: none; align-self: center; width: 0; height: 30px; border-left: 1.5px dashed #b3a2dc; }
.sh-nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sh-nav a {
    font-size: 0.84rem; font-weight: 600; color: #1e1033; text-decoration: none; white-space: nowrap;
    padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.14s, border-color 0.14s;
}
.sh-nav a:hover, .sh-nav a.is-here { color: var(--brand, #7c3aed); }
.sh-nav a.is-here { border-bottom-color: var(--brand, #7c3aed); }
.sh-tools { display: flex; align-items: center; gap: 18px; flex: none; }
.sh-tdiv { flex: none; width: 0; height: 26px; border-left: 1.5px dashed #b3a2dc; }
.sh-tool {
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600;
    color: #1e1033; text-decoration: none; white-space: nowrap;
}
.sh-tool:hover { color: var(--brand, #7c3aed); text-decoration: none; }
.sh-main .sh-tool svg { width: 20px; height: 20px; }
.sh-cart { gap: 10px; }
.sh-cart [hidden] { display: none !important; }
/* Get a quote — the header's one filled button. */
.sh-quote {
    display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap;
    background: var(--gradient-brand, linear-gradient(135deg, #8b5cf6, #6d28d9)); color: #fff !important;
    font-size: 0.86rem; font-weight: 700; text-decoration: none !important;
    padding: 12px 20px; border-radius: 11px; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.30);
    transition: transform 0.18s, box-shadow 0.18s;
}
.sh-quote:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(124, 58, 237, 0.38); }
.sh-quote:focus-visible { outline: 3px solid var(--brand-focus, rgba(124, 58, 237, 0.35)); outline-offset: 2px; }
.sh-main .sh-quote svg { width: 16px; height: 16px; stroke-width: 2.2; }
.sh-quote-short { display: none; }
.sh-cart b { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.sh-cart-ico { position: relative; display: inline-flex; }
.sh-badge {
    position: absolute; top: -7px; left: 12px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--brand, #7c3aed); color: #fff;
    font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.sh-badge[hidden] { display: none; }   /* display:grid would otherwise beat the hidden attribute */
.sh-burger {
    display: none; border: 0; background: none; padding: 8px; margin-left: -8px; cursor: pointer; color: #1e1033;
}
.sh-main .sh-burger svg { width: 24px; height: 24px; }

/* ---- the hanging tab ----
   .sh-well is a clipped window directly under the bar. The tab sits in it;
   tucking translates the tab upward, out through the window's top edge —
   i.e. up behind the header. */
.sh-well {
    position: absolute; left: 0; right: 0; top: 100%; height: 150px;
    overflow: hidden; pointer-events: none; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
}
.sh-tab {
    position: relative; pointer-events: auto; background: #fff;
    width: calc(100% - 96px); max-width: 592px; padding: 2px 16px 16px;
    border-radius: 0 0 24px 24px;
    filter: drop-shadow(0 12px 12px rgba(30, 16, 51, 0.12));
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
/* Smooth shoulders: the tab's top corners curve outward into the bar. */
.sh-tab::before, .sh-tab::after { content: ""; position: absolute; top: 0; width: 26px; height: 26px; }
.sh-tab::before { left: -26px; background: radial-gradient(circle at 0 100%, rgba(255,255,255,0) 25.5px, #fff 26px); }
.sh-tab::after  { right: -26px; background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 25.5px, #fff 26px); }
.sh-search { max-width: none; background: #faf8ff; border-color: #e3dcf0; box-shadow: none; }
.sh-search:focus-within { border-color: var(--brand, #7c3aed); box-shadow: 0 0 0 4px var(--brand-focus, rgba(124, 58, 237, 0.18)); }
/* The box carries the focus ring (:focus-within above); the bare input must not draw a second one. */
.sh-search input, .sh-search input:focus, .sh-search input:focus-visible { border: 0; outline: 0; box-shadow: none; background: transparent; border-radius: 0; }
.sh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sh-search-btn { display: inline-flex; align-items: center; gap: 7px; }
.sh-main .sh-search-btn svg { width: 15px; height: 15px; stroke-width: 2.4; }

.sh-handle {
    position: absolute; top: 0; left: 50%; pointer-events: none; cursor: pointer;
    transform: translate(-50%, -110%); opacity: 0;
    border: 0; background: #fff; color: var(--brand, #7c3aed);
    font: 700 0.78rem var(--font-main, inherit); padding: 5px 18px 9px; border-radius: 0 0 14px 14px;
    display: inline-flex; align-items: center; gap: 7px;
    filter: drop-shadow(0 8px 8px rgba(30, 16, 51, 0.14));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.sh-main .sh-handle svg { width: 15px; height: 15px; stroke-width: 2.4; }
.sh-handle::before, .sh-handle::after { content: ""; position: absolute; top: 0; width: 12px; height: 12px; }
.sh-handle::before { left: -12px; background: radial-gradient(circle at 0 100%, rgba(255,255,255,0) 11.5px, #fff 12px); }
.sh-handle::after  { right: -12px; background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 11.5px, #fff 12px); }

.sh-main.is-tucked .sh-tab { transform: translateY(-112%); opacity: 0; pointer-events: none; }
.sh-main.is-tucked .sh-handle { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* The tab hangs over the top of the page, so the page starts below it —
   except where a full-bleed hero is meant to sit under the tab (home page). */
.has-sh #sf-main-content { padding-top: 92px; }
.has-sh.sh-overlay #sf-main-content { padding-top: 0; }

/* ---- results: the page itself becomes the grid ---- */
.sh-results { background: var(--bg, #faf8ff); min-height: 60vh; padding: 108px 0 56px; }
.sh-results-in { max-width: 1680px; margin: 0 auto; padding: 0 24px; }
.sh-results-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sh-results-head h2 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: 800; letter-spacing: -0.015em; color: #1e1033; }
.sh-results-head h2 span { color: var(--brand, #7c3aed); }
.sh-live { display: inline-flex; align-items: center; gap: 7px; color: #047857; font-size: 0.78rem; font-weight: 600; }
.sh-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.sh-clear { border: 0; background: none; cursor: pointer; color: var(--brand, #7c3aed); font: 700 0.84rem var(--font-main, inherit); padding: 6px 0; }
/* The cards ARE the landing page's .bp-card (storefront.css) — same markup, same
   styles — laid out as a grid instead of a lane: 6 across, 5 on a laptop. */
.sh-grid { --h: 262; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 24px); }
.sh-grid .bp-card { width: auto; }
.sh-grid .bp-card:hover { transform: translateY(-6px) scale(1.02); }
.sh-grid .bp-card-name { font-size: clamp(0.92rem, 0.8rem + 0.35vw, 1.1rem); }
.sh-grid .bp-card-price { font-size: clamp(0.8rem, 0.74rem + 0.2vw, 0.92rem); }
@media (max-width: 1500px) { .sh-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-none { padding: 28px; border-radius: 16px; background: #fff; border: 1px dashed #d9cdf0; max-width: 620px; }
.sh-none p { margin: 0 0 14px; color: #4b5563; }
.sh-none-cta { display: inline-block; background: var(--gradient-brand, #7c3aed); color: #fff !important; font-weight: 700; padding: 11px 20px; border-radius: 11px; text-decoration: none; }
body.sh-searching #sf-main-content { display: none; }

/* ---- phone drawer ---- */
.sh-drawer { position: fixed; inset: 0; z-index: 80; }
/* The chat bubble (z 10000), cookie notice (9999) and the configurator's
   floating bars sat ON TOP of the open phone menu, covering its links. */
.sh-drawer-open .psc-bubble, .sh-drawer-open .psc-panel, .sh-drawer-open #ps-cookie-banner { display: none !important; }
.sh-drawer-back { position: absolute; inset: 0; background: rgba(30, 16, 51, 0.45); }
.sh-drawer-panel {
    position: absolute; left: 0; top: 0; bottom: 0; width: min(86vw, 340px); background: #fff;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
    box-shadow: 12px 0 40px rgba(30, 16, 51, 0.25);
}
.sh-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.sh-drawer-top img { height: 32px; width: auto; }
.sh-drawer-x { border: 0; background: #f5f1ff; border-radius: 10px; padding: 8px; cursor: pointer; color: #1e1033; }
.sh-drawer .sh-drawer-x svg { width: 20px; height: 20px; }
.sh-drawer-nav { display: flex; flex-direction: column; border-top: 1px solid #ece7f5; }
.sh-drawer-nav a { padding: 13px 2px; font-weight: 700; color: #1e1033; text-decoration: none; border-bottom: 1px solid #f3effa; }
.sh-drawer-quote {
    order: -1; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--gradient-brand, linear-gradient(135deg, #8b5cf6, #6d28d9)); color: #fff !important;
    font-weight: 700; text-decoration: none !important; padding: 13px 16px; border-radius: 12px;
}
.sh-drawer .sh-drawer-quote svg { width: 18px; height: 18px; }
.sh-drawer-top { order: -2; }
.sh-drawer-tools, .sh-drawer-contact { display: flex; flex-direction: column; gap: 2px; }
.sh-drawer-tools a, .sh-drawer-contact a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: #3b3352; font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.sh-drawer .sh-drawer-tools svg, .sh-drawer .sh-drawer-contact svg { width: 18px; height: 18px; color: var(--brand, #7c3aed); }
.sh-drawer-contact { border-top: 1px solid #ece7f5; padding-top: 10px; margin-top: auto; }

/* ---- narrower screens ---- */
@media (max-width: 1240px) {
    .sh-nav { gap: 14px; } .sh-nav a { font-size: 0.8rem; }
    .sh-tools { gap: 14px; } .sh-main .sh-in { gap: 16px; }
    .sh-partner { display: none; }
    .sh-quote { padding: 10px 16px; }
}
/* Small laptops (and any width once a signed-in customer adds "Reorder"): Track and Reorder keep their
   icons and drop their words — still named for a screen reader — so the departments never run under them. */
@media (max-width: 1360px) {
    .sh-tool:not(.sh-cart) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sh-nav { gap: 16px; } .sh-main .sh-in { gap: 18px; } .sh-tools { gap: 14px; }
}
/* 1300, not 1200: the menu reads the category registry and can carry five departments (2026-10-18). */
@media (max-width: 1300px) {
    /* Departments move into the drawer before they start to crowd the tools. */
    .sh-nav, .sh-div { display: none; } .sh-burger { display: inline-flex; }
}
@media (max-width: 720px) {
    .sh-in { padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); }
    .sh-util .sh-in { gap: 12px; min-height: 32px; } .sh-util { font-size: 0.72rem; }
    .sh-u-wide, .sh-promo-cta, .sh-acct-hi, .sh-staff, .sh-partner { display: none !important; }
    .sh-main .sh-in { height: 60px; gap: 12px; }
    /* The full wordmark on a phone too (owner, 2026-10-14) — the "P" mark alone read as a
       placeholder. It takes the room the hidden tool labels free up, and it is the ONE thing on
       the bar allowed to give way: a big running total ($1,234.56) would otherwise push Get a
       quote off the screen. It shrinks, down to a floor where it is still readable. */
    .sh-logo { flex: 0 1 auto; min-width: 0; }
    .sh-logo img { height: 24px; width: auto; max-width: 44vw; min-width: 86px; object-fit: contain; object-position: left center; }
    .sh-tool-wide { display: none; }
    .sh-tool > span:not(.sh-cart-ico) { display: none; } .sh-tools { gap: 12px; }
    /* Quote stays on the bar on a phone — shorter word, smaller pill. */
    .sh-quote { padding: 9px 13px; font-size: 0.78rem; gap: 0; border-radius: 10px; box-shadow: 0 4px 10px rgba(124, 58, 237, 0.28); }
    .sh-tdiv { display: none; }
    .sh-main .sh-quote svg { display: none; }
    .sh-quote-long { display: none; } .sh-quote-short { display: inline; }
    .sh-cart b { font-size: 0.82rem; }
    .sh-tab { width: calc(100% - 60px); padding: 0 10px 10px; border-radius: 0 0 18px 18px; }
    .sh-tab::before, .sh-tab::after { width: 16px; height: 16px; }
    .sh-tab::before { left: -16px; background: radial-gradient(circle at 0 100%, rgba(255,255,255,0) 15.5px, #fff 16px); }
    .sh-tab::after { right: -16px; background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 15.5px, #fff 16px); }
    .sh-search { padding: 5px 5px 5px 14px; border-radius: 14px; gap: 8px; }
    .sh-search input { font-size: 16px; padding: 9px 0; }   /* 16px: iOS zooms the page on anything smaller */
    .sh-search-btn { padding: 10px 12px; font-size: 0; gap: 0; }
    .has-sh #sf-main-content { padding-top: 78px; }
    /* Home hero sits under the tab: make it tall enough that its first line clears the tab. */
    .has-sh.sh-overlay .bp-hero { min-height: calc(clamp(420px, 70vh, 620px) + 36px); }
    .sh-results { padding-top: 92px; } .sh-results-in { padding: 0 14px; }
    .sh-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .sh-live { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-tab, .sh-handle { transition: none; }
}
@media print { .sh-util, .sh-main, .sh-drawer, .sh-results { display: none !important; } }