/* ═══ THE STICKER SHEET · the shop front's one design language (build 98) ══════════════════════════════
   Approved by the owner on 7 Oct 2026 (artifact TLFiSp3uEdJPmsaLuuKskV v2, his logo as the header mark; the
   peeled-liner background from artifact TJjkNFGToCMGqKf6JZYRuo).

   The shop is made of what it sells. The page is the paper of a sticker sheet after the stickers have been
   peeled off: sticker-shaped holes show the glossy liner underneath. Content sits on white sheets; things
   (products, mascots, buttons, badges) are die-cut stickers with a white border; prices hang on price-gun
   labels; progress is the kiss-cut line being cut; sending an order is peeling it off.

   SCOPE. The ground (paper, header, footer) is under body[data-ground="sheet"]; the tokens and shared parts are under
   .sh-scope, which the sheet ground's <body> carries and so does the slide-over cart on every page. The ground is a page ground like the festive waves (the
   shell loads a page on another ground in full, see shell.js). Pages move onto this ground one at a time, cart
   first; the admin panel has its own layout and never loads this file. Tokens are prefixed --sh- so nothing
   here can leak into a core rule that reads --ink or --surface.

   Fonts: Chubbo (display) and Amulya (text) from Fontshare, ITF Free Font Licence 2.0 (commercial use and
   self-hosting allowed; the files are served exactly as Fontshare ships them, never subset or converted).
   Kripa (Devanagari, OFL) is subset to शुभ लाभ. */
