/* RightPay Shop — Gloss System (css/gloss-system.css) ONE cohesive "premium
   gloss" visual language for every customer-facing surface: imagery, cards,
   controls, sheets, chips and status UI. */


/* 1. TOKENS The single source of truth for the gloss. Retuning the system
   means editing values here — never adding a new shadow to an individual
   component. */
:root {
    /* The app ships a single light theme. */
    color-scheme: light;

    /* ── Geometry ─────────────────────────────────────────────────────── */
    --rp-card-radius:       14px;   /* cards, tiles, media wells            */
    --rp-card-radius-sm:    10px;   /* nested media inside a card           */
    --rp-control-radius:    12px;   /* buttons, inputs, chips with corners  */

    /* ── Surfaces A white sheen over a white card is invisible, so the
       gloss comes from the base cooling toward the bottom edge while the
       top stays pure white — light falling from above. */
    --rp-surface:        #ffffff;
    --rp-surface-sunk:   #f5f8fb;
    --rp-surface-gloss:  linear-gradient(180deg,
                            #ffffff 0%,
                            #ffffff 46%,
                            #fcfdfe 74%,
                            #f5f8fb 100%);

    /* Media well: the field a contained product image is lit against. */
    --rp-media-well: radial-gradient(112% 86% at 50% 12%,
                        #ffffff 0%,
                        #fafcfe 55%,
                        #eef2f7 100%);

    /* Contact shadow pooled under a floating product cut-out. */
    --rp-media-contact: radial-gradient(56% 13% at 50% 93%,
                        rgba(15, 23, 42, 0.085) 0%,
                        rgba(15, 23, 42, 0) 72%);

    /* ── Specular highlight ("the gloss") ─────────────────────────────────
       Light enters top-left and falls off before the midpoint, so the lower
       half of the surface stays clean and legible. */
    --rp-gloss-highlight: linear-gradient(127deg,
                            rgba(255, 255, 255, 0.55) 0%,
                            rgba(255, 255, 255, 0.16) 28%,
                            rgba(255, 255, 255, 0) 52%);

    /* Photography variant — a top-edge sheen only, no diagonal streak. */
    --rp-gloss-photo: linear-gradient(180deg,
                            rgba(255, 255, 255, 0.22) 0%,
                            rgba(255, 255, 255, 0.07) 18%,
                            rgba(255, 255, 255, 0) 42%);

    /* Glass chips/controls: a short top sheen over an existing fill. */
    --rp-gloss-chip: linear-gradient(180deg,
                            rgba(255, 255, 255, 0.34) 0%,
                            rgba(255, 255, 255, 0.06) 46%,
                            rgba(255, 255, 255, 0) 100%);

    /* ── Hairlines / rims A cool ink tint reads cleaner over gray section
       panels than an opaque gray, which bands against #f8f9fa. */
    --rp-rim:             rgba(15, 23, 42, 0.07);
    --rp-rim-strong:      rgba(15, 23, 42, 0.13);
    --rp-rim-inset:       inset 0 0 0 1px rgba(15, 23, 42, 0.05);
    --rp-rim-inset-light: inset 0 0 0 1px rgba(255, 255, 255, 0.42);

    /* ── Elevation A tight contact shadow plus a wide, heavily-offset
       ambient one. */
    --rp-gloss-shadow:        0 1px 2px rgba(15, 23, 42, 0.05),
                              0 6px 14px -8px rgba(15, 23, 42, 0.10);
    --rp-gloss-shadow-hover:  0 2px 4px rgba(15, 23, 42, 0.06),
                              0 14px 24px -12px rgba(15, 23, 42, 0.16);
    --rp-card-shadow:         var(--rp-gloss-shadow);
    --rp-gloss-shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.05),
                              0 3px 8px -5px rgba(15, 23, 42, 0.12);
    --rp-gloss-shadow-lift:   0 2px 5px rgba(15, 23, 42, 0.07),
                              0 18px 34px -16px rgba(15, 23, 42, 0.20);

    /* Brand-tinted glow for primary/CTA controls — kept low-alpha so it
       reads as a light source, not a neon outline. */
    --rp-glow-cta:      0 4px 12px rgba(249, 125, 9, 0.28);
    --rp-glow-cta-lift: 0 6px 18px rgba(249, 125, 9, 0.36);
    --rp-glow-brand:    0 4px 12px rgba(0, 168, 89, 0.26);

    /* ── Motion ───────────────────────────────────────────────────────── */
    --rp-transition:      180ms cubic-bezier(0.2, 0, 0, 1);
    --rp-transition-slow: 280ms cubic-bezier(0.2, 0, 0, 1);
}


/* 2. LEGACY TOKEN REBINDING .product-card-design (main_style.css) and
   .tod-card (inline in main.html) already read --pcd-*. */
:root {
    --pcd-radius:         var(--rp-card-radius);
    --pcd-radius-media:   var(--rp-card-radius-sm);
    --pcd-hairline:       var(--rp-rim);
    --pcd-hairline-hover: var(--rp-rim-strong);
    --pcd-surface:        var(--rp-surface-gloss);
    --pcd-shadow:         var(--rp-gloss-shadow);
    --pcd-shadow-hover:   var(--rp-gloss-shadow-hover);
}


/* 3. GLOSS PRIMITIVES Two utilities the rest of the file composes from.
   They are also available to new markup directly — prefer adding
   `.rp-gloss-well` to a new image container over writing a fresh gradient
   stack. */

.rp-gloss-well,
.rp-gloss-photo-frame {
    position: relative;   /* containing block for the sheen; z-index stays
                             auto, so no new stacking context is created */
}

/* Shared sheen geometry */
.rp-gloss-well::after,
.rp-gloss-photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;   /* must never intercept a tap, a product link,
                               a Swiper drag, or the image-zoom gesture */
    z-index: 2;
}

