/* cms2 menu module: header, mega, drawer, footer */

.cms2-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 50;
}
.cms2-header.cms2-sticky { position: sticky; top: 0; }
.cms2-header-in {
    max-width: var(--cms2-max-width, none);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 22px;
    height: 64px;
}
.cms2-header-left, .cms2-header-right { display: flex; align-items: center; gap: 16px; }
.cms2-header-center { display: flex; align-items: center; gap: 26px; flex: 1; justify-content: center; }
.cms2-logo-center .cms2-header-center { justify-content: center; }
.cms2-logo { font-weight: 800; font-size: 20px; text-decoration: none; letter-spacing: .5px; }
/* `width: auto` is load-bearing now that these carry width/height attributes.
   Those attributes are presentational: with only a height in CSS, the width
   attribute becomes the USED width and the logo is stretched or squashed to it.
   Measured after cms_media's stored size for site 2's logo was corrected from a
   stale 120x54 to the real 930x362: the header logo rendered 526x56 instead of
   144x56. The attributes are meant as an aspect-ratio hint and nothing more —
   see cms2_img_dims(). */
.cms2-logo img { height: 38px; width: auto; display: block; }

/* desktop nav — items stretch to the full header height so the hover box
   touches the mega panel below (no dead gap that closes it on slow moves) */
.cms2-header-center { align-self: stretch; }
.cms2-nav { 
    display: flex; 
    /* align-self: stretch; */
    width: 100%; display: flex; justify-content: end
 }
.cms2-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.cms2-nav > ul { align-items: stretch; }
.cms2-nav > ul > li { position: relative; display: flex; }
.cms2-nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 20px 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cms2-nav > ul > li > a:hover { opacity: .65; }

