/* ================= 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: warm, romantic and bright — every text pair here passes WCAG AA */
  --bg:#fff6fa; --surface:#ffffff; --ink:#2a1030; --muted:#6b4a63; --line:#f3dde8;
  /* form-control edge: --line is a whisper (1.2:1) — inputs need a real boundary (WCAG 1.4.11 ≥3:1) */
  --line-strong:#a8577d;
  --accent:#be185d; --accent-dark:#9d174d; --accent-soft:#fde7f1;
  --head-bg:linear-gradient(100deg,#5b21b6 0%,#a21caf 52%,#be123c 100%); --head-ink:#ffffff; --sun:#ffd23f;
  --warm:#b45309; --warm-soft:#fdf3e3; --danger:#b3261e; --danger-soft:#fdecea;
  --ok:#2e7d32; --ok-soft:#e9f5ea; --radius:10px; --shadow:0 1px 2px rgba(33,29,25,.06);
  --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 — 3 sizes carry hierarchy: display > heading > body(1rem).
     display = every page title (home hero, PDP title, blog post title). */
  --fs-display:1.85rem; --fs-h1:1.7rem; --fs-h2:1.35rem; --fs-h3:1.12rem; --fs-price:1.5rem;
  /* TEXT SCALE — every other font-size in this file is one of these 9 steps (px names, like a Figma text style).
     Nothing below 12px: badges and captions stay readable on phones. */
  --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-16:1rem;
  --t-18:1.125rem; --t-20:1.25rem; --t-24:1.5rem; --t-30:1.875rem;
  /* RADIUS SCALE — 5 steps; --r-lg follows the theme's --radius so a theme can round every card at once. */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:max(16px,var(--radius)); --r-pill:999px;
  /* BREAKPOINTS (fixed in media queries, CSS can't use vars there): 640 · 768 · 900 · 1200 */
  /* surfaces: --tint = empty image/placeholder wash, --night = the dark plum of the footer, announce strip and video frames */
  --tint:#fbe9f1; --tint-ink:#c79bb4; --night:#2a1036;
}
*{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:var(--t-16);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(--night);color:#fff;font-size:var(--t-12);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;box-shadow:0 6px 20px rgba(91,33,182,.18)}
.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:var(--t-18);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:var(--t-14);padding:6px 10px;border-radius:var(--r-pill)}
.head-nav a:hover{background:rgba(255,255,255,.16);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:0;color:var(--ink);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--t-14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.site-head .head-search input::placeholder{color:var(--muted);opacity:1}
/* one sunny button per header: the CTA. Search stays a quiet glass pill beside its field */
.site-head .head-search .btn{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:var(--r-pill);font-weight:700}
.site-head .head-search .btn:hover{background:rgba(255,255,255,.28)}
.head-links{display:flex;align-items:center;gap:8px}
.head-cta .btn{background:var(--sun);color:var(--ink);border-color:var(--sun);border-radius:var(--r-pill);font-weight:700}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-md);background:rgba(255,255,255,.16);color:#fff;list-style:none;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.26);text-decoration:none}
.count-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-sm);background:var(--sun);color:var(--ink);font-size:var(--t-12);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(--sun)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);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:var(--r-sm)}
.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:var(--t-15)}
.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 #f9d0e3}