/* WELL — contained product/icon art on a light tile */
.rp-gloss-well::after {
    background: var(--rp-gloss-highlight);
    box-shadow: var(--rp-rim-inset);
}

/* PHOTO — full-bleed photography */
.rp-gloss-photo-frame::after {
    background: var(--rp-gloss-photo);
    box-shadow: var(--rp-rim-inset);
}


/* =============================================================================
   4. CATEGORY IMAGERY
   Four different category presentations exist across the app; all four now
   share one finish so the home strip, the main-category rail, the sidebar
   list and the browser grid read as one component family.
   ============================================================================= */

/* 4a. Home "Shop by Category" tile + main-category rail tile.
       Both are 76px art tiles with an API-driven background colour. */
.category-square-img,
.mch-icon-wrap {
    position: relative;
    /* No background-image here: both tiles are emitted with an inline
       style="background:{api color}" shorthand, which resets
       background-image at inline specificity — a stylesheet layer would be
       dead CSS. */
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}

.category-square-img::after,
.mch-icon-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    pointer-events: none;
    z-index: 2;
}

/* Both tiles already have hover / press / selected shadows in main_style.css
   at higher specificity than the rest state above, so the rim has to be
   re-declared per state or it blinks out the moment the tile is touched. */
@media (hover: hover) and (pointer: fine) {
    .category-item:hover .category-square-img,
    .mch-card:hover .mch-icon-wrap {
        box-shadow: var(--rp-gloss-shadow), var(--rp-rim-inset);
    }
}

.category-item:active .category-square-img,
.mch-card:active .mch-icon-wrap {
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}

/* The selected state already outlines in CTA orange; give it a matching
   tinted lift instead of the neutral one so selection reads as light, not
   just as a ring. Overrides the neutral --shadow-md the base rule sets. */
.category-carousel .swiper-slide.active .category-square-img,
.mch-card.active .mch-icon-wrap {
    box-shadow: 0 4px 14px -4px rgba(249, 125, 9, 0.34), var(--rp-rim-inset);
}

/* 4b. Sidebar category list — 44px rounded tile. Also inline-tinted per
       category, so again: sheen + rim only, no background layer. */
.cat-img-wrap {
    position: relative;
    box-shadow: var(--rp-rim-inset);
    transition: box-shadow var(--rp-transition);
}

.cat-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    pointer-events: none;
    z-index: 2;
}

