/**
 * Sparq storefront widget — default layout & card styles.
 *
 * These style the search-ui components the adapter mounts (the facet sidebar,
 * results grid, and the item card <template>). Everything is ordinary CSS on
 * light-DOM classes / documented ::part() hooks — a theme overrides any of it
 * from its own stylesheet (or the BO "Custom CSS" box) with no !important.
 * Brand colors come from the module's --sparq-* tokens (BO Appearance panel).
 *
 * @author    Sparq.ai <support@sparq.ai>
 * @copyright 2026 Sparq.ai
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */

.sparq-hidden { display: none !important; }

/* Floating chrome must clear the theme's sticky header (10000 on Atlantic).
   On :root, not #sparq-widget: the autocomplete host is appended to <body>. */
:root {
    --sparq-z-popup: 10050;
    --sqw-z-overlay: 10040;
    --sqw-z-drawer: 10041;
    --sqw-z-fab: 10042;
}

/* ── Layout: facet sidebar + results ──────────────────────────────────────── */
#sparq-widget .sqw-layout {
    display: grid;
    /* minmax(0,…) so the results column can never be sized by its content. */
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
/* The results column must fill its track. Without this it can settle at its
   content width while the widget is still rendering, collapsing the grid to
   ~49px columns for a moment before snapping to full width (visible flash). */
#sparq-widget .sqw-main {
    min-width: 0;
    width: 100%;
}
#sparq-widget .sqw-sidebar {
    min-width: 0;
}
/* Desktop: the facet panel is pinned and scrolls on its own, so every filter
   stays one gesture away however far the infinite-scroll results run. The panel
   is taller than the viewport, and any single-offset sticky has to sacrifice
   one end of it — pin the top and Availability is unreachable, pin the bottom
   and Brand is. Its own scroll region is the only arrangement that keeps all of
   them reachable without scrolling the products back.
   The scrollbar is deliberately VISIBLE: an earlier attempt hid it, and a panel
   that silently retained its scroll offset read as "the filters won't scroll".
   resetSidebarScroll() returns it to the top on each new search for the same
   reason. Scoped above the drawer breakpoint; the mobile drawer is untouched. */
@media (min-width: 821px) {
    #sparq-widget .sqw-sidebar {
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        /* Keep a wheel over the panel out of the page scroll once it bottoms
           out — the two scrollers must not chain into each other. */
        overscroll-behavior: contain;
        /* Just enough gutter for the hairline; the counts keep their place. */
        padding-right: 6px;
    }
    /* Thin, on-brand, and ALWAYS drawn — the affordance is the whole point, so
       a fading overlay bar is not good enough. Chrome/Safari ignore the
       ::-webkit-scrollbar rules below whenever scrollbar-width/-color are set
       and fall back to an overlay, so those standard properties are given only
       to engines without the pseudo-element (Firefox). */
    @supports not selector(::-webkit-scrollbar) {
        #sparq-widget .sqw-sidebar {
            scrollbar-width: thin;
            scrollbar-color: var(--sparq-color-border, #e3e5e8) transparent;
        }
    }
    #sparq-widget .sqw-sidebar::-webkit-scrollbar {
        width: 3px;
    }
    /* Inset the track so the line stops short of the panel's top and bottom
       edges instead of running the full height. The THUMB's length is the
       browser's, always proportional to how much content is scrolled out of
       view — max-height on it is ignored — so shortening the track is the only
       way to make the bar read shorter. */
    #sparq-widget .sqw-sidebar::-webkit-scrollbar-track {
        background: transparent;
        margin: 24px 0;
    }
    /* At rest the thumb is the same light grey as the facet dividers, so it
       reads as part of the panel rather than browser chrome. Pure white would
       vanish against the panel and take the "this scrolls" cue with it, so it
       stops at the divider tone and only firms up under the pointer. */
    #sparq-widget .sqw-sidebar::-webkit-scrollbar-thumb {
        background: var(--sparq-color-border, #e3e5e8);
        border-radius: 999px;
    }
    #sparq-widget .sqw-sidebar:hover::-webkit-scrollbar-thumb {
        background: var(--sparq-color-text-muted, #c7cbd1);
    }
}
/* Wider facet column once there is room for it: at 250px the longest toggle
   label ("Show In Stock Items Only") wraps to two lines, which reads as a
   cramped column next to a grid that has width to spare. Same breakpoint as
   the 4-up grid, so both changes happen together; narrower screens keep 250px
   because there the results column needs every pixel. */
