:root {
            --store-accent: #2f6b34;
            --store-accent-soft: #eef3e6;
            --store-honey: #e0a419;
            --store-terracotta: #c86b3c;
            --store-surface: #ffffff;
            --store-text: #2f2a24;
            --store-muted: #7a7266;
            --store-green: #2e7d32;
            --store-bg: linear-gradient(180deg, #f9f8f5 0%, #f5f3ef 100%);

            /* ---------- Type scale ----------
               Desktop values reproduce the sizes that were previously hard-coded
               throughout the storefront. Three steps absorb near-duplicates that had
               drifted apart (.66/.68, .70/.72, .74/.75/.76), so a handful of desktop
               declarations move by at most 0.16px -- sub-pixel and invisible.
               The mobile block near the bottom of this file raises every step to the
               readability floor in one place. */
            --fs-2xs:  .62rem;   /*  9.9px */
            --fs-xs:   .67rem;   /* 10.7px */
            --fs-sm:   .71rem;   /* 11.4px */
            --fs-md:   .75rem;   /* 12.0px */
            --fs-base: .78rem;   /* 12.5px */
            --fs-lg:   .80rem;   /* 12.8px */
            --fs-mrp:  .85rem;   /* 13.6px - struck-through MRP */
            --fs-body: .88rem;   /* 14.1px - body copy / descriptions */
            --fs-name: .92rem;   /* 14.7px - product name */
            --fs-price: 1.3rem;  /* 20.8px - headline price */
            --fs-h2:   1.5rem;   /* 24.0px - section heading */

            /* ---------- Stacking scale ----------
               One ordered ladder, low to high. Anything that can appear on screen at
               the same time as something else belongs here; purely internal stacking
               inside a single component (card badges, hero slides) keeps its small
               local z-index and is not part of this scale.

               100 sticky header ............ scrolls with the page, under everything
               110 announcement bar ......... pins above the header
               200 dropdowns ................ category panel, search suggestions
               300 back-to-top .............. floating, desktop only
               400 bottom nav ............... mobile tab bar
               450 cart bar ................. mobile sticky cart, sits above the tabs
               500 sticky CTA ............... product Add to Cart, must beat the nav
               600 overlay .................. dimmer, must cover nav + CTA
               700 drawer ................... cart drawer / desktop mini-cart
               750 toast .................... above the drawer so Undo stays reachable,
                                              below modals as agreed
               800 modal .................... quick view, lightbox                  */
            --z-sticky:     100;
            --z-sticky-top: 110;
            --z-dropdown:   200;
            --z-floating:   300;
            --z-bottom-nav: 400;
            --z-cartbar:    450;
            --z-sticky-cta: 500;
            --z-overlay:    600;
            --z-drawer:     700;
            --z-modal:      800;
            --z-toast:      750;
        }

        body { background: var(--store-bg); color: var(--store-text); font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; }
        h1, h2, h3, h4, .store-logo, .rm-foot-brand, .price-main { font-family: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; }
        .store-shell { min-height: 100vh; }
        .store-frame { width: calc(100% - 24px); max-width: 1680px; margin: 0 auto; padding: 0 8px; }
        .store-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom: 1px solid #ece5d8; }
        .store-header-main { display: grid; grid-template-columns: auto auto auto minmax(240px, 1fr) auto; gap: 1.25rem; align-items: center; padding: .8rem 0; }
        .store-hamburger { border: 0; background: transparent; color: #33302b; font-size: 1.65rem; cursor: pointer; display: inline-flex; align-items: center; padding: .1rem; }
        .store-hamburger:hover { color: var(--store-accent); }
        .store-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
        .store-logo-mark { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg,#eaf5e6,#fdeede); color: var(--store-accent); font-size: 1.7rem; overflow: hidden; flex: 0 0 auto; }
        .store-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
        .store-logo-text { display: inline-flex; flex-direction: column; line-height: 1; }
        .store-logo-name { font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; }
        .store-logo-name .lg-a { color: var(--store-accent); }
        .store-logo-name .lg-b { color: #e8632a; }
        .store-tagline { font-size: var(--fs-2xs); font-weight: 700; color: var(--store-muted); letter-spacing: .03em; margin-top: 4px; }
        .store-location { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--store-text); }
        .store-location-pin { color: var(--store-accent); font-size: 1.3rem; flex: 0 0 auto; }
        .store-location-lines { display: inline-flex; flex-direction: column; line-height: 1.15; }
        .store-location-lines small { font-size: var(--fs-xs); color: var(--store-muted); font-weight: 600; }
        .store-location-lines b { font-size: .92rem; font-weight: 800; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
        .store-location-lines b .ti { font-size: .9rem; color: var(--store-muted); }
        .store-search { position: relative; }
        .store-search input { width: 100%; border: 1px solid #e6dfcd; border-radius: 14px; height: 48px; padding: 0 1rem 0 3rem; background: #fff; box-shadow: none; }
        .store-search input:focus { outline: none; border-color: var(--store-accent); box-shadow: 0 0 0 3px rgba(47,107,52,.1); }
        .store-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #8a8172; font-size: 1.15rem; }
        .store-header-actions { display: flex; align-items: center; gap: 1.4rem; justify-content: flex-end; }
        .store-action { color: #33302b; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; font-weight: 600; font-size: var(--fs-sm); }
        .store-action:hover { color: var(--store-accent); }
        .store-action-ic { position: relative; font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
        .store-action-label { white-space: nowrap; }
        .cart-pill { position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--store-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 800; border: 2px solid #fff; }
        .rm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--store-accent); color: #fff; font-weight: 800; font-size: var(--fs-base); flex: 0 0 auto; }
        .rm-avatar-guest { background: #e6dfcd; color: #6f6656; }
        .category-strip { border-top: 1px solid #f0ebe0; border-bottom: 1px solid #f0ebe0; background: #fff; }
        .category-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; }
        /* All Categories button + mega panel */
        .category-all { position: relative; flex: 0 0 auto; }
        .allcat-btn { background: var(--store-accent); color: #fff; border: 0; border-radius: 12px; padding: .62rem 1.05rem; font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
        .allcat-btn:hover { background: #285a2b; }
        .allcat-btn i { font-size: 1.15rem; }
        .allcat-panel { position: absolute; left: 0; top: calc(100% + .5rem); background: #fff; border: 1px solid #e6dfcd; border-radius: 16px; box-shadow: 0 22px 48px rgba(47,42,36,.14); padding: .5rem; display: none; z-index: var(--z-dropdown); min-width: 264px; max-height: 72vh; overflow-y: auto; }
        .category-all:hover .allcat-panel, .category-all:focus-within .allcat-panel, .category-all.open .allcat-panel { display: block; }
        .allcat-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; color: var(--store-text); text-decoration: none; font-weight: 600; font-size: .9rem; }
        .allcat-link:hover { background: #f4f2ec; }
        .allcat-link.active { color: var(--store-accent); background: var(--store-accent-soft); }
        .allcat-link img, .allcat-ini { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: linear-gradient(180deg,#f4f8ee,#eef3e6); display: inline-flex; align-items: center; justify-content: center; color: var(--store-accent); font-weight: 800; font-size: .82rem; flex: 0 0 auto; }
        .allcat-link > i { color: var(--store-accent); font-size: 1.2rem; width: 28px; text-align: center; flex: 0 0 auto; }
        /* Inline chips (scroll if they overflow) */
        .category-strip-inner { display: flex; flex-wrap: nowrap; gap: .15rem; align-items: center; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
        .category-strip-inner::-webkit-scrollbar { display: none; }
        .category-item { position: relative; flex: 0 0 auto; }
        .category-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .7rem; color: #55503f; text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; white-space: nowrap; }
        .category-chip:hover { color: var(--store-accent); }
        .category-chip.active { color: var(--store-accent); border-bottom-color: var(--store-accent); font-weight: 800; }
        .category-chip-image { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg,#f4f8ee,#eef3e6); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--store-accent); border: 1px solid #ece5d8; flex: 0 0 auto; }
        .category-chip-image img { width: 100%; height: 100%; object-fit: cover; }
        .category-chip-image i { font-size: 1rem; }
        .category-chip-initial { font-size: 1rem; font-weight: 900; color: var(--store-accent); line-height: 1; }
        .category-chip-label { font-size: .9rem; }
        /* More dropdown */
        .category-more { position: relative; flex: 0 0 auto; }
        .more-btn { border: 0; background: transparent; color: #55503f; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; padding: .5rem .6rem; font-size: .9rem; white-space: nowrap; }
        .more-btn:hover { color: var(--store-accent); }
        .more-panel { position: absolute; right: 0; top: calc(100% + .5rem); background: #fff; border: 1px solid #e6dfcd; border-radius: 16px; box-shadow: 0 22px 48px rgba(47,42,36,.14); padding: .5rem; display: none; z-index: var(--z-dropdown); min-width: 224px; max-height: 72vh; overflow-y: auto; }
        .category-more:hover .more-panel, .category-more:focus-within .more-panel, .category-more.open .more-panel { display: block; }
        /* Subcategory dropdown on a chip */
        .category-dropdown { min-width: 240px; position: absolute; left: 0; top: calc(100% + .35rem); background: #fff; border: 1px solid #e6dfcd; border-radius: 18px; box-shadow: 0 22px 48px rgba(47,42,36,.12); padding: .5rem; display: none; z-index: var(--z-dropdown); }
        .category-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
        .category-item:hover .category-dropdown, .category-item:focus-within .category-dropdown { display: block; }
        .subcategory-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; color: #55503f; text-decoration: none; font-weight: 600; }
        .subcategory-link:hover, .subcategory-link.active { background: #f2efe6; color: var(--store-accent); }
        .subcategory-link i { color: #86b06f; }
        @media (max-width: 1100px) {
            /* Compact 2-row header: [hamburger logo ... actions] then [search full width] */
            .store-header-main { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; padding: .55rem 0; }
            .store-location { display: none; }
            .store-hamburger { order: 0; }
            .store-logo { order: 1; }
            .store-header-actions { order: 2; margin-left: auto; justify-content: flex-end; gap: 1.1rem; flex-wrap: nowrap; }
            .store-search { order: 3; flex: 1 1 100%; }
            .store-search input { height: 44px; box-shadow: none; }
        }
        @media (max-width: 575px) {
            .store-frame { width: calc(100% - 16px); padding: 0 4px; }
            .store-logo-name { font-size: 1.35rem; }
            .store-logo-mark { width: 38px; height: 38px; font-size: 1.4rem; }
            .store-tagline { display: none; }
            .store-action-label { display: none; }
            .store-action-ic { font-size: 1.55rem; }
            /* Categories row: keep horizontal scroll; hide All-Categories/More (hamburger covers it) */
            .category-bar { gap: .3rem; }
            .allcat-btn { padding: .5rem .7rem; font-size: .82rem; }
            .allcat-btn span, .allcat-btn { gap: .35rem; }
            .category-more { display: none; }
            .category-chip { gap: .35rem; padding: .4rem .5rem; }
            .category-chip-image { width: 30px; height: 30px; }
            .category-chip-label { font-size: .82rem; }
            .category-dropdown { display: none !important; }
        }
        /* ---------- Advanced shared UI (dark mode, drawer, toast, bottom nav, autocomplete, quick view) ---------- */
        /* ---------- Hamburger side menu (drawer) ---------- */
        .rm-menu-overlay { position: fixed; inset: 0; background: rgba(20,15,8,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: var(--z-overlay); }
        .rm-menu-overlay.open { opacity: 1; visibility: visible; }
        .rm-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 310px; max-width: 86vw; background: #fff; z-index: var(--z-drawer); transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0,0,0,.18); }
        .rm-menu.open { transform: none; }
        .rm-menu-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem; border-bottom: 1px solid #f0ebe0; background: linear-gradient(135deg,#eaf5e6,#fdeede); }
        .rm-menu-user { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--store-text); }
        .rm-menu-user b { display: block; font-size: .95rem; }
        .rm-menu-user small { color: var(--store-muted); font-size: var(--fs-md); }
        .rm-menu-user .rm-avatar { width: 38px; height: 38px; font-size: 1rem; }
        .rm-menu-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--store-muted); cursor: pointer; padding: 0 .25rem; }
        .rm-menu-close:hover { color: var(--store-accent); }
        .rm-menu-body { flex: 1; overflow-y: auto; padding: .5rem 0 1.5rem; }
        .rm-menu-list { list-style: none; margin: 0; padding: 0; }
        .rm-menu-list a { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; color: var(--store-text); text-decoration: none; font-weight: 600; font-size: .92rem; }
        .rm-menu-list a:hover { background: #f4f2ec; color: var(--store-accent); }
        .rm-menu-list a > i { font-size: 1.25rem; color: var(--store-accent); width: 24px; text-align: center; flex: 0 0 auto; }
        body.rm-menu-open { overflow: hidden; }
        body.rm-dark .rm-menu { background: #1d1912; }
        body.rm-dark .rm-menu-head { background: #2a2418; border-color: #3a3324; }
        body.rm-dark .rm-menu-list a { color: var(--store-text); }
        body.rm-dark .rm-menu-list a:hover { background: #2a2418; }

        .rm-foot-fssai { display: inline-block; margin-left: .6rem; padding-left: .6rem; border-left: 1px solid rgba(255,255,255,.2); opacity: .9; }
        @media (max-width: 575px) { .rm-foot-fssai { display: block; margin: .3rem 0 0; padding: 0; border: 0; } }

        /* Free delivery badge — brand orange so it pops against the green UI */
        .free-del { display: inline-flex; align-items: center; gap: .28rem; background: linear-gradient(135deg, #fff3ec, #ffe6d6); color: #d9531e; border: 1px solid #ffd0b3; border-radius: 999px; padding: .14rem .55rem; font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; box-shadow: 0 1px 3px rgba(232,99,42,.14); }
        .free-del i { font-size: .9rem; color: #e8632a; }
        body.rm-dark .free-del { background: #3a2418; border-color: #6b4128; color: #ff9d6b; box-shadow: none; }
        body.rm-dark .free-del i { color: #ff9d6b; }

        /* Star rating row (Unicode stars, shared by cards + product page) */
        .stars { display: inline-flex; gap: 0; line-height: 1; }
        .stars .star { color: #dcd6cb; font-size: 1.05rem; line-height: 1; }
        .stars .star.on { color: #e0a419; }
        .stars.sm .star { font-size: .9rem; }

        /* Veg / Non-Veg marker (FSSAI style: bordered square with a filled dot) */
        .veg-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 3px; border: 1.6px solid currentColor; flex: 0 0 auto; vertical-align: -2px; margin-right: .35rem; }
        .veg-mark i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
        .veg-mark.is-veg { color: #1a8f37; }
        .veg-mark.is-nonveg { color: #d32f2f; }
        .veg-mark-lg { width: 18px; height: 18px; border-radius: 4px; border-width: 2px; }
        .veg-mark-lg i { width: 9px; height: 9px; }

        .rm-theme-toggle { border: 0; background: transparent; color: var(--store-muted); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.35rem; transition: color .15s ease, background .15s ease; }
        .rm-theme-toggle:hover { color: var(--store-accent); background: #f4f2ec; }

        /* Reveal on scroll (only hidden when JS is active, so no-JS always shows content) */
        /* Reveal on scroll — inverted default.
           Content is VISIBLE unless html.js-reveal is present, and that class is only
           set by a head script that has already checked IntersectionObserver exists.
           A failsafe removes it if the observer never wires up, so a slow, blocked or
           throwing script leaves a readable page instead of a blank one. */
        html.js-reveal .rm-reveal { opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
        html.js-reveal .rm-reveal.rm-in { opacity: 1; transform: none; }
        /* Already on screen at first paint: show instantly, never animate. */
        html.js-reveal .rm-reveal.rm-now { opacity: 1; transform: none; transition: none; }
        @media (prefers-reduced-motion: reduce) {
            html.js-reveal .rm-reveal,
            html.js-reveal .rm-reveal.rm-in { opacity: 1; transform: none; transition: none; }
        }

        /* Search autocomplete */
        .store-search { position: relative; }
        .rm-suggest { position: absolute; top: calc(100% + .35rem); left: 0; right: 0; background: #fff; border: 1px solid #e6dfcd; border-radius: 14px; box-shadow: 0 10px 28px rgba(47,42,36,.10); padding: .25rem; z-index: var(--z-dropdown); display: none; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
        .rm-suggest.open { display: block; }
        .rm-suggest a { display: flex; align-items: center; gap: .6rem; padding: .35rem .55rem; border-radius: 10px; text-decoration: none; color: var(--store-text); }
        /* Warm hover, matching the rest of the store. This was #f6f1ff — a purple
           tint left over from an older palette, and the only purple on the page. */
        .rm-suggest a:hover, .rm-suggest a.active { background: #f4f2ec; }
        .rm-suggest img, .rm-suggest .rm-sg-ic { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #f2efe7; display: inline-flex; align-items: center; justify-content: center; color: var(--store-accent); flex: 0 0 auto; }
        .rm-suggest b { font-weight: 600; font-size: .92rem; }
        .rm-suggest span { color: var(--store-muted); font-size: var(--fs-sm); }

        /* Toasts */
        .rm-toast-wrap { position: fixed; right: 16px; bottom: 84px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: .5rem; }
        .rm-toast { background: #1f2937; color: #fff; padding: .7rem 1rem; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-weight: 600; display: flex; align-items: center; gap: .55rem; transform: translateX(120%); opacity: 0; transition: transform .3s ease, opacity .3s ease; max-width: 320px; }
        .rm-toast.show { transform: none; opacity: 1; }
        .rm-toast.success { background: #15803d; }
        .rm-toast.error { background: #be123c; }

        /* Cart drawer */
        .rm-overlay { position: fixed; inset: 0; background: rgba(20,12,40,.45); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
        .rm-overlay.open { opacity: 1; visibility: visible; }
        .rm-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #fff; z-index: var(--z-drawer); box-shadow: -18px 0 44px rgba(20,12,40,.18); transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; }
        .rm-drawer.open { transform: none; }
        /* The drawer's own list scrolls; the page behind it must not scroll on.
           Mobile only: on desktop the panel is a small dropdown that can be opened
           by hover, and freezing the page under a hover target would be hostile. */
        @media (max-width: 820px) { body.rm-cart-open { overflow: hidden; } }
        .rm-drawer-body { overscroll-behavior: contain; }
        .rm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid #ece5d8; }
        .rm-drawer-head h3 { margin: 0; font-size: 1.15rem; }
        .rm-drawer-close { border: 0; background: #f2efe6; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: #2c5228; font-size: 1.1rem; }
        .rm-drawer-body { flex: 1; overflow-y: auto; padding: .85rem 1.15rem; }
        .rm-drawer-foot { border-top: 1px solid #ece5d8; padding: 1rem 1.15rem; }
        .rm-ci { display: grid; grid-template-columns: 54px 1fr auto; gap: .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid #f0ebe0; }
        .rm-ci-img { width: 54px; height: 54px; border-radius: 12px; background: #faf7ff; border: 1px solid #ece5d8; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; color: #86b06f; }
        .rm-ci-name { font-weight: 700; font-size: .9rem; line-height: 1.25; }
        .rm-ci-price { color: var(--store-muted); font-size: .82rem; }
        .rm-ci-step { display: inline-flex; align-items: center; gap: .3rem; }
        .rm-ci-step button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #d9d0bf; background: #fff; color: #2f6b34; font-weight: 800; cursor: pointer; }
        .rm-ci-empty { text-align: center; color: var(--store-muted); padding: 2.5rem 1rem; }
        .rm-drawer-benefits { display: flex; justify-content: space-around; gap: .4rem; padding: .2rem 0 .85rem; }
        .rm-drawer-benefits div { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--store-muted); line-height: 1.25; }
        .rm-drawer-benefits i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #eef3e6; color: #2f6b34; font-size: 1.2rem; margin-bottom: .25rem; }
        /* The mini-cart's "You might also like" strip lived here (.rm-suggest-wrap
           / .rm-suggest-card / .rm-suggest-add). It was removed along with the
           markup, the render code and the query that fed it. */
        body.rm-dark .rm-drawer-benefits i { background: #2a2418; }

        /* Mobile bottom nav */
        .rm-bottom-nav { display: none; }
        @media (max-width: 820px) {
            .rm-bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-top: 1px solid #ece5d8; z-index: var(--z-bottom-nav); padding: .3rem .2rem env(safe-area-inset-bottom); }
            .rm-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem 0; color: #7a7266; text-decoration: none; font-size: var(--fs-sm); font-weight: 700; position: relative; }
            .rm-bottom-nav a.active, .rm-bottom-nav a:hover { color: var(--store-accent); }
            .rm-bottom-nav i { font-size: 1.35rem; }
            .rm-bn-pill { position: absolute; top: .1rem; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #c86b3c; color: #fff; font-size: var(--fs-2xs); display: inline-flex; align-items: center; justify-content: center; }
            .store-shell { padding-bottom: 64px; }
        }

        /* Quick view modal */
        .rm-qv { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 1rem; }
        .rm-qv.open { display: flex; }
        .rm-qv-card { background: #fff; border-radius: 22px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; }
        .rm-qv-media { background: linear-gradient(180deg,#fff,#faf7ff); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
        .rm-qv-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
        .rm-qv-media i { font-size: 4rem; color: #86b06f; }
        .rm-qv-body { padding: 1.3rem; }
        .rm-qv-close { position: absolute; top: 14px; right: 14px; border: 0; background: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
        @media (max-width: 640px) { .rm-qv-card { grid-template-columns: 1fr; } }

        /* Announcement bar */
        .rm-announce { background: linear-gradient(90deg,#2c5228,#2f6b34,#e0a419); color: #fff; font-size: .85rem; font-weight: 600; text-align: center; padding: .45rem 2.2rem .45rem 1rem; position: relative; }
        .rm-announce a { color: #fff; text-decoration: underline; }
        .rm-announce .rm-announce-x { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; opacity: .85; }
        .rm-announce .rm-announce-x:hover { opacity: 1; }

        /* Scroll to top */
        .rm-top { position: fixed; right: 18px; bottom: 92px; z-index: var(--z-floating); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--store-accent); color: #fff; box-shadow: 0 10px 24px rgba(63,125,58,.35); cursor: pointer; font-size: 1.25rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; }
        .rm-top.show { opacity: 1; visibility: visible; transform: none; }
        @media (max-width: 820px) { .rm-top { bottom: 132px; } }

        /* Rich footer */
        .rm-footer { background: #2a241b; color: #d8cfbf; margin-top: 2rem; }
        .rm-footer a { color: #d8cfbf; text-decoration: none; }
        .rm-footer a:hover { color: #fff; }
        .rm-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 1.5rem; padding: 2.25rem 0 1.5rem; }
        .rm-foot-brand { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
        .rm-foot h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .9rem; }
        .rm-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
        .rm-foot-social { display: flex; gap: .5rem; margin-top: 1rem; }
        .rm-foot-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
        .rm-foot-social a:hover { background: var(--store-accent); }
        .rm-foot-contact div { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; font-size: .9rem; }
        .rm-foot-badges { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
        .rm-foot-badge { background: rgba(255,255,255,.1); border-radius: 10px; padding: .45rem .7rem; font-size: var(--fs-base); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
        .rm-foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; font-size: .85rem; color: #a89e8c; }
        @media (max-width: 820px) { .rm-foot-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 500px) { .rm-foot-grid { grid-template-columns: 1fr; } }

        /* ---------- Dark mode ----------
           The class is put on <body> by PHP from the rm_theme cookie, so the very
           first paint is already correct. html gets the base colour too, otherwise
           an overscroll bounce or a short page shows a band of light background
           below the dark body. */
        html:has(> body.rm-dark) { background: #17140e; }
        html.rm-dark-boot { background: #17140e; }
        body.rm-dark { --store-text: #ece6db; --store-muted: #a89e8c; --store-surface: #221d14; --store-bg: linear-gradient(180deg,#17140e 0%,#1d1912 60%,#141009 100%); }
        /* Warm brown, not the old rgba(28,20,46) purple: the header sat over a
           brown page and read as a different theme bolted on top. */
        body.rm-dark .store-header, body.rm-dark .category-strip, body.rm-dark .rm-bottom-nav { background: rgba(30,25,17,.94); border-color: #2f2a1e; }
        body.rm-dark .store-search input, body.rm-dark .rm-suggest, body.rm-dark .rm-drawer, body.rm-dark .rm-qv-card, body.rm-dark .rm-theme-toggle { background: #221d14; color: var(--store-text); border-color: #3a3324; }
        body.rm-dark .product-card, body.rm-dark .promo-chip, body.rm-dark .trust-item, body.rm-dark .category-dropdown, body.rm-dark .info-tile, body.rm-dark .tm-card, body.rm-dark .cert-strip, body.rm-dark .cat-tile, body.rm-dark .deal-card, body.rm-dark .sort-select, body.rm-dark .recent-card, body.rm-dark .fchip { background: #221d14 !important; border-color: #3a3324 !important; color: var(--store-text); }
        body.rm-dark .tm-avatar, body.rm-dark .cat-tile-img, body.rm-dark .deal-media, body.rm-dark .recent-media { background: #2a2418; color: #86b06f; border-color: #3a3324; }
        body.rm-dark .store-action, body.rm-dark .product-name, body.rm-dark .category-chip { color: var(--store-text); }
        body.rm-dark .product-media, body.rm-dark .rm-ci-img { background: #2a2418; border-color: #3d3526; }
        body.rm-dark .rm-drawer-head, body.rm-dark .rm-drawer-foot, body.rm-dark .rm-ci { border-color: #3a3324; }
        body.rm-dark .price-mrp, body.rm-dark .text-secondary { color: #a89e8c !important; }
        /* Redesigned header/category/card elements in dark mode */
        body.rm-dark .store-hamburger, body.rm-dark .store-location, body.rm-dark .more-btn { color: var(--store-text); }
        body.rm-dark .allcat-panel, body.rm-dark .more-panel { background: #221d14; border-color: #3a3324; }
        body.rm-dark .allcat-link { color: var(--store-text); }
        body.rm-dark .allcat-link:hover { background: #2a2418; }

        /* Announcement copy: the full sentence is the desktop default, the short
           mobile variant is switched on inside the mobile block below. */
        .rm-ann-short { display: none; }

        /* ---------- Sticky region wrapper ---------- */
        /* Desktop: this is the sticky element, so header + category strip pin together
           exactly as they did when .store-header was the sticky one. On mobile it
           becomes display:contents (below) so the header can pin on its own. */
        .store-sticky { position: sticky; top: 0; z-index: var(--z-sticky); }

        /* ---------- Drawer: new home for the actions dropped from the mobile header ---------- */
        /* Hidden on desktop, where all of these still live in the header itself. */
        .rm-menu-fixed { display: none; border-top: 1px solid #f0ebe0; margin-top: .35rem; padding-top: .35rem; }
        .rm-menu-theme { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem 1rem; border: 0; background: transparent; cursor: pointer; color: var(--store-text); font-weight: 600; font-size: .92rem; font-family: inherit; text-align: left; }
        .rm-menu-theme:hover { background: #f4f2ec; color: var(--store-accent); }
        .rm-menu-theme > i { font-size: 1.25rem; color: var(--store-accent); width: 24px; text-align: center; flex: 0 0 auto; }
        .rm-menu-pill { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--store-accent); color: #fff; font-size: var(--fs-xs); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
        body.rm-dark .rm-menu-fixed { border-color: #3a3324; }
        body.rm-dark .rm-menu-theme { color: var(--store-text); }
        body.rm-dark .rm-menu-theme:hover { background: #2a2418; }

        /* ---------- Mobile: readability floor ---------- */
        /* Every step of the scale is raised here, in one place, instead of chasing
           individual declarations. Desktop keeps the :root values above. */
        @media (max-width: 820px) {
            :root {
                --fs-2xs:  13px;
                --fs-xs:   13px;
                --fs-sm:   13px;
                --fs-md:   13px;
                --fs-base: 13px;
                --fs-lg:   14px;   /* body / descriptions */
                --fs-mrp:  13px;   /* struck-through MRP */
                --fs-body: 14px;
                --fs-name: 14px;   /* product name */
                --fs-price: 16px;  /* headline price */
                --fs-h2:   19px;   /* section headings */

                /* Contrast: #7a7266 on the page background (#f6f4f0) is 4.32:1 and
                   fails AA. #6f6858 is 4.99:1 there and 5.53:1 on white. */
                --store-muted: #6f6858;
            }

            /* Anything still carrying a hard-coded size below the floor. */
            body, .rm-suggest span, .rm-suggest b,
            .allcat-link, .subcategory-link,
            .rm-menu-list a, .rm-menu-theme,
            .rm-foot-contact div, .rm-foot-bottom, .rm-foot ul { font-size: var(--fs-lg); }
            .store-search input { font-size: var(--fs-lg); }
            .stock-badge i, .allcat-link img, .allcat-ini { font-size: var(--fs-lg); }
            /* Tabler stub ships .badge and .small at a hard 12px. */
            .badge, .small, small { font-size: var(--fs-lg); }

            /* Spec'd roles. */
            .product-name { font-size: var(--fs-name); font-weight: 600; }
            .price-main { font-size: var(--fs-price); font-weight: 700; }
            .price-mrp { font-size: var(--fs-mrp); }
            .section-head h2, .product-intro h1 { font-size: var(--fs-h2); }

            /* Small informational text that failed 4.5:1 on white. */
            .price-mrp, .cmb-card-price s, .deal-price s { color: #6b655a; }
            .price-saved, .cmb-card-savepct, .cmb-save { color: #c2410c; }
            .product-offer { color: #b23c0a; background: #fff2df; }
            .free-del { color: #b8431a; }
            .deal-off { background: #a2542c; }
            .pm-fallback, .cmb-item-ph { color: #4f7a3a; }
        }

        /* ---------- Pointer targets: base (desktop) = 32px minimum ----------
           Mouse pointers are precise, so desktop gets 32x32 rather than 44x44 and the
           UI keeps its current density. The mobile block below raises the same
           elements to 44x44. Everything here expands the HIT region only -- painted
           sizes are untouched. */
        .rm-announce-x, .rm-menu-close, .rm-foot ul a, .rm-foot-contact a,
        .rm-suggest a, .allcat-link, .subcategory-link, .rm-menu-list a,
        .rm-menu-theme, .more-btn { position: relative; }

        .rm-announce-x::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -5px; right: -5px; }
        .rm-menu-close { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
        .rm-foot ul a, .rm-foot-contact a, .md-link { display: inline-flex; align-items: center; min-height: 32px; }
        .rm-suggest a, .allcat-link, .subcategory-link, .rm-menu-list a, .rm-menu-theme { min-height: 32px; }
        .qty-stepper button, .rm-drawer-close, .rm-qv-close { min-width: 32px; min-height: 32px; }
        .sort-select, .sort-check { min-height: 32px; }
        .sort-check input { width: 18px; height: 18px; }
        .fchip, .fchip-clear { min-height: 32px; display: inline-flex; align-items: center; }
        .more-btn, .allcat-btn { min-height: 32px; }
        /* Header controls: 32px boxes on desktop; the mobile block takes these to 44. */
        .store-hamburger { min-width: 32px; min-height: 32px; justify-content: center; }
        .store-action { min-width: 32px; min-height: 32px; }
        .store-location { min-height: 32px; }

        /* ---------- Mobile: 44x44 touch targets ---------- */
        /* Two techniques. Where there is slack (drawer, footer, CTAs) the control is
           genuinely resized. Where growing the box would move the layout, a transparent
           ::after with negative insets extends only the hit region -- the icon keeps its
           exact painted size. Expanded regions are kept inside their own container and
           never overlap a *different* interactive target. */
        @media (max-width: 820px) {
            .rm-tap { position: relative; }
            .store-action::after, .card-wish::after, .variant-chip::after,
            .section-viewall::after, .product-name::after, .allcat-btn::after,
            .cmb-card-name::after, .rm-announce-x::after {
                content: ''; position: absolute; z-index: 1;
            }

            /* Header trio: real 44px boxes. The icons stay 27/34/24px, centred inside.
               Widths come out of the search field, which stays comfortably wide. */
            .store-header-main { gap: .2rem; padding: .1rem 0; }
            .store-hamburger { width: 44px; height: 44px; justify-content: center; padding: 0; }
            /* width, not min-width: the overflow-containment block later in this file
               sets `.store-header-main > * { min-width: 0 }` at equal specificity. */
            .store-logo { width: 44px; min-height: 44px; justify-content: center; }
            .store-action { position: relative; min-width: 44px; min-height: 44px; justify-content: center; }
            .store-search input { height: 44px; }

            /* Announcement close: the bar is only 26px tall, so a full 44px-tall region
               is impossible without either growing the bar or covering the header below
               it. Widened to 44 and given the bar's full height (44x26). */
            .rm-announce-x::after { top: -4px; bottom: -4px; left: -12px; right: -11px; }

            /* Wishlist heart: expanded away from the media edges so the parent's
               overflow:hidden cannot clip the region. 26 -> 44x44. */
            .card-wish::after { top: -8px; right: -8px; bottom: -10px; left: -10px; }

            /* Pack chips: 22 -> 44 tall. Vertical only, so neighbouring chips never
               overlap each other; z-index lifts it over the (non-interactive) stock line. */
            .variant-chip { position: relative; z-index: 2; }
            .variant-chip::after { top: -11px; bottom: -11px; left: 0; right: 0; }

            /* "View All": 22 -> 44 tall without growing .section-head. */
            .section-viewall { position: relative; }
            .section-viewall::after { top: -11px; bottom: -11px; left: -6px; right: -6px; }

            /* Product name: 38 -> 44 tall. The 3px it borrows above overlaps
               .product-media, which is a link to the same product, so a tap there is
               correct either way. */
            .product-name { position: relative; z-index: 2; }
            .product-name::after { top: -6px; bottom: -20px; left: 0; right: 0; }

            /* All Categories: 34 -> 44 tall without growing the category strip. */
            .allcat-btn { position: relative; }
            .allcat-btn::after { top: -5px; bottom: -5px; left: 0; right: 0; }

            /* Combo title: 17 -> 45 tall. */
            .cmb-card-name { position: relative; z-index: 2; }
            .cmb-card-name::after { top: -14px; bottom: -14px; left: 0; right: 0; }

            /* Hero dots: 9x9 -> 24x24. The dot itself is still 9px, drawn by ::before;
               only the button box around it grows, so the row spaces out slightly. */
            .hero-dots { gap: 0; }
            .hero-dots button { width: 24px; height: 24px; padding: 0; background: transparent; border-radius: 0; position: relative; }
            .hero-dots button::before {
                content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.5);
                transition: width .2s ease;
            }
            .hero-dots button.active { width: 40px; background: transparent; }
            .hero-dots button.active::before { width: 26px; background: #fff; }

            /* Real resizes where there is room. */
            .btn-add-cart { min-height: 44px; }
            .sort-select { min-height: 44px; }
            .sort-check { min-height: 44px; }
            .sort-check input { width: 24px; height: 24px; }
            .rm-menu-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
            .rm-menu-theme { min-height: 44px; }
            .rm-menu-list a { min-height: 44px; }
            .rm-drawer-close { width: 44px; height: 44px; }
            .rm-drawer-foot .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
            .rm-foot ul a, .rm-foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
            /* 44px targets in a single column made the footer ~1100px tall on a phone.
               Two columns keeps the targets and halves the height. */
            .rm-foot ul { grid-template-columns: 1fr 1fr; column-gap: .75rem; }
            .rm-foot-social a { width: 44px; height: 44px; }
            .qty-stepper button { height: 44px; }
            .buy-cart-icon { min-height: 44px; }
            .rm-qv-close, .lb-x { width: 44px; height: 44px; }
            .fchip, .fchip-clear { min-height: 44px; display: inline-flex; align-items: center; }
            .rm-suggest a { min-height: 44px; }
            .subcategory-link, .allcat-link { min-height: 44px; }
            .cmb-card-add, .btn-cmb-add { min-height: 44px; }
            .md-link { display: inline-flex; align-items: center; min-height: 44px; }
        }

        /* ---------- Mobile: compact header rebuild ---------- */
        /* Mobile only. The desktop header keeps its markup, its rules and its behaviour. */
        @media (max-width: 820px) {
            /* Unpin the category strip. With the wrapper's box gone, .store-header
               pins on its own and .category-strip is a plain sibling that scrolls off. */
            .store-sticky { display: contents; }

            /* 1. Announcement bar: short copy, one line, ellipsis, pinned on top. */
            .rm-announce {
                position: sticky; top: 0; z-index: var(--z-sticky-top);
                height: 26px; line-height: 26px;
                padding: 0 1.7rem 0 .7rem;
                font-size: var(--fs-sm); font-weight: 700; text-align: left;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            .rm-announce .rm-ann-full { display: none; }
            .rm-announce .rm-ann-short { display: inline; }
            .rm-announce .rm-announce-x { right: .3rem; font-size: 1rem; }

            /* 4. Only the announcement bar and the logo/search row stay sticky. */
            .store-header { position: sticky; top: 26px; z-index: var(--z-sticky); }
            body.rm-ann-off .store-header { top: 0; }

            /* 3. One row: hamburger | logo mark | search | cart. */
            .store-header-main {
                display: flex; flex-wrap: nowrap; align-items: center;
                /* Tighter gap/padding pays for the 44px touch boxes above without
                   making the header any taller than it was. */
                gap: .2rem; padding: .1rem 0;
            }
            .store-hamburger { order: 0; flex: 0 0 auto; font-size: 1.5rem; }
            .store-logo { order: 1; flex: 0 0 auto; gap: 0; }
            .store-search { order: 2; flex: 1 1 auto; min-width: 0; }
            .store-header-actions { order: 3; flex: 0 0 auto; margin-left: 0; gap: 0; }

            .store-location { display: none; }
            .store-logo-text { display: none; }
            .store-logo-mark { width: 34px; height: 34px; font-size: 1.25rem; border-radius: 10px; }
            .store-search input { height: 44px; border-radius: 11px; padding: 0 .7rem 0 2.2rem; font-size: var(--fs-lg); }
            .store-search i { left: .6rem; font-size: 1rem; }

            /* 2. The 5-icon row is gone. Cart stays here; the rest moved to the
               drawer (.rm-menu-fixed) and the bottom nav's Account tab. */
            .store-header-actions .rm-theme-toggle,
            .store-header-actions .store-action:not([data-cart-link]) { display: none; }
            .store-header-actions [data-cart-link] .store-action-label { display: none; }
            .store-header-actions [data-cart-link] .store-action-ic { font-size: 1.5rem; }

            /* Category strip scrolls with the page now, so it can be tighter. */
            .category-strip { position: static; }
            .category-bar { padding: .35rem 0; }

            /* Relocated actions become visible in the drawer. */
            .rm-menu-fixed { display: block; }

            /* Bottom nav must clear the iPhone home indicator. */
            .rm-bottom-nav { padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom, 0px)); }
            /* 70px, not 64: the nav is 63px plus the .3rem bottom padding added for
               the home-indicator inset, so 64 left 2px of footer under the bar. */
            .store-shell { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

            /* Back-to-top is removed on mobile rather than repositioned: the bottom
               nav already puts Home one tap away, and a 46px floating button over the
               content is a net loss on a 386px screen. Desktop keeps it. */
            .rm-top { display: none; }

            /* Product page: the sticky Add to Cart bar replaces the tab bar rather
               than stacking on top of it. Both are position:fixed at bottom:0, so
               showing both meant one covered the other. */
            body.rm-pdp .rm-bottom-nav { display: none; }
        }

        /* ---------- Mobile: horizontal overflow containment ---------- */
        /* Everything below is mobile-only. Desktop layout is unchanged. */
        @media (max-width: 820px) {
            /* Backstop only, not the fix. `clip` rather than `hidden`: overflow:hidden
               on html/body turns them into scroll containers and .store-header's
               position:sticky silently stops working. `clip` contains the overflow
               without that side effect. */
            html, body { overflow-x: clip; }
            @supports not (overflow-x: clip) {
                html { overflow-x: hidden; }
            }

            /* No shell-level box may exceed the viewport. */
            .store-shell, .store-frame, main,
            .store-header, .category-strip { max-width: 100%; }

            /* Flex/grid children default to min-width:auto, which refuses to shrink
               below their longest unbreakable run of text. That is what pushes the
               document wider than the viewport. */
            .store-header-main, .category-bar, .stock-line { min-width: 0; }
            .store-header-main > *, .category-bar > * { min-width: 0; }

            /* Category chips scroll inside their own strip and never widen the page.
               The scroll container stays on .category-strip-inner rather than on
               .category-strip: the All-Categories mega panel is absolutely positioned
               inside .category-strip and hangs below it, so making .category-strip a
               scroll container would clip that panel shut on mobile. */
            .category-strip-inner {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x proximity;
                scrollbar-width: none;
                -ms-overflow-style: none;
                min-width: 0;
                max-width: 100%;
            }
            .category-strip-inner::-webkit-scrollbar { display: none; }
            .category-item { flex-shrink: 0; scroll-snap-align: start; }
            .category-chip { flex-shrink: 0; }

            /* Long single words break instead of widening their container. */
            .store-logo-name, .section-head h2 { overflow-wrap: break-word; }
        }
        body.rm-dark .allcat-link img, body.rm-dark .allcat-ini, body.rm-dark .category-chip-image { background: #2a2418; }
        body.rm-dark .qty-stepper { background: #2a2418; border-color: var(--store-accent); }
        body.rm-dark .store-logo-mark { background: #2a2418; }

        /* ---------- Cart feedback loop ---------- */
        /* Badge bump: fires whenever the count changes so the eye is drawn to it. */
        @keyframes rm-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
        .rm-bump { animation: rm-bump .35s cubic-bezier(.34,1.56,.64,1); }
        @media (prefers-reduced-motion: reduce) { .rm-bump { animation: none; } }

        /* Toast: bottom-right on desktop. Undo has to be comfortably clickable. */
        .rm-toast-wrap { z-index: var(--z-toast); }
        .rm-toast-undo {
            margin-left: .35rem; border: 0; background: rgba(255,255,255,.18); color: #fff;
            font: inherit; font-weight: 800; font-size: var(--fs-lg); letter-spacing: .03em;
            padding: .3rem .6rem; border-radius: 8px; cursor: pointer; min-height: 32px;
            text-transform: uppercase;
        }
        .rm-toast-undo:hover { background: rgba(255,255,255,.3); }

        /* Mobile sticky cart bar. Sits above the tab bar; the tab bar stays usable. */
        .rm-cartbar { display: none; }
        .rm-cartbar[hidden] { display: none !important; }

        @media (max-width: 820px) {
            .rm-cartbar {
                position: fixed; left: 8px; right: 8px;
                bottom: calc(70px + env(safe-area-inset-bottom, 0px));
                z-index: var(--z-cartbar);
                display: flex; align-items: center; justify-content: space-between; gap: .6rem;
                padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px) * 0);
                background: var(--store-accent); color: #fff; border-radius: 14px;
                box-shadow: 0 8px 24px rgba(44,82,40,.32);
                text-decoration: none; min-height: 52px;
                transform: translateY(140%); opacity: 0;
                transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
            }
            .rm-cartbar.in { transform: none; opacity: 1; }
            .rm-cartbar-info { display: inline-flex; align-items: baseline; gap: .4rem; font-size: var(--fs-lg); }
            .rm-cartbar-info b { font-weight: 800; }
            .rm-cartbar-dot { opacity: .7; }
            .rm-cartbar-cta { display: inline-flex; align-items: center; gap: .3rem; font-weight: 900; font-size: var(--fs-lg); white-space: nowrap; }

            /* Reserve room so the bar never covers the last row of content. */
            body.rm-has-cartbar .store-shell { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }

            /* Toast clears the cart bar (and the tab bar under it). */
            .rm-toast-wrap { right: 10px; left: 10px; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
            body:not(.rm-has-cartbar) .rm-toast-wrap { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
            body.rm-pdp .rm-toast-wrap { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
            .rm-toast { max-width: none; }
        }

        /* Desktop: the cart panel becomes a dropdown anchored under the header icon
           instead of a full-height drawer. Same markup, same state, same handlers --
           only the box changes, so there is one mini-cart implementation, not two. */
        @media (min-width: 821px) {
            .rm-drawer {
                top: 64px; right: 18px; height: auto; max-height: min(72vh, 620px);
                width: 380px; border-radius: 18px;
                box-shadow: 0 24px 60px rgba(20,12,40,.22);
                transform: translateY(-12px) scale(.98); opacity: 0;
                visibility: hidden; pointer-events: none;
                transition: transform .18s ease, opacity .18s ease, visibility .18s;
            }
            .rm-drawer.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
            .rm-drawer::before {   /* little pointer up at the cart icon */
                content: ''; position: absolute; top: -7px; right: 26px;
                width: 14px; height: 14px; background: inherit;
                border-left: 1px solid #ece5d8; border-top: 1px solid #ece5d8;
                transform: rotate(45deg); border-radius: 3px 0 0 0;
            }
            /* The dimmer is for the mobile drawer; a dropdown should not dim the page. */
            .rm-overlay { display: none; }
        }
        /* ---------- Skeletons ----------
           Same box sizes as the real content, so swapping one for the other shifts
           nothing. Shimmer is decorative and switches to flat grey when the user has
           asked for reduced motion. */
        @keyframes rm-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
        .sk {
            background: #ece7de;
            background-image: linear-gradient(90deg, #ece7de 0px, #f6f2ea 180px, #ece7de 360px);
            background-size: 720px 100%;
            animation: rm-shimmer 1.15s linear infinite;
            border-radius: 8px;
        }
        body.rm-dark .sk { background: #2a2418; background-image: linear-gradient(90deg, #2a2418 0px, #342d1f 180px, #2a2418 360px); }
        @media (prefers-reduced-motion: reduce) { .sk { animation: none; background-image: none; } }

        .sk-text { height: .85em; margin: .3rem 0; }
        .sk-text.w40 { width: 40%; } .sk-text.w60 { width: 60%; } .sk-text.w80 { width: 80%; } .sk-text.w100 { width: 100%; }

        /* Product-card skeleton: mirrors .product-card exactly (see Phase 8 sizes). */
        .sk-card { background: #fff; border: 1px solid #eee7db; border-radius: 16px; padding: .55rem; display: flex; flex-direction: column; gap: .2rem; }
        .sk-card .sk-media { aspect-ratio: 1 / 1; border-radius: 12px; width: 100%; }
        .sk-card .sk-name { height: 38px; margin-top: .3rem; border-radius: 6px; }
        .sk-card .sk-price { height: 22px; width: 65%; margin-top: .25rem; border-radius: 6px; }
        @media (max-width: 820px) {
            .sk-card { padding: .45rem; border-radius: 14px; gap: .15rem; }
            .sk-card .sk-name { height: 18px; margin-top: .25rem; }
        }

        /* Mini-cart / cart line skeleton: matches .rm-ci's 54px + text + total grid. */
        .sk-line { display: grid; grid-template-columns: 54px 1fr 56px; gap: .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid #f0ebe0; }
        .sk-line .sk-thumb { width: 54px; height: 54px; border-radius: 12px; }
        .sk-line .sk-total { height: 16px; border-radius: 6px; }

        /* Search suggestion rows: matches .rm-sg-item (32px thumb, one line). */
        .sk-row { display: grid; grid-template-columns: 32px 1fr; gap: .6rem; align-items: center; padding: .4rem .55rem; }
        .sk-row .sk-thumb { width: 32px; height: 32px; border-radius: 8px; }

        /* Media placeholders: hold the image box while the file downloads. Aspect-ratio
           already reserves the space, so this only removes the blank flash. */
        .product-media.sk-hold, .pdp-main.sk-hold, .deal-media.sk-hold { background-image: linear-gradient(90deg,#ece7de 0px,#f6f2ea 180px,#ece7de 360px); background-size: 720px 100%; animation: rm-shimmer 1.15s linear infinite; }
        @media (prefers-reduced-motion: reduce) { .product-media.sk-hold, .pdp-main.sk-hold, .deal-media.sk-hold { animation: none; background-image: none; } }
        /* ---------- Search: suggestions, recent, popular, voice ---------- */
        /* The mic is a secondary affordance inside a text field, so it stays quiet:
           no coloured pill, no pulse ring. The old version turned red and pulsed a
           box-shadow while listening, which read as an error state. A filled icon
           and the accent colour say "listening" without shouting. */
        .rm-mic { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); z-index: 3;
            width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent;
            color: #b0a897; cursor: pointer; display: inline-flex; align-items: center;
            justify-content: center; font-size: 1.05rem; }
        .rm-mic:hover { color: var(--store-accent); }
        .rm-mic.listening { color: var(--store-accent); }
        .store-search input { padding-right: 2.4rem; }

        /* Section labels are signposts, not headings: small, quiet, sentence case. */
        .rm-sg-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
            padding: .55rem .6rem .25rem; font-size: var(--fs-sm); font-weight: 700;
            color: var(--store-muted); letter-spacing: .02em; }
        .rm-sg-clear { border: 0; background: transparent; color: var(--store-accent); font: inherit;
            font-weight: 700; font-size: var(--fs-sm); cursor: pointer; min-height: 30px; padding: 0 .3rem; }

        /* One line per result. The name and the price are what a shopper scans;
           brand and pack sit inline after the name in a lighter weight rather than
           on a second line, which is what made the panel tall and heavy. */
        .rm-sg-item { display: flex; align-items: center; gap: .6rem; padding: .35rem .55rem; border-radius: 10px;
            text-decoration: none; color: var(--store-text); min-height: 40px; }
        .rm-sg-item:hover, .rm-sg-item.active { background: #f4f2ec; }
        .rm-sg-item img, .rm-sg-item .rm-sg-ic { width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
            background: #f2efe7; display: inline-flex; align-items: center; justify-content: center;
            color: var(--store-accent); font-size: .95rem; flex: 0 0 auto; }
        .rm-sg-mid { display: flex; align-items: baseline; gap: .4rem; min-width: 0; flex: 1 1 auto; }
        .rm-sg-mid b { font-weight: 600; font-size: var(--fs-body); line-height: 1.3;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .rm-sg-mid span { color: var(--store-muted); font-size: var(--fs-sm); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
        .rm-sg-price { font-weight: 700; color: var(--store-text); font-size: var(--fs-body); flex: 0 0 auto; }
        .rm-sg-recent { display: flex; align-items: center; gap: .2rem; }
        .rm-sg-recent-go { flex: 1 1 auto; display: inline-flex; align-items: center; gap: .5rem;
            padding: .35rem .55rem; border-radius: 10px; text-decoration: none; color: var(--store-text);
            font-size: var(--fs-body); min-height: 40px; }
        .rm-sg-recent-go::before { content: '\ebd2'; font-family: 'tabler-icons'; color: #b0a897; font-size: .95rem; }
        .rm-sg-recent-go:hover, .rm-sg-recent-go.active { background: #f4f2ec; }
        .rm-sg-x { border: 0; background: transparent; color: #b0a897; cursor: pointer;
            width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
        .rm-sg-x:hover { background: #f4f2ec; color: #b42318; }
        .rm-sg-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem .6rem .6rem; }
        .rm-sg-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85rem;
            border-radius: 999px; border: 1px solid #e2d9c6; background: var(--store-surface);
            color: var(--store-text); text-decoration: none; font-weight: 700; font-size: var(--fs-lg); }
        .rm-sg-chips a:hover, .rm-sg-chips a.active { border-color: var(--store-accent); color: var(--store-accent); }
        .rm-sg-none { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .8rem; text-align: center; }
        .rm-sg-none b { font-size: var(--fs-body); }
        .rm-sg-none span { color: var(--store-muted); font-size: var(--fs-lg); }
        /* A dead-end search still has to offer a way onward. */
        .rm-sg-none-acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .7rem; }
        .rm-sg-none-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
            padding: .45rem 1rem; border-radius: 11px; font-weight: 700; font-size: var(--fs-lg);
            text-decoration: none; cursor: pointer; border: 1.5px solid var(--store-accent); }
        .rm-sg-none-btn.primary { background: var(--store-accent); color: #fff; }
        .rm-sg-none-btn.ghost { background: transparent; color: var(--store-accent); }
        body.rm-dark .rm-sg-none-btn.ghost { color: #8fd39a; border-color: #8fd39a; }
        body.rm-dark .rm-sg-item:hover, body.rm-dark .rm-sg-item.active,
        body.rm-dark .rm-sg-recent-go:hover { background: #2a2418; }

        /* Mobile.
           This used to be a full-screen takeover: position:fixed over the viewport,
           the body pinned with a scroll lock, a pushed history entry so Back would
           close it, a back-arrow button, and a rule disabling the header's
           backdrop-filter because that filter was capturing the fixed panel. Six
           interlocking pieces, and tapping the search box felt like leaving the page.

           It is the same dropdown as desktop now, just taller. Nothing is pinned,
           nothing is pushed onto history, and the page behind stays where it was —
           so closing it is instant and Back still means "previous page". */
        @media (max-width: 820px) {
            .rm-suggest { max-height: min(70vh, 460px); border-radius: 14px;
                padding-bottom: calc(.35rem + env(safe-area-inset-bottom, 0px)); }
            .rm-mic { right: .3rem; }
        }
        /* The back-arrow belonged to the takeover; there is nothing to go back from. */
        .rm-sg-close { display: none; }
        /* ---------- Bottom nav: 5 tabs ---------- */
        @media (max-width: 820px) {
            .rm-bottom-nav { grid-template-columns: repeat(5, 1fr); }
            .rm-bottom-nav a { font-size: var(--fs-sm); gap: .05rem; padding: .35rem .1rem; }
            .rm-bottom-nav a span { line-height: 1.15; }
            .rm-bottom-nav i { font-size: 1.25rem; }
            /* Clear active state: colour alone is too weak on a small screen. */
            .rm-bottom-nav a.active { color: var(--store-accent); font-weight: 800; }
            .rm-bottom-nav a.active i { transform: translateY(-1px); }
            .rm-bottom-nav a.active::before {
                content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
                width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--store-accent);
            }
            .rm-bn-pill { right: calc(50% - 18px); }
        }
        @media (max-width: 370px) {
            /* Measured at 360px: five 72px tabs only fit with an 11px label, which
               breaks the 13px readability floor. Search earns its slot over Shop --
               categories are still one tap away via the strip and the hamburger. */
            .rm-bottom-nav { grid-template-columns: repeat(4, 1fr); }
            .rm-bottom-nav a[href*="store-sections"] { display: none; }
            .rm-bottom-nav i { font-size: 1.15rem; }
        }