/* 4c. Offcanvas category list — circular avatar. */
.cat-item-img-box {
    position: relative;
    background-image: var(--rp-media-well);
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}

.cat-item-img-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    pointer-events: none;
    z-index: 2;
}

/* 4d. Section category card — square pastel well (".img-wrapper .cat-img"). */
.img-wrapper:not(.rp-shimmer) {
    background-image: var(--rp-media-contact);
    background-repeat: no-repeat;
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}

.img-wrapper:not(.rp-shimmer)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    pointer-events: none;
    z-index: 2;
}

.section-cat-card {
    transition: transform var(--rp-transition);
}

@media (hover: hover) and (pointer: fine) {
    .section-cat-card:hover .img-wrapper:not(.rp-shimmer) {
        box-shadow: var(--rp-gloss-shadow), var(--rp-rim-inset);
    }
}

/* 4e. Gift-section category card (#section-5-grid). The odd one out in this
       file: every other surface here frames a photograph, where a top-edge
       sheen and a rim hairline read as glass over an image. This tile is a
       flat pastel FIELD — the same treatment over it reads as a gradient
       wash and a printed border instead, which is exactly the look its
       design rules out. So no ::after and no rim: the pastel against the
       page white does the separating, and the card takes only the elevation
       token for its contact shadow. The press state is driven from
       .heart-cell in main_style.css (transform), with the shadow easing off
       here to match. */
.heart-simple {
    position: relative;
    box-shadow: var(--rp-gloss-shadow-sm);
}

.heart-cell:active .heart-simple {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* 4f. 2x2 mini-thumbnail category card. The thumbs are bare <img> elements
       inside a grid, so the finish is carried by the frame + a rim on each
       tile rather than a pseudo-element per image. */
.category-card {
    border-radius: var(--rp-card-radius);
    box-shadow: var(--rp-gloss-shadow-sm);
}

.mini-img-grid {
    background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.72) 0%,
                    rgba(255, 255, 255, 0.42) 100%);
    box-shadow: var(--rp-rim-inset);
}

.mini-thumb {
    box-shadow: var(--rp-rim-inset);
}

/* 4g. Compact category grid inside #offcanvasPageCat (shares
       .img-circle-wrapper with the product-card markup). */
.img-circle-wrapper > img,
.img-circle-wrapper img.img-fluid {
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}


/* 5. BANNERS, PROMOTIONAL & OFFER STRIP IMAGERY Photography treatment only
   — a top-edge sheen, a rim, and depth from the shadow. */
.swiper-slide-banner {
    box-shadow: var(--rp-gloss-shadow-hover), var(--rp-rim-inset);
    /* Keep the pre-image backdrop a deep ink rather than pure black — a black
       flash behind a loading banner is the most visible thing on the page. */
    background: #0f172a;
}

.swiper-slide-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-photo);
    box-shadow: var(--rp-rim-inset-light);
    pointer-events: none;
    z-index: 1;
}

/* Full-width offer ticker strip. */
.offer-strip-swiper {
    position: relative;
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
    background-image: var(--rp-media-well);
}

.offer-strip-swiper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-photo);
    pointer-events: none;
    z-index: 2;
}


/* =============================================================================
   6. OFFER CARDS & BRAND CARDS
   ============================================================================= */

/* 6a. Ticket-shaped offer card.  It is masked (radial cut-outs on both
       edges), so its elevation MUST stay a drop-shadow filter — a box-shadow
       is clipped away by the mask.  Only the values are retuned here. */
.offer-card {
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.05))
            drop-shadow(0 6px 12px rgba(15, 23, 42, 0.08));
}

@media (min-width: 992px) {
    .offer-card:hover {
        filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.06))
                drop-shadow(0 14px 22px rgba(15, 23, 42, 0.13));
    }
}

/* 6b. Offer thumbnail — a contained product shot, so it gets the full well. */
.offer-img-box {
    background-image: var(--rp-media-well);
    box-shadow: var(--rp-rim-inset);
}

.offer-img-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    pointer-events: none;
    z-index: 2;
}

/* 6c. Brand card — keep the brand's two-tone field, add depth + a gloss
       sweep and lift the logo pebble off the split line. */