@media (min-width: 1400px) {
    #sparq-widget .sqw-layout {
        grid-template-columns: 290px minmax(0, 1fr);
    }
}
#sparq-widget .sqw-sidebar sparq-filters,
#sparq-widget .sqw-sidebar sparq-range,
#sparq-widget .sqw-sidebar sparq-toggle {
    display: block;
}

/* ── Collapsible facet sections (accordion, like the native faceted nav) ───── */
#sparq-widget .sqw-facet {
    border-bottom: 1px solid var(--sparq-color-border, #e3e5e8);
    padding: 14px 0;
}
#sparq-widget .sqw-facet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sparq-color-text, #1f2937);
    -webkit-tap-highlight-color: transparent;
}
/* No mouse-click outline box on the header; keep a ring for keyboard users. */
#sparq-widget .sqw-facet-head:focus {
    outline: none;
}
#sparq-widget .sqw-facet-head:focus-visible {
    outline: 2px solid var(--sparq-color-primary, #16367d);
    outline-offset: 2px;
}
#sparq-widget .sqw-facet-body {
    margin-top: 12px;
}
#sparq-widget .sqw-facet--collapsed .sqw-facet-body {
    display: none;
}
/* A facet whose widget rendered nothing: hide our header/divider too, or it
   leaves a labelled empty strip. Set by syncFacetVisibility() after each
   search, so it reappears if the facet has values again. */
#sparq-widget .sqw-facet--empty {
    display: none;
}
/* Caret: a triangle that points up when expanded, down when collapsed. */
#sparq-widget .sqw-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transform: rotate(180deg);
    transition: transform .15s ease;
}
#sparq-widget .sqw-facet--collapsed .sqw-caret {
    transform: rotate(0deg);
}

/* "SHOWING 2599 RESULTS" — uppercase, matching the facet headers. */
#sparq-widget sparq-stats::part(root) {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sparq-color-text, #111827);
}

#sparq-widget .sqw-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
/* Sort control: a bordered dropdown matching the native "Sort by" box. */
#sparq-widget sparq-sort::part(select) {
    border: 1px solid var(--sparq-color-border, #d8dbe0);
    border-radius: 4px;
    padding: 7px 10px 7px 30px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E") no-repeat 9px center;
    color: var(--sparq-color-text, #1f2937);
    cursor: pointer;
}
#sparq-widget sparq-sort::part(label) {
    color: var(--sparq-color-text-muted, #6b7280);
    margin-right: 8px;
}
/* No blue focus box on the sort select; a subtle border colour marks focus. */
#sparq-widget sparq-sort::part(select):focus,
#sparq-widget sparq-sort::part(select):focus-visible {
    outline: none;
    border-color: var(--sparq-color-primary, #16367d);
}

/* ── Active filter chips + clear-all (<sparq-refinements>) ────────────────── */
/* The component renders nothing when no filter is applied, so this whole block
   only costs space once the shopper has refined something. */
#sparq-widget sparq-refinements {
    display: block;
    margin-bottom: 14px;
}
/* The sidebar copy is for the mobile drawer only — on desktop the chips above
   the results already show them, and two copies would be redundant. */
