.category-banner { padding: .75rem 0 .15rem; }
        .store-frame { width: calc(100% - 24px); max-width: 1680px; margin: 0 auto; padding: 0 8px; }
        .category-banner-card { min-height: 150px; border-radius: 24px; overflow: hidden; position: relative; background: linear-gradient(135deg, #fff0c9 0%, #ffe6a3 50%, #fff6d9 100%); box-shadow: 0 18px 42px rgba(63,125,58,.10); display: grid; grid-template-columns: 1.2fr .8fr; }
        .category-banner-copy { padding: 1.4rem 1.8rem; display: flex; flex-direction: column; justify-content: center; }
        .category-banner-copy h1 { margin: 0 0 .45rem; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.04em; color: #2c5228; }
        .category-banner-copy p { margin: 0; color: #5b5670; font-size: .95rem; max-width: 420px; }
        .category-banner-image { min-height: 150px; background: rgba(255,255,255,.34); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .category-banner-image img { width: 100%; height: 100%; object-fit: cover; }
        .category-banner-fallback { width: 140px; height: 140px; border-radius: 28px; background: rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; color: var(--store-accent); font-size: 4rem; }
        .product-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .85rem 0 .2rem; }
        .product-intro h1 { margin: 0; font-size: 1.8rem; letter-spacing: -.03em; }
        .product-intro p { margin: .25rem 0 0; color: var(--store-muted); }
        .section-block { padding: .65rem 0 1.45rem; }
        .section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
        .section-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
        .section-head p { margin: .2rem 0 0; color: var(--store-muted); font-size: .92rem; }
        .section-viewall { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--store-accent); font-weight: 800; font-size: .92rem; text-decoration: none; white-space: nowrap; }
        .section-viewall:hover { color: #285a2b; gap: .5rem; }
        .section-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; padding-bottom: .35rem; align-items: stretch; }
        .product-card { background: #fff; border: 1px solid #eee7db; border-radius: 16px; padding: .55rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: 0 1px 3px rgba(47,42,36,.05); min-height: 100%; }
        /* Grid items default to min-width:auto, so a card whose min-content width
           (a long product name, a row of variant chips) exceeds its 1fr track
           pushes the track wider and the whole grid overflows its container.
           This was only being applied below 820px, which is why the overflow
           showed up on desktop -- worst on the cart page, where the grid sits in
           a narrower wrapper and spilled over the content beside it. */
        .section-products > *, .product-card { min-width: 0; }
        .product-name { overflow-wrap: anywhere; }
        /* ---------- Compact add control (overlaid on the image) ---------- */
        .card-media-wrap { position: relative; }
        .card-add { position: absolute; right: 6px; bottom: 6px; z-index: 6; }
        .card-add form { margin: 0; }
        .card-add-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 72px; height: 34px; border-radius: 10px;
            border: 1.5px solid var(--store-accent); background: #fff;
            color: var(--store-accent); font-weight: 900; font-size: .8rem;
            letter-spacing: .06em; cursor: pointer; font-family: inherit;
            box-shadow: 0 2px 6px rgba(47,42,36,.12);
            transition: background .15s ease, color .15s ease;
        }
        .card-add-btn:hover:not(:disabled) { background: var(--store-accent); color: #fff; }
        .card-add-btn:disabled { border-color: #c9c2b5; color: #a49c8e; background: #f4f2ec; cursor: not-allowed; box-shadow: none; }
        /* Expanded stepper. Wider than the ADD pill so that - and + each get a real
           44x44 region without overlapping each other. */
        .card-step {
            display: none; width: 112px; height: 34px;
            grid-template-columns: 40px 1fr 40px; align-items: center;
            border-radius: 10px; background: var(--store-accent); color: #fff;
            box-shadow: 0 2px 6px rgba(47,42,36,.18); overflow: visible;
        }
        .card-step button {
            position: relative; border: 0; background: transparent; color: #fff;
            font-weight: 900; font-size: 1.05rem; line-height: 1; height: 100%;
            cursor: pointer; font-family: inherit; border-radius: 10px;
        }
        /* Hit area only - the painted pill stays 34px tall. */
        .card-step button::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -2px; right: -2px; }
        .card-step .qty-val { text-align: center; font-weight: 800; font-size: .85rem; }
        .card-add.added .card-add-btn, .card-add.added form { display: none; }
        .card-add.added .card-step { display: grid; }
        /* Out of stock / low stock flags, painted over the image so they cost no height. */
        .card-oos, .card-low {
            position: absolute; left: 6px; bottom: 6px; z-index: 5;
            border-radius: 999px; padding: .16rem .5rem;
            font-size: var(--fs-sm); font-weight: 800; letter-spacing: .01em;
        }
        .card-oos { background: rgba(190,18,60,.94); color: #fff; }
        .card-low { background: #fbe7db; color: #97441c; }
        .card-oos[hidden], .card-low[hidden] { display: none; }
        .product-card.is-oos .product-media img { opacity: .45; }
        .card-rating { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-lg); color: var(--store-muted); }
        .card-rating b { color: var(--store-text); font-weight: 800; }
        /* Single-variant rows exist only to feed the script. */
        .variant-row[hidden] { display: none; }
        .product-card:hover { transform: translateY(-2px); border-color: #e2d9c6; box-shadow: 0 8px 24px rgba(44,82,40,.10); }
        /* Square.
           The uploads look tall (782x1600) but that is canvas, not product: the
           photo inside is typically ~780x850 with the rest blank white. Once
           tools/trim_product_images.php removes that padding the real content
           ratios cluster around 0.92 — near square, half a little taller, half a
           little wider. A square cell fills those about as well as any other shape
           (measured: 75% average either way) and keeps the cards short. */
        .product-media { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; background: linear-gradient(180deg, #fff 0%, #faf7f2 100%); border: 1px solid #ece5d8; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; }
        .product-media img { width: 100%; height: 100%; object-fit: cover; }
        .product-media i { font-size: 3.2rem; color: #86b06f; }
        .product-offer { position: absolute; top: 8px; left: 8px; z-index: 4; display: inline-flex; background: #fff2df; color: #e8632a; border-radius: 8px; padding: .15rem .5rem; font-size: var(--fs-sm); font-weight: 800; }
        .product-name { color: var(--store-text); font-weight: 700; text-decoration: none; line-height: 1.3; min-height: 38px; font-size: var(--fs-name); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .3rem; }
        .variant-row { display: flex; flex-wrap: wrap; gap: .3rem; }
        .variant-chip { border: 1.5px solid #d9d0bf; background: #fff; color: #5b5670; border-radius: 8px; padding: .18rem .5rem; font-size: var(--fs-md); font-weight: 700; cursor: pointer; transition: all .15s; }
        .variant-chip:hover { border-color: #86b06f; }
        .variant-chip.active { background: var(--store-accent); border-color: var(--store-accent); color: #fff; }
        .variant-chip.oos { opacity: .5; text-decoration: line-through; }
        .price-row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
        .price-main { font-size: var(--fs-price); font-weight: 900; color: var(--store-green); }
        .price-mrp { color: #9a9382; text-decoration: line-through; font-weight: 600; font-size: var(--fs-mrp); }
        .price-saved { color: #e8632a; font-weight: 800; font-size: var(--fs-lg); margin-left: auto; }
        .stock-line { display: flex; align-items: center; gap: .5rem; }
        .stock-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-lg); font-weight: 700; }
        .stock-badge.in { color: #15803d; }
        .stock-badge.out { color: #be123c; }
        .stock-badge i { font-size: .95rem; }
        .stock-line .free-del { margin-left: auto; }
        .buy-row { margin-top: auto; padding-top: .45rem; }
        .btn-add-cart { display: inline-flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 12px; font-weight: 800; color: #fff; background: var(--store-accent); padding: .6rem; font-size: .92rem; cursor: pointer; transition: background .15s; }
        .btn-add-cart:hover { background: #285a2b; color: #fff; }
        .hero-empty { background: #fff; border: 1px dashed #d9d0bf; border-radius: 24px; padding: 2rem; color: var(--store-muted); }
        .hero { margin: .9rem 0 .3rem; }
        .hero-track { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 1600 / 500; min-height: 170px; background: #f3efe7; }
        .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; padding: 2rem 2.4rem; }
        .hero-slide.active { opacity: 1; z-index: 1; }
        .hero-slide h2 { font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .5rem; color: #fff; }
        .hero-slide p { color: rgba(255,255,255,.92); font-size: 1.02rem; margin: 0 0 1.1rem; max-width: 460px; }
        .hero-slide .btn { border-radius: 14px; font-weight: 800; padding: .65rem 1.5rem; }
        .hero-emoji { font-size: clamp(4rem, 10vw, 8rem); text-align: center; filter: drop-shadow(0 12px 24px rgba(0,0,0,.2)); }
        .hero-s1 { background: linear-gradient(120deg,#2c5228,#2f6b34 60%,#6fa860); }
        .hero-s2 { background: linear-gradient(120deg,#0f766e,#15b39d 60%,#4ade80); }
        .hero-s3 { background: linear-gradient(120deg,#ea580c,#f59e0b 60%,#fbbf24); }
        .hero-slide.hero-img { display: block; padding: 0; grid-template-columns: 1fr; }
        /* <picture> is only a wrapper for the mobile <source>; it must generate no box
           of its own so .hero-bg keeps positioning against .hero-slide exactly as before. */
        .hero-pic { display: contents; }
        .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .hero-slide.hero-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,15,8,.55) 0%, rgba(20,15,8,.18) 55%, rgba(20,15,8,0) 100%); z-index: 1; }
        /* Image-only banner (no heading/subheading): show the image clean, no dark overlay */
        .hero-slide.hero-nocopy::before { display: none; }
        .hero-slide.hero-img .hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.4rem; max-width: 560px; z-index: 2; }
        .hero-slide.hero-img .hero-copy:empty, .hero-slide.hero-img .hero-copy h2:empty { display: none; }
        .hero-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: .4rem; z-index: 3; }
        .hero-dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: width .2s ease; }
        .hero-dots button.active { width: 26px; background: #fff; }
        .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); color: #fff; cursor: pointer; font-size: 1.2rem; backdrop-filter: blur(4px); }
        .hero-arrow.prev { left: 12px; } .hero-arrow.next { right: 12px; }
        @media (max-width: 700px) { .hero-slide { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; } .hero-emoji { display: none; } .hero-arrow { display: none; } }
        .promo-strip { display: flex; flex-wrap: wrap; gap: .6rem; margin: .85rem 0 .35rem; }
        .promo-chip { flex: 1 1 200px; display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-radius: 20px; background: var(--store-surface); border: 1px solid #efe8da; box-shadow: 0 1px 2px rgba(47,42,36,.03), 0 8px 20px rgba(47,42,36,.05); }
        .promo-chip .promo-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; flex: 0 0 auto; }
        .promo-chip b { display: block; font-size: .95rem; color: var(--store-text); }
        .promo-chip span { font-size: var(--fs-lg); color: var(--store-muted); }
        .card-ribbon { position: absolute; top: 10px; left: 10px; background: #c86b3c; color: #fff; font-size: var(--fs-xs); font-weight: 800; padding: .18rem .5rem; border-radius: 999px; letter-spacing: .02em; z-index: 2; }
        .qv-btn { position: absolute; bottom: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: #2c5228; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.14); display: none; align-items: center; justify-content: center; font-size: 1.05rem; }
        .product-card:hover .qv-btn { display: flex; }
        @media (hover: none) { .qv-btn { display: flex; } }
        .card-wish { position: absolute; top: 8px; right: 8px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #b7afa6; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-size: .98rem; line-height: 1; transition: color .15s ease, transform .12s ease; }
        .card-wish:hover { color: #e11d48; transform: scale(1.12); }
        .card-wish.on { color: #e11d48; }
        .card-wish i { color: inherit; font-size: 1rem; line-height: 1; }
        .card-wish .wish-fill { color: #e11d48; font-size: 1.15rem; line-height: 1; }
        .card-stars { align-self: flex-start; }
        .card-stars .star { font-size: .92rem; }
        .product-card { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
        .product-media img { transition: transform .3s ease; }
        .product-card:hover .product-media img { transform: scale(1.05); }
        .qty-stepper { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: .2rem; border: 1.5px solid var(--store-accent); border-radius: 12px; overflow: hidden; background: #f1f7ec; }
        .qty-stepper button { border: 0; background: transparent; color: var(--store-accent); font-weight: 900; font-size: 1.1rem; height: 38px; cursor: pointer; }
        .qty-stepper button:hover { background: #e2eed7; }
        .qty-stepper .qty-val { text-align: center; font-weight: 800; color: var(--store-text); }
        .buy-added { display: none; grid-template-columns: 1fr auto; gap: .4rem; align-items: stretch; }
        .buy-cart-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; border-radius: 12px; background: var(--store-accent); color: #fff; text-decoration: none; font-size: 1.15rem; }
        .buy-cart-icon:hover { background: #285a2b; color: #fff; }
        .buy-row.added .add-form { display: none; }
        .buy-row.added .buy-added { display: grid; }
        .trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: .5rem 0 1.75rem; }
        .trust-item { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; background: var(--store-surface); border: 1px solid #efe8da; border-radius: 20px; box-shadow: 0 1px 2px rgba(47,42,36,.03), 0 8px 20px rgba(47,42,36,.05); }
        .trust-item i { font-size: 1.5rem; color: var(--store-accent); }
        .trust-item b { display: block; font-size: .92rem; }
        .trust-item span { font-size: var(--fs-base); color: var(--store-muted); }
        @media (max-width: 900px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .trust-bar { grid-template-columns: 1fr 1fr; } .promo-chip { flex-basis: 100%; } }
        @media (max-width: 1100px) {
            .category-banner-card { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            .store-frame { width: calc(100% - 16px); padding: 0 4px; }
            .section-products { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
            .product-intro { align-items: flex-start; flex-direction: column; }
        }
        .pm-fallback { font-size: 2.6rem; font-weight: 900; color: #86b06f; letter-spacing: -.02em; }
        /* Testimonials */
        .tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
        .tm-card { background: var(--store-surface); border: 1px solid #efe8da; border-radius: 22px; padding: 1.3rem; box-shadow: 0 1px 2px rgba(47,42,36,.03), 0 10px 26px rgba(47,42,36,.05); display: flex; flex-direction: column; gap: .7rem; }
        .tm-stars { color: #e0a419; letter-spacing: 2px; font-size: 1rem; }
        .tm-card blockquote { margin: 0; color: var(--store-text); font-size: .98rem; line-height: 1.55; flex: 1; }
        .tm-card figcaption { display: flex; align-items: center; gap: .7rem; }
        .tm-avatar { width: 44px; height: 44px; border-radius: 50%; background: #eef3e6; color: #2f6b34; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; flex: 0 0 auto; }
        .tm-card figcaption b { display: block; font-size: .92rem; color: var(--store-text); }
        .tm-card figcaption small { color: var(--store-muted); font-size: var(--fs-base); }
        /* Certifications / quality strip */
        .cert-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; margin: 1.5rem 0 2rem; padding: 1.2rem 1.4rem; background: var(--store-surface); border: 1px solid #efe8da; border-radius: 22px; box-shadow: 0 1px 2px rgba(47,42,36,.03), 0 8px 20px rgba(47,42,36,.05); }
        .cert-item { display: inline-flex; align-items: center; gap: .5rem; color: var(--store-muted); font-weight: 700; font-size: .9rem; }
        .cert-item i { font-size: 1.5rem; color: #2f6b34; }
        /* Shop by category tiles */
        .cat-section { padding: .5rem 0 .4rem; }
        .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .9rem; }
        .cat-tile { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1rem .6rem; background: var(--store-surface); border: 1px solid #efe8da; border-radius: 20px; text-decoration: none; text-align: center; box-shadow: 0 1px 2px rgba(47,42,36,.03), 0 8px 18px rgba(47,42,36,.04); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
        .cat-tile:hover { transform: translateY(-3px); border-color: #e2d9c6; box-shadow: 0 4px 10px rgba(44,82,40,.08), 0 18px 34px rgba(44,82,40,.10); }
        .cat-tile-img { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(180deg,#f4f8ee,#eef3e6); border: 1px solid #e2ecd6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .cat-tile-img img { width: 100%; height: 100%; object-fit: cover; }
        .cat-tile-img i { font-size: 2rem; color: #2f6b34; }
        .cat-tile-img .cat-initial { font-size: 1.7rem; font-weight: 900; color: #86b06f; }
        .cat-tile b { font-size: .88rem; color: var(--store-text); font-weight: 700; line-height: 1.25; }
        .cat-tile span { font-size: var(--fs-md); color: var(--store-muted); }
        @media (max-width: 640px) { .cat-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; } .cat-tile-img { width: 60px; height: 60px; } }
        /* Sort / filter bar */
        .sort-bar { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
        .sort-select { border: 1px solid #e6dfcd; border-radius: 12px; padding: .5rem .9rem; background: var(--store-surface); color: var(--store-text); font-weight: 700; font-size: .88rem; cursor: pointer; }
        .sort-check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem; color: var(--store-muted); cursor: pointer; white-space: nowrap; }
        @media (max-width: 640px) { .sort-bar { width: 100%; } .sort-select { flex: 1; } }
        /* Top deals row.
           Holds .product-card now, exactly like the section grids -- the row only
           decides the track width and the horizontal scroll. The old .deal-card /
           .deal-media / .deal-name / .deal-price rules went with the cut-down markup
           they styled; .deal-off is gone too, because product_card.php already
           renders the discount as .product-offer. */
        .deals-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
        .deals-row > * { scroll-snap-align: start; min-width: 0; }
        /* Low-stock badge on cards */
        .low-stock { align-self: flex-start; background: #fbe7db; color: #b45a26; border-radius: 999px; padding: .15rem .55rem; font-size: var(--fs-sm); font-weight: 800; }
        /* Active filter chips */
        .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .25rem 0 .6rem; }
        .fchip { display: inline-flex; align-items: center; gap: .35rem; background: var(--store-surface); border: 1px solid #e2d9c6; color: var(--store-text); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 700; text-decoration: none; }
        .fchip:hover { border-color: #c86b3c; color: #c86b3c; }
        .fchip i { font-size: .9rem; }
        .fchip-clear { color: #c86b3c; font-weight: 800; font-size: .82rem; text-decoration: none; margin-left: .25rem; }
        .fchip-clear:hover { text-decoration: underline; }

        /* ---------- Mobile: homepage order + density ---------- */
        /* Mobile only. Desktop keeps its DOM order, its section sizes and its 4-up
           promo row untouched -- nothing here applies above 820px. */
        @media (max-width: 820px) {
            /* 3. Reorder without touching the HTML. The homepage's main becomes a
               flex column so `order` applies; the hero's wrapper goes
               display:contents so the hero and the promo strip can be ordered
               independently of each other.

               Scoped to .home-main (index.php only). As a bare `main` it also hit
               cart.php, product.php, wishlist.php and combos.php -- every page that
               loads this stylesheet for the product card styles. Their wrappers use
               `margin: 0 auto`, and an auto cross-axis margin on a flex item turns
               off stretch and sizes the item to max-content, so those pages rendered
               ~980px wide inside a 390px phone with everything on the right cut off. */
            .home-main { display: flex; flex-direction: column; }
            .home-herowrap { display: contents; }
            /* NB: selectors still see the real DOM, so these must be matched via their
               actual parent (.home-herowrap), not `main >`. Without an explicit width
               the auto margins make them shrink-to-fit, and .hero collapses to 0 because
               every .hero-slide inside it is absolutely positioned. */
            .home-herowrap > .hero,
            .home-herowrap > .promo-strip { width: calc(100% - 16px); max-width: 1680px; margin-left: auto; margin-right: auto; padding: 0 4px; }

            .hero               { order: 1; }
            .home-deals         { order: 2; }   /* products first */
            .promo-strip        { order: 3; }
            .home-catbanner     { order: 4; }
            .home-intro         { order: 5; }
            .home-filters       { order: 6; }
            #store-sections     { order: 7; }
            .home-combos        { order: 8; }   /* swap to 3.5 to put combos above products */
            .home-media         { order: 9; }
            .home-trust         { order: 10; }
            .home-testimonials  { order: 11; }
            .home-cert          { order: 12; }

            /* 2. Hero: squarer box for phone artwork. 2:1 keeps the scroll budget;
               raise to 3/2 (or drop aspect-ratio for height:240px) for taller art --
               240px is the cap, not a target. */
            .hero { margin-top: .45rem; margin-bottom: .2rem; }
            .hero-track { aspect-ratio: 2.1 / 1; min-height: 0; max-height: 240px; border-radius: 18px; }

            /* 1. Promo blocks: one horizontally scrollable strip of pills, icon +
               label only, instead of four stacked full-width cards. */
            .promo-strip {
                display: flex; flex-wrap: nowrap; gap: .5rem;
                overflow-x: auto; scroll-snap-type: x proximity;
                scrollbar-width: none; -ms-overflow-style: none;
                margin-top: .35rem; margin-bottom: .25rem; padding-bottom: .15rem;
            }
            .promo-strip::-webkit-scrollbar { display: none; }
            .promo-chip {
                flex: 0 0 auto; scroll-snap-align: start;
                max-height: 60px; padding: .45rem .7rem; gap: .5rem;
                border-radius: 14px; box-shadow: 0 1px 2px rgba(47,42,36,.05);
            }
            .promo-chip .promo-ic { width: 26px; height: 26px; font-size: .9rem; border-radius: 9px; }
            .promo-chip b { font-size: var(--fs-base); white-space: nowrap; }
            .promo-chip span { display: none; }

            /* Density: section chrome is the other half of the scroll depth. */
            .section-block { padding: .25rem 0 .6rem; }
            /* Section header: two rows instead of one flex line, so a subtitle that
               wraps can never run under the "View All" link. The inner <div> that
               wraps h2+p goes display:contents so all three land in the same grid.
               Markup is untouched, so this fixes every .section-head on the site
               (Top Deals, product sections, Combo Offers, News, Testimonials). */
            .section-head {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-areas: "title link" "sub sub";
                align-items: center;
                column-gap: .75rem;
                row-gap: .1rem;
                margin-bottom: .45rem;
            }
            .section-head > div { display: contents; }
            .section-head h2 { grid-area: title; font-size: var(--fs-h2); min-width: 0; }
            .section-head p {
                grid-area: sub; display: block; margin: 0;
                font-size: var(--fs-lg); line-height: 1.35;
                overflow-wrap: break-word;
            }
            .section-viewall { grid-area: link; }
            .product-intro { padding: .2rem 0 .05rem; gap: .25rem; }
            .product-intro h1 { font-size: var(--fs-h2); }
            /* The "N articles visible" line is the same info the grid shows; drop it
               on mobile so the sort bar sits straight under the heading. */
            .product-intro p { display: none; }
            .sort-select, .sort-check { font-size: .82rem; }
            .sort-select { padding: .4rem .7rem; }

            /* Top Deals rail. Wider tracks than the old cut-down tiles needed: these
               are full product cards now and have to fit an ADD control and a price
               row without wrapping. Still narrower than the two-up section grid, so
               the rail reads as something you scroll rather than a second grid. */
            .deals-row { grid-auto-columns: minmax(142px, 1fr); gap: .55rem; }
        }

        /* ---------- Mobile: horizontal overflow containment ---------- */
        /* Mobile-only. Desktop is unchanged, and the 2-column mobile product
           grid set at 640px above is deliberately left alone. */
        @media (max-width: 820px) {
            /* THE root cause of the sideways scroll. .hero-track carries both
               aspect-ratio:1600/500 and min-height:170px. The min-height wins and the
               ratio back-computes the width as 170 * 3.2 = 544px, so the hero alone
               drags the document to 556px inside a 386px viewport. Clamping the width
               makes the ratio yield: the banner keeps its 170px height and just gets
               shorter in aspect. .hero-slide / .hero-bg / .hero-dots all inherit the
               track's box, so this one rule settles all four. */
            .hero-track { max-width: 100%; }

            /* Grid and flex items default to min-width:auto, so a card whose
               min-content width exceeds its track forces the track wider and
               overflows the page. Pinning them to 0 makes `1fr` mean exactly 1fr. */
            .section-products > *, .product-card,
            .trust-bar > *, .trust-item,
            .promo-strip > *, .promo-chip,
            .tm-grid > *, .tm-card,
            .cat-grid > *, .cat-tile,
            .deals-row > *,
            .category-banner-card, .category-banner-card > * { min-width: 0; }

            /* .stock-line is a nowrap flex row holding "In stock" + "Only N left" +
               a nowrap "Free Delivery" pill. Together they exceed half the viewport
               and blow out the 2-column grid, so let them wrap. */
            .stock-line { flex-wrap: wrap; }
            .price-row, .variant-row, .section-head > * { min-width: 0; }

            /* Long unbroken product/category names break instead of pushing. */
            .product-name, .cat-tile b,
            .trust-item b, .trust-item span,
            .promo-chip b, .promo-chip span,
            .category-banner-copy h1, .category-banner-copy p,
            .tm-card blockquote, .tm-card figcaption b { overflow-wrap: break-word; }

            /* Horizontal rails stay contained, with the scrollbar chrome hidden. */
            .deals-row { max-width: 100%; scrollbar-width: none; -ms-overflow-style: none; }
            .deals-row::-webkit-scrollbar { display: none; }
        }

        /* ---------- Mobile: a11y overrides that must win the cascade ----------
           storefront.css loads before this file, so colour/size rules for classes
           declared here have to be repeated after their base declaration. */
        @media (max-width: 820px) {
            /* Spec'd roles. */
            .product-name { font-size: var(--fs-name); font-weight: 600; }
            .price-main { font-size: var(--fs-price); font-weight: 700; }
            .price-mrp { font-size: var(--fs-mrp); }

            /* Contrast on small informational text (all were under 4.5:1 on white). */
            .price-mrp { color: #6b655a; }        /* was #9a9382  3.06 -> 5.30 */
            .price-saved { color: #b23c0a; }      /* was #e8632a  3.36 -> 4.87 */
            /* Dark orange on the cream pill it already has (#fff2df from the base
               rule). There used to be a second line here forcing background #9c4f28
               -- that belonged to .deal-off, which had white text and is gone now.
               Applied to .product-offer it put dark orange on dark brown: about
               1.3:1, i.e. unreadable. */
            .product-offer { color: #a8380a; }    /* on #fff2df   3.04 -> 5.11 */

            .pm-fallback { color: #4f7a3a; }      /* placeholder  2.48 -> 4.53 */
            .low-stock { color: #97441c; }
            .stars .star { color: #9a9184; }      /* empty track, 1.45 -> 3.11 (meets 3:1 non-text) */
            .stars .star.on { color: #9a6f00; }   /* filled star, 2.21 -> 4.52 */
            .tm-stars { color: #9a6f00; }

            /* Hero dots: 9x9 -> 24x24 hit area, dot itself still 9px (drawn by ::before). */
            .hero-dots { gap: 0; }
            .hero-dots button {
                width: 24px; height: 24px; padding: 0; background: transparent;
                border-radius: 0; position: relative;
            }
            .hero-dots button::before {
                content: ''; position: absolute; top: 50%; left: 50%;
                transform: translate(-50%, -50%);
                width: 9px; height: 9px; border-radius: 999px;
                background: rgba(255,255,255,.55); transition: width .2s ease;
            }
            .hero-dots button.active { width: 40px; background: transparent; }
            .hero-dots button.active::before { width: 26px; background: #fff; }
        }
        /* ---------- Product card: mobile sizing ---------- */
        @media (max-width: 820px) {
            .product-card { padding: .45rem; gap: .15rem; border-radius: 14px; }
            .product-name { min-height: 0; margin-top: .25rem; line-height: 1.28; }
            .price-row { margin-top: .1rem; gap: .3rem; }
            .price-saved { margin-left: 0; }

            /* ADD pill ~64x32, stepper 108x32. The stepper's three cells are 38 / rest
               / 38 so that - and + each land a 44x44 hit region (38 + 3px each side)
               without overlapping one another. The number is a readout, not a button,
               so it is not given a competing 44px target -- three 44px targets cannot
               fit side by side in a control this size without making +/- ambiguous. */
            .card-add { right: 5px; bottom: 5px; }
            .card-add-btn { width: 64px; height: 32px; font-size: var(--fs-sm); border-radius: 9px; }
            .card-step { width: 108px; height: 32px; grid-template-columns: 38px 1fr 38px; border-radius: 9px; }
            .card-step button { font-size: 1rem; }
            .card-step button::after { top: -6px; bottom: -6px; left: -3px; right: -3px; }
            .card-step .qty-val { font-size: .82rem; }
            .card-oos, .card-low { left: 5px; bottom: 5px; padding: .12rem .42rem; }
        }
        /* ---------- Pointer targets: base (desktop) = 32px minimum ----------
           Declared here (not storefront.css) because these classes are defined in this
           file, which loads later and would otherwise win the cascade.

           .card-wish and .qv-btn are deliberately NOT in this list. They are already
           position:absolute (pinned to the corners of the image), which is just as
           valid a containing block for their ::after as relative is -- and setting
           them to relative here dropped them out of their corners and into the normal
           flow, so every card grew a stray heart under the photo. */
        .section-viewall, .variant-chip { position: relative; }
        .section-viewall::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -4px; right: -4px; }
        .card-wish::after { content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; }
        .variant-chip::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: 0; right: 0; }
        .cat-tile { min-height: 32px; }

        /* Hero dots: the painted dot stays 9px (drawn by ::before); only the button box
           around it grows, so the row spaces out but the dot size never changes. */
        .hero-dots { gap: 0; }
        .hero-dots button {
            width: 32px; height: 32px; padding: 0; background: transparent;
            border-radius: 0; position: relative;
        }
        .hero-dots button::before {
            content: ''; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 9px; height: 9px; border-radius: 999px;
            background: rgba(255,255,255,.55); transition: width .2s ease;
        }
        .hero-dots button.active { width: 40px; background: transparent; }
        .hero-dots button.active::before { width: 26px; background: #fff; }

        @media (max-width: 820px) {
            /* Same elements, raised to 44px for fingers. */
            .section-viewall::after { top: -11px; bottom: -11px; left: -6px; right: -6px; }
            .card-wish::after { top: -8px; right: -8px; bottom: -10px; left: -10px; }
            .variant-chip::after { top: -11px; bottom: -11px; }
            .hero-dots button { width: 44px; height: 44px; }
            .hero-dots button.active { width: 52px; }
        }
        /* ADD pill hit area: painted 64x32 / 72x34, touchable 44 tall on mobile. */
        .card-add-btn { position: relative; }
        @media (max-width: 820px) {
            .card-add-btn::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }
        }
        /* Price-range control inside the sort bar. */
        .price-range { display: inline-flex; align-items: center; gap: .3rem; }
        .price-range input { width: 78px; min-width: 0; min-height: 36px; border: 1px solid #e2d9c6;
            border-radius: 10px; padding: 0 .5rem; font: inherit; font-size: var(--fs-lg); background: var(--store-surface); }
        .price-range input:focus { outline: none; border-color: var(--store-accent); }
        .price-range .dash { color: var(--store-muted); }
        .price-go { min-width: 36px; min-height: 36px; border: 0; border-radius: 10px;
            background: var(--store-accent); color: #fff; cursor: pointer; display: inline-flex;
            align-items: center; justify-content: center; }
        body.rm-dark .price-range input { background: #221d14; border-color: #3a3324; color: var(--store-text); }
        @media (max-width: 820px) {
            .price-range { width: 100%; }
            .price-range input { flex: 1 1 0; min-height: 44px; }
            .price-go { min-width: 44px; min-height: 44px; }
        }
        /* ---------- Product image standardisation ----------
           Sources are a mix of packshots and lifestyle photos at different ratios.
           A fixed 1:1 white box with object-fit:contain makes them line up in the
           grid without cropping anything out of the frame. */
        .product-media { background: #fff; }
        .product-media picture { display: contents; }
        /* 4px, not 6px: with contain the padding comes straight off the rendered
           size of the product, and every pixel counts on a tall packshot. */
        .product-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
        .pdp-main img, .cmb-card-media img { object-fit: contain; background: #fff; }
        /* Placeholder for the products that genuinely have no photo yet. */
        .pm-fallback { display: inline-flex; align-items: center; justify-content: center;
            width: 46%; aspect-ratio: 1/1; border-radius: 14px; background: #f2efe6;
            color: #b0a894; font-size: 1.7rem; }
        .pm-fallback-text { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
            font-size: var(--fs-sm); font-weight: 700; color: #a49c8e; }
        /* ---------- Pagination ----------
           Shown on focused views (a section, category, subcategory or search),
           where the grid is one page of a larger result set. The landing page
           has no pager: it shows a capped preview of each section instead. */
        .rm-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
            gap: .4rem; margin: 1.6rem 0 .4rem; }
        .rm-pg-list { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
        .rm-pg { display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
            min-width: 44px; min-height: 44px; padding: 0 .7rem; border-radius: 12px;
            border: 1.5px solid #e2d9c6; background: var(--store-surface, #fff);
            color: var(--store-text, #1f2937); text-decoration: none;
            font-weight: 700; font-size: var(--fs-body, .95rem); }
        .rm-pg:hover { border-color: var(--store-accent, #2f6b34); color: var(--store-accent, #2f6b34); }
        .rm-pg.current { background: var(--store-accent, #2f6b34); border-color: var(--store-accent, #2f6b34); color: #fff; }
        .rm-pg.disabled { opacity: .4; pointer-events: none; }
        .rm-pg-gap { padding: 0 .2rem; color: var(--store-muted, #667085); }
        body.rm-dark .rm-pg { background: #221d14; border-color: #3a3324; }
        @media (max-width: 560px) {
            /* Numbers are the first thing to go on a narrow screen; Pichla/Agla
               carry the whole interaction and stay full-size targets. */
            .rm-pg-list { display: none; }
            .rm-pager { justify-content: space-between; }
            .rm-pg { flex: 1; }
        }