.brand-card {
    position: relative;
    box-shadow: var(--rp-gloss-shadow-sm);
    transition: transform var(--rp-transition), box-shadow var(--rp-transition);
}

.brand-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    box-shadow: var(--rp-rim-inset);
    pointer-events: none;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .brand-card:hover {
        box-shadow: var(--rp-gloss-shadow-lift);
    }
}

/* The logo pebble, product shot and caption must stay above the sweep. */
.brand-logo-circle {
    z-index: 3;
    background-image: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14), var(--rp-rim-inset);
}

.brand-product-img,
.brand-info {
    position: relative;
    z-index: 2;
}


/* 7. PHOTO CARDS — Today's Deals rail, Food page, Service page All three
   are 4:3 photographic thumbs inside a card. They already share the --pcd-*
   surface tokens (section 2), so only the media finish is added. */
.tod-section .tod-card .tod-thumb,
.food-page .fp-card .thumb,
.service-page .sv-card .thumb {
    box-shadow: var(--rp-rim-inset);
}

.tod-section .tod-card .tod-thumb::after,
.food-page .fp-card .thumb::after,
.service-page .sv-card .thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rp-gloss-photo);
    pointer-events: none;
    z-index: 2;
}

/* ── A note on the `body` prefix used from here to the end of this section
   ── main.html, food.html and service.html each declare these three
   components in an inline <style> block. */

/* Keep every overlay that carries information above the decorative sheen. */
body .tod-section .tod-card .tod-badge-row,
body .service-page .sv-card .thumb .sv-badge-row,
.food-page .fp-card .thumb .fp-badge-row {
    z-index: 3;
}

/* Food/service cards adopt the same elevation as every other product card
   so the three pages stop reading as three different design systems. */
body.food-page .fp-card,
body.service-page .sv-card {
    box-shadow: var(--rp-gloss-shadow);
    border-color: var(--rp-rim);
}

body.food-page .fp-card:active,
body.service-page .sv-card:active {
    box-shadow: var(--rp-gloss-shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
    body.food-page .fp-card:hover,
    body.service-page .sv-card:hover {
        box-shadow: var(--rp-gloss-shadow-hover);
        border-color: var(--rp-rim-strong);
    }
}

/* The dark pill badges over photography were carrying backdrop-filter for a
   blur that is invisible under a 75%-opaque fill — one backdrop readback
   per badge, per card, directly on top of the image. */
body.food-page .fp-card .thumb .time-badge,
body.food-page .fp-card .thumb .people-badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(13, 27, 42, 0.82);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

body.food-page .fp-card .thumb .spice-badge {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* 8. PRODUCT DETAIL GALLERY The hero image is the one a customer studies
   before buying, so it gets the lightest possible touch: a lit stage behind
   it and the PHOTO sheen, never the diagonal WELL sweep. */
.product-swiper-products-view {
    background-image: var(--rp-media-well);
}

.product-swiper-products-view::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rp-gloss-photo);
    pointer-events: none;   /* Swiper drag + the zoom tap target pass through */
    z-index: 2;
}


/* 9. SMALL THUMBNAILS Search suggestions, variant rows, cart/checkout
   lines, order history. */
.sug-item-img {
    background-image: var(--rp-media-well);
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}

.var-img-box {
    position: relative;
    background-image: var(--rp-media-well);
    border-color: transparent;
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset);
}

.var-img-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rp-gloss-highlight);
    pointer-events: none;
    z-index: 2;
}


/* 10. PRODUCT CARD REFINEMENTS The card surface and media well already live
   in main_style.css §6 and now read the tokens above. */
.btn-wishlist-modern {
    background-image: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 10px -6px rgba(15, 23, 42, 0.18),
                var(--rp-rim-inset-light);
    transition: transform var(--rp-transition), box-shadow var(--rp-transition);
}

.btn-wishlist-modern:active {
    transform: scale(0.92);
}

/* Variant / quantity chips that sit over the media well. */
.badge-variant-overlay {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10),
                0 4px 10px -6px rgba(15, 23, 42, 0.22),
                var(--rp-rim-inset-light);
}

/* Dark chip over photography: a 1px moulded top edge, NOT the white chip
   gloss. */
