/* =====================================================================
   GIFT STORE — LIQUID GLASS FILTER BAR
   =====================================================================
   Apple's Liquid Glass is not "a translucent box". It is a material, and
   it only reads as glass when four things are true at once:

     1. REFRACTION — the backdrop is blurred AND saturated. Blur alone
        gives frosted plastic; the saturation boost is what makes colour
        bleed through the way real glass bends light.

     2. DEPTH ORDER — the material is lit from above: a bright specular
        edge along the top, a darker edge along the bottom, and an inner
        highlight just inside the top border. Without those three the
        surface is flat no matter how much blur is applied.

     3. SOMETHING TO REFRACT — glass over a flat white page is invisible.
        The store's page background IS flat white (#fff), so this file
        paints its own ambient colour field behind the panel. That field
        is what you actually see bending through the glass.

     4. LIGHT THAT RESPONDS — on hover/focus the specular highlight
        shifts and brightens. Static glass reads as a picture of glass.

   Everything degrades: where backdrop-filter is unsupported the panel
   falls back to an opaque surface via @supports, so the filter is never
   unreadable.

   Tokens come from rewards-store.css (--rewards-blue / ink / orange).
   ===================================================================== */

.gs-filter {
    --gsf-ink: var(--rewards-ink, #0c2340);
    --gsf-blue: var(--rewards-blue, #005988);
    --gsf-accent: var(--rewards-orange, #ef6b3b);
    --gsf-muted: #5a7186;
    --gsf-radius: 26px;
    --gsf-radius-sm: 16px;
    --gsf-ease: cubic-bezier(.22, 1, .36, 1);

    /* Achromatic. On a white page the material cannot rely on tint, so
       it is defined entirely by light: a bright top edge, a soft inner
       glow giving the pane thickness, and a graphite stroke that keeps
       the panel's silhouette legible against white. */
    --gsf-glass: rgba(252, 253, 255, .72);
    --gsf-glass-hi: rgba(255, 255, 255, .95);
    --gsf-stroke: rgba(12, 35, 64, .09);
    --gsf-stroke-hi: rgba(255, 255, 255, .85);

    position: relative;
    isolation: isolate;
    padding: clamp(22px, 2.6vw, 34px);
    border-radius: var(--gsf-radius);
}

/* ---------------------------------------------------------------
   1. NO TINT BEHIND THE GLASS.
   An earlier pass painted coloured blooms here so the blur would have
   something to refract. That was the wrong instinct: on a white store
   page it read as decoration sitting behind a control, and a filter
   bar is an instrument, not an ornament. Real Liquid Glass on a light
   surface takes its character from EDGE LIGHT and depth, not from
   injected colour. The material below is therefore achromatic — its
   only colour is whatever the page itself puts behind it.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   2. THE MATERIAL — blur + saturation is the refraction.
   saturate() above 1 is the part most imitations miss: it is what
   separates glass from frosted plastic.
   --------------------------------------------------------------- */
.gs-filter::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--gsf-glass);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    /* Lit from above:
       · row 1  — specular highlight riding the top edge
       · row 2  — inner glow beneath it, giving the pane thickness
       · row 3  — tight contact shadow
       · row 4  — ambient depth shadow that lifts it off the page */
    box-shadow:
        inset 0 1px 0 0 var(--gsf-glass-hi),
        inset 0 10px 22px -16px rgba(255, 255, 255, .9),
        0 1px 2px rgba(12, 35, 64, .04),
        0 22px 48px -30px rgba(12, 35, 64, .26);
    border: 1px solid var(--gsf-stroke);
    pointer-events: none;
    transition: backdrop-filter 300ms var(--gsf-ease), background 300ms var(--gsf-ease),
        box-shadow 300ms var(--gsf-ease);
}

/* Light responds to attention: the pane clarifies and lifts slightly
   while the visitor is working inside it. Static glass reads as a
   picture of glass. */
.gs-filter:hover::after,
.gs-filter:focus-within::after {
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    box-shadow:
        inset 0 1px 0 0 var(--gsf-glass-hi),
        inset 0 10px 22px -16px rgba(255, 255, 255, .95),
        0 1px 2px rgba(12, 35, 64, .05),
        0 28px 56px -30px rgba(12, 35, 64, .30);
}

/* No backdrop-filter (older Firefox, some embedded browsers): fall back
   to an opaque panel. Legibility first — a failed glass effect must not
   leave grey text on a busy field. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gs-filter::after {
        background: #fff;
        border-color: #e4ecf5;
    }
}

/* ---------- Head ---------- */
.gs-filter__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: clamp(18px, 2vw, 24px);
}

