:root{
  --o50:#FFF5EB; --o100:#FFE5CC; --o200:#FFCB9E; --o300:#FFAB66;
  --o400:#FD8F3A; --o500:#F97316; --o600:#E65400; --o700:#BD3C00;
  --o800:#992B00; --o900:#7A1F00; --o950:#420F00;
  --o-btn:#CD4500;
  --ground:#FAF8F6; --surface:#FFFFFF; --raised:#F3EEEA;
  --ink:#141110; --muted:#5D544F; --faint:#736962;
  --line:#E4DCD6; --line-2:#EFE8E3;
  --ok:#0F6E52;   --ok-bg:#E7F4EF;   --ok-line:#C9E5DA;
  --warn:#8A5A00; --warn-bg:#FFF4E0; --warn-line:#F2DFB8;
  --bad:#A8341A;  --bad-bg:#FDECE8;  --bad-line:#F5CFC6;
  --wa:#17A94E;
  --ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --mo:ui-monospace,"SF Mono",Menlo,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --pad:20px;
  --pad-x:var(--pad);
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:26px; --r-f:999px;
  --t:150ms; --t2:280ms; --ease:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 2px rgba(64,26,4,.045);
  --sh-2:0 1px 2px rgba(64,26,4,.05), 0 4px 10px -6px rgba(64,26,4,.09);
  --sh-3:0 1px 2px rgba(64,26,4,.05), 0 12px 28px -16px rgba(64,26,4,.16);
  --sh-o:0 1px 2px rgba(120,42,0,.14), 0 10px 24px -12px rgba(235,86,0,.5);
  --shell:1120px; --top-h:56px;
  --bar-h:76px;
}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fonts/plexar-arabic-400.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fonts/plexar-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;
  font-display:swap;src:url("/fonts/plexar-arabic-700.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;
  font-display:swap;src:url("/fonts/plexar-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{background:var(--ground);color:var(--ink);font-family:var(--ar);
  font-size:16px;line-height:1.72;overflow-x:clip;
  font-synthesis-weight:none}          
body *{letter-spacing:0}               
h1,h2,h3,h4{line-height:1.28;font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--o700);outline-offset:2px;border-radius:var(--r-s);
  box-shadow:0 0 0 2px var(--ground), 0 0 0 5px rgba(189,60,0,.18)}
.num{font-family:var(--ar);font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1}
.mono{font-family:var(--mo);font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.row.tight{gap:.3rem}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:1rem;min-width:0}
.stack.sm{gap:.5rem}
.stack.lg{gap:1.5rem}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.tiny{font-size:.76rem;line-height:1.6;color:var(--faint)}
.nowrap{white-space:nowrap}
.center{text-align:center}
.clamp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.sep{height:1px;border:0;margin:0;
  background:linear-gradient(to left,transparent,var(--line-2) 26%,var(--line) 50%,var(--line-2) 74%,transparent)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.eyebrow,.crumb,.pill,.st,.meter-l,.p-meta,.cnt,.cd,.sect-h{gap:.32ch}
.eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;
  font-size:.82rem;font-weight:700;color:var(--o700)}
.top{position:sticky;top:0;z-index:40;background:rgba(250,248,246,.94);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--shell);margin-inline:auto;height:var(--top-h);
  display:flex;align-items:center;gap:.9rem;padding-inline:var(--pad-x)}
.brand{display:flex;align-items:center;gap:.5rem;min-width:0;
  font-weight:700;font-size:.95rem}
.brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand img{flex-shrink:0;width:32px;height:32px;padding:4px;background:var(--o50)}
.nav{display:flex;gap:.2rem;margin-inline-start:auto}
.nav a{padding:.4rem .85rem;font-size:.88rem;font-weight:700;white-space:nowrap;
  color:var(--muted);transition:background var(--t),color var(--t)}
@media(hover:hover){.nav a:hover{background:var(--raised);color:var(--ink)}}
.nav a[aria-current="page"]{background:var(--o100);color:var(--o800)}
.shell{max-width:var(--shell);margin-inline:auto;
  padding:var(--s3) var(--pad-x) var(--s5)}
.shell.has-bar{padding-block-end:calc(var(--bar-h) + var(--s4))}
.auth{width:min(420px,100%);margin-inline:auto}
.page-head{display:flex;align-items:flex-start;gap:.8rem;flex-wrap:wrap;
  margin-block-end:var(--s2)}
.page-head .stack{gap:var(--x0)}
.page-head h1{font-size:1.45rem;flex:1;min-width:min(100%,12rem)}
.sec{display:flex;flex-direction:column;gap:.7rem;margin-block-start:var(--s4)}
.sec-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sec-head h2{font-size:1.05rem;flex:1;min-width:0}
.crumb{display:inline-flex;align-items:center;min-height:44px;
  padding-inline:.7rem;margin-inline-start:-.7rem;margin-block-end:.15rem;
  font-size:.86rem;font-weight:700;color:var(--o700);
  background:none;border:0;font-family:inherit;cursor:pointer}
.crumb::before{content:"";flex-shrink:0;width:7px;height:7px;
  margin-inline-end:.45rem;transform:rotate(135deg);
  border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor}
.solo{min-height:100dvh;display:grid;place-items:center;padding:var(--pad-x)}
.solo-card{width:min(420px,100%);text-align:center;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2);padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;gap:.8rem}
.solo-card > img{width:48px;height:48px;padding:7px;background:var(--o50)}
.solo-card h1{font-size:1.2rem}
.solo-card p{font-size:.9rem;color:var(--muted)}
.solo-card .btn{width:100%;margin-block-start:.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding-inline:1.25rem;border:1.5px solid transparent;
  font-family:inherit;font-size:1rem;font-weight:700;line-height:1.24;  
  cursor:pointer;background:none;color:inherit;text-align:center;
  transition:background var(--t),box-shadow var(--t),transform var(--t),border-color var(--t)}
.btn:active{transform:translateY(1px)}
.btn-p{position:relative;overflow:hidden;background:var(--o-btn);color:#fff;
  box-shadow:var(--sh-o)}