#sparq-widget .sqw-sidebar sparq-refinements {
    display: none;
}
#sparq-widget sparq-refinements::part(list) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
#sparq-widget sparq-refinements::part(chip) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--sparq-color-border, #d8dbe0);
    border-radius: 999px;
    padding: 4px 10px;
    background: #fff;
    font-size: .78rem;
    color: var(--sparq-color-text, #1f2937);
}
#sparq-widget sparq-refinements::part(chip-remove) {
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: var(--sparq-color-text-muted, #6b7280);
}
#sparq-widget sparq-refinements::part(chip-remove):hover {
    color: var(--sparq-color-accent, #cf1f2b);
}
/* Config: activeFilters.showClearAll=false hides the button, chips stay. */
#sparq-widget.sqw-no-clearall sparq-refinements::part(clear-all) {
    display: none;
}
/* Clear-all reads as an action, not another chip. */
#sparq-widget sparq-refinements::part(clear-all) {
    border: 0;
    background: none;
    padding: 4px 2px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: underline;
    color: var(--sparq-color-primary, #16367d);
}

/* ── Results grid (the items widget's list container) ─────────────────────── */
/* Both items widgets are matched because element selectors are exact: the
   widget renders sparq-items-infinite (infinite scroll), and sparq-items would
   silently lose its whole grid if it were ever swapped back in. */
/* The custom element is shrink-to-fit by default; force full width so the grid
   below has a definite width to auto-fill (otherwise the columns collapse). */
#sparq-widget sparq-items,
#sparq-widget sparq-items-infinite {
    display: block;
    width: 100%;
}
/* 3 columns, 4 once the row is wide enough (a 4-up row at 1024px leaves
   146px cards). Below 820px the drawer rules take over at 2 / 1. */
#sparq-widget sparq-items::part(list),
#sparq-widget sparq-items-infinite::part(list) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (min-width: 1400px) {
    #sparq-widget sparq-items::part(list),
    #sparq-widget sparq-items-infinite::part(list) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* The sentinel is a zero-content trigger the observer watches; it must not sit
   inside the grid or it would be laid out as a cell (an empty 3rd column). */
#sparq-widget sparq-items-infinite::part(sentinel) {
    height: 1px;
}

/* ── Product card (the item <template>, light DOM — plain CSS) ─────────────── */
#sparq-widget .sqw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fill the (stretched) grid cell so every card in a row is the same height
       and the price foot always aligns, whatever the product name length. */
    height: 100%;
    border: 1px solid var(--sparq-color-border, #e3e5e8);
    border-radius: var(--sparq-radius, 8px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: transform .16s ease, box-shadow .16s ease;
}
#sparq-widget .sqw-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
}
#sparq-widget .sqw-card-title {
    background: var(--sparq-color-accent, #cf1f2b);
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    /* Bottom spacing is a transparent BORDER, not padding: overflow clips at the
       padding edge, so a 3rd line of a very long title painted half-cut into
       bottom padding. Borders sit outside the clip, and the red background
       still paints under them (background-clip defaults to border-box). */
    padding: 9px 12px 0;
    border-bottom: 9px solid transparent;
    /* Fixed 2-line content height (content-box so padding is excluded) so 1- and
       2-line names give identical card heights — cards no longer resize between
       sorts. line-clamp trims longer names to 2 lines. */
    box-sizing: content-box;
    height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Deliberately NO standard line-clamp: in Chrome 147 it switches the box to
       the new clamp model (display computes to flow-root) and the third line
       paints into the bottom padding. The legacy webkit trio is the behaviour
       every browser agrees on today. */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Fixed image-area height so every card is the same height (a broken image
   would otherwise size to its alt text and make cards uneven); image centered. */
#sparq-widget .sqw-card-imglink {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
}
#sparq-widget .sqw-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Undiscounted: just the price, left-aligned. Discounted: the old price left,
   the sale price right — space-between does both, because the empty <s>
   collapses and leaves the sale price as the only (leading) child. */
#sparq-widget .sqw-card-foot {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    background: var(--sparq-color-card-foot, #111827);
    color: #fff;
    padding: 10px 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Struck-through pre-discount price. transformItems leaves it empty when the
   product isn't discounted, so it collapses instead of rendering a bare "$". */
#sparq-widget .sqw-card-was {
    font-weight: 600;
}
#sparq-widget .sqw-card-was:empty {
    display: none;
}
/* Labels live in CSS, not in the record, so the JS stays language-agnostic and
   a theme can reword them from its own stylesheet. They appear only when there
   IS a discount — an undiscounted card is a bare price with no "PRICE:" label. */