/* ---------- hero / sections ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,#f3efe8 100%);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:900px){.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:768px){.grid:has(>.p-card){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}}
@media(min-width:1200px){.grid.cols-4:has(>.p-card){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){
  .p-card .card-pad{padding:10px 10px 12px;gap:4px}
  .p-card .p-title{font-size:var(--t-15);line-height:1.3}
  .p-card .price{font-size:var(--t-16)}
  .p-card .p-seller,.p-card .p-rate{font-size:var(--t-12)}
}
/* 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:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-md);background:rgba(255,255,255,.16)}
.nav-drawer>summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;background:#fff;border-radius:var(--r-xs);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(--head-bg);color:#fff;font-family:var(--serif);font-size:var(--t-20);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:var(--r-md);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:var(--t-18);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:var(--t-12)}
}
@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:var(--tint);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:var(--tint-ink);font-size:var(--t-30)}
.p-card .card-pad{display:flex;flex-direction:column;gap:6px;flex:1}
.p-title{font-weight:600;color:var(--ink);font-size:var(--t-16);line-height:1.35;text-wrap:balance}
.p-title:hover{color:var(--accent)}
.price{font-weight:700;font-size:var(--t-16)}
.price .was{color:var(--muted);font-weight:400;text-decoration:line-through;font-size:var(--t-14);margin-left:6px}
.badge{display:inline-block;font-size:var(--t-12);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle}
.badge.save{background:var(--warm-soft);color:var(--warm)}
.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:var(--r-sm);font-size:var(--t-15);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:var(--t-14)}
.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:var(--t-14);margin-bottom:5px}
.field .req{color:var(--danger)}
input:not([type]),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:var(--r-sm);background:#fdf0f5;
  color:var(--ink);font:inherit;font-size:var(--t-16)}
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:var(--t-13);color:var(--muted);margin-top:4px}
/* ---------- checkout: ONE box, one column, one path ----------
   summary → your details → the video questions → (coupon link) → agree → pay.
   Groups are separated by a hairline and a small label, never by nested boxes. */
.co-page{max-width:600px}
.co-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-5);box-shadow:0 1px 2px rgba(42,16,48,.05)}
@media(max-width:639px){.co-box{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-md)}}
.co-box>h1{font-size:var(--fs-h1);margin:0}
.co-summary{display:flex;flex-direction:column;gap:var(--sp-3);padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.co-line{display:flex;gap:var(--sp-3);align-items:center}
.co-thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);flex:none;margin:0}
.co-line-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:var(--t-15);line-height:1.35}
.co-line-txt .muted{font-size:var(--t-13)}
.co-line-price{font-weight:600;white-space:nowrap}
.co-total{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-18)}
.co-total strong{font-size:var(--t-20)}
.co-save{margin:-4px 0 0;font-size:var(--t-13);color:var(--ok);text-align:right}
/* a fieldset draws its legend INSIDE its top border (the notch); floating the legend takes it out of the
   border so the hairline between groups stays one clean straight line */