@font-face{font-family:Chubbo;src:url("../fonts/chubbo.woff2") format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:Amulya;src:url("../fonts/amulya.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Kripa;src:url("../fonts/kripa-deva-sub.woff2") format("woff2");font-weight:100 900;font-display:swap}

.sh-scope{
  --sh-ink:#14254F;--sh-ink-2:#46567E;--sh-ink-3:#525F86;--sh-navy:#14254F;--sh-navy-2:#0B1636;
  --sh-amber:#F5A524;--sh-amber-2:#D98A0B;--sh-amber-wash:#FFF3D6;--sh-vermil:#D2412A;--sh-marigold:#F49A1A;
  --sh-leaf:#1F7A50;--sh-leaf-2:#145238;--sh-leaf-wash:#E3F4EA;--sh-danger:#B42318;
  --sh-liner:#E7EBF2;--sh-sheet:#FFFFFF;--sh-hair:#E4E8F0;--sh-hair-2:#D3DAE6;--sh-border:#FFFFFF;--sh-on-dark:#FFFFFF;
  --sh-foil:linear-gradient(118deg,#F8E3A0 0%,#D9A846 26%,#FFF3C8 46%,#C48A28 66%,#F3D788 86%,#E2B451 100%);
  /* depth: a sticker lies flat; a sheet floats a little; one light from above */
  --sh-flat:0 0 0 1px rgb(20 37 79 / .05),0 1px 1px rgb(20 37 79 / .07),0 3px 8px -3px rgb(20 37 79 / .18);
  --sh-float:0 1px 0 rgb(255 255 255 / .9) inset,0 2px 4px rgb(20 37 79 / .05),0 18px 40px -22px rgb(20 37 79 / .32);
  --sh-die:drop-shadow(2.5px 0 0 var(--sh-border)) drop-shadow(-2.5px 0 0 var(--sh-border)) drop-shadow(0 2.5px 0 var(--sh-border)) drop-shadow(0 -2.5px 0 var(--sh-border)) drop-shadow(0 4px 6px rgb(20 37 79 / .22));
  --sh-lift:0 2px 0 var(--sh-amber-2),0 8px 16px -8px rgb(20 37 79 / .45);
  /* the holes in the paper: the liner shows through, the paper's cut edge shades the top */
  --sh-hole:linear-gradient(150deg,#DCE2EC 0%,#D3DAE6 40%,#DFE4EE 62%,#D2D9E5 100%);--sh-hole-edge:#BCC6D7;--sh-hole-lip:rgb(255 255 255 / .95);
  --sh-fd:Chubbo,Amulya,Georgia,serif;--sh-ft:Amulya,"Inter var",system-ui,sans-serif;--sh-deva:Kripa,"Rozha One",serif;
  /* fluid scale (Utopia 16→18 px, 1.2→1.25, 360→1240 px) measured on the nearest container, else the viewport */
  --sh-t--1:clamp(.8333rem,.8061rem + .1212cqi,.9rem);--sh-t-0:clamp(1rem,.9489rem + .2273cqi,1.125rem);--sh-t-1:clamp(1.2rem,1.116rem + .375cqi,1.406rem);
  --sh-t-2:clamp(1.44rem,1.31rem + .5778cqi,1.758rem);--sh-t-3:clamp(1.728rem,1.536rem + .8532cqi,2.197rem);--sh-t-4:clamp(2.074rem,1.798rem + 1.224cqi,2.747rem);
  --sh-t-5:clamp(2.488rem,2.102rem + 1.718cqi,3.433rem);--sh-t-6:clamp(2.986rem,2.452rem + 2.374cqi,4.292rem);--sh-t-7:clamp(3.583rem,2.854rem + 3.239cqi,5.364rem);
  --sh-s-3xs:clamp(.25rem,.2244rem + .1136cqi,.3125rem);--sh-s-2xs:clamp(.5rem,.4744rem + .1136cqi,.5625rem);--sh-s-xs:clamp(.75rem,.6989rem + .2273cqi,.875rem);
  --sh-s-s:clamp(1rem,.9489rem + .2273cqi,1.125rem);--sh-s-m:clamp(1.5rem,1.398rem + .4545cqi,1.75rem);--sh-s-l:clamp(2rem,1.898rem + .4545cqi,2.25rem);
  --sh-s-xl:clamp(3rem,2.795rem + .9091cqi,3.5rem);--sh-s-2xl:clamp(4rem,3.591rem + 1.818cqi,5rem);
  --sh-r-sheet:28px;--sh-r-stk:14px;--sh-r-pill:999px;
  /* the 8 rule, measured on what the eye sees: a sticker's white die-cut ring (--sh-ring) sits OUTSIDE its box, so two
     stickers side by side need the ring twice added to the gap, or 8px of CSS gap reads as 2px (owner, 8 Oct: "buttons
     on carousel are too close, no spacing rule followed") */
  --sh-ring:3px;--sh-g1:8px;--sh-g2:16px;--sh-g3:24px;--sh-g4:32px;
  --sh-gap-stk-1:calc(var(--sh-g1) + 2 * var(--sh-ring));--sh-gap-stk-2:calc(var(--sh-g2) + 2 * var(--sh-ring));--sh-gap-stk-3:calc(var(--sh-g3) + 2 * var(--sh-ring));
  --sh-ease:cubic-bezier(.16,1,.3,1);
  --sh-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077 22.7%,1.104 25.3%,1.105 27.8%,1.08 31.3%,1.002 39.7%,.987 44.1%,.983 49.5%,.996 62.6%,1);}
body[data-ground="sheet"]{
  position:relative;background:var(--sh-liner) linear-gradient(160deg,rgb(255 255 255 / .5),transparent 40%,rgb(255 255 255 / .2) 70%,transparent);
  color:var(--sh-ink);font-family:var(--sh-ft);-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sh-scope{
  --sh-ink:#EEF2FB;--sh-ink-2:#B3BEDA;--sh-ink-3:#9AA6C6;--sh-amber-wash:#3A2F17;--sh-leaf:#4CC38A;--sh-leaf-wash:#123A2A;--sh-vermil:#F0644B;--sh-danger:#FF8A7A;
  --sh-liner:#0B1229;--sh-sheet:#151F40;--sh-hair:#243159;--sh-hair-2:#2E3C68;--sh-border:#F4F6FB;
  --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 / .06) inset,0 2px 4px rgb(0 0 0 / .3),0 24px 48px -22px rgb(0 0 0 / .8);
  --sh-hole:linear-gradient(150deg,#070C1F 0%,#0A1027 45%,#060A1A 100%);--sh-hole-edge:#03060F;--sh-hole-lip:rgb(255 255 255 / .08)}
  :root:not([data-theme="light"]) body[data-ground="sheet"]{background:var(--sh-liner) linear-gradient(160deg,rgb(255 255 255 / .04),transparent 45%)}}
:root[data-theme="dark"] .sh-scope{
  --sh-ink:#EEF2FB;--sh-ink-2:#B3BEDA;--sh-ink-3:#9AA6C6;--sh-amber-wash:#3A2F17;--sh-leaf:#4CC38A;--sh-leaf-wash:#123A2A;--sh-vermil:#F0644B;--sh-danger:#FF8A7A;
  --sh-liner:#0B1229;--sh-sheet:#151F40;--sh-hair:#243159;--sh-hair-2:#2E3C68;--sh-border:#F4F6FB;
  --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 / .06) inset,0 2px 4px rgb(0 0 0 / .3),0 24px 48px -22px rgb(0 0 0 / .8);
  --sh-hole:linear-gradient(150deg,#070C1F 0%,#0A1027 45%,#060A1A 100%);--sh-hole-edge:#03060F;--sh-hole-lip:rgb(255 255 255 / .08)}
:root[data-theme="dark"] body[data-ground="sheet"]{background:var(--sh-liner) linear-gradient(160deg,rgb(255 255 255 / .04),transparent 45%)}
.sh-scope ::selection{background:var(--sh-amber);color:#14254F}
.sh-scope :focus-visible{outline:2.5px solid var(--sh-amber);outline-offset:3px}
.sh-scope .num{font-variant-numeric:tabular-nums}
.sh-scope .sh-d{font-family:var(--sh-fd);font-weight:700;letter-spacing:-.015em;line-height:1.05;text-wrap:balance}

/* ── the holes in the paper (partials/sheet-bg.php). One layer the height of the page, behind everything;
   nothing moves, nothing repaints. Each hole is two masked layers: the cut edge, then the liner, the mask
   intersected with itself moved down a few pixels so the edge shows only along the top. */
.shbg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.shbg i{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--ar,1);transform:translateX(var(--tx,0)) rotate(var(--r,0deg));
  filter:drop-shadow(0 1.5px 0 var(--sh-hole-lip))}
.shbg i::before,.shbg i::after{content:"";position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.shbg i::before{background:var(--he,var(--sh-hole-edge))}
.shbg i::after{background:var(--hf,var(--sh-hole));
  -webkit-mask:var(--m) 0 0/100% 100% no-repeat,var(--m) 0 var(--d,4px)/100% 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--m) 0 0/100% 100% no-repeat,var(--m) 0 var(--d,4px)/100% 100% no-repeat;mask-composite:intersect}
.shbg .h-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,6 62.9,34.2 93.8,37.8 70.9,58.8 77.1,89.2 50,74 22.9,89.2 29.1,58.8 6.2,37.8 37.1,34.2' fill='%23fff' stroke='%23fff' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E")}
.shbg .h-heart{--ar:100/92;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23fff' d='M50 89C22 68 3 52 3 30A23 23 0 0 1 50 18A23 23 0 0 1 97 30C97 52 78 68 50 89Z'/%3E%3C/svg%3E")}
.shbg .h-ticket{--ar:200/110;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'%3E%3Cpath fill='%23fff' d='M14 0H186A14 14 0 0 1 200 14V39A16 16 0 0 0 200 71V96A14 14 0 0 1 186 110H14A14 14 0 0 1 0 96V71A16 16 0 0 0 0 39V14A14 14 0 0 1 14 0Z'/%3E%3C/svg%3E")}
.shbg .h-round{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23fff'/%3E%3C/svg%3E")}
.shbg .h-label{--ar:160/90;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' rx='45' fill='%23fff'/%3E%3C/svg%3E")}
.shbg .h-flower{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23fff'%3E%3Ccircle cx='84' cy='50' r='15'/%3E%3Ccircle cx='79.4' cy='67' r='15'/%3E%3Ccircle cx='67' cy='79.4' r='15'/%3E%3Ccircle cx='50' cy='84' r='15'/%3E%3Ccircle cx='33' cy='79.4' r='15'/%3E%3Ccircle cx='20.6' cy='67' r='15'/%3E%3Ccircle cx='16' cy='50' r='15'/%3E%3Ccircle cx='20.6' cy='33' r='15'/%3E%3Ccircle cx='33' cy='20.6' r='15'/%3E%3Ccircle cx='50' cy='16' r='15'/%3E%3Ccircle cx='67' cy='20.6' r='15'/%3E%3Ccircle cx='79.4' cy='33' r='15'/%3E%3Ccircle cx='50' cy='50' r='36'/%3E%3C/svg%3E")}
.shbg .h-biscuit{--ar:552/824;--m:url("../img/sheet/hole-biscuit.webp")}
.shbg .h-chiku{--ar:588/398;--m:url("../img/sheet/hole-chiku.webp")}
/* the liner under the paper is tinted (owner, 8 Oct: "give light hue … so they get noticed in both light and dark"):
   five soft hues from the shop's own world (a barely-there version was tried 8 Oct and the owner kept these: "feels like washout colours") — amber, marigold blush, leaf, sky, lilac — each a recess, lit from above
   (lighter at the bottom, its cut edge darker along the top). Decoration only: nothing here carries meaning. */
.shbg .hu-amber{--hf:linear-gradient(160deg,#F6DDA8 0%,#FBE9C6 70%,#F8E2B5 100%);--he:#DDBA78}
.shbg .hu-blush{--hf:linear-gradient(160deg,#F1CCD6 0%,#F8DFE5 70%,#F4D5DD 100%);--he:#D7A9B6}
.shbg .hu-leaf{--hf:linear-gradient(160deg,#C6E5D4 0%,#DCF0E5 70%,#D0EADC 100%);--he:#A0C9B3}
.shbg .hu-sky{--hf:linear-gradient(160deg,#C9DCF4 0%,#DEE9F9 70%,#D2E2F6 100%);--he:#A3BEE2}
.shbg .hu-lilac{--hf:linear-gradient(160deg,#D8CEF0 0%,#E7E1F7 70%,#DFD7F4 100%);--he:#B7A8DB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shbg{
  --d-amber:linear-gradient(160deg,#2A220F 0%,#3C3117 70%,#342A13 100%);--d-blush:linear-gradient(160deg,#2C1626 0%,#40213A 70%,#381C32 100%);
  --d-leaf:linear-gradient(160deg,#0D2822 0%,#16392F 70%,#123229 100%);--d-sky:linear-gradient(160deg,#0F2146 0%,#183262 70%,#152B56 100%);
  --d-lilac:linear-gradient(160deg,#1C1840 0%,#2B2558 70%,#25204D 100%)}
  :root:not([data-theme="light"]) .shbg .hu-amber{--hf:var(--d-amber);--he:#0B0702}:root:not([data-theme="light"]) .shbg .hu-blush{--hf:var(--d-blush);--he:#0B0409}
  :root:not([data-theme="light"]) .shbg .hu-leaf{--hf:var(--d-leaf);--he:#020B08}:root:not([data-theme="light"]) .shbg .hu-sky{--hf:var(--d-sky);--he:#030817}
  :root:not([data-theme="light"]) .shbg .hu-lilac{--hf:var(--d-lilac);--he:#050412}}
:root[data-theme="dark"] .shbg{
  --d-amber:linear-gradient(160deg,#2A220F 0%,#3C3117 70%,#342A13 100%);--d-blush:linear-gradient(160deg,#2C1626 0%,#40213A 70%,#381C32 100%);
  --d-leaf:linear-gradient(160deg,#0D2822 0%,#16392F 70%,#123229 100%);--d-sky:linear-gradient(160deg,#0F2146 0%,#183262 70%,#152B56 100%);
  --d-lilac:linear-gradient(160deg,#1C1840 0%,#2B2558 70%,#25204D 100%)}
:root[data-theme="dark"] .shbg .hu-amber{--hf:var(--d-amber);--he:#0B0702}:root[data-theme="dark"] .shbg .hu-blush{--hf:var(--d-blush);--he:#0B0409}
:root[data-theme="dark"] .shbg .hu-leaf{--hf:var(--d-leaf);--he:#020B08}:root[data-theme="dark"] .shbg .hu-sky{--hf:var(--d-sky);--he:#030817}
:root[data-theme="dark"] .shbg .hu-lilac{--hf:var(--d-lilac);--he:#050412}
.shbg .is-wide{display:none}
@media (min-width:900px){.shbg .is-wide{display:block}.shbg .is-narrow{display:none}}
@media (forced-colors:active){.shbg{display:none}}

/* ── the waves' veil and glass do not belong on this ground ── */
body[data-ground="sheet"] .stagebg{display:none}

/* ── the header, in the language: a white sticker search, round sticker buttons, the logo with its die-cut edge ── */
body[data-ground="sheet"] .topbar{background:var(--sh-navy);color:rgb(255 255 255 / .82);font-family:var(--sh-ft)}
body[data-ground="sheet"] .topbar b{color:#fff}
body[data-ground="sheet"] .topbar a{color:rgb(255 255 255 / .86)}
body[data-ground="sheet"] .topbar a:hover{color:#fff}
body[data-ground="sheet"] #siteHeader,body[data-ground="sheet"] #siteHeader.is-stuck{background:color-mix(in srgb,var(--sh-liner) 92%,transparent);border-bottom:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body[data-ground="sheet"] #siteHeader.is-stuck{box-shadow:0 1px 0 var(--sh-hair-2)}
body[data-ground="sheet"] #siteHeader .brand img{box-shadow:0 0 0 3px var(--sh-border),var(--sh-flat);background:#fff}
body[data-ground="sheet"] #siteHeader .brand__name b{font-family:var(--sh-fd);font-weight:700;font-size:var(--sh-t-1);letter-spacing:-.01em;color:var(--sh-ink)}
body[data-ground="sheet"] #siteHeader .brand__name span{font:600 var(--sh-t--1)/1.1 var(--sh-ft);letter-spacing:.01em;text-transform:none;color:var(--sh-ink-3)}
body[data-ground="sheet"] #siteHeader .search input{min-height:48px;border:0;border-radius:var(--sh-r-pill);background:var(--sh-sheet);color:var(--sh-ink);box-shadow:var(--sh-flat);font:500 var(--sh-t-0)/1 var(--sh-ft)}
body[data-ground="sheet"] #siteHeader .search input::placeholder{color:var(--sh-ink-3)}
body[data-ground="sheet"] #siteHeader .search input:focus{box-shadow:0 0 0 2px var(--sh-amber),var(--sh-flat)}
body[data-ground="sheet"] #siteHeader .search button{background:var(--sh-navy);color:#fff}
body[data-ground="sheet"] #siteHeader .iconbtn{min-width:48px;min-height:48px;border:0;border-radius:var(--sh-r-pill);background:var(--sh-sheet);color:var(--sh-ink);
  box-shadow:0 0 0 3px var(--sh-border),var(--sh-flat)}
body[data-ground="sheet"] #siteHeader .iconbtn:hover{background:var(--sh-amber-wash)}
body[data-ground="sheet"] #siteHeader .iconbtn:has(.marq){padding-inline:14px 16px}
body[data-ground="sheet"] #siteHeader .header__actions{gap:var(--sh-gap-stk-1)}
body[data-ground="sheet"] #siteHeader .header__row{column-gap:var(--sh-gap-stk-1)}
@media (min-width:900px){body[data-ground="sheet"] #siteHeader .header__actions{gap:var(--sh-gap-stk-2)}body[data-ground="sheet"] #siteHeader .header__row{column-gap:var(--sh-gap-stk-2)}}
@media (max-width:420px){body[data-ground="sheet"] #siteHeader .brand__name b{font-size:var(--sh-t-0)}body[data-ground="sheet"] #siteHeader .brand__name span{display:none}}
body[data-ground="sheet"] #siteHeader .iconbtn .count{background:var(--sh-amber);color:#14254F;box-shadow:0 0 0 2.5px var(--sh-border);font-family:var(--sh-ft);font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-ground="sheet"] #siteHeader .search button{background:var(--sh-amber);color:#14254F}}
:root[data-theme="dark"] body[data-ground="sheet"] #siteHeader .search button{background:var(--sh-amber);color:#14254F}

/* the footer stays the brand's navy band; it only takes the language's type */
body[data-ground="sheet"] .footer{font-family:var(--sh-ft);background:var(--sh-navy)}
body[data-ground="sheet"] .footer__brand img{box-shadow:0 0 0 2.5px #fff}

/* ── the shared parts ── */
.sh-scope .sh-sheet{position:relative;background:var(--sh-sheet);border-radius:var(--sh-r-sheet);box-shadow:var(--sh-float)}
.sh-scope .sh-label{display:inline-grid;grid-auto-flow:column;align-items:baseline;gap:6px;padding:5px 10px 4px;border-radius:3px;background:#fff;color:#14254F;
  box-shadow:inset 0 2px 0 var(--sh-amber),inset 0 -2px 0 var(--sh-amber),0 1px 2px rgb(20 37 79 / .25);font:700 var(--sh-t-0)/1.1 var(--sh-ft);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-scope .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 var(--sh-s-m);border:0;border-radius:var(--sh-r-pill);
  background:var(--sh-amber);color:#14254F;font:700 var(--sh-t-0)/1 var(--sh-ft);text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 0 0 3px var(--sh-border),var(--sh-lift);transition:transform .14s var(--sh-ease),box-shadow .14s var(--sh-ease)}
.sh-scope .sh-btn:hover{transform:translateY(-1px) rotate(-.6deg)}
.sh-scope .sh-btn:active{transform:translateY(1px);box-shadow:0 0 0 3px var(--sh-border),0 0 0 var(--sh-amber-2),0 2px 6px -3px rgb(20 37 79 / .45)}
.sh-scope .sh-btn[aria-busy="true"]{cursor:progress;opacity:.85}
.sh-scope .sh-btn--ink{background:var(--sh-navy);color:#fff;box-shadow:0 0 0 3px var(--sh-border),0 2px 0 var(--sh-navy-2),0 8px 16px -8px rgb(20 37 79 / .45)}
.sh-scope .sh-btn--go{background:#1F7A50;color:#fff;box-shadow:0 0 0 3px var(--sh-border),0 2px 0 #145238,0 8px 16px -8px rgb(20 37 79 / .45)}
.sh-scope .sh-btn--block{width:100%}
.sh-scope .sh-btn:disabled{cursor:not-allowed;opacity:.55;transform:none}
@media (prefers-reduced-motion:reduce){.sh-scope *,.sh-scope *::before,.sh-scope *::after{transition-duration:.01ms!important}}
@media (forced-colors:active){.sh-scope :is(.sh-sheet,.sh-btn,.sh-label){border:1px solid CanvasText}}
.sh-scope .sh-btn--quiet{background:transparent;color:var(--sh-ink);box-shadow:inset 0 0 0 1.5px var(--sh-hair-2)}
.sh-scope .sh-btn--quiet:hover{transform:none;background:var(--sh-sheet)}

/* ── The shop's name is never cut (owner, 8 Oct 2026, phone screenshot of "Tirth Enterpr…": "this is not fixed dude").
   The header was measured for the old face: "Tirth Enterprise" fit its phone cell with 0-11px to spare. Chubbo is ~16% wider
   (8.84 x the font size at 700/-.01em against ~7.6), so at the same size it ran 3-62px over on every phone width, on the
   paper pages and on the cart alike. Measured fix, every width 320-899 in 10px steps (scratchpad r3/brandfit.js):
   the row's gaps go from 12px to 8px (the 8-point step below), the name sits at 15px with the old -.03em tracking, and
   under 340px, where the cell is 118px, it steps to 14px/600. The tagline already steps aside at 420px. ── */
@media (max-width:899px){
  body.sh-scope #siteHeader .header__row{column-gap:8px}
  body.sh-scope #siteHeader .brand__name b{font-size:15px;letter-spacing:-.03em}
}
@media (max-width:339px){
  body.sh-scope #siteHeader .brand__name b{font-size:14px;font-weight:600}
}
/* from 900px the search joins the row and was squeezing the name instead of itself (152px name in a 119-158px cell
   at 900-990); the search gives way, the name keeps its width */
@media (min-width:900px){
  body.sh-scope #siteHeader .brand{flex-shrink:0}
}
/* 900-1099px: the old header put the search inline from 900px, but with the account pill and the shop's name in this
   type that left the search 96-219px for a 227px "Search products or item code". Measured, it first fits whole at 1100px,
   so up to there the header keeps its two-line form (the same grid every phone uses) and the search gets the full width. */
@media (min-width:900px) and (max-width:1099px){
  body.sh-scope #siteHeader .header__row{display:grid;gap:8px 12px;padding-block:var(--sp-2)}
  body.sh-scope #siteHeader .header__row > .search{max-width:none}
}
/* under 340px the search's own cell is 214-224px: the hint steps to 14px (the field itself stays 16px, so iOS never zooms) */
@media (max-width:339px){
  body.sh-scope #siteHeader .search input::placeholder{font-size:14px}
}