.product-card-design .img-wrap-modern .pcd-brand-pill {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Discount flag — the sweep animation stays exactly as tuned in
   main_style.css; only the corner gets the same rim as the card. */
.custom-badge-left {
    box-shadow: 2px 2px 8px rgba(15, 23, 42, 0.14),
                var(--rp-rim-inset-light);
}


/* =============================================================================
   11. BUTTONS & CTA CONTROLS
   The Add-to-Cart control is the most-tapped element in the app, so its
   states are the reference all other controls are tuned against:
     rest    → outlined, white gloss face, tight shadow
     in-cart → CTA gradient with a warm glow
     press   → 0.97 scale, shadow collapses to the contact layer
   Readability first: no label colour or weight is changed here.
   ============================================================================= */
.btn-cart-wrapper {
    box-shadow: var(--rp-gloss-shadow-sm);
    transition: box-shadow var(--rp-transition), transform var(--rp-transition);
}

.product-card-design .btn-cart-wrapper {
    box-shadow: var(--rp-glow-cta);
}

/* Press feedback on the "+ Add" state only. */
.btn-cart-wrapper:not(.active):active {
    transform: scale(0.97);
}

/* Rest state: a white face with a warm fall-off at the very bottom instead
   of flat #fff. */
.btn-add-initial.rounded-pill {
    background-image: linear-gradient(180deg,
                        #ffffff 0%,
                        #ffffff 62%,
                        #fff8ee 100%) !important;
    box-shadow: var(--rp-rim-inset-light);
    transition: background-color var(--rp-transition),
                box-shadow var(--rp-transition),
                color var(--rp-transition);
}

/* In-cart and stepper states: keep the CTA gradient, add the specular top
   edge that turns a flat gradient into a moulded control. */
.btn-add-initial.rounded-pill.is-in-cart,
.qty-control-group.rounded-pill {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
                var(--rp-glow-cta) !important;
}

.qty-control-group.rounded-pill:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
                var(--rp-glow-cta-lift) !important;
}

/* Secondary and tertiary CTAs pick up the same light source. */
.btn-offer-claim {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--rp-glow-brand);
}

.btn-offer-claim:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 6px 18px rgba(0, 168, 89, 0.34);
}

.btn-view-all {
    background-image: linear-gradient(180deg,
                        rgba(255, 255, 255, 0.9) 0%,
                        rgba(232, 247, 239, 0.9) 100%);
    box-shadow: var(--rp-gloss-shadow-sm);
}

.btn-view-all:hover {
    background-image: none;
    box-shadow: var(--rp-glow-brand);
}

/* Floating cart button — already a glossy emerald pebble; the inset
   highlight gives it a moulded top edge to match every other control. */
.fab-cart-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26),
                0 6px 18px rgba(0, 168, 89, 0.32);
}

.fab-cart-btn:hover,
.fab-cart-btn:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26),
                0 3px 9px rgba(0, 168, 89, 0.42);
}


/* =============================================================================
   12. SEARCH
   ============================================================================= */
.mobile-search-box {
    background-image: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset-light);
}

.mobile-search-box:focus-within {
    background-image: linear-gradient(180deg, #ffffff 0%, #f2fbf6 100%);
    box-shadow: 0 6px 18px -8px rgba(0, 168, 89, 0.35),
                0 0 0 3px rgba(0, 168, 89, 0.30);
}

/* Suggestion dropdown reads as a raised sheet of the same material. */
.enterprise-barcode-dropdown {
    /* The blur was invisible under a 95%-opaque fill and cost a backdrop
       readback layer every time the dropdown was on screen. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #ffffff;
    background-image: var(--rp-surface-gloss);
    box-shadow: var(--rp-gloss-shadow-lift), var(--rp-rim-inset);
}


/* =============================================================================
   13. NAVIGATION & SHEET CHROME
   ============================================================================= */

/* Bottom navigation — a soft rise off the page instead of a flat hairline. */
.bottom-nav {
    background-image: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.05),
                0 -8px 24px -14px rgba(15, 23, 42, 0.22);
}

/* Fixed mobile header. */
.mobile-header-fixed {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04),
                0 10px 26px -16px rgba(15, 23, 42, 0.26);
}