.co-group{border:0;border-radius:0;padding:0;margin:0;min-width:0}
.co-group+.co-group{padding-top:var(--sp-5);border-top:1px solid var(--line)}
.co-group>legend{float:left;width:100%;padding:0;margin:0 0 var(--sp-4);font-family:var(--sans);font-size:var(--t-13);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.co-group>legend+*{clear:both}
.co-group>*:not(legend)+*:not(.co-email-help){margin-top:var(--sp-4)}
.co-group .field{margin-bottom:0}
.co-group .help{margin-top:6px}
.co-email-help{margin:6px 0 0}
.co-signed{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:space-between;margin:0;padding:12px 14px;border-radius:var(--r-sm);background:var(--ok-soft);color:var(--ink);font-size:var(--t-15)}
.co-signed strong{overflow-wrap:anywhere}
.co-signed a{font-size:var(--t-14)}
.co-upload .field input[type=file]{padding:10px;background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-sm);width:100%}
.co-coupon{font-size:var(--t-15)}
.co-coupon>summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none;width:max-content}
.co-coupon>summary::-webkit-details-marker{display:none}
.co-coupon-row{margin-top:var(--sp-2)}
.co-finish{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.co-finish .check{font-size:var(--t-15)}
.co-submit{min-height:52px;font-size:var(--t-16);font-weight:700}
.co-trust{margin:0;text-align:center;font-size:var(--t-13);color:var(--muted)}
.buy-note{margin:10px 0 0;font-size:var(--t-14);line-height:1.55;color:var(--muted);text-align:center}
.err-text{font-size:var(--t-14);color:var(--danger);margin-top:4px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-15)}
.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:var(--t-14);padding:0 6px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-15);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:var(--t-18);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:var(--t-18)}
.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:var(--t-14);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:var(--t-13);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.eta-time{font-size:var(--t-20)}
.order-delivery{margin:0}
.dl-player{display:block;width:100%;max-width:720px;max-height:62vh;margin:0 auto 12px;border-radius:var(--r-md);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)}
/* ---------- buyer order page: one column, plain words ---------- */
.order-page{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.order-page>.card{margin:0}
.order-head{padding:var(--sp-2) 0}
.order-kicker{margin:0 0 4px;font-size:var(--t-13);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.order-head h1{font-size:var(--fs-h1);margin:0}
.order-sub{margin:6px 0 0;color:var(--muted);font-size:var(--t-16)}
.order-steps{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:st}
.order-steps li{position:relative;padding-top:14px;font-size:var(--t-13);font-weight:600;color:var(--muted);text-align:center}
.order-steps li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:var(--r-pill);background:var(--line)}
.order-steps li.done::before,.order-steps li.now::before{background:var(--accent)}
.order-steps li.now{color:var(--ink)}
.order-chat{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:center;justify-content:space-between}
.order-chat>div{flex:1 1 260px}
.order-chat p{margin:0}
.order-summary .pay-more{margin-top:var(--sp-3)}
.order-keep{margin:0;font-size:var(--t-14);text-align:center}
.order-tip{margin:0;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}
.order-tip .tip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));max-width:420px;margin-inline:auto}
.order-tip .tip-row form{margin:0}
.order-tip .tip-btn{width:100%;min-width:0}
.tip-for{margin:-4px 0 6px}
.tip-more{font-size:var(--t-14)}
/* tip page: amounts as equal pills in one row */
.tip-amts{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.tip-amts .tip-amt{margin:0}
.tip-amts .opt-head{justify-content:center}
.tip-more{font-size:var(--t-14)}
/* checkout sits centred — equal space both sides on wide screens */
.checkout-page{max-width:1080px;margin-inline:auto}
.checkout-page.co-page{max-width:600px}
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:var(--t-12);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
table.t tr:last-child td{border-bottom:0}
@media(max-width:639px){
  /* 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:var(--r-md);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:var(--t-12);
    text-transform:uppercase;letter-spacing:.04em;flex:none}
  table.t td:first-child{font-size:var(--t-16);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:var(--t-16);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:var(--r-sm);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:var(--night);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:var(--t-12);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:var(--r-sm);
  color:#c4d7d1;font-size:var(--t-15);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:var(--r-sm)}
.nav-account a:hover{background:#2c3f37;text-decoration:none}
.nav-account span{color:#8ba79f;font-size:var(--t-12);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:899px){
  .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:var(--t-12);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:var(--r-sm)}
  .tabbar svg{width:21px;height:21px}
}
/* desktop ≥960: persistent left rail (20 links grouped), account links live in the top bar */
@media(min-width:900px){
  .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:var(--t-14)}
  .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(--t-20)}
@media(min-width:640px){.admin-main h1{font-size:var(--t-24)}}
.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)}
  .admin-main h1{font-size:var(--t-18)}
}
.crumb{font-size:var(--t-14);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:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.big{font-size:var(--t-24);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:var(--t-13);white-space:nowrap}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.stat .n{font-size:var(--t-24);font-weight:700;font-family:var(--serif)}
.stat .l{font-size:var(--t-13);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:var(--t-15)}
.note-card h3{font-size:var(--t-16);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:639px){
  .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:var(--t-14)}
.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:var(--r-sm);font-weight:600;font-size:var(--t-14);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:var(--tint);display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-ext{font-size:var(--t-13);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:var(--t-14);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-sub{font-size:var(--t-12);color:var(--muted)}
.media-url{font-size:var(--t-12);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:var(--tint);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:var(--tint-ink)}
.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:var(--r-sm);overflow:hidden;background:var(--tint);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:var(--tint)}
.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:var(--t-30);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;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.gallery .thumbs .t{position:relative;cursor:pointer;width:84px;height:63px;background:var(--night);scroll-snap-align:start}
.gallery .thumbs .t img{object-fit:contain}
.gallery .thumbs .t.is-review{border-color:#f59e0b}
.gallery .rv-tag{position:absolute;left:0;right:0;top:0;padding:1px 4px;font-size:var(--t-12);font-weight:700;line-height:1.4;color:var(--ink);background:var(--sun,var(--sun));text-align:center;letter-spacing:.02em}
figure.gal-slide{margin:0}
.stack-rv{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--night)}.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:var(--t-14);line-height:1.45;background:linear-gradient(rgba(16,4,24,.88),rgba(16,4,24,.6) 70%,rgba(16,4,24,0));max-height:78%;overflow:auto;z-index:1}
.gal-cap p{margin:4px 0 0}
.gal-cap .stars{color:var(--sun);letter-spacing:1px}
.gal-cap .cap-tag{font-size:var(--t-12);font-weight:700;padding:1px 6px;border-radius:var(--r-pill);background:var(--sun);color:var(--ink);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:var(--sun);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:var(--night)}
.gallery .thumbs .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:var(--t-16);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:clamp(1.25rem,1.05rem + .9vw,1.75rem);line-height:1.25;margin:.1em 0 .35em}
.pdp-rating{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-15);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:var(--t-16);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:var(--t-16)}
.buy-row .buy-cart,.buy-row .buy-demo{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:var(--r-sm);display:block}
input[type=file]{padding:10px;border:1px dashed var(--line);border-radius:var(--r-sm);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:var(--t-16)}
.opt-feats{font-size:var(--t-14);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:var(--t-14);color:var(--muted);margin-top:12px}
.pdp-trust{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:var(--t-14);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:var(--t-14);font-weight:600;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:var(--r-pill);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:var(--t-14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw;display:block}
  .sticky-atc-info .sk>span{font-weight:700;font-size:var(--t-16);color:var(--accent-dark)}
  .sticky-atc-info u{font-weight:600;font-size:var(--t-13);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:var(--t-14);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:var(--t-13)}
.rv-rate{display:flex;align-items:center;gap:6px;margin-left:auto}
.rv-num{font-weight:650;font-size:var(--t-14);font-variant-numeric:tabular-nums}
.rv-body{margin:.5em 0 0;overflow-wrap:anywhere}
.stars{color:var(--warm);letter-spacing:2px;font-size:var(--t-15)}
.stars.lg{font-size:var(--t-20);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:var(--r-sm)}
.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:var(--r-pill);overflow:hidden}
.rv-track i{display:block;height:100%;background:var(--warm);border-radius:var(--r-pill)}
.rv-bcount{text-align:right;font-size:var(--t-14);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:var(--t-14)}
.rv-sortby{color:var(--muted)}
.rv-sort{padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);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:var(--r-pill);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:var(--t-20);line-height:1.3}
}
.p-title.feat-title{font-size:var(--t-18)}
.post-layout{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:1200px){.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:var(--t-14);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:var(--t-13);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:var(--t-16)}
.post-side{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(min-width:1200px){.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:var(--t-15);margin:0 0 .55em}
.toc ol{margin:0;padding-left:1.15em;font-size:var(--t-15)}
.toc li{margin:.35em 0}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--accent)}
.toc .lvl-3{margin-left:.8em;font-size:var(--t-14)}

