/* ============================================================
   Storefront header v2 — EMBEDDED on pages that draw their own document
   (the product builder, cart + checkout, single-purpose pages).

   Those pages do not load storefront.css, which is where the header gets
   its tokens and the search box (.bp-search) its look. This sheet supplies
   exactly that and nothing else, so the header reads the same everywhere
   without pulling a whole site stylesheet into a page that was not built
   for it.

   Load AFTER storefront-header.css. The .bp-search block below is a copy of
   the one in storefront.css ("same size and styling as the home-page
   search"); tests/StorefrontHeaderEverywhereTest.php fails if they drift.
   ============================================================ */
.sh-host {
    --brand: #7c3aed; --brand-focus: rgba(124, 58, 237, 0.18);
    --gradient-brand: linear-gradient(135deg, #7c3aed, #5b21b6);
    --shadow-brand: 0 8px 22px rgba(124, 58, 237, 0.32);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text: #1e1033; --subtext: #6b7280; --bg: #faf8ff;
    font-family: var(--font-main); font-size: 16px; line-height: 1.4; color: #1e1033;
    -webkit-font-smoothing: antialiased;
}
.sh-host *, .sh-host *::before, .sh-host *::after { box-sizing: border-box; }
.sh-host a { text-decoration: none; }
.sh-host button { font-family: inherit; }
.sh-host img { max-width: 100%; }

/* ---- copy of storefront.css .bp-search (keep in step) ---- */
.bp-search {
    display: flex; align-items: center; gap: 11px; max-width: 560px;
    background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.85); border-radius: 16px; padding: 7px 7px 7px 18px;
    box-shadow: 0 14px 44px rgba(70,30,130,0.16); transition: box-shadow 0.25s, border-color 0.25s;
}
.bp-search:focus-within { border-color: var(--brand); box-shadow: 0 14px 44px rgba(70,30,130,0.24), 0 0 0 4px var(--brand-focus); }
.bp-search-ico { color: var(--brand); flex-shrink: 0; }
.bp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-main); font-size: 1rem; color: var(--text); padding: 12px 0; }
.bp-search input::placeholder { color: var(--subtext); }
.bp-search-btn {
    flex-shrink: 0; border: 0; cursor: pointer; font-family: var(--font-main); font-weight: 700; font-size: 0.92rem;
    color: #fff; background: var(--gradient-brand); padding: 12px 20px; border-radius: 11px; box-shadow: var(--shadow-brand);
    transition: transform 0.2s var(--ease-spring);
}
.bp-search-btn:hover { transform: translateY(-1px); }

/* ---- the strip under the bar: where-you-are on the page, + the home page's search tab ----
   The full header hangs a big search tab from the bar; on an embedded page that
   would sit on top of the work (a full-screen builder, a payment form). Owner,
   2026-10-14 (mockup option 11, "smaller"): the search is the home page's tab -
   the same white tab with smooth shoulders curving up into the bar, the same
   #faf8ff box, hairline border and Search button with its icon - at about three
   quarters of the size, hung from the middle of the bar. The breadcrumbs are
   NOT in the tab: they sit on the left, straight on the page background.

   The strip keeps its height whatever the tab does - the builder places its
   floats against it (see the slot note below) - so the tab hangs a few pixels
   over the page below, and only the trail and the tab take clicks. It is
   transparent (the page shows through) and sits ABOVE the main bar, so the
   bar's soft shadow falls behind the tab the way it does on the home page. */
