/* main.css — page-specific styles for main.html Extracted verbatim from the
   five inline <style> blocks that used to live in main.html (document
   order: lines 2214, 3337, 4518, 8823, 9371). */


/* 1. PAGE CHROME — preloader, empty states, product-card cart controls,
   variant sheet, nav badge, hero/banner, marquee, toasts, app bar. */

            .qsv-section {
                padding: 14px 12px 6px;
            }
            .qsv-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px;
            }
            /* ── Dynamic column count driven by JS data-count attribute ── */
            /* 3 cards: existing rule above is the default */
            .qsv-grid[data-count="1"] {
                grid-template-columns: minmax(0, 100%);
                justify-content: center;
            }
            .qsv-grid[data-count="2"] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            /* On very small phones: 2-card layout stays side-by-side (mirrors
               existing 3-card tightened layout); 1-card stays full-width. */
            @media (max-width: 359px) {
                .qsv-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
                .qsv-grid[data-count="2"] { gap: 6px; }
            }
            .qsv-card {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 14px 14px 12px;
                background: #ffffff;
                border: 1px solid #eef1f5;
                border-radius: 16px;
                box-shadow: 0 1px 2px rgba(13, 27, 42, .03),
                            0 4px 14px rgba(13, 27, 42, .04);
                text-decoration: none;
                color: inherit;
                overflow: hidden;
                isolation: isolate;
                min-height: 122px;
                transition: transform .25s cubic-bezier(.4, 0, .2, 1),
                            box-shadow .25s cubic-bezier(.4, 0, .2, 1),
                            border-color .2s ease;
                -webkit-tap-highlight-color: transparent;
            }
            .qsv-card::before {
                content: '';
                position: absolute;
                inset: 0;
                background: var(--qsv-tint, transparent);
                opacity: 0;
                z-index: -1;
                transition: opacity .25s ease;
            }
            .qsv-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 2px 4px rgba(13, 27, 42, .04),
                            0 10px 28px rgba(13, 27, 42, .08);
                border-color: #e3e8ee;
            }
            .qsv-card:hover::before {
                opacity: 1;
            }
            .qsv-card:active {
                transform: translateY(0) scale(.985);
                transition-duration: .08s;
            }
            .qsv-card:focus-visible {
                outline: none;
                box-shadow: 0 0 0 3px var(--qsv-ring, rgba(26, 86, 219, .35));
            }
            .qsv-icon {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                color: #ffffff;
                background: var(--qsv-grad, linear-gradient(135deg, #1a56db, #2563eb));
                box-shadow: 0 6px 16px var(--qsv-shadow, rgba(26, 86, 219, .25));
                flex-shrink: 0;
            }
            .qsv-icon i {
                line-height: 1;
            }
            .qsv-title {
                font: 800 13.5px/1.2 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
                color: #0d1b2a;
                margin: 0;
                letter-spacing: -.2px;
                text-align: center;
            }

            /* Typewriter — text length changes each frame, so reserve a
               stable line box height up-front to eliminate vertical jiggle. */
            .qsv-title[data-tw-words] {
                display: block;
                min-height: 1.2em;
                white-space: normal;
                word-break: keep-all;
            }
            .qsv-title[data-tw-words]::after {
                content: '';
                display: inline-block;
                width: 2px;
                height: 0.95em;
                margin-left: 3px;
                vertical-align: text-bottom;
                background: currentColor;
                border-radius: 1px;
                opacity: 1;
                animation: qsv-cursor-blink 1.05s steps(2, start) infinite;
            }
            @keyframes qsv-cursor-blink {
                to { opacity: 0; }
            }

            /* On the smallest phones the longest phrase ("Jor Shri Krishan")
               wraps to a second line — reserve that second line so the card
               doesn't pop taller mid-loop. */
            @media (max-width: 419px) {
                .qsv-title[data-tw-words] { min-height: 2.4em; }
            }

            @media (prefers-reduced-motion: reduce) {
                .qsv-title[data-tw-words]::after {
                    animation: none;
                    opacity: 0;
                }
            }
            .qsv-desc {
                font: 500 11px/1.35 'Inter', system-ui, sans-serif;
                color: #6b7280;
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .qsv-cta {
                margin-top: auto;
                align-self: center;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                padding-top: 6px;
                font: 700 10.5px/1 'Inter', system-ui, sans-serif;
                letter-spacing: .4px;
                text-transform: uppercase;
                color: var(--qsv-cta, #1a56db);
                transition: gap .2s ease;
            }
            .qsv-cta i {
                font-size: 13px;
                transform: translateY(.5px);
                transition: transform .2s ease;
            }
            .qsv-card:hover .qsv-cta { gap: 8px; }
            .qsv-card:hover .qsv-cta i { transform: translate(2px, .5px); }

            /* ── Per-card accents ── */
            .qsv-card--print {
                --qsv-grad:   linear-gradient(135deg, #2563eb, #1d4ed8);
                --qsv-shadow: rgba(37, 99, 235, .28);
                --qsv-tint:   linear-gradient(180deg, rgba(37, 99, 235, .04), transparent 70%);
                --qsv-ring:   rgba(37, 99, 235, .32);
                --qsv-cta:    #1d4ed8;
            }
            .qsv-card--satvik {
                --qsv-grad:   linear-gradient(135deg, #f59e0b, #d97706);
                --qsv-shadow: rgba(217, 119, 6, .28);
                --qsv-tint:   linear-gradient(180deg, rgba(245, 158, 11, .05), transparent 70%);
                --qsv-ring:   rgba(217, 119, 6, .35);
                --qsv-cta:    #b45309;
            }
            .qsv-card--mama {
                --qsv-grad:   linear-gradient(135deg, #ef4444, #dc2626);
                --qsv-shadow: rgba(220, 38, 38, .26);
                --qsv-tint:   linear-gradient(180deg, rgba(239, 68, 68, .05), transparent 70%);
                --qsv-ring:   rgba(220, 38, 38, .32);
                --qsv-cta:    #b91c1c;
            }

            /* Print Store — image-led variant. The hero is a full-bleed GIF
               that anchors the icon+title at the bottom; description + CTA
               sit below the image as normal card body content. */
            .qsv-card.qsv-card--print {
                padding: 0;
                gap: 0;
            }

            .qsv-print-hero {
                position: relative;
                width: 100%;
                /* Fixed, NOT aspect-ratio: width already flexes fluidly
                   with the grid column (3/2/1 active cards, any viewport). */
                height: 74px;
                background-color: #0b1623;          /* poster colour while slides load */
                border-bottom: 1px solid #e3e8ee;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                padding: 8px 10px 10px;
                overflow: hidden;
                transition: filter .35s ease;
            }

            /* ── Dynamic hero slider (DB-driven, replaces the static GIF)
               ── Sits behind the gradient scrim and the icon/title bar. */
            .qsv-hero-slider {
                position: absolute;
                inset: 0;
                z-index: 0;
                overflow: hidden;
                /* transparent so the card's CSS background-image shows as a
                   poster while the API resolves; the print card overrides this. */
                background: transparent;
            }
            /* Print / home-service card uses a dark poster while slides load. */
            .qsv-card--print .qsv-hero-slider { background: #0b1623; }
            .qsv-hero-slide {
                position: absolute;
                inset: 0;
                opacity: 0;
                transition: opacity .8s ease;
            }
            .qsv-hero-slide.is-active { opacity: 1; }
            .qsv-hero-slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                /* Subtle ambient zoom — the slow "documentary" motion used by
                   premium SaaS/fintech hero banners. Runs continuously; safe
                   on inactive slides since they sit at opacity:0. */
                animation: qsv-kenburns 10s ease-in-out infinite alternate;
                will-change: transform;
            }
            @keyframes qsv-kenburns {
                from { transform: scale(1)    translate3d(0, 0, 0); }
                to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
            }
            .qsv-hero-status {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font: 600 9px/1 'Inter', sans-serif;
                color: rgba(255, 255, 255, .72);
                letter-spacing: .3px;
            }
            /* Story-style segmented progress bars — replaces plain dots with
               the same pattern used by premium app "stories" / carousels,
               giving a clear, enterprise-grade sense of rotation progress. */
            .qsv-hero-dots {
                position: absolute;
                top: 8px;
                left: 10px;
                right: 10px;
                z-index: 3;
                display: flex;
                gap: 4px;
                pointer-events: none;
            }
            .qsv-hero-dot {
                flex: 1 1 0;
                height: 3px;
                min-width: 10px;
                max-width: 28px;
                border-radius: 3px;
                background: rgba(255, 255, 255, .32);
                overflow: hidden;
                position: relative;
                box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
            }
            .qsv-hero-dot::after {
                content: '';
                position: absolute;
                inset: 0;
                width: 0%;
                background: #ffffff;
                border-radius: 3px;
            }
            .qsv-hero-dot.is-done::after { width: 100%; }
            .qsv-hero-dot.is-active::after {
                animation: qsv-dot-fill 3.5s linear forwards;
            }
            @keyframes qsv-dot-fill {
                from { width: 0%; }
                to   { width: 100%; }
            }
            @media (prefers-reduced-motion: reduce) {
                .qsv-hero-slide { transition: none; }
                .qsv-hero-slide img { animation: none; }
                .qsv-hero-dot.is-active::after { animation: none; width: 100%; }
            }
            /* Bottom gradient scrim guarantees title contrast across
               every frame of the GIF, no matter the underlying colour. */
            .qsv-print-hero::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
                /* Top band darkens slightly so the story-style progress
                   bars stay legible over bright slides. */
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, .32) 0%,
                    rgba(0, 0, 0, 0) 22%,
                    rgba(0, 0, 0, 0) 38%,
                    rgba(0, 0, 0, .60) 100%
                );
                pointer-events: none;
            }
            .qsv-card--print:hover .qsv-print-hero {
                filter: saturate(1.08) brightness(1.03);
            }

            /* Frosted-glass pill — premium enterprise treatment that keeps
               the icon + title legible over any slide while feeling lighter
               than a flat scrim alone. */
            .qsv-print-titlebar {
                position: relative;
                z-index: 2;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                max-width: 100%;
                padding: 5px 12px 5px 6px;
                /* Rounded-rect "chip" rather than a full stadium pill — pairs
                   cleanly with the icon's own 7px radius and reads as the
                   tag/chip pattern common to enterprise dashboards. */
                border-radius: 14px;
                background: rgba(255, 255, 255, .12);
                border: 1px solid rgba(255, 255, 255, .16);
                backdrop-filter: blur(8px) saturate(150%);
                -webkit-backdrop-filter: blur(8px) saturate(150%);
                box-shadow: 0 4px 14px rgba(0, 0, 0, .20);
            }

            /* Icon — smaller, kept-gradient chip that complements rather
               than competes with the title. */
            .qsv-card--print .qsv-icon {
                width: 24px;
                height: 24px;
                border-radius: 7px;
                font-size: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
                flex-shrink: 0;
            }

            /* Title sits inline next to the icon, on the dark scrim. */
            .qsv-card--print .qsv-title {
                color: #ffffff;
                font-size: 13px;
                letter-spacing: -.1px;
                text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
                text-align: left;
                margin: 0;
                white-space: nowrap;
            }
            .qsv-card--print .qsv-title[data-tw-words] {
                display: inline-block;
                min-height: 1.2em;
                /* Reserves space for the longer of the two rotating phrases so
                   the glass pill never grows/shrinks/recentres mid-loop — the
                   same jiggle-prevention pattern used by Satvik below. */
                min-width: 12ch;
                vertical-align: middle;
            }

            /* Description + CTA — normal card-body spacing, now that the
               base .qsv-card padding has been zeroed. */
            .qsv-card--print .qsv-desc {
                padding: 12px 14px 0;
                margin: 0;
                text-align: center;
            }
            .qsv-card--print .qsv-cta {
                margin-top: auto;
                padding: 8px 14px 12px;
            }

            /* On narrow phones the 3-up grid leaves ~100px per card; shrink
               the icon/font and tighten the pill so the rotating phrase
               never overflows the hero's clipped bounds. */
            @media (max-width: 419px) {
                .qsv-card--print .qsv-title {
                    font-size: 11px;
                }
                .qsv-card--print .qsv-title[data-tw-words] {
                    min-height: 1.2em;
                    min-width: 11ch;
                }
                .qsv-card--print .qsv-icon {
                    width: 18px;
                    height: 18px;
                    font-size: 9.5px;
                    border-radius: 6px;
                }
                .qsv-print-titlebar {
                    gap: 6px;
                    padding: 4px 9px 4px 5px;
                    border-radius: 12px;
                }
                .qsv-print-hero { padding: 6px 6px 8px; }
                .qsv-hero-dots  { top: 6px; left: 6px; right: 6px; }
            }

            /* Satvik Bhog — image-led variant, mirrors the Print Store
               pattern: full-bleed GIF with the icon + title overlaid on a
               bottom scrim, description + CTA flowing beneath. */
            .qsv-card.qsv-card--satvik {
                padding: 0;
                gap: 0;
            }

            .qsv-satvik-hero {
                position: relative;
                width: 100%;
                /* Fixed, NOT aspect-ratio — see .qsv-print-hero's comment;
                   same reasoning applies to every hero variant. */
                height: 74px;
                background-image: url('../ass_img/login_screen/satvik_bhog.gif');
                background-size: cover;
                background-position: center;
                /* extracted from main.html inline CSS: paths were root-relative
                   there, must be ../ from /css/ — mamas_cook fixed likewise. */
                background-color: #fff7e6;          /* warm poster while GIF decodes */
                border-bottom: 1px solid #eef0f3;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                padding: 8px 10px 10px;
                overflow: hidden;
                transition: filter .35s ease;
            }
            /* Scrim — top band darkens slightly so the story-style progress
               bars stay legible over bright slides; bottom band keeps the
               titlebar readable. */
            .qsv-satvik-hero::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;  /* above slider (z:0), below titlebar (z:2) */
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, .32) 0%,
                    rgba(0, 0, 0, 0) 22%,
                    rgba(0, 0, 0, 0) 38%,
                    rgba(0, 0, 0, .60) 100%
                );
                pointer-events: none;
            }
            .qsv-card--satvik:hover .qsv-satvik-hero {
                filter: saturate(1.08) brightness(1.03);
            }

            /* Frosted-glass pill — same enterprise treatment as Home Service /
               Mama's Table: keeps the icon + title legible over any slide
               while feeling lighter than a flat scrim alone. */
            .qsv-satvik-titlebar {
                position: relative;
                z-index: 2;  /* above scrim (z:1) */
                display: inline-flex;
                align-items: center;
                gap: 8px;
                max-width: 100%;
                padding: 5px 10px 5px 6px;
                border-radius: 14px;
                background: rgba(255, 255, 255, .12);
                border: 1px solid rgba(255, 255, 255, .16);
                backdrop-filter: blur(8px) saturate(150%);
                -webkit-backdrop-filter: blur(8px) saturate(150%);
                box-shadow: 0 4px 14px rgba(0, 0, 0, .20);
            }

            /* Icon — smaller chip beside the title, gradient kept from
               the existing Satvik accent variables. */
            .qsv-card--satvik .qsv-icon {
                width: 24px;
                height: 24px;
                border-radius: 7px;
                font-size: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
                flex-shrink: 0;
            }

            /* Title on the dark scrim — white text with a subtle drop
               shadow for guaranteed contrast. */
            .qsv-card--satvik .qsv-title {
                color: #ffffff;
                font-size: 13px;
                letter-spacing: -.1px;
                text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
                text-align: left;
                margin: 0;
                white-space: nowrap;
                word-break: keep-all;
                overflow: visible;
            }
            .qsv-card--satvik .qsv-title[data-tw-words] {
                display: inline-block;
                min-height: 1.2em;
                min-width: 13ch;
                vertical-align: middle;
            }
            /* On narrow phones the global `.qsv-title[data-tw-words]` rule
               promotes min-height to 2.4em (for wrap). */
            @media (max-width: 419px) {
                .qsv-card--satvik .qsv-title {
                    font-size: 11px;
                }
                .qsv-card--satvik .qsv-title[data-tw-words] {
                    min-height: 1.2em;
                    min-width: 13ch;
                }
                .qsv-card--satvik .qsv-icon {
                    width: 18px;
                    height: 18px;
                    font-size: 9.5px;
                    border-radius: 6px;
                }
                /* The 13ch reservation for "Radhe Krishna" still uses
                   nearly all available width at this breakpoint. */
                .qsv-satvik-titlebar {
                    gap: 6px;
                    padding: 0;
                    border-radius: 0;
                    background: transparent;
                    border: none;
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    box-shadow: none;
                }
                .qsv-satvik-hero { padding: 6px 6px 8px; }
            }

            .qsv-card--satvik .qsv-desc {
                padding: 12px 14px 0;
                margin: 0;
                text-align: center;
            }
            .qsv-card--satvik .qsv-cta {
                margin-top: auto;
                padding: 8px 14px 12px;
            }

            /* Mama's Table — image-led variant, mirrors the Print & Satvik
               pattern: full-bleed GIF with the icon + title overlaid on a
               bottom scrim. */
            .qsv-card.qsv-card--mama {
                padding: 0;
                gap: 0;
            }

            .qsv-mama-hero {
                position: relative;
                width: 100%;
                /* Fixed, NOT aspect-ratio — see .qsv-print-hero's comment;
                   same reasoning applies to every hero variant. */
                height: 74px;
                background-image: url('../ass_img/login_screen/mamas_cook.gif');
                background-size: cover;
                background-position: center;
                background-color: #1a0f0d;          /* deep warm poster while GIF decodes */
                border-bottom: 1px solid #eef0f3;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                padding: 8px 10px 10px;
                overflow: hidden;
                transition: filter .35s ease;
            }
            .qsv-mama-hero::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;  /* above slider (z:0), below titlebar (z:2) */
                /* Top band darkens slightly so the story-style progress bars
                   stay legible over bright slides; bottom scrim keeps the
                   titlebar readable — same pattern used by Home Service. */
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, .32) 0%,
                    rgba(0, 0, 0, 0) 22%,
                    rgba(0, 0, 0, 0) 38%,
                    rgba(0, 0, 0, .60) 100%
                );
                pointer-events: none;
            }
            .qsv-card--mama:hover .qsv-mama-hero {
                filter: saturate(1.08) brightness(1.03);
            }

            /* Frosted-glass pill — same enterprise treatment as Home Service:
               keeps the icon + title legible over any slide while feeling
               lighter than a flat scrim alone. */
            .qsv-mama-titlebar {
                position: relative;
                z-index: 2;  /* above scrim (z:1) */
                display: inline-flex;
                align-items: center;
                gap: 8px;
                max-width: 100%;
                padding: 5px 12px 5px 6px;
                border-radius: 14px;
                background: rgba(255, 255, 255, .12);
                border: 1px solid rgba(255, 255, 255, .16);
                backdrop-filter: blur(8px) saturate(150%);
                -webkit-backdrop-filter: blur(8px) saturate(150%);
                box-shadow: 0 4px 14px rgba(0, 0, 0, .20);
            }

            .qsv-card--mama .qsv-icon {
                width: 24px;
                height: 24px;
                border-radius: 7px;
                font-size: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
                flex-shrink: 0;
            }

            .qsv-card--mama .qsv-title {
                color: #ffffff;
                font-size: 13px;
                letter-spacing: -.1px;
                text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
                text-align: left;
                margin: 0;
                white-space: nowrap;
            }
            .qsv-card--mama .qsv-title[data-tw-words] {
                display: inline-block;
                min-height: 1.2em;
                /* Reserves space for the longer of the two rotating phrases so
                   the glass pill never grows/shrinks/recentres mid-loop. */
                min-width: 12ch;
                vertical-align: middle;
            }

            .qsv-card--mama .qsv-desc {
                padding: 12px 14px 0;
                margin: 0;
                text-align: center;
            }
            .qsv-card--mama .qsv-cta {
                margin-top: auto;
                padding: 8px 14px 12px;
            }

            /* On narrow phones the 3-up grid leaves ~100px per card; shrink
               the icon/font and tighten the pill so the rotating phrase
               never overflows the hero's clipped bounds. */
            @media (max-width: 419px) {
                .qsv-card--mama .qsv-title {
                    font-size: 11px;
                }
                .qsv-card--mama .qsv-title[data-tw-words] {
                    min-height: 1.2em;
                    min-width: 11ch;
                }
                .qsv-card--mama .qsv-icon {
                    width: 18px;
                    height: 18px;
                    font-size: 9.5px;
                    border-radius: 6px;
                }
                .qsv-mama-titlebar {
                    gap: 6px;
                    padding: 4px 9px 4px 5px;
                    border-radius: 12px;
                }
                .qsv-mama-hero { padding: 6px 6px 8px; }
            }

            /* ── Tablet ── */
            @media (min-width: 768px) {
                .qsv-section { padding: 16px 16px 8px; }
                .qsv-grid    { gap: 14px; }
                .qsv-card    { min-height: 140px; padding: 16px; }
                .qsv-icon    { width: 44px; height: 44px; font-size: 20px; }
                .qsv-title   { font-size: 14.5px; }
                .qsv-desc    { font-size: 12px; }
                /* Hero height tier for this breakpoint — see the "Fixed,
                   NOT aspect-ratio" comment on .qsv-print-hero above. */
                .qsv-print-hero,
                .qsv-satvik-hero,
                .qsv-mama-hero { height: 130px; }
            }

            /* ── Desktop ── */
            @media (min-width: 1024px) {
                .qsv-grid    { gap: 18px; }
                .qsv-card    { min-height: 156px; padding: 18px 20px; }
                .qsv-icon    { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
                .qsv-title   { font-size: 16px; }
                .qsv-desc    { font-size: 12.5px; }
                .qsv-cta     { font-size: 11px; }
                .qsv-print-hero,
                .qsv-satvik-hero,
                .qsv-mama-hero { height: 150px; }
            }

            /* ── Very small phones — keep 3 across, tighten paddings ── */
            @media (max-width: 359px) {
                .qsv-section { padding: 10px 8px 4px; }
                .qsv-grid    { gap: 6px; }
                .qsv-card    { padding: 10px 8px; min-height: 112px; }
                .qsv-icon    { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
                .qsv-title   { font-size: 11.5px; letter-spacing: -.1px; }
                .qsv-desc    { font-size: 10px; }
                .qsv-cta     { font-size: 9.5px; padding-top: 4px; }
                .qsv-print-hero,
                .qsv-satvik-hero,
                .qsv-mama-hero { height: 62px; }
            }

            @media (prefers-reduced-motion: reduce) {
                .qsv-card,
                .qsv-card::before,
                .qsv-cta,
                .qsv-cta i { transition: none; }
                .qsv-card:hover { transform: none; }
            }


/* 2. FESTIVE PICKS — #festive-picks: panel, category tab strip, product
   rail, cards, skeletons, See-All CTA. */

            /* ── Festive Picks ───────────────────────────────────────── */
            .fp-section { position: relative; overflow: hidden; margin: 10px 0 4px; }


            /* ── B. White ornamental panel ─────────────────────────────── */
            .fp-panel {
                /* margin-top: -1px removed with .fp-crown — it existed only
                   to close the hairline seam against that teal header. */
                position: relative;
                /* Ivory ground, strongest at the center and dissolving
                   outward to plain white at the edges. */
                background-color: #fffff0;
                background-image: radial-gradient(115% 90% at 50% 30%,
                    rgb(255 255 255 / 0) 0%,
                    rgb(255 255 255 / .45) 62%,
                    rgb(255 255 255 / 1) 100%);
                border-radius: 26px 26px 0 0;
                padding: 2px 0 0;
            }

            /* Gold dotted arc tracing the panel's inner top edge. */
            /* ── Panel ornament (dynamic media) Container for
               section_home.icon_svg (section_no = 0), populated by
               _fpApplyPanelMedia(). */
            .fp-panel-media {
                display: block;
                width: 100%;
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                line-height: 0;
                font-size: 0;
                overflow: hidden;
                background: transparent;
            }
            .fp-panel-media > img,
            .fp-panel-media > video {
                display: block;      /* kills the inline-image whitespace */
                width: 100%;
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
            }
            /* PNG / WebP — fixed 80px band. */
            .fp-panel-media > img.fp-media-fixed {
                height: 80px;
                object-fit: cover;
            }
            /* GIF and MP4 keep their natural aspect so the animation is not
               cropped; width:100% above already scales them to the panel. */
            .fp-panel-media > img.fp-media-auto,
            .fp-panel-media > video {
                height: auto;
            }

            /* ── C. Title ───────────────────────────────────────────────
               Playfair Display is already loaded in <head> for the brand
               wordmark, so the serif costs no extra request. */
            .fp-title {
                margin: 2px 0 8px;
                text-align: center;
                font-family: 'Playfair Display', 'Times New Roman', serif;
                font-weight: 900;
                font-size: clamp(1.15rem, 5vw, 1.85rem);
                line-height: 1.08;
                letter-spacing: .01em;
                color: #b0801c;
                background: linear-gradient(180deg, #c99a2e 0%, #b0801c 52%, #97690f 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            /* ── D. Category tab strip Exactly 4 tabs visible per row, at
               every viewport from a 320px phone up through desktop, with
               the rest reachable by scrolling. */
            .fp-cats {
                --fp-gap: 8px;
                display: flex;
                flex-wrap: nowrap;
                align-items: flex-end;
                gap: var(--fp-gap);
                /* Top padding is load-bearing, not cosmetic: this strip is
                   a scroll container with overflow-y: hidden, so it CLIPS
                   at its padding edge. */
                padding: 10px 10px 0;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scrollbar-width: none;

            }
            .fp-cats::-webkit-scrollbar { display: none; }

            .fp-cat {
                /* Corner radius for the tab's rounded top. */
                --fp-r: 14px;
                position: relative;
                box-sizing: border-box;
                min-width: 0;
                /* Exactly 4 tabs + 3 gaps fill the row; flex-grow/shrink
                   stay at 0 so every tab is this same width, never
                   stretched or squeezed by a short/long neighbour. */
                flex: 0 0 calc((100% - 3 * var(--fp-gap)) / 4);
                padding: 8px 4px 8px;
                border: var(--fp-bw) solid transparent;
                border-bottom: none;
                border-radius: var(--fp-r) var(--fp-r) 0 0;
                background: none;
                text-align: center;
                scroll-snap-align: center;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                /* background joins border-color so the active accent wash fades in
                   rather than snapping. Both are cheap; no layout is animated. */
                transition: border-color .22s ease, background .22s ease;
            }

            /* Screens wider than 480px show a 5th tab instead of 4 — same
               formula, just one more item (so 4 gaps, not 3) sharing the
               row. */
            @media (min-width: 481px) {
                .fp-cat {
                    flex-basis: calc((100% - 4 * var(--fp-gap)) / 5);
                }
            }

            /* Sized as a share of the tab's own (now fluid) width rather
               than a fixed px, so the circle keeps the same proportions
               whether the tab lands at ~65px on a 320px phone or wider. */
            .fp-cat-thumb {
                width: 76%;
                aspect-ratio: 1 / 1;
                max-width: 78px;
                margin: 0 auto 6px;
                border-radius: 50%;
                /* Per-tab gradient + ring. The color vars are set by the
                   palette block further down; these declarations never
                   change, so tuning the palette is a one-place edit. */
                background: linear-gradient(160deg, var(--fp-g1, #fafafa) 0%, var(--fp-g2, #f0f0f0) 100%);
                box-shadow: inset 0 0 0 1px rgb(15 23 42 / .06);
                transition: box-shadow .22s ease, transform .22s ease;
                display: grid;
                place-items: center;
                overflow: hidden;
            }
            .fp-cat-thumb img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                /* mix-blend-mode:multiply removed — same Android "blended image
                   not painted until a repaint is forced" bug fixed on
                   .img-wrap-modern img; near-lossless on the white well. */
            }

            /* Reserved to exactly 2 lines (2 x the 1.2 line-height, in the
               element's own font-size unit) REGARDLESS of whether the name
               actually wraps. */
            .fp-cat-name {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                -webkit-box-pack: center;
                overflow: hidden;
                min-height: 2.4em;
                font-size: .75rem;
                font-weight: 600;
                line-height: 1.2;
                color: #33475b;
                text-align: center;
                word-break: break-word;
            }

            /* Selected tab: a burgundy outline on the top and both sides,
               with rounded top corners and a square bottom, so it sits on
               the rail's top border like a folder tab. */
            .fp-cat.is-active {
                /* Top corners only. The bottom stays square via the `0 0`
                   already in .fp-cat's own border-radius, so the tab still
                   meets the rail on a flat edge. */
                --fp-r: 24px;
                border-color: #1f7d5b;
            }
            /* ── D2. Per-tab color identity Eight soft gradients cycled by
               position, so a strip of any length colors itself with no JS
               and no per-row markup. */
            .fp-cats .fp-cat:nth-child(8n+1) { --fp-g1:#fce3d1; --fp-g2:#fcd1af; --fp-rgb:230 81 0;  }
            .fp-cats .fp-cat:nth-child(8n+2) { --fp-g1:#d7e7d9; --fp-g2:#bddbc0; --fp-rgb:27 94 32;  }
            .fp-cats .fp-cat:nth-child(8n+3) { --fp-g1:#d3e1f3; --fp-g2:#b9d3f0; --fp-rgb:13 71 161; }
            .fp-cats .fp-cat:nth-child(8n+4) { --fp-g1:#f0d6e1; --fp-g2:#edc0d2; --fp-rgb:136 14 79; }
            .fp-cats .fp-cat:nth-child(8n+5) { --fp-g1:#e3d6ee; --fp-g2:#d9c1e8; --fp-rgb:74 20 140; }
            .fp-cats .fp-cat:nth-child(8n+6) { --fp-g1:#d0e7e9; --fp-g2:#b3dde1; --fp-rgb:0 96 100;  }
            .fp-cats .fp-cat:nth-child(8n+7) { --fp-g1:#feebd1; --fp-g2:#fee1ad; --fp-rgb:245 127 23;}
            .fp-cats .fp-cat:nth-child(8n+8) { --fp-g1:#f6dbd4; --fp-g2:#f4c8bc; --fp-rgb:191 54 12; }

            /* Rail ↔ active-tab color sync. Same eight hues, same order, so
               a tab and the rail beneath it are always the same family. */
            /* --fp-bw lives on the SECTION because both consumers need it
               and they sit in different subtrees: the tabs (inside
               .fp-panel) draw their border with it, and .fp-rail-wrap. */
            #festive-picks { --fp-bw: 2px; --fp-rail-rgb: 124 178 255; }   /* default: reproduces the rail's original #d5e8ff47 exactly */
            #festive-picks:has(.fp-cat:nth-child(8n+1).is-active) { --fp-rail-rgb: 230 81 0;   }
            #festive-picks:has(.fp-cat:nth-child(8n+2).is-active) { --fp-rail-rgb: 27 94 32;   }
            #festive-picks:has(.fp-cat:nth-child(8n+3).is-active) { --fp-rail-rgb: 13 71 161;  }
            #festive-picks:has(.fp-cat:nth-child(8n+4).is-active) { --fp-rail-rgb: 136 14 79;  }
            #festive-picks:has(.fp-cat:nth-child(8n+5).is-active) { --fp-rail-rgb: 74 20 140;  }
            #festive-picks:has(.fp-cat:nth-child(8n+6).is-active) { --fp-rail-rgb: 0 96 100;   }
            #festive-picks:has(.fp-cat:nth-child(8n+7).is-active) { --fp-rail-rgb: 245 127 23; }
            #festive-picks:has(.fp-cat:nth-child(8n+8).is-active) { --fp-rail-rgb: 191 54 12;  }

            /* Active fill: a wash of the tab's OWN accent fading out
               downward, so the tab still dissolves into the panel beneath
               it instead of reading as a filled block. */
            .fp-cat.is-active {
                background: linear-gradient(357deg, rgb(var(--fp-rgb) / .09) 0%, rgb(var(--fp-rgb) / 0) 74%);
            }

            /* The ambient glow — three layers on ONE box-shadow, so the
               whole effect animates as a single compositor-friendly
               property: 1 inset highlight the lit top edge that sells the. */
            .fp-cat.is-active .fp-cat-thumb {
                box-shadow:
                    inset 0 1px 0 rgb(255 255 255 / .75),
                    0 0 0 3px rgb(var(--fp-rgb) / .16),
                    0 6px 18px -4px rgb(var(--fp-rgb) / .45);
                transform: translateY(-2px);
            }

            /* Pointer devices only: on touch, :hover latches after a tap and
               would strand a lift on the tab the user just left. */
            @media (hover: hover) and (pointer: fine) {
                .fp-cat:not(.is-active):hover .fp-cat-thumb {
                    box-shadow:
                        inset 0 0 0 1px rgb(15 23 42 / .06),
                        0 3px 10px -3px rgb(var(--fp-rgb) / .38);
                    transform: translateY(-1px);
                }
            }

            /* Press feedback settles the lift rather than removing it. */
            .fp-cat:active .fp-cat-thumb { transform: translateY(0); }

            .fp-cat.is-active .fp-cat-name { color: #7d1f3d; font-weight: 700; }

            @media (prefers-reduced-motion: reduce) {
                .fp-cat-thumb,
                .fp-cat.is-active .fp-cat-thumb,
                .fp-cat:not(.is-active):hover .fp-cat-thumb {
                    transition: none;
                    transform: none;
                }
            }

            /* ── E. Product rail — styled exactly like Time-of-Day's own
               product rail (.tod-products / .tod-hscroll / .tod-card, defined
               in #tod-section's <style> block): same light-blue background,
               same mandatory-snap scroll, same fixed-px card widths that wrap
               into a static 6-column grid at ≥992px instead of scrolling.
               Classes stay fp-* (not shared with .tod-card) so the two rails'
               CSS can never cross-contaminate even though they now look
               identical. ─────────────────────────────────────────────────── */
            /* The rail's tint follows whichever tab is active — see the
               #festive-picks:has(...) block up in section D2, which
               publishes --fp-rail-rgb. */
            .fp-rail-wrap {
                padding: 14px 10px 14px;
                min-height: 200px;
                background-color: rgb(var(--fp-rail-rgb, 124 178 255) / .19);

                /* Two stacked layers. */
                /* Edge fade: the line resolves out of nothing at both ends
                   instead of butting hard into the section edges, so it
                   reads as a soft rule rather than a boxed-in border. */
                --fp-edge-fade: 180px;
                background-image:
                    linear-gradient(to right,
                        rgb(31 125 91 / 0) 0,
                        /* The left fade must END at or before the cut, and the right
                           fade START at or after it — otherwise an early tab (small
                           --fp-cut-x, e.g. sc_id 1/2) or a last tab puts the gap inside
                           the fixed edge-fade zone, the fade stop sits past the cut
                           stops, and CSS gradient-stop clamping collapses the gap so the
                           border runs straight under the active tab. min()/max() keep
                           every stop monotonic for any tab position. */
                        #1f7d5b min(var(--fp-edge-fade, 180px), var(--fp-cut-x, 0px)),
                        #1f7d5b var(--fp-cut-x, 0px),
                        transparent var(--fp-cut-x, 0px),
                        transparent calc(var(--fp-cut-x, 0px) + var(--fp-cut-w, 0px)),
                        #1f7d5b calc(var(--fp-cut-x, 0px) + var(--fp-cut-w, 0px)),
                        #1f7d5b max(calc(100% - var(--fp-edge-fade, 180px)), calc(var(--fp-cut-x, 0px) + var(--fp-cut-w, 0px))),
                        rgb(31 125 91 / 0) 100%),
                    linear-gradient(180deg, rgb(255 255 255 / .72) 0%, rgb(255 255 255 / 0) 62%);
                background-size: 100% var(--fp-bw, 2px), auto;
                background-position: top left, top left;
                background-repeat: no-repeat, no-repeat;

                /* Only the tint animates. The border layer must NOT transition:
                   the cutout jumps to a new tab instantly, and easing the
                   gradient stops would smear the gap across the strip. */
                transition: background-color .32s ease;
            }

            /* ── E2. "See All" CTA Sits in normal flow after #fp-rail, so
               it lands under the cards at any count and never overlaps
               them. */
            /* Your values, with one change: the tinted half of the
               background now reads --fp-rail-rgb, the active tab's accent
               published on #festive-picks by the :has() block in section
               D2. */
            .fp-see-all {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: fit-content;
                margin: 5px auto 2px;
                padding: 6px 24px;
                border: 1px solid rgb(31 125 91 / .28);
                border-radius: 999px;
                background-color: rgb(var(--fp-rail-rgb, 124 178 255) / .14);
                background-image: linear-gradient(180deg, #ffffff 0%, rgb(255 255 255 / 0) 100%);
                color: #1f7d5b;
                font-size: .875rem;
                font-weight: 700;
                letter-spacing: .01em;
                line-height: 1;
                text-decoration: none;
                white-space: nowrap;
                min-height: 38px;
                box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 6px 16px -8px rgb(31 125 91 / .45);
                -webkit-tap-highlight-color: transparent;
                transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
            }
            .fp-see-all i {
                font-size: 1rem;
                line-height: 1;
                transition: transform .18s ease;
            }

            /* Pointer devices only: on touch, :hover latches after a tap and
               would strand the lift until the next tap elsewhere. */
            @media (hover: hover) and (pointer: fine) {
                .fp-see-all:hover {
                    border-color: rgb(31 125 91 / .5);
                    /* Deepens the SAME inherited tab accent rather than a
                       fixed green — a hard-coded hover color would override
                       the dynamic background the moment the. */
                    background-color: rgb(var(--fp-rail-rgb, 124 178 255) / .26);
                    box-shadow: 0 2px 4px rgb(15 23 42 / .05),
                                0 10px 22px -10px rgb(31 125 91 / .6);
                    transform: translateY(-1px);
                }
                .fp-see-all:hover i { transform: translateX(3px); }
            }
            .fp-see-all:active {
                transform: translateY(0) scale(.97);
                box-shadow: 0 1px 2px rgb(15 23 42 / .05);
            }
            .fp-see-all:focus-visible {
                outline: 2.5px solid #1f7d5b;
                outline-offset: 3px;
            }

            @media (prefers-reduced-motion: reduce) {
                .fp-see-all,
                .fp-see-all i { transition: none; transform: none; }
            }

            .fp-rail {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                -ms-overflow-style: none;
                gap: 10px;
                padding-bottom: 4px;
                align-items: stretch;
                -webkit-overflow-scrolling: touch;
            }
            .fp-rail::-webkit-scrollbar { display: none; }

            /* Card width steps — identical breakpoints/values to
               .tod-card-wrap. */
            .fp-card {
                flex-shrink: 0;
                width: 148px;
                scroll-snap-align: start;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                border-radius: var(--pcd-radius, 14px);
                overflow: hidden;
                background: var(--pcd-surface, linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #fcfdfe 74%, #f5f8fb 100%));
                border: 1px solid var(--pcd-hairline, rgba(15, 23, 42, .07));
                box-shadow: var(--pcd-shadow, 0 1px 2px rgba(15, 23, 42, .05), 0 6px 14px -8px rgba(15, 23, 42, .10));
                transition: transform .2s, box-shadow .2s;
                /* One card flipping its own Add → quantity control cannot
                   force the rest of the rail to re-layout. */
                contain: layout paint;
            }
            .fp-card:active { transform: scale(.97); }
            @media (hover: hover) and (pointer: fine) {
                .fp-card:hover {
                    box-shadow: var(--pcd-shadow-hover, 0 2px 4px rgba(15, 23, 42, .06), 0 14px 24px -12px rgba(15, 23, 42, .16));
                    border-color: var(--pcd-hairline-hover, rgba(15, 23, 42, .13));
                }
                .fp-card:hover .fp-media img { transform: scale(1.05); }
            }
            @media (min-width: 576px) { .fp-card { width: 162px; } }
            @media (min-width: 768px) { .fp-card { width: 178px; } }
            @media (min-width: 992px) {
                .fp-rail { flex-wrap: wrap; overflow-x: visible; }
                .fp-card { width: calc(16.666% - 9px); }
            }

            /* Media well — 4:3 aspect, object-fit: cover (was 1:1 / contain
               with padding) — same treatment as .tod-thumb. */
            .fp-media {
                position: relative;
                width: 100%;
                aspect-ratio: 4/3;
                background: #f4f4f4;
                overflow: hidden;
                flex-shrink: 0;
            }

            /* Fades in over the shimmer once loaded, and lifts slightly on
               card hover — same treatment as .tod-thumb img. */
            .fp-media img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                position: relative;
                z-index: 1;
                opacity: 0;
                transition: transform .35s, opacity .35s ease;
                will-change: opacity;
            }
            .fp-media img.is-loaded {
                opacity: 1;
                will-change: auto;
            }

            /* ── Global network-image skeleton ────────────────────────────────
               Cross-origin (CDN / DB-sourced) <img>s show the app's standard
               shimmer in their reserved box until they load or error, then it
               clears — a graceful placeholder for slow/flaky networks instead of
               an empty or broken box. The [data-rp-skel] marker + .is-loaded
               toggle are added by js/early-init.js (cross-origin images only;
               local icons load from cache and are skipped). Reuses the
               rp-shimmer gradient + rp-shimmer-slide keyframe from
               design-tokens.css, so it already honours prefers-reduced-motion. */
            img[data-rp-skel]:not(.is-loaded) {
                background-image: linear-gradient(90deg,
                    var(--color-surface, #f8fafc) 25%,
                    #e9ecef 50%,
                    var(--color-surface, #f8fafc) 75%);
                background-size: 200% 100%;
                background-repeat: no-repeat;
                animation: rp-shimmer-slide 1.2s ease-in-out infinite;
            }
            img[data-rp-skel].is-loaded {
                animation: none;
                background-image: none;
            }
            @media (prefers-reduced-motion: reduce) {
                img[data-rp-skel]:not(.is-loaded) { animation: none; }
            }

            /* Shimmer placeholder behind the <img> until it loads or
               errors, then fades out. */
            .fp-img-shimmer {
                position: absolute;
                inset: 0;
                z-index: 0;
                overflow: hidden;
                border-radius: inherit;
                background: #eef0f2;
                transition: opacity .3s ease;
            }
            .fp-img-shimmer::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
                transform: translateX(-100%);
                animation: todShimmerSweep 1.3s ease-in-out infinite;
                will-change: transform;
            }
            .fp-img-shimmer.is-hidden { opacity: 0; pointer-events: none; }

            /* Out-of-stock scrim across the photo itself, matching
               .tod-oos-overlay exactly. */
            .fp-oos-overlay {
                position: absolute;
                z-index: 4;
                inset: 0;
                background: rgba(0, 0, 0, .45);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 9.5px;
                font-weight: 800;
                color: #fff;
                letter-spacing: .4px;
            }

            /* Top-left badge (discount / label) — mirrors .tod-top-badge. */
            .fp-top-badge {
                position: absolute;
                z-index: 3;
                top: 7px;
                left: 7px;
                background: rgba(255, 255, 255, .96);
                font-size: 9px;
                font-weight: 800;
                border-radius: 99px;
                padding: 3px 7px;
                display: inline-flex;
                align-items: center;
                gap: 3px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
                letter-spacing: .2px;
                white-space: nowrap;
            }
            .fp-top-badge.is-discount { color: #B91C1C; }
            .fp-top-badge.is-label    { color: #0D1B2A; }

            /* Bottom badge row inside the well: brand/pack-size pill +
               order count pill, centered over the photo — mirrors
               .tod-badge-row. */
            .fp-badge-row {
                position: absolute;
                z-index: 2;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                /* Covers the whole well — must never swallow the card tap. */
                pointer-events: none;
            }
            .fp-brand-pill,
            .fp-orders-pill {
                background: rgba(15, 23, 42, .58);
                color: #fff;
                font-size: 10.5px;
                font-weight: 700;
                border-radius: 99px;
                padding: 3px 10px;
                box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
                display: inline-flex;
                align-items: center;
                gap: 3px;
                white-space: nowrap;
                max-width: 110px;
                overflow: hidden;
                text-overflow: ellipsis;
                letter-spacing: .2px;
            }

            /* Quantity/ADD control — the real global slide-toggle
               architecture (.btn-cart-wrapper → .btn-add-initial /
               .qty-control-group with .active class). */
            #festive-picks .fp-meta .btn-cart-wrapper {
                flex: 0 0 auto;
                width: 72px;
                min-width: 72px;
                height: 32px;
                margin-top: 0;
                border-radius: 999px;
                box-shadow: 0 4px 12px rgba(26, 139, 60, .30);
                align-self: center;
            }
            #festive-picks .btn-add-initial {
                appearance: none;
                -webkit-appearance: none;
                border: 2px solid #1a8b3c !important;
                border-radius: 999px !important;
                background: #fff !important;
                color: #1a8b3c !important;
                font-size: 11px !important;
                font-weight: 800 !important;
                letter-spacing: .2px;
                gap: 4px;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                white-space: nowrap;
                transition: box-shadow .18s ease, filter .12s ease;
            }
            #festive-picks .btn-add-initial i { font-size: 13px !important; margin-right: 1px; font-weight: 800; }
            #festive-picks .btn-add-initial:hover {
                filter: brightness(1.05);
                box-shadow: 0 8px 20px rgba(26, 139, 60, .42), 0 2px 6px rgba(0, 0, 0, .08);
            }
            #festive-picks .btn-add-initial:active { filter: brightness(.94); }
            #festive-picks .btn-add-initial:focus-visible { outline: 2.5px solid #0f6b2c; outline-offset: 2px; }
            #festive-picks .btn-add-initial:disabled,
            #festive-picks .btn-add-initial[disabled] {
                background: #dcdcdc !important;
                border-color: #dcdcdc !important;
                color: #9a9a9a !important;
                box-shadow: none !important;
                cursor: not-allowed;
                filter: none;
            }
            #festive-picks .qty-control-group {
                display: flex !important;
                align-items: stretch !important;
                background: linear-gradient(135deg, #34c759 0%, #1a8b3c 60%, #0f6b2c 100%) !important;
                border-radius: 999px !important;
                box-shadow: 0 4px 12px rgba(26, 139, 60, .32) !important;
                overflow: hidden !important;
                padding: 0 !important;
                transition: box-shadow .18s ease, filter .12s ease;
            }
            #festive-picks .qty-control-group:hover {
                filter: brightness(1.05);
                box-shadow: 0 8px 20px rgba(26, 139, 60, .42), 0 2px 6px rgba(0, 0, 0, .08) !important;
            }
            #festive-picks .qty-control-group:active { filter: brightness(.94); }
            #festive-picks .qty-control-group:focus-within { outline: 2.5px solid #0f6b2c; outline-offset: 2px; }
            #festive-picks .qty-control-group .qty-btn {
                background: transparent !important;
                border: 0 !important;
                color: #fff !important;
                padding: 0 8px !important;
                font-size: 14px !important;
                line-height: 1;
                cursor: pointer;
                min-width: 24px;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                transition: background .12s, filter .1s;
            }
            #festive-picks .qty-control-group .qty-btn:hover { background: rgba(255, 255, 255, .16) !important; }
            #festive-picks .qty-control-group .qty-btn:active { filter: brightness(.88); }
            #festive-picks .qty-control-group .qty-input {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 20px !important;
                width: 20px !important;
                padding: 0 !important;
                font-size: 12px !important;
                font-weight: 800 !important;
                color: #fff !important;
                background: transparent !important;
                border: 0 !important;
                text-align: center !important;
                outline: none !important;
                pointer-events: none;
                user-select: none;
            }
            /* Shares todQtyBump (defined once, above) rather than declaring a
               second identical keyframes block. */
            #festive-picks .qty-control-group .qty-input.bump { animation: todQtyBump .22s ease; }
            #festive-picks .btn-options-dynamic.btn-add-initial {
                background: #fff !important;
                border: 2px solid #1a8b3c !important;
                color: #1a8b3c !important;
                font-weight: 800 !important;
            }
            #festive-picks .btn-options-dynamic.btn-add-initial i { font-weight: 800 !important; }
            #festive-picks .btn-options-dynamic.btn-add-initial.is-in-cart {
                background: #1a8b3c !important;
                border: none !important;
                color: #fff !important;
            }

            /* ── F. Card text block ────────────────────────────────────────
               Exact .tod-info technique: one flex column with a single `gap`
               doing all the spacing. */
            .fp-info {
                padding: 9px 9px 10px;
                display: flex;
                flex-direction: column;
                gap: 5px;
                flex: 1;
            }
            /* Single-line ellipsis title (was a 2-line clamp), matching
               .tod-title exactly. */
            .fp-name {
                font-size: 12px;
                font-weight: 700;
                color: #0D1B2A;
                line-height: 1.35;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-height: 1.35em;
            }
            /* Plain-text description teaser — new on this card, matching
               .tod-desc. */
            .fp-desc {
                font-size: 10.5px;
                line-height: 1.3;
                color: #8E9BAD;
                font-weight: 500;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-height: 1.3em;
            }
            .fp-price-row {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 6px;
                margin-top: 1px;
            }
            .fp-price-block { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; align-self: flex-start; }
            .fp-mrp {
                font-size: 9.5px;
                color: #1a1a1a;
                font-weight: 500;
                text-decoration: line-through;
                line-height: 1.2;
            }
            .fp-price {
                font-size: 13px;
                font-weight: 800;
                color: #e07702;
                letter-spacing: -.2px;
                white-space: nowrap;
                line-height: 1.2;
                margin-top: auto;
            }

            /* Meta row — rating (or, once the product is in the cart, a
               remove button) on the left, the ADD/quantity control on the
               right. */
            .fp-meta {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                min-width: 0;
                margin-top: auto;
                padding-top: 3px;
            }
            .fp-rating {
                display: inline-flex;
                align-items: center;
                gap: 3px;
                font-size: 10px;
                font-weight: 700;
                color: #0D1B2A;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .fp-rating i { color: #F59E0B; font-size: 10px; flex-shrink: 0; }

            /* Remove-from-cart — icon-only, hidden until the product is
               actually in the cart (see the .fp-meta:has() rule below). */
            .fp-meta-delete {
                display: none;
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                align-items: center;
                justify-content: center;
                border: 1px solid #f3cccc;
                border-radius: 50%;
                background: #fff5f5;
                color: #c0392b;
                font-size: .95rem;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                transition: background .15s ease, transform .1s ease;
            }
            .fp-meta-delete:hover { background: #fde3e3; }
            .fp-meta-delete:active { transform: scale(.92); }
            .fp-meta-delete:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }

            /* The swap itself: .btn-cart-wrapper.active is the exact same
               class/state window.toggleCartState()/updateQty() already
               maintain for every cart control on the site (product grid. */
            .fp-meta:has(.btn-cart-wrapper.active) .fp-rating { display: none; }
            .fp-meta:has(.btn-cart-wrapper.active) .fp-meta-delete { display: flex; }

            /* ── G. Skeletons ──────────────────────────────────────────────
               A structured bone-for-bone skeleton — thumb → title → desc →
               price/button → rating — at the same width breakpoints as
               .fp-card, matching .tod-skel-card exactly, so swapping
               skeleton → real card never changes the rail's height (no CLS).
               One sweeping highlight per card (.fp-skel-card::after)
               illuminates every bone at once instead of animating each bone
               separately. .fp-skel-cat/.fp-skel-circle/.fp-skel-label below
               are unrelated — that's the category-tab strip's own skeleton,
               untouched. */
            .fp-skel-cat {
                box-sizing: border-box;
                flex: 0 0 calc((100% - 3 * 8px) / 4);
                padding: 8px 4px 8px;
                text-align: center;
            }
            .fp-skel-circle { width: 76%; aspect-ratio: 1 / 1; max-width: 78px; margin: 0 auto 6px; border-radius: 50%; }
            .fp-skel-label { height: 9px; border-radius: 5px; margin: 0 6px 4px; }

            .fp-skel-card {
                position: relative;
                flex-shrink: 0;
                width: 148px;
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                overflow: hidden;
                background: #fff;
                border: 1px solid #EFF2F6;
                scroll-snap-align: start;
                contain: layout style;
            }
            @media (min-width: 576px) { .fp-skel-card { width: 162px; } }
            @media (min-width: 768px) { .fp-skel-card { width: 178px; } }
            @media (min-width: 992px) { .fp-skel-card { width: calc(16.666% - 9px); } }
            .fp-skel-thumb {
                width: 100%;
                aspect-ratio: 4/3;
                background: #eef0f2;
                flex-shrink: 0;
            }
            .fp-skel-info {
                padding: 9px 9px 10px;
                display: flex;
                flex-direction: column;
                gap: 7px;
                flex: 1;
            }
            .fp-skel-line { border-radius: 5px; background: #eef0f2; }
            .fp-skel-title { height: 12px; width: 82%; }
            .fp-skel-desc  { height: 10px; width: 58%; }
            .fp-skel-price-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                margin-top: 2px;
            }
            .fp-skel-price { height: 14px; width: 40px; }
            .fp-skel-btn {
                flex: 0 0 auto;
                width: 72px;
                height: 32px;
                border-radius: 999px;
                background: #eef0f2;
            }
            .fp-skel-stats { margin-top: auto; padding-top: 3px; }
            .fp-skel-pill { height: 10px; width: 46px; border-radius: 5px; background: #eef0f2; }
            /* Single compositor-only sweep across the whole card — transform
               only. Shares todShimmerSweep (defined once, above) rather than
               declaring a second identical keyframes block. */
            .fp-skel-card::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
                transform: translateX(-100%);
                animation: todShimmerSweep 1.4s ease-in-out infinite;
                will-change: transform;
                pointer-events: none;
            }

            @media (prefers-reduced-motion: reduce) {
                .fp-cats, .fp-rail { scroll-behavior: auto; }
                .fp-card, .fp-card:active, .fp-media img { transition: none; transform: none; }
                .fp-img-shimmer::after,
                .fp-skel-card::after { animation: none !important; display: none; }
            }


/* 3. TIME OF DAY — #tod-section: hero themes, product rail, cards,
   skeletons, cart controls. */

            /* ── Time-of-Day Section ─────────────────────────────────── */
            .tod-section { margin: 10px 0 4px; overflow: hidden; }
            .tod-inner {
                border-radius: 20px;
                overflow: hidden;
                margin: 0 10px;
                box-shadow: 0 4px 32px rgba(249,125,9,0.10), 0 1px 4px rgba(0,0,0,0.05);
                background: #fff;
            }
            /* ── Hero strip — compact enterprise design ─────────────── */
            .tod-hero {
                display: flex;
                align-items: flex-start;
                padding: 12px 18px 10px;
                background: linear-gradient(135deg, #fffbf5 0%, #fff3e0 55%, #ffeacc 100%);
                border-bottom: 1px solid rgba(249,125,9,0.10);
                position: relative;
                overflow: hidden;
                min-height: 76px;
                transition: background 0.9s cubic-bezier(0.4,0,0.2,1);
            }
            .tod-hero::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse 70% 130% at 92% 50%, rgba(255,200,50,0.13) 0%, transparent 65%);
                pointer-events: none;
                transition: background 0.9s ease;
            }
            .tod-hero::after { display: none; }

            /* ── Background decoration layer ──────────────────────────── */
            .tod-bg-layer {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0;
            }

            /* ── Sun ──────────────────────────────────────────────────── */
            .tod-sun-wrap {
                position: absolute;
                right: 78px; top: 50%;
                transform: translateY(-50%);
                width: 54px; height: 54px;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.8s ease;
                will-change: opacity;
            }
            .tod-sun-rays {
                position: absolute;
                width: 54px; height: 54px;
                border-radius: 50%;
                background: conic-gradient(
                    transparent 0deg, rgba(255,210,70,0.55) 11deg,
                    transparent 22deg, transparent 45deg,
                    rgba(255,210,70,0.45) 56deg, transparent 67deg,
                    transparent 90deg, rgba(255,210,70,0.55) 101deg,
                    transparent 112deg, transparent 135deg,
                    rgba(255,210,70,0.45) 146deg, transparent 157deg,
                    transparent 180deg, rgba(255,210,70,0.55) 191deg,
                    transparent 202deg, transparent 225deg,
                    rgba(255,210,70,0.45) 236deg, transparent 247deg,
                    transparent 270deg, rgba(255,210,70,0.55) 281deg,
                    transparent 292deg, transparent 315deg,
                    rgba(255,210,70,0.45) 326deg, transparent 337deg,
                    transparent 360deg
                );
                transform: scale(2.6);
                filter: blur(3px);
                animation: tod-sun-spin 28s linear infinite;
                will-change: transform;
            }
            .tod-sun-core {
                position: absolute;
                width: 30px; height: 30px;
                border-radius: 50%;
                background: radial-gradient(circle at 38% 35%,
                    #fffde7 0%, #ffe57f 22%, #ffc107 50%, #ff8f00 75%, #e65100 100%);
                box-shadow:
                    0 0 0 4px rgba(255,193,7,0.22),
                    0 0 10px rgba(255,143,0,0.65),
                    0 0 22px rgba(255,167,38,0.38),
                    0 0 42px rgba(255,200,50,0.18);
                animation: tod-sun-pulse 4s ease-in-out infinite;
                will-change: box-shadow;
                z-index: 1;
            }

            /* ── Moon ─────────────────────────────────────────────────── */
            .tod-moon-wrap {
                position: absolute;
                right: 78px; top: 50%;
                transform: translateY(-50%);
                width: 54px; height: 54px;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.8s ease;
                will-change: opacity;
            }
            .tod-moon-disc {
                width: 30px; height: 30px;
                border-radius: 50%;
                background: radial-gradient(circle at 38% 35%,
                    #fffff0 0%, #fff9c4 28%, #ffd54f 58%, #f9a825 82%, #f57f17 100%);
                box-shadow:
                    inset -8px 2px 0 1px rgba(10,22,55,0.58),
                    0 0 0 3px rgba(255,235,100,0.16),
                    0 0 10px rgba(255,220,80,0.48),
                    0 0 24px rgba(200,180,60,0.28),
                    0 0 48px rgba(180,160,50,0.14);
                animation: tod-moon-glow 5s ease-in-out infinite;
                will-change: box-shadow;
                position: relative;
            }
            .tod-moon-disc::before {
                content: '';
                position: absolute;
                width: 5px; height: 5px;
                border-radius: 50%;
                background: rgba(180,150,30,0.38);
                top: 6px; left: 6px;
                box-shadow: 7px 11px 0 1px rgba(180,150,30,0.28), 3px 17px 0 0.5px rgba(180,150,30,0.22);
            }

            /* ── Stars ────────────────────────────────────────────────── */
            .tod-stars-wrap {
                position: absolute;
                inset: 0;
                opacity: 0;
                transition: opacity 0.8s ease;
            }
            .tod-stars-wrap .s {
                position: absolute;
                left: var(--left);
                top: var(--top);
                width: var(--size, 2.5px);
                height: var(--size, 2.5px);
                border-radius: 50%;
                background: rgba(255,255,255,0.92);
                box-shadow: 0 0 3px rgba(255,255,255,0.6);
                animation: tod-star-twinkle var(--dur, 2s) ease-in-out infinite alternate;
                will-change: opacity, transform;
            }

            /* ── Day light haze ───────────────────────────────────────── */
            .tod-day-haze {
                position: absolute;
                inset: 0;
                opacity: 0;
                transition: opacity 0.8s ease;
            }
            .tod-day-haze .p {
                position: absolute;
                left: var(--px);
                top: var(--py);
                width: 5px; height: 5px;
                border-radius: 50%;
                background: rgba(255,200,50,0.32);
                filter: blur(1.5px);
                animation: tod-haze-float var(--pd, 3s) ease-in-out infinite alternate;
                will-change: transform, opacity;
            }

            /* ── Content sits above bg layer ─────────────────────────── */
            /* max-width caps the text column at a comfortable reading width
               now that it owns the hero's full row (the view-all CTA that
               used to bound it on the right is gone). */
            .tod-hero-left { flex: 1; min-width: 0; max-width: 560px; position: relative; z-index: 1; }
            .tod-greeting {
                font-size: 0.68rem;
                font-weight: 700;
                letter-spacing: 0.09em;
                text-transform: uppercase;
                color: #fa8803;
                margin-bottom: 2px;
                display: flex;
                align-items: center;
                gap: 5px;
                transition: color 0.6s ease;
                opacity: 0;
                animation: tod-text-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
            }
            /* "Live" status dot — a soft pulsing ring expands and fades behind
               the solid dot on loop, the same kind of ambient life the
               sun/moon/star layer already gives the rest of the hero. */
            .tod-greeting-dot {
                position: relative;
                width: 5px; height: 5px;
                border-radius: 50%;
                background: #fa8803;
                display: inline-block;
                transition: background 0.6s ease;
            }
            .tod-greeting-dot::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: #fa8803;
                animation: tod-dot-ping 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                will-change: transform, opacity;
            }
            .tod-headline {
                font-size: 1.12rem;
                font-weight: 800;
                color: #1a1a2e;
                line-height: 1.25;
                letter-spacing: -0.01em;
                margin: 0 0 3px;
                /* Graceful 2-line wrap instead of a hard single-line ellipsis
                   — the extra width freed up by removing the view-all CTA
                   means a longer headline no longer needs to be cut short. */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                overflow: hidden;
                transition: color 0.6s ease;
                opacity: 0;
                animation: tod-text-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
            }
            .tod-subline {
                font-size: 0.75rem;
                color: #888;
                font-weight: 500;
                transition: color 0.6s ease;
                opacity: 0;
                animation: tod-text-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.19s forwards;
            }

            /* ── Animation keyframes ──────────────────────────────────── */
            @keyframes tod-text-rise {
                from { opacity: 0; transform: translateY(6px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            @keyframes tod-dot-ping {
                0%   { transform: scale(1);   opacity: 0.65; }
                75%, 100% { transform: scale(2.8); opacity: 0; }
            }
            @keyframes tod-sun-spin {
                to { transform: scale(2.6) rotate(360deg); }
            }
            @keyframes tod-sun-pulse {
                0%, 100% {
                    box-shadow: 0 0 0 4px rgba(255,193,7,0.22), 0 0 10px rgba(255,143,0,0.65),
                        0 0 22px rgba(255,167,38,0.38), 0 0 42px rgba(255,200,50,0.18);
                }
                50% {
                    box-shadow: 0 0 0 6px rgba(255,193,7,0.28), 0 0 16px rgba(255,143,0,0.8),
                        0 0 34px rgba(255,167,38,0.5), 0 0 60px rgba(255,200,50,0.26);
                }
            }
            @keyframes tod-moon-glow {
                0%, 100% {
                    box-shadow: inset -8px 2px 0 1px rgba(10,22,55,0.58),
                        0 0 0 3px rgba(255,235,100,0.16), 0 0 10px rgba(255,220,80,0.48),
                        0 0 24px rgba(200,180,60,0.28), 0 0 48px rgba(180,160,50,0.14);
                }
                50% {
                    box-shadow: inset -8px 2px 0 1px rgba(10,22,55,0.58),
                        0 0 0 4px rgba(255,235,100,0.22), 0 0 16px rgba(255,220,80,0.65),
                        0 0 36px rgba(200,180,60,0.42), 0 0 65px rgba(180,160,50,0.22);
                }
            }
            @keyframes tod-star-twinkle {
                0%   { opacity: 0.25; transform: scale(0.8); }
                100% { opacity: 1;    transform: scale(1.2); }
            }
            @keyframes tod-haze-float {
                0%   { transform: translateY(0) scale(1);    opacity: 0.32; }
                100% { transform: translateY(-6px) scale(1.3); opacity: 0.55; }
            }

            /* ── reduced-motion: disable animations ──────────────────── */
            @media (prefers-reduced-motion: reduce) {
                .tod-sun-rays, .tod-sun-core, .tod-moon-disc,
                .tod-stars-wrap .s, .tod-day-haze .p,
                .tod-greeting-dot::before {
                    animation: none !important;
                }
                /* These three start at opacity:0 as their static base (the
                   rise-in animation is what brings them to opacity:1 via
                   forwards fill). */
                .tod-greeting, .tod-headline, .tod-subline {
                    animation: none !important;
                    opacity: 1 !important;
                    transform: none !important;
                }
                /* Skeleton/shimmer sweeps: keep the static placeholder bones
                   (still clearly communicate a loading state) but drop the
                   moving highlight for users who asked for reduced motion. */
                .tod-skel-card::after,
                .tod-section .tod-card .tod-img-shimmer::after {
                    animation: none !important;
                    display: none;
                }
            }
            /* ── Product scroll area ─────────────────────────────────── */
            .tod-products { padding: 14px 10px 14px; background: #d5e8ff47; min-height: 200px; }
            .tod-hscroll {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
                -ms-overflow-style: none;
                gap: 10px;
                padding-bottom: 4px;
                align-items: stretch;
                -webkit-overflow-scrolling: touch;
            }
            .tod-hscroll::-webkit-scrollbar { display: none; }
            .tod-hscroll .tod-card-wrap {
                flex-shrink: 0;
                width: 148px;
                scroll-snap-align: start;
                display: flex;
                contain: layout style;
            }
            @media (min-width: 576px) { .tod-hscroll .tod-card-wrap { width: 162px; } }
            @media (min-width: 768px) {
                .tod-hscroll .tod-card-wrap { width: 178px; }
                .tod-inner { margin: 0 16px; }
            }
            @media (min-width: 992px) {
                .tod-hscroll { flex-wrap: wrap; overflow-x: visible; }
                .tod-hscroll .tod-card-wrap { width: calc(16.666% - 9px); }
            }

            /* ── fp-card clone: .tod-card ────────────────────────────── */
            /* Surface reads from the shared --pcd-* gloss tokens defined in
               css/main_style.css alongside .product-card-design. */
            .tod-section .tod-card {
                border-radius: var(--pcd-radius, 14px);
                overflow: hidden;
                background: var(--pcd-surface, linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #fcfdfe 74%, #f5f8fb 100%));
                box-shadow: var(--pcd-shadow, 0 1px 2px rgba(15,23,42,0.05), 0 6px 14px -8px rgba(15,23,42,0.10));
                border: 1px solid var(--pcd-hairline, rgba(15,23,42,0.07));
                display: flex;
                flex-direction: column;
                width: 100%;
                cursor: pointer;
                transition: transform .2s, box-shadow .2s;
                /* Card-local layout/paint: flipping one card's Add → quantity
                   control cannot invalidate the rest of the rail. */
                contain: layout paint;
            }
            .tod-section .tod-card:active { transform: scale(.97); }
            @media (hover: hover) and (pointer: fine) {
                .tod-section .tod-card:hover {
                    box-shadow: var(--pcd-shadow-hover, 0 2px 4px rgba(15,23,42,0.06), 0 14px 24px -12px rgba(15,23,42,0.16));
                    border-color: var(--pcd-hairline-hover, rgba(15,23,42,0.13));
                }
            }
            /* Thumbnail — same 4/3 aspect as fp-card */
            .tod-section .tod-card .tod-thumb {
                position: relative;
                width: 100%;
                aspect-ratio: 4/3;
                background: #f4f4f4;
                overflow: hidden;
                flex-shrink: 0;
            }
            .tod-section .tod-card .tod-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                position: relative;
                z-index: 1;
                opacity: 0;
                transition: transform .35s, opacity .35s ease;
                will-change: opacity;
            }
            .tod-section .tod-card .tod-thumb img.is-loaded {
                opacity: 1;
                /* The fade is a one-shot on load; keeping will-change:opacity
                   afterwards would pin a compositor layer per card for the
                   lifetime of the rail. Release it once the image is in. */
                will-change: auto;
            }
            /* Pointer devices only — on touch, :hover latches after a tap and
               leaves the thumbnail stuck at 1.05 until the next tap elsewhere. */
            @media (hover: hover) and (pointer: fine) {
                .tod-section .tod-card:hover .tod-thumb img { transform: scale(1.05); }
            }
            /* Shimmer placeholder — sits behind the <img> until it
               loads/fails, then fades out. Absolutely positioned so it
               never shifts layout. */
            .tod-section .tod-card .tod-img-shimmer {
                position: absolute;
                inset: 0;
                z-index: 0;
                overflow: hidden;
                border-radius: inherit;
                background: #eef0f2;
                transition: opacity .3s ease;
            }
            .tod-section .tod-card .tod-img-shimmer::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
                transform: translateX(-100%);
                animation: todShimmerSweep 1.3s ease-in-out infinite;
                will-change: transform;
            }
            .tod-section .tod-card .tod-img-shimmer.is-hidden {
                opacity: 0;
                pointer-events: none;
            }
            @keyframes todShimmerSweep {
                100% { transform: translateX(100%); }
            }
            /* Top-left badge (discount / label) — mirrors spice-badge
               position. */
            .tod-section .tod-card .tod-top-badge {
                position: absolute;
                z-index: 3;
                top: 7px;
                left: 7px;
                background: rgba(255,255,255,.96);
                font-size: 9px;
                font-weight: 800;
                border-radius: 99px;
                padding: 3px 7px;
                display: inline-flex;
                align-items: center;
                gap: 3px;
                box-shadow: 0 2px 6px rgba(0,0,0,.12);
                letter-spacing: .2px;
                white-space: nowrap;
            }
            .tod-section .tod-card .tod-top-badge.is-discount { color: #B91C1C; }
            .tod-section .tod-card .tod-top-badge.is-label    { color: #0D1B2A; }
            /* Out-of-stock overlay */
            .tod-section .tod-card .tod-oos-overlay {
                position: absolute;
                z-index: 4;
                inset: 0;
                background: rgba(0,0,0,.45);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 9.5px;
                font-weight: 800;
                color: #fff;
                letter-spacing: .4px;
            }
            /* Bottom badge row inside thumb — mirrors fp-badge-row */
            .tod-section .tod-card .tod-badge-row {
                position: absolute;
                z-index: 2;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                /* Covers the whole thumb — must never swallow the card tap. */
                pointer-events: none;
            }
            .tod-section .tod-card .tod-brand-pill,
            .tod-section .tod-card .tod-orders-pill {
                /* Solid ink instead of rgba(0,0,0,.52) + backdrop-filter:
                   blur(6px). */
                background: rgba(15,23,42,.58);
                color: #fff;
                font-size: 10.5px;
                font-weight: 700;
                border-radius: 99px;
                padding: 3px 10px;
                box-shadow: 0 1px 3px rgba(15,23,42,.28);
                display: inline-flex;
                align-items: center;
                gap: 3px;
                white-space: nowrap;
                max-width: 110px;
                overflow: hidden;
                text-overflow: ellipsis;
                letter-spacing: .2px;
            }
            /* Info pane — exact fp-card .info */
            .tod-section .tod-card .tod-info {
                padding: 9px 9px 10px;
                display: flex;
                flex-direction: column;
                gap: 5px;
                flex: 1;
            }
            .tod-section .tod-card .tod-title {
                font-size: 12px;
                font-weight: 700;
                color: #0D1B2A;
                line-height: 1.35;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-height: 1.35em;
            }
            .tod-section .tod-card .tod-desc {
                font-size: 10.5px;
                line-height: 1.3;
                color: #8E9BAD;
                font-weight: 500;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-height: 1.3em;
            }
            /* Price row */
            .tod-section .tod-card .tod-price-row {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 6px;
                margin-top: 1px;
            }
            .tod-section .tod-card .tod-price-block { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; align-self: flex-start; }
            .tod-section .tod-card .tod-price-old {
                font-size: 9.5px;
                color: #1a1a1a;
                font-weight: 500;
                text-decoration: line-through;
                line-height: 1.2;
            }
            .tod-section .tod-card .tod-price {
                font-size: 13px;
                font-weight: 800;
                color: #e07702;
                letter-spacing: -.2px;
                white-space: nowrap;
                line-height: 1.2;
                margin-top: auto;
            }
            /* ── Cart control fp-add-btn / fp-stepper visual treatment over
               the global slide-toggle architecture (.btn-cart-wrapper →
               .btn-add-initial / .qty-control-group with .active clas. */
            .tod-section .tod-price-row .btn-cart-wrapper {
                flex: 0 0 auto;
                width: 72px;
                min-width: 72px;
                height: 32px;
                margin-top: 0;
                margin-left: auto;
                border-radius: 999px;
                box-shadow: 0 4px 12px rgba(249,125,9,.30);
                align-self: center;
            }
            /* Add button — white fill with orange border */
            .tod-section .btn-add-initial {
                appearance: none;
                -webkit-appearance: none;
                border: 2px solid #fa8803 !important;
                border-radius: 999px !important;
                background: #fff !important;
                color: #fa8803 !important;
                font-size: 11px !important;
                font-weight: 800 !important;
                letter-spacing: .2px;
                gap: 4px;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                white-space: nowrap;
                transition: box-shadow .18s ease, filter .12s ease;
            }
            .tod-section .btn-add-initial i { font-size: 13px !important; margin-right: 1px; font-weight: 800;}
            .tod-section .btn-add-initial:hover {
                filter: brightness(1.05);
                box-shadow: 0 8px 20px rgba(249,125,9,.42), 0 2px 6px rgba(0,0,0,.08);
            }
            .tod-section .btn-add-initial:active { filter: brightness(.94); }
            .tod-section .btn-add-initial:focus-visible { outline: 2.5px solid #B85800; outline-offset: 2px; }
            .tod-section .btn-add-initial:disabled,
            .tod-section .btn-add-initial[disabled] {
                background: #dcdcdc !important;
                border-color: #dcdcdc !important;
                color: #9a9a9a !important;
                box-shadow: none !important;
                cursor: not-allowed;
                filter: none;
            }
            /* Quantity stepper — anchored on #fa8803 */
            .tod-section .qty-control-group {
                display: flex !important;
                align-items: stretch !important;
                background: linear-gradient(135deg, #ffb347 0%, #fa8803 60%, #e07600 100%) !important;
                border-radius: 999px !important;
                box-shadow: 0 4px 12px rgba(250,136,3,.32) !important;
                overflow: hidden !important;
                padding: 0 !important;
                transition: box-shadow .18s ease, filter .12s ease;
            }
            .tod-section .qty-control-group:hover {
                filter: brightness(1.05);
                box-shadow: 0 8px 20px rgba(249,125,9,.42), 0 2px 6px rgba(0,0,0,.08) !important;
            }
            .tod-section .qty-control-group:active { filter: brightness(.94); }
            .tod-section .qty-control-group:focus-within { outline: 2.5px solid #B85800; outline-offset: 2px; }
            .tod-section .qty-control-group .qty-btn {
                background: transparent !important;
                border: 0 !important;
                color: #fff !important;
                padding: 0 8px !important;
                font-size: 14px !important;
                line-height: 1;
                cursor: pointer;
                min-width: 24px;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                transition: background .12s, filter .1s;
            }
            .tod-section .qty-control-group .qty-btn:hover { background: rgba(255,255,255,.16) !important; }
            .tod-section .qty-control-group .qty-btn:active { filter: brightness(.88); }
            .tod-section .qty-control-group .qty-input {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 20px !important;
                width: 20px !important;
                padding: 0 !important;
                font-size: 12px !important;
                font-weight: 800 !important;
                color: #fff !important;
                background: transparent !important;
                border: 0 !important;
                text-align: center !important;
                outline: none !important;
                pointer-events: none;
                user-select: none;
            }
            .tod-section .qty-control-group .qty-input.bump { animation: todQtyBump .22s ease; }
            @keyframes todQtyBump {
                0%   { transform: scale(1); }
                40%  { transform: scale(1.25); }
                100% { transform: scale(1); }
            }
            /* Variant "Options" button — white/outlined default;
               neutralises the legacy imperative colour CartManager paints inline. */
            .tod-section .btn-options-dynamic.btn-add-initial {
                background: #fff !important;
                border: 2px solid #fa8803 !important;
                color: #fa8803 !important;
                font-weight: 800 !important;
            }
            .tod-section .btn-options-dynamic.btn-add-initial i { font-weight: 800 !important; }
            /* In-cart: solid #fa8803 fill — mirrors the qty-stepper colour for simple products */
            .tod-section .btn-options-dynamic.btn-add-initial.is-in-cart {
                background: #fa8803 !important;
                border: none !important;
                color: #fff !important;
            }
            /* Stats row */
            .tod-section .tod-card .tod-stats {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: auto;
                padding-top: 3px;
            }
            .tod-section .tod-card .tod-rating {
                display: inline-flex;
                align-items: center;
                gap: 3px;
                font-size: 10px;
                font-weight: 700;
                color: #0D1B2A;
            }
            .tod-section .tod-card .tod-rating i { color: #F59E0B; font-size: 10px; }
            .tod-section .tod-card .tod-orders {
                font-size: 10px;
                color: #8E9BAD;
                display: inline-flex;
                align-items: center;
                gap: 2px;
            }
            /* ── Structured skeleton card Mirrors .tod-card's real
               composition (thumb → title → desc → price/button → rating)
               bone-for-bone. */
            .tod-skel-card {
                position: relative;
                flex-shrink: 0;
                width: 148px;
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                overflow: hidden;
                background: #fff;
                border: 1px solid #EFF2F6;
                scroll-snap-align: start;
                contain: layout style;
            }
            @media (min-width: 576px) { .tod-skel-card { width: 162px; } }
            @media (min-width: 768px) { .tod-skel-card { width: 178px; } }
            @media (min-width: 992px) { .tod-skel-card { width: calc(16.666% - 9px); } }
            .tod-skel-thumb {
                width: 100%;
                aspect-ratio: 4/3;
                background: #eef0f2;
                flex-shrink: 0;
            }
            .tod-skel-info {
                padding: 9px 9px 10px;
                display: flex;
                flex-direction: column;
                gap: 7px;
                flex: 1;
            }
            .tod-skel-line { border-radius: 5px; background: #eef0f2; }
            .tod-skel-title { height: 12px; width: 82%; }
            .tod-skel-desc  { height: 10px; width: 58%; }
            .tod-skel-price-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                margin-top: 2px;
            }
            .tod-skel-price { height: 14px; width: 40px; }
            .tod-skel-btn {
                flex: 0 0 auto;
                width: 72px;
                height: 32px;
                border-radius: 999px;
                background: #eef0f2;
            }
            .tod-skel-stats { margin-top: auto; padding-top: 3px; }
            .tod-skel-pill { height: 10px; width: 46px; border-radius: 5px; background: #eef0f2; }
            /* Single compositor-only sweep across the whole card — transform
               only (no background-position/box-shadow repaint per frame). */
            .tod-skel-card::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
                transform: translateX(-100%);
                animation: todShimmerSweep 1.4s ease-in-out infinite;
                will-change: transform;
                pointer-events: none;
            }
            /* IntersectionObserver target — sits at the end of the rail;
               invisible, never affects layout/scroll-snap. */
            .tod-sentinel {
                flex-shrink: 0;
                width: 1px;
                height: 1px;
            }
            /* End-of-list / error-retry card — same footprint as a product
               card so it slots into the horizontal rail without a jump. */
            .tod-rail-status {
                flex-shrink: 0;
                width: 148px;
                min-height: 230px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 8px;
                padding: 14px 10px;
                border-radius: 12px;
                background: #fff;
                border: 1px dashed #e3e6ea;
                color: #8E9BAD;
                font-size: 11px;
                font-weight: 600;
                scroll-snap-align: start;
            }
            @media (min-width: 576px) { .tod-rail-status { width: 162px; } }
            .tod-rail-status i { font-size: 1.4rem; opacity: .55; }
            .tod-rail-status .tod-retry-btn {
                margin-top: 4px;
                padding: 6px 14px;
                border-radius: 999px;
                border: 2px solid #fa8803;
                background: #fff;
                color: #fa8803;
                font-size: 11px;
                font-weight: 800;
                cursor: pointer;
            }
            .tod-rail-status .tod-retry-btn:active { filter: brightness(.94); }
            /* Empty state */
            .tod-empty {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 28px 20px;
                color: #bbb;
                font-size: 0.8rem;
                gap: 8px;
            }
            .tod-empty-icon { font-size: 2rem; opacity: 0.4; }
            /* ── Morning theme ────────────────────────────────────────── */
            .tod-section[data-theme="morning"] .tod-hero {
                background: linear-gradient(135deg, #fffbf5 0%, #fff3e0 55%, #ffeacc 100%);
            }
            .tod-section[data-theme="morning"] .tod-hero::before {
                background: radial-gradient(ellipse 70% 130% at 92% 50%, rgba(255,200,50,0.13) 0%, transparent 65%);
            }
            .tod-section[data-theme="morning"] .tod-sun-wrap { opacity: 1; }
            .tod-section[data-theme="morning"] .tod-day-haze { opacity: 1; }

            /* ── Afternoon theme ──────────────────────────────────────── */
            .tod-section[data-theme="afternoon"] .tod-hero {
                background: linear-gradient(135deg, #fffef5 0%, #fffce0 55%, #fff3c8 100%);
            }
            .tod-section[data-theme="afternoon"] .tod-hero::before {
                background: radial-gradient(ellipse 70% 130% at 92% 50%, rgba(255,220,30,0.16) 0%, transparent 65%);
            }
            .tod-section[data-theme="afternoon"] .tod-sun-wrap { opacity: 1; }
            .tod-section[data-theme="afternoon"] .tod-sun-core {
                background: radial-gradient(circle at 38% 35%,
                    #ffffff 0%, #fff9c4 18%, #ffee58 42%, #fdd835 65%, #f9a825 100%);
                box-shadow:
                    0 0 0 5px rgba(255,230,0,0.28),
                    0 0 14px rgba(255,200,0,0.75),
                    0 0 30px rgba(255,220,50,0.45),
                    0 0 55px rgba(255,230,80,0.22);
            }
            .tod-section[data-theme="afternoon"] .tod-day-haze { opacity: 1; }

            /* ── Evening theme ────────────────────────────────────────── */
            .tod-section[data-theme="evening"] .tod-hero {
                background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 40%, #ffccb0 70%, #ffc4a0 100%);
            }
            .tod-section[data-theme="evening"] .tod-hero::before {
                background: radial-gradient(ellipse 70% 130% at 92% 50%, rgba(230,100,30,0.18) 0%, transparent 65%);
            }
            .tod-section[data-theme="evening"] .tod-sun-wrap { opacity: 0.9; }
            .tod-section[data-theme="evening"] .tod-sun-core {
                background: radial-gradient(circle at 38% 35%,
                    #ffe0b2 0%, #ff9800 30%, #e64a19 62%, #bf360c 100%);
                box-shadow:
                    0 0 0 4px rgba(230,74,25,0.22),
                    0 0 12px rgba(230,74,25,0.72),
                    0 0 28px rgba(255,100,0,0.42),
                    0 0 50px rgba(255,120,30,0.2);
            }
            .tod-section[data-theme="evening"] .tod-sun-rays {
                background: conic-gradient(
                    transparent 0deg, rgba(255,120,40,0.55) 11deg,
                    transparent 22deg, transparent 45deg,
                    rgba(255,120,40,0.45) 56deg, transparent 67deg,
                    transparent 90deg, rgba(255,120,40,0.55) 101deg,
                    transparent 112deg, transparent 135deg,
                    rgba(255,120,40,0.45) 146deg, transparent 157deg,
                    transparent 180deg, rgba(255,120,40,0.55) 191deg,
                    transparent 202deg, transparent 225deg,
                    rgba(255,120,40,0.45) 236deg, transparent 247deg,
                    transparent 270deg, rgba(255,120,40,0.55) 281deg,
                    transparent 292deg, transparent 315deg,
                    rgba(255,120,40,0.45) 326deg, transparent 337deg,
                    transparent 360deg
                );
            }

            /* ── Night theme ──────────────────────────────────────────── */
            .tod-section[data-theme="night"] .tod-hero {
                background: linear-gradient(135deg, #0d1b35 0%, #132238 45%, #192d48 75%, #1e3355 100%);
                border-bottom-color: rgba(100,130,200,0.12);
            }
            .tod-section[data-theme="night"] .tod-hero::before {
                background: radial-gradient(ellipse 70% 130% at 92% 50%, rgba(100,130,220,0.15) 0%, transparent 65%);
            }
            .tod-section[data-theme="night"] .tod-moon-wrap  { opacity: 1; }
            .tod-section[data-theme="night"] .tod-stars-wrap { opacity: 1; }
            .tod-section[data-theme="night"] .tod-greeting   { color: #7986cb; }
            .tod-section[data-theme="night"] .tod-greeting-dot { background: #7986cb; }
            .tod-section[data-theme="night"] .tod-headline   { color: #e8eaf6; }
            /* Muted directly via color (not opacity) — .tod-subline's
               entrance animation below sets opacity with forwards fill. */
            .tod-section[data-theme="night"] .tod-subline    { color: #6774b1; }
            .tod-section[data-theme="night"] .tod-clock      { color: #e8eaf6; }
            .tod-section[data-theme="night"] .tod-ampm       { color: #7986cb; }
            .tod-section[data-theme="night"] .tod-slot-pill  {
                background: rgba(121,134,203,0.18);
                color: #7986cb;
            }


/* ===========================================================================
   4. (block 4 of the original document)
   =========================================================================== */

    /* ── Backdrop + panel ──────────────────────────────────────── */
    .rv-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.55);
        opacity: 0; visibility: hidden;
        transition: opacity .24s ease, visibility 0s linear .24s;
        z-index: 11144;
    }
    .rv-backdrop.show { opacity: 1; visibility: visible; transition: opacity .24s ease; }

    .rv-panel {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: #fff;
        border-radius: 22px 22px 0 0;
        max-height: 92vh;
        display: flex; flex-direction: column;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        z-index: 11145;
        box-shadow: 0 -14px 44px rgba(0,0,0,.18);
    }
    .rv-panel.open { transform: translateY(0); }

    @media (min-width: 600px) {
        .rv-panel {
            left: 50%; right: auto; width: 560px; max-width: 96vw;
            transform: translate(-50%, 100%);
            bottom: 4vh; border-radius: 22px; max-height: 88vh;
        }
        .rv-panel.open { transform: translate(-50%, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .rv-panel, .rv-backdrop { transition: none; }
        .rv-bar-fill { transition: none; }
    }

    /* ── Header ────────────────────────────────────────────────── */
    .rv-handle { width: 40px; height: 4px; background: #dde3ed; border-radius: 99px; margin: 10px auto 0; flex-shrink: 0; }
    .rv-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 14px;
        border-bottom: 3px solid;
        border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
        flex-shrink: 0;
    }
    .rv-header-title { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 8px; }
    .rv-header-count { font-size: 12px; font-weight: 500; color: #94a3b8; }
    .rv-close {
        width: 34px; height: 34px; border-radius: 50%;
        background: #f4f6f9; border: 0;
        display: inline-flex; align-items: center; justify-content: center;
        color: #334155; font-size: 15px; cursor: pointer;
        transition: background .15s, transform .12s; flex-shrink: 0;
    }
    .rv-close:hover { background: #e8ecf2; }
    .rv-close:active { transform: scale(.9); }
    .rv-close:focus-visible { outline: 2px solid #00A859; outline-offset: 2px; }

    /* ── Scrollable body ───────────────────────────────────────── */
    .rv-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .rv-body::-webkit-scrollbar { width: 4px; }
    .rv-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

    /* ── Rating summary ────────────────────────────────────────── */
    .rv-summary {
        display: flex; align-items: center; gap: 20px;
        padding: 18px 18px 16px;
        border-bottom: 1px solid #f1f5f9;
    }
    .rv-big-score { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 76px; }
    .rv-score-num { font-size: 44px; font-weight: 800; color: #0f172a; line-height: 1; letter-spacing: -2px; }
    .rv-score-stars { display: flex; gap: 2px; margin: 4px 0 3px; }
    .rv-score-stars i { color: #f59e0b; font-size: 12px; }
    .rv-score-stars i.rv-star-empty { color: #d1d5db; }
    .rv-score-count { font-size: 11px; color: #94a3b8; font-weight: 500; white-space: nowrap; text-align: center; }
    .rv-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .rv-bar-row { display: flex; align-items: center; gap: 8px; }
    .rv-bar-label { font-size: 11px; font-weight: 600; color: #64748b; flex-shrink: 0; width: 10px; text-align: right; }
    .rv-bar-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
    .rv-bar-fill {
        height: 100%; border-radius: 99px;
        background: linear-gradient(90deg, #f59e0b, #f97316);
        width: 0; transition: width .55s cubic-bezier(.32,.72,0,1);
    }
    .rv-bar-pct { font-size: 11px; font-weight: 600; color: #94a3b8; flex-shrink: 0; min-width: 30px; text-align: right; }

    /* ── Submit form ───────────────────────────────────────────── */
    .rv-form { padding: 16px 18px; border-bottom: 1px solid #f1f5f9; background: #fafbfd; }
    .rv-form-heading { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .7px; margin: 0 0 12px; }
    .rv-stars-selector { display: flex; gap: 4px; margin-bottom: 12px; }
    .rv-star-sel {
        background: none; border: 0; padding: 2px 1px;
        cursor: pointer; font-size: 26px; color: #d1d5db;
        transition: color .1s, transform .1s;
        -webkit-tap-highlight-color: transparent; line-height: 1;
    }
    .rv-star-sel.lit { color: #f59e0b; }
    .rv-star-sel:active { transform: scale(1.18); }
    .rv-star-sel:focus-visible { outline: 2px solid #00A859; border-radius: 4px; }
    .rv-field {
        display: block; width: 100%; box-sizing: border-box;
        border: 1.5px solid #e2e8f0; border-radius: 10px;
        padding: 10px 12px; font-size: 13.5px; font-family: inherit;
        color: #0f172a; background: #fff; outline: none;
        transition: border-color .15s; margin-bottom: 8px;
        -webkit-appearance: none;
        appearance: none;
    }
    .rv-field:focus { border-color: #00A859; }
    .rv-textarea.rv-field { min-height: 80px; resize: vertical; }
    .rv-char-row { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
    .rv-char-count { font-size: 11px; color: #94a3b8; font-weight: 500; }
    .rv-submit {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; padding: 13px 18px;
        background: linear-gradient(135deg, #00A859, #007A41);
        color: #fff; border: 0; border-radius: 12px;
        font-size: 13.5px; font-weight: 700; cursor: pointer;
        box-shadow: 0 6px 18px rgba(0,168,89,.28);
        transition: filter .12s, transform .12s, box-shadow .15s;
    }
    .rv-submit:hover { filter: brightness(1.07); box-shadow: 0 8px 24px rgba(0,168,89,.38); }
    .rv-submit:active { transform: scale(.98); }
    .rv-submit:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; transform: none; filter: none; }

    /* ── Reviews list ──────────────────────────────────────────── */
    .rv-list { padding: 0 18px 20px; }
    .rv-list-heading { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .7px; padding: 16px 0 10px; margin: 0; }
    .rv-card {
        background: #fff; border: 1px solid #f1f5f9;
        border-radius: 14px; padding: 14px; margin-bottom: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
        animation: rvFadeIn .28s ease both;
    }
    .rv-card.rv-mine { border-color: rgba(0,168,89,.22); background: #f0faf5; }
    .rv-card:last-child { margin-bottom: 0; }
    @keyframes rvFadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
    .rv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .rv-card-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .rv-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        background: linear-gradient(135deg, #00A859, #007A41);
        color: #fff; font-size: 15px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .rv-avatar.rv-mine-av { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
    .rv-who-name { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rv-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: #00A859; }
    .rv-card-stars { display: flex; gap: 2px; flex-shrink: 0; }
    .rv-card-stars i { font-size: 12px; color: #f59e0b; }
    .rv-card-stars i.empty { color: #d1d5db; }
    .rv-review-title { font-size: 13px; font-weight: 700; color: #1e293b; margin: 0 0 5px; }
    .rv-review-body { font-size: 12.5px; color: #475569; line-height: 1.6; margin: 0 0 8px; }
    .rv-review-date { font-size: 11px; color: #94a3b8; font-weight: 500; }
    .rv-edit-link { font-size: 11.5px; color: #00A859; font-weight: 600; cursor: pointer; border: 0; background: none; padding: 0; margin-left: 10px; text-decoration: underline; }
    .rv-empty { text-align: center; padding: 32px 20px 20px; }
    .rv-empty i { font-size: 38px; color: #d1d5db; display: block; margin-bottom: 10px; }
    .rv-empty p { font-size: 13px; color: #94a3b8; margin: 0; }
    .rv-load-more {
        display: block; width: 100%; margin-top: 12px;
        background: none; border: 1.5px solid #e2e8f0;
        border-radius: 10px; padding: 10px;
        font-size: 13px; font-weight: 600; color: #475569;
        cursor: pointer; transition: background .15s;
    }
    .rv-load-more:hover { background: #f8fafc; }
    .rv-rating-pill-clickable { cursor: pointer; }
    .rv-rating-pill-clickable:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.24);
        background: linear-gradient(135deg, #fff5e0 0%, #fde8c8 100%);
    }
    .rv-rating-pill-clickable:active {
        transform: translateY(0) scale(0.97);
        box-shadow: 0 1px 3px rgba(245, 158, 11, 0.18);
    }


/* ===========================================================================
   5. (block 5 of the original document)
   =========================================================================== */

    /* ── Brand token — single source of truth ─────────────── */
    #pmSheet {
        --pm:        #fa8803;
        --pm-hover:  #e67800;
        --pm-active: #cc6a00;
        --pm-tint:   rgba(250,136,3,.08);
        --pm-border: rgba(250,136,3,.28);
        --pm-glow:   rgba(250,136,3,.32);
        --pm-focus:  rgba(250,136,3,.38);
    }

    /* ── Backdrop ──────────────────────────────────────────── */
    .pm-backdrop {
        position: fixed; inset: 0;
        background: rgba(15,23,42,.60);
        opacity: 0; visibility: hidden;
        transition: opacity .24s ease, visibility 0s linear .24s;
        z-index: 12000;
    }
    .pm-backdrop.show { opacity: 1; visibility: visible; transition: opacity .24s ease; }

    /* ── Sheet ─────────────────────────────────────────────── */
    .pm-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: #fff;
        border-radius: 22px 22px 0 0;
        max-height: 90vh;
        display: flex; flex-direction: column;
        transform: translateY(105%);
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        z-index: 12001;
        box-shadow: 0 -16px 48px rgba(15,23,42,.22);
    }
    .pm-sheet.open { transform: translateY(0); }

    @media (min-width: 560px) {
        .pm-sheet {
            left: 50%; right: auto; width: 520px; max-width: 96vw;
            transform: translate(-50%, 105%);
            bottom: 4vh; border-radius: 22px; max-height: 86vh;
        }
        .pm-sheet.open { transform: translate(-50%, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .pm-sheet, .pm-backdrop { transition: none; }
    }

    /* ── Handle — brand tint ───────────────────────────────── */
    .pm-handle {
        width: 40px; height: 4px;
        background: var(--pm-border);
        border-radius: 99px; margin: 10px auto 0; flex-shrink: 0;
    }

    /* ── Header ────────────────────────────────────────────── */
    .pm-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 14px;
        flex-shrink: 0;
    }
    .pm-title {
        font-size: 16px; font-weight: 800; color: #0f172a; margin: 0;
        letter-spacing: -.2px;
    }
    /* Accent underscore on the title */
    .pm-title::after {
        content: ''; display: block;
        width: 28px; height: 3px; margin-top: 5px;
        border-radius: 99px;
    }
    .pm-close {
        width: 34px; height: 34px; border-radius: 50%;
        background: var(--pm-tint); border: 1px solid var(--pm-border);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 15px; color: var(--pm-hover); cursor: pointer;
        transition: background .15s, transform .12s;
    }
    .pm-close:hover  { background: rgba(250,136,3,.16); }
    .pm-close:active { transform: scale(.9); }
    .pm-close:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 2px; }

    /* ── Body ──────────────────────────────────────────────── */
    .pm-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 8px; }
    .pm-body::-webkit-scrollbar { width: 4px; }
    .pm-body::-webkit-scrollbar-thumb {
        background: var(--pm-border); border-radius: 99px;
    }

    /* ── Amount payable card ───────────────────────────────── */
    .pm-amount-card {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--pm-tint); border: 1.5px solid var(--pm-border);
        border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
    }
    .pm-amount-label {
        font-size: 12.5px; font-weight: 600; color: var(--pm-hover);
    }
    .pm-amount-value {
        font-size: 20px; font-weight: 800; color: var(--pm);
        letter-spacing: -.4px;
    }

    /* ── Payment option radio card ─────────────────────────── */
    .pm-option {
        display: flex; align-items: flex-start; gap: 14px;
        padding: 14px 16px;
        border: 2px solid #f1f5f9;
        border-radius: 16px; cursor: pointer; margin-bottom: 10px;
        transition: border-color .15s, background .15s, box-shadow .15s;
        user-select: none; -webkit-tap-highlight-color: transparent;
    }
    .pm-option:last-child { margin-bottom: 0; }
    .pm-option:hover {
        border-color: var(--pm-border);
        background: var(--pm-tint);
    }
    .pm-option.selected {
        border-color: var(--pm);
        background: var(--pm-tint);
        box-shadow: 0 0 0 3px var(--pm-focus);
    }
    .pm-option:active { transform: scale(.99); }
    .pm-option:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 2px; }

    /* ── Radio dot ─────────────────────────────────────────── */
    .pm-radio-dot {
        width: 20px; height: 20px; border-radius: 50%;
        border: 2px solid #c8d3dc; background: #fff;
        flex-shrink: 0; margin-top: 2px;
        display: flex; align-items: center; justify-content: center;
        transition: border-color .15s;
    }
    .pm-radio-dot::after {
        content: ''; width: 10px; height: 10px; border-radius: 50%;
        background: var(--pm); opacity: 0;
        transform: scale(.4); transition: opacity .15s, transform .15s;
    }
    .pm-option.selected .pm-radio-dot { border-color: var(--pm); }
    .pm-option.selected .pm-radio-dot::after { opacity: 1; transform: scale(1); }

    /* ── Option content ────────────────────────────────────── */
    .pm-option-content { flex: 1; min-width: 0; }
    .pm-option-name  { font-size: 14.5px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
    .pm-option-sub   { font-size: 12px; color: #64748b; font-weight: 500; margin-bottom: 8px; }
    .pm-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .pm-badge {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 10.5px; font-weight: 700; padding: 3px 9px;
        border-radius: 99px; white-space: nowrap;
    }
    /* Badge colors kept to brand of each provider — only border picks up the theme */
    .pm-badge-phonepe { background: #f5e9ff; color: #7c3aed; }
    .pm-badge-upi     { background: rgba(250,136,3,.10); color: var(--pm-hover); border: 1px solid var(--pm-border); }
    .pm-badge-cash    { background: rgba(250,136,3,.10); color: var(--pm-active); border: 1px solid var(--pm-border); }
    .pm-badge-upi2    { background: #e0f2fe; color: #0369a1; }

    /* ── Payment provider icon stack ─────────────────────── */
    .pm-payment-badge-stack {
        display: flex;
        align-items: center;
        position: relative;
    }

    .pm-pay-badge {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2.5px solid #fff;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow:
            0 2px 8px rgba(0, 0, 0, .12),
            0 0 0 .5px rgba(0, 0, 0, .06);
        transition:
            transform .2s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow .2s ease;
        will-change: transform;
        position: relative;
    }

    /* Overlap: each subsequent badge slides under the previous */
    .pm-pay-badge + .pm-pay-badge { margin-left: -9px; }

    /* z-order: leftmost badge sits on top */
    .pm-pay-badge:nth-child(1) { z-index: 4; }
    .pm-pay-badge:nth-child(2) { z-index: 3; }
    .pm-pay-badge:nth-child(3) { z-index: 2; }
    .pm-pay-badge:nth-child(4) { z-index: 1; }

    .pm-pay-badge img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        display: block;
        image-rendering: -webkit-optimize-contrast;
    }

    /* Cascade lift on hover — staggered via per-child delay */
    .pm-payment-badge-stack:hover .pm-pay-badge {
        box-shadow:
            0 6px 16px rgba(0, 0, 0, .16),
            0 0 0 .5px rgba(0, 0, 0, .06);
    }
    .pm-payment-badge-stack:hover .pm-pay-badge:nth-child(1) { transform: translateY(-3px); transition-delay:   0ms; }
    .pm-payment-badge-stack:hover .pm-pay-badge:nth-child(2) { transform: translateY(-3px); transition-delay:  35ms; }
    .pm-payment-badge-stack:hover .pm-pay-badge:nth-child(3) { transform: translateY(-3px); transition-delay:  70ms; }
    .pm-payment-badge-stack:hover .pm-pay-badge:nth-child(4) { transform: translateY(-3px); transition-delay: 105ms; }

    /* Keep borders crisp on the selected (orange) option */
    .pm-option.selected .pm-pay-badge { border-color: rgba(255,255,255,.85); }

    /* ── Right-side icons ──────────────────────────────────── */
    .pm-secure-icon { color: var(--pm); font-size: 18px; flex-shrink: 0; margin-top: 4px; }
    .pm-cod-icon    { color: var(--pm); font-size: 18px; flex-shrink: 0; margin-top: 4px; }

    /* ── COD badge icons ────────────────────────────────────── */
    .pm-icon-cash {
        font-size: 14px;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        transition: transform .22s ease;
        will-change: transform;
    }

    .pm-badge-cash:hover .pm-icon-cash { transform: translateY(-1px); }

    .pm-icon-qr {
        font-size: 13px;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        color: #111827;
        transition: transform .22s ease;
        will-change: transform;
    }

    .pm-badge-upi2:hover .pm-icon-qr { transform: translateY(-1px); }
    .pm-option-disabled { opacity: .42; pointer-events: none; }

    /* ── COD note ──────────────────────────────────────────── */
    .pm-cod-note {
        font-size: 11px; color: #ef4444; font-weight: 600; margin-top: 4px;
    }

    /* ── Footer ────────────────────────────────────────────── */
    .pm-footer {
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(250,136,3,.14);
        flex-shrink: 0; background: #fff;
    }

    /* ── Confirm button ────────────────────────────────────── */
    .pm-confirm-btn {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 15px 22px;
        background: linear-gradient(135deg, #ffab2e 0%, var(--pm) 55%, var(--pm-hover) 100%);
        color: #fff; border: 0; border-radius: 16px;
        font-size: 15px; font-weight: 700; cursor: pointer;
        box-shadow: 0 8px 24px var(--pm-glow);
        transition: transform .12s ease, box-shadow .18s ease, filter .12s ease;
        letter-spacing: -.1px;
    }
    .pm-confirm-btn:hover {
        filter: brightness(1.07);
        box-shadow: 0 12px 32px rgba(250,136,3,.48);
        transform: translateY(-1px);
    }
    .pm-confirm-btn:active {
        transform: scale(.98);
        box-shadow: 0 4px 12px rgba(250,136,3,.30);
    }
    .pm-confirm-btn:focus-visible {
        outline: 3px solid var(--pm-focus);
        outline-offset: 3px;
    }
    .pm-confirm-btn:disabled {
        background: #cbd5e1; box-shadow: none;
        cursor: not-allowed; transform: none !important; filter: none !important;
    }
    .pm-confirm-btn .pm-confirm-arrow {
        font-size: 20px; transition: transform .22s cubic-bezier(.32,.72,0,1);
    }
    .pm-confirm-btn:hover .pm-confirm-arrow { transform: translateX(5px); }