/* ---------- 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:var(--t-15)}
.summary .total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:700;font-size:var(--t-18)}
.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:var(--r-sm);overflow:hidden;background:var(--tint);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:var(--t-12);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.blk-hero{background:linear-gradient(180deg,#fff,#f2efe8);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:var(--r-sm);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(--fs-h1)}
.prose h2{font-size:var(--fs-h2)}
.prose h3{font-size:var(--fs-h3)}
.prose h4{font-size:var(--t-16)}
.prose h5,.prose h6{font-size:var(--t-16)}
.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:var(--r-sm);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:var(--r-xs);padding:1px 6px;font-size:.9em;font-family:ui-monospace,monospace}
.prose pre.code{background:#1f1c17;color:#f4efe6;padding:12px 14px;border-radius:var(--r-sm);overflow:auto;font-size:var(--t-12);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:var(--t-14);margin-top:.4em}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:#f1dfee;margin-top:var(--sp-12);padding:var(--sp-8) 0 var(--sp-6);font-size:var(--t-15)}
.site-foot .foot-h{color:#fff;font-family:var(--sans);font-size:var(--t-14);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.site-foot a{color:#f1dfee;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}
.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:767px){
  .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 #4a2a55;margin-top:var(--sp-6);padding-top:var(--sp-4);font-size:var(--t-14);color:#d9bfd4;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cur-pick{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--sp-5);font-size:var(--t-14)}
.cur-pick .cur-label{color:#d9bfd4}
.cur-pick strong{color:#fff;letter-spacing:.03em}
.cur-pick a{display:inline-block;color:#f1dfee;padding:2px 0;letter-spacing:.03em}
.cur-pick a:hover{color:#fff}
.crumbs{font-size:var(--t-14);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:var(--r-sm);background:var(--surface);font-size:var(--t-14)}
.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:var(--r-xs);padding:1px 6px;font-size:.85em;font-family:ui-monospace,monospace}
.sc-ref{font-size:var(--t-14)}
.sc-ref code{background:#efe9df;padding:1px 5px;border-radius:var(--r-xs)}
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:1200px){.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:var(--t-12);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:var(--r-sm);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:var(--r-sm);background:var(--ink);color:#fff;font-size:var(--t-12);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:var(--t-14)}
.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:var(--r-sm);overflow:auto;font-size:var(--t-12);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:900px){.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:900px){.code-tree{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow:auto}}
.code-tree h3{font-family:var(--sans);font-size:var(--t-12);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:var(--r-sm);
  color:var(--ink);font-size:var(--t-14);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:var(--t-20);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:var(--t-14);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:var(--r-xs);font-size:.85em}
.ref-title{font-family:var(--sans);font-size:var(--t-13);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:var(--t-14)}
.ref-list li:last-child{border-bottom:0}
.ref-list .muted{font-size:var(--t-14)}
.small-note{font-size:var(--t-14);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:var(--t-14)}
.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:var(--tint)}
.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:var(--t-14)}
.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:var(--t-14);margin-bottom:6px}
.prog-track{height:8px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);overflow:hidden}
.prog-fill{height:100%;background:var(--accent);border-radius:var(--r-pill)}
.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:var(--t-16);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:var(--t-16)}
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:var(--r-xs)}
@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:6px}
  .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}
  .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:639px){
  input,select,textarea{font-size:var(--t-16)}
  .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:var(--t-24)}
  .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:var(--t-14);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:var(--t-24)!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:var(--t-15);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:var(--r-pill);
  background:var(--danger);color:#fff;font-size:var(--t-12);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:768px){.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:var(--t-13);font-weight:600}
.kpi strong{display:block;font-size:var(--t-24);font-variant-numeric:tabular-nums;margin-top:var(--sp-1)}
.meter{height:8px;background:#eee9e1;border-radius:var(--r-pill);overflow:hidden;margin-top:var(--sp-2)}
.meter span{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.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:var(--r-sm);overflow:hidden;background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:var(--t-24)}
.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:var(--t-14);color:var(--muted)}
.plist-note{margin:var(--sp-1) 0 0;font-size:var(--t-14);color:var(--danger)}
.plist-actions{grid-column:1/-1;display:flex;gap:var(--sp-2);flex-wrap:wrap}
@media(min-width:768px){.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:var(--t-14);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:var(--r-sm);overflow:hidden;background:var(--tint);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:var(--t-12);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:var(--r-sm);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:var(--t-14)}
.av-lg.av-txt{font-size:var(--t-24)}

/* ---------- "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:var(--t-16)}
.sm-label{font-size:var(--t-12);text-transform:uppercase;letter-spacing:.05em}
.seller-facts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:var(--t-14);color:var(--muted)}
.p-seller{font-size:var(--t-14);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:var(--t-14);margin:2px 0}
.p-rate .stars{color:#f5a623}
.p-seller:hover{color:var(--accent)}

/* ---------- public shop page ---------- */
.crumbs{font-size:var(--t-14);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:#e0a100}
.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:900px){.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:var(--t-15)}
.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:var(--r-pill);padding:4px 10px;font-size:var(--t-14)}
.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:clamp(1.8rem,5vw,2.6rem);text-wrap:balance}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-13);font-weight:700;color:var(--accent)}
.lead{font-size:var(--t-18);color:var(--muted);margin-bottom:var(--sp-6)}
.btn.lg{padding:14px 28px;font-size:var(--t-16)}
.sell-steps{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-10)}
@media(min-width:768px){.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:var(--t-13);color:var(--accent-dark);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-preview{font-size:var(--t-14);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:var(--t-13);font-weight:600;background:var(--accent-soft);color:var(--accent-dark);padding:4px 10px;border-radius:var(--r-pill);
  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:var(--r-lg);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:var(--t-12);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 #e0a100}
.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:var(--t-15)}
.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:var(--r-sm);overflow:hidden;background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:var(--t-30)}
.rq-thumb img{width:100%;height:100%;object-fit:cover}
.rq-desc{margin:var(--sp-2) 0;font-size:var(--t-14);color:var(--muted)}
.rq-body form.flex input{flex:1;min-width:160px}
@media(max-width:639px){.rq-item{grid-template-columns:1fr}.rq-thumb{width:100%;height:160px}}
.sm{font-size:var(--t-14)}
.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:var(--t-13);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:var(--t-14)!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:var(--t-16)}
.feed-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.feed-body{color:var(--muted);font-size:var(--t-15);overflow-wrap:anywhere}
.feed-when{color:var(--muted);font-size:var(--t-12)}
.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:var(--t-12);font-weight:400}
.rules tr.grp th{background:var(--bg);text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-12);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:var(--t-14);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)}