#sparq-widget .sqw-card-was:not(:empty)::before {
    content: "PRICE: ";
}
#sparq-widget .sqw-card-foot:has(.sqw-card-was:not(:empty)) .sqw-card-now::before {
    content: "Sale price: ";
}
#sparq-widget .sqw-card-foot:has(.sqw-card-was:not(:empty)) .sqw-card-now {
    color: var(--sparq-color-sale, #ff4d4f);
}
/* A third-party price widget (financing/instalments) injected into the foot
   sits on its own line under the price. */
#sparq-widget .sqw-card-foot > .as_low_as_plp {
    flex: 0 0 100%;
    font-weight: 400;
}
#sparq-widget .sqw-fav {
    position: absolute;
    top: 40px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sparq-color-accent, #cf1f2b);
    text-decoration: none;
    font-size: 15px;
    z-index: 2;
}
/* Wishlist UI held back (sparq.php WISHLIST_UI_ENABLED = false). */
#sparq-widget.sqw-no-wishlist .sqw-fav {
    display: none;
}
/* Wishlisted: invert to a filled accent heart. Must come AFTER .sqw-fav —
   equal specificity, so file order decides which background wins. */
#sparq-widget .sqw-fav--on {
    background: var(--sparq-color-accent, #cf1f2b);
    color: #fff;
}

/* ── Mobile filter drawer ─────────────────────────────────────────────────────
   Below 820px the sidebar becomes an off-canvas drawer behind a floating filter
   button, because stacked above the results it pushes the first product roughly
   a screen and a half down the page.

   The elements are injected by wireFilterFab() in sparq-adapter.js; the
   :has(.sqw-filter-fab) gate means that if that JS doesn't run (stale cached
   build), the sidebar stays inline rather than becoming an unreachable drawer.
   Raise --sqw-fab-bottom if the theme has a fixed bottom bar for the FAB to
   clear. */
#sparq-widget {
    /* 84px clears a theme's fixed mobile bottom bar; themes without one can
       lower it to ~18px from the BO Custom CSS box. */
    --sqw-fab-bottom: 84px;
}
#sparq-widget .sqw-filter-fab {
    display: none;
    position: fixed;
    right: 18px;
    bottom: var(--sqw-fab-bottom, 18px);
    z-index: var(--sqw-z-fab, 10042);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--sparq-color-primary, #16367d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
#sparq-widget .sqw-filter-fab:active { transform: scale(.94); }
#sparq-widget .sqw-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: var(--sqw-z-overlay, 10040);
}
/* Drawer chrome exists in the DOM at every width; it only shows once the
   sidebar is actually a drawer. */
#sparq-widget .sqw-drawer-head,
#sparq-widget .sqw-drawer-foot { display: none; }

