/* FEWSET — Search */

/* overflow:hidden removed — js fewsetLockScroll owns the body lock (inline
   position:fixed + overflow:hidden); the redundant CSS lock (with !important)
   caused the open-time scroll-jump. The .ql-search-lock class stays. */

/* ── Triggers ── */
.ql-search-trigger { appearance:none; border:none; background:transparent; color:var(--on-surface-variant); cursor:pointer; padding:var(--spacing-2); display:inline-flex; align-items:center; justify-content:center; transition:color .2s ease; }
.ql-search-trigger:hover { color:var(--on-surface); }
.ql-search-trigger--icon { width:40px; height:40px; }
.ql-search-trigger--headerbar {
    width:100%; max-width:none; justify-content:flex-start; gap:10px;
    padding:11px 16px; margin:0; display:inline-flex; align-items:center;
    border:1px solid rgba(26,26,26,.16); background:transparent; color:var(--neutral-400);
    border-radius:0;
    transition:border-color .2s ease, color .2s ease;
    font-size:13px;
}
.ql-search-trigger--headerbar:hover { border-color:rgba(26,26,26,.5); background:transparent; color:var(--on-surface-variant); }
.ql-search-trigger--headerbar .ql-search-trigger__icon svg { width:17px; height:17px; }
.ql-search-trigger--headerbar .ql-search-trigger__field { font-size:13px; }
.ql-search-trigger__icon { display:inline-flex; align-items:center; justify-content:center; color:inherit; }
.ql-search-trigger__icon svg { width:15px; height:15px; }
.ql-search-trigger__field { display:inline-flex; align-items:center; min-height:1.25rem; font-family:var(--font-primary); font-size:12px; font-weight:400; color:inherit; letter-spacing:0.02em; }
/* Header search = an icon in the actions row (next to the account icon) on all
   breakpoints; the full-width faux field + its row 2 slot are retired. */
.ql-search-trigger--headerbar { display:none; }
.ql-search-trigger--icon { display:inline-flex; }
.ql-header__search-row { display:none !important; }
.ql-search-trigger--inline { gap:var(--spacing-3); padding:var(--spacing-3) var(--spacing-4); border-bottom:1px solid rgba(26,26,26,.10); width:100%; justify-content:flex-start; font-family:var(--font-primary); font-size:var(--body-md); color:var(--neutral-400); border-radius:0; }


/* ═══ ANIMATIONS ═══ */

@keyframes qlFadeUp {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes qlFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}


/* ═══ PANEL — slide down + fade ═══ */