/* ---------- polish pass: cards, search, rhythm ---------- */
/* product cards: the discount sits on the picture, the price is pinned to the card's foot,
   so every card in a row lines up whether or not it has a rating yet */
.p-card .thumb{position:relative}
.p-card .thumb>.badge.save{position:absolute;top:var(--sp-2);left:var(--sp-2);box-shadow:0 2px 6px rgba(42,16,48,.18)}
.p-card .p-price{margin-top:auto;padding-top:var(--sp-1)}
.p-seller{max-width:100%;min-width:0}
.p-seller-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* cards dropped into rich text: .prose img rules (auto height, margins, rounded) must not reach them */
.prose .card img{margin:0;border-radius:0}
.p-card img.p-seller-av{width:22px;height:22px;border-radius:50%;margin:0}
/* search suggestions (datalist) keep working on type, without Chrome's stray dropdown arrow */
input[list]::-webkit-calendar-picker-indicator{display:none!important}

/* ---------- tabs (admin editors): one topic per tab, zero JS ----------
   radios pick the panel; the bar sticks under the admin top bar and scrolls sideways on a phone.
   A tab holding a field the browser rejected on Save gets a red dot (:user-invalid), so a required field
   on another tab is never a silent "nothing happened". */
.tabs{min-width:0}
.tab-r{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.tab-bar{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line);margin:0 0 var(--sp-5);background:var(--bg);padding-top:4px}
.tab-bar::-webkit-scrollbar{display:none}
/* phones: the title bar with Save is the sticky one, the tab row scrolls away under it */
@media(min-width:640px){.tab-bar{position:sticky;top:0;z-index:20}.admin .tab-bar{top:54px}}
.tab-l{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;margin-bottom:-1px;cursor:pointer;
  font-weight:600;font-size:var(--t-15);color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;user-select:none}