.mobile-location-bar {
    background-image: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset-light);
}

/* Shared sheet header. */
.app-sheet-header {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04),
                0 6px 16px -12px rgba(15, 23, 42, 0.30);
}

/* Bottom sheets get a moulded top edge so they read as a panel sliding over
   the page rather than a rectangle appearing on it. */
.offcanvas-bottom {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
                0 -10px 30px -14px rgba(15, 23, 42, 0.30);
}

.offcanvas-end,
.offcanvas-start {
    box-shadow: var(--rp-gloss-shadow-lift);
}

/* Product-detail glass controls — these DO sit over unpredictable
   photography, so the blur there is doing real work and is kept; only the
   moulded edge is added. */
.pv-gallery-back,
.pv-gallery-search,
.pv-gallery-share {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* =============================================================================
   14. BADGES, CHIPS & STATUS PILLS
   ============================================================================= */
/* Chips that already own an opaque or tinted fill get the top sheen laid
   over it. */
.offer-meta,
.rp-status-badge {
    background-image: var(--rp-gloss-chip);
}

.rp-status-badge {
    box-shadow: var(--rp-rim-inset);
}

.offer-badge {
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* The Veg / Non-Veg mark is regulatory signage, not decoration: it keeps its
   flat white field and hard border so it is never mistaken for a glossy chip
   and never loses contrast against a photo. Explicitly excluded from §3. */
.rp-veg-mark {
    background-image: none;
}


/* =============================================================================
   15. TOASTS & FLOATING SURFACES
   Every .modern-toast variant sets an opaque background-color (#f0fdf4 /
   #fef2f2 / #fffbeb / #eff6ff), so the inherited backdrop-filter: blur(12px)
   blurred a backdrop that was then painted over completely — pure cost, zero
   pixels changed. Removed here, and the depth it was standing in for is
   supplied by a real shadow instead. Same pattern for the four other
   near-opaque surfaces that carried a blur.
   ============================================================================= */
.modern-toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: var(--rp-gloss-chip);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: var(--rp-gloss-shadow-lift);
}

.rp-install-banner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #ffffff;
    background-image: var(--rp-surface-gloss);
    box-shadow: var(--rp-gloss-shadow-lift);
}

.back-btn-fixed {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    box-shadow: var(--rp-gloss-shadow-sm), var(--rp-rim-inset-light);
}

.offcanvas-Payment-Order .po-spinner-cta-inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =============================================================================
   16. EMPTY & LOADING STATES
   ============================================================================= */
.empty-state-img,
.cc-empty-cart-img {
    /* A single drop-shadow on a transparent PNG traces the artwork's own
       silhouette — the correct "floating illustration" finish, and cheaper
       than a wrapper + mask. Kept small so it never smudges the artwork. */
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.10));
}

.rp-empty-state-wrap {
    background-image: var(--rp-surface-gloss);
    border-radius: var(--rp-card-radius);
    box-shadow: var(--rp-rim-inset);
}

/* NOTE — .rp-shimmer is deliberately NOT restyled here. */


/* 17. ACCESSIBILITY Gloss is always secondary to content. */

/* NOTE — this layer declares no focus tokens and no blanket :focus-visible
   ring. */

/* Under a high-contrast preference the decorative layers are removed
   outright — sheens reduce the effective contrast of anything beneath them,
   which is exactly what such users have asked the system to stop doing. */
@media (prefers-contrast: more) {
    :root {
        --rp-rim:        rgba(15, 23, 42, 0.24);
        --rp-rim-strong: rgba(15, 23, 42, 0.40);
        --rp-rim-inset:  inset 0 0 0 1px rgba(15, 23, 42, 0.24);
    }

    .rp-gloss-well::after,
    .rp-gloss-photo-frame::after,
    .category-square-img::after,
    .mch-icon-wrap::after,
    .cat-img-wrap::after,
    .cat-item-img-box::after,
    .img-wrapper::after,
    .offer-img-box::after,
    .brand-card::after,
    .var-img-box::after,
    .swiper-slide-banner::after,
    .offer-strip-swiper::after,
    .product-swiper-products-view::after,
    .tod-section .tod-card .tod-thumb::after,
    .food-page .fp-card .thumb::after,
    .service-page .sv-card .thumb::after {
        display: none;
    }
}

