/* ═══ BUILD 2 · CLAY INSTEAD OF GLASS, SITE-WIDE — every page on the paper ground (html[data-paper]) ═══════════════════
   Owner, 8 Oct 2026: "apply clay instead of glass, not to completely remodel" · "bg waves are removed and instead add the
   paper cutout bg from cart to everywhere" · "keep festival out".
   So this file changes MATERIAL only. Every page keeps its layout, sections, sizes, copy and motion (the hero's characters,
   the bento drawings, the festival jhoomar, the coverflow); the waves are gone and the cart's own peeled paper
   (partials/sheet-bg.php, sheet.css) is the ground; every surface that was glass is now the cart's clay — a solid fill,
   one tinted outer shadow and two insets (a dark one rising from the bottom, a sheen on top). No backdrop-filter is left.
   Tokens are the cart's (clay-cart.css), so the two read as one material. */
html[data-paper] body.is-paper{
  --cl-clay:#F8FAFE;--cl-clay-2:#EEF2F9;--cl-well:#E6EBF4;
  --cl-sheet:0 28px 56px -30px rgb(20 37 79 / .42),0 6px 14px -8px rgb(20 37 79 / .14),inset 0 -8px 16px rgb(20 37 79 / .07),inset 0 7px 20px rgb(255 255 255 / .38);
  --cl-row:0 12px 22px -14px rgb(20 37 79 / .34),inset 0 -4px 8px rgb(20 37 79 / .07),inset 0 5px 10px rgb(255 255 255 / .38);
  --cl-tile:0 10px 18px -12px rgb(20 37 79 / .34),inset 0 -3px 6px rgb(20 37 79 / .06),inset 0 4px 8px rgb(255 255 255 / .38);
  --cl-btn:0 8px 16px -8px rgb(20 37 79 / .40),inset 0 -3px 6px rgb(20 37 79 / .10),inset 0 4px 8px rgb(255 255 255 / .38);
  --cl-amber:0 12px 22px -10px rgb(179 111 0 / .60),inset 0 -5px 9px rgb(140 80 0 / .30),inset 0 5px 12.5px rgb(255 255 255 / .2);
  --cl-green:0 12px 22px -10px rgb(20 90 50 / .6),inset 0 -5px 9px rgb(0 60 30 / .35),inset 0 5px 12.5px rgb(255 255 255 / .14);
  --cl-navy:0 10px 20px -8px rgb(20 37 79 / .55),inset 0 -4px 7px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .09);
  --cl-well-in:inset 0 3px 7px rgb(20 37 79 / .16),inset 0 -3px 8px rgb(255 255 255 / .36);
  --cl-spring:cubic-bezier(.34,1.4,.64,1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper{
  --cl-clay:#1B274C;--cl-clay-2:#223059;--cl-well:#0A1129;
  --cl-sheet:0 30px 60px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(210 222 255 / .10),inset 0 -8px 16px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --cl-row:0 14px 24px -12px rgb(0 0 0 / .70),0 0 0 1px rgb(210 222 255 / .09),inset 0 -4px 8px rgb(0 0 0 / .32),inset 0 4px 10px rgb(255 255 255 / .03);
  --cl-tile:0 12px 20px -12px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .08),inset 0 -3px 6px rgb(0 0 0 / .3),inset 0 4px 8px rgb(255 255 255 / .03);
  --cl-btn:0 8px 16px -6px rgb(0 0 0 / .65),0 0 0 1px rgb(210 222 255 / .12),inset 0 -3px 6px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .04);
  --cl-amber:0 12px 22px -8px rgb(0 0 0 / .70),inset 0 -5px 9px rgb(140 80 0 / .40),inset 0 5px 12.5px rgb(255 255 255 / .18);
  --cl-green:0 12px 22px -8px rgb(0 0 0 / .70),inset 0 -5px 9px rgb(0 50 25 / .45),inset 0 5px 12.5px rgb(255 255 255 / .12);
  --cl-navy:0 10px 20px -6px rgb(0 0 0 / .7),inset 0 -4px 7px rgb(0 0 0 / .45),inset 0 4px 8px rgb(255 255 255 / .06);
  --cl-well-in:inset 0 3px 8px rgb(0 0 0 / .65),inset 0 -3px 8px rgb(255 255 255 / .02)}}
:root[data-theme="dark"][data-paper] body.is-paper{
  --cl-clay:#1B274C;--cl-clay-2:#223059;--cl-well:#0A1129;
  --cl-sheet:0 30px 60px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(210 222 255 / .10),inset 0 -8px 16px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --cl-row:0 14px 24px -12px rgb(0 0 0 / .70),0 0 0 1px rgb(210 222 255 / .09),inset 0 -4px 8px rgb(0 0 0 / .32),inset 0 4px 10px rgb(255 255 255 / .03);
  --cl-tile:0 12px 20px -12px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .08),inset 0 -3px 6px rgb(0 0 0 / .3),inset 0 4px 8px rgb(255 255 255 / .03);
  --cl-btn:0 8px 16px -6px rgb(0 0 0 / .65),0 0 0 1px rgb(210 222 255 / .12),inset 0 -3px 6px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .04);
  --cl-amber:0 12px 22px -8px rgb(0 0 0 / .70),inset 0 -5px 9px rgb(140 80 0 / .40),inset 0 5px 12.5px rgb(255 255 255 / .18);
  --cl-green:0 12px 22px -8px rgb(0 0 0 / .70),inset 0 -5px 9px rgb(0 50 25 / .45),inset 0 5px 12.5px rgb(255 255 255 / .12);
  --cl-navy:0 10px 20px -6px rgb(0 0 0 / .7),inset 0 -4px 7px rgb(0 0 0 / .45),inset 0 4px 8px rgb(255 255 255 / .06);
  --cl-well-in:inset 0 3px 8px rgb(0 0 0 / .65),inset 0 -3px 8px rgb(255 255 255 / .02)}

