/* ================= design system =================
   SPACING SCALE (4px baseline grid — ECL/Harmonic/NN-G):
     --sp-N is literally N x 4px, so every value from 4px to 64px is on the grid.
     Layout spacing (between components) uses tokens only.
     Inner/component spacing may use a half step (2px) but never stacks arbitrary values.
   TYPE: 3 sizes carry hierarchy — display (h1), heading (h2/h3), body (16px).
   Keep new rules on these tokens; do not invent margins like 14px or 22px.
   ================================================== */
:root{
  /* default palette: one deep berry on clean white — every text pair here passes WCAG AA */
  --bg:#ffffff; --surface:#ffffff; --ink:#2b1b22; --muted:#6f5a63; --line:#b57f9e;
  /* edges must read: card hairline ~3:1 (WCAG 1.4.11); form controls get the stronger boundary */
  --line-strong:#a05575;
  --accent:#9d174d; --accent-dark:#bc1450; --accent-soft:#fdebf3;
  --head-bg:#ffffff; --head-ink:#2b1b22; --sun:#9d174d;
  --warm:#b45309; --warm-soft:#f5efea; --danger:#b3261e; --danger-soft:#fdecea;
  --ok:#2e7d32; --ok-soft:#e7f4ea; --radius:10px; --shadow:0 1px 2px rgba(43,27,34,.07);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-7:28px;  --sp-8:32px;
  --sp-9:36px;  --sp-10:40px; --sp-11:44px; --sp-12:48px;
  --sp-13:52px; --sp-14:56px; --sp-15:60px; --sp-16:64px;
  --section-gap:var(--sp-10);
  /* TYPE SCALE — one fluid scale for the whole site (owner 2026-10-11,
     calibrated to memmo.me's rhythm: 390px phone ≈ section 24 / card 19 /
     body 16 / meta 13; desktop grows gently, never bulky). Never pure vw
     (zoom-safe); rem floor/ceiling; the ONLY place sizes are defined. */
  --step--1:clamp(.8125rem,.7917rem + .0926vw,.875rem);   /* meta, captions: 13 → 14 */
  --step-0:clamp(1rem,.9688rem + .1389vw,1.0938rem);       /* body: 16 → 17.5 */
  --step-1:clamp(1.1875rem,1.0833rem + .463vw,1.5rem);     /* h3, card titles: 19 → 24 */
  --step-2:clamp(1.5rem,1.3333rem + .7407vw,2rem);         /* h2, section titles: 24 → 32 */
  --step-3:clamp(1.625rem,1.4167rem + .9259vw,2.25rem);    /* h1: 26 → 36 */
  --step-4:clamp(1.875rem,1.5417rem + 1.4815vw,2.875rem);  /* hero/display: 30 → 46 */
  /* familiar aliases, all riding the scale (theme re-aliases, never re-fixes) */
  --fs-display:var(--step-4); --fs-h1:var(--step-3); --fs-h2:var(--step-2); --fs-h3:var(--step-1); --fs-price:var(--step-2);
  /* micro-type tokens used by the theme (were undefined — fixed here) */
  --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-16:1rem; --t-18:1.125rem; --t-20:1.25rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0 0 1em}
small,.muted{color:var(--muted)}
/* fluid: fills phones edge-to-edge, grows with the screen, only caps on very wide monitors */
.wrap{max-width:min(1360px,100%);margin:0 auto;padding:0 clamp(14px,3.2vw,40px)}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 var(--sp-4)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}