/* Windows High Contrast / forced-colors: the OS owns every colour. Purely
   decorative paint must disappear rather than fight it. */
@media (forced-colors: active) {
    .rp-gloss-well::after,
    .rp-gloss-photo-frame::after,
    .category-square-img::after,
    .mch-icon-wrap::after,
    .cat-img-wrap::after,
    .cat-item-img-box::after,
    .img-wrapper::after,
    .offer-img-box::after,
    .brand-card::after,
    .var-img-box::after,
    .swiper-slide-banner::after,
    .offer-strip-swiper::after,
    .product-swiper-products-view::after,
    .tod-section .tod-card .tod-thumb::after,
    .food-page .fp-card .thumb::after,
    .service-page .sv-card .thumb::after {
        display: none;
    }
}


/* 18. MOTION Every transition introduced above is transform / box-shadow /
   background-color only, and every one of them is cancelled here. */
@media (prefers-reduced-motion: reduce) {
    .cat-img-wrap,
    .section-cat-card,
    .brand-card,
    .btn-cart-wrapper,
    .btn-add-initial.rounded-pill,
    .btn-wishlist-modern {
        transition: none;
    }

    .btn-cart-wrapper:not(.active):active,
    .btn-wishlist-modern:active {
        transform: none;
    }
}


/* =============================================================================
   19. FUTURE DARK THEME (inert)
   This app ships one light theme; there is no theme switch and no dark
   stylesheet, so hooking these tokens to `prefers-color-scheme: dark` would
   dark-gloss a light UI for every dark-preferring visitor and look broken.
   The overrides are therefore gated on an explicit root attribute. The day a
   dark theme lands, setting data-rp-theme="dark" on <html> re-lights the
   entire gloss system — highlights, rims and elevation all invert together,
   with no per-component work.
   ============================================================================= */
:root[data-rp-theme="dark"] {
    color-scheme: dark;

    --rp-surface:       #111a2b;
    --rp-surface-sunk:  #0b1220;
    --rp-surface-gloss: linear-gradient(180deg, #172038 0%, #0b1220 100%);

    --rp-media-well: radial-gradient(112% 86% at 50% 12%,
                        #1c2740 0%, #162033 55%, #0b1220 100%);
    --rp-media-contact: radial-gradient(56% 13% at 50% 93%,
                        rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 72%);

    /* In dark UI the specular highlight has to be far weaker, or every
       surface turns milky. Depth comes from the rim instead. */
    --rp-gloss-highlight: linear-gradient(127deg,
                            rgba(255, 255, 255, 0.13) 0%,
                            rgba(255, 255, 255, 0.04) 30%,
                            rgba(255, 255, 255, 0) 54%);
    --rp-gloss-photo: linear-gradient(180deg,
                            rgba(255, 255, 255, 0.08) 0%,
                            rgba(255, 255, 255, 0) 40%);
    --rp-gloss-chip: linear-gradient(180deg,
                            rgba(255, 255, 255, 0.10) 0%,
                            rgba(255, 255, 255, 0) 100%);

    --rp-rim:             rgba(255, 255, 255, 0.10);
    --rp-rim-strong:      rgba(255, 255, 255, 0.18);
    --rp-rim-inset:       inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --rp-rim-inset-light: inset 0 0 0 1px rgba(255, 255, 255, 0.12);

    /* Dark surfaces need more blur and less alpha or shadows read as bands. */
    --rp-gloss-shadow:       0 1px 2px rgba(0, 0, 0, 0.50),
                             0 8px 18px -10px rgba(0, 0, 0, 0.70);
    --rp-gloss-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.55),
                             0 18px 30px -14px rgba(0, 0, 0, 0.80);
    --rp-gloss-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.50),
                             0 4px 10px -6px rgba(0, 0, 0, 0.60);
    --rp-gloss-shadow-lift:  0 2px 6px rgba(0, 0, 0, 0.55),
                             0 22px 40px -18px rgba(0, 0, 0, 0.85);
}