.tab-l:hover{color:var(--ink)}
/* link tabs (pages / filters) share the look; the current one is underlined */
.link-tabs .tab-l{text-decoration:none}
.link-tabs .tab-l.on{color:var(--accent-dark);border-bottom-color:var(--accent)}
/* a row that scrolls sideways shows it: the last tab fades out at the edge */
@media(max-width:639px){.tab-bar{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}}
.tab-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--line);color:var(--ink);font-size:var(--t-12);font-weight:700}
.tab-panel{display:none;min-width:0}
.tab-panel>*+*{margin-top:var(--sp-4)}
/* the form around the field panels must not become a box of its own */
.tab-panels>form{display:contents}
.tab-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-5)}
.tabs>.tab-r:nth-of-type(1):checked~.tab-panels .tab-panel[data-i="1"]{display:block}
.tabs>.tab-r:nth-of-type(1):checked~.tab-bar>.tab-l:nth-child(1){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(1):focus-visible~.tab-bar>.tab-l:nth-child(1){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="1"] :user-invalid)>.tab-bar>.tab-l:nth-child(1)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(2):checked~.tab-panels .tab-panel[data-i="2"]{display:block}
.tabs>.tab-r:nth-of-type(2):checked~.tab-bar>.tab-l:nth-child(2){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(2):focus-visible~.tab-bar>.tab-l:nth-child(2){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="2"] :user-invalid)>.tab-bar>.tab-l:nth-child(2)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(3):checked~.tab-panels .tab-panel[data-i="3"]{display:block}
.tabs>.tab-r:nth-of-type(3):checked~.tab-bar>.tab-l:nth-child(3){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(3):focus-visible~.tab-bar>.tab-l:nth-child(3){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="3"] :user-invalid)>.tab-bar>.tab-l:nth-child(3)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(4):checked~.tab-panels .tab-panel[data-i="4"]{display:block}
.tabs>.tab-r:nth-of-type(4):checked~.tab-bar>.tab-l:nth-child(4){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(4):focus-visible~.tab-bar>.tab-l:nth-child(4){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="4"] :user-invalid)>.tab-bar>.tab-l:nth-child(4)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(5):checked~.tab-panels .tab-panel[data-i="5"]{display:block}
.tabs>.tab-r:nth-of-type(5):checked~.tab-bar>.tab-l:nth-child(5){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(5):focus-visible~.tab-bar>.tab-l:nth-child(5){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="5"] :user-invalid)>.tab-bar>.tab-l:nth-child(5)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(6):checked~.tab-panels .tab-panel[data-i="6"]{display:block}
.tabs>.tab-r:nth-of-type(6):checked~.tab-bar>.tab-l:nth-child(6){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(6):focus-visible~.tab-bar>.tab-l:nth-child(6){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="6"] :user-invalid)>.tab-bar>.tab-l:nth-child(6)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(7):checked~.tab-panels .tab-panel[data-i="7"]{display:block}
.tabs>.tab-r:nth-of-type(7):checked~.tab-bar>.tab-l:nth-child(7){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(7):focus-visible~.tab-bar>.tab-l:nth-child(7){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="7"] :user-invalid)>.tab-bar>.tab-l:nth-child(7)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(8):checked~.tab-panels .tab-panel[data-i="8"]{display:block}
.tabs>.tab-r:nth-of-type(8):checked~.tab-bar>.tab-l:nth-child(8){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(8):focus-visible~.tab-bar>.tab-l:nth-child(8){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="8"] :user-invalid)>.tab-bar>.tab-l:nth-child(8)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(9):checked~.tab-panels .tab-panel[data-i="9"]{display:block}
.tabs>.tab-r:nth-of-type(9):checked~.tab-bar>.tab-l:nth-child(9){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(9):focus-visible~.tab-bar>.tab-l:nth-child(9){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="9"] :user-invalid)>.tab-bar>.tab-l:nth-child(9)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(10):checked~.tab-panels .tab-panel[data-i="10"]{display:block}
.tabs>.tab-r:nth-of-type(10):checked~.tab-bar>.tab-l:nth-child(10){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(10):focus-visible~.tab-bar>.tab-l:nth-child(10){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="10"] :user-invalid)>.tab-bar>.tab-l:nth-child(10)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(11):checked~.tab-panels .tab-panel[data-i="11"]{display:block}
.tabs>.tab-r:nth-of-type(11):checked~.tab-bar>.tab-l:nth-child(11){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(11):focus-visible~.tab-bar>.tab-l:nth-child(11){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="11"] :user-invalid)>.tab-bar>.tab-l:nth-child(11)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
.tabs>.tab-r:nth-of-type(12):checked~.tab-panels .tab-panel[data-i="12"]{display:block}
.tabs>.tab-r:nth-of-type(12):checked~.tab-bar>.tab-l:nth-child(12){color:var(--accent-dark);border-bottom-color:var(--accent)}
.tabs>.tab-r:nth-of-type(12):focus-visible~.tab-bar>.tab-l:nth-child(12){outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-xs)}
.tabs:has(.tab-panel[data-i="12"] :user-invalid)>.tab-bar>.tab-l:nth-child(12)::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--danger)}
/* the public demo's strip: always on top, never in the way */
.demo-bar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;background:#111827;color:#f3f4f6;font-size:var(--t-14);line-height:1.4;text-align:center;padding:10px 16px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.demo-tag{background:#facc15;color:#111827;font-weight:800;font-size:var(--t-12);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 10px}
.demo-bar .demo-cta{background:#facc15;color:#111827;font-weight:700;border-radius:var(--r-pill);padding:7px 16px;text-decoration:none;white-space:nowrap}
.demo-bar .demo-cta:hover{background:#fde047}