@media (max-width: 820px) {
    #sparq-widget .sqw-layout { grid-template-columns: 1fr; }
    #sparq-widget sparq-items::part(list),
    #sparq-widget sparq-items-infinite::part(list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #sparq-widget .sqw-toolbar { flex-wrap: wrap; gap: 10px; }
    #sparq-widget .sqw-card-imglink { height: 190px; }

    #sparq-widget .sqw-filter-fab { display: flex; }
    /* The FAB sits where the Apply button is; hide it rather than let it cover. */
    #sparq-widget.sqw-drawer-open .sqw-filter-fab { display: none; }

    #sparq-widget:has(.sqw-filter-fab) .sqw-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        /* border-box: the 18px padding must fit inside the 320px, not add to it. */
        box-sizing: border-box;
        width: min(320px, 85vw);
        background: #fff;
        z-index: var(--sqw-z-drawer, 10041);
        padding: 0 18px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, .18);
    }
    #sparq-widget.sqw-drawer-open .sqw-sidebar { transform: translateX(0); }
    #sparq-widget.sqw-drawer-open .sqw-drawer-overlay { display: block; }

    /* Chips inside the drawer: see and undo picks without closing it. */
    #sparq-widget .sqw-sidebar sparq-refinements {
        display: block;
        margin: 14px 0 4px;
    }

    /* Negative margins bleed the sticky header/footer past the sidebar padding. */
    #sparq-widget .sqw-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -18px;
        padding: 14px 18px;
        background: #fff;
        border-bottom: 1px solid var(--sparq-color-border, #e5e7eb);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: .06em;
        font-size: .8rem;
        color: var(--sparq-color-text, #111827);
    }
    #sparq-widget .sqw-drawer-close {
        border: 0;
        background: none;
        font-size: 24px;
        line-height: 1;
        color: var(--sparq-color-text, #374151);
        cursor: pointer;
        padding: 0 2px;
    }
    #sparq-widget .sqw-drawer-foot {
        display: block;
        position: sticky;
        bottom: 0;
        margin: 0 -18px;
        padding: 12px 18px;
        background: #fff;
        border-top: 1px solid var(--sparq-color-border, #e5e7eb);
    }
    /* Facets refine live as they're toggled; Apply only dismisses the drawer. */
    #sparq-widget .sqw-drawer-apply {
        width: 100%;
        border: 0;
        border-radius: var(--sparq-radius, 4px);
        background: var(--sparq-color-primary, #16367d);
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 12px;
        cursor: pointer;
    }
}
/* Don't scroll the results behind an open drawer. */
body:has(#sparq-widget.sqw-drawer-open) { overflow: hidden; }

/* Phones keep 2 columns with compact card text — a single tall column wastes
   the viewport for catalogs with landscape product shots. */
@media (max-width: 480px) {
    #sparq-widget sparq-items::part(list),
    #sparq-widget sparq-items-infinite::part(list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    #sparq-widget .sqw-card-imglink { height: 150px; }
    #sparq-widget .sqw-card-title { font-size: .72rem; }
    #sparq-widget .sqw-card-foot { font-size: .8rem; padding: 8px 10px; }
    #sparq-widget .sqw-fav { top: 36px; right: 8px; }
}

/* ── Instant-search dropdown (<sparq-autocomplete>, every page) ───────────── */
/* The theme's own jQuery-UI autocomplete is destroyed in JS; this hides any
   panel it already rendered (or re-renders) so only our dropdown shows. */
.ui-autocomplete,
.ui-helper-hidden-accessible {
    display: none !important;
}

/* Panel chrome is shadow DOM → ::part(). Cards come from our <template> and
   render in light DOM → ordinary classes. Items of BOTH sections are sibling
   wrappers, told apart only by their slot attribute. */
#sparq-ac sparq-autocomplete::part(panel) {
    width: 640px;
    max-width: 94vw;
    padding: 0 0 4px;
    border-radius: 6px;
}
/* Categories left, products right. The sections host has no ::part, so the two
   sections are laid out inline-block rather than flexing their container. */
#sparq-ac sparq-autocomplete::part(section) {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}
#sparq-ac sparq-autocomplete::part(sqw-sec-cats) {
    width: 32%;
    border-right: 1px solid #eceef1;
    padding-bottom: 14px;
}
#sparq-ac sparq-autocomplete::part(sqw-sec-products) {
    width: 68%;
    padding: 0 8px 0 4px;
}
#sparq-ac sparq-autocomplete::part(section-title) {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .64rem;
    letter-spacing: .06em;
    color: #8a8f98;
    padding: 14px 14px 10px;
}

/* Categories: a roomy vertical list */
#sparq-ac [data-sparq-ac-wrapper][slot="source-0"] {
    display: block;
    width: 100%;
}
#sparq-ac .sqw-ac-cat-link {
    display: block;
    padding: 9px 14px;
    font-size: .82rem;
    line-height: 1.35;
    text-decoration: none;
    /* one line: an over-long category ellipsises rather than wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sparq-color-text, #1f2937);
    cursor: pointer;
}
#sparq-ac .sqw-ac-cat-link:hover {
    color: var(--sparq-color-primary, #16367d);
    text-decoration: underline;
}

/* Products: three bordered cards per row */
#sparq-ac [data-sparq-ac-wrapper][slot="source-1"] {
    display: inline-block;
    width: 33.33%;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0 4px 8px;
}
#sparq-ac .sqw-ac-card {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #e3e5e8;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: var(--sparq-color-text, #1f2937);
}
#sparq-ac .sqw-ac-card:hover {
    border-color: #c9ced6;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}