.ql-so {
    position:fixed; left:0; right:0;
    top:var(--ql-search-top, 0px); bottom:0;
    z-index:101;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-6px);
    transition:opacity 220ms cubic-bezier(.4,0,.2,1),
               transform 220ms cubic-bezier(.4,0,.2,1),
               visibility 220ms;
    will-change:opacity, transform;
}
.ql-so.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.ql-so__shell { background:#FFF; height:100%; display:flex; flex-direction:column; }

/* Search bar */
.ql-so__bar { flex-shrink:0; background:#FFF; }
.ql-so__bar-inner, .ql-so__body { width:100%; margin:0 auto; padding-left:clamp(1rem,3vw,2.5rem); padding-right:clamp(1rem,3vw,2.5rem); }
.ql-so__bar-inner { display:flex; align-items:center; gap:var(--spacing-4); padding-top:14px; padding-bottom:14px; border-bottom:1px solid rgba(26,26,26,.06); }
.ql-so__bar-icon { flex-shrink:0; color:var(--neutral-400); transition:color .15s ease; }
.ql-so__input { flex:1; appearance:none; border:none; background:transparent; font-family:var(--font-primary); font-size:max(16px, clamp(1rem,1.2vw,1.15rem)); font-weight:400; color:var(--on-surface); outline:none; line-height:1.4; padding:0; }
.ql-so__input::placeholder { color:var(--neutral-400); }

/* Close X */
.ql-so__close { appearance:none; border:1px solid rgba(26,26,26,.12)!important; background:transparent!important; cursor:pointer; width:36px!important; height:36px!important; border-radius:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; color:#1A1A1A!important; transition:border-color .2s ease, background .2s ease; }
.ql-so__close:hover { border-color:rgba(26,26,26,.3)!important; background:rgba(26,26,26,.03)!important; }
.ql-so__close svg { display:block!important; width:18px!important; height:18px!important; stroke:#1A1A1A!important; pointer-events:none; }

/* Body */
.ql-so__body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:0; padding-bottom:2rem; scroll-behavior:smooth; }


/* ═══ INITIAL — fade-up entrance ═══ */

.ql-so__initial { display:grid; grid-template-columns:320px 1fr; gap:0 2.5rem; align-items:start; animation:qlFadeUp 280ms cubic-bezier(.4,0,.2,1) both; padding-top:1.5rem; }
.ql-so__topline { grid-column:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.ql-so__popular { grid-column:2; min-width:0; overflow:hidden; }
@media(max-width:900px){ .ql-so__initial{grid-template-columns:1fr;gap:1.5rem;} .ql-so__topline,.ql-so__popular{grid-column:1;} }

.ql-so__section { background:transparent; border:0; padding:0 0 1.5rem; min-width:0; }
.ql-so__topline .ql-so__section+.ql-so__section { padding-top:1.25rem; border-top:1px solid rgba(26,26,26,.06); }
.ql-so__section-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* Browse head — desktop: single row; mobile: title row + controls row */
.ql-so__browse-head { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; }
.ql-so__browse-copy { flex:1 1 auto; min-width:0; }

@media(max-width:1024px){
    .ql-so__browse-copy { flex:1 1 100%; margin-bottom:0.25rem; }
}

.ql-so__section-title, .ql-so__browse-eyebrow { font-family:var(--font-primary); font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--neutral-500); margin-bottom:0; }
.ql-so__browse-title { margin:0.15rem 0 0; font-family:var(--font-primary); font-size:clamp(1.25rem,2vw,2rem); font-weight:800; letter-spacing:-0.04em; color:var(--on-surface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


/* ═══ CHIPS ═══ */

.ql-so__chips { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem; }

/* Categories chips: wrap on desktop */

/* Recent searches: ALWAYS wrap, never horizontal scroll */
.ql-so__recent .ql-so__chips { flex-wrap:wrap !important; overflow-x:visible !important; }
.ql-so__chip, .ql-so__tag { appearance:none; border:1px solid rgba(26,26,26,.08); background:#FFF; color:var(--on-surface); cursor:pointer; padding:8px 12px; font-family:var(--font-primary); font-size:12px; font-weight:600; line-height:1.1; transition:border-color .2s ease; }
.ql-so__chip:hover, .ql-so__tag:hover { background:#FFF!important; color:var(--on-surface)!important; border-color:rgba(26,26,26,.2)!important; }
.ql-so__chip--sub { font-weight:500; background:var(--surface-container-low); border-color:rgba(26,26,26,.06); }
.ql-so__chip--sub:hover { background:var(--surface-container-low)!important; border-color:rgba(26,26,26,.15)!important; }
.ql-so__chip-count { font-size:10px; font-weight:400; color:var(--neutral-400); margin-left:4px; }

.ql-so__clear-btn { appearance:none; border:none!important; background:transparent!important; color:var(--on-surface-variant)!important; font-family:var(--font-primary); font-size:11px; font-weight:500; cursor:pointer; padding:2px 0; position:relative; display:inline-block; }
.ql-so__clear-btn:hover { color:var(--on-surface-variant)!important; background:transparent!important; }
.ql-so__clear-btn::after { content:''; position:absolute; bottom:-1px; left:0; width:0; height:1px; background:var(--on-surface-variant); transition:width .3s cubic-bezier(.4,0,.2,1); }
.ql-so__clear-btn:hover::after { width:100%; }

/* Browse back */
.ql-so__browse-back {
    appearance:none; border:1px solid rgba(26,26,26,.15)!important; background:#FFF!important; color:var(--on-surface)!important;
    font-family:var(--font-primary); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    cursor:pointer; padding:8px 14px 8px 10px; display:inline-flex; align-items:center; gap:5px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.ql-so__browse-back::before { content:'‹'; font-size:14px; line-height:1; font-weight:300; }
.ql-so__browse-back:hover { border-color:rgba(26,26,26,.35)!important; box-shadow:0 1px 3px rgba(0,0,0,.06); background:#FFF!important; color:var(--on-surface)!important; }

/* Results back */
.ql-so__results-back {
    appearance:none; border:1px solid rgba(26,26,26,.15)!important; background:#FFF!important; color:var(--on-surface)!important;
    font-family:var(--font-primary); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    cursor:pointer; padding:8px 14px; display:inline-flex; align-items:center; gap:5px; position:relative;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.ql-so__results-back:hover { border-color:rgba(26,26,26,.35)!important; box-shadow:0 1px 3px rgba(0,0,0,.06); background:#FFF!important; color:var(--on-surface)!important; }
.ql-so__results-back::after { display:none; }
.ql-so__results-back svg { flex-shrink:0; }


/* ═══ SLIDER ═══ */

.ql-so__slider-wrap { position:relative; margin-top:0.75rem; overflow:visible; }
.ql-so__slider-nav {
    display:none; position:absolute; top:50%; transform:translateY(-50%) scale(.92);
    z-index:3; width:32px; height:32px;
    border:1px solid rgba(26,26,26,.10); border-radius:0;
    background:rgba(255,255,255,.92); color:var(--on-surface);
    font-size:18px; font-weight:300; line-height:1;
    cursor:pointer; padding:0;
    backdrop-filter:blur(6px);
    transition:opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), border-color .2s ease;
}
.ql-so__slider-nav--prev { left:-16px; }
.ql-so__slider-nav--next { right:-16px; }
@media(min-width:1025px){
    .ql-so__slider-nav { display:grid; place-items:center; opacity:0; }
    .ql-so__slider-wrap:hover .ql-so__slider-nav { opacity:1; transform:translateY(-50%) scale(1); }
    .ql-so__slider-nav:hover { border-color:rgba(26,26,26,.3); }
    .ql-so__slider-nav:active { transform:translateY(-50%) scale(.92); transition-duration:.1s; }
}

ul.products.ql-so__slider { display:flex !important; gap:5px !important; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
ul.products.ql-so__slider::-webkit-scrollbar { display:none; }

/* Fixed-width slider items — .ql-so scope beats shop.css's width:100% !important on li.product */
.ql-so ul.products.ql-so__slider > li.product { flex:0 0 240px !important; width:240px !important; margin:0 !important; }
@media(min-width:1200px){ .ql-so ul.products.ql-so__slider > li.product { flex:0 0 300px !important; width:300px !important; } }
@media(min-width:1600px){ .ql-so ul.products.ql-so__slider > li.product { flex:0 0 360px !important; width:360px !important; } }


/* ═══ PRODUCT CARDS — hover lift + image zoom ═══ */

.ql-so__product-card {
    display:flex; flex-direction:column;
    background:#FFF; border:1px solid rgba(26,26,26,.06);
    text-decoration:none; color:inherit; overflow:hidden;
    transition:border-color .25s ease, box-shadow .3s ease;
}
.ql-so__product-card:hover { border-color:rgba(26,26,26,.14); box-shadow:0 4px 16px rgba(0,0,0,.04); }

.ql-so__product-image { aspect-ratio:3/4; overflow:hidden; background:var(--surface-container-low); }
.ql-so__product-image img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}
.ql-so__product-card:hover .ql-so__product-image img { transform:scale(1.04); }

.ql-so__product-meta { display:flex; flex-direction:column; gap:4px; padding:10px 14px; }
.ql-so__product-name { font-family:var(--font-primary); font-size:13px; font-weight:600; color:var(--on-surface); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ql-so__product-price { color:var(--on-surface-variant); font-family:var(--font-primary); font-size:13px; font-weight:500; }


/* ═══ RESULTS — staggered card entrance ═══ */

.ql-so__results-back-row {
    display:flex; align-items:center; gap:1rem;
    position:sticky; top:0; z-index:5;
    background:#FFF;
    margin-bottom:1rem;
    padding:1rem 0 0.75rem;
    border-bottom:1px solid rgba(26,26,26,.06);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.ql-so__results-back-row.is-hidden { transform:translateY(-100%); }

/* NO transform on results-head — would break sticky */
.ql-so__results-head { display:grid; gap:1.5rem; animation:qlFadeIn 250ms ease both; }
ul.products.ql-so__results-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; list-style:none !important; margin:0 !important; padding:0 !important; }
@media(min-width:1400px){ ul.products.ql-so__results-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;} }

.ql-so__product-card--grid { display:flex; flex-direction:column; animation:qlFadeUp 300ms cubic-bezier(.4,0,.2,1) both; }
.ql-so__product-card--grid:nth-child(2) { animation-delay:30ms; }
.ql-so__product-card--grid:nth-child(3) { animation-delay:60ms; }
.ql-so__product-card--grid:nth-child(4) { animation-delay:90ms; }
.ql-so__product-card--grid:nth-child(5) { animation-delay:120ms; }
.ql-so__product-card--grid:nth-child(6) { animation-delay:150ms; }
.ql-so__product-card--grid .ql-so__product-image { aspect-ratio:3/4; }
mark { background:rgba(26,26,26,.08); color:var(--on-surface); padding:0 2px; }


/* ═══ BROWSE ═══ */

.ql-so__browse { animation:qlFadeIn 250ms ease both; }

/* Sticky header — hides on scroll down */
.ql-so__browse-head {
    position:sticky; top:0; z-index:5;
    background:#FFF;
    padding:1rem 0 0.75rem;
    border-bottom:1px solid rgba(26,26,26,.06);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.ql-so__browse-head.is-hidden { transform:translateY(-100%); }

/* Sticky subcategories — hides on scroll down, -1px overlap kills gap */
.ql-so__browse-subcats {
    position:sticky; top:calc(var(--browse-head-h, 60px) - 1px); z-index:4;
    background:#FFF;
    padding:0.5rem 0 0.75rem; margin-bottom:1rem;
    border-bottom:1px solid rgba(26,26,26,.04);
    animation:qlFadeIn 200ms ease both;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.ql-so__browse-subcats.is-hidden { transform:translateY(calc(-100% - var(--browse-head-h, 60px))); }
.ql-so__browse-head.is-hidden ~ .ql-so__browse-subcats:not(.is-hidden) { top:0; }

.ql-so__browse-subcats .ql-so__chips {
    margin-top:0;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding-bottom:2px;
}
.ql-so__browse-subcats .ql-so__chips::-webkit-scrollbar { display:none; }
.ql-so__browse-subcats .ql-so__chip { flex-shrink:0; white-space:nowrap; }
ul.products.ql-so__product-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; margin:0.5rem 0 0 !important; padding:0 !important; list-style:none !important; }
@media(min-width:1400px){ ul.products.ql-so__product-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;} }
.ql-so__sentinel { height:1px; }
.ql-so__browse-loader { display:flex; align-items:center; justify-content:center; gap:8px; padding:24px 0; font-family:var(--font-primary); font-size:11px; font-weight:500; letter-spacing:0.08em; color:var(--neutral-500); animation:qlFadeIn 200ms ease both; }
.ql-so__empty { display:grid; place-items:center; min-height:140px; color:var(--neutral-500); animation:qlFadeIn 250ms ease both; }
.ql-so__loading { display:grid; place-items:center; min-height:140px; color:var(--neutral-500); animation:qlFadeIn 150ms ease both; }


/* ═══ SCROLL-TO-TOP BUTTON ═══ */

.ql-so__scroll-top {
    position:absolute; bottom:24px; right:24px;
    z-index:10;
    width:40px; height:40px;
    display:grid; place-items:center;
    appearance:none; border:1px solid rgba(26,26,26,.12);
    background:rgba(255,255,255,.94); color:var(--on-surface);
    cursor:pointer; padding:0; border-radius:0;
    backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .25s ease, visibility .25s ease, transform .25s ease, border-color .2s ease;
}
.ql-so__scroll-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.ql-so__scroll-top:hover { border-color:rgba(26,26,26,.3); }
.ql-so__scroll-top svg { display:block; }


/* ═══ MOBILE — block layout, no grid/flex columns ═══ */

@media(max-width:1024px){
    .ql-so { top:0; bottom:0; transform:none; }
    .ql-so.is-open { transform:none; }
    .ql-so__shell { height:100dvh; }
    .ql-so__body { max-height:calc(100dvh - 62px); }

    /*
     * Kill grid + flex-column on mobile.
     * Every ancestor of a horizontal scroller must be display:block
     * so the scroller's width is constrained by the viewport,
     * not expanded by its content. This is why fewset-subcat-scroll works.
     */
    .ql-so__initial { display:block; padding-top:1rem; }
    .ql-so__topline { display:block; }
    .ql-so__popular { display:block; }
    .ql-so__section  { display:block; }

    /*
     * Categories: horizontal scroll track.
     * Mirrors fewset-subcat-scroll__track exactly:
     * flex + nowrap + overflow-x:auto + items with flex:0 0 auto
     */
    .ql-so__categories .ql-so__chips {
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding-bottom:4px;
    }
    .ql-so__categories .ql-so__chips::-webkit-scrollbar { display:none; }
    .ql-so__categories .ql-so__chip {
        flex:0 0 auto;
        white-space:nowrap;
        scroll-snap-align:start;
    }

    /*
     * Product slider: same pattern — flex + overflow-x:auto + fixed-width items.
     */
    ul.products.ql-so__slider {
        display:flex !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }
    ul.products.ql-so__slider::-webkit-scrollbar { display:none; }
    .ql-so ul.products.ql-so__slider > li.product {
        flex:0 0 180px !important;
        width:180px !important;
        scroll-snap-align:start;
        margin:0 !important;
    }

    /* Recent searches: static, always wraps */
    .ql-so__recent .ql-so__chips {
        display:flex;
        flex-wrap:wrap !important;
        overflow-x:visible !important;
    }

    /*
     * Browse subcategories: horizontal scroll track.
     * Same fewset-subcat-scroll pattern.
     */
    .ql-so__browse-subcats .ql-so__chips {
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding-bottom:2px;
    }
    .ql-so__browse-subcats .ql-so__chips::-webkit-scrollbar { display:none; }
    .ql-so__browse-subcats .ql-so__chip {
        flex:0 0 auto;
        white-space:nowrap;
        scroll-snap-align:start;
    }

    /* Grids: controlled by --ql-grid-cols (default 2), 5px gap.
       !important + ul.products specificity to beat shop.css responsive cols. */
    ul.products.ql-so__product-grid, ul.products.ql-so__results-grid {
        grid-template-columns:repeat(var(--ql-grid-cols, 2), minmax(0,1fr)) !important;
        gap:5px !important;
    }

    /* All cards: 3:4 aspect ratio on mobile */
    .ql-so__product-card--grid .ql-so__product-image { aspect-ratio:3/4; }

    /* 1-column card: vertical layout, bigger image */
    .ql-so[style*="--ql-grid-cols: 1"] .ql-so__product-card--grid,
    .ql-so[style*="--ql-grid-cols:1"] .ql-so__product-card--grid {
        flex-direction:column;
    }
    .ql-so[style*="--ql-grid-cols: 1"] .ql-so__product-card--grid .ql-so__product-image,
    .ql-so[style*="--ql-grid-cols:1"] .ql-so__product-card--grid .ql-so__product-image {
        aspect-ratio:3/4; width:100%;
    }

    /* ═══ Column Switcher ═══ */
    .ql-so__cols-switch {
        display:flex; align-items:center; gap:6px; margin-left:auto;
    }
    .ql-so__cols-switch::before {
        content:''; width:1px; height:14px; background:rgba(0,0,0,.12);
        margin-right:4px;
    }
    .ql-so__cols-switch button {
        appearance:none; display:grid; place-items:center;
        width:28px; height:28px; padding:0;
        border:0 !important; background:transparent !important;
        box-shadow:none !important; border-radius:0 !important;
        cursor:pointer; color:rgba(26,26,26,.35);
        transition:color .15s ease;
    }
    .ql-so__cols-switch button.is-active { color:rgba(26,26,26,.9); }
    .ql-so__cols-switch button::before,
    .ql-so__cols-switch button::after { content:none !important; display:none !important; }
    .ql-so__cols-switch button svg { display:block; pointer-events:none; }

    .ql-so__scroll-top { bottom:16px; right:16px; width:36px; height:36px; }

    /* Prevent iOS zoom on input focus */
    .ql-so__input { font-size:16px !important; }
}

/* Hide column switcher on desktop */
@media(min-width:1025px){ .ql-so__cols-switch { display:none; } }
@media(min-width:1025px){ body.admin-bar .ql-so{top:var(--ql-search-top, 0px);} }
@media(max-width:767px){ .ql-so__bar-inner,.ql-so__body{padding-left:5px;padding-right:5px;} }

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
    *, *::before, *::after { animation-duration:0ms!important; transition-duration:0ms!important; }
}

/* ---- Standardized product cards in search (match shop/rail cards) ---- */
.ql-so__product-image { position: relative; overflow: hidden; }

/* glass colour chip on the image (shared .fewset-color-dots design) */
.ql-so__product-image .fewset-color-dots {
    position: absolute; right: 8px; bottom: 8px; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 6px; pointer-events: none; line-height: 1; border-radius: 2px;
    background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.ql-so__product-image .fewset-color-dots i {
    width: 9px; height: 9px; border-radius: 50%; background: var(--c, #ccc);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(26,26,26,.18);
    display: inline-block; flex: 0 0 auto;
}
.ql-so__product-image .fewset-color-dots em { font-style: normal; font-size: 9px; font-weight: 500; letter-spacing: .4px; color: #3a3a3a; }

/* wishlist heart — bare icon, image top-right (matches all cards) */
.ql-so__product-image { cursor: pointer; }
.ql-so__product-image .fewset-wl-heart {
    position: absolute !important; top: 8px; right: 8px; z-index: 4;
    width: 28px !important; height: 28px !important;
    display: grid; place-items: center;
    border: 0 !important; padding: 0 !important; margin: 0 !important;
    background: none !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: #fff; cursor: pointer; transition: transform .2s ease, background .16s ease;
}
.ql-so__product-image .fewset-wl-heart:hover { transform: scale(1.1); background: rgba(20, 20, 20, .48) !important; }
.ql-so__product-image .fewset-wl-heart svg { width: 16px; height: 16px; }
.ql-so__product-image .fewset-wl-heart.is-active svg { fill: #fff; }

/* sale price red (matches loop cards) */
.ql-so__product-price ins { color: #D0021B !important; text-decoration: none; }
.ql-so__product-price del { opacity: .45; }

/* tighter name/price gap */
.ql-so__product-meta { padding-top: 10px; gap: 3px; }

/* same gap as the rail track + shop grid */
.ql-so__results,
[data-ql-search-results],
.ql-so__browse-grid {
    gap: var(--fewset-loop-gap, 14px) !important;
}

/* same type scale as the loop cards */
.ql-so__product-meta { padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ql-so__product-name {
    font-size: 12px !important; font-weight: 400 !important;
    letter-spacing: .4px !important; line-height: 1.4 !important; color: #1a1a1a !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ql-so__product-price {
    font-size: 16px !important; font-weight: 500 !important;
    letter-spacing: .5px !important; line-height: 1.4 !important; color: #1a1a1a !important;
}


/* chip: dynamic width — colours collapse, sizes expand (matches loop cards) */
.ql-so__product-image .fewset-color-dots {
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 16px);
    overflow: hidden;
}
.ql-so__product-image .fewset-color-dots .kcd-colors,
.ql-so__product-image .fewset-color-dots .kcd-sizes {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap; overflow: hidden;
    transition: max-width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.ql-so__product-image .fewset-color-dots .kcd-colors { max-width: 260px; opacity: 1; }
.ql-so__product-image .fewset-color-dots .kcd-sizes  { max-width: 0;     opacity: 0; }
.ql-so__product-image .fewset-color-dots .kcd-lbl {
    text-decoration: none; font-style: normal;
    font-size: 8.5px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: #3a3a3a; margin-right: 2px;
}
.ql-so__product-image .fewset-color-dots .kcd-sizes b {
    font-weight: 500; font-size: 8.5px; letter-spacing: .05em;
    text-transform: uppercase; color: #1a1a1a;
    padding: 3px 4px; border: 1px solid rgba(26, 26, 26, .28);
    background: rgba(255, 255, 255, .65); border-radius: 1px; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
    .ql-so__product-card:hover .fewset-color-dots .kcd-colors:not(:only-child) { max-width: 0; opacity: 0; }
    .ql-so__product-card:hover .fewset-color-dots .kcd-sizes { max-width: 320px; opacity: 1; }
}

/* heart: frosted-glass plate — same recipe as the loop cards / deriniai "+" */
.ql-so__product-image .fewset-wl-heart {
    border: 1px solid rgba(255, 255, 255, .40) !important;
    border-radius: 50% !important;
    background: rgba(20, 20, 20, .30) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.35) !important;
    backdrop-filter: blur(8px) saturate(1.35) !important;
}


/* iOS zooms any focused input under 16px — keep search at 16px on mobile */
@media (max-width: 768px) {
    .ql-so input[type="search"],
    .ql-so input[type="text"],
    .ql-so__input { font-size: 16px !important; }
}


/* ---- Search cards use the SAME typography tokens as the shop loop ------- */
.ql-so .ql-so__product-name {
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: .35px !important;
    color: #1a1a1a !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
}
.ql-so .ql-so__product-price {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .5px !important;
    line-height: 1.35 !important;
    color: #1a1a1a !important;
}
.ql-so .ql-so__product-price ins { color: #D0021B !important; font-weight: 600 !important; text-decoration: none !important; }
.ql-so .ql-so__product-price del { opacity: .4 !important; font-weight: 400 !important; }
@media (max-width: 768px) {
    .ql-so .ql-so__product-name  { font-size: 10px !important; }
    .ql-so .ql-so__product-price { font-size: 12px !important; }
}
/* keep the overlay body from scroll-chaining into the page */
.ql-so__body { overscroll-behavior: contain; }