/* ==========================================================================
   GV Search Results Body — gv-search-body.css
   Location: Pages/Search Results Page/css/gv-search-body.css
   Shortcodes: [gv_search_results_body] · [gv_search_page]
   ========================================================================== */

/* ==========================================================================
   GV SEARCH PAGE — canonical two-column layout [gv_search_page]
   Sidebar-left (filters) + Right-col (hero stacked above grid)
   Each section is a distinct rounded card with border + subtle bg.
   ========================================================================== */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.gv-sp-page {
    min-height: 100vh;
    padding: 1em 2rem; /* 1em top/bottom · 2rem left/right */
}

/* ── Two-column grid — fills full available width ────────────────────────── */
.gv-sp-layout {
    display:               grid;
    grid-template-columns: 18rem 1fr;
    grid-template-rows:    auto 1fr;
    gap:                   1em;
    width:                 100%;
    align-items:           flex-start;
    transition:            grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gv-sp-layout.is-filters-hidden {
    grid-template-columns: 0px 1fr;
    gap:                   0px;
}
.gv-sp-layout.is-filters-hidden .gv-sp-col--sidebar {
    opacity:    0;
    visibility: hidden;
    transform:  translateX(-2rem);
}

/* ── Sidebar column — spans both rows, viewport-locked with internal scroll ── */
.gv-sp-col--sidebar {
    grid-row:            1 / 3;
    position:            sticky;
    /* Dynamic: JS writes --gv-header-h; fallback = 6.5em (default header) + 1em gap */
    top:                 calc(var(--gv-header-h, 6.5em) + 1em);
    max-height:          calc(100vh - var(--gv-header-h, 6.5em) - 2em);
    overflow-y:          auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.1) transparent; /* Firefox */

    /* Card styling */
    background:    #13152a;
    border:        1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    padding:       1.5rem 1.25rem;
    width:         18rem; /* Lock width to prevent squishing during animation */
    transition:    top 0.3s ease, max-height 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.4s;
}
.gv-sp-col--sidebar::-webkit-scrollbar {
    width: 4px;
}
.gv-sp-col--sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.gv-sp-col--sidebar::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.1); /* very subtle normally */
    border-radius: 2px;
    transition: background 0.3s ease;
}
/* Fully visible on hover */
.gv-sp-col--sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.5);
}

/* ── Main column — two rows stacked ──────────────────────────────────────── */
.gv-sp-col--main {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    min-width:      0;
}

/* ── Hero wrap — card ─────────────────────────────────────────────────────── */
.gv-sp-hero-wrap {
    min-width:     0;
    border-radius: 1rem;
    overflow:      hidden; /* clips art panel safely within the card */
    border:        1px solid rgba(255,255,255,0.07);
}

/* ── Grid wrap — card ─────────────────────────────────────────────────────── */
.gv-sp-grid-wrap {
    min-width:     0;
    background:    #13152a;
    border:        1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    overflow:      hidden;
}

/* ── Strip inner shortcode wrappers — layout is handled above ─────────────── */
.gv-sp-col--sidebar .gv-sr-body--sidebar-only,
.gv-sp-col--sidebar .gv-sr-sidebar {
    position:   relative;
    top:        0;
    width:      100%;
    max-height: none;
    overflow:   visible;
    background: transparent;
    border:     none;
    padding:    0;
}

/* Hero: reset outer margin/padding, shrink art panel for compact card layout */
.gv-sp-hero-wrap .gv-sr-hero {

    /* Override art size: 22rem → 13rem — animation stays, card gets shorter */
    --gv-sr-art-size: 13rem;
}

/* Scale the orb and core down to match the smaller panel */
.gv-sp-hero-wrap .gv-sr-hero__orb {
    width:  4.5rem;
    height: 4.5rem;
}
.gv-sp-hero-wrap .gv-sr-hero__orb-core {
    width:  4.5rem;
    height: 4.5rem;
}
.gv-sp-hero-wrap .gv-sr-hero__orb-icon {
    width:  1.75rem;
    height: 1.75rem;
}

/* Keep the art panel visible and flex-centered! */
.gv-sp-hero-wrap .gv-sr-hero__art-panel {
    display: flex;
}

/* Grid part: remove outer wrappers' own bg so it sits naturally on page */
.gv-sp-grid-wrap .gv-sr-body--main-only {
    background: transparent;
    margin:     0;
    padding:    0;
    max-width:  none;    /* remove 75rem constraint */
    min-height: auto;
}
.gv-sp-grid-wrap .gv-sr-main {
    padding: 1.25rem;
}

/* ── Responsive: collapse to single column on small screens ─────────────── */
@media (max-width: 768px) {
    .gv-sp-layout {
        grid-template-columns: 1fr;
        grid-template-rows:    auto;
    }
    .gv-sp-col--sidebar {
        grid-row:   auto;
        position:   static;
        max-height: none;
        overflow:   visible;
    }
}