/* ── the ground: the cart's paper, behind every page ── */
html[data-paper] body.stagepage{position:relative;background:var(--sh-liner) linear-gradient(160deg,rgb(255 255 255 / .5),transparent 40%,rgb(255 255 255 / .2) 70%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.stagepage{background:var(--sh-liner) linear-gradient(160deg,rgb(255 255 255 / .04),transparent 45%)}}
:root[data-theme="dark"][data-paper] body.stagepage{background:var(--sh-liner) linear-gradient(160deg,rgb(255 255 255 / .04),transparent 45%)}
html[data-paper] body:not([data-ground="festive"]) .stagebg{display:none}   /* build 5: the festive ground keeps its Diwali waves */
/* no glass anywhere on the paper */
html[data-paper] body *,html[data-paper] body *::before,html[data-paper] body *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ── the type the owner liked on the cart: Chubbo for headings, Amulya for text (both self-hosted, assets/fonts) ── */
html[data-paper] body.is-paper:not([data-ground="festive"]){font-family:var(--sh-ft)}
html[data-paper] body.is-paper:not([data-ground="festive"]) :is(h1,h2,.brand__name b):not(.product__title){font-family:var(--sh-fd);letter-spacing:-.01em}

/* ── SECTIONS AND CARDS: what was a glass pane is a clay slab. Same size, padding and radius as before; only the fill
   and the light change. The glass's own sheen and rim (its ::before/::after) go with it. ── */
html[data-paper] body.is-paper :is(.card,.notice,.info-row,.kpi,.ocard,.anav,.map-card,.talk__map,.talk__addr,.howpane,.howcta,.gcard,.prose,
  .legal__tocbox,.legal__contact,.legal__summary,.legal__body section,.cardrules,.dropzone,.auth__pitch,.glass,.filters,.shop__head,section.recs,
  .pdp .sheet,.pdp .below,.pdp__faq,.trust .wrap,.catx .section-head){
  background:var(--cl-clay)!important;background-image:none!important;border-color:transparent!important;box-shadow:var(--cl-row)!important}
html[data-paper] body.is-paper :is(.hero>.wrap,.pdp .sheet,section.recs,.shop__head,.cat-bento-wrap){box-shadow:var(--cl-sheet)!important}
html[data-paper] body.is-paper .hero>.wrap{background:var(--cl-clay)!important;background-image:none!important;border-color:transparent!important}
html[data-paper] body.is-paper :is(.card,.notice,.kpi,.ocard,.anav,.map-card,.talk__map,.talk__addr,.howpane,.howcta,.gcard,.filters,.shop__head,section.recs,
  .pdp .sheet,.pdp .below,.pdp__faq,.trust .wrap,.hero>.wrap,.product,.cat-cell)::after{opacity:0!important}

/* the product card: one press, so full clay — a tile's lighter shadow, because it repeats down a grid */
html[data-paper] body.is-paper .product{background:var(--cl-clay)!important;background-image:none!important;border-color:transparent!important;box-shadow:var(--cl-tile)!important}
/* the category bento: clay tiles keeping their own colour light */
html[data-paper] body.is-paper .cat-cell{background:var(--cl-clay)!important;border-color:transparent!important;box-shadow:var(--cl-row)!important}
html[data-paper] body.is-paper .cat-cell>.cat-cell__glow{display:block!important;background:radial-gradient(120% 85% at 50% 0%,color-mix(in srgb,var(--cat) 24%,transparent),transparent 70%)!important}

/* ── CONTROLS: full clay, as in the cart ── */
html[data-paper] body.is-paper :is(.iconbtn,.btn:not(.btn--primary):not(.btn--accent):not(.btn--wa),.product__fav,.shelf__arrow,.pdp .zoomb,.pdp .navb,.pdp .fav,.talk__ic,.zoombtn,.pagination a:not([aria-current]),.pagination span:not(.is-current):not([aria-current]),.chip,.pill){
  background:var(--cl-clay)!important;background-image:none!important;border-color:transparent!important;box-shadow:var(--cl-btn)!important}
html[data-paper] body.is-paper :is(.btn--primary,.pagination .is-current,.pagination [aria-current]){background:var(--sh-navy)!important;background-image:none!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--cl-navy)!important}
html[data-paper] body.is-paper :is(.btn--accent,.pdp .cta:not(.cta--wa):not(.cta--ghost):not(.cta--dark),.product .qstep__add,.product__add){background:var(--sh-amber)!important;background-image:none!important;color:#14254F!important;border-color:transparent!important;box-shadow:var(--cl-amber)!important}
html[data-paper] body.is-paper :is(.btn--wa,.pdp .cta--wa,.reach__ic){background:#1C7D4D!important;background-image:none!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--cl-green)!important}
html[data-paper] body.is-paper :is(.btn,.iconbtn,.product__fav,.shelf__arrow,.pdp .cta,.pdp .fav,.zoombtn){transition:transform .22s var(--cl-spring)}
html[data-paper] body.is-paper :is(.btn,.iconbtn,.product__fav,.shelf__arrow,.pdp .cta,.pdp .fav,.zoombtn):active{transform:translateY(1px) scale(.96);transition-duration:.09s}
html[data-paper] body.is-paper :is(.btn,.iconbtn,.product__fav,.shelf__arrow,.pdp .cta,.pdp .fav,.zoombtn)::before{opacity:0!important}
/* fields and the search: pressed in */
html[data-paper] body.is-paper :is(input.input,.input,.search input,select.input,textarea.input,.sort select){background:var(--cl-well)!important;background-image:none!important;border-color:transparent!important;box-shadow:var(--cl-well-in)!important}
html[data-paper] body.is-paper :is(input.input,.input,.search input):focus{box-shadow:var(--cl-well-in),0 0 0 2.5px var(--sh-amber)!important}
html[data-paper] body.is-paper .search button{background:var(--sh-navy)!important;color:#fff!important;box-shadow:var(--cl-navy)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper .search button{background:var(--sh-ink)!important;color:var(--sh-liner)!important}}
:root[data-theme="dark"][data-paper] body.is-paper .search button{background:var(--sh-ink)!important;color:var(--sh-liner)!important}

/* ── the shell: header on the paper, panels as paper, the order bar and footer as navy clay ── */
html[data-paper] body.is-paper :is(#siteHeader,.header){background:color-mix(in srgb,var(--sh-liner) 94%,transparent)!important;border-bottom:0!important}
html[data-paper] body.is-paper .siteheader::before{display:none!important}
html[data-paper] body.is-paper #siteHeader .brand img{box-shadow:var(--cl-btn)}
html[data-paper] body.is-paper :is(.drawer,.cpanel){background:var(--sh-liner)!important;background-image:none!important}
html[data-paper] body.is-paper .cartbar{background:var(--sh-navy)!important;background-image:none!important;box-shadow:var(--cl-navy)!important}
/* the cart bar parks while the receipt footer is on screen, as the floating buttons do (app.js, floating buttons) */
html[data-paper] body.is-paper .cartbar{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s}
html[data-paper] body.is-paper .cartbar.is-parked{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){html[data-paper] body.is-paper .cartbar{transition:opacity .15s}html[data-paper] body.is-paper .cartbar.is-parked{transform:none}}
html[data-paper] body.is-paper .footer{background:var(--sh-navy)!important;background-image:none!important;box-shadow:none!important;border-radius:32px 32px 0 0}
/* the floating buttons are clay, not glass (owner, 9 Oct: "on mobile the floating buttons are still glass"): they kept the
   glass engine's see-through fill (the green at 76%) and its half-clear rim, so the page showed through them. A solid fill
   now, no rim, the clay shading over it; the WhatsApp green is the deep one the white glyph reads on (4.2:1), and the bell is
   the shop's amber with its own amber shading instead of the green's */
html[data-paper] body.is-paper .fab{background:#1A8F47!important;border-color:transparent!important;color:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:var(--cl-green)!important}
html[data-paper] body.is-paper .fab:not(.fab--bell):hover{background:#167C3D!important}
html[data-paper] body.is-paper .fab--bell{background:#F5A524!important;color:#14254F!important;box-shadow:var(--cl-amber)!important}
html[data-paper] body.is-paper .fab--bell:hover{background:#E8961A!important}
@media (forced-colors:active){html[data-paper] body.is-paper :is(.card,.product,.cat-cell,.btn,.iconbtn,.input){border:1px solid CanvasText!important}}
/* a section that only holds cards is not a surface itself (the glass engine skipped these too: the cards are the material) */
html[data-paper] body.is-paper :is(.hubblock,section.recs):has(:is(.card,.product,.cat-cell,.gcard,.kpi,.ocard,.howpane,.talk__map)){background:none!important;box-shadow:none!important;border-color:transparent!important}
html[data-paper] body.is-paper :is(.hubblock,section.recs):has(:is(.card,.product,.cat-cell,.gcard,.kpi,.ocard,.howpane,.talk__map))::before,html[data-paper] body.is-paper :is(.hubblock,section.recs):has(:is(.card,.product,.cat-cell,.gcard,.kpi,.ocard,.howpane,.talk__map))::after,html[data-paper] body.is-paper .glass::after{opacity:0!important}
/* the festival arrivals keep their own festive colours; their buttons are clay in that maroon */
html[data-paper] body.is-paper .fa .btn:is(.fa__go,.fa__open):not(.btn--primary):not(.btn--accent):not(.btn--wa){background:var(--fa-go)!important;color:var(--fa-on-go)!important;
  box-shadow:0 12px 22px -10px rgb(122 20 38 / .55),inset 0 -4px 8px rgb(60 0 10 / .35),inset 0 4px 8px rgb(255 255 255 / .12)!important}

/* ── the product page: the buy box's parts in clay ── */
html[data-paper] body.is-paper .pdp .price{padding:18px 20px;border-radius:22px;border:0!important;background:var(--sh-amber-wash)!important;background-image:none!important;
  box-shadow:inset 0 -3px 6px rgb(180 110 0 / .16),inset 0 5px 10px rgb(255 255 255 / .28)!important}
html[data-paper] body.is-paper .pdp .price::before,html[data-paper] body.is-paper .pdp .price::after{display:none!important}
html[data-paper] body.is-paper .pdp .price b{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--sh-ink)!important;text-shadow:none!important;filter:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper .pdp .price{box-shadow:inset 0 -3px 6px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .03)!important}}
:root[data-theme="dark"][data-paper] body.is-paper .pdp .price{box-shadow:inset 0 -3px 6px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .03)!important}
html[data-paper] body.is-paper .pdp .moq{border:0!important;border-radius:20px;background:var(--cl-well)!important;box-shadow:var(--cl-well-in)!important}
html[data-paper] body.is-paper :is(.pdp .stepper,.qstep){gap:6px;padding:5px;border:0!important;border-radius:999px!important;background:var(--cl-well)!important;box-shadow:var(--cl-well-in)!important}
html[data-paper] body.is-paper :is(.pdp .stepper,.qstep) button{width:40px;height:40px;border:0!important;border-radius:50%!important;background:var(--cl-clay)!important;box-shadow:var(--cl-btn)!important;color:var(--sh-ink)}
html[data-paper] body.is-paper :is(.pdp .stepper,.qstep) input{background:none!important;border:0!important;box-shadow:none!important}
/* the favourite on the photo's corner */
html[data-paper] body.is-paper .pdp .pdp__favf{position:absolute;top:16px;right:16px;z-index:4;margin:0}
html[data-paper] body.is-paper .pdp .fav{border-radius:50%!important}
html[data-paper] body.is-paper .pdp .fav.is-on{color:#D2412A}
html[data-paper] body.is-paper :is(.pdp .cta--ghost,.pdp .cta--dark){background:var(--cl-clay)!important;background-image:none!important;color:var(--sh-ink)!important;border-color:transparent!important;box-shadow:var(--cl-btn)!important}
html[data-paper] body.is-paper .pdp .cta--dark{background:var(--sh-navy)!important;color:#fff!important;box-shadow:var(--cl-navy)!important}

/* ── shelves, round 2 (checked on New arrivals and Best sellers, 8 Oct) ──
   1. The card's MOQ / New / Low-stock chips were the glass site's surface-2 on a white tile: in light they had no edge
      at all and read as loose text. On clay they are small wells, the same pressed-in shape as the cart's fields;
      "New" keeps its amber, as an amber wash. */
html[data-paper] body.is-paper .product .badge{background:var(--cl-well)!important;border-color:transparent!important;color:var(--sh-ink)!important;box-shadow:var(--cl-well-in)!important}
html[data-paper] body.is-paper .product .badge--accent{background:var(--sh-amber-wash,#FDF0D2)!important;color:var(--sh-ink)!important}
html[data-paper] body.is-paper .product .badge--warn{background:var(--warn-bg)!important;color:var(--warn)!important}
/* 2. The shelf arrows kept the light theme's navy chevron in dark, navy on a navy clay disc: invisible. */
/*    (the glass site's own rule for these discs is html .stagepage :is(...):not(.gs-pane), 0-4-1, so this matches its shape) */
html[data-paper] body.is-paper :is(.shelf__arrow,.pdp .navb,.pdp .zoomb):not(.gs-pane){color:var(--sh-ink)!important}
/* 3. In the coverflow the photo is its own composited layer, and Chrome stops clipping such a layer to the card's
      rounded corner: its square corners showed past the curve. The photo takes the card's inner radius itself. */
html[data-paper] body.is-paper .product > .product__media{border-radius:23px 23px 0 0!important}
/* 4. The card's text half still carried the glass site's tinted pane (62% charcoal in dark), so in dark the tile read
      as a grey slab on navy clay. It lets the tile's own clay through. */
html[data-paper] body.is-paper .product > .product__body{background:transparent!important}

/* ── the slide-over cart: the clay cart's own material (build 1), not the sticker sheet's ──
   (owner, 8 Oct 2026: "make full website clay just like cart"). Lines are raised clay rows on a clay sheet, the
   picture and the stepper are pressed-in wells, the price is the cart's amber chip, and the slip is a clay sheet:
   no dashed cut line, no peel, no amber outline. Biscuit and Chiku stay. */
html[data-paper] body.is-paper #cartPanel .shp__lines{gap:8px;padding:12px;border-radius:28px;background:var(--cl-clay);box-shadow:var(--cl-sheet)}
html[data-paper] body.is-paper #cartPanel .shp__group{margin:4px 4px 0}
html[data-paper] body.is-paper #cartPanel .shp__group--fe{margin-top:12px;padding-top:0;border-top:0}
html[data-paper] body.is-paper #cartPanel .shp__row{padding:12px;border:0;border-radius:22px;background:var(--cl-clay);box-shadow:var(--cl-row)}
html[data-paper] body.is-paper #cartPanel .shp__pic{width:52px;height:52px;padding:4px;border-radius:14px;background:#fff;box-shadow:var(--cl-well-in)}
html[data-paper] body.is-paper #cartPanel .shp__pic :is(picture,img){border-radius:10px}
html[data-paper] body.is-paper #cartPanel .sh-step{gap:6px;padding:4px;border:0;background:var(--cl-well);box-shadow:var(--cl-well-in)}
html[data-paper] body.is-paper #cartPanel .sh-step button{width:36px;height:36px;border:0;background:var(--cl-clay);box-shadow:var(--cl-btn);transition:transform .22s var(--cl-spring)}
html[data-paper] body.is-paper #cartPanel .sh-step button:active{transform:translateY(1px) scale(.95);transition-duration:.09s}
html[data-paper] body.is-paper #cartPanel .shp__tot .sh-label,html[data-paper] body.is-paper #cartPanel .shp__row--fe .sh-label{padding:5px 10px;border:0;border-radius:12px;background:var(--sh-amber-wash);color:var(--sh-ink);box-shadow:var(--cl-price)}
html[data-paper] body.is-paper #cartPanel .shp__x{background:var(--cl-clay);box-shadow:var(--cl-btn);margin:0}
html[data-paper] body.is-paper #cartPanel .shp__slip.sh-sheet{border:0;border-radius:28px;background:var(--cl-clay);box-shadow:var(--cl-sheet)}
html[data-paper] body.is-paper #cartPanel :is(.shc__cut,.shc__peel,.shc__blade){opacity:0!important;visibility:hidden}
html[data-paper] body.is-paper #cartPanel .shc__msg,html[data-paper] body.is-paper #cartPanel .shc__slip.is-cut .shc__msg{padding:12px;border-radius:18px;background:var(--cl-well);box-shadow:var(--cl-well-in)}
html[data-paper] body.is-paper #cartPanel .shp__go .sh-btn{border:0;box-shadow:var(--cl-amber);transition:transform .22s var(--cl-spring)}
html[data-paper] body.is-paper #cartPanel .shp__go .sh-btn--quiet,html[data-paper] body.is-paper #cartPanel .shp__go .sh-btn--ink:not(.sh-btn--go){background:var(--cl-clay);color:var(--sh-ink);box-shadow:var(--cl-btn)}
html[data-paper] body.is-paper #cartPanel .shp__go .sh-btn--go{background:var(--cl-go,#2A9D63);color:#fff;box-shadow:var(--cl-green)}
html[data-paper] body.is-paper #cartPanel .shp__go .sh-btn:active{transform:translateY(1px) scale(.97);transition-duration:.09s}
@media (forced-colors:active){html[data-paper] body.is-paper #cartPanel :is(.shp__row,.shp__lines,.shp__slip,.sh-step button){border:1px solid CanvasText}}
html[data-paper] body.is-paper{--cl-price:inset 0 -2px 4px rgb(180 110 0 / .18),inset 0 4px 8px rgb(255 255 255 / .24);--cl-go:#2A9D63}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper{--cl-price:inset 0 -2px 4px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .03)}}
:root[data-theme="dark"][data-paper] body.is-paper{--cl-price:inset 0 -2px 4px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .03)}

/* ── THE HEADER IS THE CART'S HEADER (owner, 8 Oct 2026, on the build 2 screenshots: "Why the header still glass?").
   The paper pages now carry exactly the cart page's header: the navy top strip, the header on the paper, round clay
   buttons, a pressed-in search, the brand set as on the cart. Generated from sheet.css (body[data-ground="sheet"])
   and clay-cart.css (body.cl-cartpage), same values; !important because the glass header rules underneath carry it. ── */
html[data-paper] body.is-paper .topbar{background:var(--sh-navy)!important;color:rgb(255 255 255 / .82)!important;font-family:var(--sh-ft)!important}
html[data-paper] body.is-paper .topbar b{color:#fff!important}
html[data-paper] body.is-paper .topbar a{color:rgb(255 255 255 / .86)!important}
html[data-paper] body.is-paper .topbar a:hover{color:#fff!important}
html[data-paper] body.is-paper #siteHeader,html[data-paper] body.is-paper #siteHeader.is-stuck{background:color-mix(in srgb,var(--sh-liner) 92%,transparent)!important;border-bottom:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-paper] body.is-paper #siteHeader.is-stuck{box-shadow:0 1px 0 var(--sh-hair-2)!important}
html[data-paper] body.is-paper #siteHeader .brand img{box-shadow:0 0 0 3px var(--sh-border),var(--sh-flat)!important;background:#fff!important}
html[data-paper] body.is-paper #siteHeader .brand__name b{font-family:var(--sh-fd)!important;font-weight:700!important;font-size:var(--sh-t-1)!important;letter-spacing:-.01em!important;color:var(--sh-ink)!important}
html[data-paper] body.is-paper #siteHeader .brand__name span{font:600 var(--sh-t--1)/1.1 var(--sh-ft)!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--sh-ink-3)!important}
html[data-paper] body.is-paper #siteHeader .search input{min-height:48px!important;border:0!important;border-radius:var(--sh-r-pill)!important;background:var(--sh-sheet)!important;color:var(--sh-ink)!important;box-shadow:var(--sh-flat)!important;font:500 var(--sh-t-0)/1 var(--sh-ft)!important}
html[data-paper] body.is-paper #siteHeader .search input::placeholder{color:var(--sh-ink-3)!important}
html[data-paper] body.is-paper #siteHeader .search input:focus{box-shadow:0 0 0 2px var(--sh-amber),var(--sh-flat)!important}
html[data-paper] body.is-paper #siteHeader .search button{background:var(--sh-navy)!important;color:#fff!important}
html[data-paper] body.is-paper #siteHeader .iconbtn{min-width:48px!important;min-height:48px!important;border:0!important;border-radius:var(--sh-r-pill)!important;background:var(--sh-sheet)!important;color:var(--sh-ink)!important;box-shadow:0 0 0 3px var(--sh-border),var(--sh-flat)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn:hover{background:var(--sh-amber-wash)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn:has(.marq){padding-inline:14px 16px!important}
html[data-paper] body.is-paper #siteHeader .header__actions{gap:var(--sh-gap-stk-1)!important}
html[data-paper] body.is-paper #siteHeader .header__row{column-gap:var(--sh-gap-stk-1)!important}
@media (min-width:900px){html[data-paper] body.is-paper #siteHeader .header__actions{gap:var(--sh-gap-stk-2)!important}
html[data-paper] body.is-paper #siteHeader .header__row{column-gap:var(--sh-gap-stk-2)!important}
}
@media (max-width:420px){html[data-paper] body.is-paper #siteHeader .brand__name b{font-size:var(--sh-t-0)!important}
html[data-paper] body.is-paper #siteHeader .brand__name span{display:none!important}
}
html[data-paper] body.is-paper #siteHeader .iconbtn .count{background:var(--sh-amber)!important;color:#14254F!important;box-shadow:0 0 0 2.5px var(--sh-border)!important;font-family:var(--sh-ft)!important;font-weight:700!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper #siteHeader .search button{background:var(--sh-amber)!important;color:#14254F!important}
}
:root[data-theme="dark"][data-paper] body.is-paper #siteHeader .search button{background:var(--sh-amber)!important;color:#14254F!important}
@media (max-width:899px){html[data-paper] body.is-paper #siteHeader .header__row{column-gap:8px!important}
html[data-paper] body.is-paper #siteHeader .brand__name b{font-size:15px!important;letter-spacing:-.03em!important}
}
@media (max-width:339px){html[data-paper] body.is-paper #siteHeader .brand__name b{font-size:14px!important;font-weight:600!important}
}
@media (min-width:900px){html[data-paper] body.is-paper #siteHeader .brand{flex-shrink:0!important}
}
@media (min-width:900px) and (max-width:1099px){html[data-paper] body.is-paper #siteHeader .header__row{display:grid!important;gap:8px 12px!important;padding-block:var(--sp-2)!important}
html[data-paper] body.is-paper #siteHeader .header__row > .search{max-width:none!important}
}
@media (max-width:339px){html[data-paper] body.is-paper #siteHeader .search input::placeholder{font-size:14px!important}
}
html[data-paper] body.is-paper #siteHeader .iconbtn{background:var(--cl-clay)!important;box-shadow:var(--cl-btn)!important;transition:transform .22s var(--cl-spring)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn:hover{background:var(--cl-clay)!important;transform:translateY(-1px)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn:active{transform:translateY(1px) scale(.95)!important;transition-duration:.09s!important}
html[data-paper] body.is-paper #siteHeader .search input{background:var(--cl-well)!important;box-shadow:var(--cl-well-in)!important}
html[data-paper] body.is-paper #siteHeader .search input:focus{box-shadow:var(--cl-well-in),0 0 0 2.5px var(--sh-amber)!important}
html[data-paper] body.is-paper #siteHeader .search button{box-shadow:var(--cl-navy)!important}
html[data-paper] body.is-paper #siteHeader .brand img{box-shadow:var(--cl-btn)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn .count{box-shadow:var(--cl-amber)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn{min-width:44px!important;min-height:44px!important;height:44px!important}
html[data-paper] body.is-paper #siteHeader .iconbtn:not(:has(.marq)){width:44px!important;height:44px!important;padding:0!important}
@media (min-width:1100px){html[data-paper] body.is-paper #siteHeader .brand img{width:48px!important;height:48px!important}
html[data-paper] body.is-paper #siteHeader .brand__name b{font-size:20px!important;line-height:1.05!important}
html[data-paper] body.is-paper #siteHeader .brand__name span{font-size:13px!important;line-height:1.2!important}
}
html[data-paper] body.is-paper #siteHeader .search input{min-height:48px!important;font-size:16px!important;font-weight:500!important}
html[data-paper] body.is-paper #siteHeader .search button{width:38px!important;height:38px!important;border-radius:999px!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper #siteHeader .search button{background:var(--sh-ink)!important;color:var(--sh-liner)!important}
}
:root[data-theme="dark"][data-paper] body.is-paper #siteHeader .search button{background:var(--sh-ink)!important;color:var(--sh-liner)!important}
@media (min-width:900px){html[data-paper] body.is-paper #siteHeader .header__row{padding-block:14px!important}
}

/* ── last glass sheens on the paper pages (build 2 scan of 23 pages, light/dark, phone/desktop): the search box's
   shine, the drawer's and the side panels' streak, the phone order bar's gloss, the sign-in nav button ── */
html[data-paper] body.is-paper :is(form.search,.drawer,.cpanel,.cartbar)::after,html[data-paper] body.is-paper .cartbar::before{background-image:none!important;opacity:0!important}
html[data-paper] body.is-paper .anav .navform button{background:var(--cl-clay)!important;background-image:none!important;color:var(--sh-ink)!important;border-color:transparent!important;box-shadow:var(--cl-btn)!important}
html[data-paper] body.is-paper .lost__search input{background:var(--cl-well)!important;box-shadow:var(--cl-well-in)!important;border:0!important}


/* a closed drawer or side panel waits just off screen; its shadow must not darken the page's edges while it is closed */
html[data-paper] body.is-paper:not(.is-drawer) .drawer,html[data-paper] body.is-paper:not(.is-cart) #cartPanel,html[data-paper] body.is-paper:not(.is-notif) #notifPanel{box-shadow:none!important;visibility:hidden}
html[data-paper] body.is-paper .drawer,html[data-paper] body.is-paper .cpanel{transition-property:transform,visibility!important}

/* ── THE HEADER IS A CLAY SLAB (owner, 8 Oct 2026: "header bar itself is still not clay" … "i wanted curve but proper",
   then "1st read clay morphism then corner radius properly").
   Done by the claymorphism rules: the header is its own inflated object floating on the paper (never a full-width strip
   with its ends cut by the screen). Solid clay fill, one outer shadow and two insets (dark one creeping up from the
   bottom, sheen on top), one light from above, navy-tinted shadows, a transparent 1px border for forced colours.
   THE CORNER: nested corners are concentric, outer radius = inner radius + padding. Every control in the slab is a
   48px pill (radius 24: the round buttons, the account pill and the search well, one height), held 15px from the
   slab's outer edge on every side (14px padding + the 1px border), so the radius is 24 + 15 = 39px. On a desktop the
   slab is 48 + 30 = 78px tall, so 39px makes it an exact stadium whose ends run parallel to the round buttons; on a
   phone (two rows) the same 39px stays concentric with the menu button, the cart and the search well in its corners. ── */
html[data-paper] body.is-paper .siteheader,body.cl-cartpage .siteheader{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}
html[data-paper] body.is-paper #siteHeader,html[data-paper] body.is-paper #siteHeader.is-stuck,body.cl-cartpage #siteHeader,body.cl-cartpage #siteHeader.is-stuck{
  width:min(var(--page,1200px),calc(100% - 32px))!important;max-width:none!important;margin:12px auto 0!important;
  background:var(--cl-clay)!important;background-image:none!important;border:1px solid transparent!important;border-radius:39px!important;
  box-shadow:0 18px 32px -16px rgb(20 37 79 / .38),0 4px 10px -6px rgb(20 37 79 / .16),inset 0 -6px 12px rgb(20 37 79 / .08),inset 0 6px 15px rgb(255 255 255 / .38)!important}
html[data-paper] body.is-paper #siteHeader .header__row,body.cl-cartpage #siteHeader .header__row{width:100%!important;max-width:none!important;margin:0!important;padding:14px!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(html[data-paper] body.is-paper,body.cl-cartpage) :is(#siteHeader,#siteHeader.is-stuck){
  box-shadow:0 20px 34px -14px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .10),inset 0 -6px 12px rgb(0 0 0 / .4),inset 0 6px 17.5px rgb(255 255 255 / .03)!important}}
:root[data-theme="dark"] :is(html[data-paper] body.is-paper,body.cl-cartpage) :is(#siteHeader,#siteHeader.is-stuck){
  box-shadow:0 20px 34px -14px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .10),inset 0 -6px 12px rgb(0 0 0 / .4),inset 0 6px 17.5px rgb(255 255 255 / .03)!important}
html[data-paper] body.is-paper #siteHeader .iconbtn,body.cl-cartpage #siteHeader .iconbtn{min-width:48px!important;min-height:48px!important}
html[data-paper] body.is-paper #siteHeader .iconbtn:not(:has(.marq)),body.cl-cartpage #siteHeader .iconbtn:not(:has(.marq)){width:48px!important;height:48px!important}
html[data-paper] body.is-paper #siteHeader .search input,body.cl-cartpage #siteHeader .search input{height:48px!important;min-height:48px!important}
@media (max-width:899px){html[data-paper] body.is-paper #siteHeader,body.cl-cartpage #siteHeader{width:calc(100% - 16px)!important;margin-top:8px!important}}
/* a phone: every control steps to the 44px minimum (radius 22) so the shop's name keeps its room; the radius follows,
   22 + 15 = 37px, still concentric with the corner controls */
@media (max-width:899px){
  html[data-paper] body.is-paper #siteHeader,body.cl-cartpage #siteHeader{border-radius:37px!important}
  html[data-paper] body.is-paper #siteHeader .iconbtn,body.cl-cartpage #siteHeader .iconbtn{min-width:44px!important;min-height:44px!important;height:44px!important}
  html[data-paper] body.is-paper #siteHeader .iconbtn:not(:has(.marq)),body.cl-cartpage #siteHeader .iconbtn:not(:has(.marq)){width:44px!important;height:44px!important}
  html[data-paper] body.is-paper #siteHeader .search input,body.cl-cartpage #siteHeader .search input{height:44px!important;min-height:44px!important}
  html[data-paper] body.is-paper #siteHeader .header__actions,body.cl-cartpage #siteHeader .header__actions{gap:6px!important}
  html[data-paper] body.is-paper #siteHeader .header__row,body.cl-cartpage #siteHeader .header__row{column-gap:6px!important}
}
@media (forced-colors:active){html[data-paper] body.is-paper #siteHeader,body.cl-cartpage #siteHeader{border-color:CanvasText!important}}

/* the navy strip's words stay light on every page (the old home rule painted them in the hero's ink) */
html[data-paper] body.is-paper .topbar,html[data-paper] body.is-paper .topbar :is(span,a,i,small,p,svg){color:rgb(255 255 255 / .82)!important}
html[data-paper] body.is-paper .topbar b{color:#fff!important}
/* the slab keeps its phone width when it is stuck to the top too */
@media (max-width:899px){html[data-paper] body.is-paper #siteHeader.is-stuck{width:calc(100% - 16px)!important}}

/* ── THE BENTO'S HUE (owner, 8 Oct 2026, with a screenshot of the glass bento in dark: "i want this hue on our clay
   bento … see how compact and elegant it is"). Each tile is lit from its top by its range's own colour, strong at
   the top edge and gone by the bottom, the glass bento's exact stops (34% at the top, 10% by the middle, nothing at the
   foot), on a calm ground so the hue is the only colour in the tile. In dark that ground is a deep, quiet navy rather
   than the raised clay navy, which is what made the hue read clean on the glass site. The words sit on it flat, no
   glow: the name white and firm, the count a step quieter. The clay stays in the edges and the shadow. ── */
html[data-paper] body.is-paper .cat-cell>.cat-cell__glow{display:block!important;inset:0!important;
  background:radial-gradient(135% 95% at 50% 2%,color-mix(in srgb,var(--cat) 34%,transparent) 0%,color-mix(in srgb,var(--cat) 10%,transparent) 55%,transparent 100%)!important}
html[data-paper] body.is-paper .cat-cell__ft :is(b,i){text-shadow:none!important}
html[data-paper] body.is-paper .cat-cell__ft b{font-weight:600!important;letter-spacing:0!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper .cat-cell{background:#141A2B!important}
  :root:not([data-theme="light"])[data-paper] body.is-paper .cat-cell>.cat-cell__glow{background:radial-gradient(135% 95% at 50% 2%,color-mix(in srgb,var(--cat) 42%,transparent) 0%,color-mix(in srgb,var(--cat) 12%,transparent) 55%,transparent 100%)!important}
  :root:not([data-theme="light"])[data-paper] body.is-paper .cat-cell__ft b{color:#F3F5FA!important}
  :root:not([data-theme="light"])[data-paper] body.is-paper .cat-cell__ft i{color:rgb(230 234 245 / .72)!important}}
:root[data-theme="dark"][data-paper] body.is-paper .cat-cell{background:#141A2B!important}
:root[data-theme="dark"][data-paper] body.is-paper .cat-cell>.cat-cell__glow{background:radial-gradient(135% 95% at 50% 2%,color-mix(in srgb,var(--cat) 42%,transparent) 0%,color-mix(in srgb,var(--cat) 12%,transparent) 55%,transparent 100%)!important}
:root[data-theme="dark"][data-paper] body.is-paper .cat-cell__ft b{color:#F3F5FA!important}
:root[data-theme="dark"][data-paper] body.is-paper .cat-cell__ft i{color:rgb(230 234 245 / .72)!important}


/* ── THE HEADER MAKES ROOM (owner, 9 Oct 2026, with screenshots: "why sign in button going crazy … shouldn't the
   search bar get a little shorter … up till certain width the search bar gets shorten, then marquee label").
   1. "Sign in" is words, not an icon: it is a pill that fits its words and never wraps (the round 48px rule for icon
      buttons had squeezed it into a circle).
   2. The search well gives way first: it shrinks a thousand times faster than anything beside it, down to 220px.
   3. Only then does the account pill give way, and from that point the shop's name scrolls in its marquee. Until
      then the whole name shows (up to 26 characters), never cut at 14 as before. ── */
html[data-paper] body.is-paper #siteHeader .iconbtn.iconbtn--text,body.cl-cartpage #siteHeader .iconbtn.iconbtn--text{width:auto!important;padding:0 18px!important;white-space:nowrap!important;font:600 15px/1 var(--sh-ft)!important;flex:none}
html[data-paper] body.is-paper #siteHeader .header__actions .btn,body.cl-cartpage #siteHeader .header__actions .btn{white-space:nowrap;flex:none}
@media (min-width:1100px){
  html[data-paper] body.is-paper #siteHeader .header__row > .search,body.cl-cartpage #siteHeader .header__row > .search{flex:1 1000 520px!important;min-width:220px!important;max-width:520px!important}
  html[data-paper] body.is-paper #siteHeader .header__row > .header__actions,body.cl-cartpage #siteHeader .header__row > .header__actions{flex:0 1 auto!important;min-width:0!important}
}
html[data-paper] body.is-paper #siteHeader .header__actions > .iconbtn:has(.marq),body.cl-cartpage #siteHeader .header__actions > .iconbtn:has(.marq){min-width:0!important;flex:0 1 auto;overflow:hidden}
html[data-paper] body.is-paper #siteHeader .header__actions > .iconbtn:has(.marq) > svg,body.cl-cartpage #siteHeader .header__actions > .iconbtn:has(.marq) > svg{flex:none}
html[data-paper] body.is-paper #siteHeader .marq,body.cl-cartpage #siteHeader .marq{display:block;min-width:0;max-width:26ch;overflow:hidden;white-space:nowrap;font:600 15px/1.2 var(--sh-ft)}
html[data-paper] body.is-paper #siteHeader .marq:not(.is-run) .marq__t,body.cl-cartpage #siteHeader .marq:not(.is-run) .marq__t{max-width:none}
@media (max-width:899px){html[data-paper] body.is-paper #siteHeader .marq,body.cl-cartpage #siteHeader .marq{max-width:clamp(8ch,calc(100vw - 470px),20ch)}}
html[data-paper] body.is-paper #siteHeader .search input,body.cl-cartpage #siteHeader .search input{text-overflow:ellipsis}
/* the home section eyebrow ("BROWSE") in dark: the deep-bronze light value lives in the home bundle, which loads after
   the dark value in core, so dark read bronze on navy (owner's screenshot, 9 Oct). Restated here, last, for dark. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper.is-home .section-head .eyebrow{color:#FADDB0!important}}
:root[data-theme="dark"][data-paper] body.is-paper.is-home .section-head .eyebrow{color:#FADDB0!important}

/* ── build 3 · THE APPROVED HOME'S RHYTHM AND FRAMES, from the "Home Final Check" artifact unchanged (owner, 9 Oct:
   "exactly same as approved artifact"). Every home section starts the same distance below the one before it, 96px on a
   desktop, 72 on a tablet, 56 on a phone; the sealed blocks (.hk-host) sit where the artifact's frames sat and carry the
   same 8px of shadow room. :where() keeps each rule's weight exactly as it was in the artifact. ── */
html[data-paper] body.is-paper{--g:96px}
@media (max-width:899px){html[data-paper] body.is-paper{--g:72px}}
@media (max-width:599px){html[data-paper] body.is-paper{--g:56px}}
:where(html[data-paper] body.is-home) .trust{padding-bottom:0!important}
:where(html[data-paper] body.is-home) main > .section{padding-top:var(--g)!important;padding-bottom:0!important}
:where(html[data-paper] body.is-home) main > .section > .wrap > :last-child{margin-bottom:0!important}
:where(html[data-paper] body.is-home) main > .section > .wrap > .section-head:first-child{margin-top:0!important}
:where(html[data-paper] body.is-home) main > .section.hkf + .section.hkf{padding-top:calc(var(--g) - 8px)!important}
:where(html[data-paper] body.is-home) main > .section > .wrap > .hubblock{padding-block:0!important}
.hkfoot{padding-top:calc(var(--g, 96px) - 8px)!important}
/* and every other page ends the way the home page does (build 3, "uniform"): the last section keeps no bottom padding of
   its own, so the space above the receipt is the one rhythm gap everywhere, not the rhythm plus 80-120px of leftover
   section padding (measured ink to receipt: home 96, guides was 209, about 193, contact 192, category 192) */
:where(html[data-paper] body.is-paper) main > .wrap > :is(.section,.shop,.legal):last-child{padding-bottom:0!important}
:where(html[data-paper] body.is-paper) main > .wrap > .section:last-child > :is(.hubblock,.two-col):last-child{padding-bottom:0!important}
:where(html[data-paper] body.is-paper) main .shop__main > .section:last-child{padding-bottom:0!important}
:where(html[data-paper] body.is-paper) main > .wrap > .lost:last-child{margin-bottom:0!important}
/* the hero slate never leaves one word alone on a line ("within 24 / hrs" at tablet width) */
html[data-paper] body.is-paper .board__slate li>span{text-wrap:pretty}
/* the receipt footer is the end of the page: nothing below it (owner, 9 Oct: "our new footer should be the end ... no more
   space at end on all pages"). The floating buttons step away while it is on screen (app.js, floating buttons). */
.hkfoot{padding-bottom:0}
/* and exactly as wide as the header: the footer frame is the header's width, with no side padding of its own */
.hkfoot>.wrap{padding-inline:0;width:calc(100% - 32px);margin-inline:auto}
@media (max-width:899px){.hkfoot>.wrap{width:calc(100% - 16px)}}
.hk-host{display:block;width:100%;border:0;background:transparent;color-scheme:normal}
/* register, PC and tablet · build 3, sticky (owner, 9 Oct: a jerk as the scroll started; "until both reaches at footer
   other (shorter) stays fixed and then footer comes"). The shop panel holds its column (the form keeps the other), sticky
   just under the stuck header and one size throughout, so the browser moves it with the page: it stays put while the
   form scrolls, and goes up with the page when the form ends; then the agreed footer comes, full size. It used to be
   fixed and moved by script a frame late, growing as the navy strip scrolled away. --hdr-stuck: scene-pages.js. */
@media (min-width:900px){
  .rp-fixed .auth--scene>.auth__pitch.rpitch,.rp-fixed .stagepage .auth--scene>.auth__pitch.rpitch{position:sticky;left:auto;top:var(--hdr-stuck,90px);width:auto;height:calc(100dvh - var(--hdr-stuck,90px));grid-column:1;grid-row:1;align-self:start}
}
/* register: the shop panel's heading and its status line were white, written for the old dark glass panel; on the clay
   panel they sat white on white in light mode (owner's screenshot, 9 Oct). They take the sheet's ink, which follows the theme */
html[data-paper] body.is-paper .auth--scene .rpitch>h2{color:var(--sh-ink)!important}
html[data-paper] body.is-paper .auth--scene .rpitch>.rstat{color:var(--sh-ink-2)!important}
/* register: "Three steps to wholesale prices" ran its words together (owner, 9 Oct): Chubbo's space is narrow, and at 14px
   with the heading's tightened tracking it nearly vanished. Normal tracking and a wider word space, as the approved mocks set
   their Chubbo headings */
/* ONE HEADING RULE (build 3, owner 9 Oct: "the agreed design principle makes these uniform"): every Chubbo heading on every
   shop page spaces its words the way the approved home mock does (its own h1,h2,h3{word-spacing:.12em}); Chubbo's space glyph
   is only .18em, and with the headings' tightened tracking words ran together. Small Chubbo (the register's step heading,
   14px) sets at normal tracking with a wider space, because small type needs more air, not less. The hero's chalk slate is lettering on a board, sized to its slate, and
   keeps its own spacing (with the rule it took a fifth line on a phone). */
:is(html[data-paper] body.is-paper:not([data-ground="festive"]),body.cl-cartpage) :is(h1,h2,h3):not(.product__title):not(.chalk *){word-spacing:.12em}
html[data-paper] body.is-paper .regsteps__h{letter-spacing:0!important;word-spacing:.22em!important}
/* ── THE CONTRAST SWEEP (build 3, owner 9 Oct: "make this things uniform") — every shop page measured from the pixels in
   both themes at PC, tablet and phone (tests/contrast.js); these are the places that fell short ── */
/* register: the card drop zone's label sat on the cutting mat's grid lines at 3.8:1; the mat a shade deeper, the label white */
html[data-paper] body.is-paper .cdk{--mat:#1F5243}
html[data-paper] body.is-paper .cdk-slot{color:#fff}
/* register: the slip's "Open it and stamp to agree" (light) 4.4:1 → 5.5:1 */
@media not (prefers-color-scheme:dark){html[data-paper]:not([data-theme="dark"]) body.is-paper .cslip__tabsub:not(.cslip__tabsub--done):not(.cslip__tabsub--doneopen){color:#7E3905}}
html[data-paper][data-theme="light"] body.is-paper .cslip__tabsub:not(.cslip__tabsub--done):not(.cslip__tabsub--doneopen){color:#7E3905}
/* the amber button's label in dark (4.4:1 on the darker foot of its clay shading): a deeper navy, 5.3:1 */
@media (prefers-color-scheme:dark){html[data-paper]:not([data-theme="light"]) body.is-paper :is(.btn--accent,.pdp .cta:not(.cta--wa):not(.cta--ghost):not(.cta--dark),.product .qstep__add,.product__add){color:#0B1530!important}}
html[data-paper][data-theme="dark"] body.is-paper :is(.btn--accent,.pdp .cta:not(.cta--wa):not(.cta--ghost):not(.cta--dark),.product .qstep__add,.product__add){color:#0B1530!important}

/* SPEED (9 Oct): the home page's lower sections are drawn only when they come near the screen. Below the hero sit
   about 6,000px of shop (the hub, the shelves, the talk-to-us counter); the browser was laying out and repainting all
   of it on every frame of Biscuit's scene. `auto` remembers each section's real height once it has been drawn, so the
   page never jumps. The festival shelf is left out: its lamp glow spills past its edges, which this would clip. */
body.is-home main#main > .section:not(.hh):not(.fa){content-visibility:auto;contain-intrinsic-size:auto 1380px}
/* first guesses at each section's height (measured 9 Oct), used only until it has been drawn once */
body.is-home main#main > .hkf:not(#contact){contain-intrinsic-size:auto 1730px}
body.is-home main#main > #contact{contain-intrinsic-size:auto 2215px}
@media (min-width:700px){body.is-home main#main > .hkf:not(#contact){contain-intrinsic-size:auto 1430px}body.is-home main#main > #contact{contain-intrinsic-size:auto 2320px}}
@media (min-width:1000px){body.is-home main#main > .section:not(.hh):not(.fa):not(.hkf){contain-intrinsic-size:auto 730px}body.is-home main#main > .hkf:not(#contact){contain-intrinsic-size:auto 1600px}body.is-home main#main > #contact{contain-intrinsic-size:auto 1800px}}
/* SPEED (9 Oct): each block's place is held at its usual height until its script has built it, so nothing below it
   (or the paper's sticker holes, which sit at a share of the page's height) moves when it arrives. Measured at
   360–1440 wide; the built block then takes its exact height. */
.hk-host:not(.is-built){display:block}
#hk-foot:not(.is-built){min-height:1268px}
.hkf #hk-shelves:not(.is-built){min-height:1700px}
.recs--hk #hk-shelves:not(.is-built){min-height:555px}
#hk-talk:not(.is-built){min-height:2222px}
@media (min-width:700px){#hk-foot:not(.is-built){min-height:718px}.hkf #hk-shelves:not(.is-built){min-height:1411px}.recs--hk #hk-shelves:not(.is-built){min-height:493px}#hk-talk:not(.is-built){min-height:2312px}}
@media (min-width:1000px){#hk-foot:not(.is-built){min-height:512px}.hkf #hk-shelves:not(.is-built){min-height:1560px}.recs--hk #hk-shelves:not(.is-built){min-height:478px}#hk-talk:not(.is-built){min-height:1760px}}
/* NO GLASS (owner, 9 Oct: "apart from the festival shop there should be no glass whatsoever on the site"). The last
   see-through surfaces were the floating lists drawn from --overlay (search suggestions, the combo lists, the cart
   panel, the drawer): 62–68% opaque, so the page showed through like frosted glass. On the paper pages they are solid clay. */
html[data-paper] body.is-paper{--overlay:var(--cl-clay)}
html[data-paper] body.is-paper :is(.sdrop,.combo__list,.cpanel,.drawer){background:var(--cl-clay)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* MATTE (owner, 9 Oct: "clay is matt finish"). No crisp white line or glint on any clay surface: the light from above is
   a soft, wide lightening only, the way a matte rounded thing catches it. The old controls' 1px lit rim (--gb-lit) goes too. */
html[data-paper] body.is-paper{--gb-lit:inset 0 3px 8px rgb(255 255 255 / .34),inset 0 -3px 8px rgb(20 37 79 / .05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper{--gb-lit:inset 0 3px 8px rgb(255 255 255 / .12),inset 0 -3px 8px rgb(0 0 0 / .18)}}
:root[data-theme="dark"][data-paper] body.is-paper{--gb-lit:inset 0 3px 8px rgb(255 255 255 / .12),inset 0 -3px 8px rgb(0 0 0 / .18)}
/* …and the older tokens that drew a 1px lit rim on top of a panel, a photo or a pill */
html[data-paper] body.is-paper{--glass-rim:rgb(255 255 255 / 0);--bevel-hi:rgb(255 255 255 / 0);
  --lift-2:0 0 0 1px rgba(16,24,40,.08),inset 0 3px 8px rgba(255,255,255,.28),0 10px 24px -8px rgba(16,24,40,.18),0 24px 44px -18px rgba(16,24,40,.20);
  --gb-acc-shadow:inset 0 3px 8px rgb(255 255 255 / .26),0 1px 2px rgb(120 70 0 / .14),0 10px 20px -10px rgb(170 100 0 / .45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper{--lift-2:0 0 0 1px rgba(212,224,255,.17),inset 0 3px 8px rgba(255,255,255,.05),0 4px 12px -7px rgba(202,220,255,.16)}}
:root[data-theme="dark"][data-paper] body.is-paper{--lift-2:0 0 0 1px rgba(212,224,255,.17),inset 0 3px 8px rgba(255,255,255,.05),0 4px 12px -7px rgba(202,220,255,.16)}
html[data-paper] body.is-paper.is-home main :is(.cta--wa,a[href*="wa.me"]){box-shadow:inset 0 3px 8px rgb(255 255 255 / .14)}
/* ONE GROUND AT THE TOP (owner, 9 Oct: "the header band has a different bg than the hero, and the topmost band is full
   width… wrong and bad ux"; then: "not the full-width band, but its width the same as the header, so nothing feels
   overflowing"). The navy strip is now a matte clay pill exactly as wide as the floating header under it (1200px, or the
   screen less the header's own side margins), on the page's own ground. On the home page that ground is the hero's sky:
   the band behind the strip and the header takes the sky's top colour, so the sky runs unbroken to the top of the screen.
   Once the header is stuck (scrolled), the band is clear again and the slab floats over the page. The strip keeps its
   36px, so the header still sticks exactly as it did. */
html[data-paper] body.is-paper .topbar,body[data-ground="sheet"] .topbar{background:transparent!important;padding-top:6px;height:36px;box-sizing:border-box}
html[data-paper] body.is-paper .topbar>*,body[data-ground="sheet"] .topbar>*{background:var(--sh-navy,#14254F);width:min(1200px,calc(100% - 32px));margin-inline:auto;min-height:30px!important;height:30px;
  border-radius:999px;padding-inline:18px;box-sizing:border-box;box-shadow:inset 0 -3px 6px rgb(0 0 0 / .28),inset 0 3px 8px rgb(255 255 255 / .08),0 6px 12px -8px rgb(20 37 79 / .5)}
@media (max-width:899px){html[data-paper] body.is-paper .topbar>*,body[data-ground="sheet"] .topbar>*{width:calc(100% - 16px);padding-inline:14px}}
@media (forced-colors:active){html[data-paper] body.is-paper .topbar>*,body[data-ground="sheet"] .topbar>*{border:1px solid CanvasText}}
html[data-paper] body.is-paper.is-home{--hh-sky:#B9D4EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper.is-home{--hh-sky:#0A1130}}
:root[data-theme="dark"][data-paper] body.is-paper.is-home{--hh-sky:#0A1130}
html[data-paper] body.is-paper.is-home .siteheader:has(#siteHeader:not(.is-stuck)){background:var(--hh-sky)!important}
/* the strip's little icons (van, phone, mail) were drawn in the page ink, near-black on the navy pill in light mode */
html[data-paper] body.is-paper .topbar svg *,body[data-ground="sheet"] .topbar svg *{stroke:rgb(255 255 255 / .82)!important}

/* ═══ FESTIVE & POOJA: CLAY, NOT GLASS (build 5) ══════════════════════════════════════════════════════════════════════
   Owner, 9 Oct: "we have only glass left on the festival shop… change it to clay and remove glass completely from the
   site… keep the wavy bg same as it is". The festive ground is a paper page now (layouts/app.php): the site's clay
   header, strip and drawer, no glass engine. Its own Diwali waves stay (the SVG drawing, moving as before), and so do
   its own type (Rozha One, Inter), colours and stall. Only the material changes: the see-through cream and plum panes
   become solid matte clay of the colour they read as over the waves, with a soft inner light and shade, no blur, no
   shine. */
html[data-paper] body[data-ground="festive"] .fest{--pane:#FFE6C2;--pane-2:#FFEDD3;--shine:rgb(255 255 255 / 0)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body[data-ground="festive"] .fest{--pane:#3F0F26;--pane-2:#4A1428}}
:root[data-theme="dark"][data-paper] body[data-ground="festive"] .fest{--pane:#3F0F26;--pane-2:#4A1428}
html[data-paper] body[data-ground="festive"] .fest :is(.fhero,.fbar,.fs-stall){-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 -8px 16px rgb(150 70 20 / .08),inset 0 5px 12px rgb(255 255 255 / .30),var(--fshadow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body[data-ground="festive"] .fest :is(.fhero,.fbar,.fs-stall){
  box-shadow:inset 0 -8px 16px rgb(0 0 0 / .30),inset 0 5px 12px rgb(255 220 170 / .06),var(--fshadow)}}
:root[data-theme="dark"][data-paper] body[data-ground="festive"] .fest :is(.fhero,.fbar,.fs-stall){box-shadow:inset 0 -8px 16px rgb(0 0 0 / .30),inset 0 5px 12px rgb(255 220 170 / .06),var(--fshadow)}
html[data-paper] body[data-ground="festive"] .fit__nav button{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-paper] body[data-ground="festive"] .fit::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(24 6 14 / .62)}
/* the festival's own big button: vermilion by day, marigold by night, as it was, in clay */
html[data-paper] body[data-ground="festive"] #main .btn--accent{background:#B3261E!important;background-image:none!important;color:#FFF7EA!important;border-color:transparent!important;
  box-shadow:0 12px 22px -10px rgb(120 20 10 / .55),inset 0 -5px 9px rgb(80 10 5 / .30),inset 0 5px 12px rgb(255 255 255 / .14)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body[data-ground="festive"] #main .btn--accent{background:#F5A21B!important;color:#2A0F06!important;
  box-shadow:0 12px 22px -8px rgb(0 0 0 / .7),inset 0 -5px 9px rgb(140 80 0 / .40),inset 0 5px 12px rgb(255 255 255 / .18)!important}}
:root[data-theme="dark"][data-paper] body[data-ground="festive"] #main .btn--accent{background:#F5A21B!important;color:#2A0F06!important;
  box-shadow:0 12px 22px -8px rgb(0 0 0 / .7),inset 0 -5px 9px rgb(140 80 0 / .40),inset 0 5px 12px rgb(255 255 255 / .18)!important}

/* ═══════════════ FESTIVAL · BUILD 5 (owner, 9 Oct 2026) ═══════════════
   "i like C" — the marigold ladi ground; the header bar in Diya cream with a medium toran under it ("lets go with
   medium"); the mithai box footer ("A"); "make sure you make everything clay"; "no dead space after footer is main and
   final rule". The ground's pieces are static clay images (assets/img/fest, tools/festive/ground.py) on the paper colour. */
html[data-paper] body[data-ground="festive"] .stagebg{display:none}
html[data-paper] body.stagepage[data-ground="festive"]{
  --fg-ground:linear-gradient(170deg,#FFF4E3 0%,#FFEBD3 55%,#FDE2CB 100%);
  --fg-toran:url(../img/fest/toran-light.svg);--fg-l:url(../img/fest/ladi-l-light.svg);--fg-r:url(../img/fest/ladi-r-light.svg);
  --fg-tw:240px;--fg-th:112px;--fg-sw:300px;--fg-top:70px;
  background:var(--fg-toran) 0 0/var(--fg-tw) var(--fg-th) repeat-x,var(--fg-ground)!important}
html[data-paper] body.stagepage[data-ground="festive"]::before,
html[data-paper] body.stagepage[data-ground="festive"]::after{content:"";position:absolute;top:var(--fg-top);bottom:0;width:var(--fg-sw);z-index:-1;pointer-events:none;background-repeat:repeat-y;background-size:var(--fg-sw) auto;
  opacity:1;mix-blend-mode:normal;animation:none;transform:none} /* body::after is the paper grain elsewhere (4.5%, overlay): here it is the right ladi */
html[data-paper] body.stagepage[data-ground="festive"]::before{left:0;background-image:var(--fg-l)}
html[data-paper] body.stagepage[data-ground="festive"]::after{left:auto;right:0;background-image:var(--fg-r);background-position:0 336px}
@media (max-width:699px){html[data-paper] body.stagepage[data-ground="festive"]{
  --fg-toran:url(../img/fest/toran-light-sm.svg);--fg-l:url(../img/fest/ladi-l-light-sm.svg);--fg-r:url(../img/fest/ladi-r-light-sm.svg);
  --fg-tw:150px;--fg-th:96px;--fg-sw:40px;--fg-top:70px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.stagepage[data-ground="festive"]{
  --fg-ground:linear-gradient(170deg,#2E1024 0%,#24102A 60%,#1C0D22 100%);
  --fg-toran:url(../img/fest/toran-dark.svg);--fg-l:url(../img/fest/ladi-l-dark.svg);--fg-r:url(../img/fest/ladi-r-dark.svg)}}
@media (prefers-color-scheme:dark) and (max-width:699px){:root:not([data-theme="light"])[data-paper] body.stagepage[data-ground="festive"]{
  --fg-toran:url(../img/fest/toran-dark-sm.svg);--fg-l:url(../img/fest/ladi-l-dark-sm.svg);--fg-r:url(../img/fest/ladi-r-dark-sm.svg)}}
:root[data-theme="dark"][data-paper] body.stagepage[data-ground="festive"]{
  --fg-ground:linear-gradient(170deg,#2E1024 0%,#24102A 60%,#1C0D22 100%);
  --fg-toran:url(../img/fest/toran-dark.svg);--fg-l:url(../img/fest/ladi-l-dark.svg);--fg-r:url(../img/fest/ladi-r-dark.svg)}
@media (max-width:699px){:root[data-theme="dark"][data-paper] body.stagepage[data-ground="festive"]{
  --fg-toran:url(../img/fest/toran-dark-sm.svg);--fg-l:url(../img/fest/ladi-l-dark-sm.svg);--fg-r:url(../img/fest/ladi-r-dark-sm.svg)}}

/* the header: Diya cream bar, maroon strip, the page's own red button; at night deep plum with a marigold button */
html[data-paper] body.is-paper[data-ground="festive"]{
  --fh2-strip:#7A1020;--fh2-strip-ink:rgb(255 240 220 / .88);--fh2-strip-b:#FFD27A;
  --fh2-bar:#FFF3DF;--fh2-name:#7A1020;--fh2-sub:#8E4A30;--fh2-ctl:#FFF8EC;--fh2-well:#F6E1C3;--fh2-well-ink:#5A1A10;
  --fh2-go:#7A1020;--fh2-go-ink:#FFF3DF;--fh2-cta:#B3261E;--fh2-cta-ink:#FFF7EA;--fh2-tint:150 60 30;
  --fh2-toran:url(../img/fest/hdr-toran-light.svg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-paper] body.is-paper[data-ground="festive"]{
  --fh2-strip:#2A0A18;--fh2-strip-ink:rgb(255 230 194 / .82);--fh2-strip-b:#F5A21B;
  --fh2-bar:#3F0F26;--fh2-name:#FFE6C2;--fh2-sub:#E7B08F;--fh2-ctl:#4C1630;--fh2-well:#2A0A18;--fh2-well-ink:#FFE6C2;
  --fh2-go:#F5A21B;--fh2-go-ink:#2A0F06;--fh2-cta:#F5A21B;--fh2-cta-ink:#2A0F06;--fh2-tint:0 0 0;
  --fh2-toran:url(../img/fest/hdr-toran-dark.svg)}}
:root[data-theme="dark"][data-paper] body.is-paper[data-ground="festive"]{
  --fh2-strip:#2A0A18;--fh2-strip-ink:rgb(255 230 194 / .82);--fh2-strip-b:#F5A21B;
  --fh2-bar:#3F0F26;--fh2-name:#FFE6C2;--fh2-sub:#E7B08F;--fh2-ctl:#4C1630;--fh2-well:#2A0A18;--fh2-well-ink:#FFE6C2;
  --fh2-go:#F5A21B;--fh2-go-ink:#2A0F06;--fh2-cta:#F5A21B;--fh2-cta-ink:#2A0F06;--fh2-tint:0 0 0;
  --fh2-toran:url(../img/fest/hdr-toran-dark.svg)}
html[data-paper] body.is-paper[data-ground="festive"] .topbar>*{background:var(--fh2-strip)!important;box-shadow:inset 0 -3px 6px rgb(0 0 0 / .18),0 6px 12px -8px rgb(var(--fh2-tint) / .4)!important}
html[data-paper] body.is-paper[data-ground="festive"] .topbar :is(span,a){color:var(--fh2-strip-ink)!important}
html[data-paper] body.is-paper[data-ground="festive"] .topbar b{color:var(--fh2-strip-b)!important}
html[data-paper] body.is-paper[data-ground="festive"] .topbar svg,html[data-paper] body.is-paper[data-ground="festive"] .topbar svg *{stroke:var(--fh2-strip-ink)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader,html[data-paper] body.is-paper[data-ground="festive"] #siteHeader.is-stuck{position:relative;overflow:visible!important;background:var(--fh2-bar)!important;
  box-shadow:0 18px 32px -16px rgb(var(--fh2-tint) / .42),0 4px 10px -6px rgb(var(--fh2-tint) / .2),inset 0 -4px 10px rgb(var(--fh2-tint) / .12),inset 0 3px 8px rgb(255 255 255 / .10)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .brand b{color:var(--fh2-name)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .brand__name span{color:var(--fh2-sub)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .iconbtn{background:var(--fh2-ctl)!important;color:var(--fh2-name)!important;box-shadow:0 8px 16px -8px rgb(var(--fh2-tint) / .45),inset 0 -3px 6px rgb(var(--fh2-tint) / .12)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .iconbtn svg{stroke:currentColor}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .search input{background:var(--fh2-well)!important;color:var(--fh2-well-ink)!important;box-shadow:inset 0 3px 7px rgb(var(--fh2-tint) / .22),inset 0 -2px 6px rgb(255 255 255 / .08)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .search input::placeholder{color:var(--fh2-well-ink);opacity:.72}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .search button{background:var(--fh2-go)!important;color:var(--fh2-go-ink)!important}
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader .btn--primary{background:var(--fh2-cta)!important;color:var(--fh2-cta-ink)!important;box-shadow:0 10px 20px -8px rgb(var(--fh2-tint) / .55),inset 0 -4px 7px rgb(0 0 0 / .22)!important}
/* the medium clay toran under the bar: whole swags only, it rides with the bar when it sticks */
html[data-paper] body.is-paper[data-ground="festive"] #siteHeader::after{content:"";position:absolute;left:44px;right:44px;bottom:-19px;height:26px;pointer-events:none;z-index:2;
  background:var(--fh2-toran) 0 0/168px 26px;background-repeat:round no-repeat}
@media (max-width:699px){html[data-paper] body.is-paper[data-ground="festive"] #siteHeader::after{left:26px;right:26px}}
html[data-paper] body.is-paper[data-ground="festive"] #main{padding-top:10px}
@media (forced-colors:active){html[data-paper] body.is-paper[data-ground="festive"] #siteHeader::after{display:none}}

/* the mithai box footer (partials/fest-foot.php): maroon lid, gold tray, four compartments, the box's seal sticker */
.mbox{--mb-lid:#7A1020;--mb-lid2:#8E1A28;--mb-foil:#FFD27A;--mb-tray:#E9A23B;--mb-tray2:#D4861E;--mb-btn:#7A1020;--mb-well:#FFF1DC;
  --mb-ink:#5A1A10;--mb-head:#7A1020;--mb-sub:#8E4A30;--mb-lab:#FFF6E8;--mb-labink:#6A3A2A;--mb-stamp:#B3261E;--mb-tint:150 40 20;
  --mb-seal-a:#F5A21B;--mb-seal-b:#D7861A;--mb-seal-ink:#7A1020;
  position:relative;width:min(1136px,calc(100% - 32px));margin:92px auto 0;padding:0 0 28px;font-family:Inter,"Inter Fallback",system-ui,sans-serif;color:var(--mb-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mbox{--mb-lid:#2A0A18;--mb-lid2:#3A0F22;--mb-foil:#F5B84A;--mb-tray:#6E4210;--mb-tray2:#553008;
  --mb-well:#3F0F26;--mb-ink:#FFE6C2;--mb-head:#FFD27A;--mb-sub:#E7B08F;--mb-lab:#3A1222;--mb-labink:#E7C3A8;--mb-stamp:#E7B08F;--mb-tint:0 0 0;
  --mb-seal-a:#C98420;--mb-seal-b:#9A5E10;--mb-seal-ink:#2A0A18}}
:root[data-theme="dark"] .mbox{--mb-lid:#2A0A18;--mb-lid2:#3A0F22;--mb-foil:#F5B84A;--mb-tray:#6E4210;--mb-tray2:#553008;
  --mb-well:#3F0F26;--mb-ink:#FFE6C2;--mb-head:#FFD27A;--mb-sub:#E7B08F;--mb-lab:#3A1222;--mb-labink:#E7C3A8;--mb-stamp:#E7B08F;--mb-tint:0 0 0;
  --mb-seal-a:#C98420;--mb-seal-b:#9A5E10;--mb-seal-ink:#2A0A18}
.mbox__lid{position:relative;height:168px;margin:0 26px -18px;padding:0 44px;border-radius:30px 30px 18px 18px;display:flex;align-items:center;gap:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--mb-lid2),var(--mb-lid));transform:perspective(1100px) rotateX(16deg);transform-origin:50% 100%;
  box-shadow:0 22px 34px -18px rgb(var(--mb-tint) / .55),inset 0 -8px 14px rgb(0 0 0 / .22),inset 0 5px 10px rgb(255 255 255 / .08)}
.mbox__lid::before{content:"";position:absolute;inset:12px;border-radius:22px 22px 12px 12px;border:2px dashed color-mix(in srgb,var(--mb-foil) 55%,transparent);pointer-events:none}
.mbox__ribbon{position:absolute;top:0;bottom:0;right:170px;width:46px;background:linear-gradient(90deg,#E8901A,#F5A21B 40%,#F7B13E 60%,#E8901A);box-shadow:inset 0 -6px 10px rgb(120 50 0 / .25)}
:root[data-theme="dark"] .mbox__ribbon{background:linear-gradient(90deg,#B8761C,#D88E1E 50%,#B8761C)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mbox__ribbon{background:linear-gradient(90deg,#B8761C,#D88E1E 50%,#B8761C)}}
.mbox__seal{position:absolute;right:140px;top:22px;width:106px;height:106px;filter:drop-shadow(0 8px 8px rgb(0 0 0 / .25))}
.mbox__seal-a{fill:var(--mb-seal-a)}.mbox__seal-b{fill:var(--mb-seal-b)}.mbox__seal-ink{stroke:var(--mb-seal-ink)}.mbox__seal-inkf{fill:var(--mb-seal-ink)}.mbox__seal-st{stroke:var(--mb-seal-a)}
.mbox__logo{flex:none;width:70px;height:70px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 4px var(--mb-foil),0 8px 14px -6px rgb(0 0 0 / .4)}
.mbox__logo img{display:block;width:70px;height:70px}
.mbox__brand{position:relative;display:flex;flex-direction:column;min-width:0}
.mbox__name{font-family:"Rozha One",serif;font-weight:400;font-size:46px;line-height:1;color:var(--mb-foil);white-space:nowrap}
.mbox__tag{margin-top:8px;font-size:15px;font-weight:600;color:color-mix(in srgb,var(--mb-foil) 70%,#fff)}
.mbox__tray{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:22px;border-radius:34px;
  background:linear-gradient(180deg,var(--mb-tray),var(--mb-tray2));
  box-shadow:0 26px 40px -20px rgb(var(--mb-tint) / .6),inset 0 -8px 16px rgb(0 0 0 / .22),inset 0 5px 10px rgb(255 255 255 / .10)}
.mbox__cell{position:relative;min-width:0;padding:16px 22px 18px;border-radius:24px;background:var(--mb-well);box-shadow:inset 0 6px 14px rgb(var(--mb-tint) / .28),inset 0 -3px 8px rgb(255 255 255 / .18)}
:root[data-theme="dark"] .mbox__cell{box-shadow:inset 0 6px 14px rgb(0 0 0 / .5),inset 0 -2px 6px rgb(255 255 255 / .05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mbox__cell{box-shadow:inset 0 6px 14px rgb(0 0 0 / .5),inset 0 -2px 6px rgb(255 255 255 / .05)}}
.mbox__hd{display:flex;align-items:center;gap:12px;margin:0 0 8px -4px}
.mbox__sweet{flex:none;width:72px;height:72px;filter:drop-shadow(0 8px 6px rgb(var(--mb-tint) / .28))}
.mbox__h{display:block;padding-top:4px;font-family:"Rozha One",serif;font-weight:400;font-size:27px;line-height:1;color:var(--mb-head)}
.mbox__cell ul{list-style:none;margin:0;padding:0}
.mbox__cell li{border-top:2px dotted color-mix(in srgb,var(--mb-sub) 35%,transparent)}
.mbox__cell li:first-child{border-top:0}
.mbox__cell li a{display:block;padding:9px 0;min-height:24px;font-size:16px;font-weight:600;color:var(--mb-ink);text-decoration:none}
.mbox__cell li a:hover{text-decoration:underline;text-underline-offset:3px}
.mbox__icons{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px}
.mbox__ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--mb-btn);color:#FFF4E3;
  box-shadow:0 8px 14px -8px rgb(var(--mb-tint) / .6),inset 0 -3px 6px rgb(0 0 0 / .25),inset 0 2px 4px rgb(255 255 255 / .12);transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
.mbox__ic:hover{transform:translateY(-2px)}
.mbox__ic--wa{background:#1F9D55}
.mbox__ic svg{width:22px;height:22px}
.mbox__line{margin:0;font-size:15px;font-weight:600;line-height:1.55}
.mbox__line a{color:var(--mb-ink);text-decoration:none}
.mbox__line small{display:block;font-size:13.5px;font-weight:500;color:var(--mb-sub)}
.mbox__line small a{color:var(--mb-sub)}
.mbox__label{position:relative;margin:18px 40px 0;padding:16px 150px 16px 26px;border-radius:18px;background:var(--mb-lab);color:var(--mb-labink);font-size:13.5px;line-height:1.6;
  box-shadow:0 12px 20px -14px rgb(var(--mb-tint) / .5);outline:2px dashed color-mix(in srgb,var(--mb-labink) 30%,transparent);outline-offset:-8px}
.mbox__label p{margin:0}
.mbox__label a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mbox__stamp{position:absolute;right:22px;top:50%;width:104px;height:104px;margin-top:-52px;transform:rotate(-10deg);fill:var(--mb-stamp);stroke:var(--mb-stamp)}
.mbox__stamp text{stroke:none}
.mbox__stamp circle{fill:none}
.mbox a:focus-visible{outline:2px solid var(--mb-head);outline-offset:3px;border-radius:6px}
.mbox__ic:focus-visible{outline:2px solid var(--mb-head);outline-offset:3px;border-radius:50%}
/* motion: the lid settles as the box comes into view; the sweets blink now and then */
@keyframes mbox-lid{from{transform:perspective(1100px) rotateX(38deg) translateY(10px)}to{transform:perspective(1100px) rotateX(16deg)}}
@keyframes mbox-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.mbox__eyes{transform-box:fill-box;transform-origin:center;animation:mbox-blink 6s infinite}
.mbox__cell:nth-child(2) .mbox__eyes{animation-delay:1.6s}.mbox__cell:nth-child(3) .mbox__eyes{animation-delay:3.1s}.mbox__cell:nth-child(4) .mbox__eyes{animation-delay:4.4s}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .mbox__lid{animation:mbox-lid linear both;animation-timeline:view();animation-range:entry 0% entry 90%}}}
@media (prefers-reduced-motion:reduce){.mbox__eyes{animation:none}.mbox__ic{transition:none}}
@media (forced-colors:active){.mbox__lid,.mbox__tray,.mbox__cell,.mbox__label{border:1px solid CanvasText}.mbox__ic{border:1px solid CanvasText}}
/* phone */
@media (max-width:699px){
  .mbox{margin-top:70px;padding-bottom:20px}
  .mbox__lid{height:auto;flex-direction:column;align-items:flex-start;gap:12px;margin:0 10px -16px;padding:26px 24px 34px;transform:perspective(700px) rotateX(10deg)}
  .mbox__ribbon{display:none}
  .mbox__seal{right:24px;top:18px;width:74px;height:74px}
  .mbox__logo,.mbox__logo img{width:54px;height:54px}
  .mbox__name{font-size:30px}.mbox__tag{font-size:13px;max-width:220px}
  .mbox__tray{grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:28px}
  .mbox__cell{padding:12px 14px 14px;border-radius:20px}
  .mbox__cell--know,.mbox__cell--reach{grid-column:1/-1}
  .mbox__cell--know ul{display:flex;gap:18px}.mbox__cell--know li{border-top:0}
  .mbox__sweet{width:56px;height:56px}.mbox__hd{gap:8px;margin-bottom:6px}
  .mbox__h{font-size:20px}
  .mbox__cell li a{font-size:14.5px;padding:8px 0;min-height:28px}
  .mbox__label{margin:14px 8px 0;padding:16px 18px 104px;font-size:13px}
  .mbox__stamp{top:auto;bottom:14px;margin-top:0;right:auto;left:18px;width:84px;height:84px}
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.mbox__lid{animation-name:mbox-lid-sm}}}
}
@keyframes mbox-lid-sm{from{transform:perspective(700px) rotateX(30deg) translateY(8px)}to{transform:perspective(700px) rotateX(10deg)}}

/* the side menu and the order panel on the festival shop take the festival's colours; everywhere else they stay navy
   (owner, 9 Oct 2026: "festival page the side panel is still navy ... it should change colour if in festival shop and
   remain navy in rest"; "same in cart"). Only the tokens change — the clay recipe and the layout are the site's. */
body[data-ground="festive"] :is(#drawer,#cartPanel,.fguide){
  --cl-clay:#FFF3DF;--cl-clay-2:#FFE9CC;--cl-well:#F6E1C3;--cl-tick:rgb(150 60 30 / .16);
  --cl-btn:0 8px 16px -8px rgb(150 60 30 / .40),inset 0 -3px 6px rgb(150 60 30 / .10),inset 0 4px 8px rgb(255 255 255 / .38);
  --cl-row:0 12px 22px -14px rgb(150 60 30 / .34),inset 0 -4px 8px rgb(150 60 30 / .07),inset 0 5px 10px rgb(255 255 255 / .38);
  --cl-tile:0 10px 18px -12px rgb(150 60 30 / .34),inset 0 -3px 6px rgb(150 60 30 / .06),inset 0 4px 8px rgb(255 255 255 / .38);
  --cl-sheet:0 28px 56px -30px rgb(150 60 30 / .42),0 6px 14px -8px rgb(150 60 30 / .14),inset 0 -8px 16px rgb(150 60 30 / .07),inset 0 7px 20px rgb(255 255 255 / .38);
  --cl-well-in:inset 0 3px 7px rgb(150 60 30 / .18),inset 0 -3px 8px rgb(255 255 255 / .36);
  --cl-navy:0 10px 20px -8px rgb(122 16 32 / .55),inset 0 -4px 7px rgb(0 0 0 / .30),inset 0 4px 8px rgb(255 255 255 / .09);
  --sh-ink:#5A1A10;--sh-ink-2:#8E4A30;--sh-ink-3:#87482F;--sh-navy:#7A1020;--sh-navy-2:#5C0C18;
  --sh-liner:#FBE8D0;--sh-sheet:#FFF8EC;--sh-hair:#F0D9BC;--sh-hair-2:#E6C9A6;
  --sh-flat:0 0 0 1px rgb(150 60 30 / .06),0 1px 1px rgb(150 60 30 / .08),0 3px 8px -3px rgb(150 60 30 / .2);
  --sh-float:0 1px 0 rgb(255 255 255 / .9) inset,0 2px 4px rgb(150 60 30 / .06),0 18px 40px -22px rgb(150 60 30 / .34);
  --sh-hole:linear-gradient(150deg,#F3DCC0 0%,#EAD0B0 40%,#F2DBBE 62%,#E8CDAC 100%);--sh-hole-edge:#D4B48E;
  --ink:#5A1A10;--ink-2:#8E4A30;color:#5A1A10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-ground="festive"] :is(#drawer,#cartPanel,.fguide){
  --cl-clay:#3F0F26;--cl-clay-2:#4C1630;--cl-well:#2A0A18;--cl-tick:rgb(255 220 170 / .08);
  --cl-btn:0 8px 16px -6px rgb(0 0 0 / .65),0 0 0 1px rgb(255 214 170 / .10),inset 0 -3px 6px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .04);
  --cl-row:0 14px 24px -12px rgb(0 0 0 / .70),0 0 0 1px rgb(255 214 170 / .08),inset 0 -4px 8px rgb(0 0 0 / .32),inset 0 4px 10px rgb(255 255 255 / .03);
  --cl-tile:0 12px 20px -12px rgb(0 0 0 / .7),0 0 0 1px rgb(255 214 170 / .07),inset 0 -3px 6px rgb(0 0 0 / .3),inset 0 4px 8px rgb(255 255 255 / .03);
  --cl-sheet:0 30px 60px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(255 214 170 / .09),inset 0 -8px 16px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --cl-well-in:inset 0 3px 8px rgb(0 0 0 / .65),inset 0 -3px 8px rgb(255 255 255 / .02);
  --cl-navy:0 10px 20px -6px rgb(0 0 0 / .7),inset 0 -4px 7px rgb(0 0 0 / .45),inset 0 4px 8px rgb(255 255 255 / .06);
  --sh-ink:#FFE6C2;--sh-ink-2:#E7B08F;--sh-ink-3:#C99478;--sh-navy:#F5A21B;--sh-navy-2:#C98420;
  --sh-liner:#2A0A18;--sh-sheet:#4A1428;--sh-hair:#5A1E3A;--sh-hair-2:#6A2A48;--sh-border:#FFE6C2;
  --sh-flat:0 0 0 1px rgb(0 0 0 / .3),0 1px 1px rgb(0 0 0 / .3),0 4px 10px -3px rgb(0 0 0 / .6);
  --sh-float:0 1px 0 rgb(255 255 255 / .05) inset,0 2px 4px rgb(0 0 0 / .3),0 24px 48px -22px rgb(0 0 0 / .8);
  --sh-hole:linear-gradient(150deg,#1E0812 0%,#240A16 45%,#1A060F 100%);--sh-hole-edge:#12040A;
  --ink:#FFE6C2;--ink-2:#E7B08F;color:#FFE6C2}}
:root[data-theme="dark"] body[data-ground="festive"] :is(#drawer,#cartPanel,.fguide){
  --cl-clay:#3F0F26;--cl-clay-2:#4C1630;--cl-well:#2A0A18;--cl-tick:rgb(255 220 170 / .08);
  --cl-btn:0 8px 16px -6px rgb(0 0 0 / .65),0 0 0 1px rgb(255 214 170 / .10),inset 0 -3px 6px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .04);
  --cl-row:0 14px 24px -12px rgb(0 0 0 / .70),0 0 0 1px rgb(255 214 170 / .08),inset 0 -4px 8px rgb(0 0 0 / .32),inset 0 4px 10px rgb(255 255 255 / .03);
  --cl-tile:0 12px 20px -12px rgb(0 0 0 / .7),0 0 0 1px rgb(255 214 170 / .07),inset 0 -3px 6px rgb(0 0 0 / .3),inset 0 4px 8px rgb(255 255 255 / .03);
  --cl-sheet:0 30px 60px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(255 214 170 / .09),inset 0 -8px 16px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --cl-well-in:inset 0 3px 8px rgb(0 0 0 / .65),inset 0 -3px 8px rgb(255 255 255 / .02);
  --cl-navy:0 10px 20px -6px rgb(0 0 0 / .7),inset 0 -4px 7px rgb(0 0 0 / .45),inset 0 4px 8px rgb(255 255 255 / .06);
  --sh-ink:#FFE6C2;--sh-ink-2:#E7B08F;--sh-ink-3:#C99478;--sh-navy:#F5A21B;--sh-navy-2:#C98420;
  --sh-liner:#2A0A18;--sh-sheet:#4A1428;--sh-hair:#5A1E3A;--sh-hair-2:#6A2A48;--sh-border:#FFE6C2;
  --sh-flat:0 0 0 1px rgb(0 0 0 / .3),0 1px 1px rgb(0 0 0 / .3),0 4px 10px -3px rgb(0 0 0 / .6);
  --sh-float:0 1px 0 rgb(255 255 255 / .05) inset,0 2px 4px rgb(0 0 0 / .3),0 24px 48px -22px rgb(0 0 0 / .8);
  --sh-hole:linear-gradient(150deg,#1E0812 0%,#240A16 45%,#1A060F 100%);--sh-hole-edge:#12040A;
  --ink:#FFE6C2;--ink-2:#E7B08F;color:#FFE6C2}

/* build 6 · a FESTIVAL GUIDE reads like the festival shop it belongs to (owner, 9 Oct: "this all are shop centric ...
   this wont help me get retail clients, or abroad clients"). The page takes the drawer's festival tokens above (cards,
   inks, wells); its headings take the festival face and maroon, and its links the maroon (amber at night). */
body[data-ground="festive"] .fguide{--brand-ink:#7A1020}
body[data-ground="festive"] .fguide :is(h1,.prose h2,.prose h3){font-family:"Rozha One",Georgia,serif;font-weight:400;color:#7A1020;letter-spacing:0}
body[data-ground="festive"] .fguide h1{font-size:clamp(34px,4.2vw,52px);line-height:1.08;text-wrap:balance}
body[data-ground="festive"] .fguide .prose h2{font-size:clamp(25px,2.4vw,30px);line-height:1.15}
body[data-ground="festive"] .fguide .prose strong{color:#5A1A10}
body[data-ground="festive"] .fguide .prose blockquote{margin:var(--sp-4) 0;padding:14px 18px;border-radius:14px;background:var(--cl-well);box-shadow:var(--cl-well-in);color:#5A1A10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-ground="festive"] .fguide{--brand-ink:#F5A21B}
  :root:not([data-theme="light"]) body[data-ground="festive"] .fguide :is(h1,.prose h2,.prose h3){color:#FFE6C2}
  :root:not([data-theme="light"]) body[data-ground="festive"] .fguide :is(.prose strong,.prose blockquote){color:#FFE6C2}}
:root[data-theme="dark"] body[data-ground="festive"] .fguide{--brand-ink:#F5A21B}
:root[data-theme="dark"] body[data-ground="festive"] .fguide :is(h1,.prose h2,.prose h3){color:#FFE6C2}
:root[data-theme="dark"] body[data-ground="festive"] .fguide :is(.prose strong,.prose blockquote){color:#FFE6C2}
/* the guide's head on its own panel, and the breadcrumb on a pill, so no text runs under the ladis (owner's phone
   screenshot, 9 Oct: the title and the summary sat on the marigold strings) */
body[data-ground="festive"] .fguide__head{position:relative;padding:var(--sp-6);border:1px solid transparent;border-radius:20px;
  background:var(--cl-clay);box-shadow:var(--cl-row)}
body[data-ground="festive"] .fguide__head .lede{margin-bottom:0}
body[data-ground="festive"] .fguide .breadcrumb{display:inline-flex;flex-wrap:wrap;max-width:100%;padding:6px 14px;border:1px solid transparent;
  border-radius:999px;background:var(--cl-clay);box-shadow:var(--cl-btn)}
@media (max-width:640px){body[data-ground="festive"] .fguide__head{padding:var(--sp-4)}}
@media (forced-colors:active){body[data-ground="festive"] :is(.fguide__head,.fguide .breadcrumb){border-color:CanvasText}}
/* the head and body panels line up, at a width that keeps a line near 70 characters */
body[data-ground="festive"] .fguide :is(.fguide__head,.prose){max-width:620px}
/* the ladis stay in view on a computer (owner, 9 Oct: "now on pc you clipped the bg completely"): from 700px the
   ladi string runs in the outer ~80px of the screen, so the guide's panels keep at least 88px from each edge. The
   page's own gutter is used when the window is wide enough that the wrap already sits clear of the string. */
@media (min-width:700px){body[data-ground="festive"] .fguide{
  padding-inline:max(var(--gutter), calc(88px - (100vw - min(100vw, var(--page))) / 2))}}
/* with 88px kept clear on each side, two columns leave the article too narrow below 1100px: it stacks, side box under */
@media (min-width:900px) and (max-width:1099px){body[data-ground="festive"] .fguide .two-col{grid-template-columns:1fr}
  body[data-ground="festive"] .fguide .two-col__side{position:static;max-width:620px}}