/*
 * Gift store — mobile endpoint
 *
 * This file is deliberately loaded last on the catalogue page.  The store
 * inherited several desktop-first B2B rules with overlapping mobile media
 * queries; keeping the phone contract here prevents a later generic rule
 * from turning the catalogue back into a squeezed desktop layout.
 */

/* The phone filter is off above the breakpoint.  The <select>s inside .gs-m
   are the form's state carriers, so they stay in the DOM at every viewport
   and are hidden by .gs-native in rewards-filter-premium.css — hiding the
   wrapper here would take the desktop chips' backing fields with them, so
   only the visible mobile affordances are switched off. */
.gs-m__triggers,
.gs-m__chips,
.gs-sheet {
    display: none;
}

@media (max-width: 767px) {
    /* The master layout is shared by pages with very different canvases.
       Declare the mobile viewport contract here as well, so an oversized
       sibling cannot enlarge the containing block of this RTL catalogue. */
    html:has(body.rewards-page),
    body.rewards-page {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Clip side-scroll on the root element only. `overflow-x: hidden` on the
       BODY makes it a scroll container, which in several mobile engines then
       acts as the containing block for `position: fixed` children — that is
       what left the filter sheet positioned against the document instead of
       the viewport. The root element clips just as effectively without
       creating that containing block. */
    html:has(body.rewards-page) {
        overflow-x: hidden;
    }

    /* Also overrides `.b2b-page{overflow-x:hidden}` from
       b2b-layout-unified.css, which creates the same scroll container.
       Guarded: where `clip` is unsupported the declaration would be dropped
       and the old `hidden` would silently remain in force. */
    @supports (overflow-x: clip) {
        body.rewards-page,
        body.b2b-page.rewards-page {
            overflow-x: clip;
        }
    }

    /* A single oversized child in an RTL page can move the visual viewport to
       the side in Safari and some Android browsers.  The catalogue's direct
       layout layers are therefore explicitly allowed to shrink. */
    .rewards-page .rewards-portal-page,
    .rewards-page .portal-shell,
    .rewards-page .portal-section,
    .rewards-page .reward-journey,
    .rewards-page .reward-journey__track,
    .rewards-page .collection-grid,
    .rewards-page .card-grid {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Navigation belongs above the page on a phone.  It must reserve its own
       height instead of floating over the hero title and its actions.  The
       open-menu state remains fixed through the existing .is-menu-open rule. */
    .rewards-page.b2b-page .b2b-header-ref:not(.is-menu-open) {
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        transform: none !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 8px 20px rgba(12, 35, 64, .07) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        box-sizing: border-box;
    }

    .rewards-page.b2b-page .b2b-header-ref__bar {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rewards-page.b2b-page .b2b-header-ref__brand img {
        width: 68px !important;
        max-width: 68px !important;
        max-height: 42px !important;
    }

    .rewards-page.b2b-page .b2b-header-ref__menu-toggle {
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(12, 35, 64, .12) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 5px 14px rgba(12, 35, 64, .08) !important;
    }

    .rewards-page .rewards-portal-page {
        min-height: 0;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 12px 0 48px !important;
        box-sizing: border-box !important;
    }

    .rewards-page .portal-shell {
        width: calc(100% - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-inline: auto !important;
    }

    /* Hero: stable card geometry, image remains visible and the copy always
       has a dedicated high-contrast surface. */
    .rewards-page .rewards-hero {
        width: calc(100% - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        min-height: 440px !important;
        height: min(122vw, 510px) !important;
        margin: 0 auto 32px !important;
        border-radius: 24px !important;
        background-position: center !important;
        box-sizing: border-box !important;
        touch-action: pan-y;
        box-shadow: 0 18px 34px -26px rgba(12, 35, 64, .45);
    }

    .rewards-page .rewards-hero__slide,
    .rewards-page .rewards-hero__media,
    .rewards-page .rewards-hero__overlay {
        inset: 0 !important;
    }

    .rewards-page .rewards-hero__media img {
        object-position: center !important;
    }

    .rewards-page .rewards-hero__overlay {
        background: linear-gradient(180deg, rgba(4, 27, 48, .06) 15%, rgba(4, 27, 48, .72) 100%) !important;
    }

    .rewards-page .rewards-hero__content,
    .rewards-page .rewards-hero .hero-grid {
        width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        box-sizing: border-box;
    }

    .rewards-page .rewards-hero__content {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: stretch !important;
    }

    .rewards-page .rewards-hero .hero-copy {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, .38);
        border-radius: 18px;
        background: rgba(255, 255, 255, .93);
        box-shadow: 0 12px 28px rgba(3, 29, 51, .22);
        -webkit-backdrop-filter: blur(14px) saturate(130%);
        backdrop-filter: blur(14px) saturate(130%);
    }

    .rewards-page .rewards-hero .hero-title {
        font-size: clamp(1.38rem, 6vw, 1.72rem) !important;
        line-height: 1.25 !important;
    }

    .rewards-page .rewards-hero .hero-subtitle {
        margin: 6px 0 0 !important;
        font-size: clamp(1rem, 4.7vw, 1.18rem) !important;
        line-height: 1.3 !important;
    }

    .rewards-page .rewards-hero .hero-description {
        display: -webkit-box;
        margin-top: 10px !important;
        overflow: hidden;
        font-size: .9rem !important;
        line-height: 1.6 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .rewards-page .rewards-hero .hero-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 15px !important;
    }

    .rewards-page .rewards-hero .hero-cta,
    .rewards-page .rewards-hero .hero-secondary {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding-inline: 8px !important;
        box-sizing: border-box !important;
        font-size: .8rem !important;
    }

    .rewards-page .rewards-hero__controls {
        right: 14px !important;
        bottom: 14px !important;
        transform: scale(.82);
        transform-origin: bottom right;
    }

    /* Prize-choice cards use supplied editorial artwork.  Their old desktop
       type sat in the middle of the artwork, where it collided with the
       large numeral and product silhouette.  On touch screens the label now
       owns a quiet lower corner with one consistent reading order. */
    .rewards-page .reward-choice-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    .rewards-page .reward-choice-card {
        width: 100% !important;
        min-height: 148px !important;
        aspect-ratio: 16 / 8 !important;
        border-radius: 15px !important;
        isolation: isolate;
        box-sizing: border-box;
    }

    .rewards-page .reward-choice-card img {
        transform: none !important;
        object-position: center !important;
    }

    .rewards-page .reward-choice-card::after {
        content: '';
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: 0;
        left: 0;
        height: 52%;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .94) 72%);
    }

    .rewards-page .reward-choice-card span {
        z-index: 2 !important;
        top: auto !important;
        right: auto !important;
        bottom: 13px !important;
        left: 14px !important;
        width: auto !important;
        max-width: calc(100% - 28px);
        padding: 7px 10px !important;
        transform: none !important;
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: 11px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 6px 16px rgba(12, 35, 64, .08);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .rewards-page .rewards-choice-section.is-rtl .reward-choice-card span {
        right: 14px !important;
        left: auto !important;
        text-align: right;
    }

    .rewards-page .reward-choice-card strong,
    .rewards-page .reward-choice-card b {
        display: block;
        white-space: nowrap;
    }

    .rewards-page .reward-choice-card strong {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    .rewards-page .reward-choice-card b {
        margin-top: 2px;
        font-size: 1.2rem !important;
        line-height: 1.15 !important;
    }

    /* =================================================================
       PHONE FILTER
       -----------------------------------------------------------------
       One interface, declared once.  An earlier pass shipped three
       parallel mobile filters — native <select> fields, a bottom sheet,
       and the desktop chip switcher — each styled in full and then
       switched off again further down the same media query.  The last
       one standing inherited half the geometry of the two it overrode,
       which is what made this view look broken on a phone.

       The contract now:
         · The desktop chip interface is hidden, once, at the top.
         · Three triggers open one bottom sheet.  .gs-filter sets
           `isolation: isolate`, which traps any descendant's z-index in
           its stacking context, so the script re-parents the sheet to
           <body>; it is `position: fixed` and no ancestor creates a
           containing block for it.
         · The <select>s stay in the DOM as the form's state carriers
           and are never shown; JS keeps them in sync.

       Values follow the desktop tokens in rewards-filter-premium.css
       (--gsf-blue / ink / accent) so both viewports read as one product.
       ================================================================= */

    /* Declared on the page root, not on .gs-filter: the sheet is moved out
       to <body>, and custom properties inherit through the DOM — scoping
       them to the panel left every var() inside the sheet unresolved, which
       silently dropped its tint, ticks and borders. */
    body.rewards-page {
        --gsm-line: #e2ebf3;
        --gsm-line-soft: #eef3f8;
        --gsm-ink: #12314c;
        --gsm-muted: #64809a;
        --gsm-blue: var(--rewards-blue, #005988);
        --gsm-tint: #eef7fc;
        --gsm-field: 15px;
    }

    .rewards-page .gs-filter {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
        padding: 18px 14px 20px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    /* The desktop facet interface is switched off in one place. */
    .rewards-page .gs-filter-switcher,
    .rewards-page .gs-cloud-panel,
    .rewards-page .gs-selection-summary,
    .rewards-page .gs-fallback-submit {
        display: none !important;
    }

    .rewards-page .gs-filter__head {
        align-items: flex-start !important;
        gap: 10px;
        margin-bottom: 16px !important;
    }

    .rewards-page .gs-filter__title {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    .rewards-page .gs-filter__subtitle {
        font-size: .88rem !important;
        line-height: 1.6 !important;
    }

    .rewards-page .gs-filter__form {
        display: grid;
        gap: 12px;
    }

    .rewards-page .gs-search--hero,
    .rewards-page .gs-search__input {
        min-height: 52px !important;
    }

    /* --- Triggers ---------------------------------------------------- */

    .rewards-page .gs-m {
        display: grid;
        gap: 10px;
    }

    .rewards-page .gs-m__triggers {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .rewards-page .gs-m__trigger {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2px 8px;
        min-width: 0;
        padding: 11px 13px;
        border: 1px solid var(--gsm-line);
        border-radius: var(--gsm-field);
        background: #fff;
        box-shadow: 0 6px 16px -14px rgba(12, 35, 64, .55);
        color: var(--gsm-ink);
        font: inherit;
        text-align: start;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .rewards-page .gs-m__trigger--wide {
        grid-column: 1 / -1;
    }

    .rewards-page .gs-m__trigger-label {
        grid-column: 1;
        color: var(--gsm-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .01em;
    }

    .rewards-page .gs-m__trigger-value {
        grid-column: 1;
        min-width: 0;
        overflow: hidden;
        color: var(--gsm-ink);
        font-size: .95rem;
        font-weight: 800;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rewards-page .gs-m__trigger-chevron {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 16px;
        height: 16px;
        color: var(--gsm-blue);
        /* The icon is drawn pointing down; it must not mirror in RTL. */
        transform: none;
    }

    /* A trigger holding a narrowing choice is visibly distinct from one
       still on its default — the difference a visitor scans for. */
    .rewards-page .gs-m__trigger.is-set {
        border-color: rgba(0, 89, 136, .38);
        background: var(--gsm-tint);
        box-shadow: 0 8px 18px -14px rgba(0, 89, 136, .75);
    }

    .rewards-page .gs-m__trigger:active {
        transform: scale(.985);
    }

    .rewards-page .gs-m__trigger:focus-visible {
        outline: 2px solid var(--gsm-blue);
        outline-offset: 2px;
    }

    /* --- Active selection chips -------------------------------------- */

    .rewards-page .gs-m__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        align-items: center;
    }

    .rewards-page .gs-m__chips[hidden] {
        display: none;
    }

    .rewards-page .gs-m__chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        max-width: 100%;
        padding: 6px 10px 6px 8px;
        border: 1px solid rgba(0, 89, 136, .25);
        border-radius: 999px;
        background: var(--gsm-tint);
        color: #0b5c87;
        font: inherit;
        font-size: .8rem;
        font-weight: 750;
        cursor: pointer;
    }

    .rewards-page .gs-m__chip span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rewards-page .gs-m__chip::after {
        content: '×';
        display: grid;
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        place-items: center;
        border-radius: 50%;
        background: rgba(0, 89, 136, .14);
        font-size: .95rem;
        line-height: 1;
    }

    .rewards-page .gs-m__chip--reset {
        border-color: var(--gsm-line);
        background: #fff;
        color: var(--gsm-muted);
    }

    .rewards-page .gs-m__chip--reset::after {
        display: none;
    }

    /* --- Bottom sheet ------------------------------------------------- */

    /* `position: fixed` is NOT reliable for this sheet.
       Both this file and b2b-layout-unified.css set `overflow-x: hidden` on
       html/body to stop RTL side-scroll. That makes the body a scroll
       container, and a scroll container is a containing block for fixed
       descendants in several mobile engines — the scrim painted while the
       dialog was positioned against the full document instead of the
       viewport, so the page dimmed and no sheet appeared.

       Anchoring to the small viewport unit with `position: fixed` plus an
       explicit height sidesteps that: the height no longer depends on the
       containing block resolving to the viewport. */
    .rewards-page .gs-sheet {
        position: fixed;
        z-index: 10050;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        display: block;
    }

    /* Safety net. The script lifts the sheet out to <body>, but if that ever
       fails to run the sheet stays inside .gs-filter, whose `isolation:
       isolate` traps its z-index below the panel's own glass layer — the page
       dims and no dialog appears. Dropping the panel's isolation and its
       backdrop pseudo-element while a sheet is open keeps the filter usable
       in that fallback; the glass is purely decorative here. */
    .rewards-page .gs-filter:has(.gs-sheet:not([hidden])) {
        isolation: auto;
    }

    .rewards-page .gs-filter:has(.gs-sheet:not([hidden]))::after {
        display: none;
    }

    .rewards-page .gs-sheet[hidden] {
        display: none;
    }

    .rewards-page .gs-sheet__scrim {
        position: absolute;
        inset: 0;
        background: rgba(8, 28, 45, .5);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        /* Same contract as the dialog: opaque unconditionally, animated only
           while open (below), never depending on a keyframe to become
           visible. */
        opacity: 1;
    }

    .rewards-page .gs-sheet:not([hidden]) .gs-sheet__scrim {
        animation: gs-sheet-fade 200ms ease;
    }

    .rewards-page .gs-sheet__dialog {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        max-height: min(78dvh, 660px);
        border-radius: 26px 26px 0 0;
        background: #fff;
        box-shadow: 0 -18px 44px rgba(4, 27, 48, .26);
        /* Visibility must NEVER depend on an animation.
           This element exists in the DOM from page load inside a `hidden`
           sheet. An `animation` declared here therefore runs (and finishes)
           while the sheet is still display:none, and the dialog was left
           holding that animation's `opacity: 0` — the page dimmed and the
           dialog was fully transparent, though correctly positioned and even
           hit-testable. That was the actual bug behind every symptom.

           The resting state is now unconditional and animation-free. The
           entrance is attached to the OPEN state only (below), so it can only
           ever play when the sheet is on screen. */
        transform: none;
        opacity: 1;
    }

    /* The entrance runs only while the sheet is open; the dialog's visible
       state above never depends on it reaching its final keyframe. */
    .rewards-page .gs-sheet:not([hidden]) .gs-sheet__dialog {
        animation: gs-sheet-in 240ms cubic-bezier(.22, 1, .36, 1);
    }

    /* Motion is a nicety; the sheet must still be usable without it. */
    @media (prefers-reduced-motion: reduce) {
        .rewards-page .gs-sheet__dialog,
        .rewards-page .gs-sheet__scrim {
            animation: none;
        }
    }

    .rewards-page .gs-sheet__grip {
        width: 38px;
        height: 4px;
        margin: 9px auto 0;
        border-radius: 999px;
        background: #d5e0ea;
    }

    .rewards-page .gs-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 18px 13px;
        border-bottom: 1px solid var(--gsm-line-soft);
    }

    .rewards-page .gs-sheet__title {
        margin: 0;
        color: var(--gsm-ink);
        font-size: 1.1rem;
        font-weight: 800;
    }

    .rewards-page .gs-sheet__close {
        display: grid;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        place-items: center;
        border: 1px solid var(--gsm-line);
        border-radius: 50%;
        background: #f7fafc;
        color: #47627c;
        cursor: pointer;
    }

    .rewards-page .gs-sheet__close svg {
        width: 15px;
        height: 15px;
    }

    .rewards-page .gs-sheet__body {
        min-height: 0;
        padding: 12px 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* `display` here would otherwise beat the `hidden` attribute's UA rule and
       render all three option lists at once, so the inactive panels stay out
       of flow explicitly. */
    .rewards-page .gs-sheet__panel {
        display: grid;
        gap: 6px;
    }

    .rewards-page .gs-sheet__panel[hidden] {
        display: none;
    }

    .rewards-page .gs-sheet__search {
        position: relative;
        display: block;
        margin-bottom: 8px;
    }

    .rewards-page .gs-sheet__search svg {
        position: absolute;
        inset-inline-start: 13px;
        top: 50%;
        width: 17px;
        height: 17px;
        color: #7d97ac;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .rewards-page .gs-sheet__search input {
        width: 100%;
        min-height: 46px;
        padding-block: 0;
        padding-inline: 38px 14px;
        box-sizing: border-box;
        border: 1px solid var(--gsm-line);
        border-radius: 13px;
        background: #f8fbfd;
        color: var(--gsm-ink);
        font: inherit;
        font-size: .95rem;
    }

    .rewards-page .gs-sheet__search input:focus {
        border-color: var(--gsm-blue);
        outline: 0;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0, 89, 136, .1);
    }

    .rewards-page .gs-sheet__empty {
        margin: 14px 0;
        color: var(--gsm-muted);
        font-size: .9rem;
        text-align: center;
    }

    /* The brand search hides non-matching options via the `hidden` attribute;
       without this guard `display: flex` would keep them all visible. */
    .rewards-page .gs-opt[hidden] {
        display: none;
    }

    .rewards-page .gs-opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 50px;
        padding: 11px 14px;
        border: 1px solid transparent;
        border-radius: 13px;
        background: #f8fafc;
        color: #2b4a63;
        font: inherit;
        font-size: .94rem;
        font-weight: 700;
        text-align: start;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .rewards-page .gs-opt__text {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Depth is expressed with an indent plus a rule, so a third-level
       category still reads as a child once the list is scrolled. */
    .rewards-page .gs-opt[data-gs-mobile-depth="1"],
    .rewards-page .gs-opt[data-gs-mobile-depth="2"] {
        position: relative;
        background: #fff;
        font-weight: 650;
    }

    .rewards-page .gs-opt[data-gs-mobile-depth="1"] { padding-inline-start: 26px; }
    .rewards-page .gs-opt[data-gs-mobile-depth="2"] { padding-inline-start: 40px; }

    .rewards-page .gs-opt[data-gs-mobile-depth="1"]::before,
    .rewards-page .gs-opt[data-gs-mobile-depth="2"]::before {
        content: '';
        position: absolute;
        inset-inline-start: 14px;
        top: 50%;
        width: 7px;
        height: 1px;
        background: #c6d5e2;
    }

    .rewards-page .gs-opt[data-gs-mobile-depth="2"]::before {
        inset-inline-start: 28px;
    }

    .rewards-page .gs-opt__tick {
        display: grid;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        place-items: center;
        border: 1px solid #cfdce7;
        border-radius: 50%;
        background: #fff;
    }

    .rewards-page .gs-opt.is-selected {
        border-color: rgba(0, 89, 136, .3);
        background: var(--gsm-tint);
        color: #0b5c87;
        font-weight: 800;
    }

    .rewards-page .gs-opt.is-selected .gs-opt__tick {
        border-color: var(--gsm-blue);
        background: var(--gsm-blue);
    }

    /* The check is drawn with physical border sides and a fixed rotation:
       `border-inline-end` would flip the open corner under RTL and turn the
       tick into an arrowhead. Positioned absolutely rather than via the
       parent's grid centring, whose optical centre sits low once the shape
       is rotated. */
    .rewards-page .gs-opt.is-selected .gs-opt__tick {
        position: relative;
    }

    .rewards-page .gs-opt.is-selected .gs-opt__tick::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 8px;
        height: 4px;
        border: 1.8px solid #fff;
        border-top: 0;
        border-right: 0;
        border-radius: 1px;
        transform: rotate(-45deg);
    }

    .rewards-page .gs-sheet__foot {
        padding: 11px 14px max(14px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--gsm-line-soft);
    }

    .rewards-page .gs-sheet__reset {
        width: 100%;
        min-height: 46px;
        border: 1px solid var(--gsm-line);
        border-radius: 13px;
        background: #fff;
        color: #4b6579;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }

    body.gs-mobile-filter-open {
        overflow: hidden !important;
    }

    .rewards-page .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Slides in from a small offset, never a full off-screen translate: even
       sampled at its very first frame the dialog stays on screen. */
    @keyframes gs-sheet-in {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes gs-sheet-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* One readable item per row is the correct phone inventory density.
       A two-column card grid truncates Arabic names and makes quote actions
       look like duplicated buttons. */
    .rewards-page #reward-catalog-list .card-grid,
    .rewards-page .card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .rewards-page .gift-product-card {
        border-radius: 20px !important;
    }

    .rewards-page .gift-product-card__image {
        aspect-ratio: 16 / 9;
        padding: 12px 18px !important;
    }

    .rewards-page .gift-product-card__content {
        min-height: 0 !important;
        padding: 16px !important;
    }

    .rewards-page .gift-product-card__title {
        font-size: 1.05rem !important;
        line-height: 1.55 !important;
    }

    /* The site-wide floating controls cover filter choices and product CTAs
       at this viewport. They remain available on desktop but not above the
       store's primary purchasing flow on a phone. */
    body.rewards-page .progress-wrap,
    body.rewards-page .sm-assistant {
        display: none !important;
    }

}

@media (max-width: 380px) {
    .rewards-page .rewards-hero {
        min-height: 420px !important;
    }

    .rewards-page .rewards-hero .hero-actions {
        grid-template-columns: 1fr !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .rewards-page .rewards-hero__slide,
    .rewards-page .rewards-hero__halo,
    .rewards-page .rewards-hero__line,
    .rewards-page .gs-cloud-panel,
    .rewards-page .gs-cloud-panel * {
        animation: none !important;
        transition: none !important;
    }
}