/* ── Design tokens (scoped) ──────────────────────────────────────────────── */
.gv-sr-body {
    --gv-sb-bg:           #0d0e1a;
    --gv-sb-surface:      #13152a;
    --gv-sb-surface-alt:  #1a1d35;
    --gv-sb-border:       rgba(255, 255, 255, 0.07);
    --gv-sb-border-hover: rgba(168, 85, 247, 0.35);
    --gv-sb-accent:       #a855f7;
    --gv-sb-accent-dim:   rgba(168, 85, 247, 0.15);
    --gv-sb-accent-glow:  rgba(168, 85, 247, 0.25);
    --gv-sb-orange:       #f97316;
    --gv-sb-text:         #e8e8f0;
    --gv-sb-text-muted:   rgba(200, 200, 220, 0.50);
    --gv-sb-text-label:   rgba(180, 175, 210, 0.70);
    --gv-sb-sidebar-w:    14rem;
    --gv-sb-gap:          1.25rem;
    --gv-sb-radius:       0.75rem;
    --gv-sb-radius-sm:    0.5rem;
    --gv-sb-transition:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Body wrapper — sidebar left + main right ────────────────────────────── */
.gv-sr-body {
    display:         flex;
    align-items:     flex-start;
    gap:             var(--gv-sb-gap);
    max-width:       75rem;
    margin:          0 auto;
    padding:         2rem 1.5rem 3rem;
    background:      var(--gv-sb-bg);
    min-height:      60vh;
}

/* When output independently */
.gv-sr-body--sidebar-only {
    display: block;
    padding: 0;
    min-height: auto;
    background: transparent;
}
.gv-sr-body--main-only {
    display: block;
    padding: 0;
    min-height: auto;
    background: transparent;
}
.gv-sr-body--sidebar-only .gv-sr-sidebar {
    position: relative;
    top: 0;
    width: 100%;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.gv-sr-sidebar {
    position:       sticky;
    top:            5rem;
    flex-shrink:    0;
    width:          var(--gv-sb-sidebar-w);
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    max-height:     calc(100vh - 6rem);
    overflow-y:     auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.1) transparent;
}

.gv-sr-sidebar::-webkit-scrollbar {
    width: 4px;
}
.gv-sr-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.gv-sr-sidebar::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.1);
    border-radius: 2px;
    transition: background 0.3s ease;
}
.gv-sr-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.5);
}

/* Mobile close button (hidden on desktop) */
.gv-sr-sidebar__close {
    display: none;
}

.gv-sr-sidebar__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gv-sb-text-muted);
    margin: 0;
    padding: 0;
}

/* ── Filter group ────────────────────────────────────────────────────────── */
.gv-sr-filter-group {
    padding:        1rem 0;
    border-bottom:  0.0625rem solid var(--gv-sb-border);
}

.gv-sr-filter-group:last-child {
    border-bottom: none;
}

.gv-sr-filter-label {
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--gv-sb-text-label);
    margin:         0 0 0.7rem;
}

/* ── Search within ───────────────────────────────────────────────────────── */
.gv-sr-search-wrap {
    display:        flex;
    align-items:    center;
    gap:            0;
    background:     var(--gv-sb-surface);
    border:         0.0625rem solid var(--gv-sb-border);
    border-radius:  var(--gv-sb-radius-sm);
    overflow:       hidden;
    transition:     border-color var(--gv-sb-transition);
}

.gv-sr-search-wrap:focus-within {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow:   0 0 0 0.1875rem rgba(168, 85, 247, 0.12);
}

.gv-sr-within-input {
    flex:           1;
    background:     transparent;
    border:         none;
    outline:        none;
    padding:        0.5rem 0.65rem;
    font-size:      0.8125rem;
    color:          var(--gv-sb-text);
    line-height:    1.4;
}

.gv-sr-within-input::placeholder { color: var(--gv-sb-text-muted); }

.gv-sr-within-btn {
    flex-shrink:  0;
    background:   transparent;
    border:       none;
    padding:      0.5rem 0.65rem;
    cursor:       pointer;
    color:        var(--gv-sb-text-muted);
    font-size:    0.8125rem;
    transition:   color var(--gv-sb-transition);
    display:      flex;
    align-items:  center;
}

.gv-sr-within-btn:hover { color: var(--gv-sb-accent); }

/* ── Checklist ───────────────────────────────────────────────────────────── */
.gv-sr-checklist {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-direction: column;
    gap:         0.4rem;
}

.gv-sr-check-item { margin: 0; }

/* Tree connector lines */
.gv-sr-checklist--sub {
    position: relative;
    list-style: none;
    padding-left: 20px;
    margin-left: 8px;
}

.gv-sr-checklist--sub > .gv-sr-check-item {
    position: relative;
}

/* Horizontal connector only */
.gv-sr-checklist--sub > .gv-sr-check-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 12px;
    width: 14px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Single vertical line on the parent UL itself — not on each item */
.gv-sr-checklist--sub::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    /* Stop exactly at the midpoint of the last item */
    bottom: calc(50% - 2px);
    width: 1px;
    background-color: rgba(255, 255, 255, 0.15);
}

.gv-sr-check-item--child .gv-sr-check-text {
    font-size: 0.9em;
    opacity: 0.85;
}

.gv-sr-check-item--parent > .gv-sr-check-label {
    font-weight: 600;
}

.gv-sr-check-label {
    display:     flex;
    align-items: center;
    gap:         0.55rem;
    cursor:      pointer;
    padding:     0.2rem 0;
    user-select: none;
}

.gv-sr-check-label:hover .gv-sr-check-text {
    color: var(--gv-sb-text);
}