.gs-filter__title {
    margin: 0;
    color: var(--gsf-ink);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.gs-filter__subtitle {
    margin: 7px 0 0;
    max-width: 62ch;
    color: var(--gsf-muted);
    font-size: .92rem;
    line-height: 1.6;
}

/* ---------- Field row ---------- */
.gs-filter__row {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 14px;
    align-items: end;
}

.gs-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.gs-field__label {
    color: #5a7186;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------
   Controls — inset glass.
   Fields read as pressed INTO the pane, so their lighting is the
   inverse of the panel's: shadow at the top, highlight at the bottom.
   That single inversion is what makes them feel recessed.
   --------------------------------------------------------------- */
.gs-search {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-search__icon {
    position: absolute;
    inset-inline-start: 15px;
    width: 18px;
    height: 18px;
    color: #7d92a6;
    pointer-events: none;
    transition: color 200ms var(--gsf-ease);
}

.gs-search__input,
.gs-select__button {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--gsf-radius-sm);
    background: rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    box-shadow:
        inset 0 1px 3px rgba(12, 35, 64, .07),
        inset 0 -1px 0 rgba(255, 255, 255, .75);
    color: var(--gsf-ink);
    font-family: inherit;
    font-size: .95rem;
    outline: 0;
    transition: background 200ms var(--gsf-ease), border-color 200ms var(--gsf-ease), box-shadow 200ms var(--gsf-ease);
}

.gs-search__input {
    /* Logical padding so the icon side flips under RTL by itself. */
    padding-inline: 44px 42px;
}

.gs-search__input::placeholder {
    color: #93a6b8;
}

/* Focus lifts the control out of the pane: the inset shadow gives way
   to a coloured halo. */
.gs-search__input:focus,
.gs-select__button:focus-visible {
    border-color: rgba(0, 89, 136, .5);
    background: rgba(255, 255, 255, .72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 0 0 4px rgba(0, 89, 136, .13),
        0 6px 18px -8px rgba(0, 89, 136, .30);
}

.gs-search:focus-within .gs-search__icon {
    color: var(--gsf-blue);
}

/* The native clear button differs per browser; ours replaces it. */
.gs-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.gs-search__clear {
    position: absolute;
    inset-inline-end: 11px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: rgba(219, 231, 242, .8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #4d6379;
    cursor: pointer;
    transition: background 180ms var(--gsf-ease), color 180ms var(--gsf-ease), transform 180ms var(--gsf-ease);
}

.gs-search__clear svg {
    width: 13px;
    height: 13px;
}

.gs-search__clear:hover {
    background: var(--gsf-accent);
    color: #fff;
    transform: scale(1.08);
}

/* ---------- Custom select ---------- */
/* The native <select> stays in the DOM as the form's value carrier but
   never paints — it cannot be themed consistently across browsers, and
   that inconsistency is what made the old bar look unfinished. */
.gs-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.gs-select {
    position: relative;
}

.gs-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

.gs-select__button:hover {
    background: rgba(255, 255, 255, .55);
}

.gs-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-select__button.is-placeholder .gs-select__value {
    color: #8fa1b4;
    font-weight: 400;
}

.gs-select__chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #7d92a6;
    transition: transform 260ms var(--gsf-ease), color 200ms var(--gsf-ease);
}

.gs-select.is-open .gs-select__chevron {
    color: var(--gsf-blue);
    transform: rotate(180deg);
}

.gs-select.is-open .gs-select__button {
    border-color: rgba(0, 89, 136, .45);
    background: rgba(255, 255, 255, .72);
}

/* ---------- Listbox — floating glass ---------- */
/* The menu is the most strongly blurred surface on the page: it sits
   above everything, so it must read as nearer to the viewer. */
.gs-select__list {
    position: absolute;
    z-index: 60;
    inset-inline: 0;
    top: calc(100% + 8px);
    max-height: 280px;
    padding: 7px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    backdrop-filter: blur(34px) saturate(190%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 2px 8px rgba(12, 35, 64, .08),
        0 28px 60px -20px rgba(12, 35, 64, .38);
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    transform-origin: top center;
    visibility: hidden;
    transition:
        opacity 200ms var(--gsf-ease),
        transform 260ms var(--gsf-ease),
        visibility 0s linear 200ms;
}

.gs-select.is-open .gs-select__list {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .gs-select__list,
    .gs-search__input,
    .gs-select__button {
        background: #fff;
        border-color: #dbe7f2;
    }
}

.gs-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 12px;
    color: var(--gsf-ink);
    font-size: .93rem;
    cursor: pointer;
    transition: background 150ms var(--gsf-ease), color 150ms var(--gsf-ease);
}

.gs-option:hover,
.gs-option.is-active {
    background: rgba(0, 89, 136, .09);
}

.gs-option.is-selected {
    background: rgba(0, 89, 136, .13);
    color: var(--gsf-blue);
    font-weight: 600;
}

.gs-option__check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: scale(.6);
    transition: opacity 160ms var(--gsf-ease), transform 220ms var(--gsf-ease);
}

.gs-option.is-selected .gs-option__check {
    opacity: 1;
    transform: scale(1);
}

.gs-option[hidden] {
    display: none;
}

/* ---------- Hierarchy ----------
   A child category is indented and set slightly lighter, with a short rule
   marking the branch. Indentation uses a logical property so the tree grows
   from the correct side under RTL without a second rule. */
.gs-option[data-depth] {
    position: relative;
    padding-inline-start: 30px;
    font-size: .89rem;
}

.gs-option[data-depth]::before {
    content: "";
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(12, 35, 64, .22);
    transform: translateY(-50%);
}

.gs-option[data-depth="2"] {
    padding-inline-start: 48px;
}

.gs-option[data-depth="2"]::before {
    inset-inline-start: 32px;
}

/* A parent carrying children reads as a heading for the group beneath it. */
.gs-option:not([data-depth]) .gs-option__label {
    font-weight: 600;
}

/* ---------- Chips ---------- */
.gs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .55);
}