#sparq-ac .sqw-ac-imgwrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 7px;
    overflow: hidden;
}
#sparq-ac .sqw-ac-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
#sparq-ac .sqw-ac-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    box-sizing: content-box;
    height: 2.4em;
    font-size: .7rem;
    line-height: 1.2;
    font-weight: 700;
}
#sparq-ac .sqw-ac-cat {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: .58rem;
    line-height: 1.25;
    color: #9aa1ab;
}
#sparq-ac .sqw-ac-cat:empty {
    display: none;
}
#sparq-ac .sqw-ac-prices {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
/* only rendered when the product is actually discounted */
#sparq-ac .sqw-ac-was {
    font-size: .68rem;
    font-weight: 700;
    color: var(--sparq-color-text, #1f2937);
}
#sparq-ac .sqw-ac-was:empty {
    display: none;
}
#sparq-ac .sqw-ac-now {
    font-size: .7rem;
    font-weight: 700;
}
/* discounted → the live price goes accent-red, like the native design */
#sparq-ac .sqw-ac-prices:has(.sqw-ac-was:not(:empty)) .sqw-ac-now {
    color: var(--sparq-color-accent, #cf1f2b);
}

/* View all: solid black pill, bottom-left */
#sparq-ac sparq-autocomplete::part(view-all) {
    display: inline-block;
    margin: 2px 14px 12px;
    padding: 8px 13px;
    border: 0;
    border-radius: 3px;
    background: #111;
    text-transform: uppercase;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #fff;
    cursor: pointer;
}
#sparq-ac sparq-autocomplete::part(view-all):hover {
    background: #000;
}

@media (max-width: 640px) {
    #sparq-ac sparq-autocomplete::part(panel) { width: 94vw; }
    #sparq-ac [data-sparq-ac-wrapper][slot="source-1"] { width: 50%; }
}

/* Category description, relocated below the results by the adapter. Spaced
   away from the grid so it reads as page copy rather than another row. */
/* Not scoped to a sibling combinator: the holder is inserted after the widget,
   but the theme can end up with nodes between the two, and an adjacency
   selector then fails silently — leaving the copy full-bleed and unstyled. */
.sqw-category-desc {
    margin: 32px 0 8px;
    padding-top: 24px;
    border-top: 1px solid var(--sparq-color-border, #e3e5e8);
    color: var(--sparq-color-text-muted, #6b7280);
    line-height: 1.6;
    /* Full container width, matching the results grid above it — the copy is
       the merchant's own page content and is authored to that measure. Only
       unbroken strings are reined in, so a pasted URL cannot widen the page. */
    overflow-wrap: break-word;
}
.sqw-category-desc img,
.sqw-category-desc table {
    max-width: 100%;
}
/* Deliberately no display rule here: the theme switches between its desktop
   and mobile copies with !important media queries, and overriding that would
   show both at once (or the wrong one). Width is left to the container. */
.sqw-category-desc #category-description,
.sqw-category-desc #category-description-top {
    max-width: none;
}

/* Breadcrumb + category heading, relocated into the results column so they sit
   over the products rather than over the facet panel. The theme's own spacing
   assumes they are full-width page furniture, so it is trimmed here. */
#sparq-widget .sqw-main > .breadcrumb {
    margin-bottom: 18px;
}
#sparq-widget .sqw-main > #js-product-list-header {
    margin-bottom: 12px;
}
#sparq-widget .sqw-main > #js-product-list-header .block-category {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
#sparq-widget .sqw-main > #js-product-list-header h1 {
    margin: 0;
}