/* Hide native checkbox */
.gv-sr-check-input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

/* Custom checkbox box */
.gv-sr-check-box {
    flex-shrink:    0;
    width:          1rem;
    height:         1rem;
    border-radius:  0.25rem;
    border:         0.125rem solid rgba(168, 85, 247, 0.30);
    background:     transparent;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:
        background    var(--gv-sb-transition),
        border-color  var(--gv-sb-transition);
    position:       relative;
}

/* Checked state */
.gv-sr-check-input:checked ~ .gv-sr-check-box {
    background:   var(--gv-sb-accent);
    border-color: var(--gv-sb-accent);
}

.gv-sr-check-input:checked ~ .gv-sr-check-box::after {
    content:     '';
    display:     block;
    width:       0.3rem;
    height:      0.55rem;
    border:      0.125rem solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg) translateY(-0.05rem);
}

.gv-sr-check-input:focus-visible ~ .gv-sr-check-box {
    outline:        0.125rem solid var(--gv-sb-accent);
    outline-offset: 0.125rem;
}

.gv-sr-cat-icon {
    width:      20px;
    height:     20px;
    object-fit: contain;
}

.gv-sr-check-text {
    flex:       1;
    font-size:  0.8125rem;
    color:      rgba(255, 255, 255, 0.55); /* less white when inactive */
    transition: color var(--gv-sb-transition);
    line-height: 1.3;
}

/* Checked state text color */
.gv-sr-check-input:checked ~ .gv-sr-check-text {
    color:       var(--gv-sb-accent);
    font-weight: 500;
}

.gv-sr-check-count {
    font-size:  0.75rem;
    color:      var(--gv-sb-accent);
    font-weight: 600;
}

.gv-sr-check-count--placeholder {
    color: var(--gv-sb-text-muted);
    font-weight: 400;
}

/* ── Price range slider ──────────────────────────────────────────────────── */
.gv-sr-range-wrap {
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
}

.gv-sr-range-track {
    position:       relative;
    height:         0.375rem;
    background:     rgba(255, 255, 255, 0.10);
    border-radius:  1rem;
    margin:         0.75rem 0 0.25rem;
}

.gv-sr-range-fill {
    position:       absolute;
    top:            0;
    height:         100%;
    background:     linear-gradient(90deg, var(--gv-sb-accent), #7c3aed);
    border-radius:  1rem;
    pointer-events: none;
}

/* Shared thumb styles */
.gv-sr-range-input {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    width:      100%;
    height:     100%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline:    none;
    cursor:     pointer;
    pointer-events: none;
    z-index:    2;
}

.gv-sr-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width:           1rem;
    height:          1rem;
    border-radius:   50%;
    background:      var(--gv-sb-accent);
    border:          0.1875rem solid #0d0e1a;
    box-shadow:      0 0 0.4rem rgba(168, 85, 247, 0.55);
    cursor:          pointer;
    pointer-events:  all;
    transition:      box-shadow var(--gv-sb-transition);
}

.gv-sr-range-input::-webkit-slider-thumb:hover,
.gv-sr-range-input::-webkit-slider-thumb:active {
    box-shadow: 0 0 0.75rem rgba(168, 85, 247, 0.80);
}

.gv-sr-range-input::-moz-range-thumb {
    width:          1rem;
    height:         1rem;
    border-radius:  50%;
    background:     var(--gv-sb-accent);
    border:         0.1875rem solid #0d0e1a;
    box-shadow:     0 0 0.4rem rgba(168, 85, 247, 0.55);
    cursor:         pointer;
    pointer-events: all;
}

/* Min / Max text inputs row */
.gv-sr-range-inputs {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}

.gv-sr-price-input-wrap {
    flex:           1;
    display:        flex;
    align-items:    center;
    gap:            0.25rem;
    background:     var(--gv-sb-surface);
    border:         0.0625rem solid var(--gv-sb-border);
    border-radius:  var(--gv-sb-radius-sm);
    padding:        0 0.5rem;
    transition:     border-color var(--gv-sb-transition);
}

.gv-sr-price-input-wrap:focus-within {
    border-color: rgba(168, 85, 247, 0.45);
}

.gv-sr-price-sym {
    font-size:  0.75rem;
    color:      var(--gv-sb-text-muted);
    flex-shrink: 0;
}

.gv-sr-price-input {
    width:      100%;
    min-width:  0;
    background: transparent;
    border:     none;
    outline:    none;
    font-size:  0.8125rem;
    color:      var(--gv-sb-text);
    padding:    0.4rem 0;
    -moz-appearance: textfield;
}