.btn-p::before{content:"";position:absolute;inset:0 0 auto;height:50%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.16),transparent)}
.btn-p:hover{background:#F55E00}
.btn-p:active{background:#D64E00}
.btn-s{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-s:hover{border-color:var(--o300);color:var(--o700)}
.btn-s:active{background:var(--raised)}
.btn-d{background:transparent;border-color:var(--line);color:var(--bad)}
.btn-d:hover{background:var(--bad-bg);border-color:var(--bad-line)}
.btn-sm{min-height:36px;padding-inline:.8rem;font-size:.85rem}
.btn-w{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-p.grad{border:0;background-image:linear-gradient(100deg,#E65400,#D94D00 28%,#EB5600 50%,#D94D00 72%,#E65400);
  background-size:230% 100%;background-position:38% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(120,42,0,.22),
    0 2px 4px rgba(120,42,0,.18), 0 12px 26px -12px rgba(235,86,0,.62)}
.btn-wa::before{content:"";flex-shrink:0;width:9px;height:9px;
  background:var(--wa)}
.btn[aria-busy="true"]{pointer-events:none;position:relative;color:transparent}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:20px;height:20px;
  border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:spin .7s linear infinite}
.btn-s[aria-busy="true"]::after,.btn-d[aria-busy="true"]::after{
  border-color:var(--line);border-top-color:var(--o-btn)}
.f{display:flex;flex-direction:column;gap:.35rem}
.f label{font-size:.84rem;font-weight:700;color:var(--muted)}
.inp{width:100%;min-height:48px;padding:.6rem .8rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:1rem;
  line-height:1.5;transition:border-color var(--t),box-shadow var(--t)}
.inp:focus{border-color:var(--o500);outline:none;box-shadow:0 0 0 3px var(--o50)}
.inp[readonly],.inp[disabled]{background:var(--raised);color:var(--muted)}
.inp.bad{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
textarea.inp{min-height:120px;resize:vertical;line-height:1.75}
select.inp{appearance:none;padding-inline-end:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                   linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  background-position:left 1rem top calc(50% - 2px),left calc(1rem + 6px) top calc(50% - 2px)}
.hint{font-size:.78rem;line-height:1.7;color:var(--faint)}
.f-err{font-size:.79rem;line-height:1.6;font-weight:700;color:var(--bad)}
.f-err::before{content:"";display:inline-block;width:6px;height:6px;
  margin-inline-end:.4rem;vertical-align:1px;background:var(--bad)}
.fgrid{display:grid;gap:.9rem}
.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line);
  padding:.6rem .8rem;font-size:.86rem;line-height:1.6}
.cnt{display:inline-flex;align-items:center;align-self:flex-start;
  font-size:.75rem;font-weight:700;color:var(--faint);
  font-variant-numeric:lining-nums tabular-nums}
.cnt.short{color:var(--warn)}
.cnt.over{color:var(--bad)}
.cnt.ok{color:var(--ok)}
.money{position:relative;display:block}
.money .inp{padding-inline-end:3.2rem;font-variant-numeric:lining-nums tabular-nums}
.money::after{content:"د.ع";position:absolute;inset-inline-end:.9rem;top:50%;
  transform:translateY(-50%);pointer-events:none;
  font-size:.85rem;font-weight:700;color:var(--faint)}
.slug{position:relative;display:block;direction:ltr}
.slug{display:flex;align-items:center;gap:0;
  border:1.5px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);overflow:hidden}
.slug:focus-within{border-color:var(--o600);box-shadow:0 0 0 3px var(--o100)}
.slug-p{flex-shrink:0;padding-inline-start:.75rem;pointer-events:none;
  direction:ltr;font-family:var(--mo);font-size:.84rem;color:var(--faint)}
.slug .inp{flex:1;min-width:0;direction:ltr;text-align:left;
  padding-inline-start:.15rem;font-family:var(--mo);font-size:.92rem;
  border:0;background:none;box-shadow:none}
.slug .inp:focus{box-shadow:none;border:0}
.slug-s{font-size:.79rem;font-weight:700}
.slug-s.free{color:var(--ok)}
.slug-s.busy{color:var(--faint)}
.slug-s.no{color:var(--bad)}
.sw{display:flex;align-items:center;gap:.7rem;min-height:48px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{flex-shrink:0;position:relative;width:46px;height:28px;background:var(--line);
  transition:background var(--t) var(--ease)}
.sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:22px;height:22px;background:#fff;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease)}
.sw input:checked + i{background:var(--o-btn)}
.sw input:checked + i::after{transform:translateX(-18px)}
.sw input:focus-visible + i{outline:2.5px solid var(--o700);outline-offset:2px}
.sw span{min-width:0;font-size:.92rem;font-weight:700}
.sw .tiny{font-weight:400}
.steps{display:flex;align-items:center;gap:.3rem;margin-block-end:var(--s2)}
.steps i{flex:1;height:4px;background:var(--line-2);
  transition:background var(--t2) var(--ease)}
.steps i.done{background:var(--o300)}
.steps i.on{background:var(--o-btn)}
.step-n{font-size:.78rem;font-weight:700;color:var(--faint);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.terms{max-height:44dvh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:1rem 1.05rem;background:var(--surface);border:1px solid var(--line);
  font-size:.92rem;line-height:1.85;color:var(--muted);
  display:grid;gap:.7rem}
.terms h3{font-size:.98rem;color:var(--ink)}
.terms b{color:var(--ink)}
.terms ul{padding-inline-start:var(--x5);display:grid;gap:var(--x1)}
.terms.read{border-color:var(--ok-line);background:var(--ok-bg)}
.terms-end{height:1px}
.terms-note{font-size:.79rem;font-weight:700;color:var(--warn)}
.terms.read + .terms-note{color:var(--ok)}
.terms.full{max-height:none;overflow:visible;gap:.9rem;
  padding:1.15rem 1.1rem;font-size:.95rem}
.terms.full h2{font-size:1.08rem;color:var(--ink);margin-block-start:.55rem}
.terms.full h2:first-child{margin-block-start:0}
.birth{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:.5rem}
.birth .inp{text-align:center;font-variant-numeric:lining-nums tabular-nums}
.age-out{font-size:.82rem;font-weight:700;color:var(--o700)}
.age-out.no{color:var(--bad)}
.otp{display:block}
.otp .inp{min-height:60px;text-align:center;direction:ltr;
  font-family:var(--mo);font-size:1.6rem;font-weight:600;
  letter-spacing:.55em;text-indent:.55em;      
  font-variant-numeric:lining-nums tabular-nums}
.otp-m{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--muted)}
.otp-m b{font-variant-numeric:lining-nums tabular-nums}
.resend{background:none;border:0;font-family:inherit;font-size:.84rem;
  font-weight:700;color:var(--o700);cursor:pointer;min-height:44px;
  padding-inline:.4rem}
.resend[disabled]{color:var(--faint);cursor:default}
.link{display:inline-flex;align-items:center;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:700;
  color:var(--o700);text-decoration:none;
  border-bottom:1px solid transparent}
.link:hover{border-bottom-color:currentColor}
.link:focus-visible{outline:2px solid var(--o600);outline-offset:3px;border-radius:4px}
.pw{position:relative;display:block}
.pw .inp{width:100%;padding-left:4.6rem}
.pw .eye{position:absolute;inset-inline-end:.35rem;top:50%;
  transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;min-width:3.8rem;padding-inline:.5rem;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:700;color:var(--o700)}
.pw .eye:focus-visible{outline:2px solid var(--o600);outline-offset:2px;border-radius:6px}
.drop{position:relative;display:grid;place-items:center;gap:.5rem;
  min-height:180px;padding:1.2rem;text-align:center;cursor:pointer;
  background:var(--surface);border:1.5px dashed var(--line);
  color:var(--muted);font-size:.88rem;
  transition:border-color var(--t),background var(--t)}
.drop:hover,.drop.over{border-color:var(--o300);background:var(--o50)}
.drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{font-size:.95rem;color:var(--ink)}
.drop.has{padding:0;border-style:solid;border-color:var(--line);overflow:hidden}
.drop-t{display:flex;flex-direction:column;align-items:center;
  gap:var(--x2);text-align:center}
.drop-t b{font-size:var(--f4);line-height:var(--lh1)}
.drop-t span{font-size:var(--f2);color:var(--muted);line-height:var(--lh2);
  max-width:24rem}
.drop.has .drop-t{display:none}
.drop .ph{width:100%;background:var(--surface)}
.drop .ph img{object-fit:contain}
.drop-x{position:absolute;inset-block-start:.55rem;inset-inline-end:.55rem;z-index:2;
  min-height:36px;padding-inline:.75rem;border:0;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:700;color:#fff;
  background:rgba(20,17,16,.62);backdrop-filter:blur(4px)}
.drop-p{position:absolute;inset-block-end:0;inset-inline:0;height:4px;
  background:var(--line-2)}
.drop-p > i{display:block;height:100%;width:0;background:var(--o-btn);
  transition:width var(--t2) var(--ease)}
.band{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.75rem .9rem;font-size:.88rem;line-height:1.65}
.band.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.band.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.band.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.band.info{background:var(--raised);color:var(--muted);border:1px solid var(--line)}
.band b{font-weight:700}
.band > .grow{min-width:min(100%,10rem)}
.band > .btn{margin-inline-start:auto}
.pill{display:inline-flex;align-items:center;padding:.22rem .6rem;
  font-size:.72rem;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.mut{background:var(--raised);color:var(--muted)}
.pill.live{background:var(--o100);color:var(--o800)}
.pill[data-state="hidden"]{position:relative;padding-inline-start:1.15rem}
.pill[data-state="hidden"]::before{content:"";position:absolute;
  inset-inline-start:.5rem;top:50%;width:9px;height:1.5px;
  transform:translateY(-50%) rotate(-20deg);background:currentColor}
.st{position:absolute;inset-block-start:.55rem;inset-inline-end:.55rem;z-index:2;
  display:inline-flex;align-items:center;padding:.15rem .55rem;
  font-size:.7rem;font-weight:700;white-space:nowrap;
  background:rgba(255,255,255,.94);backdrop-filter:blur(4px);color:var(--muted);
  box-shadow:var(--sh-1)}
.cd{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;
  color:var(--o700);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.cd.soon{color:var(--warn)}
.cd.over{color:var(--bad)}
.ph{position:relative;overflow:hidden;display:block;width:100%;
  aspect-ratio:1;background:var(--raised)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.sq{aspect-ratio:1}
.ph.wide{aspect-ratio:16/9}
.ph.tall{aspect-ratio:3/4}
.ph.sm{width:64px;flex-shrink:0}
.ph.logo{width:44px;flex-shrink:0;background:var(--surface)}
.ph.logo img{object-fit:contain}
.shop-top .ph.logo img,
.hero .ph.logo img{object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,17,16,.06)}
.ph.none::before{content:"";position:absolute;inset:50% auto auto 50%;
  width:26px;height:22px;transform:translate(50%,-50%);
  border:2px solid var(--line)}
.grid{display:grid;gap:.75rem;justify-content:center;justify-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.grid > *{width:100%;max-width:300px}
.grid.one{grid-template-columns:minmax(0,340px)}
.pcard{position:relative;display:flex;flex-direction:column;
  width:100%;text-align:start;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-family:inherit;color:inherit;cursor:pointer;
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),
    transform var(--t) var(--ease)}
.pcard:active{transform:scale(.988)}
@media(hover:hover){.pcard:hover{border-color:var(--o300);box-shadow:var(--sh-2)}}
.pcard .p-in{display:flex;flex-direction:column;gap:.3rem;
  padding:.7rem .75rem .85rem;min-width:0}
.p-tag{display:flex;flex-wrap:wrap;gap:.3rem;margin-block-end:.1rem}
.p-nm{font-size:.92rem;font-weight:700;line-height:1.5;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-pr{font-size:1rem;font-weight:700;color:var(--o800);
  font-variant-numeric:lining-nums tabular-nums}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.32ch .5rem;
  font-size:.75rem;color:var(--faint)}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.6rem}
.card h3{font-size:.95rem}
.kv{display:grid;gap:.55rem}
.kv dt{font-size:.78rem;font-weight:700;color:var(--faint)}
.kv dd{font-size:.95rem;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.shop-hero h1,.shop-hero p,.detail h1,.pcard .p-nm{min-width:0;overflow-wrap:anywhere}
.hero{position:relative;overflow:hidden;padding:1.15rem 1.05rem 1.25rem;
  background:linear-gradient(160deg,var(--o50),var(--surface) 64%);
  border:1px solid var(--o200);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;gap:.55rem}
.hero.off{background:var(--surface);border-color:var(--line)}
.hero-t{font-size:1.2rem;line-height:1.42;min-width:0}
.hero-r{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.copy{display:flex;align-items:center;gap:.5rem;width:100%;min-height:48px;
  padding:.5rem .7rem;text-align:start;cursor:pointer;
  background:var(--raised);border:1px solid var(--line);
  font-family:inherit;color:var(--ink)}
.copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  direction:ltr;text-align:left;font-family:var(--mo);font-size:.84rem;color:var(--muted)}
.copy b{flex-shrink:0;font-size:.82rem;color:var(--o700)}
.copy.done b{color:var(--ok)}
.sect-h{display:flex;align-items:center;flex-wrap:wrap;gap:.32ch .6rem;
  margin-block:var(--s3) .6rem}
.sect-h h2{font-size:1rem;min-width:0}
.sect-h .tc{flex-shrink:0}
.tc{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;
  padding-inline:.3rem;font-size:.72rem;background:var(--raised);color:var(--faint);
  font-variant-numeric:lining-nums tabular-nums}
.bar{position:fixed;inset-block-end:0;inset-inline:0;z-index:45;
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-block-start:1px solid var(--line);box-shadow:0 -8px 24px -18px rgba(64,26,4,.4)}
.bar-in{display:flex;align-items:center;gap:.6rem;width:100%;
  max-width:var(--shell);margin-inline:auto}
.bar .btn{flex:1;min-width:0}
.bar .grow{display:none}         
@media(min-width:720px){
  .bar.bar-m{display:none}
  .shell.has-bar-m{padding-block-end:var(--s5)}
}
.shop-top{position:sticky;top:0;z-index:40;
  background:rgba(250,248,246,.94);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.7rem;
  padding:.5rem var(--pad-x);min-height:var(--top-h)}
.shop-id{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1}
.shop-nm{font-size:.98rem;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-hero{display:flex;flex-direction:column;gap:.5rem;
  margin-block-end:var(--s3)}
.shop-hero h1{font-size:1.35rem}
.shop-hero p{font-size:.92rem;line-height:1.8;color:var(--muted)}
.sect{margin-block-start:var(--s4)}
.sect > h2{font-size:1.02rem;margin-block-end:.7rem}
.detail{display:flex;flex-direction:column;gap:.9rem}
.detail > .ph{margin-inline:calc(var(--pad-x) * -1);width:auto}
.detail h1{font-size:1.25rem;line-height:1.45}
.d-pr{font-size:1.5rem;font-weight:700;color:var(--o800);
  font-variant-numeric:lining-nums tabular-nums}
.d-desc{font-size:.96rem;line-height:1.9;color:var(--muted);
  white-space:pre-wrap;overflow-wrap:anywhere}
.order{position:sticky;inset-block-end:calc(.75rem + env(safe-area-inset-bottom));
  z-index:35;margin-block-start:var(--s3)}
.order .btn{width:100%}
.order .tiny{display:block;text-align:center;margin-block-start:.4rem}
.shut{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-align:center;padding:var(--s5) var(--pad);
  background:var(--surface);border:1px solid var(--line)}
.shut b{font-size:1.05rem}
.shut p{font-size:.9rem;color:var(--muted);max-width:28rem}
.by{margin-block-start:var(--s5);padding-block:var(--s3);
  border-block-start:1px solid var(--line-2);text-align:center;
  font-size:.8rem;color:var(--faint)}
.by a{font-weight:700;color:var(--o700)}
.prev{position:relative;margin-inline:auto;width:min(360px,100%);
  padding:.55rem;background:var(--raised);border:1px solid var(--line)}
.prev-in{background:var(--ground);overflow:hidden;
  max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--pad)}
.prev-l{display:block;text-align:center;margin-block-end:.5rem;
  font-size:.76rem;font-weight:700;color:var(--faint)}
.tabs{display:flex;gap:.3rem;margin-block-start:var(--s3);
  border-block-end:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;display:inline-flex;align-items:center;gap:.4rem;
  min-height:48px;padding-inline:.85rem;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;color:var(--muted);
  white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--o700)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;
  inset-block-end:-1px;inset-inline:.4rem;height:3px;background:var(--o-btn);
  border-start-start-radius:3px;border-start-end-radius:3px}
.tabs button[aria-selected="true"] .tc{background:var(--o100);color:var(--o800)}
.tabp{padding-block-start:1rem}
.tabp:focus-visible{outline:2.5px solid var(--o700);outline-offset:4px}
.pane{display:flex;flex-direction:column;align-items:center;gap:.6rem;
  text-align:center;padding:var(--s4) var(--pad);
  background:var(--surface);border:1px dashed var(--line)}
.pane.bad{border-style:solid;border-color:var(--bad-line);background:var(--bad-bg)}
.pane b{font-size:1rem;color:var(--ink)}
.pane p{font-size:.88rem;line-height:1.7;color:var(--muted);max-width:30rem}
.pane .btn{margin-block-start:.35rem;min-width:min(100%,13rem)}
.spin{width:22px;height:22px;border:2.5px solid var(--line);
  border-top-color:var(--o-btn);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sk{height:14px;background:linear-gradient(90deg,var(--line-2),var(--raised),var(--line-2));
  background-size:200% 100%;animation:sk 1.2s linear infinite}
.sk.line{height:12px;width:60%}
.sk.row{height:56px;margin-block:.25rem}
.sk.card{height:140px}
.sk.tile{height:0;padding-block-end:calc(100% + 72px)}
@keyframes sk{to{background-position:-200% 0}}
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,17,16,.42);
  display:grid;place-items:center;padding:var(--pad)}
.modal{width:min(520px,100%);max-height:86dvh;overflow-y:auto;background:var(--surface);
  box-shadow:var(--sh-3);padding:1.25rem;display:flex;flex-direction:column;gap:.8rem}
.modal h2{font-size:1.08rem}
.modal-p{font-size:.92rem;line-height:1.8;color:var(--muted)}
.modal-foot{display:flex;flex-direction:column;gap:.5rem;margin-block-start:.25rem}
.modal-foot .btn{width:100%}
.toasts{position:fixed;inset-block-end:1.25rem;inset-inline:1rem;z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  pointer-events:none}
.toast{max-width:min(28rem,100%);background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;font-size:.88rem;line-height:1.6;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(12px);pointer-events:auto;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.toast.in{opacity:1;transform:translateY(0)}
.toast.bad{background:var(--bad)}
.meter{display:flex;height:8px;overflow:hidden;background:var(--line-2)}
.meter > i{display:block;height:100%;width:0;background:var(--o500);
  transition:width var(--t2) var(--ease)}
.meter.warn > i{background:var(--warn)}
.meter.bad > i{background:var(--bad)}
.meter-l{display:flex;align-items:center;gap:.32ch .5rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--faint)}
.meter-l b{color:var(--ink);font-weight:700}
.crumb,.tc,.sk.line,.drop-x,.terms ul{border-radius:var(--r-s)}
.inp,.err,.pane,.sk,.card,.copy,.drop,.ph,.ph.sm,.ph.logo,.prev-in,.wa-prev,
.solo-card > img,.brand img,.st{border-radius:var(--r-m)}
.band,.modal,.toast,.solo-card,.terms,.pcard,.hero,.shut,.prev,
.sk.card,.sk.row,.sk.tile{border-radius:var(--r-l)}
.btn,.nav a,.pill,.meter,.meter > i,.steps i,.sw i,.sw i::after{border-radius:var(--r-f)}
.btn-p,.btn-s,.btn-d{border-radius:var(--r-m)}
.spin,.btn[aria-busy="true"]::after,.btn-wa::before,.f-err::before{border-radius:50%}
.ph.none::before{border-radius:4px}
.pcard > .ph,.detail > .ph{border-radius:0}
.sep,.scrim,.drop-p,.drop-p > i,.bar,.top,.shop-top{border-radius:0}
@media(min-width:560px){
  .detail > .ph{margin-inline:0;width:100%;border-radius:var(--r-l)}
  .modal-foot{flex-direction:row;justify-content:flex-start}
  .modal-foot .btn{width:auto;min-width:9rem}
  .birth{grid-template-columns:1fr 1.6fr 1.2fr}
}
@media(min-width:720px){
  :root{--pad-x:32px;--top-h:58px}
  .shell{padding:var(--s4) var(--pad-x) var(--s5)}
  .page-head h1{font-size:1.7rem}
  .sec-head h2{font-size:1.15rem}
  .hero{padding:1.6rem 1.5rem}
  .hero-t{font-size:1.45rem}
  .fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .modal{padding:1.5rem}
  .shop-hero h1{font-size:1.7rem}
  .detail h1{font-size:1.6rem}
  .toasts{inset-inline:auto 1.5rem;align-items:flex-end}
  .bar .grow{display:block;flex:1}
  .bar .btn{flex:0 0 auto;min-width:10rem}
}
@media(min-width:960px){
  .detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:var(--s4);align-items:start}
  .detail > *{grid-column:2;min-width:0}
  .detail > .ph{grid-column:1;grid-row:1 / span 20}
  .order{position:static}
  .prev{width:380px;margin-inline:0}
}
@media(min-width:560px){
  .inp{max-width:32rem}
  textarea.inp{max-width:38rem}
  .money .inp,
  .inp[inputmode="numeric"]{max-width:12rem}
  .inp[type="tel"],
  .inp[inputmode="tel"]{max-width:14rem}
  .pw .inp{max-width:24rem}
  .slug .inp{max-width:30rem}
  .birth{max-width:22rem;grid-template-columns:1fr 1.5fr 1.15fr}
  .drop{max-width:340px;margin-inline:auto}
  .drop .ph{max-width:300px;margin-inline:auto}
  .detail > .ph{max-width:min(100%,440px);margin-inline:auto}
  .shop-hero p,
  .terms,
  .terms.full,
  .d-desc,
  .hero-s{max-width:36rem}
  .shop-hero p,
  .terms.full{margin-inline:auto}
  .terms{max-height:56dvh}
}
@media(min-width:720px){
  .row > .btn.grow{flex:0 1 auto;min-width:11rem;max-width:18rem}
  .shell.narrow{max-width:720px}
}
@media(max-width:719.98px){
  .btn-sm{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .toast{opacity:1;transform:none}
}
@media print{
  .top,.shop-top,.bar,.order,.toasts,.nav,.crumb{display:none !important}
  body{background:#fff}
  .pcard,.card,.hero{box-shadow:none;break-inside:avoid}
}
.art{
  display:block;
  margin-inline:auto;
  max-width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:30%;
  background:radial-gradient(118% 118% at 30% 20%,
    #FFF6EE 0%, #FDF0E4 52%, #FAE8D9 100%);
  border:1px solid rgba(233,110,18,.10);
}
.art.wide{ aspect-ratio:3 / 2; border-radius:var(--r-xl); }
@media (prefers-reduced-motion: reduce){ .art{ animation:none !important; } }
.acc{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  overflow:hidden}
.acc + .acc{margin-block-start:.75rem}
.acc-s{display:flex;align-items:center;gap:.6rem;min-height:64px;
  padding:.85rem 1rem;cursor:pointer;list-style:none}
.acc-s::-webkit-details-marker{display:none}
.acc-s .stack{gap:var(--x0)}
.acc-t{font-size:.98rem;font-weight:700;line-height:1.45;min-width:0}
@media(hover:hover){.acc-s:hover{background:var(--o50)}}
.acc-s::after{content:"";flex-shrink:0;width:8px;height:8px;
  margin-inline-start:.35rem;transform:rotate(45deg) translate(-2px,-2px);
  border-bottom:2px solid var(--o700);border-right:2px solid var(--o700);
  transition:transform var(--t) var(--ease)}
.acc[open] > .acc-s::after{transform:rotate(225deg) translate(-2px,-2px)}
.acc[open] > .acc-s{border-block-end:1px solid var(--line-2)}
.acc-b{display:flex;flex-direction:column;gap:1rem;padding:1rem}
.drop[aria-disabled="true"]{opacity:.5;pointer-events:none}
.msg{white-space:pre-wrap;overflow-wrap:anywhere;
  padding:.75rem .85rem;font-size:.9rem;line-height:1.85;color:var(--ink);
  background:var(--surface);border:1px solid var(--line)}
.prev-in.bleed{padding-block-start:0}
.prev-in.bleed > .shop-top{margin-inline:calc(var(--pad) * -1)}
.prev-in.bleed > .shop-hero{margin-block-start:var(--pad)}
.prev-in a{pointer-events:none;cursor:default}
.cnt.ok,.cnt.over{direction:ltr}
.acc{border-radius:var(--r-l)}
.msg{border-radius:var(--r-m)}
.prev .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.prev .detail{display:flex;flex-direction:column;gap:.9rem}
.prev .detail > .ph{grid-column:auto;grid-row:auto;width:auto;
  margin-inline:calc(var(--pad) * -1);border-radius:0}
.prev .order{position:sticky;inset-block-end:.75rem}
.drop.lock{cursor:default}
.drop.lock:hover{border-color:var(--line);background:var(--surface)}
.wa-prev{padding:.65rem .8rem;background:var(--raised);border:1px solid var(--line);
  font-size:.86rem;line-height:1.8;color:var(--muted);
  white-space:pre-wrap;overflow-wrap:anywhere}
.sw-g{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
  max-width:26rem}
.sw-t{position:relative;display:block;width:100%;aspect-ratio:1;
  min-height:44px;padding:0;cursor:pointer;
  border:2px solid var(--line);background:var(--surface);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.sw-t:active{transform:scale(.94)}
@media(hover:hover){.sw-t:hover{border-color:var(--sw,var(--o400))}}
.sw-t:focus-visible{outline:2px solid var(--o600);outline-offset:2px}
.sw-t i{position:absolute;inset-inline:0;inset-block-end:0;
  display:block;height:34%;
  border-end-start-radius:inherit;border-end-end-radius:inherit}
.sw-t.on{border-color:var(--o600);box-shadow:0 0 0 2px var(--o200)}
.sw-t.on::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:5px;
  width:14px;height:14px;border-radius:var(--r-f);
  background:var(--o600);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.tprev{max-width:22rem}
.tprev-in{display:flex;flex-direction:column;gap:.7rem;
  padding:1rem;border:1px solid var(--line)}
.tprev-h{display:flex;flex-direction:column;gap:.15rem}
.tprev-h b{font-size:1.05rem}
.tprev-h span{font-size:.78rem;opacity:.72}
.tprev-c{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .8rem;border:1px solid var(--line)}
.tprev-c b{font-size:.9rem;min-width:0}
.tprev-c span{font-size:.9rem;font-weight:700;white-space:nowrap}
.tprev-b{display:block;padding:.65rem;text-align:center;
  font-size:.88rem;font-weight:700}
.sw-t{border-radius:var(--r-m)}
.tprev-in{border-radius:var(--r-l)}
.tprev-c,.tprev-b{border-radius:var(--r-m)}
.hero-2{display:grid;gap:var(--s3);align-items:center}
.hero-i{max-width:min(100%,420px);margin-inline:auto}
@media(min-width:900px){
  .hero-2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero-i{max-width:100%;margin-inline:0}
}
.hero-end{text-align:center}
.hero-end .hero-r{justify-content:center}
.hero-end .hero-s{margin-inline:auto}
.f-card{display:flex;flex-direction:column;gap:.55rem}
.f-card .art{margin-inline-start:0;margin-inline-end:auto}
.f-card h3{font-size:1rem}
.f-card p{margin:0}
.p-plan{position:relative;display:flex;flex-direction:column;gap:.45rem}
.p-plan .d-pr{font-size:1.7rem;line-height:1.15}
.p-plan .pill{align-self:flex-start}
.p-plan.best{border-color:var(--o300);box-shadow:var(--sh-2)}
.p-li{display:flex;flex-direction:column;gap:var(--x1);
  margin:.3rem 0 0;padding:0;list-style:none}
.p-li li{position:relative;padding-inline-start:var(--x5);
  font-size:.86rem;line-height:1.6;color:var(--muted);min-width:0}
.p-li li::before{content:"\2713";position:absolute;inset-inline-start:0;
  color:var(--o700);font-weight:700}
.p-plan{border-radius:var(--r-l)}
:root{
  --f1:.75rem;    
  --f2:.8125rem;  
  --f3:.875rem;   
  --f4:1rem;      
  --f5:1.125rem;  
  --f6:1.375rem;  
  --f7:1.75rem;   
  --w-n:400; --w-b:700;
  --x0:2px;
  --x1:4px;  --x2:8px;  --x3:12px; --x4:16px;
  --x5:20px; --x6:24px; --x7:32px; --x8:48px;
  --lh1:1.3;   
  --lh2:1.55;  
  --lh3:1.75;  
  --art-m:96px;   
  --art-l:128px;  
  --o-ink:#fff;
}
body{line-height:var(--lh3)}
h1,h2,h3,h4{line-height:var(--lh1);font-weight:var(--w-b)}
.tiny,.hint,.f-err,.cnt,.st,.pill,.tc,.p-meta,.cd,.step-n,.slug-s,
.terms-note,.prev-l,.kv dt,.meter-l,.tprev-h span,.by{font-size:var(--f1)}
.tiny,.f-err,.p-meta{line-height:var(--lh2)}
.hint{line-height:var(--lh3)}
.eyebrow,.f label,.btn-sm,.crumb,.link,.resend,.age-out,.otp-m,
.copy b,.copy code,.pw .eye,.drop-x,.tprev-b{font-size:var(--f2)}
.slug-p,.money::after{font-size:var(--f2)}
.band,.err,.pane p,.modal-p,.p-li li,.toast,.wa-prev,.drop,.nav a,
.tabs button,.sw span,.solo-card p,.shut p,.msg,.p-nm,
.tprev-c b,.tprev-c span{font-size:var(--f3)}
.band,.err,.p-li li,.toast,.p-nm{line-height:var(--lh2)}
.pane p,.modal-p,.wa-prev,.msg{line-height:var(--lh3)}
.f-card p{font-size:var(--f3);line-height:var(--lh2)}
.inp,.btn,.d-desc,.shop-hero p,.terms,.terms.full,.kv dd,
.hero-s,.hero p,.brand{font-size:var(--f4)}
.btn{line-height:var(--lh1)}
.d-desc,.shop-hero p,.terms,.terms.full{line-height:var(--lh3)}
.kv dd{line-height:var(--lh2)}
.hero-s,.hero p{line-height:var(--lh3);color:var(--muted)}
.card h3,.f-card h3,.sec-head h2,.sect > h2,.sect-h h2,.pane b,.drop b,
.acc-t,.shop-nm,.shut b,.modal h2,.terms h3,.terms.full h2,
.tprev-h b,.p-pr{font-size:var(--f5)}
.acc-t,.shop-nm{line-height:var(--lh1)}
.page-head h1,.shop-hero h1,.detail h1,.hero-t,.solo-card h1{font-size:var(--f6)}
.hero-t,.detail h1{line-height:var(--lh1)}
.d-pr{font-size:var(--f7);line-height:var(--lh1)}
.p-plan .d-pr{font-size:var(--f7);line-height:var(--lh1)}
.otp .inp{font-size:var(--f7);font-weight:var(--w-b);line-height:var(--lh1)}
.row{gap:var(--x2)}
.row.tight{gap:var(--x1)}
.stack{gap:var(--x4)}
.stack.sm{gap:var(--x2)}
.stack.lg{gap:var(--x6)}
.p-meta,.meter-l{gap:.32ch var(--x2)}
.sect-h{gap:.32ch var(--x2)}
.f{gap:var(--x1)}
.fgrid{gap:var(--x3)}
.inp{padding:var(--x3)}
.err{padding:var(--x2) var(--x3)}
.drop{gap:var(--x2);padding:var(--x5)}
.copy{gap:var(--x2);padding:var(--x2) var(--x3)}
.sw{gap:var(--x2)}
.card{gap:var(--x2);padding:var(--x4)}
.hero{gap:var(--x2);padding:var(--x5) var(--x4)}
.hero-r{gap:var(--x2)}
.f-card{gap:var(--x2)}
.p-plan{gap:var(--x2)}
.p-li{gap:var(--x2)}
.band{gap:var(--x3);padding:var(--x3) var(--x4)}
.pane{gap:var(--x3);padding:var(--x7) var(--x5)}
.shut{gap:var(--x3);padding:var(--s5) var(--x5)}
.solo-card{gap:var(--x3);padding:var(--x7) var(--x6)}
.modal{gap:var(--x3);padding:var(--x5)}
.modal-foot{gap:var(--x2)}
.terms{gap:var(--x3);padding:var(--x4)}
.terms.full{gap:var(--x4);padding:var(--x5) var(--x4)}
.acc-s{padding:var(--x3) var(--x4)}
.acc-b{gap:var(--x4);padding:var(--x4)}
.msg{padding:var(--x3)}
.wa-prev{padding:var(--x3)}
.toast{padding:var(--x3) var(--x4)}
.tprev-in{gap:var(--x2);padding:var(--x4)}
.tprev-c{gap:var(--x2);padding:var(--x3)}
.grid{gap:var(--x3)}
.pcard .p-in{gap:var(--x1);padding:var(--x3)}
.p-tag{gap:var(--x1)}
.detail{gap:var(--x4)}
.shop-hero{gap:var(--x2)}
.tabs{gap:var(--x1)}
.steps{gap:var(--x1)}
.p-pr,.d-pr{color:var(--o700)}
.btn-p{color:var(--o-ink)}
.tabs button[aria-selected="true"] .tc{background:var(--o-btn);color:var(--o-ink)}
.art{width:var(--art-m);height:var(--art-m)}
.pane > .art,.shut > .art{width:var(--art-l);height:var(--art-l)}
.hero > .art{width:var(--art-l);height:var(--art-l);
  margin-inline-start:0;margin-inline-end:auto}
.art.wide{width:100%;height:auto}
.order{position:sticky;inset-block-end:0;z-index:35;
  margin-block-start:var(--x6);
  padding-block:var(--x2) calc(var(--x3) + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--ground) 78%,transparent)}
.order .btn{width:100%}
.order .tiny{display:block;text-align:center;margin-block-start:var(--x2)}
.order{border-radius:0}
@media(min-width:720px){
  :root{--f5:1.25rem; --f6:1.625rem; --f7:2rem}   
  .hero{padding:var(--x6)}
  .modal{padding:var(--x6)}
}
@media(min-width:960px){
  .order{position:static;padding-block:0;background:none}
}
.prev .order{position:sticky;inset-block-end:0;
  padding-block:var(--x2) var(--x3);
  background:linear-gradient(to top,var(--ground) 78%,transparent)}
.prev .detail{align-items:stretch}
.shop-id .stack{gap:var(--x1)}
.shop-hero p{font-size:var(--f3);line-height:var(--lh3)}
.pcard .p-nm{font-size:var(--f4);line-height:var(--lh2)}
.s-head{display:flex;flex-direction:column;align-items:center;
  gap:var(--x3);text-align:center;margin-block-end:var(--x6)}
.s-cover{position:relative;width:100%;height:96px;
  margin-block-end:52px}
.s-cover-bg{position:absolute;inset:0;overflow:hidden;
  border-radius:var(--r-l);
  background:
    center / cover no-repeat url("/img/shop-cover.webp"),
    linear-gradient(160deg,
      color-mix(in srgb, var(--o600) 30%, var(--ground)) 0%,
      color-mix(in srgb, var(--o600) 12%, var(--ground)) 100%)}
.s-cover-bg{background-blend-mode:luminosity, normal}
.s-cover-bg::after{content:"";position:absolute;inset-inline:0;
  inset-block-end:0;height:52%;
  background:linear-gradient(to bottom, transparent, var(--ground))}
.s-cover .ph.logo-lg{position:absolute;inset-inline:0;margin-inline:auto;
  inset-block-end:-52px;
  width:104px;aspect-ratio:1;
  background:var(--surface);border-radius:var(--r-f);
  box-shadow:0 0 0 4px var(--ground), var(--sh-2)}
.s-cover .ph.logo-lg img{object-fit:cover}
.s-head h1{font-size:var(--f6);line-height:var(--lh1)}
.s-meta{justify-content:center}
.s-desc{max-width:36rem;margin:0;
  font-size:var(--f3);line-height:var(--lh3);color:var(--muted)}
.s-phone{justify-content:center;gap:var(--x2)}
.s-phone .num{font-size:var(--f3);font-weight:var(--w-b);color:var(--o700)}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.tabs{border-block-end:0;gap:var(--x2);padding-block-end:var(--x2);
  margin-block-start:0;margin-block-end:var(--x4)}
.tabs button{min-height:40px;padding-inline:var(--x4);
  border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:var(--f2);font-weight:var(--w-b);
  border-radius:var(--r-f);white-space:nowrap}
.tabs button[aria-selected="true"]{
  background:var(--o-btn);border-color:var(--o-btn);color:var(--o-ink)}
.tabs button[aria-selected="true"]::after{display:none}
.tabs button .tc{background:var(--raised);color:var(--muted)}
.tabs button[aria-selected="true"] .tc{
  background:color-mix(in srgb, #fff 26%, transparent);color:var(--o-ink)}
.pcard{gap:0}
.pcard > .ph{aspect-ratio:1}
.pcard .p-nm{font-size:var(--f4);line-height:var(--lh2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.pcard .p-pr{font-size:var(--f5);color:var(--o700)}
@media(min-width:720px){
  .s-cover{height:132px;margin-block-end:60px}
  .s-cover .ph.logo-lg{width:120px;inset-block-end:-60px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
.d-head{display:flex;flex-direction:column;gap:var(--x3)}
.d-nm{font-size:var(--f5);line-height:var(--lh1);min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ph.logo-md{width:56px;flex-shrink:0;background:var(--surface);
  border-radius:var(--r-m)}
.ph.logo-md img{object-fit:cover}
.d-head .copy{width:100%}
h3{font-size:var(--f5)}
.copy{font-size:var(--f2)}
.tabs button{min-height:44px}
.drop-x,.pw .eye{min-height:38px}
.pw .eye::after,
.drop-x::after{content:"";position:absolute;inset-inline:0;
  inset-block:calc((44px - 100%) / -2);
  min-height:44px}
.pcard{padding:var(--x2)}
.pcard > .ph{border-radius:var(--r-m)}
.detail > .ph{border-radius:var(--r-l)}
.prev .detail > .ph{border-radius:var(--r-m)}
.order{border-radius:var(--r-l) var(--r-l) 0 0}
.acc-s .art{flex-shrink:0;margin-inline:0;width:44px;height:44px}
.sub-box{display:flex;flex-direction:column}
.sub-box .band{margin:0;border-end-start-radius:0;border-end-end-radius:0}
.sub-box .meter{border-radius:0 0 var(--r-m) var(--r-m);height:6px}
.step-head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--x2);
  margin-block-end:var(--x2);
}
.step-head .art{width:84px;height:84px;margin:0}
.step-head h2{margin:0}
.step-head .hint{margin:0;max-width:34rem}
.steps i{height:5px}
.steps i.done{background:var(--o400)}
.min0{min-width:0}
.step-head h2{font-size:var(--f6);line-height:var(--lh1)}
.brand,.by a,.made a{position:relative}
.brand::after,.by a::after,.made a::after{
  content:'';position:absolute;inset-inline:-6px;inset-block:50%;
  block-size:44px;transform:translateY(-22px);
}
.hero > .art.wide{ margin-inline:auto }
@media(min-width:900px){ .hero > .art.wide{ margin-inline:0 } }
@media(min-width:720px){
  .p-item{flex-direction:row;align-items:center;gap:var(--x4)}
  .p-item .p-main{flex:1 1 auto;min-width:0}
  .p-item .p-note{flex:0 1 15rem;min-width:0;margin:0;text-align:start}
  .p-item .p-acts{flex:0 0 auto}
  .p-item .p-main > .stack{flex-direction:row;align-items:center;gap:var(--x3)}
  .p-item .p-tag{flex:0 0 auto}
  .p-item .p-pr{flex:0 0 auto}
  .p-item .p-nm{flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p-item .band{flex:1 0 100%;order:9}
}
.acc-s .art{width:56px;height:56px}
.stack > div:not([class]):empty,
.row > div:not([class]):empty{ display:none }
.p-nm,.d-nm,.shop-nm,.s-head h1,.detail h1{ overflow-wrap:anywhere }
.tabs{
  scroll-snap-type:x proximity;
  padding-inline:var(--x1);
  -webkit-mask-image:linear-gradient(to left,
    transparent 0, #000 var(--x5), #000 calc(100% - var(--x5)), transparent 100%);
  mask-image:linear-gradient(to left,
    transparent 0, #000 var(--x5), #000 calc(100% - var(--x5)), transparent 100%);
}
.tabs button{scroll-snap-align:center}
@supports (animation-timeline:scroll()){
  .tabs{animation:tabs-edge linear;animation-timeline:scroll(self inline)}
}
@keyframes tabs-edge{
  from{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - var(--x5)),transparent 100%);
       mask-image:linear-gradient(to left,#000 0,#000 calc(100% - var(--x5)),transparent 100%)}
  to{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 var(--x5),#000 100%);
     mask-image:linear-gradient(to left,transparent 0,#000 var(--x5),#000 100%)}
}
.up-bar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  block-size:3px;background:var(--line-2);pointer-events:none;
}
.up-bar > i{
  display:block;block-size:100%;inline-size:0;
  background:var(--o-btn);border-end-end-radius:3px;
  transition:inline-size .18s linear;
}
.up-bar.idle > i{inline-size:35%;animation:up-slide 1.1s ease-in-out infinite}
@keyframes up-slide{
  from{transform:translateX(-120%)}
  to{transform:translateX(340%)}
}
@media (prefers-reduced-motion:reduce){
  .up-bar.idle > i{animation:none;inline-size:100%;opacity:.5}
  .up-bar > i{transition:none}
}
.bar-in > .btn:only-of-type{flex:0 1 auto;min-width:min(100%,16rem);margin-inline:auto}
.sec-mv .btn,.sec-ops > .btn-d{min-height:44px}
.row.tight.sec-mv{gap:0}
.sec-mv .btn:first-child{border-start-end-radius:0;border-end-end-radius:0}
.sec-mv .btn:last-child{border-start-start-radius:0;border-end-start-radius:0;
  margin-inline-start:-1.5px}
.sec-tip::before{content:"+";font-weight:var(--w-b);color:var(--o700);
  margin-inline-end:var(--x0)}
@media (max-width:520px){
  .sec-tips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-block-end:var(--x1);-webkit-overflow-scrolling:touch}
  .sec-tips::-webkit-scrollbar{display:none}
  .sec-tips > .btn{flex-shrink:0}
}
@media(min-width:900px){
  .d-head .d-go{flex-wrap:nowrap}
  .d-head .d-go > .copy{width:auto;flex:1 1 12rem;min-width:0}
}
.sec > .card > p.tiny,
.acc-b > p{ max-width:46rem }
.card .kv + .tiny + .row.tight{
  margin-block-start:var(--x0);padding-block-start:var(--x2);
  border-block-start:1px solid var(--line-2)}
.brand-store .ph.top-logo{
  flex-shrink:0;inline-size:32px;block-size:32px;
  border-radius:var(--r-s);overflow:hidden;background:var(--o50);
}
.brand-store .ph.top-logo img{inline-size:100%;block-size:100%;object-fit:cover}
.clamp1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:559.98px){
  .s-head{gap:var(--x2);margin-block-end:var(--x4)}
  .s-cover{height:80px;margin-block-end:44px}
  .s-cover .ph.logo-lg{width:84px;inset-block-end:-44px;
    box-shadow:0 0 0 3px var(--ground), var(--sh-2)}
  .s-head h1{font-size:var(--f5)}
}
.s-phone a{position:relative}
.s-phone a::after{content:'';position:absolute;inset-inline:-8px;
  inset-block:50%;block-size:44px;transform:translateY(-22px)}
.bar-shop .bar-in > .btn:only-of-type{min-width:min(100%,22rem)}
.sec-pick .btn{justify-content:space-between}
.scrim:has(.zoom) .modal{width:min(760px,100%);padding:var(--x3)}
.zoom{width:100%;max-height:72dvh;object-fit:contain;margin-inline:auto;
  border-radius:var(--r-m)}
.detail > .ph[role="button"]{cursor:zoom-in}
.btn-p:hover{background:#B33C00}
.btn-p:hover{background:color-mix(in srgb, var(--o-btn) 88%, #000)}
.btn-p:active{background:#9E3500}
.btn-p:active{background:color-mix(in srgb, var(--o-btn) 78%, #000)}
.shop-top{background:rgba(250,248,246,.94)}
.shop-top{background:color-mix(in srgb, var(--ground) 94%, transparent)}
.bar{background:rgba(255,255,255,.96)}
.bar{background:color-mix(in srgb, var(--surface) 96%, transparent)}
.pcard .p-in{padding:var(--x2) var(--x3) var(--x3)}
@media (max-width:559.98px){
  .shop-top .shop-id > .ph.logo{display:none}
  .shop-top .shop-id .tiny{display:none}
}
.d-acts{flex-wrap:wrap;justify-content:center;margin-block-start:var(--x2)}
.shop-top .shop-id{min-height:44px;align-items:center}
@media (max-height:740px){
  .detail > .ph{aspect-ratio:auto;max-block-size:44dvh}
  .detail > .ph img{block-size:100%;object-fit:contain}
}
.detail{padding-block-end:var(--x7)}
.auth-art,.terms-art{display:flex;justify-content:center;margin-block-end:var(--x3)}
.p-plan .art{margin-inline:0;margin-block-end:var(--x1)}
.solo-card .art{margin-inline:auto;margin-block-end:var(--x2)}
.purge-warn{align-items:flex-start}
.purge-warn .art{flex-shrink:0;width:56px;height:56px;margin:0}
.sec-row{align-items:stretch;gap:var(--x2)}
.sec-open{
  display:flex;align-items:center;gap:var(--x3);
  min-height:56px;padding:var(--x2) var(--x3);
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);cursor:pointer;
  font-family:inherit;text-align:start;color:inherit;
}
.sec-open:hover{border-color:var(--o300);background:var(--o50)}
.sec-nm{flex:1;min-width:0;font-size:var(--f4);font-weight:var(--w-b)}
.sec-meta{flex-shrink:0}
.sec-open::after,.p-go::after{
  content:"";flex-shrink:0;order:-1;inline-size:8px;block-size:8px;
  border-inline-start:2px solid var(--faint);border-block-end:2px solid var(--faint);
  transform:rotate(45deg);margin-inline-end:var(--x1);
}
.sec-mv .btn{min-inline-size:40px;padding-inline:var(--x2)}
.sec-row{gap:0}
.sec-row .sec-open{border-start-start-radius:0;border-end-start-radius:0;
  border-inline-start:0}
.sec-mv{border:1px solid var(--line);border-radius:var(--r-m);
  border-start-end-radius:0;border-end-end-radius:0;overflow:hidden}
.sec-mv .btn{border:0;border-radius:0;background:var(--surface)}
.sec-mv .btn + .btn{border-inline-end:1px solid var(--line-2)}
.sec-in{display:flex;flex-direction:column;gap:var(--x1);
  max-block-size:40dvh;overflow-y:auto}
.sec-in li{display:flex;align-items:center;gap:var(--x3);
  padding:var(--x2) var(--x3);border-radius:var(--r-s);background:var(--raised)}
.p-item{
  display:flex;align-items:center;gap:var(--x3);
  inline-size:100%;text-align:start;cursor:pointer;
  font-family:inherit;color:inherit;
}
.p-item:hover{border-color:var(--o300)}
.p-ph{position:relative;flex-shrink:0}
.p-dot{
  position:absolute;inset-block-start:-3px;inset-inline-start:-3px;
  inline-size:14px;block-size:14px;border-radius:var(--r-f);
  border:2px solid var(--surface);
}
.p-dot.live{background:var(--ok)}
.p-dot.warn{background:var(--warn)}
.p-dot.bad{background:var(--bad)}
.p-dot.mut{background:var(--faint)}
.p-go{display:flex;align-items:center;flex-shrink:0}
.p-sheet-h{align-items:center;gap:var(--x3)}
.eye-i{position:relative;flex-shrink:0;inline-size:22px;block-size:22px;
  display:inline-flex;align-items:center;justify-content:center}
.eye-i > b{inline-size:20px;block-size:12px;border:2px solid var(--o700);
  border-radius:50% / 60% 60% 40% 40%}
.eye-i::after{content:"";position:absolute;inline-size:6px;block-size:6px;
  border-radius:var(--r-f);background:var(--o700)}
.eye-i > s{position:absolute;inline-size:24px;block-size:2px;
  background:var(--faint);transform:rotate(-45deg);opacity:0;
  transition:opacity var(--t) var(--ease)}
.eye-i.off > b{border-color:var(--faint)}
.eye-i.off::after{background:var(--faint)}
.eye-i.off > s{opacity:1}
.sw-state{font-size:var(--f3);font-weight:var(--w-b);color:var(--ink)}
.sw-phone{gap:var(--x3)}
.st-row{gap:var(--x2);align-items:stretch}
.st-box{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:var(--x0);
  padding:var(--x3);border-radius:var(--r-m);
  background:var(--raised);border:1px solid var(--line-2);
}
.st-l{font-size:var(--f1);font-weight:var(--w-b);color:var(--faint)}
.st-v{font-size:var(--f4);line-height:var(--lh1);
  overflow-wrap:anywhere;font-variant-numeric:lining-nums tabular-nums}
.st-box.ok{background:var(--ok-bg);border-color:var(--ok-line)}
.st-box.warn{background:var(--warn-bg);border-color:var(--warn-line)}
@media (max-width:420px){ .st-row{flex-direction:column} }
[tabindex="-1"]:focus{outline:none}
@media(min-width:560px){
  .f{max-width:32rem}
  .f:has(textarea){max-width:38rem}
  .f > .inp{max-width:none}
  .money{display:block;max-width:12rem}
  .money .inp{width:100%;max-width:none}
  .drop{margin-inline-start:0;margin-inline-end:auto}
}