.sh-strip { position: relative; z-index: 51; height: 45px; background: transparent; pointer-events: none; }
.sh-stripin { height: 100%; }
.sh-striptabline {
    position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; padding: 0 30px; pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
/* the home page's .sh-tab at ~3/4: padding 2/16/16 -> 2/12/12, radius 24 -> 19, shoulders 26 -> 20 */
.sh-striptab {
    position: relative; pointer-events: auto; background: #fff; padding: 2px 12px 12px;
    border-radius: 0 0 19px 19px; filter: drop-shadow(0 12px 12px rgba(30, 16, 51, 0.12));
}
.sh-striptab::before, .sh-striptab::after { content: ""; position: absolute; top: 0; width: 20px; height: 20px; }
.sh-striptab::before { left: -20px; background: radial-gradient(circle at 0 100%, rgba(255,255,255,0) 19.5px, #fff 20px); }
.sh-striptab::after { right: -20px; background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 19.5px, #fff 20px); }
/* the trail stops short of the tab (half the tab + its shoulder + a gap); the current page truncates */
.sh-crumbs { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(50% - 270px); font-size: 0.8rem; font-weight: 600; color: #6b6180; white-space: nowrap; overflow: hidden; }
.sh-crumbs a { color: #4c3f6b; }
.sh-crumbs a:hover { color: var(--brand); }
.sh-crumbs .sh-crumb-sep { color: #b9abd8; flex: none; }
.sh-crumbs .sh-crumb-here { color: #1e1033; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
/* the home page's search box (.sh-search on .bp-search) at ~3/4: 560 x 59 -> 420 x 44 */
.sh-mini {
    display: flex; align-items: center; gap: 9px; width: 420px; height: 44px;
    padding: 5px 5px 5px 14px; border: 1px solid #e3dcf0; border-radius: 13px; background: #faf8ff; color: var(--brand);
    transition: box-shadow 0.25s, border-color 0.25s;
}
.sh-mini:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-focus); }
.sh-mini svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sh-mini input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 0.88rem var(--font-main); color: #1e1033; height: 100%; }
.sh-mini input::placeholder { color: var(--subtext, #8d83a6); }
.sh-mini input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sh-mini button {
    flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; height: 34px; padding: 0 16px; border-radius: 9px;
    background: var(--gradient-brand); color: #fff; font: 700 0.8rem var(--font-main); box-shadow: var(--shadow-brand);
    transition: transform 0.2s var(--ease-spring, ease);
}
.sh-mini button:hover { transform: translateY(-1px); }
.sh-mini button svg { width: 13px; height: 13px; stroke-width: 2.4; color: #fff; }

/* ---- tuck away on scroll (owner, 2026-09-23: "hide the third and first rail, like we do
   on the landing pages") ----
   Scrolling a product page leaves the main bar and takes the promo row and the strip with it,
   so the page below gets the room. A handle hangs where the tab was, to bring it back. */
/* The strip clips only while tucked: untucked, the tab hangs ~12px below it with its
   rounded corners and drop shadow — clipping it flattened the bottom of the header
   (owner, 2026-09-25: "the bottom of the header appears cut off"). */
.sh-host .sh-util, .sh-host .sh-strip { transition: height 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s; }
.sh-host .sh-util, .sh-host.is-tucked .sh-strip { overflow: hidden; }
.uhdr.sh-host.is-tucked .sh-util, .sh-host.is-tucked .sh-util { height: 0; opacity: 0; border: 0; }
.uhdr.sh-host.is-tucked .sh-strip, .sh-host.is-tucked .sh-strip { height: 0; opacity: 0; }
.sh-host.is-tucked .sh-striptabline { transform: translateY(-120%); opacity: 0; }
/* Hung from the MAIN bar, not the strip: the strip collapses to nothing when tucked, and
   anything inside it goes with it. */
.sh-striphandle {
    position: absolute; left: 50%; top: 100%; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
    border: 0; cursor: pointer; padding: 5px 15px 7px; border-radius: 0 0 13px 13px; background: #fff;
    color: var(--brand); font: 700 0.76rem var(--font-main); box-shadow: 0 8px 16px rgba(30, 16, 51, 0.12);
    transform: translate(-50%, -110%); opacity: 0; pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.sh-striphandle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sh-host.is-tucked .sh-striphandle { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* ---- inside the product builder ----
   The builder is a fixed canvas whose floats are placed against a header slot
   158px tall on desktop and 120px on a phone. The header fills that slot to the
   pixel (37 + 76 + 45 and 33 + 53 + 34), so nothing in the builder moves. The
   slot, not the bar, is what sticks in the builder's scrolling "Everything"
   view. Change either number and change configurator-v2.css with it: the phone
   floats (.dtoggle, .ptitle, .canvas, .cfg2-restore) are placed against it. */
/* transparent, so the strip shows the page; the main bar keeps its own white and the home page's shadow */
.uhdr.sh-host { background: transparent; }
.uhdr.sh-host .sh-main { position: relative; top: auto; }
.uhdr.sh-host .sh-strip { height: 45px; }
/* In the Guided view the builder is a fixed 100vh canvas that scrolls away under the page;
   the header is pinned so it survives that scroll (everything in the builder is placed
   absolutely against .screen, so taking the header out of the flow moves nothing). */
.screen:not(.allopts) .uhdr.sh-host { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
/* The Everything view scrolls the page, so the header sticks; when it tucks, the 82px it gives
   up is handed to the page as padding, or everything under it would jump up by 82px. */
.screen.allopts.hdr-tucked { padding-top: 82px; }
/* The phone menu lives inside the header slot; while it is open the slot rises above the builder's floats and price bar. */
.sh-drawer-open .uhdr.sh-host { z-index: 1000; }
/* A laptop: the search narrows; under 1000px the trail has no room beside the tab and goes. */
@media (max-width: 1200px) {
    .sh-mini { width: 360px; }
    .sh-crumbs { max-width: calc(50% - 240px); }
}
@media (max-width: 1000px) {
    .sh-stripin { display: none; }
}

@media (max-width: 760px) {
    .uhdr.sh-host .sh-util .sh-in { min-height: 32px; }
    .uhdr.sh-host .sh-main .sh-in { height: 53px; }
    /* A phone has no room for a trail, and the owner does not want one there
       (2026-09-23): the tab carries the search alone. */
    .sh-strip { height: 34px; }
    .uhdr.sh-host .sh-strip { height: 34px; }
    .sh-crumbs { display: none; }
    .sh-striptab { padding: 0 8px 8px; border-radius: 0 0 15px 15px; }
    .sh-striptab::before, .sh-striptab::after { width: 14px; height: 14px; }
    .sh-striptab::before { left: -14px; background: radial-gradient(circle at 0 100%, rgba(255,255,255,0) 13.5px, #fff 14px); }
    .sh-striptab::after { right: -14px; background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 13.5px, #fff 14px); }
    .sh-mini { width: min(300px, calc(100vw - 76px)); height: 38px; gap: 7px; padding: 4px 4px 4px 11px; border-radius: 11px; }
    .sh-mini svg { width: 14px; height: 14px; }
    .sh-mini input { font-size: 0.8rem; }
    .sh-mini button { height: 30px; padding: 0 11px; font-size: 0.74rem; gap: 5px; }
    .sh-mini button svg { width: 11px; height: 11px; }
}

/* ---- slim: cart + checkout ----
   A payment page keeps the customer on the payment: logo, a way back, and
   the reassurance line — no departments, no search. */
.sh-slim .sh-main .sh-in { height: 64px; }
.sh-slim-note { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: #065f46; white-space: nowrap; }
.sh-slim-note svg { color: #059669; }
.sh-slim-back { font-size: 0.82rem; font-weight: 700; color: var(--brand) !important; white-space: nowrap; }
@media (max-width: 720px) { .sh-slim-note span { display: none; } }