.gs-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 6px 8px 6px 15px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 2px 10px -4px rgba(12, 35, 64, .2);
    color: var(--gsf-ink);
    font-size: .85rem;
    font-weight: 500;
    animation: gs-chip-in 260ms var(--gsf-ease) both;
}

.gs-chip__label {
    color: #6b8195;
}

.gs-chip__remove {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(12, 35, 64, .12);
    color: #4d6379;
    cursor: pointer;
    transition: background 180ms var(--gsf-ease), color 180ms var(--gsf-ease), transform 180ms var(--gsf-ease);
}

.gs-chip__remove svg {
    width: 11px;
    height: 11px;
}

.gs-chip__remove:hover {
    background: var(--gsf-accent);
    color: #fff;
    transform: scale(1.12);
}

@keyframes gs-chip-in {
    from {
        opacity: 0;
        transform: scale(.9) translateY(-3px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---------- Actions ---------- */
.gs-filter__actions {
    display: flex;
    gap: 11px;
    justify-content: flex-start;
    margin-top: 20px;
}

.gs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 13px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: background 200ms var(--gsf-ease), color 200ms var(--gsf-ease),
        border-color 200ms var(--gsf-ease), transform 200ms var(--gsf-ease),
        box-shadow 200ms var(--gsf-ease);
}

/* The solid button keeps a specular top edge so it belongs to the same
   lighting model as the pane it sits on. */
.gs-btn--solid {
    border: 1px solid rgba(239, 107, 59, .9);
    background: linear-gradient(180deg, #f4794b, var(--gsf-accent));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 6px 18px -8px rgba(239, 107, 59, .6);
}

.gs-btn--solid:hover {
    background: linear-gradient(180deg, #ef6b3b, #d95729);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 10px 24px -8px rgba(239, 107, 59, .7);
}

.gs-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    color: var(--gsf-ink);
}

.gs-btn--ghost:hover {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(0, 89, 136, .4);
    color: var(--gsf-blue);
}

/* With instant filtering live the submit button is redundant. Hidden,
   not removed, so the form still submits on Enter. */
.gs-upgraded [data-gs-submit] {
    display: none;
}

/* ---------- Card filtering ---------- */
/* An attribute rather than a class: the state is legible in devtools
   and cannot collide with the card's own classes. */
.gift-product-card[data-filtered-out] {
    display: none;
}

/* ---------- Empty state ---------- */
.gs-empty {
    padding: 48px 24px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--gsf-radius);
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 18px 44px -26px rgba(12, 35, 64, .3);
    color: #5a7186;
    text-align: center;
    animation: gs-chip-in 280ms var(--gsf-ease) both;
}

.gs-empty__title {
    margin: 0 0 7px;
    color: var(--gsf-ink);
    font-size: 1.08rem;
    font-weight: 700;
}

.gs-empty__copy {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .gs-filter__row {
        grid-template-columns: 1fr 1fr;
    }

    .gs-field--search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .gs-filter {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .gs-filter__row {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .gs-filter__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .gs-filter__actions>* {
        flex: 1;
    }

    /* Heavy blur is expensive on mobile GPUs; the material still reads
       at a lower radius. */
    .gs-filter::after {
        -webkit-backdrop-filter: blur(20px) saturate(175%);
        backdrop-filter: blur(20px) saturate(175%);
    }

    .gs-search__input,
    .gs-select__button {
        min-height: 48px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .gs-filter *,
    .gs-chip,
    .gs-empty {
        animation: none !important;
        transition-duration: 1ms !important;
    }

    .gs-btn--solid:hover,
    .gs-chip__remove:hover,
    .gs-search__clear:hover {
        transform: none;
    }
}

/* =====================================================================
   TAXONOMY CHIP FILTER
   Replaces the dropdown/listbox treatment above with direct, visible
   navigation through the parent → child → grandchild hierarchy.
   ===================================================================== */
.gs-filter {
    padding: clamp(24px, 3vw, 40px);
    background: linear-gradient(145deg, #fff 0%, #f8fbfe 100%);
    border: 1px solid #e4edf5;
    box-shadow: 0 20px 50px -38px rgba(12, 35, 64, .45);
}

.gs-filter::after { display: none; }
.gs-filter__head { margin-bottom: 26px; }
.gs-filter__eyebrow { display: block; color: var(--gsf-accent); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gs-filter__title { margin-top: 6px; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.gs-reset { color: #597087; font-size: .86rem; font-weight: 700; text-decoration: none; }
.gs-reset:hover { color: var(--gsf-accent); }
.gs-filter__form { display: grid; gap: 22px; }

.gs-search--hero { max-width: 760px; }
.gs-search__input { min-height: 58px; border-color: #dce8f1; background: #fff; box-shadow: 0 5px 14px -12px rgba(12,35,64,.28); }
.gs-search__input:focus { border-color: var(--gsf-blue); box-shadow: 0 0 0 4px rgba(0,89,136,.1); }
.gs-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.gs-facet { padding-top: 20px; border-top: 1px solid #e8eff5; }
.gs-facet__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--gsf-ink); font-size: .94rem; font-weight: 800; }
.gs-facet__heading small { color: #8295a6; font-size: .78rem; font-weight: 500; }
.gs-taxonomy-row, .gs-pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
/* ---------------------------------------------------------------
   TAXONOMY DEPTH
   Both child levels previously shared one 18px indent and one guide
   rule, so a three-level tree rendered as three identical bands: the
   grandchildren looked like siblings of the children, and the rule sat
   at 3px while the pills began at 37px, leaving a short grey line
   floating in empty space beside them.

   Depth is now expressed by the indent itself, and the guide rule is
   anchored to the pills it introduces rather than to the row box.
   --------------------------------------------------------------- */
.gs-taxonomy-row--child {
    position: relative;
    margin-top: 9px;
}

.gs-taxonomy-row--child::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(#d7e6f1, rgba(215, 230, 241, .35));
}

.gs-taxonomy-row[data-category-level="1"] { padding-inline-start: 20px; }
.gs-taxonomy-row[data-category-level="2"] { padding-inline-start: 42px; }

/* The second rule marks the deeper branch, offset to sit beside the
   grandchildren rather than on top of the first rule. */
.gs-taxonomy-row[data-category-level="2"]::before { inset-inline-start: 22px; }

.gs-pill, .gs-segment { min-height: 39px; border: 1px solid #dbe6ee; border-radius: 999px; background: #fff; color: #40576c; padding: 8px 14px; font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.gs-pill:hover, .gs-segment:hover { border-color: #91b8d0; color: var(--gsf-blue); transform: translateY(-1px); }
.gs-pill.is-active { border-color: var(--gsf-blue); background: var(--gsf-blue); color: #fff; box-shadow: 0 8px 16px -10px rgba(0,89,136,.75); }
/* Depth reads through weight and tint, not only indentation: a top-level
   category is the heaviest, a child lighter, a grandchild lighter still.
   `#f6fafe` alone was so close to white that all three levels looked the
   same and the tree collapsed into one flat block of chips. */
.gs-pill--child { background: #f5f9fd; border-color: #e2ecf4; font-weight: 600; }
.gs-pill[data-category-depth="2"] {
    background: #fafcfe;
    border-color: #e8f0f6;
    color: #56708a;
    font-size: .83rem;
    font-weight: 550;
}
.gs-pill[data-category-depth="2"] .gs-pill__visual { width: 20px; height: 20px; }
.gs-pill[data-category-depth="2"] .gs-pill__visual svg { width: 13px; height: 13px; }
.gs-pill[hidden] { display: none; }
.gs-segmented { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid #deE8ef; border-radius: 16px; background: #f1f6f9; }
.gs-segment { min-height: 36px; border: 0; border-radius: 11px; background: transparent; padding: 7px 12px; }
.gs-segment.is-active { background: #fff; color: var(--gsf-blue); box-shadow: 0 3px 10px -7px rgba(12,35,64,.6); }
.gs-selection-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #567087; font-size: .86rem; font-weight: 650; }
.gs-selection-summary::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e3f2eb; color: #18794e; }
.gs-fallback-submit { align-self: start; min-height: 42px; border: 0; border-radius: 12px; background: var(--gsf-accent); color: #fff; padding: 0 18px; font: inherit; font-weight: 700; cursor: pointer; }
.gs-filter.is-loading { opacity: .84; }
.gs-filter.is-loading::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); pointer-events: none; animation: gs-loading 1s linear infinite; }
@keyframes gs-loading { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (min-width: 641px) { .gs-fallback-submit { display: none; } }
@media (max-width: 640px) { .gs-filter { padding: 22px 17px; } .gs-facet__heading { align-items: flex-start; flex-direction: column; gap: 3px; } .gs-taxonomy-row, .gs-pill-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; } .gs-taxonomy-row::-webkit-scrollbar, .gs-pill-row::-webkit-scrollbar { display: none; } .gs-pill { flex: 0 0 auto; } .gs-segmented { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; } }

/* =====================================================================
   COMPACT FACET SWITCHER
   One quiet toolbar opens one focused "cloud" at a time. This keeps the
   catalog area calm and makes switching from categories to brands instant.
   ===================================================================== */
.gs-filter__form { gap: 14px; }
.gs-search--hero { max-width: 100%; }
.gs-search__input { min-height: 50px; }

.gs-filter-switcher {
    display: inline-flex;
    align-items: center;
    /* The form is a grid, so `align-self` governs the vertical axis only and
       left the toolbar stretched across the full row as one long empty
       stripe. `justify-self` is the inline-axis equivalent: the toolbar now
       hugs its tabs and sits at the row's start in both LTR and RTL. */
    align-self: start;
    justify-self: start;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid #dce7ef;
    border-radius: 15px;
    background: #f3f7fa;
    box-shadow: inset 0 1px 2px rgba(12, 35, 64, .04);
    scrollbar-width: none;
}
.gs-filter-switcher::-webkit-scrollbar { display: none; }
.gs-filter-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 22px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #62798d;
    font: inherit;
    font-size: .9rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.gs-filter-tab:hover { color: var(--gsf-blue); }
.gs-filter-tab:focus-visible { outline: 3px solid rgba(0, 89, 136, .24); outline-offset: 1px; }
.gs-filter-tab.is-active {
    background: #fff;
    color: var(--gsf-blue);
    box-shadow: 0 3px 10px -7px rgba(12, 35, 64, .58);
}
.gs-filter-tab.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 20px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--gsf-accent);
}

.gs-cloud-panel {
    /* No min-height: it reserved space for a taxonomy that may not exist. On a
       catalogue with a handful of categories that floor showed as an empty
       band under the chips, which read as a rendering fault rather than a
       deliberate panel. The padding alone gives the material its body. */
    padding: 16px 18px;
    border: 1px solid #e3ebf2;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff, #f8fbfd);
    box-shadow: 0 10px 22px -22px rgba(12, 35, 64, .55);
    animation: gs-cloud-in 220ms cubic-bezier(.22, 1, .36, 1) both;
}
.gs-cloud-panel[hidden] { display: none; }
.gs-cloud-panel__intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    color: var(--gsf-ink);
    font-size: .9rem;
    font-weight: 800;
}
.gs-cloud-panel__intro small { color: #8094a6; font-size: .78rem; font-weight: 500; }
.gs-cloud-panel .gs-taxonomy-row--child { margin-top: 11px; }
.gs-cloud-panel .gs-segmented { max-width: 100%; }
@keyframes gs-cloud-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* The phone filter is a separate component (see rewards-mobile.css), which
   hides the chip switcher and cloud panels below 768px. These rules therefore
   only take effect between 641px and 767px — the band where this file's own
   640px breakpoint and the phone component's 767px one do not meet. They are
   kept so the toolbar degrades on its own rather than depending on the other
   stylesheet loading. */
@media (max-width: 767px) {
    .rewards-page .gs-filter-switcher {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
        gap: 4px;
    }

    .rewards-page .gs-filter-tab,
    .rewards-page .gs-filter-all {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 10px;
        white-space: normal;
        line-height: 1.2;
    }

    .rewards-page .gs-filter-tab::after { inset-inline: 14px; }

    .rewards-page .gs-cloud-panel {
        padding: 15px 13px;
        border-radius: 16px;
    }

    .gs-cloud-panel__intro { align-items: flex-start; flex-direction: column; gap: 3px; }

    /* Category and brand pills remain compact, but their scroll behaviour is
       intentional: one row, touch momentum, and snapping to a complete pill
       rather than partially cut options at either edge. */
    .rewards-page .gs-taxonomy-row,
    .rewards-page .gs-pill-row {
        gap: 8px;
        padding-inline: 1px 18px;
        scroll-padding-inline: 1px;
        scroll-snap-type: inline mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .rewards-page .gs-taxonomy-row .gs-pill,
    .rewards-page .gs-pill-row .gs-pill { scroll-snap-align: start; }

    .rewards-page .gs-segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
    }

    .rewards-page .gs-segment {
        min-width: 0;
        min-height: 42px;
        padding-inline: 8px;
        white-space: normal;
        line-height: 1.25;
    }

    /* Five sorting choices occupy two rows; let the lone final option use
       the row instead of looking like a broken empty grid. */
    .rewards-page .gs-segment:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Every option enters the cloud in sequence. The delay is set by the
   controller script, so the rhythm adapts to the actual number of choices. */
.gs-cloud-panel.is-cloud-opening .gs-pill:not([hidden]),
.gs-cloud-panel.is-cloud-opening .gs-segment:not([hidden]) {
    animation: gs-cloud-item-in 360ms cubic-bezier(.22, 1, .36, 1) var(--gs-cloud-delay, 0ms) both;
}
@keyframes gs-cloud-item-in {
    from { opacity: 0; transform: translateY(-9px) scale(.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.gs-pill--visual,
.gs-pill--brand,
.gs-pill--all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gs-pill__visual,
.gs-brand-mark {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 23px;
    height: 23px;
    overflow: hidden;
    border-radius: 8px;
    background: #e8f1f7;
    color: var(--gsf-blue);
}
.gs-pill__visual svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gs-pill__visual i { font-size: .9rem; line-height: 1; }
.gs-pill__visual > i {
    display: block !important;
    width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    max-height: 15px !important;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 15px !important;
    text-align: center;
}
.gs-pill__visual > i::before { font-size: inherit !important; line-height: inherit !important; }
.gs-pill__visual img,
.gs-brand-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}
.gs-pill.is-active .gs-pill__visual { background: rgba(255, 255, 255, .22); color: #fff; }
.gs-brand-mark {
    border-radius: 50%;
    background: #edf3f7;
    color: #42647d;
    font-size: .7rem;
    font-weight: 850;
}
.gs-pill.is-active .gs-brand-mark { background: rgba(255, 255, 255, .22); color: #fff; }
.gs-cloud-panel .gs-pill.is-active,
.gs-cloud-panel .gs-pill.is-active > span:not(.gs-pill__visual):not(.gs-brand-mark) {
    color: #fff !important;
}
.gs-cloud-panel .gs-pill.is-active .gs-brand-mark,
.gs-cloud-panel .gs-pill.is-active .gs-pill__visual {
    color: #fff !important;
}
.gs-filter-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    margin-inline-start: 4px;
    padding: 5px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #73899b;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}
.gs-filter-all:hover,
.gs-filter-all:focus-visible { background: #fff; color: var(--gsf-accent); outline: 0; }
.gs-filter-all.is-active {
    position: relative;
    background: #fff;
    color: var(--gsf-blue);
    box-shadow: 0 3px 10px -7px rgba(12, 35, 64, .58);
}
.gs-filter-all.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--gsf-accent);
}

@media (prefers-reduced-motion: reduce) {
    .gs-cloud-panel.is-cloud-opening .gs-pill:not([hidden]),
    .gs-cloud-panel.is-cloud-opening .gs-segment:not([hidden]) { animation: none; }
}

/* =====================================================================
   PAGINATION
   =====================================================================
   Paired with resources/views/vendor/pagination/rewards.blade.php.

   The store previously rendered Laravel's default Bootstrap pager, which
   is direction-blind: in Arabic the arrows read backwards, the numbers
   ran 2 then 1, and its chevron SVG carried no dimensions, so it painted
   at whatever size the surrounding CSS happened to allow — in this store
   that was roughly 120px of solid grey.

   Everything here is text glyphs with fixed control sizes, so nothing can
   inflate again, and the layout follows the document direction on its own
   through logical properties.
   ===================================================================== */

.gs-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
}

.gs-pager__list {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gs-pager__item {
    display: flex;
}

/* One fixed box for every control — number, arrow or disabled state — so
   the row cannot be knocked out of alignment by its contents. */
.gs-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(12, 35, 64, .10);
    border-radius: 11px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    color: var(--rewards-ink, #0c2340);
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.gs-pager__link:hover:not(.is-disabled):not(.is-current) {
    border-color: rgba(0, 89, 136, .35);
    background: #fff;
    color: var(--rewards-blue, #005988);
    transform: translateY(-1px);
}

.gs-pager__link:focus-visible {
    outline: 2px solid var(--rewards-blue, #005988);
    outline-offset: 3px;
}

/* The current page is the one piece of state in this row, so it is the
   only element that carries the accent. */
.gs-pager__link.is-current {
    border-color: var(--rewards-blue, #005988);
    background: var(--rewards-blue, #005988);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(0, 89, 136, .5);
    cursor: default;
}

.gs-pager__link.is-disabled {
    opacity: .38;
    cursor: not-allowed;
}

/* Text glyphs, not SVG: they inherit font-size and can never render at an
   unintended size the way an unsized <svg> can. */
.gs-pager__arrow {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
    /* Optical centring — these glyphs sit slightly high in their em box. */
    transform: translateY(-1px);
}

.gs-pager__dots {
    display: inline-flex;
    align-items: flex-end;
    height: 42px;
    padding: 0 4px;
    color: #8fa1b4;
    font-size: .95rem;
}

.gs-pager__summary {
    margin: 0;
    color: #5a7186;
    font-size: .88rem;
    text-align: center;
}

@media (max-width: 640px) {
    .gs-pager {
        margin-top: 28px;
    }

    .gs-pager__list {
        gap: 6px;
    }

    .gs-pager__link {
        min-width: 40px;
        height: 40px;
        padding: 0 9px;
        font-size: .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gs-pager__link {
        transition: none;
    }

    .gs-pager__link:hover:not(.is-disabled):not(.is-current) {
        transform: none;
    }
}

/* ---------------------------------------------------------------
   PAGING FEEL
   ---------------------------------------------------------------
   Changing page is a full reload, and the browser was landing the
   visitor at the very top of the store — above the hero, the benefits
   and the filter — so they had to scroll back down to the products
   they had just asked for. The pager links now carry the catalogue's
   fragment; scroll-margin keeps the grid clear of the fixed header
   when the browser jumps to it, and smooth scrolling turns the jump
   into a short glide instead of a snap.

   scroll-margin-top is the whole trick: without it the anchor lands
   flush with the viewport top and the sticky header covers the first
   row of products. */
#reward-catalog-list {
    scroll-margin-top: clamp(90px, 10vw, 130px);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------
   TRAILING ROW
   ---------------------------------------------------------------
   14 products across a 4-column grid leaves a final row holding two
   cards and two empty tracks — a visible hole on the last row that
   reads as missing content rather than as the end of the page.

   The cards are centred within their row instead of being pinned to
   the start, so the remainder reads as a deliberate close. This is
   presentation only; it changes no card size and no ordering. */
.rewards-page .card-grid {
    justify-content: center;
}

/* Each card still fills its own track, so centring the row does not
   shrink the cards on a full row. */
.rewards-page .card-grid > * {
    width: 100%;
}