/* Template 11 "Taana" renders through its own TaanaStorefront component (see just above the
       StoreDesktop call site) instead of this file's own per-template mobile home markup — hide
       that markup here rather than touching its Razor branches. TaanaStorefront itself has no
       such gate, so it's visible at every width, mobile included. */
    .sh-home[data-template="11"]{ display:none; }
    .sh-home[data-template="12"], .sh-home[data-template="13"], .sh-home[data-template="14"], .sh-home[data-template="15"], .sh-home[data-template="17"], .sh-home[data-template="18"], .sh-home[data-template="19"], .sh-home[data-template="20"]{ display:none; }
    .store-topbar-hide-on-landing[data-template="12"],
    .store-footer-hide-on-landing[data-template="12"],
    .store-topbar-hide-on-landing[data-template="13"],
    .store-footer-hide-on-landing[data-template="13"],
    .store-topbar-hide-on-landing[data-template="14"],
    .store-footer-hide-on-landing[data-template="14"],
    .store-topbar-hide-on-landing[data-template="15"],
    .store-footer-hide-on-landing[data-template="15"],
    .store-topbar-hide-on-landing[data-template="17"],
    .store-footer-hide-on-landing[data-template="17"],
    .store-topbar-hide-on-landing[data-template="18"],
    .store-footer-hide-on-landing[data-template="18"],
    .store-topbar-hide-on-landing[data-template="19"],
    .store-footer-hide-on-landing[data-template="19"]{ display:none !important; }
    .store-mobile-footer[data-template="12"][hidden], .store-mobile-footer[data-template="13"][hidden], .store-mobile-footer[data-template="14"][hidden], .store-mobile-footer[data-template="15"][hidden], .store-mobile-footer[data-template="17"][hidden], .store-mobile-footer[data-template="18"][hidden], .store-mobile-footer[data-template="19"][hidden]{ display:none !important; }
    /* Festive (19) draws its own header, shop page, product page and footer at every width (FestiveStorefront,
       FestiveShopPage, FestiveProductPage), so the shared ones are hidden — except on a share link, which keeps the
       shared listing (data-festive is only set when there's no share view; see IsFestive). */
    #store-topbar[data-festive="true"], #spf-footer[data-festive="true"],
    .store-mobile-footer[data-festive="true"], .store-body[data-festive="true"]{ display:none !important; }
    /* Every other template treats the product detail view as an overlay drawn on top of the
       category-listing shell (.store-body) — that shell renders regardless of whether a product
       is open. TaanaProductDetail is a real standalone page, not an overlay, so its own shell
       needs to replace .store-body's, not sit on top of it — hide .store-body only for template
       11 AND only while a product is actually open (data-pdp-open, set right on this div),
       leaving the category-listing view itself untouched. */
    /* !important required — wwwroot/css/app.css sets .store-body{display:flex !important;} for
       every template's desktop sidebar layout, which otherwise wins regardless of this rule's
       higher selector specificity. Confirmed via a real browser's computed style, not assumed. */
    .store-body[data-template="11"][data-pdp-open="true"]{ display:none !important; }
    /* Same reasoning, for TaanaCategoryPage (a real standalone listing page, same as
       TaanaProductDetail) — data-catpage-open set right on this div, next to data-pdp-open. */
    .store-body[data-template="11"][data-catpage-open="true"]{ display:none !important; }
    /* store-topbar-hide-on-landing/store-footer-hide-on-landing above only fire at ≥1024px — that
       media query was written for the original desktop-only use case (StoreDesktop replacing the
       legacy chrome on the landing view) and was never meant to run at mobile width, since every
       other template's mobile home has always used its own separate header inside .sh-home.
       Taana is self-responsive down to mobile on both views, so its equivalent needs to hold at
       every width — a second, width-independent rule for template 11 specifically, additive to
       the desktop-only one above rather than editing it (which every other template still needs
       exactly as-is). Same reasoning for .store-mobile-footer, which has no desktop-only rule to
       accidentally inherit from at all — it needs its own template-11 hide from scratch. */
    #store-topbar[data-template="11"]{ display:none !important; }
    #spf-footer[data-template="11"]{ display:none !important; }
    .store-mobile-footer[data-template="11"]{ display:none !important; }
    /* Override Chrome/Edge's blue-tint autofill background so filled inputs keep the app's own bg-gray-50 look */
    .input:-webkit-autofill,
    .input:-webkit-autofill:hover,
    .input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #f9fafb inset;
        box-shadow: 0 0 0 1000px #f9fafb inset;
        -webkit-text-fill-color: #1a2236;
    }
    body {
        font-family: var(--s-body-font, 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif) !important;
    }
    /* ── Scroll reveal (CSS-only, no JS) ─────────────── */
    @keyframes sh-fade-up { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
    .sh-reveal { animation: sh-fade-up .65s cubic-bezier(.22,.61,.36,1) both; }
    /* ── Store status dot — Open gets a calm soft-glow ring (reassuring, "everything's fine and
       active"); Busy gets an actual blink (Busy is the one state worth the buyer's attention —
       "orders may take longer"). Closed stays static — it shouldn't read as active at all. ── */
    @keyframes sh-status-glow { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 50% { box-shadow:0 0 0 4px color-mix(in srgb, currentColor 0%, transparent); } }
    @keyframes sh-status-blink { 0%,45% { opacity:1; } 50%,95% { opacity:.2; } 100% { opacity:1; } }
    .sh-status-dot-open { animation: sh-status-glow 1.8s ease-in-out infinite; }
    .sh-status-dot-busy { animation: sh-status-blink 1.3s step-end infinite; }
    /* ── Jewelry zoom hint pill ─────────────────────── */
    @keyframes zoomhint-fade { 0%,55% { opacity:1; } 100% { opacity:0; } }
    /* ── Buyer Home Page ─────────────────────────────── */
    .sh-home {
        background-color: var(--s-bg);
        background-image: var(--s-bg-pattern, none);
        background-size: var(--s-bg-pattern-size, auto);
        background-blend-mode: var(--s-bg-pattern-blend, normal);
        display: block;
    }
    @media (min-width: 1024px) {
        .sh-home { display: none !important; }
        /* New StoreDesktop renders its own announce + sticky nav + footer — hide legacy chrome on landing */
        .store-topbar.store-topbar-hide-on-landing { display: none !important; }
        .store-footer.store-footer-hide-on-landing { display: none !important; }
        /* StoreDesktop owns the modern landing footer at desktop widths. */
        .store-mobile-landing-footer { display: none !important; }
    }
    .sh-hero { padding: 0; }
    .sh-hero-mob { position: relative; overflow: hidden; aspect-ratio: 4/5; max-height: 58svh; width: 100%; }
    .sh-hero-mob-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 30%, rgba(0,0,0,.68) 100%); }
    .sh-hero-mob-text { position: absolute; left: 20px; right: 20px; bottom: 32px; color: #fff; }
    .sh-hero-slide { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.4,0,.2,1); }
    .sh-hero-split { display: none; }
    /* ── Signature texture wash — used only when a seller hasn't uploaded a hero photo/video.
         A fine diagonal hairline over the brand gradient reads as "designed surface" rather
         than a flat AI-generated gradient block. Already var-driven (--s-primary/--s-text-accent),
         so it automatically picks up the theme's real dark palette in dark mode — no separate
         [data-color-mode="dark"] override needed (the old one was a generic brown/black wash
         unrelated to the seller's actual accent colour; deleted rather than retargeted). ── */
    .sh-hero-fallback {
        background:
            repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 7px),
            linear-gradient(160deg, var(--s-primary) 0%, var(--s-text-accent) 100%);
    }
    .sh-sec { padding: 20px 16px; }
    .sh-sec-inner { max-width: 1240px; margin: 0 auto; }
    .sh-sec-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; gap: 16px; }
    .sh-view-all { display: none; }
    .sh-mob-cta { margin-top: 22px; }
    .sh-cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .sh-prods-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .sh-prods-row::-webkit-scrollbar { display: none; }
    .sh-prods-row > * { flex-shrink: 0; width: 62vw; max-width: 210px; scroll-snap-align: start; }
    /* "This week's picks" and "Today's Deals" on phones: a 2-column grid (up to 10, even count) */
    .sh-prods-row--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; overflow-x: visible; scroll-snap-type: none; }
    .sh-prods-row--grid > * { width: auto; max-width: none; min-width: 0; }
    /* In the grid, the end-of-row "View all products" card becomes one full-width button below the cards
       instead of a lone half-width tile in its own row. */
    .sh-prods-row--grid > .sh-viewall-tile { grid-column: 1 / -1; width: 100% !important; max-width: none !important; }
    .sh-prods-row--grid .sh-viewall-inner { aspect-ratio: auto !important; flex-direction: row !important; gap: 10px !important; padding: 14px 16px !important; min-height: 0 !important; }
    .sh-prods-row--grid .sh-viewall-inner > div:first-child { width: 32px !important; height: 32px !important; }
    .sh-prods-row--grid .sh-viewall-inner > div:first-child svg { width: 16px; height: 16px; }
    .sh-prods-row--grid .sh-viewall-br { display: none; }
    /* Offer card (fashion/jewellery, when products carry a discount) */
    .sh-offer-sec { padding-top: 14px !important; padding-bottom: 6px !important; }
    .sh-offer { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: var(--s-primary); color: var(--s-on-primary,#fff); cursor: pointer; }
    .sh-offer:focus-visible { outline: 2px solid var(--s-primary); outline-offset: 3px; }
    .sh-offer-copy { position: absolute; left: 18px; top: 20px; bottom: 18px; width: 56%; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
    .sh-offer-copy small { font-size: 10.5px; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; color: #fde68a; }
    .sh-offer-copy b { font-family: var(--s-heading-font, 'Fraunces', Georgia, serif); font-size: 25px; line-height: 1.1; font-weight: 700; }
    .sh-offer-copy > span:not(.sh-offer-btn) { font-size: 12.5px; opacity: .9; }
    .sh-offer-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--s-primary-text, var(--s-primary)); border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 700; }
    .sh-offer-fan { position: absolute; right: -4px; bottom: -14px; width: 46%; height: 100%; }
    .sh-offer-fan img { position: absolute; bottom: 10px; width: 64px; height: 100px; object-fit: cover; object-position: 50% 0; border-radius: 10px; border: 3px solid #fff; background: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
    .sh-offer-fan img:nth-child(1) { right: 60px; transform: rotate(-8deg); }
    .sh-offer-fan img:nth-child(2) { right: 14px; bottom: 22px; transform: rotate(6deg); z-index: 2; }
    /* Shop by budget (fallback when there's no offer) */
    .sh-budget { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sh-budget-t { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--s-border); border-radius: 12px; overflow: hidden; background: var(--s-surface); color: var(--s-ink); cursor: pointer; font-family: inherit; text-align: left; min-width: 0; }
    .sh-budget-img { display: block; height: 96px; background: var(--s-bg); }
    .sh-budget-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
    .sh-budget-txt { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; }
    .sh-budget-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sh-budget-txt span { font-size: 11.5px; color: var(--s-ink-muted, #64748b); }
    .sh-about { max-width: 640px; margin: 0 auto; text-align: center; }
    .sh-about-avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; }
    .sh-about-divider { width: 40px; height: 2px; background: var(--s-primary); margin: 20px auto; border-radius: 999px; }
    .sh-about-trust { display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 320px; margin: 0 auto; }
    .sh-about-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
    .sh-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* ── Trust strip 2×2 grid ───────────────────────── */
    .sh-trust-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .sh-trust-item { display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--s-surface); border-radius:14px; border:1px solid var(--s-border); }
    /* ── Hide carousel arrows on mobile (swipe only) ─── */
    @media (max-width:767px) { .carousel-arrow-btn { display:none !important; } }
    /* ── Filter bar hide on scroll ──────────────────── */
    /* max-height/padding are layout properties — animating them WHILE the page is actively
       scrolling forces a reflow every frame in competition with scroll compositing, which is
       what reads as flicker (worse the slower/gentler the scroll, since the animation has more
       frames to fight over). So the height/padding change is instant; only opacity — which is
       compositor-only and never triggers layout — gets a transition. */
    .store-mobile-pills  { transition: opacity .18s ease; max-height: 100px; overflow: hidden; }
    .store-active-chips  { transition: opacity .18s ease; max-height: 60px; overflow: hidden; }
    .store-mobile-pills.filters-collapsed,
    .store-active-chips.filters-collapsed  { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }
    @media (min-width: 768px) { .store-results-bar { display: none !important; } }
    /* Phones already get the category row at the top of the shop view (.store-mobile-pills, hidden
       from 768px up), so the pills under the heading would repeat it — keep those for desktop only. */
    @media (max-width: 767px) { .store-heading-cats--dup { display: none !important; } .store-heading-toolbar, .t3-ticket, .store-dock { display:none !important; } }
    /* Simple (3) header: title + "n items" on one line. Phones show it on the shop's main view too (other layouts hide the
       heading there), title left and count right, so the category tiles above don't run straight into the products. */
    .t3-head-count { font-size:13px; color:var(--s-ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
    @media (max-width: 767px) {
        .store-section-label.t3-shop-head { display:block !important; }
        .t3-shop-head .store-heading-titlerow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
        .t3-shop-head:not(.store-category-page) { margin:22px 0 12px !important; }
        .t3-shop-head:not(.store-category-page) .store-heading-titlerow > :first-child { font-size:1.2rem !important; margin:0 !important; }
        .t3-shop-head:not(.store-category-page) :is(.hc-wrap, .store-heading-active-filters) { display:none !important; }
    }
    /* Shop heading category row as photo tiles (Appearance Studio → Category style: Image Pills / Photo Tiles).
       Round for "image", soft rounded square for "square"; the selected one gets the accent ring. */
    .store-heading-tiles { display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 6px; scroll-behavior:smooth; }
    .store-heading-tiles::-webkit-scrollbar, .hc-scroller::-webkit-scrollbar { display:none; }
    /* Fit to width (Studio toggle, default): tiles share the row evenly; once they no longer fit at their minimum
       cell they overflow and scroll. 2–3 categories stay centred rather than stranded across a wide screen. */
    /* Spread: even gaps with the first and last tile on the column's edges, so the row starts and ends where the title
       and grid do (equal columns left half a column of air at each end). Too many to fit → the row scrolls. */
    .store-heading-tiles[data-fit] { display:flex; justify-content:space-between; gap:16px; }
    .store-heading-tiles[data-fit][data-few] { justify-content:center; }
    /* A tile is wider than its photo (room for the label); pull the row out by the difference so the end photos line up. */
    .store-heading-tiles[data-fit]:not([data-few]) { margin-inline:-4px; }
    @media (min-width:1024px) { .store-heading-tiles[data-fit]:not([data-few]) { margin-inline:-7px; } }
    .hc-scroller[data-fit]:not(.store-heading-tiles) > button { flex:1 0 auto !important; }
    /* Wrapper + ‹ › arrows (App.razor flags data-overflow / data-at-start / data-at-end). Arrows are for mouse
       users on computers; phones hide this row (or swipe it). */
    .hc-wrap { position:relative; margin-top:16px; }
    /* Simple (3) with a home-page category layout: its grid under the cover banner stands in for the category row on
       the shop's main view. Phones: the circle row hides only while the bar is expanded, so the slim chips still appear
       once the shopper scrolls into the products. Tablets and computers: the row above the products, per device pick. */
    html:not([data-t3-compact]) .store-mobile-pills[data-home-grid] { display:none !important; }
    @media (min-width:768px) and (max-width:1023.98px) { .hc-wrap[data-home-grid~="phone"] { display:none !important; } }
    @media (min-width:1024px) { .hc-wrap[data-home-grid~="computer"] { display:none !important; } }
    .hc-arrow { display:none; position:absolute; top:var(--hc-arrow-top,50%); transform:translateY(-50%); z-index:2; width:36px; height:36px;
                border-radius:50%; border:1px solid var(--s-border); background:var(--s-surface); color:var(--s-ink); font-size:22px; line-height:1;
                align-items:center; justify-content:center; padding:0 0 3px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.12); }
    .hc-prev { left:-8px; } .hc-next { right:-8px; }
    .hc-wrap--tiles { --hc-arrow-top:44px; }
    @media (min-width:768px) {
        /* The heading reserves 270px on the right for Filters/Sort, but those sit on the title line only:
           the category row runs under them to the full content width. */
        /* Shop header on computers: title (+ T3 coupon ticket) / categories / toolbar (count · Filters · Sort) right
           above the grid. Filters/Sort live in the toolbar now, so the old 270px right-hand reserve goes. */
        div.store-section-label { padding-right:2px !important; }
        .store-heading-titlerow { display:flex; align-items:center; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; }
        .store-heading-titlerow .store-heading-count { display:none; }
        .store-heading-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--s-border); font-family:var(--s-body-font,inherit); }
        .store-toolbar-count { font-size:13px; color:var(--s-ink-muted); font-variant-numeric:tabular-nums; }
        .store-heading-toolbar .store-heading-filter-actions { position:static !important; }
        :is(.store-heading-toolbar, .t3-shop-head) .store-heading-filter-button { display:inline-flex; align-items:center; white-space:nowrap; }
        .store-heading-sort { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--s-ink-muted); }
        /* Docked toolbar: hidden until html[data-store-dock]. Hangs from the bottom of the sticky header and takes its
           background (themes repaint the header). Store's own fonts: heading font for the title, body font for the rest. */
        .store-dock { display:flex; align-items:center; gap:14px; position:absolute; top:100%; left:0; right:0; height:52px; padding:0 24px;
                      background:inherit; border-top:1px solid var(--s-border); border-bottom:1px solid var(--s-border); box-shadow:0 8px 16px -10px rgba(0,0,0,.22);
                      font-family:var(--s-body-font,inherit); color:var(--s-ink);
                      opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
                      transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
        html[data-store-dock] .store-dock { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .16s ease, transform .16s ease; }
        .store-dock-title { font:500 16px/1.2 var(--s-heading-font,var(--s-body-font,serif)); letter-spacing:-.01em; color:var(--s-ink);
                            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
        .store-dock-btn { margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:1px solid var(--s-border);
                          border-radius:10px; background:var(--s-surface); color:var(--s-ink); font:600 13px/1 var(--s-body-font,sans-serif); white-space:nowrap; cursor:pointer; }
        .store-dock-btn b { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
                            background:var(--s-primary); color:var(--s-on-primary,#fff); font-size:11px; }
        .store-dock-sort { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--s-ink-muted); white-space:nowrap; }
        .store-dock-sort select { height:36px; min-width:150px; padding:0 30px 0 12px; border:1px solid var(--s-border); border-radius:10px;
                                  background-color:var(--s-surface); color:var(--s-ink); font:600 13px/1 var(--s-body-font,sans-serif); cursor:pointer; }
        .store-dock-btn:hover, .store-dock-sort select:hover { border-color:var(--s-primary); }
        @media (prefers-reduced-motion:reduce) { .store-dock, html[data-store-dock] .store-dock { transition:none; transform:none; } }
        .t3-ticket { display:inline-flex; align-items:center; gap:10px; padding:5px 5px 5px 12px; border:1.5px dashed var(--s-primary);
                     border-radius:var(--s-card-radius,10px); background:var(--s-primary-light); font-size:13px; color:var(--s-ink-muted); }
        .t3-ticket b { color:var(--s-primary-text, var(--s-primary)); letter-spacing:.05em; font-weight:800; }
        .t3-ticket .t3-copy { height:28px; padding:0 12px; font-size:12px; }
        /* Simple (3): coupon ticket then Filters/Sort on the right of the title row, and one rule under the whole
           header (the toolbar's top border on other layouts). */
        .t3-shop-head { padding-bottom:16px !important; border-bottom:1px solid var(--s-border); }
        /* Luxe shrinks section titles to 17px, smaller than the 42px controls and the category names above it here;
           Simple's title keeps Luxe's light, spaced letters at a size that leads the row. */
        .buyer-storefront:has([data-vstyle="luxe"]) .store-section-label.t3-shop-head h2 { font-size:24px !important; }
        /* One text line: the title, count, ticket and the Filters/Sort labels share a baseline, so the 42px controls
           sit level with the title instead of the title riding at the top of the row. */
        .t3-shop-head .store-heading-titlerow { column-gap:14px; align-items:baseline; }
        .t3-shop-head .store-heading-filter-actions { position:static !important; margin-left:auto; }
        .t3-shop-head .t3-ticket { margin-left:auto; }
        .t3-shop-head .t3-ticket + .store-heading-filter-actions { margin-left:0; }
        .t3-coupon { display:none; }
        .hc-wrap[data-overflow="true"] .hc-arrow { display:flex; }
        .hc-wrap[data-at-start="true"] .hc-prev, .hc-wrap[data-at-end="true"] .hc-next { display:none; }
        /* Edge fade on whichever side has more, as a mask so it works on any background. */
        .hc-wrap[data-overflow="true"]:not([data-at-end="true"]) .hc-scroller { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent); }
        .hc-wrap[data-overflow="true"][data-at-end="true"]:not([data-at-start="true"]) .hc-scroller { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent); }
    }
    @media (min-width:1024px) {
        .hc-thumb { width:96px !important; height:96px !important; }
        .store-heading-tiles[data-shape="square"] .hc-thumb { border-radius:22px; }
        .hc-tile { width:110px !important; }
        .hc-label { max-width:110px !important; font-size:13px !important; }
        .hc-wrap--tiles { --hc-arrow-top:54px; }
    }
    .hc-tile { flex:0 0 auto; width:84px; display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--s-ink-muted); }
    .hc-thumb { width:76px; height:76px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
                background:var(--s-primary-light); color:var(--s-primary-text, var(--s-primary)); box-shadow:0 1px 4px rgba(0,0,0,.10); border:2px solid transparent;
                transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .store-heading-tiles[data-shape="square"] .hc-thumb { border-radius:18px; }
    /* "Shop All" (no one photo stands for everything): a 2×2 grid in a softly lit disc with a thin accent ring.
       The phone circles (.store-mobile-pills) draw the same thing inline. */
    .hc-thumb--all { background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--s-ink) 11%, var(--s-surface)), color-mix(in srgb, var(--s-ink) 4%, var(--s-surface)));
                     border-color:color-mix(in srgb, var(--s-primary) 60%, transparent); box-shadow:none; }
    .hc-thumb--all svg { width:30px; height:30px; }
    @media (min-width:1024px) { .hc-thumb--all svg { width:36px; height:36px; } }
    .hc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .hc-initial { font-size:24px; font-weight:700; }
    .hc-label { font-size:12.5px; font-weight:500; line-height:1.25; text-align:center; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hc-tile:hover .hc-thumb { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.14); }
    .hc-tile[aria-current="page"] .hc-thumb { border-color:var(--s-primary); box-shadow:0 0 0 3px var(--s-primary-light); }
    .hc-tile[aria-current="page"] .hc-label { color:var(--s-primary-text, var(--s-primary)); font-weight:700; }
    .hc-tile:focus-visible { outline:2px solid var(--s-primary); outline-offset:3px; border-radius:12px; }
    .store-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    /* ── Card tap feedback ───────────────────────────── */
    .sh-card-tap { transition:transform .12s ease; }
    .sh-card-tap:active { transform:scale(0.96); }
    /* ── T10 "Harvest" mobile — mirrors StoreDesktop.razor's .sd-t10-* classes under this file's
       own "sh-" naming convention (each file's stylesheet only covers the markup it itself
       renders). Reuses theme accent variables, not hardcoded colors. ── */
    /* Rectangular, not a pill — see StoreDesktop.razor's .sd-t10-stamp for the full rationale
       (dashed borders bunch unevenly around a tight pill radius; no icon since ✦ reads as a
       generic "AI/new" glyph rather than anything farm-specific). */
    .sh-t10-stamp {
        display: inline-block;
        align-self: flex-start; /* see .sd-t10-stamp in StoreDesktop.razor for why this matters */
        background: color-mix(in srgb, var(--s-primary) 12%, var(--s-surface));
        color: var(--s-text-accent, #c2410c);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 0.38rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 0.9rem;
    }
    .sh-t10-trust-row { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--s-border); }
    .sh-t10-trust-chip {
        display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; color: var(--s-ink);
        background: color-mix(in srgb, var(--s-primary) 8%, var(--s-surface));
        border: 1px solid var(--s-border); border-radius: 999px; padding: 0.35rem 0.75rem;
    }
    .sh-t10-crate { transition: box-shadow .15s ease; }
    .sh-t10-crate:active { box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--s-text-accent) 45%, transparent); }
    .sh-t10-fresh-tag {
        position: absolute; left: 7px; top: 7px; background: var(--s-surface); color: var(--s-text-accent, #c2410c);
        font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        padding: 2px 7px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    /* ── Variant chip spring on select ──────────────── */
    @keyframes cns-chip-spring { 0%{transform:scale(1);} 40%{transform:scale(1.13);} 70%{transform:scale(.95);} 100%{transform:scale(1);} }
    .store-chip-sel { animation:cns-chip-spring .28s cubic-bezier(.34,1.56,.64,1); }
    /* ── Desktop nav search overlay ─────────────────────── */
    .cns-search-overlay { position:fixed; inset:0; z-index:600; background:var(--s-surface); display:flex; flex-direction:column; overflow-y:auto; animation:cnsOvIn .22s cubic-bezier(.4,0,.2,1); }
    @keyframes cnsOvIn { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
    .cns-search-overlay-close { display:flex; justify-content:flex-end; padding:18px 32px 0; }
    .cns-search-overlay-close button { background:transparent; border:none; color:#9e9e9e; font-size:28px; line-height:1; cursor:pointer; transition:color .15s; padding:0; }
    .cns-search-overlay-close button:hover { color:#333; }
    .cns-search-overlay-body { max-width:680px; width:100%; margin:0 auto; padding:24px 24px 64px; }
    .cns-ov-input-wrap { border-bottom:2px solid var(--s-primary); display:flex; align-items:center; gap:12px; }
    .cns-ov-input-wrap svg { flex-shrink:0; color:var(--s-primary-text, var(--s-primary)); }
    .cns-ov-input-wrap input { flex:1; background:transparent; border:none; outline:none; color:var(--s-ink); font-size:max(16px,26px); font-weight:300; padding:10px 0; caret-color:var(--s-primary); }
    .cns-ov-photo-pick { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:12px;cursor:pointer;color:var(--s-primary-text, var(--s-primary)); }
    .cns-ov-photo-pick:hover { background:var(--s-primary-light); }
    .cns-ov-photo-pick input { display:none; }
    @media (max-width:640px) { .cns-ov-input-wrap input { font-size:20px; } .cns-search-overlay-body { padding:16px 16px 48px; } .cns-search-overlay-close { padding:14px 16px 0; } }
    .cns-ov-input-wrap input::placeholder { color:#bbb; }
    .cns-ov-results { margin-top:20px; display:flex; flex-direction:column; gap:2px; }
    .cns-ov-row { display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:12px; cursor:pointer; transition:background .12s; }
    .cns-ov-row:hover { background:#f5f5f4; }
    .cns-ov-img { width:52px; height:52px; object-fit:cover; border-radius:8px; flex-shrink:0; background:#f0ede9; }
    .cns-ov-info { flex:1; min-width:0; }
    .cns-ov-name { font-size:15px; font-weight:600; color:var(--s-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cns-ov-name strong { color:var(--s-primary-text, var(--s-primary)); font-weight:700; }
    .cns-ov-cat { font-size:11px; color:var(--s-ink-faint); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }
    .cns-ov-price { font-size:14px; font-weight:600; color:#44403c; white-space:nowrap; margin-left:auto; padding-left:12px; }
    .cns-ov-empty { margin-top:32px; font-size:15px; color:var(--s-ink-faint); }
    .cns-ov-hint { margin-top:36px; font-size:13px; color:#c4bcb6; text-align:center; }

    /* ── Search autocomplete dropdown ──────────────────── */
    /* Colours come from the theme: the old fixed near-white hover hid the light text of dark themes. */
    .cns-search-drop { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:150;
        background:var(--s-surface); border:1px solid var(--s-border); border-radius:14px;
        box-shadow:0 10px 36px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.05);
        overflow:hidden; max-height:380px; overflow-y:auto; }
    .cns-search-drop-row { display:flex; align-items:center; gap:11px; padding:9px 14px;
        text-decoration:none; color:inherit; border-bottom:1px solid var(--s-border);
        cursor:pointer; transition:background .1s; }
    .cns-search-drop-row:last-child { border-bottom:none; }
    .cns-search-drop-row:hover, .cns-search-drop-row:focus { background:color-mix(in srgb, var(--s-ink) 8%, var(--s-surface)); outline:none; }
    .cns-search-drop-row img { border-color:var(--s-border) !important; }
    /* ── Price range dual-thumb slider (used by the mobile filter sheet) ── */
    .cns-price-range { position:relative; height:26px; user-select:none; -webkit-user-select:none; }
    .cns-price-range input[type=range] {
        position:absolute; width:100%; top:50%; transform:translateY(-50%);
        -webkit-appearance:none; appearance:none;
        background:transparent; height:4px; pointer-events:none;
        outline:none; margin:0; padding:0; touch-action:none;
    }
    .cns-price-range input[type=range]::-webkit-slider-runnable-track { background:transparent; border:none; }
    .cns-price-range input[type=range]::-moz-range-track { background:transparent; border:none; }
    .cns-price-range input[type=range]::-webkit-slider-thumb {
        -webkit-appearance:none; appearance:none;
        width:15px; height:15px; border-radius:50%;
        background:var(--s-surface); border:2px solid var(--s-primary);
        box-shadow:0 1px 5px rgba(0,0,0,.16);
        cursor:grab; pointer-events:auto; position:relative; z-index:3;
        transition:box-shadow .15s, transform .1s;
    }
    .cns-price-range input[type=range]:active::-webkit-slider-thumb {
        cursor:grabbing; transform:scale(1.18);
        box-shadow:0 0 0 6px color-mix(in srgb, var(--s-primary) 12%, transparent), 0 1px 5px rgba(0,0,0,.16);
    }
    .cns-price-range input[type=range]::-moz-range-thumb {
        width:15px; height:15px; border-radius:50%; border:2px solid var(--s-primary);
        background:var(--s-surface); box-shadow:0 1px 5px rgba(0,0,0,.16);
        cursor:grab; pointer-events:auto;
    }
    /* ── Product card hover lift + category 3D tilt ─── */
    @media (hover: hover) {
        .store-prod-card { transition:transform .2s ease,box-shadow .2s ease; }
        .store-prod-card:hover { transform:translateY(-5px); box-shadow:0 10px 28px rgba(0,0,0,.13); }
        .sh-cat-tile { transition:transform .22s ease,box-shadow .22s ease; }
        .sh-cat-tile:hover { transform:perspective(600px) rotateX(3deg) rotateY(-3deg) translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.15); }
    }
    /* ── Product detail slide-up entrance ──────────────── */
    @keyframes sh-detail-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
    /* ── Cart FAB bump on item add ──────────────────────── */
    @keyframes cart-bump { 0%{transform:translateX(-50%) scale(1);} 40%{transform:translateX(-50%) scale(1.15);} 70%{transform:translateX(-50%) scale(.95);} 100%{transform:translateX(-50%) scale(1);} }
    .store-cart-fab.bumped { animation:cart-bump .35s ease; }
    /* ── Template 4 mobile/desktop switching ────────────── */
    .sh-t4-mob { display: block; }
    .sh-t4-desk { display: none; }
    .sh-t4-trust-desk { display: none; }
    /* T4 slide: slide-left-out / slide-right-in + fade (different from T1's plain fade) */
    .sh-t4-slide { position:absolute; inset:0; transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .45s ease; will-change:transform,opacity; }
    @keyframes t4-zoom-out-lg { from{transform:scale(1.25);} to{transform:scale(1.0);} }
    @keyframes t4-zoom-out-sm { from{transform:scale(1.15);} to{transform:scale(1.0);} }
    @keyframes t4-card-reveal { from{clip-path:inset(0px 0px 0px 0px round 0px);} to{clip-path:inset(8px 12px 8px 12px round 16px);} }
    @keyframes pet-hero-float { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-10px) rotate(1deg);} }
    .pet-hero-img { animation:pet-hero-float 3.6s ease-in-out infinite; transform-origin:center bottom; }
    /* ── Announce ticker — any number of slides, ~6s reading time each. No default animation on
       the base rule: a single slide (fallback, or one custom message) just sits at opacity:1; when
       there are 2+ messages, the markup injects a scoped style tag (AnnouncementHelper.BuildTickerCss)
       with the actual keyframes + per-slide animation-delay stagger, sized to the slide count. ── */
    .sh-ticker { overflow:hidden; background:var(--s-band); height:40px; position:relative; }
    .sh-ticker-slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); white-space:nowrap; }
    /* The seller's own custom announcement text routinely doesn't fit one line at this letter-spacing
       on a phone — was clipped by the container's overflow:hidden instead of wrapping. The trust-badge
       slide (icons + "Safe Checkout" etc.) stays single-line; it's short, fixed copy that always fits,
       and wrapping it would split an icon from its label. */
    .sh-ticker-slide-wrap { white-space:normal; line-height:1.35; text-align:center; padding:0 14px; }
    @media (min-width:1024px) { .sh-ticker { display:none !important; } }
    /* ── Template 2 hero: slow cinematic push-in on the photo/video — starts at 1.05, not 1.0,
         so the blurred-fallback case never drops below the scale margin that hides its blur edges ── */
    @keyframes t2-ken-burns { from{transform:scale(1.05) translate(0%,0%);} to{transform:scale(1.13) translate(-1.8%,-1.2%);} }
    .t2-ken-burns { animation:t2-ken-burns 20s ease-out forwards; }
    /* ── Template 2 mobile: scroll-down chevron ───────────────── */
    @keyframes t2-chevron-bounce { 0%,100%{transform:translateY(0);opacity:.7;} 50%{transform:translateY(6px);opacity:1;} }
    .t2-scroll-chevron { animation:t2-chevron-bounce 1.6s ease-in-out infinite; }
    /* ── Template 5: Editorial split hero ───────────────── */
    .sh-t5-hero { display:flex; min-height:260px; overflow:hidden; background:#faf9f7; }
    .sh-t5-text { flex:0 0 40%; display:flex; flex-direction:column; justify-content:center; padding:24px 14px 24px 16px; gap:8px; }
    .sh-t5-badge { font-size:10px; font-weight:600; color:var(--s-primary-text, var(--s-primary)); letter-spacing:.12em; text-transform:uppercase; line-height:1; }
    .sh-t5-headline { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:clamp(20px,5.5vw,26px); line-height:1.15; letter-spacing:-.015em; color:var(--s-text-accent,#1a1a1a); margin:0; }
    .sh-t5-lede { font-size:12.5px; line-height:1.5; color:#5b574c; margin:0 0 2px; max-width:220px; }
    .sh-t5-ctas { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .sh-t5-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--s-primary); color:var(--s-on-primary,#fff); border:0; border-radius:4px; padding:11px 16px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; width:fit-content; text-decoration:none; }
    .sh-t5-cta--ghost { background:transparent; color:var(--s-text-accent,#1a1a1a); border:1.5px solid var(--s-text-accent,#1a1a1a); }
    .sh-t5-stats { display:flex; gap:16px; align-items:baseline; padding-top:8px; margin-top:2px; border-top:1px solid #ede8e1; }
    .sh-t5-stat-num { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:16px; font-weight:600; line-height:1; color:var(--s-text-accent,#1a1a1a); }
    .sh-t5-stat-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#9a8c7e; margin-top:2px; font-weight:600; }
    .sh-t5-img { flex:0 0 60%; position:relative; overflow:hidden; }
    .sh-t5-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .sh-t5-img-fb {
        width:100%; height:100%; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
        background:
            repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 1px, transparent 7px),
            linear-gradient(160deg, var(--s-primary) 0%, var(--s-text-accent) 100%);
    }
    .sh-t5-img-fb-init { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:64px; font-weight:700; color:rgba(255,255,255,.25); line-height:1; user-select:none; }
    .sh-t5-strip { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px 16px 14px; background:#faf9f7; border-top:1px solid #ede8e1; border-bottom:1px solid #ede8e1; }
    .sh-t5-strip::-webkit-scrollbar { display:none; }
    .sh-t5-strip-item { flex-shrink:0; width:74px; height:74px; border-radius:10px; overflow:hidden; background:#f2f0ed; scroll-snap-align:start; cursor:pointer; }
    .sh-t5-strip-item img { width:100%; height:100%; object-fit:cover; display:block; }
    @media (min-width: 768px) {
        .sh-hero { padding: 40px 32px 32px; }
        .sh-hero-mob { display: none; }
        .sh-hero-split { display: grid; max-width: 1240px; margin: 0 auto; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch; }
        /* Template 2: full-screen cinematic hero on desktop too */
        .sh-hero--t2 { padding: 0; width: 100vw; margin-left: calc(50% - 50vw); }
        .sh-hero--t2 .sh-hero-mob { display: block; }
        .sh-hero--t2 .sh-hero-split { display: none; }
        /* Template 4: hide mobile hero, show desktop mosaic */
        .sh-t4-mob { display: none; }
        .sh-t4-desk { display: grid; grid-template-columns: 1fr 1.15fr; height: 65vh; min-height: 480px; max-height: 700px; overflow: hidden; background: var(--s-bg); border-bottom: 1px solid var(--s-border); }
        .sh-t4-trust-desk { display: block; }
        .sh-sec { padding: 60px 32px 32px; }
        .sh-sec-hd { margin-bottom: 32px; }
        .sh-view-all { display: inline-flex; align-items: center; gap: 6px; }
        .sh-mob-cta { display: none; }
        .sh-cats-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .sh-prods-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; overflow-x: visible; }
        .sh-prods-row > * { width: auto; max-width: none; }
        /* Tablet keeps one row of 4 (Classic's featured: two rows, 8); phones get up to 10. */
        .sh-prods-row--grid:not(.sh-prods-row--t1) > :nth-child(n+5) { display: none; }
        .sh-prods-row--grid.sh-prods-row--t1 > :nth-child(n+9) { display: none; }
        .sh-about { text-align: left; }
        .sh-about-avatar { margin: 0 0 22px; }
        .sh-about-divider { margin: 20px 0; }
        .sh-about-trust { margin: 0; }
        .sh-about-btns { justify-content: flex-start; }
        .sh-trust-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
        /* T5 tablet overrides (≥768px, still within sh-home which hides at 1024px) */
        .sh-t5-hero { min-height:380px; }
        .sh-t5-text { flex:0 0 50%; padding:48px 40px 48px 32px; gap:16px; }
        .sh-t5-headline { font-size:clamp(28px,4vw,40px); }
        .sh-t5-cta { padding:13px 24px; font-size:13px; }
        .sh-t5-img { flex:0 0 50%; border-radius:0 16px 16px 0; }
        .sh-t5-strip { padding:14px 32px 16px; gap:12px; }
        .sh-t5-strip-item { width:96px; height:96px; border-radius:12px; }
    }
    /* ── Template 4: Poppins bold font overrides — landing sections only ─ */
    .sh-home[data-template="4"] .sh-sec-hd h2 {
        font-family:var(--s-heading-font,'Poppins',system-ui,sans-serif) !important;
        font-weight:800 !important;
        letter-spacing:-.02em !important;
    }
    .sh-home[data-template="4"] .sh-sec-hd > div > div:nth-child(2) {
        font-family:var(--s-heading-font,'Poppins',system-ui,sans-serif) !important;
        font-weight:700 !important;
        letter-spacing:.08em !important;
    }
    .sh-home[data-template="4"] .sh-view-all {
        font-family:var(--s-heading-font,'Poppins',system-ui,sans-serif) !important;
        font-weight:600 !important;
        letter-spacing:.02em !important;
    }
    /* ── Template 5: Editorial font overrides — landing sections only ─ */
    /* Hides the coloured bar, recolours eyebrow to primary, lightens heading weight */
    .sh-home[data-template="5"] .sh-sec-hd > div > div:first-child {
        display:none !important;
    }
    .sh-home[data-template="5"] .sh-sec-hd > div > div:nth-child(2) {
        color:var(--s-primary-text, var(--s-primary)) !important;
        font-size:10px !important;
        letter-spacing:.12em !important;
        font-weight:600 !important;
    }
    .sh-home[data-template="5"] .sh-sec-hd > div > h2,
    .sh-home[data-template="5"] .sh-sec-hd h2 {
        font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif) !important;
        font-weight:400 !important;
        letter-spacing:-.015em !important;
    }
    .sh-home[data-template="5"] .sh-view-all {
        font-size:11px !important;
        letter-spacing:.06em !important;
        text-transform:uppercase !important;
        text-decoration:underline !important;
        text-underline-offset:3px !important;
        color:var(--s-primary-text, var(--s-primary)) !important;
    }
    /* ── Template 6: Heritage Boutique ─────────────────────────────── */
    /* Hero — portrait 3:4, like Kalamandir's collection banners */
    .sh-t6-hero { position:relative; overflow:hidden; aspect-ratio:3/4; max-height:72svh; background:#1a1a1a; touch-action:pan-y; }
    .sh-t6-hero img, .sh-t6-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .sh-t6-hero video { object-position:top center; }
    .sh-t6-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.08) 50%,transparent 100%); }
    .sh-t6-caption { position:absolute; bottom:0; left:0; right:0; padding:24px 20px 32px; z-index:10; text-align:center; }
    .sh-t6-badge { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:0 0 4px; display:block; }
    .sh-t6-title { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:clamp(26px,7vw,36px); line-height:1.05; color:#fff; margin:0 0 2px; font-weight:600; }
    .sh-t6-subtitle { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:clamp(13px,3.8vw,17px); line-height:1.2; color:rgba(255,255,255,.88); margin:0; font-style:italic; font-weight:400; }
    /* Decorative divider — ● — */
    .sh-t6-divider { display:flex; align-items:center; justify-content:center; gap:10px; margin:12px auto; }
    .sh-t6-divider-line { height:1px; width:36px; background:rgba(255,255,255,.5); flex-shrink:0; }
    .sh-t6-divider-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.65); flex-shrink:0; }
    /* Description under divider */
    .sh-t6-desc { font-size:12px; color:rgba(255,255,255,.8); margin:0 0 16px; line-height:1.5; }
    /* CTA — outlined transparent, like Kalamandir's SHOP NOW */
    .sh-t6-cta { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.8); padding:10px 28px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; font-family:inherit; }
    /* Uploaded banners may already include a logo and promotional copy. Show the entire image,
       then give the shopping action its own readable strip instead of covering the artwork. */
    .sh-t6-hero--banner { aspect-ratio:auto; max-height:none; background:var(--s-surface); }
    .sh-t6-hero--banner > img { position:relative; inset:auto; display:block; width:auto; max-width:100%; height:auto; max-height:72svh; margin-inline:auto; object-fit:contain; }
    .sh-t6-banner-action { padding:8px 16px 10px; background:var(--s-surface); border-bottom:1px solid var(--s-border); text-align:center; }
    .sh-t6-banner-action button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; width:min(100%,320px); padding:10px 20px; border:1px solid var(--s-text-accent); border-radius:var(--s-btn-radius,8px); background:var(--s-surface); color:var(--s-text-accent); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; }
    .sh-t6-sr-only { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    /* Dot indicators — Kalamandir style (solid circles, no pill) */
    .sh-t6-dots { display:flex; gap:7px; justify-content:center; padding:10px 0 6px; background:var(--s-surface); }
    .sh-t6-dot { width:8px; height:8px; border-radius:50%; background:#d1d5db; cursor:pointer; transition:background .2s; border:none; padding:0; flex-shrink:0; }
    .sh-t6-dot.active { background:var(--s-primary); }
    /* Vertical category stack — full-width portrait cards, stacked, like Kalamandir's "Shop By Collection" */
    .sh-t6-cat-hd { text-align:center; padding:28px 16px 16px; font-size:18px; font-weight:600; color:var(--s-ink); font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); margin:0; }
    .sh-t6-cat-stack { display:flex; flex-direction:column; gap:10px; padding:0 12px 36px; }
    .sh-t6-cat-card { position:relative; width:100%; overflow:hidden; cursor:pointer; border:none; padding:0; background:none; text-align:left; -webkit-appearance:none; touch-action:manipulation; }
    .sh-t6-cat-card img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; display:block; }
    .sh-t6-cat-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.06) 55%,transparent 100%); }
    .sh-t6-cat-caption { position:absolute; bottom:0; left:0; right:0; padding:20px 16px 28px; text-align:center; }
    .sh-t6-cat-rule { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
    .sh-t6-cat-rule-line { height:1px; width:32px; background:rgba(255,255,255,.7); flex-shrink:0; }
    .sh-t6-cat-name { font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; line-height:1; }
    .sh-t6-cat-btn { display:inline-block; margin-top:14px; padding:9px 26px; border:1.5px solid rgba(255,255,255,.8); border-radius:2px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:transparent; cursor:pointer; font-family:inherit; }
    /* New arrivals — single-line horizontal scroll */
    .sh-t6-sec-hd { text-align:center; padding:20px 16px 12px; }
    .sh-t6-sec-title { font-size:20px; font-weight:500; color:var(--s-ink); margin:0 0 4px; font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); letter-spacing:.01em; }
    .sh-t6-sec-rule { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
    .sh-t6-sec-rule-line { height:1px; width:28px; background:#d1a96a; }
    .sh-t6-sec-rule-dot { width:4px; height:4px; border-radius:50%; background:#d1a96a; }
    .sh-t6-arrivals { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
    .sh-t6-arrivals::-webkit-scrollbar { display:none; }
    .sh-t6-arr-card { flex-shrink:0; width:calc(50vw - 20px); max-width:210px; scroll-snap-align:start; display:flex; flex-direction:column; gap:4px; cursor:pointer; }
    /* Desktop: StoreDesktop.razor owns the ≥1024px render */
    @media (min-width:1024px) {
        .sh-t6-hero       { display:none !important; }
        .sh-t6-dots       { display:none !important; }
        .sh-t6-cat-hd     { display:none !important; }
        .sh-t6-cat-stack  { display:none !important; }
        .sh-t6-sec-hd     { display:none !important; }
        .sh-t6-arrivals { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; overflow:visible; padding:0 40px 40px; }
        .sh-t6-arr-card { width:auto; max-width:none; flex-shrink:unset; }
    }
    @media (min-width:1280px) {
        .sh-t6-arrivals { grid-template-columns:repeat(5,1fr); }
    }
    /* ── Template 7: Menu (food / grocery) ───────────────────────── */
    .sh-t7-hero { position:relative; overflow:hidden; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(135deg,var(--s-primary) 0%,var(--s-text-accent) 100%); }
    .sh-t7-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .sh-t7-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.05) 100%); }
    .sh-t7-content { position:relative; z-index:1; padding:22px 18px 20px; color:#fff; }
    .sh-t7-badge { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); }
    .sh-t7-title { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:clamp(24px,6vw,32px); line-height:1.1; margin:4px 0 6px; }
    .sh-t7-tagline { font-size:13px; line-height:1.5; color:rgba(255,255,255,.88); margin:0 0 12px; max-width:34ch; }
    .sh-t7-chiprow { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
    .sh-t7-chip { display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:600; }
    .sh-t7-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0; }
    .sh-t7-dots { position:absolute; left:0; right:0; bottom:8px; z-index:2; display:flex; gap:6px; justify-content:center; }
    .sh-t7-dot-btn { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0; cursor:pointer; flex-shrink:0; transition:background .2s, width .2s; }
    .sh-t7-dot-btn.active { background:var(--s-surface); width:16px; border-radius:3px; }
    /* T10 mobile hero only — top-right slide indicator. Uniform dashes (not sh-t7-dot-btn's
       grow-on-active dots) since the corner has room to spare; active/inactive read by
       brightness alone, no size change. */
    .sh-t10-dash-btn { width:14px; height:3px; border-radius:2px; background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer; flex-shrink:0; transition:background .2s; }
    .sh-t10-dash-btn.active { background:#fff; }
    .sh-t7-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--s-primary); color:var(--s-on-primary,#fff); border:0; border-radius:var(--s-btn-radius,12px); padding:12px 24px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; text-decoration:none; }
    /* T8: Fresh Market — hero sits above the always-visible search/category/grid chrome, so (unlike T7) it must render at every breakpoint. */
    .sh-t8-shophero { position:relative; overflow:hidden; min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(135deg,var(--s-primary) 0%,var(--s-text-accent) 100%); transition:max-height .32s ease, min-height .32s ease, opacity .22s ease; }
    .sh-t8-shophero img, .sh-t8-shophero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .sh-t8-shophero.cns-hero-collapsed { max-height:0; min-height:0 !important; opacity:0; pointer-events:none; }
    @media (min-width:1024px) {
        .sh-t8-shophero { min-height:280px; }
        .sh-t8-shophero .sh-t7-content { max-width:640px; margin:0 auto; padding:44px 40px; text-align:center; }
        .sh-t8-shophero .sh-t7-chiprow { justify-content:center; }
    }
    /* Hero prev/next — hidden on touch-sized viewports (swipe covers it there), shown from tablet
       up so mouse/trackpad users (including desktop dev testing, where touch events never fire)
       have an explicit way to advance slides instead of only dots + swipe. */
    .sh-t8-hero-arrow { display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:36px; height:36px; border-radius:50%; border:none; background:rgba(0,0,0,.35); color:#fff; align-items:center; justify-content:center; cursor:pointer; padding:0; }
    .sh-t8-hero-arrow:hover { background:rgba(0,0,0,.55); }
    .sh-t8-hero-arrow.prev { left:12px; }
    .sh-t8-hero-arrow.next { right:12px; }
    @media (min-width:640px) { .sh-t8-hero-arrow { display:flex; } }
    /* Veg / non-veg mark — standard Indian FSSAI square-and-dot */
    .sh-vnv-mark { width:12px; height:12px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
    .sh-vnv-mark.veg { border:1.5px solid #2f7d4f; }
    .sh-vnv-mark.veg::after { content:""; width:5px; height:5px; border-radius:50%; background:#2f7d4f; }
    .sh-vnv-mark.nonveg { border:1.5px solid #8a3b23; }
    .sh-vnv-mark.nonveg::after { content:""; width:5px; height:5px; border-radius:50%; background:#8a3b23; }
    /* Food/Meat menu-row list style — used instead of the standard card when List View is toggled for these store types. */
    .store-food-row { display:flex; gap:12px; padding:14px 4px; border-bottom:0.5px solid var(--s-border); cursor:pointer; background:var(--s-bg); }
    .store-food-row:last-child { border-bottom:none; }
    .store-food-row-thumb { width:78px; height:78px; border-radius:12px; flex:0 0 auto; overflow:hidden; background:var(--s-primary-light); }
    .store-food-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .store-food-row-thumb-fb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); }
    .store-food-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
    .store-food-row-top { display:flex; align-items:flex-start; gap:6px; }
    .store-food-row-name { font-size:14px; font-weight:700; color:var(--s-ink); line-height:1.3; }
    .store-food-row-desc { font-size:12.5px; color:var(--s-ink-muted); line-height:1.5; margin:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .store-food-row-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
    .store-food-row-price { font-size:14.5px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); }
    .store-food-row-mrp { font-size:11px; font-weight:400; color:#a8a094; text-decoration:line-through; margin-left:6px; }
    .store-food-row-add { font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--s-primary-text, var(--s-primary)); background:var(--s-primary-light); border:1.5px solid var(--s-primary); border-radius:var(--s-btn-radius,8px); padding:6px 16px; cursor:pointer; }
    .store-food-row-add:disabled { opacity:.5; cursor:not-allowed; }
    .store-body[data-color-mode="dark"] .store-food-row-name { color:var(--s-dk-ink, #E0DBD6); }
    .store-body[data-color-mode="dark"] .store-food-row-desc { color:#B0AAA3; }
    .store-body[data-color-mode="dark"] .store-food-row-mrp  { color:var(--s-dk-faint, #7A7470); }
    .store-body[data-color-mode="dark"] .store-food-row { border-bottom-color:rgba(255,255,255,.1); }
    /* Studio → Product layout, phone "List" (every store type): the rows sit in one card, and the photo keeps the
       store's card shape (3:4, square…) at 72px wide instead of a cropped square. Tablets get two columns. */
    .store-pv-list { background:var(--s-surface); border:0.5px solid var(--s-border); border-radius:var(--s-card-radius,14px); overflow:hidden; }
    .store-pv-list .store-food-row { padding:12px; background:transparent; }
    .store-pv-list .store-food-row-thumb { width:72px; height:auto; background:var(--s-surface); border:0.5px solid var(--s-border); }
    /* Phone "Single": one card per row (.store-list-view also shows its Add to cart); tablets get two. */
    @media (min-width: 768px) {
        .store-pv-list, .store-list-view { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    }
    /* T8's standalone search bar + jump-bar render outside #store-topbar (see SearchBarFragment),
       so the ".store-topbar .store-topbar-inner { width:100% }" desktop rule no longer reaches
       them — restate it directly so they still stretch full width on desktop. */
    .store-search-filter-row, #t8-jumpbar { width: 100%; }
    /* T3 "Simple" cover banner (seller opt-in) — a rounded 5:2 card on every screen. */
    /* Slides sit in a native horizontal scroll-snap track (swipe on phones); App.razor's script
       auto-advances every 5s and syncs the dots. Each slide is a 5:2 frame: the photo contained
       (never cropped) over a blurred, scaled-up copy of itself, which only shows when a photo
       isn't 5:2 itself. */
    .t3-cover { position:relative; padding:12px 16px 4px; background:var(--s-bg); }
    .t3-cover-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:var(--s-card-radius,14px); }
    .t3-cover-track::-webkit-scrollbar { display:none; }
    .t3-cover-frame { position:relative; flex:0 0 100%; scroll-snap-align:start; overflow:hidden; aspect-ratio:5/2; background:var(--s-primary-light); }
    /* Cover slideshow (js/covershow.js): the photos stack in one frame instead of scrolling side by side. */
    .t3-cover-track[data-cns-cover] { display:block; position:relative; overflow:hidden; scroll-snap-type:none; }
    .t3-cover-track[data-cns-cover] > .t3-cover-frame ~ .t3-cover-frame { position:absolute; inset:0; }
    .t3-cover-bg { position:absolute; inset:-24px; width:calc(100% + 48px); height:calc(100% + 48px); object-fit:cover; filter:blur(22px) saturate(1.1); opacity:.85; }
    .t3-cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
    /* Dots overlay the photo's bottom-right corner on a small translucent pill, readable on any photo. */
    .t3-cover-dots { position:absolute; right:26px; bottom:14px; display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:10px; background:rgba(0,0,0,.28); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
    .t3-cover-dot { width:6px; height:6px; border-radius:3px; border:0; padding:0; background:rgba(255,255,255,.6); cursor:pointer; transition:width .25s ease, background .25s ease; }
    .t3-cover-dot[aria-current="true"] { width:16px; background:#fff; }
    /* Desktop: a centred 5:2 card up to 1400px wide (560px tall). It used to run edge to edge with
       its height capped, so on screens past 1400px a 5:2 banner sat in the middle with blurred
       smears of itself down both sides. The side padding centres the card; the strip itself is
       transparent because computers paint the page (.buyer-storefront / .store-main in app.css) in
       a colour of its own, not --s-bg. The dots sit inside the card's corner. */
    @media (min-width:1024px) {
        .t3-cover { padding:16px max(24px, calc((100% - 1400px) / 2)) 4px; background:transparent; }
        .t3-cover-dots { right:calc(max(24px, calc((100% - 1400px) / 2)) + 20px); bottom:22px; gap:6px; padding:6px 9px; }
        .t3-cover-dot { width:7px; height:7px; }
        .t3-cover-dot[aria-current="true"] { width:20px; }
        /* The rest of the page shares the banner's column (header row: inline padding on .store-desktop-header), so the
           breadcrumb, title, category row, toolbar and grid start and end where the banner does instead of at 20px. */
        .store-body[data-template="3"] > .store-main { padding-left:max(24px, calc((100% - 1400px) / 2)) !important; padding-right:max(24px, calc((100% - 1400px) / 2)) !important; }
        .store-topbar[data-template="3"] .store-dock { padding:0 max(24px, calc((100% - 1400px) / 2)); }
    }
    /* Products per row = 5 (Appearance Studio): wide computers only; 960–1279px keeps 4, tablets 3, phones 2. */
    @media (min-width:1280px) {
        .store-product-grid[data-cols="5"] { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:16px !important; }
    }
    /* Bottom menu on phones → Categories sheet (every layout). Slides over the page from the bottom. */
    .bb-backdrop { position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.45); }
    .bb-sheet { position:fixed; left:0; right:0; bottom:0; z-index:211; max-height:78vh; max-height:78dvh; display:flex; flex-direction:column;
                background:var(--s-surface); color:var(--s-ink); border-radius:20px 20px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.18);
                padding-bottom:env(safe-area-inset-bottom, 0px); font-family:var(--s-body-font, inherit); }
    .bb-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; flex-shrink:0; }
    .bb-sheet-head b { font:600 17px/1.2 var(--s-heading-font, inherit); }
    .bb-close { width:32px; height:32px; border-radius:50%; border:0; background:var(--s-primary-light); color:var(--s-ink); font-size:14px; cursor:pointer; }
    .bb-sheet-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px 10px; padding:6px 16px 18px; overflow-y:auto; }
    .bb-cat { display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; padding:0; cursor:pointer; font:inherit; color:var(--s-ink); min-width:0; }
    .bb-cat-img { position:relative; width:100%; aspect-ratio:1; border-radius:var(--s-card-radius, 14px); overflow:hidden; background:var(--s-primary-light); display:grid; place-items:center; color:var(--s-primary-text, var(--s-primary)); }
    /* Pinned to the square: as a grid item, height:100% didn't hold and a portrait photo spilled past the tile
       (iPhone showed a gap above it and a cut-off head). Crop from the top so faces stay in. */
    .bb-cat-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; }
    .bb-cat-img b { font-size:26px; font-weight:700; }
    .bb-cat-name { font-size:12.5px; font-weight:600; line-height:1.25; text-align:center; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .bb-cat-count { font-size:11px; color:var(--s-ink-muted); margin-top:-3px; }
    @media (min-width:1024px) { .bb-backdrop, .bb-sheet { display:none; } }
    @media (max-width:1023px) { .bb-lift { bottom:calc(64px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom:14px !important; } }
    /* Footer bottom bar: room for the floating WhatsApp button where the bar's right end (Terms · Privacy when
       branding is hidden) would sit under it. */
    @media (min-width:768px) and (max-width:1495px) { .store-footer-bottom { padding-right:calc(2rem + 56px) !important; } }
    /* A slide that opens a category is a link; it must look exactly like a plain slide. */
    a.t3-cover-frame { display:block; color:inherit; -webkit-tap-highlight-color:transparent; }
    /* T3 coupon strip (Studio → Offers): under the cover banner, dashed "coupon" edge, Copy button.
       Computers: a plain centred line on the page background (no box, no band, no icon). */
    .t3-coupon { padding:10px 16px 2px; background:var(--s-bg); }
    .t3-coupon-inner { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border:1.5px dashed var(--s-primary); border-radius:var(--s-card-radius,12px); background:var(--s-primary-light); color:var(--s-primary-text, var(--s-primary)); }
    .t3-coupon-icon { flex:0 0 auto; }
    .t3-coupon-text { flex:1; min-width:0; font-size:12.5px; line-height:1.35; color:var(--s-ink); }
    .t3-coupon-use { color:var(--s-ink-muted); }
    .t3-coupon-code { font-weight:800; letter-spacing:.06em; color:var(--s-primary-text, var(--s-primary)); }
    .t3-coupon-terms { display:block; font-size:11.5px; color:var(--s-ink-muted); }
    .t3-copy { flex:0 0 auto; height:32px; padding:0 14px; border:0; border-radius:var(--s-btn-radius,8px); background:var(--s-primary); color:var(--s-on-primary,#fff); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
    /* T3 offer banners (Studio → Offers): full-width rows inside the product grid, same contained-photo-
       over-blur frame as the cover so text baked into the photo is never cut off. */
    .t3-offer { position:relative; display:block; grid-column:1 / -1; margin:6px 0; aspect-ratio:5/2; overflow:hidden; border-radius:var(--s-card-radius,14px); background:var(--s-primary-light); }
    .t3-offer-bg { position:absolute; inset:-24px; width:calc(100% + 48px); height:calc(100% + 48px); object-fit:cover; filter:blur(22px) saturate(1.1); opacity:.85; }
    .t3-offer-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
    @media (min-width:1024px) {
        .t3-coupon { padding:0; background:var(--s-bg); }
        .t3-coupon-inner { justify-content:center; gap:14px; padding:14px 20px 4px; border:0; border-radius:0; background:transparent; }
        .t3-coupon-icon { display:none; }
        .t3-coupon-text { flex:0 1 auto; font-size:13.5px; color:var(--s-ink-muted); }
        .t3-coupon-code { color:var(--s-ink); font-weight:700; }
        .t3-coupon-terms { display:inline; font-size:13px; margin-left:6px; }
        .t3-copy { height:30px; }
        .t3-offer { aspect-ratio:3/1; margin:10px 0; }
    }
    /* T3 phones: scroll-collapsing bar. App.razor's script sets html[data-t3-compact] once the bar
       has scrolled past its own height (bar goes fixed, .t3-bar-spacer holds its place) and
       html[data-t3-hide] while scrolling down (header row slides up, cart moves into the search
       row). Circles turn into slim text chips while compact; back at the top everything expands. */
    .t3-bar-cart { display:none; }
    @media (max-width:1023px) {
        .store-topbar:is([data-template="3"],[data-template="16"]) { transition:transform .22s ease; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) { position:fixed !important; top:0; left:0; right:0; }
        html[data-t3-compact] .t3-bar-spacer { height:var(--t3-bar-h,0px); }
        html[data-t3-compact][data-t3-hide] .store-topbar:is([data-template="3"],[data-template="16"]) { transform:translateY(-56px); }
        /* Floating header: 56px card + 8px above + 6px below, else its bottom edge stays showing above the search. */
        html[data-t3-compact][data-t3-hide] .store-topbar:is([data-template="3"],[data-template="16"]):has(.select-phone-header--floating) { transform:translateY(-70px); }
        html[data-t3-compact][data-t3-hide] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-bar-cart { display:flex; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-pill-track { gap:8px !important; padding:7px 4px !important; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-pill { flex-direction:row !important; padding:6px 13px !important; border-radius:var(--s-chip-radius,20px) !important; background:#f5f5f5 !important; border:1px solid #e8e8e8 !important; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-pill > div { display:none !important; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-pill > span { font-size:12.5px !important; font-weight:600 !important; color:#3a3a3a !important; max-width:none !important; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-pill[data-active="true"] { background:var(--s-primary) !important; border-color:var(--s-primary) !important; }
        html[data-t3-compact] .store-topbar:is([data-template="3"],[data-template="16"]) .t3-pill[data-active="true"] > span { color:var(--s-on-primary,#fff) !important; }
    }
    /* Seller-selected phone header, Original style (Centered / Floating render SelectablePhoneHeader instead):
       store colour, and a menu button when an icon was moved off the bar. Same breakpoint as app.css's
       .store-mobile-header switch. */
    @media (max-width:767px) {
        .phone-head { --phone-head-ink:var(--s-ink); color:var(--phone-head-ink); }
        .phone-head--color { --phone-head-ink:var(--s-on-primary,#fff); background:var(--s-primary); }
        .phone-head-menu { width:36px;height:36px;padding:6px;border:0;background:transparent;color:var(--phone-head-ink);display:grid;place-items:center;cursor:pointer; }
        /* The brand keeps its left alignment next to that menu button. */
        .phone-head--classic > .phone-head-menu + div { flex:1; }
        .phone-head--color p, .phone-head--color .phone-head-account, .phone-head--color .phone-head-menu { color:var(--phone-head-ink) !important; }
        .phone-head--color .phone-head-badge { background:var(--s-on-primary,#fff) !important; color:var(--s-primary) !important; }
        .phone-head--color svg[stroke] { stroke:var(--phone-head-ink); }
        .phone-head--color .phone-head-wishlist svg[fill="none"] { fill:none; }
        .phone-head--color .phone-head-wishlist svg:not([fill="none"]) { fill:var(--phone-head-ink); }
        .phone-head--color .phone-head-account svg { color:var(--phone-head-ink) !important; }
    }
    /* Dark stores: the shared header paints --s-surface, which stays light; follow the dark mobile header instead. */
    .buyer-storefront:has([data-color-mode="dark"]) .phone-head-host .select-phone-header:not(.select-phone-header--color) { background:var(--s-dk-2,#111111) !important; color:var(--s-dk-ink,#E0DBD6) !important; }

    /* ── Marketplace (16) — built on Simple; these rules only touch .mk-* elements it alone renders.
       Computers: one 1360px content column (header, category menu, home blocks, grid, footer). ── */
    .mk-brand-name { font-family:var(--s-heading-font, Georgia, serif) !important; font-size:20px !important; font-weight:600 !important; letter-spacing:-.01em; }
    .mk-brand-tag { margin:2px 0 0; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--s-ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
    .mk-search input[type="search"] { height:46px; padding-right:116px !important; font-size:14px !important; }
    .mk-search-go { position:absolute; right:5px; top:50%; transform:translateY(-50%); height:36px; padding:0 18px; border:0; border-radius:8px; background:var(--s-primary); color:var(--s-on-primary,#fff); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
    .mk-catmenu { display:none; }
    .mk-filters { display:none; }
    .store-product-grid.mk-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px 10px !important; }
    .mk-toolbar { display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
    .mk-toolbar-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .mk-toolbar-title { margin:0; font-family:var(--s-body-font, inherit); font-size:18px; font-weight:800; color:var(--s-ink); line-height:1.2; }
    .mk-toolbar-count { font-size:14px; color:var(--s-ink-muted); }
    .mk-sort { display:none; }
    .mk-active { display:flex; flex-wrap:wrap; gap:6px; }
    .mk-active button { min-height:32px; padding:4px 12px; border:1px solid var(--s-border); border-radius:999px; background:var(--s-surface); font:inherit; font-size:13px; color:var(--s-ink); cursor:pointer; }
    .mk-active .mk-active-clear { border:0; background:none; color:var(--s-primary-text, var(--s-primary)); font-weight:700; }
    .mk-seo-desc { flex-basis:100%; margin:0; font-size:13px; color:var(--s-ink-muted); line-height:1.7; max-width:680px; }
    .mk-mrow { display:flex; align-items:center; height:48px; margin:0 -12px; background:var(--s-surface); border-top:1px solid var(--s-border); border-bottom:1px solid var(--s-border); }
    .mk-mrow-btn { position:relative; flex:1; height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--s-ink); cursor:pointer; }
    .mk-mrow-select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px; }
    .mk-mrow-sep { width:1px; height:24px; background:var(--s-border); }
    .mk-mrow-count { flex:1; text-align:center; font-size:13px; color:var(--s-ink-muted); }
    .mk-mrow-badge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--s-primary); color:var(--s-on-primary,#fff); font-size:11px; display:inline-grid; place-items:center; box-sizing:border-box; }
    @media (max-width:1023px) {
        .store-body.mk-body > .store-main { padding-bottom:16px !important; }
        .mk-brand-name { font-size:18px !important; }
        .mk-toolbar-title--root, .mk-toolbar-head .mk-toolbar-count { display:none; }
    }
    @media (min-width:1024px) {
        .mk-catmenu { display:flex; align-items:center; gap:2px; padding:0 max(24px, calc((100% - 1312px) / 2)); overflow-x:auto; scrollbar-width:none; box-sizing:border-box; background:var(--s-surface); }
        .mk-catmenu::-webkit-scrollbar { display:none; }
        .mk-catmenu-item { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border:0; border-bottom:2px solid transparent; background:none; font:inherit; font-size:14px; font-weight:500; color:var(--s-ink); cursor:pointer; white-space:nowrap; }
        .mk-catmenu-item:first-child { padding-left:0; font-weight:700; }
        .mk-catmenu-item:hover, .mk-catmenu-item.is-active { color:var(--s-primary-text, var(--s-primary)); border-bottom-color:var(--s-primary); }
        .mk-catmenu-offers { color:var(--s-primary-text, var(--s-primary)); font-weight:700; }
        .mk-catmenu-trust { margin-left:auto; padding-left:16px; display:flex; align-items:center; gap:18px; flex-shrink:0; font-size:13px; color:var(--s-ink-muted); }
        .mk-catmenu-trust span, .mk-catmenu-trust a { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
        .mk-catmenu-trust a:hover { color:var(--s-primary-text, var(--s-primary)); }

        .store-body.mk-body { max-width:1360px; margin:0 auto !important; padding:0 24px !important; gap:28px; box-sizing:border-box; }
        .store-body.mk-body > .store-main { padding:8px 0 64px !important; }
        .mk-filters { display:flex; flex-direction:column; gap:14px; width:240px; flex-shrink:0; align-self:flex-start; position:sticky; top:134px; max-height:calc(100vh - 150px); overflow-y:auto; scrollbar-width:thin; margin-top:8px; padding:18px; background:var(--s-surface); border:1px solid var(--s-border); border-radius:14px; box-sizing:border-box; }
        .mk-filters-head { display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:800; color:var(--s-ink); }
        .mk-filters-clear { border:0; background:none; padding:4px 0; font:inherit; font-size:13px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); cursor:pointer; }
        .mk-fgroup { display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid var(--s-border); }
        .mk-fgroup-title { margin-bottom:6px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--s-ink-muted); }
        .mk-fopt { display:flex; align-items:center; gap:10px; width:100%; min-height:34px; padding:4px 0; border:0; background:none; font:inherit; font-size:14px; color:var(--s-ink); text-align:left; cursor:pointer; }
        .mk-fopt:hover { color:var(--s-primary-text, var(--s-primary)); }
        .mk-fopt[aria-pressed="true"] { font-weight:700; }
        .mk-fcount { margin-left:auto; font-size:13px; font-weight:400; color:var(--s-ink-muted); }
        .mk-fradio, .mk-fcheck { width:18px; height:18px; flex-shrink:0; box-sizing:border-box; border:1.5px solid var(--s-border-warm, #cbbfb8); background:var(--s-surface); }
        .mk-fradio { border-radius:50%; }
        .mk-fcheck { border-radius:4px; }
        .mk-fopt[aria-pressed="true"] .mk-fradio { border:5px solid var(--s-primary); }
        .mk-fopt[aria-pressed="true"] .mk-fcheck { background:var(--s-primary); border-color:var(--s-primary); box-shadow:inset 0 0 0 3px var(--s-surface); }
        .mk-fchips { display:flex; flex-wrap:wrap; gap:6px; }
        .mk-fchip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:4px 12px; border:1.5px solid var(--s-border); border-radius:999px; background:var(--s-surface); font:inherit; font-size:13px; color:var(--s-ink); cursor:pointer; }
        .mk-fchip[aria-pressed="true"] { border-color:var(--s-primary); background:var(--s-primary-light); color:var(--s-primary-text, var(--s-primary)); font-weight:700; }
        .mk-fchip:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
        .mk-fswatch { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }

        .store-product-grid.mk-grid { grid-template-columns:repeat(var(--mk-cols,5),minmax(0,1fr)) !important; gap:26px 16px !important; }
        .mk-mrow { display:none; }
        .mk-toolbar { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--s-border); margin-bottom:18px; }
        .mk-toolbar-title { font-size:22px; }
        .mk-sort { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--s-ink-muted); }
        .mk-sort select { height:38px; padding:0 10px; border:1.5px solid var(--s-border); border-radius:8px; background:var(--s-surface); color:var(--s-ink); font:inherit; font-weight:700; cursor:pointer; }
        .mk-active { order:3; flex-basis:100%; }
    }
    /* ── Marketplace (16) product page (.mk-pdp on the detail overlay) ── */
    .mk-pdp, .mk-pdp #pdp-scroll-area { background:var(--s-bg) !important; }
    .mk-pdp .pdp-mob-bar button:first-child { background:var(--s-surface) !important; }
    .mk-pdp .pdp-mob-bc { display:none !important; }
    .mk-pdp-photo-btn { position:absolute; right:12px; z-index:3; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.94); color:#221418; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); }
    .mk-pdp-photo-btn--fav { top:12px; }
    .mk-pdp-photo-btn--share { top:64px; }
    .mk-pdp-photo-btn.is-on { color:var(--s-primary-text, var(--s-primary)); }
    .mk-pdp [data-zoomable] { height:auto !important; aspect-ratio:3/4; background:var(--s-primary-light) !important; }
    .mk-pdp .pdp-img-col { background:var(--s-primary-light) !important; }
    .mk-pdp .pdp-info-col { background:var(--s-surface); }
    .mk-pdp-eyebrow { display:inline-block; margin-bottom:4px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--s-primary-text, var(--s-primary)); text-decoration:none; }
    .mk-pdp .pdp-info-col h1 { font-family:var(--s-body-font, inherit) !important; font-weight:800 !important; font-size:21px !important; line-height:1.2 !important; letter-spacing:-.01em; }
    .mk-pdp-noreviews { display:block; margin:-2px 0 8px; padding:0; border:0; background:none; font:inherit; font-size:13px; color:var(--s-ink-muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
    .mk-pdp-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .mk-pdp-from { font-size:14px; font-weight:600; color:var(--s-ink-muted); }
    .mk-pdp-now { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--s-ink); }
    .mk-pdp-mrp { font-size:15px; color:var(--s-ink-muted); }
    .mk-pdp-off { font-size:15px; font-weight:800; color:#177245; }
    .mk-pdp-save { margin-top:3px; font-size:13px; font-weight:600; color:#177245; }
    .mk-pdp-coupon { display:flex; align-items:center; gap:10px; margin-top:12px; min-height:52px; padding:6px 6px 6px 12px; border-radius:10px; border:1.5px dashed var(--s-primary); background:var(--s-surface); background:color-mix(in srgb, var(--s-primary) 5%, var(--s-surface)); color:var(--s-primary-text, var(--s-primary)); box-sizing:border-box; }
    .mk-pdp-coupon-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; color:var(--s-ink); font-size:12px; line-height:1.35; }
    .mk-pdp-coupon-text b { font-size:14px; font-weight:800; letter-spacing:.06em; }
    .mk-pdp-coupon-text span { color:var(--s-ink-muted); }
    .mk-pdp-copy { flex-shrink:0; height:40px; min-width:64px; padding:0 12px; border:1.5px solid var(--s-primary); border-radius:8px; background:var(--s-surface); color:var(--s-primary-text, var(--s-primary)); font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
    .mk-pdp-facts { display:flex; flex-direction:column; margin-top:16px; border:1px solid var(--s-border); border-radius:12px; background:var(--s-surface); overflow:hidden; }
    .mk-pdp-fact { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--s-border); color:var(--s-ink); text-decoration:none; }
    .mk-pdp-fact:last-child { border-bottom:0; }
    .mk-pdp-fact > span { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
    .mk-pdp-fact b { font-size:14px; font-weight:700; }
    .mk-pdp-fact small { font-size:12px; color:var(--s-ink-muted); }
    .mk-pdp-fact i { font-style:normal; color:var(--s-ink-muted); }
    .mk-pdp-fact--wa svg { color:#15803d; }
    a.mk-pdp-fact:hover b { color:var(--s-primary-text, var(--s-primary)); }
    .mk-pdp-details { margin-top:18px; padding-top:16px; border-top:1px solid var(--s-border); display:flex; flex-direction:column; gap:8px; }
    .mk-pdp-details h2, .mk-pdp-h2 { margin:0; font-family:var(--s-body-font, inherit); font-size:16px; font-weight:800; color:var(--s-ink); }
    .mk-pdp-desc { margin:0; font-size:14px; line-height:1.65; color:var(--s-ink); white-space:pre-line; }
    .mk-pdp-desc.is-clamped { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
    .mk-pdp-more { align-self:flex-start; padding:2px 0; border:0; background:none; font:inherit; font-size:13px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); cursor:pointer; }
    .mk-pdp-table { margin:6px 0 0; display:grid; grid-template-columns:minmax(110px, 35%) minmax(0, 1fr); border-top:1px solid var(--s-border); font-size:13px; }
    .mk-pdp-table dt, .mk-pdp-table dd { margin:0; padding:9px 0; border-bottom:1px solid var(--s-border); }
    .mk-pdp-table dt { color:var(--s-ink-muted); padding-right:12px; }
    .mk-pdp-table dd { color:var(--s-ink); overflow-wrap:anywhere; }
    .mk-pdp-below { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
    .mk-pdp-box { background:var(--s-surface); }
    .mk-pdp-box > .mk-pdp-h2 { padding:16px 16px 0; }
    .mk-pdp-box > .mk-pdp-h2--faq { display:none; } /* phones: the FAQ row already says "Have questions?" */
    .mk-pdp-rel { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
    .mk-pdp-rel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 12px; }
    .mk-pdp-viewall { border:0; background:none; padding:6px 0; font:inherit; font-size:13px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); cursor:pointer; white-space:nowrap; }
    .mk-pdp-rel-grid { display:none; }
    .mk-pdp-rel-shelf { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:12px; scrollbar-width:none; padding:0 12px 4px; }
    .mk-pdp-rel-shelf::-webkit-scrollbar { display:none; }
    .mk-pdp-rel-item { flex:0 0 140px; min-width:0; scroll-snap-align:start; }
    @media (min-width:1024px) {
        /* While a Marketplace product page is open (html[data-mk-pdp], set by App.razor) the page behind is
           scroll-locked, which breaks the header's sticky positioning — pin it instead. */
        html[data-mk-pdp] #store-topbar { position:fixed !important; top:0 !important; left:0; right:0; transform:none !important; }
        .mk-pdp { top:var(--mk-top, 0px) !important; }
        .mk-pdp .pdp-desk-bc { position:static; padding:14px max(24px, calc((100% - 1312px) / 2)); background:transparent; border-bottom:0; }
        .mk-pdp .pdp-desk-bc-actions { display:none !important; }
        .mk-pdp .pdp-inner { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important; max-width:1360px !important; padding:0 24px !important; gap:0 48px !important; box-sizing:border-box; }
        .mk-pdp .pdp-img-col { top:16px !important; height:auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; gap:14px; overflow:visible !important; }
        .mk-pdp .pdp-carousel { height:auto !important; border-radius:14px; overflow:hidden; }
        .mk-pdp .pdp-img-col [data-zoomable] { height:auto !important; aspect-ratio:3/4; }
        .mk-pdp .pdp-img-col .w-full.bg-white[style], .mk-pdp .pdp-img-col .w-full.bg-black[style] { height:auto !important; aspect-ratio:3/4; }
        .mk-pdp .pdp-img-col .hidden { width:72px !important; padding:0 !important; gap:10px !important; background:transparent !important; border-right:0 !important; }
        .mk-pdp .pdp-img-col .hidden button { width:72px !important; height:96px !important; border-radius:8px !important; }
        .mk-pdp .pdp-info-col { padding:8px 0 24px !important; background:transparent; }
        .mk-pdp .pdp-info-col h1 { font-size:30px !important; line-height:1.15 !important; }
        .mk-pdp-eyebrow { font-size:12px; }
        .mk-pdp-noreviews { font-size:13px; margin-top:0; }
        .mk-pdp-now { font-size:34px; }
        .mk-pdp-mrp, .mk-pdp-off { font-size:18px; }
        .mk-pdp-save { font-size:14px; }
        .mk-pdp-coupon { padding:10px 12px 10px 14px; border-radius:12px; margin-top:16px; }
        .mk-pdp .pdp-desk-cta { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px !important; }
        .mk-pdp .pdp-desk-cta button { height:54px !important; font-size:16px !important; font-weight:800 !important; border-radius:10px !important; box-shadow:none !important; filter:none !important; }
        .mk-pdp .pdp-desk-cta button:first-child { background:var(--s-surface) !important; border:2px solid var(--s-primary) !important; }
        .mk-pdp-fact { padding:14px 16px; gap:14px; }
        .mk-pdp-details h2, .mk-pdp-h2 { font-size:18px; }
        .mk-pdp-desc { font-size:15px; }
        .mk-pdp-table { font-size:14px; }
        .mk-pdp-below { max-width:1360px; width:100%; margin:36px auto 0; padding:0 24px; box-sizing:border-box; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; align-items:start; }
        .mk-pdp-below--one { grid-template-columns:minmax(0, 1fr); }
        .mk-pdp-box { padding:22px; border:1px solid var(--s-border); border-radius:14px; }
        .mk-pdp-box > .mk-pdp-h2 { padding:0 0 4px; }
        .mk-pdp-box > .mk-pdp-h2--faq { display:block; }
        .mk-pdp-box .pdp-reviews { border-top:0 !important; padding:12px 0 !important; text-align:left !important; }
        .mk-pdp-box .pdp-reviews > div:first-child { justify-content:flex-start !important; }
        .mk-pdp-box .pdp-faq-desktop { border-top:0 !important; padding:8px 0 0 !important; }
        .mk-pdp-box .pdp-faq-desktop > p:first-child { display:none; }
        .mk-pdp-rel { max-width:1360px; width:100%; margin:40px auto 0; padding:0 24px; box-sizing:border-box; gap:14px; }
        .mk-pdp-rel-head { padding:0; }
        .mk-pdp-rel-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
        .mk-pdp-rel-shelf { display:none; }
        .mk-pdp-viewall { font-size:14px; }
    }
    /* T8: Fresh Market — menu list grouped by category, image on the right */
    .t8-row-imgright { flex-direction: row-reverse; }
    /* Themed border around each row card — the row's own tinted background otherwise blends
       into the surrounding page background with no visible edge. */
    .t8-menu-rows .store-food-row { border: 1px solid var(--s-border); border-radius: 12px; padding: 14px 12px; margin-bottom: 10px; }
    .t8-menu-rows .store-food-row:last-child { margin-bottom: 0; }
    .store-body[data-color-mode="dark"] .t8-menu-rows .store-food-row { border-color: rgba(255,255,255,.14); }
    /* T8 grid style — seller-selectable via Menu Layout in store settings (Seller.T8GridStyle) */
    .t8-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .t8-grid-card { border:1px solid var(--s-border); border-radius:14px; overflow:hidden; background:var(--s-bg); cursor:pointer; }
    .store-body[data-color-mode="dark"] .t8-grid-card { border-color: rgba(255,255,255,.14); }
    .t8-grid-card-img { position:relative; aspect-ratio:1/1; background:var(--s-primary-light); }
    .t8-grid-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .t8-grid-card-add { position:absolute; bottom:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; background:var(--s-primary); color:var(--s-on-primary,#fff); font-size:18px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.25); padding:0; }
    .t8-grid-card-add:disabled { opacity:.5; cursor:not-allowed; }
    /* Status badge — discount / low-stock / seller-set (incl. "Best Seller") / new-in-14-days, same
       priority order as the generic product-card badge elsewhere in the app. Image-overlay variant
       for grid/individual (prominent photos); inline variant for the default menu-row list, right
       after the product name, since a tiny 78px row thumbnail has no room for an overlay. */
    .t8-badge { position:absolute; top:8px; left:8px; z-index:2; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; letter-spacing:.01em; pointer-events:none; white-space:nowrap; }
    .t8-badge-inline { position:static; display:inline-block; font-size:9px; padding:2px 7px; margin-left:6px; vertical-align:middle; }
    .t8-grid-card-body { padding:8px 10px 10px; }
    .t8-grid-card-name { font-size:13px; font-weight:700; color:var(--s-ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .t8-grid-card-price { font-size:13px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); margin-top:3px; }
    .t8-grid-card-mrp { font-size:11px; font-weight:400; color:#a8a094; text-decoration:line-through; margin-left:5px; }
    .store-body[data-color-mode="dark"] .t8-grid-card-name { color:var(--s-dk-ink, #E0DBD6); }
    /* T8 individual style — large single-column full-bleed photo cards */
    .t8-menu-individual { display:flex; flex-direction:column; gap:16px; }
    .t8-individual-card { border:1px solid var(--s-border); border-radius:16px; overflow:hidden; background:var(--s-bg); cursor:pointer; }
    .store-body[data-color-mode="dark"] .t8-individual-card { border-color: rgba(255,255,255,.14); }
    .t8-individual-card-img { width:100%; aspect-ratio:4/3; background:var(--s-primary-light); }
    .t8-individual-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .t8-individual-card-body { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .t8-individual-card-name { font-size:15px; font-weight:700; color:var(--s-ink); }
    .t8-individual-card-price { font-size:14px; font-weight:700; color:var(--s-primary-text, var(--s-primary)); margin-top:2px; }
    .store-body[data-color-mode="dark"] .t8-individual-card-name { color:var(--s-dk-ink, #E0DBD6); }
    .t8-menu-section { padding-top: 6px; }
    /* Guarantees enough scroll room below the LAST section so tapping it in the jump-bar can
       always bring it flush under the sticky bars — without this, a short last section (e.g.
       just 1 product) runs out of page before it can scroll that far, so it stops short and the
       previous section is still showing under the sticky bar instead. */
    .t8-menu-section:last-of-type { padding-bottom: 60vh; }
    .t8-menu-section-title { font-family:var(--s-heading-font,'Fraunces','Playfair Display',Georgia,serif); font-size:1.1rem; font-weight:600; color:var(--s-ink); margin:0 0 4px; padding:0 2px; scroll-margin-top: 8px; }
    .store-body[data-color-mode="dark"] .t8-menu-section-title { color:var(--s-dk-ink, #E0DBD6); }
    /* "Menu at {Store}" heading — .store-section-label has a fade-up entrance animation (see
       storeFadeUp, desktop only) that can end up stuck at its low-opacity starting frame here:
       T8's hero auto-advances on a timer, and the resulting re-renders can retrigger the
       animation on this element before it settles, leaving it looking washed out instead of the
       intended #1C1917. Not worth fighting the animation for one heading — just skip it here. */
    .t8-section-label-static { animation: none !important; opacity: 1 !important; }
    /* ── T8 desktop (≥1024px): packaged-goods catalogs (Blinkit/Zepto/Licious) use a card grid on
       desktop, not a stretched single-column mobile list — reflow the existing row markup into
       one instead of duplicating it. Mobile markup/CSS above is untouched. ── */
    @media (min-width: 1024px) {
        .t8-menu-section:last-of-type { padding-bottom: 0; }
        .t8-menu-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
        .t8-menu-rows .store-food-row {
            flex-direction: column;
            padding: 0;
            margin-bottom: 0;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,.04);
            transition: box-shadow .2s ease, transform .2s ease;
        }
        .t8-menu-rows .store-food-row:hover { box-shadow: 0 8px 20px rgba(0,0,0,.09); transform: translateY(-2px); }
        .t8-menu-rows .store-food-row-thumb { width: 100%; height: 190px; border-radius: 0; }
        .t8-menu-rows .store-food-row-body { padding: 14px 16px 16px; gap: 6px; }
        .t8-menu-rows .store-food-row-name { font-size: 15px; }
        .t8-menu-rows .store-food-row-bottom { margin-top: 4px; }
        .t8-menu-section-title { font-size: 1.3rem; margin-bottom: 14px; }
    }
    /* Jump-bar active state — set by JS scroll-spy (no layout properties touched, so it's flicker-free at any scroll speed) */
    .t8-jump-btn.active .t8-jump-avatar { border-color: var(--s-primary); box-shadow: 0 0 0 3px var(--s-primary-light,#fef3e2); }
    .t8-jump-btn.active .t8-jump-label { color: var(--s-primary-text, var(--s-primary)); font-weight: 700; }
    @media (min-width:1024px) {
        .sh-t7-hero { display:none !important; }
    }
    /* ── Desktop Product Detail ──────────────────────────────── */
    .pdp-desk-bc { display:none; }
    /* Below 1024px: a slim "Home › Category" line above the product name instead of the desktop bar —
       the sticky back header already shows the name, so a second full-width bar would repeat it. */
    .pdp-mob-bc { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--s-ink-faint); margin-bottom:6px; }
    .pdp-mob-bc a, .pdp-mob-bc button { color:var(--s-ink-muted); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
    @media (min-width:1024px) {
        /* Hide mobile chrome */
        .pdp-mob-hd  { display:none !important; }
        .pdp-mob-bar { display:none !important; }
        .pdp-mob-bc  { display:none; }
        /* Desktop breadcrumb */
        .pdp-desk-bc { display:flex; align-items:center; gap:6px; padding:16px 48px; background:var(--s-surface); border-bottom:1px solid #f3f4f6; font-size:13px; color:var(--s-ink-faint); flex-shrink:0; position:sticky; top:0; z-index:10; }
        .pdp-desk-bc button { background:none; border:none; cursor:pointer; font-size:13px; color:var(--s-ink-muted); font-family:inherit; padding:0; }
        .pdp-desk-bc button:hover { color:var(--s-primary-text, var(--s-primary)); }
        .pdp-desk-bc-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
        .pdp-desk-bc-actions button { padding:8px; border-radius:50%; transition:background .15s; }
        .pdp-desk-bc-actions button:hover { background:#f3f4f6; }
        /* Two-column grid layout. minmax(0,1fr): a plain 1fr column grows to its widest unbreakable content (a row of
           order-option chips) and pushes the buy buttons off the screen. */
        .pdp-inner {
            display:grid !important;
            grid-template-columns:55% minmax(0,1fr) !important;
            max-width:1600px !important;
            margin:0 auto !important;
            padding:0 !important;
            gap:0 16px !important;
            align-items:start;
            width:100% !important;
        }
        /* Left: sticky image panel */
        .pdp-img-col {
            position:sticky !important;
            top:0 !important;
            height:100vh !important;
            width:100% !important;
            border-radius:0 !important;
            flex-direction:row !important;
            background:var(--s-surface) !important;
        }
        .pdp-carousel { height:100% !important; }
        .pdp-img-col [data-zoomable] { height:calc(100vh - 80px) !important; }
        .pdp-img-col [data-zoomable] img { object-fit:contain !important; }
        .pdp-img-col .w-full.bg-white[style],
        .pdp-img-col .w-full.bg-black[style] { height:calc(100vh - 80px) !important; }
        /* Vertical thumbnail column: always show on desktop */
        .pdp-img-col .hidden { display:flex !important; }
        /* Right: info panel scrolls with page */
        .pdp-info-col { padding:0 !important; overflow-y:visible !important; flex:unset !important; }
        .pdp-info-col .p-4 { padding:36px clamp(24px,4vw,72px) 60px 40px !important; }
        .pdp-info-col h3 { font-size:1.5rem !important; font-weight:600 !important; line-height:1.25 !important; }
        /* Desktop CTA: bigger, always visible */
        .pdp-desk-cta { display:flex !important; gap:12px !important; }
        .pdp-desk-cta button { height:44px !important; padding:0 20px !important; font-size:15px !important; letter-spacing:.01em !important; border-radius:var(--s-btn-radius,20px) !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important; }
        /* Related products: six recommendations in one complete desktop row */
        .pdp-related { padding:32px clamp(20px,3.2vw,48px) 40px !important; grid-column:1 / -1 !important; }
        .pdp-related-grid { display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:20px !important; overflow-x:visible !important; }
        .pdp-related-grid > div { flex-shrink:unset !important; width:auto !important; }
        /* Reviews inside right info column — compact for 45% column width */
        .pdp-reviews { padding:20px 0 12px !important; }
        .pdp-reviews > div:first-child { margin-bottom:10px !important; }
        .pdp-reviews > div:first-child > div:first-child > div:first-child { font-size:1.4rem !important; }
        .pdp-reviews > div:nth-child(n+5) { display:none !important; }
        /* Mobile trigger hidden; inline accordion shown */
        .faq-trigger { display:none !important; }
        .pdp-faq-desktop { display:block !important; padding:20px 0 24px !important; border-top:0.5px solid var(--s-border) !important; }
        /* Hide carousel dots on desktop — thumbnail column already serves as navigation */
        .pdp-img-col .absolute.bottom-0.left-0.right-0 { display:none !important; }
        /* Fill the remaining 80px gap in the sticky image column */
        .pdp-img-col [data-zoomable] { height:100vh !important; }
    }
    /* ── FAQ — mobile bottom sheet, desktop inline accordion ─── */
    .pdp-faq-desktop { display:none; }
    /* Variant chips always honour visual theme radius — mobile + desktop */
    .pdp-info-col button.rounded-full { border-radius:var(--s-chip-radius,20px) !important; }
    /* ── Mobile review section: compact + cap at 2 ──────── */
    @media (max-width:1023px) {
        .pdp-reviews > div:first-child > div:first-child > div:first-child { font-size:1.4rem; }
        .pdp-reviews > div:nth-child(n+4) { display:none; }
    }
    /* Omish Foods' custom story heading is short enough to remain one phrase on phones.
       Keep this narrow rollout out of every other storefront and all desktop layouts. */
    @media (max-width:480px) {
        .omish-story-title {
            font-size:clamp(.95rem,4.7vw,1.2rem) !important;
            letter-spacing:-.025em !important;
            white-space:nowrap;
        }
    }
    @keyframes faq-sheet-in  { from { transform:translateY(100%); } to { transform:translateY(0); } }
    @keyframes faq-sheet-out { from { transform:translateY(0); } to { transform:translateY(100%); } }
    .faq-sheet-backdrop { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.45); }
    .faq-sheet { position:fixed; bottom:0; left:0; right:0; z-index:201; background:var(--s-surface);
                 border-radius:20px 20px 0 0; max-height:82vh; display:flex; flex-direction:column;
                 animation:faq-sheet-in .32s cubic-bezier(.32,.72,0,1) both;
                 box-shadow:0 -4px 32px rgba(0,0,0,.15); }
    .faq-sheet-handle { width:36px; height:4px; border-radius:2px; background:var(--s-border); margin:12px auto 0; flex-shrink:0; }
    .faq-sheet-header { display:flex; align-items:center; justify-content:space-between;
                        padding:14px 20px 12px; border-bottom:.5px solid var(--s-border); flex-shrink:0; }
    .faq-sheet-title { font-size:16px; font-weight:700; color:var(--s-ink); margin:0; }
    .faq-sheet-close { width:30px; height:30px; border-radius:50%; background:var(--s-primary-light); border:none;
                       cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
    .faq-sheet-body { overflow-y:auto; flex:1; padding:0 20px 32px; -webkit-overflow-scrolling:touch; }
    /* FAQ trigger row in product detail */
    .faq-trigger { display:flex; align-items:center; justify-content:space-between;
                   padding:14px 16px; margin-top:16px; border-top:.5px solid var(--s-border); cursor:pointer;
                   background:var(--s-surface); -webkit-tap-highlight-color:transparent; }
    .faq-trigger:active { background:var(--s-bg); }
    /* Short video (SQL/272): "Watch video" on the product photo, and its viewer — full screen on a phone over a blurred
       copy of the poster, a lightbox on computers. The frame takes the video's own shape (--cv-r = width / height). */
    .cns-cv-pill { position:absolute; left:12px; z-index:5; min-height:40px; display:inline-flex; align-items:center; gap:8px;
                   padding:0 14px 0 5px; border:0; border-radius:999px; background:rgba(255,255,255,.95); color:#151515;
                   font:inherit; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); }
    .cns-cv-pill-ic { width:30px; height:30px; border-radius:50%; background:#151515; display:flex; align-items:center; justify-content:center; }
    .cns-cv-pill-ic svg { margin-left:2px; }
    .cns-cv-pill-len { font-weight:600; color:#525252; }
    .cns-cv { position:fixed; inset:0; z-index:200; background:#0b0b0d; color:#fff; overflow:hidden; overscroll-behavior:contain; outline:none; }
    .cns-cv-bg { position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover; filter:blur(30px) brightness(.38); pointer-events:none; }
    .cns-cv-close { position:absolute; top:calc(6px + env(safe-area-inset-top)); left:10px; z-index:3; width:44px; height:44px; border-radius:50%;
                    border:0; padding:0; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .cns-cv-stage { position:absolute; top:calc(56px + env(safe-area-inset-top)); left:0; right:0; bottom:0; display:flex; flex-direction:column; }
    .cns-cv-media { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
    .cns-cv-frame { --cv-avail:calc(100vh - 132px); position:relative; width:min(100%, calc(var(--cv-avail) * var(--cv-r, .5625))); max-height:100%; overflow:hidden; background:#000; }
    @supports (height:100dvh) {
        .cns-cv-frame { --cv-avail:calc(100dvh - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    }
    .cns-cv-frame video { display:block; width:100%; height:100%; object-fit:cover; cursor:pointer; }
    .cns-cv-mute { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
                   background:rgba(0,0,0,.5); font-size:12px; font-weight:600; pointer-events:none; }
    .cns-cv-bar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:28px 14px 6px 6px;
                  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); }
    .cns-cv-pp { width:44px; height:44px; flex-shrink:0; border:0; padding:0; border-radius:50%; background:transparent; color:#fff;
                 display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .cns-cv-ic-play { display:none; }
    .cns-cv.is-paused .cns-cv-ic-play { display:block; }
    .cns-cv.is-paused .cns-cv-ic-pause { display:none; }
    .cns-cv-track { flex:1; min-width:0; height:3px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden; }
    .cns-cv-fill { display:block; width:0; height:100%; background:#fff; }
    .cns-cv-time { flex-shrink:0; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
    .cns-cv-buy { flex-shrink:0; display:flex; align-items:center; gap:12px; min-height:76px; box-sizing:border-box;
                  padding:12px 16px max(12px, env(safe-area-inset-bottom)); }
    .cns-cv-buy img { width:42px; height:56px; border-radius:6px; object-fit:cover; flex-shrink:0; }
    .cns-cv-buy-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    .cns-cv-buy-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cns-cv-buy-price { font-size:15px; font-weight:800; }
    .cns-cv-cta { flex-shrink:0; min-height:44px; padding:0 16px; border:0; border-radius:var(--s-btn-radius,12px); background:var(--s-primary);
                  color:var(--s-on-primary,#fff); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
    .cns-cv-cta:disabled { opacity:.5; cursor:not-allowed; }
    @media (min-width:640px) {
        .cns-cv { background:rgba(10,10,12,.86); }
        .cns-cv-bg { display:none; }
        .cns-cv-close { top:20px; left:auto; right:24px; width:48px; height:48px; background:rgba(255,255,255,.14); }
        .cns-cv-stage { top:0; flex-direction:row; align-items:center; justify-content:center; gap:28px; padding:40px 96px 40px 24px; box-sizing:border-box; }
        .cns-cv-media { flex:0 1 auto; height:100%; }
        .cns-cv-frame { --cv-avail:calc(100vh - 80px); width:min(calc(100vw - 480px), calc(var(--cv-avail) * var(--cv-r, .5625)));
                        border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
        .cns-cv-buy { display:grid; grid-template-columns:48px minmax(0,1fr); align-self:flex-end; width:300px; min-height:0; padding:16px;
                      border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
        .cns-cv-buy img { width:48px; height:64px; }
        .cns-cv-buy-name { white-space:normal; line-height:1.35; }
        .cns-cv-buy-price { font-size:17px; }
        .cns-cv-cta { grid-column:1 / -1; }
    }