/* simple dropdown */
.cms2-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    min-width: 210px;
    padding: 8px 0 !important;
    flex-direction: column;
    gap: 0 !important;
}
.cms2-nav li.has-children:hover > .cms2-dropdown { display: flex; }
.cms2-dropdown li { position: relative; }
.cms2-dropdown a { display: block; padding: 9px 18px; text-decoration: none; font-size: 14px; }
.cms2-dropdown a:hover { background: #f6f6f6; }
.cms2-dropdown ul {
    display: none;
    position: absolute;
    left: 100%; top: 0;
    background: #fff;
    border: 1px solid #eee;
    min-width: 200px;
    flex-direction: column;
}
.cms2-dropdown li:hover > ul { display: flex; }

/* mega menu: full-width panel */
.cms2-nav li.is-mega { position: static; }
.cms2-mega {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 22px 40px rgba(0,0,0,.10);
    /* small grace period before closing, so brief hover exits don't kill the panel */
    transition: opacity .16s ease .12s, visibility 0s linear .28s;
}
.cms2-nav li.is-mega:hover .cms2-mega {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
.cms2-mega-in {
    max-width: var(--cms2-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    gap: 44px;
    padding: 28px 22px 32px;
}
.cms2-mega-col h5 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
.cms2-mega-col h5 a { text-decoration: none; }
.cms2-mega-col ul { list-style: none; margin: 0; padding: 0; display: block !important; }
.cms2-mega-col li { margin: 6px 0; }
.cms2-mega-col li a { text-decoration: none; font-size: 14px; color: #444; }
.cms2-mega-col li a:hover { color: #000; }
/* Long lists (brands) flow into newspaper columns. break-inside keeps a link
   whole — without it a two-line brand name splits across the column gap. The
   column takes the room it needs instead of an equal flex share, and drops back
   to a single list on narrow viewports, where the panel is already cramped. */
.cms2-mega-col.is-multicol { flex: 0 1 auto; }
.cms2-mega-col.is-multicol > ul {
    columns: var(--cms2-mega-cols, 1);
    column-gap: 44px;
}
/* margin-top:0 is what keeps the three columns level. A multicol container is
   its own BFC, so the first link's 6px top margin is NOT collapsed away the way
   it is in a plain list — but browsers DO truncate it at a column break, so
   column 1 alone sat 6px lower than its neighbours. The 6px bottom margin still
   gives the same gap between links (adjacent margins collapsed to 6px before). */
.cms2-mega-col.is-multicol > ul > li { break-inside: avoid; margin-top: 0; }
@media (max-width: 900px) {
    .cms2-mega-col.is-multicol > ul { columns: 1; }
}
.cms2-mega-img { margin-left: auto; }
.cms2-mega-img img { max-height: 180px; width: auto; border-radius: 8px; }

/* cart + search */
.cms2-cart { display: inline-flex; align-items: center; position: relative; color: inherit; }
.cms2-cart-badge {
    position: absolute;
    top: -4px; right: -8px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d92d20;
    color: #fff;
    font-size: 11px; font-weight: 600; line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}
.cms2-cart-badge:empty { display: none; }
.cms2-search { display: inline-flex; align-items: center; color: inherit; cursor: pointer; }

/* ---------------------------------------------------------- search overlay
   Opened by .cms2-search. z-index 900 clears the header (50), the mega panel
   (150) and the shoplist filter drawer (400); the lightbox at 1000 stays on
   top, and the two are never open together.
   --cms2-searchbox-top is written by site.js from the live header height, so
   the panel docks under the bar on every theme and breakpoint instead of
   guessing at a hardcoded offset. */
.cms2-searchbox {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--cms2-searchbox-top, 64px) + 10px) 20px 20px;
}
.cms2-searchbox[hidden] { display: none; }
.cms2-searchbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    /* blur(0px), not `none`: an omitted filter has no interpolable start value
       in some engines, and the blur would snap in at full strength instead of
       ramping. backdrop-filter must also be named in the transition list — with
       only background-color there, the dim faded but the blur appeared at once. */
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background-color .26s ease,
                backdrop-filter .26s ease,
                -webkit-backdrop-filter .26s ease;
}
.cms2-searchbox.open .cms2-searchbox-backdrop {
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.cms2-searchbox-panel {
    position: relative;
    width: 100%;
    max-width: 955px;
    box-sizing: border-box;
    padding: 36px 36px 30px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    /* The results are as tall as the query makes them, so the panel has to stop
       at the viewport instead of running past the bottom of the screen. Column
       flex so the head (title, form, chips) keeps its height and only the
       results give -- scrolling the whole panel would carry the search field
       out of view while someone is still typing in it. --cms2-searchbox-top is
       the live header height site.js already writes here. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--cms2-searchbox-top, 64px) - 40px);
}

/* Staged entrance: the backdrop dims and blurs first, the panel drops in after.
   -100% is the panel's own height, so it starts fully clear of its resting
   place and travels down into it rather than easing in on the spot. */
@keyframes cms2-searchbox-drop {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes cms2-searchbox-lift {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0; }
}
/* `backwards` is load-bearing, not tidiness: during the 200ms delay an unfilled
   animation leaves the panel at its FINAL position, so it would flash fully
   drawn, jump back up, and only then slide down. */
.cms2-searchbox.open .cms2-searchbox-panel {
    animation: cms2-searchbox-drop .42s cubic-bezier(.16, 1, .3, 1) .2s backwards;
}
/* Exit runs the other way round — panel leaves, then the backdrop clears, so
   the blur is the last thing on screen just as it was the first. */
.cms2-searchbox.closing .cms2-searchbox-panel {
    animation: cms2-searchbox-lift .22s ease-in forwards;
}
.cms2-searchbox.closing .cms2-searchbox-backdrop { transition-delay: .12s; }

.cms2-searchbox-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent;
    color: #000;
    cursor: pointer;
}
/* .cms2-searchbox-close:hover { 
    background: #BE202E; color: white; 
} */
.cms2-searchbox-close svg { width: 20px; height: 20px; display: block; }

.cms2-searchbox-close:hover svg { fill: #BE202E; color: #BE202E; }

.cms2-searchbox-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #000;
    line-height: 140%;
}

/* The submit sits inside the pill: one rounded grey field, button flush right. */
.cms2-searchbox-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 100px;
    background: #f4f4f4;
    border: 1px solid rgba(0,0,0, 0.10);
}
.cms2-searchbox-form:focus-within { border-color: rgba(0,0,0,.15); }
.cms2-searchbox-input::placeholder {
    color: #000;
}
.cms2-searchbox-input {
    flex: 1;
    min-width: 0;              /* a flex item defaults to its min-content width */
    border: 0;
    background: transparent;
    padding: 14px 18px;
    font: inherit;
    font-size: 14px;
    color: #000;
    line-height: 150%;
    outline: none;
}
.cms2-searchbox-input::placeholder { opacity: 1; }
/* WebKit draws its own clear button inside type=search; it collides with the
   submit pill and is not themeable, so it goes. */
.cms2-searchbox-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cms2-searchbox-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 100px;
    padding: 12px 26px;
    background: var(--cms2-accent, #be202e);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.cms2-searchbox-submit:hover { filter: brightness(.88); }
.cms2-searchbox-arrow { width: 30px; height: 10px; display: block; }

.cms2-searchbox-recent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.cms2-searchbox-recent[hidden] { display: none; }
.cms2-searchbox-recent-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 7%;
    text-transform: uppercase;
    color: #8a8a8a;
}
.cms2-searchbox-recent-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cms2-searchbox-chip {
    border: 1px solid var(--cms2-accent, #be202e);
    border-radius: 100px;
    padding: 5px 18px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
}
.cms2-searchbox-chip:hover { background: var(--cms2-accent, #be202e); color: #fff; }

@media (max-width: 620px) {
    .cms2-searchbox { padding-left: 14px; padding-right: 14px; }
    .cms2-searchbox-panel { padding: 28px 18px 22px; }
    /* The pill cannot hold a full-width field and the button side by side on a
       phone, so the button drops to its own row and the field un-pills. */
    .cms2-searchbox-form { flex-direction: column; align-items: stretch; gap: 12px; border-radius: 20px; padding: 12px; }
    .cms2-searchbox-input { padding: 10px 8px; }
    .cms2-searchbox-submit { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cms2-searchbox.open .cms2-searchbox-panel,
    .cms2-searchbox.closing .cms2-searchbox-panel { animation: none; }
    /* the backdrop too — otherwise the panel appears instantly and then sits
       there waiting for a blur it was told not to animate */
    .cms2-searchbox-backdrop { transition: none; }
}

/* burger (hidden on desktop) */
.cms2-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none; border: 0; cursor: pointer;
    padding: 8px;
}
/* `width: 100%` is not decoration. The bars carried no width at all and took
   their size from the flex container's implicit `align-items: stretch`; that
   resolves in Chrome but came back zero-width on iOS Safari, where the burger
   rendered as a plain black circle with no lines in it. An explicit width takes
   the guesswork out — reported from a device, not reproducible here. */
.cms2-burger span { display: block; width: 100%; height: 2px; background: #111; border-radius: 2px; transition: transform .2s, opacity .2s; }
.cms2-burger-dots { gap: 3px; align-items: center; }
.cms2-burger-dots span { width: 4px; height: 4px; border-radius: 50%; }
.cms2-burger.open span:first-child { transform: translateY(7px) rotate(45deg); }
.cms2-burger.open span:last-child { transform: translateY(-7px) rotate(-45deg); }
.cms2-burger-3-lines.open span:nth-child(2) { opacity: 0; }

/* mobile drawer */
/* Mobile drawer — a drill-down stack.
 *
 * Geometry follows onboardstore.com.au, measured rather than eyeballed: the
 * shell carries 8px of padding so the white panel does not meet the screen
 * edge, rows sit on a ~42px pitch at 22px, the chevron is a 24px SQUARE and the
 * close button a 40px one.
 */
.cms2-drawer {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(100vw, 420px);
    padding: 8px;
    background: transparent;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column;
}
.cms2-drawer.open { transform: none; }
/* The panel is the white card inside that padding. */
.cms2-drawer::before {
    content: ""; position: absolute; inset: 8px; z-index: -1;
    background: #fff; box-shadow: 8px 0 30px rgba(0,0,0,.12);
}

/* Logo on the left, close on the right. */
.cms2-drawer-top {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 20px 14px;
}
/* The anchor was already flush with the menu text below it -- both start at the
   drawer's 20px gutter. What pushed the mark right was 20px of padding INSIDE
   the anchor, inherited from the header where the logo sits in a taller bar:
   the <a> measured 153px around a 113px image. Zeroing it puts the artwork on
   the same left edge as SURFBOARDS, which is what reads as aligned. */
.cms2-drawer-top .cms2-logo { display: block; padding: 0; margin: 0; }
.cms2-drawer-top .cms2-logo img { height: 44px; width: auto; display: block; }
.cms2-drawer-close {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; padding: 0;
    border: 0; border-radius: 0;
    background: none; color: #6b6b6b; cursor: pointer;
}
.cms2-drawer-close svg { width: 18px; height: 18px; }

.cms2-drawer-levels { position: relative; flex: 1; overflow: hidden; }
.cms2-drawer ul { list-style: none; margin: 0; padding: 0; }
.cms2-drawer-level {
    position: absolute; inset: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff;
    /* Above the level it covers, and this is NOT belt-and-braces on the opaque
       background. The current page's row carries `position: relative` for its
       accent rule; a positioned sibling with z-index auto paints in DOM order,
       and that row sits LATER in the tree than the sub-panel (which lives inside
       an earlier <li>). So it painted straight through the panel -- and
       elementFromPoint returned it, meaning it was clickable through the panel
       too. One z-index puts each level above the positioned content of the level
       it came from; nesting still works because a level with a z-index is its own
       stacking context, so a deeper panel is compared only inside its parent. */
    z-index: 1;
    padding: 4px 0 24px;
    /* Unrolls from the top rather than sliding in from the side. The sub-panel
       occupies the SAME box as the level it came from — measured on the
       reference, which does not move it horizontally — so a clip reveal is what
       matches: the parent stays put and the child is drawn over it downwards.
       The easing itself could not be captured from the reference (the trace only
       ever caught opacity 0), so this follows the described effect rather than a
       measurement, and is one number to change if it reads too slow or fast. */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .7s cubic-bezier(.33, 1, .68, 1), visibility 0s .7s;
}
.cms2-drawer-levels > .cms2-drawer-level,
.cms2-drawer-level.open {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .7s cubic-bezier(.33, 1, .68, 1), visibility 0s;
}

/* Idle rows are grey and the CURRENT one is ink with an accent rule under it —
   in a list this long that is the only cue telling a reader where they already
   are. The colour goes through --cms2-accent, the variable the search panel
   already uses, so a theme sets it once. */
.cms2-drawer a {
    display: block; padding: 8px 20px;
    text-decoration: none; font-weight: 600;
    font-size: 18px; line-height: 1.5;
    text-transform: uppercase; letter-spacing: 4%;
    color: black;
}
.cms2-drawer a.active { color: #121212; }
/* Pressed feedback, and deliberately NOT the accent rule. That rule answers
   "which page am I on", so a second red line appearing under whatever a thumb
   happens to be touching would leave two on screen and blur the answer.
   Darkening the label says "this registered" without competing with it.
   :active rather than :hover because iOS Safari leaves a hover stuck on the
   last element tapped — the cue would follow the reader around. Scoped to the
   anchor, so pressing a row's chevron does not darken the label beside it. */
.cms2-drawer a:active { color: #121212; }
.cms2-drawer > .cms2-drawer-levels li > a.active,
.cms2-drawer-row:has(> .active) { position: relative; }
.cms2-drawer-row { display: flex; align-items: center; padding-right: 20px; }
.cms2-drawer-row a { flex: 1; }
/* The rule spans the row, so it has to hang off the row when the row is the
   thing that holds the chevron as well as the label. */
.cms2-drawer li > a.active::after,
.cms2-drawer-row:has(> .active)::after {
    content: ""; position: absolute; left: 20px; right: 20px; bottom: 0;
    height: 2px; background: var(--cms2-accent, #be202e);
}
.cms2-drawer li > a.active { position: relative; }
/* The parent row: the whole width is the control, with the chevron at its end.
 *
 * It was a 28px square holding a bare chevron, sitting beside a link — see the
 * note in modules/menu/render.php for why that was the wrong division. The
 * button now carries the label, so every one of these declarations exists to
 * make a <button> look exactly like the `.cms2-drawer a` rows above it: a
 * button inherits none of the page's font, aligns its text centre, and comes
 * with a border and a background of its own.
 *
 * The chevron keeps its own grey rather than the label's ink — it still points
 * onward rather than reading as part of the word. */
.cms2-drawer-expand {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: auto; height: auto;
    padding: 8px 0 8px 20px;
    border: 0; border-radius: 0;
    background: none; cursor: pointer;
    font-family: inherit; font-weight: 600;
    font-size: 18px; line-height: 1.5;
    text-transform: uppercase; letter-spacing: 4%;
    text-align: left; color: black;
    transition: color .2s ease-in-out;
}
/* Same press feedback as a link row, and for the same reason: :active, not
   :hover, because iOS leaves a hover stuck on the last element tapped. */
.cms2-drawer-expand:active,
.cms2-drawer-expand.active { color: #121212; }
.cms2-drawer-expand svg { width: 8px; height: 14px; flex: none; color: #8a8a8a; }
/* Accent ONLY for the current section, never on hover. The row is now a
   full-width target, and iOS leaves a hover stuck on the last element tapped —
   so a hover accent here painted SHOP's chevron red after the reader had come
   back out of it, contradicting the one cue that answers "which section am I
   in". Same reasoning as the :active note above, which is why the label uses
   :active and this does not use :hover at all. */
.cms2-drawer-expand.active svg { color: var(--cms2-accent, #be202e); }

/* No rule under the back row — the reference has none. */
.cms2-drawer-backrow { margin-bottom: 2px; }
.cms2-drawer-back {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 10px 20px;
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600;
    letter-spacing: 4%; text-transform: uppercase; color: #000;
}
.cms2-drawer-back svg {
    width: 14px; height: 14px; transform: rotate(180deg);
    color: var(--cms2-accent, #be202e);
}

.cms2-drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    /* Blurred to match the shop's filter sheet, so the site has one idea of what
       happens behind a panel. The tint eases to .3 because the blur already
       separates the two layers -- keeping .4 on top of it just made the page
       behind look switched off. */
    background: rgba(0,0,0,.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 150;
}
.cms2-drawer-backdrop.open { display: block; }

/* footer */
.cms2-footer { background: #101418; color: #cbd2d9; margin-top: 40px; }
.cms2-footer-in {
    max-width: var(--cms2-max-width, none);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    padding: 44px 22px 30px;
}
.cms2-footer-col h5 { margin: 0 0 12px; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
.cms2-footer-col h5 a { color: #fff; text-decoration: none; }
.cms2-footer-col ul { list-style: none; margin: 0; padding: 0; }
.cms2-footer-col li { margin: 7px 0; }
.cms2-footer-col a { color: #cbd2d9; text-decoration: none; font-size: 14px; }
.cms2-footer-col a:hover { color: #fff; }
.cms2-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: #7b8794;
}

/* responsive */
@media (max-width: 900px) {
    .cms2-nav { display: none; }
    .cms2-burger { display: flex; }
    .cms2-header-in { height: 56px; }
}

/* Column heading inside a flattened mega panel. */
.cms2-drawer-group {
    padding: 14px 22px 4px;
    font-size: 14px; 
    font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: #9a9a9a;
}

/* ---- search panel: live results ------------------------------------------
   Two columns, facets left and products right, per the design. Everything in
   here is written by site.js from /_search; the markup ships empty and hidden,
   because one cached page is served to every visitor and results are per-query.
   Generic, not themed: colours come from --cms2-accent so a site's palette
   drives it, and a site with no search_url never renders any of this. */
.cms2-searchbox-results {
    min-height: 0;              /* a flex item will not shrink below its content */
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 28px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
}
.cms2-searchbox-results[hidden] { display: none; }
.cms2-searchbox-facets { border-right: 1px solid #e6e6e6; padding-right: 24px; }
.cms2-searchbox-facets[hidden] { display: none; }
.cms2-searchbox-facet + .cms2-searchbox-facet { margin-top: 22px; }
.cms2-searchbox-facet[hidden] { display: none; }
.cms2-searchbox-facet-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.cms2-searchbox-facet ul { list-style: none; margin: 0; padding: 0; }
.cms2-searchbox-facet li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}
.cms2-searchbox-facet-count { color: #8a8a8a; font-variant-numeric: tabular-nums; }
.cms2-searchbox-products[hidden] { display: none; }
.cms2-searchbox-scope { margin: 0 0 12px; font-size: 14px; color: #555; }
.cms2-searchbox-scope:empty { display: none; }
.cms2-searchbox-hits { list-style: none; margin: 0; padding: 0; }
.cms2-searchbox-hit {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
}
a.cms2-searchbox-hit:hover .cms2-searchbox-hit-name { color: var(--cms2-accent, #be202e); }
/* Fixed box, object-fit contain: feed images arrive at every aspect and a row of
   differently-shaped thumbs makes the list look broken. */
.cms2-searchbox-hit img {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    object-fit: contain;
    background: #f4f4f4;
}
/* The feed sends no photo for plenty of products (28% of SFH's boards), and a
   row with no thumbnail loses its left column, so the names sit at a different
   indent from the rows above. A neutral box keeps the rhythm and reads as
   "no photo" rather than as a broken image. */
.cms2-searchbox-hit-noimg {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    background: #f4f4f4 no-repeat center / 22px 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 16l-5-5-4 4-2-2-5 5'/%3E%3C/svg%3E");
}
.cms2-searchbox-hit-in { min-width: 0; }          /* a flex item will not shrink below its content */
.cms2-searchbox-hit-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cms2-searchbox-hit-price { 
    display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: var(--cms2-accent, #be202e); 
}
.cms2-searchbox-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cms2-accent, #be202e);
    text-decoration: none;
}
.cms2-searchbox-all[hidden] { display: none; }
.cms2-searchbox-all::after { content: "\2192"; font-size: 16px; }
.cms2-searchbox-empty { grid-column: 1 / -1; margin: 0; font-size: 15px; color: #777; }
.cms2-searchbox-empty[hidden] { display: none; }

@media (max-width: 760px) {
    /* One column: 34% of a phone is not a column, it is a margin. */
    .cms2-searchbox-results { grid-template-columns: 1fr; gap: 20px; }
    .cms2-searchbox-facets { border-right: 0; border-bottom: 1px solid #e6e6e6; padding: 0 0 18px; }
}
/* <mark> is the right element -- it means "highlighted for relevance" -- but its
   default yellow block is not what this is. Weight alone against the row's own
   600 does the work, so the eye lands on the typed part without the list turning
   into a highlighter pen. */
.cms2-searchbox-mark { background: none; color: inherit; font-weight: 800; }
/* Brand logo beside a facet, when the tenant has one. Fixed box with
   object-fit: contain -- these are supplied at every aspect and size, and a row
   of differently-shaped marks reads worse than none. The empty <span> variant
   holds the same width so names still line up on rows whose brand has no logo;
   site.js only emits either when at least one brand in the set has one. */
.cms2-searchbox-facet ul.has-logos li { align-items: center; }
.cms2-searchbox-facet-logo {
    flex: 0 0 auto;
    width: 34px; height: 22px;
    object-fit: contain;
    margin-right: 10px;
}
.cms2-searchbox-facet ul.has-logos .cms2-searchbox-facet-name { flex: 1 1 auto; }
/* A facet that filters the shop is a link; one that cannot stays text. Kept the
   same size and weight either way so the list does not turn into two kinds of
   row -- only the hover says which ones do something. */
a.cms2-searchbox-facet-name { color: inherit; text-decoration: none; }
a.cms2-searchbox-facet-name:hover { color: var(--cms2-accent, #be202e); text-decoration: underline; }