/* ---------- store header: one slim, colourful row; the menu slides in from the left ---------- */
.announce{background:var(--accent);color:#fff;font-size:.75rem;line-height:1.35;text-align:center;padding:4px 10px;letter-spacing:.01em}
.announce a{color:#fff;text-decoration:underline}
.site-head{background:var(--head-bg);color:var(--head-ink);position:relative;border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(43,27,34,.05)}
.site-head .bar{display:flex;align-items:center;gap:10px;min-height:50px;padding-top:4px;padding-bottom:4px}
.logo{font-family:var(--serif);font-size:1.18rem;color:var(--head-ink);font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.02em;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo img{height:30px;width:auto}
.head-nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.head-nav a{color:var(--head-ink);font-weight:600;font-size:.88rem;padding:6px 10px;border-radius:999px}
.head-nav a:hover{background:rgba(157,23,77,.08);text-decoration:none}
.head-search{flex:0 1 240px;display:flex;gap:6px;margin-left:auto}
.site-head .head-search input{flex:1;min-width:0;background:#fff;border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:.9rem}
.site-head .head-search input::placeholder{color:var(--muted);opacity:1}
.site-head .head-search .btn{background:var(--accent);color:#fff;border:0;border-radius:999px;font-weight:700}
.head-links{display:flex;align-items:center;gap:8px}
.head-cta .btn{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:999px;font-weight:700}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#f7f1f4;border:1px solid var(--line);color:var(--ink);list-style:none;cursor:pointer}
.icon-btn:hover{background:var(--accent-soft);text-decoration:none}
.count-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;line-height:1}
.menu{position:relative}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary .dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 34px rgba(42,16,48,.18);min-width:200px;max-width:calc(100vw - 24px);padding:8px;z-index:40}
.menu-panel a{display:block;padding:10px 12px;color:var(--ink);border-radius:10px}
.menu-panel a:hover{background:var(--bg);text-decoration:none}

/* ---------- flash / alerts ---------- */
.flash{border-radius:var(--radius);padding:10px 14px;margin:var(--sp-4) 0;font-size:.95rem}
.flash.ok{background:var(--ok-soft);color:var(--ok);border:1px solid #cfe8d1}
.flash.err{background:var(--danger-soft);color:var(--danger);border:1px solid #f3cfcb}
.flash.info{background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--line)}

/* ---------- hero / sections ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:var(--sp-10) 0 var(--sp-8);margin-bottom:var(--sp-6)}
.hero h1{font-size:var(--fs-display);max-width:640px}
.hero p{color:var(--muted);max-width:560px}
.section{margin:var(--section-gap) 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:var(--sp-4)}
.section-head h2{margin:0}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.head-search{order:0;flex:0 1 260px}}
@media(min-width:960px){.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* product grids are mobile-first like marketplace apps: two cards per row on phones,
   then as many as fit (min 230px each) — no fixed breakpoints to outgrow */
.grid:has(>.p-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:760px){.grid:has(>.p-card){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}}
@media(min-width:1100px){.grid.cols-4:has(>.p-card){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:759px){
  .p-card .card-pad{padding:10px 10px 12px;gap:4px}
  .p-card .p-title{font-size:.92rem;line-height:1.3}
  .p-card .price{font-size:1.02rem}
  .p-card .p-seller,.p-card .p-rate{font-size:.78rem}
}
/* drawer: slides in from the LEFT and always stays inside the screen; tap the dimmed area to close */
.nav-drawer{display:none}
.nav-drawer>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#f7f1f4;border:1px solid var(--line)}
.nav-drawer>summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;content:"";position:relative}
.burger::before{position:absolute;top:-6px}.burger::after{position:absolute;top:6px}
.nav-drawer[open]>summary::after{content:"";position:fixed;inset:0;background:rgba(24,6,34,.5);z-index:55;animation:dim .2s ease}
.drawer-panel{position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(84vw,340px);background:var(--surface);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;padding:14px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:12px 0 40px rgba(24,6,34,.3);
  display:flex;flex-direction:column;gap:6px;animation:slide-in .26s cubic-bezier(.2,.8,.2,1)}
.drawer-top{padding:14px 16px;margin:-14px -14px 8px;background:var(--accent);color:#fff;font-family:var(--serif);font-size:1.25rem;font-weight:700}
.drawer-panel nav,.drawer-acc{display:flex;flex-direction:column}
.drawer-acc{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.drawer-panel a{padding:12px 14px;border-radius:12px;color:var(--ink);font-weight:600}
.drawer-panel a:hover{background:var(--bg);text-decoration:none}
.drawer-panel .btn.primary{margin-top:6px;text-align:center;justify-content:center;color:#fff}
.drawer-search{display:flex;gap:6px;padding:0 0 8px}
.drawer-search input{flex:1;min-width:0}
body:has(.nav-drawer[open]){overflow:hidden}
@keyframes slide-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes dim{from{opacity:0}to{opacity:1}}
@media(max-width:899px){
  .head-nav,.head-search,.head-cta{display:none}
  .nav-drawer{display:block}
  .site-head .bar{gap:8px;min-height:50px}
  .logo{font-size:1.08rem;margin-right:auto}
  /* the announcement strip stays a tidy strip on phones: smaller text,
     never more than two lines, cut cleanly instead of a ragged 3-line blob */
  .announce{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){.drawer-panel,.nav-drawer[open]>summary::after{animation:none}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-pad{padding:16px}
.card h3{margin-bottom:.3em}
.p-card{display:flex;flex-direction:column}
/* every card image gets a fixed-ratio box — no layout shift while picsum/R2 loads */
.card .thumb{display:block;aspect-ratio:4/3;background:#f4eff2;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
/* blog cards: same picture shape, title and excerpt clamped, date pinned to the bottom — every card the same height */
.post-card{display:flex;flex-direction:column;height:100%}
.post-card .thumb{aspect-ratio:16/10}
.post-card>.card-pad{display:flex;flex-direction:column;flex:1}
.post-card .p-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .post-date{margin-top:auto}
/* after .card .thumb so the placeholder wins specificity — centered icon, no broken-image corner glyph */
.p-card .thumb{display:flex;align-items:center;justify-content:center;color:#a97e94;font-size:2rem}
.p-card .card-pad{display:flex;flex-direction:column;gap:6px;flex:1}
.p-title{font-weight:600;color:var(--ink);font-size:var(--step-1);line-height:1.35;text-wrap:balance}
.p-title:hover{color:var(--accent)}
.price{font-weight:700;font-size:1.05rem}
.price .was{color:var(--muted);font-weight:400;text-decoration:line-through;font-size:.88rem;margin-left:6px}
.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px;vertical-align:middle}
.badge.save{background:var(--warm-soft);color:var(--ink)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.draft{background:#eee9e1;color:var(--muted)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.info{background:var(--accent-soft);color:var(--accent-dark)}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:9px 16px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--bg);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)}
.btn.sm{padding:5px 10px;font-size:.85rem}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- forms ---------- */
form.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px}
.field .req{color:var(--danger)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],
input[type=tel],input[type=date],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;background:#ffffff;
  color:var(--ink);font:inherit;font-size:1rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);background:#fff}
textarea{min-height:110px;resize:vertical}
.help{font-size:.82rem;color:var(--muted);margin-top:4px}
/* Checkout: the email block leads the form — accent edge + dashboard note so
   the one address that matters is impossible to miss or rush past. */
.co-sec.co-email{border:1px solid var(--line-strong)}
.co-email-note{margin:10px 0 2px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;font-size:.9rem;line-height:1.55;color:var(--ink)}
.co-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;vertical-align:middle;margin-right:8px}
/* Checkout summary: one clean Cameo-style block — items, TOTAL, the pay
   button, one short note, and the card marks. No repeated reassurance. */
.co-summary h3{margin:0 0 10px;font-size:1.35rem;line-height:1.2}
.co-paybtn{margin-top:14px}
.co-note{margin:8px 0 0}
.co-payline{margin:10px 0 0;color:var(--ink)}
.pay-marks{display:flex;gap:6px;justify-content:center;align-items:center;margin:8px 0 0}
.pay-mark{display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:38px;padding:0 6px;background:#fff;border:1px solid var(--line);border-radius:5px;font-size:.62rem;font-weight:800;letter-spacing:.04em;line-height:1}
.pay-mark-visa{color:#1a1f71;font-style:italic;font-size:.72rem}
.pay-mark-amex{background:#2e77bc;border-color:#2e77bc;color:#fff}
.pay-mark-mc{position:relative}
.pay-mark-mc i{display:block;width:15px;height:15px;border-radius:50%}
.pay-mark-mc .mc-r{background:#eb001b;margin-right:-6px}
.pay-mark-mc .mc-o{background:#f79e1b;opacity:.9}
.co-termsline{margin:10px 0 0}
.co-findline{margin:6px 0 0}
.buy-note{margin:10px 0 0;font-size:.85rem;line-height:1.55;color:var(--muted);text-align:center}
/* Checkout sections: fewer, roomier boxes with heading-like legends and
   real air between the questions inside a section, so the form reads calm
   on a phone instead of one long packed list. Layout only — every field,
   label and control is the one the form always rendered. */
.co-main{gap:20px}
.co-sec{padding:20px}
.co-sec legend{font-size:1.02rem;font-weight:700;color:var(--ink);letter-spacing:.01em;padding:0 8px}
.co-sec .field{margin-bottom:14px}
.co-sec .field:last-child{margin-bottom:0}
.co-sec .check{margin-bottom:10px}
.co-sec .check:last-child{margin-bottom:0}
.co-subhead{font-weight:700;font-size:.95rem;margin:0 0 12px;color:var(--ink)}
/* Coupon: one row inside the summary with the Continue button — label,
   input and an explicit Apply — never a separate card below the fold. */
.co-coupon-row{display:flex;gap:8px;align-items:flex-end;margin-top:14px}
.co-coupon-row .field{flex:1;margin:0}
.co-apply{white-space:nowrap}
.co-coupon-msg{margin-top:6px}
.co-discount td{color:var(--ok);font-weight:600}
/* Tip page performer picker: big tappable faces, the picked one ringed in
   the accent; the radio covers its tile so the whole face is the target. */
.tip-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tip-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px 10px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;cursor:pointer;text-align:center}
.tip-opt img{width:72px;height:72px;object-fit:cover;border-radius:10px}
.tip-opt span{font-size:.86rem;font-weight:600;line-height:1.3;color:var(--ink)}
.tip-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.tip-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.tip-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.err-text{font-size:.85rem;color:var(--danger);margin-top:4px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:.93rem}
.check input{width:auto;margin-top:3px}
.form-row{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.form-row.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);margin:0}
legend{font-weight:700;font-size:.9rem;padding:0 6px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.93rem;background:var(--surface)}
/* unpaid order = a plain pay page: what you ordered + your details, then the payment box */
.pay-view{max-width:1080px;margin-inline:auto}
.pay-grid{align-items:start}
.pay-h{font-size:1.15rem;margin:0 0 10px}
.pay-more{margin-top:12px}
.pay-more summary{cursor:pointer;font-weight:600;color:var(--accent);padding:6px 0}
.pay-more[open] summary{margin-bottom:8px}
.pay-item{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pay-item small{display:block}
.pay-total{border-bottom:0;font-size:1.15rem}
.pay-answers{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.pay-answers dt{color:var(--muted);font-weight:600}
.pay-answers dd{margin:0;word-break:break-word}
@media(max-width:899px){.pay-box{order:-1}}
.pay-foot{display:flex;justify-content:center;align-items:center;gap:14px;font-size:.85rem;color:var(--muted);margin-top:8px}
.pay-foot a{color:var(--muted)}
/* buyer order page after payment: ready-in time, the delivery player and its actions */
.order-eta{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--sp-4);border-left:5px solid var(--accent)}
.eta-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.eta-time{font-size:1.35rem}
.order-delivery{margin-bottom:var(--sp-4)}
.dl-player{display:block;width:100%;max-width:720px;max-height:62vh;margin:0 auto 12px;border-radius:12px;background:#000;object-fit:contain}
.dl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.dl-approve{margin:6px 0 10px}
.dl-revise summary{cursor:pointer;font-weight:600;color:var(--accent);padding:6px 0}
.dl-review{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.order-keep{margin-top:var(--sp-5);font-size:.92rem}
.order-tip{margin-bottom:var(--sp-4);text-align:center}
.order-tip .tip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}
.order-tip .tip-btn{min-width:90px;font-weight:700}
.tip-more{font-size:.9rem}
/* checkout sits centred — equal space both sides on wide screens */
.checkout-page{max-width:1080px;margin-inline:auto}
table.t th,table.t td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.t th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
table.t tr:last-child td{border-bottom:0}
@media(max-width:640px){
  /* Polaris-style: rows become labelled cards, first cell leads as the title */
  table.t{background:transparent}
  table.t thead{display:none}
  table.t tr{display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface);
    margin-bottom:10px;padding:6px 2px}
  table.t td{display:flex;justify-content:space-between;gap:12px;align-items:center;border:0;padding:6px 12px}
  table.t td::before{content:attr(data-l);font-weight:700;color:var(--muted);font-size:.72rem;
    text-transform:uppercase;letter-spacing:.04em;flex:none}
  table.t td:first-child{font-size:1rem;padding-top:9px}
  table.t td:first-child::before{content:none}
  table.t td[data-l=""]{justify-content:flex-start;flex-wrap:wrap;padding-top:10px;padding-bottom:8px}
  table.t td[data-l=""]::before{content:none}
  /* two-column money tables (order summary) stay a real table on phones */
  table.t.t-plain tr{display:table-row;border:0;border-radius:0;background:none;box-shadow:none;margin:0;padding:0}
  table.t.t-plain td{display:table-cell;padding:10px 12px;border-bottom:1px solid var(--line)}
  table.t.t-plain td::before{content:none}
}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- admin shell (mobile-first: off-canvas drawer + bottom tab bar, ZERO JS) ---------- */
.admin{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.navdock{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.admin-top{background:#1d2b27;color:#e9f3f0;position:sticky;top:0;z-index:70}
.admin-top .bar{display:flex;align-items:center;gap:10px;padding-top:6px;padding-bottom:6px;flex-wrap:nowrap}
.admin-top .logo{color:#fff;font-size:1.05rem;font-weight:700;white-space:nowrap}
.admin-top a{color:#cfe3dd}
.nav-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-left:-9px;
  border-radius:9px;color:#cfe3dd;cursor:pointer;flex:none}
.nav-toggle:hover{background:#2c3f37}
.admin-top .spacer{display:none}
/* drawer (mobile): slide-in panel, opened by the hamburger / the "More" tab, closed by the scrim */
.admin nav.side{position:fixed;top:0;left:0;bottom:0;width:272px;max-width:86vw;z-index:80;
  background:#2a1036;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translateX(-102%);visibility:hidden;transition:transform .18s ease;padding:8px 0 28px}
.navdock:checked~nav.side{transform:none;visibility:visible}
.scrim{position:fixed;inset:0;background:rgba(9,17,14,.5);z-index:75;opacity:0;pointer-events:none;transition:opacity .18s}
.navdock:checked~.scrim{opacity:1;pointer-events:auto}
.admin nav.side .inner{display:flex;flex-direction:column;padding:6px 10px 10px}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:2px}
.nav-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:#7e968d;font-weight:800;padding:4px 8px 5px}
.admin nav.side a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;
  color:#c4d7d1;font-size:.95rem;white-space:nowrap}
.admin nav.side a:hover{background:#2c3f37;text-decoration:none}
.admin nav.side a.on{background:var(--accent);color:#fff;font-weight:600}
.nav-account{display:flex;flex-direction:column;margin-top:16px;padding-top:10px;border-top:1px solid #33453d}
.nav-account a{color:#cfe3dd;min-height:44px;display:flex;align-items:center;padding:0 10px;border-radius:8px}
.nav-account a:hover{background:#2c3f37;text-decoration:none}
.nav-account span{color:#8ba79f;font-size:.78rem;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* bottom tab bar (mobile): thumb-reach for the 4 highest-frequency destinations + More */
.tabbar{display:none}
@media(max-width:959px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:#1d2b27;border-top:1px solid #31443d;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:56px;color:#a9c1ba;font-size:.64rem;font-weight:600;text-decoration:none;cursor:pointer;user-select:none}
  .tabbar a.on{color:#fff}
  .tabbar a.on svg{box-shadow:0 0 0 6px rgba(255,255,255,.06);border-radius:8px}
  .tabbar svg{width:21px;height:21px}
}
/* desktop ≥960: persistent left rail (20 links grouped), account links live in the top bar */
@media(min-width:960px){
  .navdock,.scrim,.nav-account{display:none}
  .nav-toggle{display:none}
  .admin-top .spacer{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:.88rem}
  .admin nav.side{top:0;width:224px;max-width:none;transform:none;visibility:visible;transition:none;
    z-index:40;padding:52px 0 24px}
  .admin-main{margin-left:224px}
  .admin-top .wrap{padding-left:240px}
}
/* content chrome */
.admin-main{flex:1;padding:var(--sp-4) 0 var(--sp-10)}
.admin-main h1{font-size:var(--step-1)}
.page-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.page-head h1{margin:0}
@media(max-width:639px){
  /* sticky title + actions: Save stays reachable while a long editor scrolls */
  .admin .page-head{position:sticky;top:54px;z-index:30;background:var(--bg);padding:8px 0 6px;
    box-shadow:0 7px 9px -9px rgba(33,29,25,.45)}
}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.crumb a{color:var(--muted)}
.stats{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:840px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.big{font-size:1.5rem;font-weight:800;line-height:1.1;margin-top:2px}
.tl{list-style:none;margin:.4em 0 0;padding:0;display:flex;flex-direction:column}
.tl li{display:flex;gap:10px;align-items:baseline;padding:7px 0;position:relative}
.tl li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 auto;align-self:center}
.tl li.done::before{background:var(--accent)}
.tl li.now::before{background:var(--warm);box-shadow:0 0 0 3px var(--accent-soft)}
.tl li .when{margin-left:auto;color:var(--muted);font-size:.82rem;white-space:nowrap}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.stat .n{font-size:1.5rem;font-weight:700;font-family:var(--serif)}
.stat .l{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.note-card{background:var(--warm-soft);border:1px solid #f0dfc0;border-radius:var(--radius);padding:var(--sp-4);font-size:.92rem}
.note-card h3{font-size:1rem;margin-bottom:.4em}
.note-card ul{margin:.3em 0 .6em;padding-left:18px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-4);align-items:center}
.filters input,.filters select{width:auto;min-width:140px}
/* bulk moderation (comments / reviews): checkbox rows + action bar, no JS */
.bulk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.bulk-row{display:flex;gap:10px;align-items:flex-start}
.pick{display:flex;align-items:flex-start;padding:4px;cursor:pointer;flex:none}
.pick input{width:20px;height:20px;margin-top:3px;accent-color:var(--accent)}
.bulk-body{flex:1;min-width:0}
@media(max-width:640px){
  .bulk-bar{flex-direction:column;align-items:stretch}
  .bulk-bar .flex{width:100%}
  .bulk-bar .btn{flex:1}
}
/* media library */
.media-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:18px 0 10px;font-size:.9rem}
.media-crumbs a{color:var(--accent)}
.media-folders{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.media-folder{display:flex;align-items:center;min-height:44px;padding:0 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:.9rem;color:var(--ink)}
.media-folder:hover{border-color:var(--accent);text-decoration:none}
.media-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
.media-item{display:flex;flex-direction:column}
.media-thumb{aspect-ratio:4/3;background:#f4eff2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-ext{font-size:.8rem;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.media-meta{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px}
.media-name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-sub{font-size:.74rem;color:var(--muted)}
.media-url{font-size:.78rem;font-family:ui-monospace,Menlo,Consolas,monospace;padding:7px 8px}

/* ---------- product page (Shopify/Woo anatomy: media left, info right, anchor tabs below) ---------- */
.pdp{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr);align-items:start}
.pdp>*,.gallery,.gal-stage{min-width:0;max-width:100%}
@media(min-width:900px){
  .pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.pdp.one{grid-template-columns:minmax(0,1fr);max-width:780px}
  /* the info column can run much taller than the gallery — stick the media so the left column never reads as dead space */
  .pdp-side{position:sticky;top:76px}
}
.pdp-media{display:flex;flex-direction:column;gap:10px}
.pdp-main{display:block;aspect-ratio:4/3;background:#f4eff2;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pdp-main img{width:100%;height:100%;object-fit:cover}
.pdp-main.empty{display:flex;align-items:center;justify-content:center;color:#a97e94}
.stack-media{display:flex;flex-direction:column;gap:12px}
.stack-media img{width:100%;border:1px solid var(--line);border-radius:var(--radius)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs .t{width:64px;height:48px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#f4eff2;flex:none}
.thumbs .t.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
/* one gallery for photos + videos: radios drive the stage (zero JS) */
.gallery .gal-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gal-stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#f4eff2}
.gal-slide{display:none;position:relative}
.gal-slide img,.gal-slide video{width:100%;height:auto;max-height:min(78vh,760px);object-fit:contain;display:block;margin:0 auto}
.gal-slide img{aspect-ratio:auto 4/5}
.gal-slide video{aspect-ratio:16/9;background:#000} /* fixed: no jump when the poster loads before the video */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;font-size:1.7rem;line-height:1;color:#fff;background:rgba(24,6,34,.5);user-select:none}
.gal-nav:hover{background:rgba(24,6,34,.75)}
.gal-nav.prev{left:8px}.gal-nav.next{right:8px}
.is-review .gal-nav{top:calc(50% + 24px)}
.gal-slide video{object-fit:contain}
.gallery .thumbs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:3px 2px 6px}
.gallery .thumbs .t{position:relative;cursor:pointer;width:84px;height:63px;background:#1b0a24;scroll-snap-align:start}
.gallery .thumbs .t img{object-fit:contain}
.gallery .thumbs .t.is-review{border-color:var(--warm)}
.gallery .rv-tag{position:absolute;left:0;right:0;top:0;padding:1px 4px;font-size:.66rem;font-weight:700;line-height:1.4;color:#fff;background:var(--accent);text-align:center;letter-spacing:.02em}
figure.gal-slide{margin:0}
.stack-rv{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:#1b0a24}.stack-rv img,.stack-rv video{width:100%;display:block}
.gal-cap{position:absolute;left:0;right:0;top:0;padding:10px 14px 22px;color:#fff;font-size:.9rem;line-height:1.45;background:rgba(27,10,34,.86);max-height:78%;overflow:auto;z-index:1}
.gal-cap p{margin:4px 0 0}
.gal-cap .stars{color:var(--warm);letter-spacing:1px}
.gal-cap .cap-tag{font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:99px;background:var(--accent);color:#fff;vertical-align:1px}
.cap-more summary{cursor:pointer;list-style:none;margin-top:4px}
.cap-more summary::-webkit-details-marker{display:none}
.cap-rm,.cap-rl{font-weight:700;text-decoration:underline;color:#fff;white-space:nowrap}
.cap-rl,.cap-more[open] .cap-clip,.cap-more[open] .cap-rm{display:none}
.cap-more[open] .cap-rl{display:inline}
.cap-more p{margin:6px 0 0}
.gallery .thumbs .t.is-video{background:#2a1030}
.gallery .thumbs .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1rem;background:rgba(24,6,34,.35);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.gallery .gal-r:nth-of-type(1):checked~.gal-stage .gal-slide:nth-child(1){display:block}
.gallery .gal-r:nth-of-type(1):checked~.thumbs .t:nth-child(1){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(1):focus-visible~.thumbs .t:nth-child(1){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(2):checked~.gal-stage .gal-slide:nth-child(2){display:block}
.gallery .gal-r:nth-of-type(2):checked~.thumbs .t:nth-child(2){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(2):focus-visible~.thumbs .t:nth-child(2){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(3):checked~.gal-stage .gal-slide:nth-child(3){display:block}
.gallery .gal-r:nth-of-type(3):checked~.thumbs .t:nth-child(3){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(3):focus-visible~.thumbs .t:nth-child(3){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(4):checked~.gal-stage .gal-slide:nth-child(4){display:block}
.gallery .gal-r:nth-of-type(4):checked~.thumbs .t:nth-child(4){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(4):focus-visible~.thumbs .t:nth-child(4){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(5):checked~.gal-stage .gal-slide:nth-child(5){display:block}
.gallery .gal-r:nth-of-type(5):checked~.thumbs .t:nth-child(5){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(5):focus-visible~.thumbs .t:nth-child(5){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(6):checked~.gal-stage .gal-slide:nth-child(6){display:block}
.gallery .gal-r:nth-of-type(6):checked~.thumbs .t:nth-child(6){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(6):focus-visible~.thumbs .t:nth-child(6){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(7):checked~.gal-stage .gal-slide:nth-child(7){display:block}
.gallery .gal-r:nth-of-type(7):checked~.thumbs .t:nth-child(7){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(7):focus-visible~.thumbs .t:nth-child(7){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(8):checked~.gal-stage .gal-slide:nth-child(8){display:block}
.gallery .gal-r:nth-of-type(8):checked~.thumbs .t:nth-child(8){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(8):focus-visible~.thumbs .t:nth-child(8){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(9):checked~.gal-stage .gal-slide:nth-child(9){display:block}
.gallery .gal-r:nth-of-type(9):checked~.thumbs .t:nth-child(9){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(9):focus-visible~.thumbs .t:nth-child(9){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(10):checked~.gal-stage .gal-slide:nth-child(10){display:block}
.gallery .gal-r:nth-of-type(10):checked~.thumbs .t:nth-child(10){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(10):focus-visible~.thumbs .t:nth-child(10){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(11):checked~.gal-stage .gal-slide:nth-child(11){display:block}
.gallery .gal-r:nth-of-type(11):checked~.thumbs .t:nth-child(11){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(11):focus-visible~.thumbs .t:nth-child(11){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(12):checked~.gal-stage .gal-slide:nth-child(12){display:block}
.gallery .gal-r:nth-of-type(12):checked~.thumbs .t:nth-child(12){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(12):focus-visible~.thumbs .t:nth-child(12){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(13):checked~.gal-stage .gal-slide:nth-child(13){display:block}
.gallery .gal-r:nth-of-type(13):checked~.thumbs .t:nth-child(13){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(13):focus-visible~.thumbs .t:nth-child(13){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(14):checked~.gal-stage .gal-slide:nth-child(14){display:block}
.gallery .gal-r:nth-of-type(14):checked~.thumbs .t:nth-child(14){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(14):focus-visible~.thumbs .t:nth-child(14){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(15):checked~.gal-stage .gal-slide:nth-child(15){display:block}
.gallery .gal-r:nth-of-type(15):checked~.thumbs .t:nth-child(15){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(15):focus-visible~.thumbs .t:nth-child(15){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(16):checked~.gal-stage .gal-slide:nth-child(16){display:block}
.gallery .gal-r:nth-of-type(16):checked~.thumbs .t:nth-child(16){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(16):focus-visible~.thumbs .t:nth-child(16){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(17):checked~.gal-stage .gal-slide:nth-child(17){display:block}
.gallery .gal-r:nth-of-type(17):checked~.thumbs .t:nth-child(17){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(17):focus-visible~.thumbs .t:nth-child(17){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(18):checked~.gal-stage .gal-slide:nth-child(18){display:block}
.gallery .gal-r:nth-of-type(18):checked~.thumbs .t:nth-child(18){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(18):focus-visible~.thumbs .t:nth-child(18){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(19):checked~.gal-stage .gal-slide:nth-child(19){display:block}
.gallery .gal-r:nth-of-type(19):checked~.thumbs .t:nth-child(19){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(19):focus-visible~.thumbs .t:nth-child(19){outline:2px solid var(--accent);outline-offset:2px}
.gallery .gal-r:nth-of-type(20):checked~.gal-stage .gal-slide:nth-child(20){display:block}
.gallery .gal-r:nth-of-type(20):checked~.thumbs .t:nth-child(20){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery .gal-r:nth-of-type(20):focus-visible~.thumbs .t:nth-child(20){outline:2px solid var(--accent);outline-offset:2px}
/* product titles follow the e-commerce norm (~20px phone → 28px desktop), independent of hero display sizes */
.pdp-title{font-size:var(--step-2);line-height:1.25;margin:.1em 0 .35em}
.pdp-rating{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;color:var(--muted);margin-bottom:.4em}
.pdp-rating:hover{color:var(--accent);text-decoration:none}
.pdp-price{font-family:var(--serif);font-size:var(--fs-price);font-weight:700;margin:.15em 0 .45em}
.pdp-price .was{color:var(--muted);font-weight:400;font-size:1rem;text-decoration:line-through;margin-left:8px}
.pdp-points{margin:.2em 0 .7em;padding-left:1.15em;max-width:60ch}
.pdp-points li{margin:.3em 0}
.pdp-points li::marker{color:var(--accent)}
.buy-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.buy-qty{width:90px;margin:0}
.buy-row .buy-now{flex:1 1 180px;min-height:52px;font-size:1.05rem}
.buy-row .buy-cart{flex:1 1 100%;background:transparent}
.pay-one{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--radius,12px);color:var(--muted)}
.up-thumbs{display:flex;gap:6px;flex-wrap:wrap}.up-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;display:block}
input[type=file]{padding:10px;border:1px dashed var(--line);border-radius:10px;width:100%;background:var(--card,#fff)}
/* compact option rows — one bordered row per tier instead of a nested card with a bullet list,
   so 3-tier products keep Add-to-cart above the fold at 1440×900 */
.opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:10px 12px;margin-bottom:8px}
.opt:last-of-type{margin-bottom:0}
.opt:hover{border-color:#d8d0c3}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.opt input{margin-top:4px;accent-color:var(--accent);flex:none}
.opt-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.opt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.opt-head .price{font-size:1rem}
.opt-feats{font-size:.85rem;color:var(--muted);line-height:1.45}
/* one price card in the right panel — Daraz/Amazon anatomy: product features, option rows
   that each carry their own price + what's included, then qty/CTA. Replaces the old
   standalone "From $x" line + separate highlights list (redundant above the option rows). */
.buy-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;margin-top:.4em;display:flex;flex-direction:column;gap:var(--sp-4)}
.buy-card .pdp-points{margin:0;max-width:none}
.buy-card .buy-box{display:flex;flex-direction:column;gap:var(--sp-4)}
.buy-card fieldset{border:0;padding:0;margin:0}
.buy-card legend{padding:0;margin:0 0 8px}
.pdp-meta{font-size:.88rem;color:var(--muted);margin-top:12px}
.pdp-trust{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.85rem;color:var(--muted);margin-top:var(--sp-3)}
/* jump links styled as chips (same outline-pill language as the /products category filters) so they read as interactive, not stray text */
.pdp-tabs{display:flex;gap:8px;flex-wrap:wrap;border:0;margin:var(--sp-7) 0 var(--sp-5);-webkit-overflow-scrolling:touch}
.pdp-tabs a{padding:8px 15px;font-size:.9rem;font-weight:600;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:99px;background:var(--surface);transition:border-color .15s,color .15s,background .15s}
.pdp-tabs a:hover{color:var(--accent-dark);border-color:var(--accent);background:var(--accent-soft);text-decoration:none}
.sticky-atc{display:none}
@media(max-width:899px){
  /* in-flow "sticky" (not "fixed") — survives iOS 26 Safari's viewport/fixed-element regressions
     (WebKit #301108) and never overlaps the footer or the form above it */
  .sticky-atc{display:flex;position:sticky;bottom:0;z-index:45;gap:10px 12px;align-items:center;justify-content:space-between;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(33,29,25,.14);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:var(--sp-6)}
  .sticky-atc .btn{flex:none;min-width:140px;min-height:48px}
  .sticky-atc-info{display:block;min-width:0;color:inherit;text-decoration:none}
  .sticky-atc-info .sk{flex-direction:column;gap:1px;min-width:0}
  .sticky-atc-info strong{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw;display:block}
  .sticky-atc-info .sk>span{font-weight:700;font-size:1rem;color:var(--accent-dark)}
  .sticky-atc-info u{font-weight:600;font-size:.8rem;color:var(--muted);margin-left:6px}
  .sk{display:flex}
  /* buy-bar shows only once the real buy box is off screen (scroll-driven; older browsers simply keep it visible) */
  @supports (animation-timeline: view()){
    html{timeline-scope:--buybox}
    #buy{view-timeline:--buybox block}
    .sticky-atc{animation:sk-hide linear both;animation-timeline:--buybox;animation-range:cover 0% cover 100%}
  }
}
@keyframes sk-hide{0%,100%{opacity:1;visibility:visible;transform:none}1%,99%{opacity:0;visibility:hidden;transform:translateY(100%)}}
.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.faq details{border-bottom:1px solid var(--line);padding:0 var(--sp-4)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--accent)}
.faq details[open] summary::before{content:"− "}
.faq .a{padding:0 0 12px;color:var(--muted)}
.reviews{display:flex;flex-direction:column;gap:12px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.review .who{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rv-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex:0 0 auto}
.rv-who{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.rv-who>*{align-self:flex-start}
.rv-who strong{font-weight:650;overflow-wrap:anywhere}
.rv-who .muted{font-size:.82rem}
.rv-rate{display:flex;align-items:center;gap:6px;margin-left:auto}
.rv-num{font-weight:650;font-size:.9rem;font-variant-numeric:tabular-nums}
.rv-body{margin:.5em 0 0;overflow-wrap:anywhere}
.stars{color:var(--warm);letter-spacing:2px;font-size:.95rem}
.stars.lg{font-size:1.35rem;letter-spacing:3px}
.rv-sum{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.rv-sum{grid-template-columns:auto minmax(0,1fr);align-items:center}}
.rv-score{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:2px 0}
.rv-avg{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.rv-bars{display:flex;flex-direction:column;gap:6px;min-width:0}
.rv-bar{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:center;color:var(--muted);text-decoration:none;padding:3px 6px;border-radius:8px}
.rv-bar:hover,.rv-bar.on{background:var(--accent-soft);color:var(--ink)}
.rv-track{display:block;height:8px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.rv-track i{display:block;height:100%;background:var(--warm);border-radius:99px}
.rv-bcount{text-align:right;font-size:.85rem;font-variant-numeric:tabular-nums}
.rv-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:var(--sp-4) 0 var(--sp-1);font-size:.9rem}
.rv-sortby{color:var(--muted)}
.rv-sort{padding:6px 12px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--ink);background:var(--surface)}
.rv-sort.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rv-chip{padding:6px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent-dark);font-weight:600}

/* ---------- blog (magazine index + article layout) ---------- */
.blog-grid>.feat{grid-column:1 / -1}
@media(min-width:640px){
  .blog-grid>.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .blog-grid>.feat .thumb{aspect-ratio:auto;height:100%;min-height:230px}
  .blog-grid>.feat .card-pad{display:flex;flex-direction:column;justify-content:center;gap:2px}
  .blog-grid>.feat .p-title{font-size:1.3rem;line-height:1.3}
}
.p-title.feat-title{font-size:1.15rem}
.post-layout{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.post-layout{grid-template-columns:minmax(0,1fr) 280px;gap:var(--sp-9)}}
.post-main{min-width:0}
.post-title{font-size:var(--fs-display);margin:0 0 .45em;letter-spacing:-.015em}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:var(--sp-5)}
.post-meta time,.post-meta span{white-space:nowrap}
.p-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-dark);font-size:.8rem;font-weight:700;flex:none}
.post-cover{display:block;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.post-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-body{max-width:72ch}
.author-box{display:flex;gap:var(--sp-4);align-items:flex-start;margin-top:var(--sp-8)}
.author-box .p-avatar{width:48px;height:48px;font-size:1rem}
.post-side{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(min-width:1100px){.post-side{position:sticky;top:76px;align-self:start}}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.side-card h3{font-size:.95rem;margin:0 0 .55em}
.toc ol{margin:0;padding-left:1.15em;font-size:.92rem}
.toc li{margin:.35em 0}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--accent)}
.toc .lvl-3{margin-left:.8em;font-size:.88rem}

/* ---------- checkout / cart ---------- */
.checkout{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.checkout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;align-self:start}
.summary .line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:.95rem}
.summary .total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:700;font-size:1.1rem}
.cart-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-row .thumb{width:64px;height:48px;border-radius:6px;overflow:hidden;background:#f4eff2;flex:none}
.cart-row .thumb img{width:100%;height:100%;object-fit:cover}

/* ---------- blocks (page builder) ---------- */
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);margin-bottom:12px}
.blk-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}
.blk-kind{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.blk-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 18px;text-align:center}
.blk-cta{text-align:center;padding:10px}
.cta-big{display:inline-block;background:var(--accent);color:#fff;padding:12px
  var(--sp-6);border-radius:8px;font-weight:700}
.cta-big:hover{background:var(--accent-dark);text-decoration:none}
.prose{max-width:70ch;line-height:1.65;overflow-wrap:break-word}
.prose>*:first-child{margin-top:0}
.prose p{margin:.7em 0}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{margin:1.3em 0 .45em;line-height:1.25}
.prose h1{font-size:var(--step-3)}
.prose h2{font-size:var(--step-2)}
.prose h3{font-size:var(--step-1)}
.prose h4{font-size:var(--step-0)}
.prose h5,.prose h6{font-size:var(--step-0)}
.prose ul,.prose ol{margin:.7em 0;padding-left:1.35em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:700}
.prose blockquote{margin:1em 0;padding:2px 0 2px 14px;border-left:3px solid var(--accent);color:var(--muted)}
.prose blockquote p{margin:.35em 0}
.prose img{max-width:100%;height:auto;border-radius:10px;display:block;margin:.8em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.prose code{background:#efe9df;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.9em;font-family:ui-monospace,monospace}
.prose pre.code{background:#1f1c17;color:#f4efe6;padding:12px 14px;border-radius:8px;overflow:auto;font-size:12.5px;line-height:1.5;margin:1em 0}
.prose pre.code code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.prose figure{margin:1em 0}
.prose figcaption{color:var(--muted);font-size:.88rem;margin-top:.4em}

/* ---------- footer ---------- */
.site-foot{background:var(--accent);color:#fff;margin-top:var(--sp-12);padding:var(--sp-8) 0 var(--sp-6);font-size:.93rem}
.site-foot .foot-h{color:#fff;font-family:var(--sans);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.site-foot a{color:#fff;display:block;padding:6px 0;min-height:24px;min-width:44px;margin-right:8px}
/* links inside text must not rely on colour alone */
.crumbs a{text-decoration:underline;text-underline-offset:2px}
.prose a:not([class]),.pw-prose a:not([class]),.pw-sec p a:not([class]){text-decoration:underline;text-underline-offset:2px}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.foot-grid>div:first-child{grid-column:span 2}
@media(max-width:719px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-4)}
  .foot-grid>div:first-child{grid-column:1/-1}
  .foot-bottom{flex-direction:column;gap:var(--sp-2)}
}
.foot-bottom{border-top:1px solid rgba(255,255,255,.25);margin-top:var(--sp-6);padding-top:var(--sp-4);font-size:.85rem;color:#ede6ea;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* The ONE language control on the page (owner order 2026-10-10): a footer
   dropdown at the foot-bottom's LEFT edge. The chat widget grabs the
   bottom-right corner, so the panel opens upward from the left and carries
   its own stacking — it can never slide under the widget. */
.lang-menu{position:relative}
.lang-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid rgba(255,255,255,.45);border-radius:10px;color:#fff;font-size:.85rem}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu>summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lang-menu .lang-caret{font-size:.65rem;line-height:1}
.lang-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;min-width:190px;max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28);padding:6px}
.lang-panel a{display:block;padding:9px 12px;color:var(--ink);border-radius:8px;margin-right:0}
/* the footer forces all its links white (.site-foot a) in base + D1 overrides;
   the dropdown panel is white, so panel links need higher specificity to stay readable */
.site-foot .lang-panel a{color:var(--ink)}
.lang-panel a:hover{background:var(--bg);text-decoration:none}
.lang-panel a[aria-current="true"]{font-weight:700}
.cur-pick{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--sp-5);font-size:.85rem}
.cur-pick .cur-label{color:#ede6ea}
.cur-pick strong{color:#fff;letter-spacing:.03em}
.cur-pick a{display:inline-block;color:#fff;padding:2px 0;letter-spacing:.03em}
.cur-pick a:hover{color:#fff}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--muted)}
.pager{display:flex;gap:6px;justify-content:center;margin:var(--sp-6) 0}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:.9rem}
.pager .on{background:var(--accent);color:#fff;border-color:var(--accent)}
.empty{text-align:center;color:var(--muted);padding:36px 16px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}
.kbd{background:#efe9df;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.85em;font-family:ui-monospace,monospace}
.sc-ref{font-size:.86rem}
.sc-ref code{background:#efe9df;padding:1px 5px;border-radius:4px}
hr.soft{border:0;border-top:1px solid var(--line);margin:20px 0}
.inline-form{display:inline}
.mt{margin-top:var(--sp-4)}.mb{margin-bottom:var(--sp-4)}
.mt-s{margin-top:8px}.mb-s{margin-bottom:8px}
.right{text-align:right}.center{text-align:center}.ta-r{text-align:right}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grid-2{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:640px){.form-row.tri{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form-row.quad{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:1100px){.form-row.tri{grid-template-columns:repeat(4,minmax(0,1fr))}.form-row.quad{grid-template-columns:repeat(4,minmax(0,1fr))}}
.form-row.hdr{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
ul.plain{list-style:none;padding:0;margin:.4em 0}
ul.plain li{padding:5px 0;border-bottom:1px dashed var(--line)}
ul.plain li:last-child{border-bottom:0}
.oauth{display:grid;gap:8px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:11px 14px;border:1px solid #d6d0c6;
  border-radius:8px;background:#fff;color:#1f1f1f;font-weight:600;text-align:center}
.oauth-btn:hover{background:#f7f5f1;text-decoration:none;border-color:#c4bdb1}
.oauth-logo{flex:none}
.oauth-mark{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 5px;border-radius:6px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.02em}
.or-rule{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0;color:var(--muted);font-size:.85rem}
.or-rule::before,.or-rule::after{content:"";flex:1;border-top:1px solid var(--line)}
pre.code{background:#1f1c17;color:#f4efe6;padding:12px 14px;border-radius:8px;overflow:auto;font-size:12.5px;line-height:1.5}
details summary{cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.badge.warn{background:#fdf1dc;color:#8a5b00}
.badge.err{background:var(--danger-soft);color:var(--danger)}

/* ---------- code editor (admin) — tree + monospace pane, zero JS ---------- */
.code-layout{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.code-layout{grid-template-columns:236px minmax(0,1fr);align-items:start}}
.code-tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
@media(min-width:960px){.code-tree{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow:auto}}
.code-tree h3{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:700;margin:var(--sp-4) 0 6px}
.code-tree h3:first-child{margin-top:2px}
.code-tree a{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 9px;border-radius:7px;
  color:var(--ink);font-size:.9rem;min-height:36px}
.code-tree a:hover{background:var(--bg);text-decoration:none}
.code-tree a.on{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.code-dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.code-dot.custom{background:var(--accent)}
.code-dot.off{background:var(--warm)}
.code-pane{min-width:0}
.code-head{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-4)}
.code-name{font-family:var(--sans);font-size:1.2rem;margin:0 0 3px}
.code-area{
  display:block;width:100%;min-height:320px;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.65;tab-size:2;white-space:pre;
  background:#1f1c17;color:#f4efe6;border:1px solid #0f0e0b;
  border-radius:var(--radius);padding:14px;
}
.code-area::selection{background:#3a5b52}
.code-area:focus{outline:2px solid var(--accent);outline-offset:1px}
.code-ref{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:var(--sp-4);margin-top:var(--sp-4)}
.code-ref summary{cursor:pointer;font-weight:600}
.code-ref p{margin:.5em 0 0}
.code-ref code{background:#efe9df;padding:1px 5px;border-radius:4px;font-size:.85em}
.ref-title{font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:var(--sp-4) 0 4px}
.ref-list{list-style:none;padding:0;margin:0}
.ref-list li{padding:5px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.ref-list li:last-child{border-bottom:0}
.ref-list .muted{font-size:.85rem}
.small-note{font-size:.85rem;max-width:70ch}

/* ---------- shortcode components ([gallery] [toggle] [table] [alert] [progress] …) ---------- */
.flash.warn{background:#fdf1dc;color:#8a5b00;border:1px solid #f0dfc0}
.sc-cat{display:block;text-decoration:none;color:var(--ink)}
.sc-cat:hover{background:var(--bg);text-decoration:none}
.sc-atc{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;margin:var(--sp-4) 0}
.sc-atc select{min-width:180px}
.sc-qty{display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.sc-qty input{width:72px}
.sc-gal{display:grid;gap:var(--sp-3);grid-template-columns:repeat(var(--gal,3),minmax(0,1fr))}
@media(max-width:639px){.sc-gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-gal a{display:block;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#f4eff2}
.sc-gal img{display:block;width:100%;height:100%;object-fit:cover}
.sc-video{display:block;width:100%;max-height:70vh;background:#000;border-radius:var(--radius)}
.sc-audio{display:block;width:100%}
.sc-cap{margin:var(--sp-5) 0}
.sc-cap figcaption{margin-top:var(--sp-2);font-size:.9rem}
.sc-cap figcaption p{margin:0}
.sc-cap-only p{margin:0}
.tog{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:0 var(--sp-4);margin:var(--sp-3) 0}
.faq .tog{border:0;border-radius:0;background:transparent;margin:0;border-bottom:1px solid var(--line)}
.faq .tog:last-child{border-bottom:0}
.tog summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none}
.tog summary::-webkit-details-marker{display:none}
.tog summary::before{content:"+ ";color:var(--accent)}
.tog[open] summary::before{content:"- "}
.tog .a{padding:0 0 12px;color:var(--muted)}
.tog .a p{margin:.3em 0}
.hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
.sc-col{min-width:0}
.prog{margin:var(--sp-4) 0}
.prog-head{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:.9rem;margin-bottom:6px}
.prog-track{height:8px;border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.prog-fill{height:100%;background:var(--accent);border-radius:99px}
.sc-count{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline}
.sc-count time{font-weight:700;font-family:var(--serif)}
.sc-count-left{width:100%;color:var(--accent-dark);font-weight:600}
.sc-search{display:flex;gap:6px;max-width:520px;margin:0 0 var(--sp-4)}
.sc-search input{flex:1}
/* inside a .prose body every anchor turns accent + underlined — pull our widgets back */
.prose a.btn{text-decoration:none}
.card.sc-cat,.prose .card.sc-cat{text-decoration:none;color:var(--ink)}
.card.sc-cat:hover,.prose .card.sc-cat:hover{background:var(--bg);text-decoration:none}
.prose .toc a{color:var(--ink);text-decoration:none}
.sc-crumb a{color:var(--muted);text-decoration:none}

/* ---------- mobile-first pass (research: thumb reach, 44px targets, no iOS zoom, sticky header) ---------- */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* nothing may ever push the page sideways on a phone (clip, not hidden, so sticky headers keep working) */
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  /* viewport-fit=cover opts us into drawing under the notch — keep content clear of it (landscape too) */
  padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* 16px inputs everywhere: below 16px iOS Safari zooms the page on focus (iPads too, not just phones) */
input,select,textarea{font-size:1rem}
h1,h2,h3{text-wrap:balance}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.site-head{position:sticky;top:0;z-index:30}
section[id],div[id]{scroll-margin-top:76px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (pointer:coarse){
  .btn{min-height:44px;padding:10px 16px}
  .btn.sm{min-height:38px;padding:8px 13px}
  .menu>summary{padding:10px 14px;min-height:44px;display:flex;align-items:center}
  .menu-panel a{padding:12px 10px}
  .head-links{gap:8px}
  .head-links a,.head-links .cart-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .logo{min-height:44px}
  .site-foot a{padding:9px 0;min-height:48px}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .cur-pick a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .crumbs a,.crumb a{display:inline-block;padding:9px 2px}
  .p-title{display:inline-block;padding:3px 0}
  .admin nav.side a{padding:11px 13px}
  .faq summary{padding:15px 0}
  .rv-bar{padding:9px 6px}
  .rv-sort{padding:9px 14px}
  .pdp-tabs a{padding:11px 16px}
}
@media(max-width:640px){
  input,select,textarea{font-size:16px}
  .filters input,.filters select{width:100%;min-width:0}
  .table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .site-head .bar{gap:10px;padding-top:6px;padding-bottom:6px}
  .head-links{gap:10px}
  .hero{padding:var(--sp-6) 0 var(--sp-5);margin-bottom:var(--sp-5)}
  .hero h1{font-size:1.6rem}
  .page-head .btn{flex:1 1 auto;text-align:center}
  .rv-avg{font-size:2.2rem}
  .admin-main{padding:var(--sp-4) 0 84px} /* room for the bottom tab bar */
  .wrap,.wrap-narrow{padding:0 var(--sp-4)}
}

/* ================= marketplace: auth, seller area, shop, inbox =================
   Same tokens as everything above — spacing on --sp-*, three type sizes. */

/* ---------- email-code sign-in ---------- */
.auth{display:flex;justify-content:center;padding:var(--sp-8) 0 var(--sp-12)}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-size:var(--fs-h1);margin-bottom:var(--sp-2)}
.auth-card>.muted{margin-bottom:var(--sp-5)}
.auth-note{font-size:.9rem;margin:var(--sp-4) 0 0}
.auth-row{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
.otp-input{font-size:1.6rem!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;padding:12px!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- seller area ---------- */
.seller-area{padding-bottom:var(--sp-10)}
.seller-nav{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);
  margin:0 calc(var(--sp-4) * -1) var(--sp-5);padding:0 var(--sp-4)}
.seller-nav::-webkit-scrollbar{display:none}
.seller-nav a{flex:none;padding:12px 14px;color:var(--muted);font-weight:600;font-size:.93rem;border-bottom:2px solid transparent;white-space:nowrap}
.seller-nav a:hover{color:var(--ink);text-decoration:none}
.seller-nav a.on{color:var(--accent-dark);border-bottom-color:var(--accent)}
.seller-nav .view-shop{margin-left:auto;color:var(--accent)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;line-height:1}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.kpi span{display:block;color:var(--muted);font-size:.82rem;font-weight:600}
.kpi strong{display:block;font-size:1.45rem;font-variant-numeric:tabular-nums;margin-top:var(--sp-1)}
.meter{height:8px;background:#eee9e1;border-radius:99px;overflow:hidden;margin-top:var(--sp-2)}
.meter span{display:block;height:100%;background:var(--accent);border-radius:99px}
.steps-list{padding-left:1.2em;margin:0 0 var(--sp-4)}
.steps-list li{margin-bottom:var(--sp-2)}

/* product list (seller) */
.plist{display:flex;flex-direction:column;gap:var(--sp-3)}
.plist-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3);align-items:center}
.plist-thumb{width:72px;height:72px;border-radius:8px;overflow:hidden;background:#f4eff2;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.plist-thumb img{width:100%;height:100%;object-fit:cover}
.plist-title{font-weight:600;color:var(--ink);display:block;line-height:1.3}
.plist-meta{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-1);font-size:.88rem;color:var(--muted)}
.plist-note{margin:var(--sp-1) 0 0;font-size:.85rem;color:var(--danger)}
.plist-actions{grid-column:1/-1;display:flex;gap:var(--sp-2);flex-wrap:wrap}
@media(min-width:760px){.plist-row{grid-template-columns:72px minmax(0,1fr) auto}.plist-actions{grid-column:auto;justify-content:flex-end}}

/* product editor (seller) */
.pkg-grid{display:grid;gap:var(--sp-3)}
@media(min-width:900px){.pkg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pkg{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.pkg-head{font-weight:700;font-size:.9rem;color:var(--accent-dark)}
.faq-row{padding:var(--sp-3) 0;border-bottom:1px dashed var(--line)}
.faq-row:last-child{border-bottom:0}
.media-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.media-tile{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#f4eff2;border:1px solid var(--line)}
.media-tile img,.media-tile video{width:100%;height:100%;object-fit:cover}
.media-tile .btn{position:absolute;right:6px;bottom:6px}
.media-tile .media-ext{display:flex;height:100%;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--muted)}
.form-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;flex-wrap:wrap}
.sticky-actions{position:sticky;bottom:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);
  padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:5}
.sticky-actions .btn{flex:1 1 auto;text-align:center}
@media(min-width:640px){.sticky-actions .btn{flex:0 0 auto}}
.banner-prev{width:100%;max-height:120px;object-fit:cover;border-radius:8px;margin-bottom:var(--sp-2)}

/* ---------- avatars ---------- */
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--accent-soft);color:var(--accent-dark)}
.av-lg{width:88px;height:88px}
.av-txt{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.av-lg.av-txt{font-size:1.6rem}

/* ---------- "sold by" card on the product page ---------- */
.seller-card{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);margin-top:var(--sp-4);background:var(--surface);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.seller-card-head{display:flex;gap:var(--sp-3);align-items:center;color:var(--ink)}
.seller-card-head:hover{text-decoration:none}
.seller-card-head>span{display:flex;flex-direction:column;line-height:1.3}
.seller-card-head strong{font-size:1.05rem}
.sm-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.seller-facts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:.85rem;color:var(--muted)}
.p-seller{font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.pdp-videos{display:grid;gap:10px;margin-top:10px}
.pdp-videos video{width:100%;height:auto;border-radius:var(--radius);background:#111;aspect-ratio:16/9}
.p-seller-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.p-rate{font-size:.85rem;margin:2px 0}
.p-rate .stars{color:var(--warm)}
.p-seller:hover{color:var(--accent)}

/* ---------- public shop page ---------- */
.crumbs{font-size:.88rem;color:var(--muted);margin:var(--sp-3) 0}
.crumbs a{color:var(--muted)}
.shop-head{position:relative;margin-bottom:var(--sp-6)}
.shop-banner{width:100%;aspect-ratio:4/1;min-height:120px;object-fit:cover;border-radius:var(--radius)}
.shop-id{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.has-banner .shop-id{margin-top:calc(var(--sp-10) * -1);padding:0 var(--sp-4)}
.has-banner .av-lg{border:4px solid var(--surface);box-shadow:var(--shadow)}
.shop-id h1{font-size:var(--fs-display);margin:0}
.shop-tagline{color:var(--muted);margin:var(--sp-1) 0 0}
.shop-rating{margin:var(--sp-1) 0 0}
.shop-rating .stars{color:var(--warm)}
.shop-cta{flex:1 1 100%}
.shop-cta .btn{width:100%;text-align:center}
@media(min-width:640px){.shop-cta{flex:0 0 auto;margin-left:auto}.shop-cta .btn{width:auto}}
.has-banner .shop-cta{align-self:flex-end}
.shop-layout{display:grid;gap:var(--sp-6)}
@media(min-width:960px){.shop-layout{grid-template-columns:280px minmax(0,1fr);align-items:start}.shop-side{position:sticky;top:var(--sp-4)}}
.facts{margin:0;display:grid;gap:var(--sp-3)}
.facts div{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:.92rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600;text-align:right}
.side-h{font-size:var(--fs-h3);margin:var(--sp-5) 0 var(--sp-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:.85rem}
.review-on{margin:calc(var(--sp-2) * -1) 0 var(--sp-3) 52px}

/* ---------- become a seller ---------- */
.sell-hero{text-align:center;padding:var(--sp-12) 0 var(--sp-10);max-width:680px;margin:0 auto}
.sell-hero h1{font-size:var(--step-4);text-wrap:balance}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700;color:var(--accent)}
.lead{font-size:1.1rem;color:var(--muted);margin-bottom:var(--sp-6)}
.btn.lg{padding:14px 28px;font-size:1.05rem}
.sell-steps{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-10)}
@media(min-width:760px){.sell-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)}
.step-card h2{font-size:var(--fs-h3);margin:var(--sp-3) 0 var(--sp-2)}
.step-card p{margin:0;color:var(--muted)}
.step-n{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);align-items:center;justify-content:center;font-weight:700}

/* ---------- inbox ---------- */
.convo-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.convo-list li+li{border-top:1px solid var(--line)}
.convo{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);color:var(--ink)}
.convo:hover{background:var(--bg);text-decoration:none}
.convo.unread{background:#f3faf7}
.convo.unread strong{color:var(--accent-dark)}
.convo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.convo-top{display:flex;justify-content:space-between;gap:var(--sp-2)}
.convo-ctx{font-size:.8rem;color:var(--accent-dark);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-preview{font-size:.9rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  height:min(78dvh,760px);overflow:hidden}
.thread-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)}
.thread-who{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.thread-ctx{font-size:.82rem;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);padding:4px 10px;border-radius:99px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-msgs{flex:1;overflow-y:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);background:#fcfbf8;overscroll-behavior:contain}
.thread-empty{margin:auto;text-align:center}
.msg{max-width:min(78%,520px);display:flex;flex-direction:column}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start}
.msg-body{padding:10px 14px;border-radius:16px;line-height:1.45;overflow-wrap:anywhere}
.msg.me .msg-body{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.them .msg-body{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-meta{font-size:.72rem;color:var(--muted);margin-top:2px;padding:0 4px}
.thread-compose{display:flex;gap:var(--sp-2);align-items:flex-end;padding:var(--sp-3);border-top:1px solid var(--line);background:var(--surface)}
.thread-compose textarea{flex:1;resize:none;min-height:44px;max-height:160px}
.thread-note{text-align:center;margin:var(--sp-2) 0 0}
.admin-thread{height:auto;max-height:none}
.admin-thread .thread-msgs{max-height:60vh}
.msg-wrap{display:flex;flex-direction:column}
.msg-wrap.flagged .msg-body{outline:2px solid var(--warm)}
.msg-who{padding:0 4px}
.msg-wrap .msg{max-width:100%}

/* ---------- admin: decisions + review queue ---------- */
.decide{display:flex;flex-direction:column;gap:var(--sp-3)}
.decide h4{margin:0;font-family:var(--sans);font-size:.95rem}
.decide .btn{align-self:flex-start}
.tabs-scroll{flex-wrap:nowrap;overflow-x:auto}
.tabs-scroll .btn{flex:none}
.review-queue{display:flex;flex-direction:column;gap:var(--sp-3)}
.rq-item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4)}
.rq-thumb{width:88px;height:88px;border-radius:8px;overflow:hidden;background:#f4eff2;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.rq-thumb img{width:100%;height:100%;object-fit:cover}
.rq-desc{margin:var(--sp-2) 0;font-size:.9rem;color:var(--muted)}
.rq-body form.flex input{flex:1;min-width:160px}
@media(max-width:640px){.rq-item{grid-template-columns:1fr}.rq-thumb{width:100%;height:160px}}
.sm{font-size:.85rem}
.notice-card{border-color:#f0dfc0;background:#fffaf1}

/* ---------- sign-in setup (admin) ---------- */
.setup-steps{padding-left:1.3em;margin:var(--sp-4) 0 var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.setup-steps li{line-height:1.5}
.setup-steps .copy-field{margin-top:var(--sp-2)}
.copy-field label{font-size:.82rem;color:var(--muted);font-weight:600}
.copy-row{display:flex;gap:var(--sp-2)}
.copy-row input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem!important;background:var(--bg)}
.copy-row .btn{flex:none}

/* ---------- notifications: feed, bell, rules matrix ---------- */
.feed{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.feed li+li{border-top:1px solid var(--line)}
.feed-item{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);color:var(--ink)}
.feed-item:hover{background:var(--bg);text-decoration:none}
.feed-item.unread{background:#f3faf7}
.feed-item.unread strong::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:8px;vertical-align:middle}
.feed-ic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.feed-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.feed-body{color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
.feed-when{color:var(--muted);font-size:.78rem}
.menu>summary{position:relative}
.menu>summary .dot{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.menu-panel .count{margin-left:4px}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:inherit;margin-left:auto}
.bell:hover{background:rgba(255,255,255,.08);text-decoration:none}
.bell .count{position:absolute;top:2px;right:0}
.admin-top .spacer{margin-left:0}
.rules th[scope=row]{font-weight:600;min-width:180px}
.rules th[scope=row] span{display:block}
.rules th[scope=row] .kbd{font-size:.72rem;font-weight:400}
.rules tr.grp th{background:var(--bg);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;color:var(--muted)}
.ch-set{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.ch{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;white-space:nowrap;cursor:pointer}
.ch.locked{color:var(--muted);cursor:not-allowed}
.rules td.na{text-align:center}
.kpi .sm{display:block;margin-top:var(--sp-1)}

/* ---------- legal pages ---------- */
.legal{max-width:720px;margin:var(--sp-6) auto var(--sp-12)}
.legal h1{font-size:var(--fs-display)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}

/* ---------- homepage sliders (hero + per-shop rows) ---------- */
.pw-heroslider{margin:var(--sp-2) 0 var(--sp-6)}
.pw-hslider{position:relative}
.pw-hslider-track{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px}
.pw-hslider-track::-webkit-scrollbar{display:none}
.pw-hslide,.pw-hcard{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
.pw-hslider-row .pw-hcard{flex:0 0 min(74vw,290px)}
/* a row with a single product is a static card, not a cut-off slider: no scroll void, width capped */
.pw-hslider:not([data-pw-slider]) .pw-hslider-track{overflow:visible}
.pw-hslider-row .pw-hcard:only-child{max-width:340px}
.pw-hcard-media{position:relative;display:block;aspect-ratio:16/9;background:#1b0a24;overflow:hidden;flex:none}
/* crop window rides toward the top of the frame: the performers' faces sit in
   the upper third, so a centre crop at phone heights would cut them (owner
   2026-10-09). At a true 16/9 box there is no slack, so this only bites where
   the box is shorter than 16/9 (the mobile hero) — exactly where it must. */
.pw-hcard-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pw-hcard-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0;transition:opacity .25s ease}
.pw-hcard-video.on{opacity:1}
/* delivery speed: a quiet one-line chip in the card body, under the media —
   never a ribbon on top of the video (owner 2026-10-09) */
.pw-hcard-delivery{align-self:flex-start;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.78rem;line-height:1.25;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pw-hslide-body,.pw-hcard-body{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.pw-hslide-title{font-family:var(--serif);font-weight:600;font-size:var(--step-1);line-height:1.25}
.pw-hcard-title{font-weight:600;font-size:var(--step-1);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pw-hcard-shop{color:var(--muted);font-size:.85rem}
.pw-hcard-rate{font-size:.85rem}
.pw-hcard-rate .stars{color:var(--warm)}
.pw-hcard-muted{color:var(--muted)}
.pw-hcard-price{font-weight:700;margin-top:auto}
.pw-hslide-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-2)}
.pw-hslide-price{font-weight:800;font-size:1.15rem}
.pw-hslide-cta{background:var(--accent);color:#fff;font-weight:700;padding:var(--sp-2) var(--sp-4);border-radius:999px;white-space:nowrap}
.pw-hslide:hover .pw-hslide-cta,.pw-hcard:hover .pw-hcard-title{text-decoration:underline}
.pw-hslide:focus-visible,.pw-hcard:focus-visible,.pw-hnav:focus-visible,.pw-hdot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pw-hnav{display:none;position:absolute;top:34%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;align-items:center;justify-content:center}
.pw-hslider[data-live="1"] .pw-hnav{display:flex}
.pw-hnav-prev{left:var(--sp-2)}
.pw-hnav-next{right:var(--sp-2)}
.pw-hdots{display:none;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.pw-hslider[data-live="1"] .pw-hdots{display:flex}
.pw-hdot{width:24px;height:24px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;position:relative}
.pw-hdot::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--accent);background:transparent}
.pw-hdot.on::before{background:var(--accent)}
.pw-shoprows{margin:var(--sp-8) 0}
.pw-shoprow{margin:0 0 var(--sp-8)}
.pw-shoprow-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.pw-shoprow-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.pw-shoprow-name{font-size:var(--fs-h2);margin:0}
.pw-shoprow-rate{font-size:.9rem}
.pw-shoprow-view{margin-left:auto;font-weight:600;white-space:nowrap}
.pw-shoprows-more{text-align:center;margin:var(--sp-2) 0 var(--sp-8)}
@media(min-width:900px){
  .pw-heroslider{max-width:900px;margin-left:auto;margin-right:auto}
  .pw-hslider-row .pw-hcard{flex-basis:300px}
  .pw-hnav{top:38%}
}
@media(prefers-reduced-motion:reduce){
  .pw-hslider-track{scroll-behavior:auto}
  .pw-hcard-video{transition:none}
}

/* ---------- no-cut rules (owner 2026-10-11): text never cuts horizontally ----------
   Blowouts are fixed at the SOURCE (min-width:0 on grid/flex children), never
   masked. overflow-x:clip on html stays ONLY as a safety net. */
.pw-hero .pw-in>*{min-width:0}

/* ---------- home mobile compact (owner 2026-10-09): the first product card must
   be visible at first glance on a phone; desktop untouched. Slider/row rules are
   core-owned; the .pw-hero/.pw-chips/.pw-sec rules carry a body prefix so they
   outrank the tenant block styles that style those blocks. ---------- */
@media(max-width:820px){
  /* hero slider: capped media, one tight body cluster (title, price, CTA) */
  .pw-heroslider{margin:6px 0 10px}
  .pw-heroslider .pw-hcard-media{aspect-ratio:auto;height:clamp(140px,37vw,168px)}
  .pw-hslide-body{padding:9px 14px 10px;gap:2px}
  .pw-hslide-title{font-size:var(--step-1);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
  /* shop/rating stay in the DOM + accessibility tree, just not on a small screen */
  .pw-heroslider .pw-hcard-shop,.pw-heroslider .pw-hcard-rate{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .pw-hslide-foot{margin-top:5px}
  .pw-hdots{margin-top:7px}
  /* headline block: the side video duplicates the hero, so it rests on mobile */
  body .pw-hero{padding:12px 0 14px}
  body .pw-hero .pw-media{display:none}
  body .pw-kicker{padding:4px 10px;margin-bottom:8px}
  body .pw-hero h1{line-height:1.12;margin:0 0 7px}
  body .pw-hero p{line-height:1.5;margin:0}
  body .pw-actions{flex-wrap:nowrap;margin-top:11px;gap:10px}
  body .pw-actions .pw-btn{flex:1 1 0;text-align:center;white-space:normal}
  /* trust row WRAPS on mobile (owner 2026-10-11): the nowrap row was 731px wide
     and blew the whole hero grid out — the horizontal cut. Never again. */
  body .pw-trust{flex-wrap:wrap;margin-top:10px;gap:8px 14px}
  /* occasion tiles become one swipe row instead of a screen of wrapping chips */
  body .pw-sec:has(> .pw-chips){padding:13px 0 11px}
  body .pw-sec:has(> .pw-chips) h2{line-height:1.2;margin:0 0 5px}
  body .pw-sec:has(> .pw-chips) .pw-lead{line-height:1.5;margin-bottom:10px}
  body .pw-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:10px;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body .pw-chips::-webkit-scrollbar{display:none}
  body .pw-chips li{flex:0 0 auto}
  body .pw-chips a{min-height:44px;padding:7px 13px}
  /* shop rows breathe less so the first card lands on the first screen */
  .pw-shoprows{margin:12px 0 var(--sp-6)}
  .pw-shoprow{margin-bottom:22px}
  .pw-shoprow-head{margin-bottom:7px}
  .pw-shoprow-avatar{width:32px;height:32px}
}