.gv-sr-price-input::-webkit-outer-spin-button,
.gv-sr-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gv-sr-price-dash {
    color:     var(--gv-sb-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Apply button */
.gv-sr-apply-btn {
    width:          100%;
    padding:        0.55rem 1rem;
    background:     linear-gradient(135deg, var(--gv-sb-accent), #7c3aed);
    border:         none;
    border-radius:  var(--gv-sb-radius-sm);
    color:          #fff;
    font-size:      0.8125rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:
        opacity       var(--gv-sb-transition),
        transform     var(--gv-sb-transition),
        box-shadow    var(--gv-sb-transition);
}

.gv-sr-apply-btn:hover {
    opacity:    0.9;
    transform:  translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem rgba(168, 85, 247, 0.35);
}

.gv-sr-apply-btn:active { transform: translateY(0); }

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */
.gv-sr-main {
    flex:       1 1 0;
    min-width:  0;
    display:    flex;
    flex-direction: column;
    gap:        1.25rem;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.gv-sr-toolbar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.75rem;
    padding:     0.75rem 1rem;
    background:  var(--gv-sb-surface);
    border:      0.0625rem solid var(--gv-sb-border);
    border-radius: var(--gv-sb-radius);
}

/* Mobile filter toggle — hidden on desktop */
.gv-sr-filter-toggle {
    display:      none;
}

/* Result count */
.gv-sr-result-count {
    font-size:   0.875rem;
    color:       var(--gv-sb-text-muted);
    margin:      0;
    white-space: nowrap;
}

.gv-sr-result-count__num {
    color:       var(--gv-sb-accent);
    font-weight: 700;
    font-size:   1rem;
    margin-right: 0.2em;
}

.gv-sr-toolbar__spacer {
    flex: 1;
}

/* Sidebar toggle */
.gv-sr-sidebar-toggle {
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           0.5rem;
    background:    transparent;
    border:        0.0625rem solid var(--gv-sb-border);
    border-radius: var(--gv-sb-radius-sm);
    color:         rgba(255, 255, 255, 0.55); /* Less white when inactive */
    font-size:     0.875rem;
    font-weight:   600;
    height:        2.425rem; /* Matches the exact height of the view toggle */
    padding:       0 1rem;
    cursor:        pointer;
    transition:    all var(--gv-sb-transition);
    position:      relative;
}

.gv-sr-sidebar-toggle:hover,
.gv-sr-sidebar-toggle[aria-expanded="true"] {
    border-color:  rgba(168, 85, 247, 0.5);
    background:    rgba(168, 85, 247, 0.05);
    color:         var(--gv-sb-accent, #a855f7); /* Purple when active/hovered */
}

.gv-sr-filter-badge {
    background:    #f97316; /* vibrant orange */
    color:         #fff;
    font-size:     0.75rem;
    font-weight:   700;
    width:         1.25rem;
    height:        1.25rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: 50%;
    position:      absolute;
    top:           -0.5rem;
    right:         -0.5rem;
    box-shadow:    0 0 0 0.15rem var(--gv-sb-surface);
}

/* View toggle */
.gv-sr-view-toggle {
    display:       flex;
    align-items:   center;
    background:    rgba(255,255,255,0.03);
    border:        0.0625rem solid var(--gv-sb-border);
    border-radius: var(--gv-sb-radius-sm);
    padding:       0.15rem;
}

.gv-sr-view-btn {
    width:          2rem;
    height:         2rem;
    display:        flex;
    align-items:    center;
    justify-content: center;
    border:         none;
    border-radius:  0.25rem;
    background:     transparent;
    color:          var(--gv-sb-text-muted);
    font-size:      0.875rem;
    cursor:         pointer;
    transition:     all var(--gv-sb-transition);
}

.gv-sr-view-btn--active,
.gv-sr-view-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    color:      var(--gv-sb-accent, #a855f7);
}

/* Sort dropdown */
.gv-sr-sort-wrap {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.gv-sr-sort-label {
    font-size:   0.8125rem;
    color:       var(--gv-sb-text-muted);
    white-space: nowrap;
}

.gv-sr-sort-select-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

.gv-sr-sort-select {
    appearance:     none;
    -webkit-appearance: none;
    background:     var(--gv-sb-surface);
    border:         0.0625rem solid var(--gv-sb-border);
    border-radius:  var(--gv-sb-radius-sm);
    color:          var(--gv-sb-text);
    font-size:      0.8125rem;
    padding:        0.45rem 2.2rem 0.45rem 0.75rem;
    cursor:         pointer;
    outline:        none;
    transition:     all var(--gv-sb-transition);
    min-width:      9.5rem;
    font-weight:    500;
}

.gv-sr-sort-select:focus,
.gv-sr-sort-select:hover {
    border-color: rgba(168, 85, 247, 0.45);
    background:   var(--gv-sb-surface);
    box-shadow:   0 0 0 0.1875rem rgba(168, 85, 247, 0.12);
}

.gv-sr-sort-select option {
    background: var(--gv-sb-surface-alt);
    color:      var(--gv-sb-text);
}

.gv-sr-sort-caret {
    position:       absolute;
    right:          0.75rem;
    top:            0;
    height:         100%;
    pointer-events: none;
    color:          var(--gv-sb-text-muted);
    font-size:      0.6875rem;
    display:        flex;
    align-items:    center;
}

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
.gv-sr-grid {
    position:  relative;
    display:   grid;
    gap:       1rem;
}

/* Grid view — 5 columns */
.gv-sr-grid[data-view="grid"] {
    grid-template-columns: repeat(6, 1fr);
}

/* List view — 1 column */
.gv-sr-grid[data-view="list"] {
    grid-template-columns: 1fr;
}

/* ── Product card (basic / structural) ───────────────────────────────────── */
.gv-sr-card {
    background:    var(--gv-sb-surface);
    border:        0.0625rem solid var(--gv-sb-border);
    border-radius: var(--gv-sb-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:
        border-color var(--gv-sb-transition),
        transform    var(--gv-sb-transition),
        box-shadow   var(--gv-sb-transition);
    position:      relative;
    animation:     gv-sb-card-in 0.35s ease both;
}

.gv-sr-card:hover {
    border-color: var(--gv-sb-border-hover);
    transform:    translateY(-0.15rem);
    box-shadow:   0 0.5rem 1.5rem rgba(0,0,0,0.35);
}

@keyframes gv-sb-card-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger delay per card (handled via JS for AJAX, but initial load uses nth-child) */
.gv-sr-card:nth-child(1) { animation-delay: 0.04s; }
.gv-sr-card:nth-child(2) { animation-delay: 0.08s; }
.gv-sr-card:nth-child(3) { animation-delay: 0.12s; }
.gv-sr-card:nth-child(4) { animation-delay: 0.16s; }
.gv-sr-card:nth-child(5) { animation-delay: 0.20s; }
.gv-sr-card:nth-child(6) { animation-delay: 0.24s; }
.gv-sr-card:nth-child(7) { animation-delay: 0.28s; }
.gv-sr-card:nth-child(8) { animation-delay: 0.32s; }

/* Thumbnail */
.gv-sr-card__thumb-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.03);
}

.gv-sr-card__thumb {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.gv-sr-card:hover .gv-sr-card__thumb { transform: scale(1.04); }

/* Placeholder thumb */
.gv-sr-card__thumb--placeholder {
    width:           100%;
    aspect-ratio:    1 / 1;
    background:      rgba(255,255,255,0.03);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--gv-sb-text-muted);
    font-size:       2rem;
}

/* Card body */
.gv-sr-card__body {
    padding:        0.85rem;
    display:        flex;
    flex-direction: column;
    gap:            0.45rem;
    flex:           1;
}

.gv-sr-card__name {
    margin:      0;
    font-size:   0.875rem !important;
    font-weight: 600;
    line-height: 1.35;
}

.gv-sr-card__name a {
    color:           var(--gv-sb-text);
    text-decoration: none;
    transition:      color var(--gv-sb-transition);
}

.gv-sr-card__name a:hover { color: var(--gv-sb-accent); }

/* Price */
.gv-sr-card__price {
    font-size:  0.8rem;
    font-weight: 700;
    color:      var(--gv-sb-accent);
}

.gv-sr-card__price .woocommerce-Price-amount,
.gv-sr-card__price ins .woocommerce-Price-amount {
    color: var(--gv-sb-accent);
}

.gv-sr-card__price del .woocommerce-Price-amount {
    color:     var(--gv-sb-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Stars */
.gv-sr-card__rating {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.75rem;
}

.gv-sr-card__stars { color: #f59e0b; letter-spacing: 0.02em; }

.gv-sr-card__rating-val {
    color:      var(--gv-sb-text);
    font-weight: 600;
}

.gv-sr-card__rating-count { color: var(--gv-sb-text-muted); }

/* Delivery */
.gv-sr-card__delivery {
    margin:      0;
    font-size:   0.75rem;
    color:       var(--gv-sb-text-muted);
    display:     flex;
    align-items: center;
    gap:         0.3em;
}

.gv-sr-card__delivery i { color: #f59e0b; }

/* CTA Button */
.gv-sr-card__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4em;
    width:           100%;
    margin-top:      auto;
    padding:         0.55rem 0.75rem;
    border-radius:   var(--gv-sb-radius-sm);
    font-size:       0.8125rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    background:      linear-gradient(135deg, rgba(168,85,247,0.85), rgba(124,58,237,0.85));
    color:           #fff;
    transition:
        opacity      var(--gv-sb-transition),
        transform    var(--gv-sb-transition),
        box-shadow   var(--gv-sb-transition);
}

.gv-sr-card__btn:hover {
    opacity:    0.92;
    transform:  translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem rgba(168,85,247,0.30);
    color:      #fff;
}

.gv-sr-card__btn--outline {
    background:   transparent;
    border:       0.0625rem solid rgba(168, 85, 247, 0.40);
    color:        var(--gv-sb-accent);
}

.gv-sr-card__btn--outline:hover {
    background:  rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.65);
    color:       var(--gv-sb-accent);
}

/* List view card overrides */
.gv-sr-grid[data-view="list"] .gv-sr-card {
    flex-direction: row;
}

.gv-sr-grid[data-view="list"] .gv-sr-card__thumb-link {
    flex-shrink: 0;
    width:       10rem;
    aspect-ratio: unset;
    height:      100%;
}

.gv-sr-grid[data-view="list"] .gv-sr-card__thumb {
    width:  10rem;
    height: 100%;
}

.gv-sr-grid[data-view="list"] .gv-sr-card__body {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            0.5rem 1rem;
    padding:        1rem;
}

.gv-sr-grid[data-view="list"] .gv-sr-card__name { flex: 1 1 100%; }
.gv-sr-grid[data-view="list"] .gv-sr-card__price { flex: 0 0 auto; }
.gv-sr-grid[data-view="list"] .gv-sr-card__rating { flex: 1 1 auto; }
.gv-sr-grid[data-view="list"] .gv-sr-card__btn { flex: 0 0 auto; width: auto; padding: 0.5rem 1.25rem; }

.gv-sr-show-more {
    background: none;
    border: none;
    color: #a78bfa;
    font-size: 0.85em;
    cursor: pointer;
    padding: 8px 0 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.gv-sr-show-more:hover {
    opacity: 1;
}

/* Region flag */
.gv-sr-region-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Inline attribute search bar */
.gv-sr-filter-search {
    margin-bottom: 8px;
}

.gv-sr-filter-search-input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 0.85em;
    outline: none;
    box-sizing: border-box;
}

.gv-sr-filter-search-input:focus {
    border-color: #a78bfa;
    background: rgba(167, 139, 250, 0.08);
}

.gv-sr-check-label {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   ACTIVE FILTERS
   ========================================================================== */
.gv-sr-active-chips {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         1.25rem;
    padding:     0 0 1.5rem 0;
}

.gv-sr-active-chips:empty {
    display: none;
}

.gv-sr-clear-chips {
    background:  transparent;
    border:      none;
    color:       var(--gv-sb-accent, #a855f7);
    font-size:   0.85rem;
    font-weight: 600;
    cursor:      pointer;
    padding:     0;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition:  text-decoration-color 0.2s ease, opacity 0.2s ease;
    opacity:     0.8;
}

.gv-sr-clear-chips:hover {
    text-decoration-color: currentColor;
    opacity:     1;
}

.gv-sr-active-group {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.gv-sr-active-label {
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--gv-sb-text-label, rgba(180, 175, 210, 0.70));
}

.gv-sr-chip-light {
    display:          inline-flex;
    align-items:      center;
    gap:              0.4em;
    padding:          0.4em 0.9em;
    border-radius:    2em;
    background:       rgba(255, 255, 255, 0.03);
    border:           0.0625rem solid rgba(255, 255, 255, 0.08);
    color:            rgba(220, 200, 255, 0.80);
    font-size:        0.78125rem;
    font-weight:      500;
    text-decoration:  none;
    cursor:           pointer;
    transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space:      nowrap;
}

.gv-sr-chip-light:hover,
.gv-sr-chip-light:focus-visible {
    background:    rgba(168, 85, 247, 0.12);
    border-color:  rgba(168, 85, 247, 0.55);
    color:         #e9d5ff;
    transform:     translateY(-0.1rem);
    box-shadow:    0 0.25rem 0.75rem rgba(168, 85, 247, 0.18);
    outline:       none;
}

.gv-sr-chip-light i {
    font-size: 0.72em;
    opacity:   0.8;
    margin-left: 0.25rem;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.gv-sr-empty {
    grid-column:    1 / -1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        4rem 1rem;
    gap:            0.75rem;
    text-align:     center;
}

.gv-sr-empty__icon {
    width:           4.5rem;
    height:          4.5rem;
    border-radius:   50%;
    background:      rgba(168, 85, 247, 0.10);
    border:          0.0625rem solid rgba(168, 85, 247, 0.20);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.75rem;
    color:           var(--gv-sb-accent);
    margin-bottom:   0.5rem;
}

.gv-sr-empty__heading {
    font-size:  1.125rem;
    font-weight: 700;
    color:      var(--gv-sb-text);
    margin:     0;
}

.gv-sr-empty__text {
    font-size:  0.875rem;
    color:      var(--gv-sb-text-muted);
    margin:     0;
    max-width:  24rem;
}

.gv-sr-empty__reset {
    margin-top:   0.5rem;
    padding:      0.5rem 1.25rem;
    background:   var(--gv-sb-accent-dim);
    border:       0.0625rem solid rgba(168, 85, 247, 0.35);
    border-radius: 2rem;
    color:        var(--gv-sb-accent);
    font-size:    0.8125rem;
    font-weight:  600;
    cursor:       pointer;
    transition:   background var(--gv-sb-transition);
}

.gv-sr-empty__reset:hover { background: rgba(168, 85, 247, 0.20); }

/* ==========================================================================
   LOADING OVERLAY
   ========================================================================== */
.gv-sr-loading {
    position:        absolute;
    inset:           0;
    background:      rgba(13, 14, 26, 0.70);
    border-radius:   var(--gv-sb-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.2s;
    backdrop-filter: blur(0.125rem);
}

.gv-sr-loading.is-loading {
    opacity:        1;
    pointer-events: all;
}

.gv-sr-loading__spinner {
    width:         2.5rem;
    height:        2.5rem;
    border:        0.1875rem solid rgba(168,85,247,0.20);
    border-top:    0.1875rem solid var(--gv-sb-accent);
    border-radius: 50%;
    animation:     gv-sb-spin 0.7s linear infinite;
}

@keyframes gv-sb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.gv-sr-pagination {
    display:         flex;
    justify-content: center;
    padding:         0.5rem 0;
}

.gv-sr-page-list {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.gv-sr-page-item { margin: 0; }

.gv-sr-page-item a,
.gv-sr-page-item span {
    display:        flex;
    align-items:    center;
    justify-content: center;
    min-width:      2.25rem;
    height:         2.25rem;
    padding:        0 0.5rem;
    border-radius:  var(--gv-sb-radius-sm);
    font-size:      0.875rem;
    font-weight:    500;
    text-decoration: none;
    border:         0.0625rem solid var(--gv-sb-border);
    color:          var(--gv-sb-text-muted);
    background:     var(--gv-sb-surface);
    transition:
        background   var(--gv-sb-transition),
        border-color var(--gv-sb-transition),
        color        var(--gv-sb-transition);
}

.gv-sr-page-item a:hover {
    border-color: rgba(168, 85, 247, 0.40);
    background:   rgba(168, 85, 247, 0.10);
    color:        var(--gv-sb-accent);
}

.gv-sr-page-item--active span,
.gv-sr-page-item .page-numbers.current {
    background:   linear-gradient(135deg, var(--gv-sb-accent), #7c3aed);
    border-color: transparent;
    color:        #fff;
    font-weight:  700;
}

/* Prev / next arrows */
.gv-sr-page-item .prev,
.gv-sr-page-item .next {
    font-size: 0.75rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet: 3 columns, narrower sidebar */
@media (max-width: 64em) {
    .gv-sr-body {
        --gv-sb-sidebar-w: 12.5rem;
    }

    .gv-sr-grid[data-view="grid"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet small: sidebar becomes off-canvas */
@media (max-width: 54em) {
    .gv-sr-body {
        flex-direction: column;
        padding: 1rem 1rem 2.5rem;
    }

    .gv-sr-sidebar {
        position:    fixed;
        top:         0;
        left:        -100%;
        z-index:     200;
        width:       min(18rem, 85vw);
        height:      100dvh;
        max-height:  none;
        background:  #0f1025;
        border-right: 0.0625rem solid var(--gv-sb-border);
        padding:     1.5rem 1.25rem;
        box-shadow:  0.5rem 0 2rem rgba(0,0,0,0.5);
        transition:  left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y:  auto;
    }

    .gv-sr-sidebar.is-open {
        left: 0;
    }

    .gv-sr-sidebar__close {
        display:         flex;
        align-items:     center;
        justify-content: center;
        position:        absolute;
        top:             1rem;
        right:           1rem;
        width:           2rem;
        height:          2rem;
        background:      rgba(255,255,255,0.05);
        border:          0.0625rem solid var(--gv-sb-border);
        border-radius:   50%;
        color:           var(--gv-sb-text-muted);
        font-size:       0.875rem;
        cursor:          pointer;
        transition:      color var(--gv-sb-transition);
    }

    .gv-sr-sidebar__close:hover { color: var(--gv-sb-text); }

    .gv-sr-filter-toggle {
        display:      flex;
        align-items:  center;
        gap:          0.4em;
        padding:      0.45rem 0.9rem;
        background:   rgba(168, 85, 247, 0.12);
        border:       0.0625rem solid rgba(168, 85, 247, 0.30);
        border-radius: var(--gv-sb-radius-sm);
        color:        var(--gv-sb-accent);
        font-size:    0.8125rem;
        font-weight:  600;
        cursor:       pointer;
        transition:   background var(--gv-sb-transition);
    }

    .gv-sr-filter-toggle:hover { background: rgba(168, 85, 247, 0.20); }

    .gv-sr-grid[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 2 columns */
@media (max-width: 36em) {
    .gv-sr-grid[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .gv-sr-sort-label { display: none; }

    .gv-sr-toolbar {
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
}

/* Very small */
@media (max-width: 26em) {
    .gv-sr-grid[data-view="grid"] {
        grid-template-columns: 1fr;
    }
}

/* Zero count filter items — visible but dimmed */
.gv-sr-check-item--zero {
    opacity: 0.45;
    pointer-events: auto; /* still clickable */
}

.gv-sr-check-item--zero .gv-sr-check-count {
    color: rgba(255, 255, 255, 0.3);
}

/* Filter group toggle button */
.gv-sr-filter-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 10px 0;
    cursor: pointer;
    color: inherit;
}

.gv-sr-filter-label-text {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.gv-sr-filter-arrow {
    font-size: 0.75em;
    opacity: 0.6;
    transition: transform 0.25s ease;
}

/* Collapsed state */
.gv-sr-filter-group--collapsed .gv-sr-filter-body {
    display: none;
}

/* Expanded state — arrow points up */
.gv-sr-filter-arrow {
    transition: transform 0.25s ease;
}

/* Collapsed state — arrow points down */
.gv-sr-filter-group--collapsed .gv-sr-filter-arrow {
    transform: rotate(0deg);
}

/* Expanded state — arrow points up */
.gv-sr-dynamic-filter:not(.gv-sr-filter-group--collapsed) .gv-sr-filter-arrow {
    transform: rotate(180deg);
}


/* Category filter group — fixed max height with scroll */
#gv-sr-filter-cats .gv-sr-filter-body {
    max-height: 280px; /* adjust this value as needed */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.1) transparent;
}

/* Webkit scrollbar for category section */
#gv-sr-filter-cats .gv-sr-filter-body::-webkit-scrollbar {
    width: 3px;
}

#gv-sr-filter-cats .gv-sr-filter-body::-webkit-scrollbar-track {
    background: transparent;
}

#gv-sr-filter-cats .gv-sr-filter-body::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.1);
    border-radius: 2px;
    transition: background 0.3s ease;
}

#gv-sr-filter-cats .gv-sr-filter-body:hover::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.5);
}

/* Delivery flash icon */
.gv-sr-delivery-flash {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Custom Sort Dropdown */
.gv-sr-sort-select-wrap {
    position: relative;
}

/* Hide native select visually but keep it in DOM for Accessibility and AJAX */
.gv-sr-sort-select-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.gv-sr-sort-custom {
    position: relative;
    user-select: none;
}

.gv-sr-sort-custom-trigger {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           0.75rem;
    background:    var(--gv-sb-surface);
    border:        0.0625rem solid var(--gv-sb-border);
    border-radius: var(--gv-sb-radius-sm);
    color:         var(--gv-sb-text);
    font-size:     0.8125rem;
    padding:       0.45rem 1rem;
    cursor:        pointer;
    outline:       none;
    transition:    all var(--gv-sb-transition);
    min-width:     10.5rem;
    text-align:    left;
    font-weight:   500;
}

.gv-sr-sort-custom-trigger:hover,
.gv-sr-sort-custom.is-open .gv-sr-sort-custom-trigger {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow:   0 0 0 0.1875rem rgba(168, 85, 247, 0.12);
}

.gv-sr-sort-custom-caret {
    font-size:  0.6875rem;
    color:      var(--gv-sb-text-muted);
    transition: transform var(--gv-sb-transition);
}

.gv-sr-sort-custom.is-open .gv-sr-sort-custom-caret {
    transform: rotate(180deg);
}

.gv-sr-sort-custom-list {
    position:        absolute;
    top:             calc(100% + 0.35rem);
    right:           0;
    z-index:         100;
    min-width:       100%;
    width:           max-content;
    background:      var(--gv-sb-surface-alt);
    border:          0.0625rem solid var(--gv-sb-border);
    border-radius:   var(--gv-sb-radius-sm);
    box-shadow:      0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    padding:         0.35rem 0;
    margin:          0;
    list-style:      none;
    display:         none; /* toggled via is-open class */
    transform-origin: top right;
    animation:       gvDropdownFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gvDropdownFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gv-sr-sort-custom.is-open .gv-sr-sort-custom-list {
    display: block;
}

.gv-sr-sort-custom-label-wrap {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.gv-sr-sort-custom-icon {
    font-size:   0.875rem;
    color:       var(--gv-sb-accent);
    opacity:     0.85;
    flex-shrink: 0;
    transition:  color var(--gv-sb-transition), opacity var(--gv-sb-transition);
}

.gv-sr-sort-custom-item {
    display:       flex;
    align-items:   center;
    gap:           0.65rem;
    font-size:     0.8125rem;
    color:         var(--gv-sb-text-muted);
    padding:       0.5rem 1.25rem;
    cursor:        pointer;
    transition:    all var(--gv-sb-transition);
}

.gv-sr-sort-custom-item:hover {
    background:    rgba(168, 85, 247, 0.10);
    color:         var(--gv-sb-text);
}

.gv-sr-sort-custom-item:hover .gv-sr-sort-custom-icon {
    color:         var(--gv-sb-text);
    opacity:       1;
}

.gv-sr-sort-custom-item.is-selected {
    background:    rgba(168, 85, 247, 0.15);
    color:         var(--gv-sb-accent);
    font-weight:   600;
}

.gv-sr-sort-custom-item.is-selected .gv-sr-sort-custom-icon {
    color:         var(--gv-sb-accent);
    opacity:       1;
}

/* ==========================================================================
   Fuzzy Search Suggestions
   ========================================================================== */

.gv-sr-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    width: 100%;
}

.gv-sr-suggestions__label {
    font-size: 1em;
    opacity: 0.7;
    margin: 0;
    flex-shrink: 0;
}

.gv-sr-suggestions__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.gv-sr-suggestion-pill {
    display:          inline-flex;
    align-items:      center;
    gap:              0.6em; /* slightly larger gap for the icon circle */
    padding:          0.3em 0.9em 0.3em 0.3em; /* asymmetrical padding to balance the inner circle */
    border-radius:    2em;
    background:       var(--gv-sr-chip-bg);
    border:           0.0625rem solid var(--gv-sr-chip-border);
    color:            rgba(220, 200, 255, 0.80);
    font-size:        0.78125rem;
    font-weight:      500;
    text-decoration:  none;
    cursor:           pointer;
    transition:
        background    var(--gv-sr-transition),
        border-color  var(--gv-sr-transition),
        color         var(--gv-sr-transition),
        transform     var(--gv-sr-transition),
        box-shadow    var(--gv-sr-transition);
    white-space:      nowrap;
}

.gv-sr-suggestion-pill:hover {
    background:       var(--gv-sr-chip-hover);
    color:            #ffffff;
    transform:        translateY(-0.125rem);
    box-shadow:       0 0.5rem 1rem rgba(0, 0, 0, 0.3),
                      0 0 1.5rem var(--gv-sr-accent-glow);
}

.gv-sr-suggestion-pill__img-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gv-sr-suggestion-pill__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gv-sr-suggestion-pill__title {
    font-weight: 500;
    white-space: nowrap;
}

/* Browse suggestion pills — icon instead of image */
.gv-sr-suggestion-pill--browse .gv-sr-suggestion-pill__img-wrap {
    background: rgba(167, 139, 250, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gv-sr-suggestion-pill--browse .gv-sr-suggestion-pill__img-wrap i {
    font-size: 0.75em;
    color: rgba(167, 139, 250, 0.9);
}