/* ============================================================
   YIWU TRENDS — lacquer · brass · porcelain
   Palette drawn from the export trades: black lacquerware,
   aged brass fittings, celadon porcelain, cinnabar seal ink.
   ============================================================ */

:root{
  --lacquer:#171310;
  --lacquer-2:#201914;
  --lacquer-3:#2C231C;
  --brass:#C39A47;
  --brass-hi:#E4CB93;
  --brass-dim:#8A6C30;
  --jade:#2F6D57;
  --jade-hi:#5EAF8C;
  --cinnabar:#A5342B;
  --porcelain:#F4F6F3;
  --porcelain-2:#E8ECE7;
  --ink:#191C1A;
  --ash:#656E68;
  --bone:#EDE7DC;
  --bone-dim:#A1988B;
  --hair:#D6DCD5;
  --hair-dark:#3A2F26;

  --page:min(1320px,92vw);
  --gut:clamp(28px,4vw,56px);
  --r-s:3px;
  --r-m:6px;

  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --serif:"Bodoni Moda","Times New Roman",serif;
}
html[lang="ar"]{ --sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif; --serif:"Amiri","Times New Roman",serif; }
html[lang="zh"]{ --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --serif:"Noto Serif SC","Songti SC",serif; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--porcelain);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{width:var(--page);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* headline type is the personality: high-contrast serif, very tight */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.04;margin:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .serif{letter-spacing:0;line-height:1.3;font-weight:700}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3{letter-spacing:.01em;line-height:1.25;font-weight:600}
h1{font-size:clamp(2.9rem,6.2vw,5.6rem)}
h2{font-size:clamp(2rem,3.6vw,3.2rem)}
h3{font-size:1.18rem;line-height:1.3}
p{margin:0}
.lede{max-width:62ch;color:var(--ash);font-size:1.06rem;line-height:1.72}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}

/* ---------------------------------------------------------- buttons */
.btn,.ghost,.quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:0 26px;border-radius:var(--r-m);
  font-weight:600;font-size:.94rem;letter-spacing:.01em;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.btn{background:var(--brass);color:#1B1508;border-color:var(--brass)}
.btn:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
.ghost{border-color:var(--hair);background:#fff;color:var(--ink)}
.ghost:hover{border-color:var(--ink)}
.quiet{border-color:rgba(237,231,220,.28);color:var(--bone)}
.quiet:hover{border-color:var(--brass);color:var(--brass-hi)}
.full{width:100%}
.on-dark .ghost{background:transparent;border-color:rgba(237,231,220,.3);color:var(--bone)}
.on-dark .ghost:hover{border-color:var(--brass);color:var(--brass-hi)}

/* ---------------------------------------------------------- top bar + header */
.topbar{background:var(--lacquer);color:var(--bone-dim);font-size:.76rem;border-bottom:1px solid var(--hair-dark)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:38px}
.topbar em{font-style:normal;color:var(--brass)}
.langs{margin-inline-start:auto;display:flex;align-items:center;gap:2px}
.langs a{padding:4px 10px;border-radius:99px;color:var(--bone-dim)}
.langs a:hover{color:var(--bone)}
.langs a[aria-current]{background:var(--lacquer-3);color:var(--brass-hi)}

.site{position:sticky;top:0;z-index:40;background:rgba(244,246,243,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.site .wrap{display:flex;align-items:center;height:80px;gap:clamp(20px,3vw,48px)}
.brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.brand b{font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-.04em}
.brand i{width:6px;height:6px;border-radius:50%;background:var(--cinnabar);display:inline-block;transform:translateY(-4px)}
.brand span{font-size:.68rem;letter-spacing:.14em;color:var(--ash);text-transform:none}
.site nav{display:flex;gap:clamp(14px,2vw,30px);font-size:.92rem}
.site nav a{color:#3F4844;padding:6px 0;border-bottom:1px solid transparent}
.site nav a:hover{color:var(--ink)}
.site nav a[aria-current]{color:var(--ink);border-bottom-color:var(--brass)}
.site .tools{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--lacquer);color:var(--brass-hi);font-weight:600}
.burger,.side-toggle{display:none;font-size:1.4rem;line-height:1;padding:8px}

/* ---------------------------------------------------------- hero */
.hero{background:var(--lacquer);color:var(--bone);padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,88px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--brass-dim),transparent)}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,80px);align-items:start}
.hero h1{color:var(--bone);max-width:15ch}
.hero .lede{color:var(--bone-dim);margin-top:26px;max-width:52ch}
.hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.finder{display:flex;align-items:stretch;border:1px solid var(--hair-dark);border-radius:var(--r-m);background:var(--lacquer-2);overflow:hidden;max-width:520px;flex:1 1 340px}
.finder input{flex:1;min-width:0;height:52px;padding-inline:18px;border:0;background:transparent;color:var(--bone)}
.finder input::placeholder{color:#7C7266}
.finder input:focus{outline:none}
.finder button{padding-inline:24px;background:var(--brass);color:#1B1508;font-weight:600;font-size:.92rem}
.finder button:hover{background:var(--brass-hi)}

/* the manifest: the hero's real content, set like a shipping ledger */
.manifest{border:1px solid var(--hair-dark);background:linear-gradient(180deg,var(--lacquer-2),var(--lacquer));border-radius:var(--r-m)}
.manifest header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--hair-dark)}
.manifest header b{font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--bone)}
.manifest header span{font-size:.72rem;color:#7C7266}
.mrow{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid rgba(58,47,38,.6);color:var(--bone-dim);font-size:.86rem}
.mrow:last-of-type{border-bottom:0}
.mrow:hover{background:rgba(195,154,71,.06)}
.mrow .seal{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--brass-dim);border-radius:50%;color:var(--brass);font-size:.7rem;font-weight:600}
.mrow strong{color:var(--bone);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.mrow .px{color:#8D8377;font-size:.8rem}
.mrow .up{color:var(--jade-hi);font-weight:600}
.manifest footer{padding:16px 22px;text-align:center}
.manifest footer a{font-size:.84rem;color:var(--brass);border-bottom:1px solid rgba(195,154,71,.4);padding-bottom:2px}

/* ---------------------------------------------------------- figures strip */
.strip{background:var(--lacquer-2);color:var(--bone);border-block:1px solid var(--hair-dark)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip div{padding:30px 24px;border-inline-start:1px solid var(--hair-dark)}
.strip div:first-child{border-inline-start:0;padding-inline-start:0}
.strip b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:500;color:var(--brass-hi)}
.strip small{display:block;margin-top:8px;color:var(--bone-dim);font-size:.78rem}

/* ---------------------------------------------------------- generic section */
.sec{padding-block:clamp(64px,8vw,120px)}
.sec-head{max-width:70ch;margin-bottom:clamp(36px,4vw,60px)}
.sec-head .lede{margin-top:18px}
.dark{background:var(--lacquer);color:var(--bone)}
.dark h2,.dark h3{color:var(--bone)}
.dark .lede{color:var(--bone-dim)}

/* why — a 2x2 held together by brass rules, no numbers (not a sequence) */
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:0}
.reasons article{padding:clamp(28px,3vw,44px);border-top:1px solid var(--hair)}
.reasons article:nth-child(odd){border-inline-end:1px solid var(--hair);padding-inline-start:0}
.reasons article:nth-child(even){padding-inline-start:clamp(28px,3vw,44px)}
.reasons svg{width:26px;height:26px;color:var(--brass);margin-bottom:20px}
.reasons p{margin-top:12px;color:var(--ash);line-height:1.72;max-width:46ch}

/* steps — genuinely a sequence, so the seals carry numbers */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.step .seal{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:var(--cinnabar);color:#F7EFE3;font-family:var(--serif);font-size:1.3rem;margin-bottom:22px}
.step p{margin-top:12px;color:var(--ash);line-height:1.72}
.dark .step p{color:var(--bone-dim)}

/* ---------------------------------------------------------- filters + grid */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:28px;
  padding-bottom:22px;border-bottom:1px solid var(--hair)}
.filters select,.filters input[type=search]{height:44px;padding-inline:14px;border:1px solid var(--hair);
  border-radius:var(--r-m);background:#fff}
.filters button{height:44px;padding-inline:20px;border-radius:var(--r-m);background:var(--ink);color:var(--porcelain);font-weight:600;font-size:.88rem}
.filters .count{margin-inline-start:auto;color:var(--ash);font-size:.85rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:clamp(14px,1.6vw,22px)}

.tile{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-m);overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tile:hover,.tile:focus-within{border-color:var(--brass);box-shadow:0 14px 40px rgba(23,19,16,.09);transform:translateY(-2px)}
.tile .shot{position:relative;display:block;aspect-ratio:4/3;background:var(--porcelain-2);overflow:hidden}
.tile .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover .shot img{transform:scale(1.035)}
.tile .shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -60px 60px -50px rgba(23,19,16,.5)}
.tile .rank{position:absolute;inset-block-start:12px;inset-inline-start:12px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;background:var(--cinnabar);color:#F7EFE3;
  font-family:var(--serif);font-size:.86rem;box-shadow:0 2px 10px rgba(23,19,16,.3)}
.tile .chip{position:absolute;inset-block-end:12px;inset-inline-start:12px;padding:5px 11px;border-radius:99px;
  background:rgba(23,19,16,.9);color:var(--jade-hi);font-size:.75rem;font-weight:600;letter-spacing:.01em}

.tile .meat{padding:20px;display:flex;flex-direction:column;flex:1}
.tile .cat{color:var(--ash);font-size:.74rem;margin-bottom:8px}
.tile h3{font-size:1.05rem;line-height:1.3}
.tile h3 a{display:block}
.tile .price{margin:16px 0 4px;font-family:var(--serif);font-size:1.75rem;font-weight:500;line-height:1}
.tile .price span{display:block;margin-top:7px;font-family:var(--sans);font-size:.72rem;font-weight:400;color:var(--ash)}
.tile dl{margin:16px 0 0;display:grid}
.tile dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-top:1px solid var(--hair)}
.tile dt{color:var(--ash);font-size:.78rem}
.tile dd{margin:0;font-size:.84rem;font-weight:600}

.meter{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:12px}
.meter .track{flex:1;block-size:3px;background:var(--porcelain-2);border-radius:99px;overflow:hidden;display:block}
.meter .track i{display:block;block-size:100%;border-radius:99px;
  background:linear-gradient(to right,var(--brass-dim),var(--brass))}
html[dir=rtl] .meter .track i{background:linear-gradient(to left,var(--brass-dim),var(--brass))}
.meter b{font-family:var(--serif);font-size:.95rem;color:var(--ink);font-weight:500;flex:0 0 auto}

.tile .keep{position:absolute;inset-block-start:12px;inset-inline-end:12px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.95);
  border:1px solid var(--hair);font-size:1rem;color:var(--ink);z-index:2;
  -webkit-tap-highlight-color:transparent}
.tile .keep.on{background:var(--lacquer);border-color:var(--lacquer);color:var(--brass-hi)}
.tile .veil{position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  background:rgba(244,246,243,.78);backdrop-filter:blur(6px);font-weight:600;font-size:.85rem;color:var(--ink)}
.tile .veil span{padding:12px 22px;border:1px solid var(--brass);border-radius:var(--r-m);background:#fff;
  box-shadow:0 6px 22px rgba(23,19,16,.1)}

.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px}
.pager a,.pager span{min-width:44px;height:44px;display:grid;place-items:center;padding-inline:14px;
  border:1px solid var(--hair);border-radius:var(--r-m);font-size:.88rem;background:#fff}
.pager .on{background:var(--lacquer);border-color:var(--lacquer);color:var(--brass-hi)}
.pager .off{opacity:.4;pointer-events:none}

.blank{grid-column:1/-1;padding:72px 24px;text-align:center;border:1px dashed var(--hair);border-radius:var(--r-m)}
.blank p{margin-top:10px;color:var(--ash)}

/* ---------------------------------------------------------- stories */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.story{border-top:1px solid var(--hair-dark);padding-top:26px}
.story q{display:block;font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:var(--bone);quotes:none}
html[lang="ar"] .story q{font-size:1.14rem;line-height:1.85}
.story .who{margin-top:22px;display:flex;align-items:center;gap:12px}
.story .who img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.story .who b{display:block;font-size:.9rem;font-weight:600;color:var(--bone)}
.story .who small{color:var(--bone-dim);font-size:.78rem}

/* ---------------------------------------------------------- plans */
.plans{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,2.4vw,34px);align-items:stretch;max-width:1000px}
.plan{padding:clamp(30px,3.4vw,48px);border:1px solid var(--hair);border-radius:var(--r-m);background:#fff;display:flex;flex-direction:column}
.plan.gold{background:var(--lacquer);border-color:var(--brass-dim);color:var(--bone)}
.plan .kind{font-size:.8rem;color:var(--ash);letter-spacing:.08em}
.plan.gold .kind{color:var(--brass)}
.plan .fig{margin:16px 0 6px;font-family:var(--serif);font-size:clamp(3rem,5vw,4.4rem);line-height:1;font-weight:500}
.plan.gold .fig{color:var(--brass-hi)}
.plan .fig em{font-family:var(--sans);font-size:.9rem;font-style:normal;font-weight:500;color:var(--ash);margin-inline-start:8px}
.plan.gold .fig em{color:var(--bone-dim)}
.plan>p{color:var(--ash)}
.plan.gold>p{color:var(--bone-dim)}
.plan ul{list-style:none;margin:26px 0;padding:0;flex:1}
.plan li{padding:11px 0;border-top:1px solid var(--hair);font-size:.93rem;display:flex;gap:12px;align-items:flex-start}
.plan.gold li{border-top-color:var(--hair-dark)}
.plan li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--brass)}
.plan .note{margin-top:16px;font-size:.78rem;color:var(--ash);line-height:1.6}
.plan.gold .note{color:#7C7266}

/* ---------------------------------------------------------- faq */
.faq{max-width:820px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-family:var(--serif);
  font-size:1.2rem;position:relative}
html[lang="ar"] .faq summary{padding:24px 0 24px 40px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:6px;inset-block-start:24px;
  color:var(--brass);font-family:var(--sans);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 40px 26px 0;color:var(--ash);line-height:1.75;max-width:70ch}
html[lang="ar"] .faq p{padding:0 0 26px 40px}

/* ---------------------------------------------------------- panels / forms */
.panel{background:#fff;border:1px solid var(--hair);border-radius:var(--r-m);padding:clamp(24px,3vw,38px)}
.dark .panel{background:var(--lacquer-2);border-color:var(--hair-dark)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px);align-items:start}
label{display:block;margin-bottom:18px;font-size:.84rem;font-weight:600;color:#39423D}
.dark label{color:var(--bone-dim)}
label>input,label>select,label>textarea{width:100%;margin-top:8px;padding:0 14px;height:50px;
  border:1px solid var(--hair);border-radius:var(--r-m);background:#fff}
label>textarea{height:auto;padding:14px;line-height:1.6;resize:vertical}
.dark label>input,.dark label>select,.dark label>textarea{background:var(--lacquer);border-color:var(--hair-dark);color:var(--bone)}
label>input:focus,label>select:focus,label>textarea:focus{outline:none;border-color:var(--brass)}
.check{display:flex;align-items:center;gap:10px;font-weight:500}
.check input{width:auto;height:auto;margin:0}

.flash{width:var(--page);margin:18px auto -6px;padding:14px 18px;border-radius:var(--r-m);font-size:.92rem;border:1px solid}
.flash.success{background:#EAF3EE;border-color:#BEDCCD;color:#1D5942}
.flash.error{background:#FBECEA;border-color:#EBC7C2;color:#8C2A22}

/* auth */
.auth{min-height:70vh;display:grid;place-items:center;padding-block:clamp(48px,6vw,90px)}
.auth .panel{width:min(100%,520px)}
.auth h1{font-size:clamp(2.2rem,4vw,3rem);margin-bottom:14px}
.auth .lede{font-size:.98rem;margin-bottom:30px}
.switch{margin-top:22px;text-align:center;font-size:.88rem;color:var(--ash)}
.switch a{color:var(--ink);border-bottom:1px solid var(--brass)}

/* ---------------------------------------------------------- product detail */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,70px);align-items:start}
.detail .shot{position:sticky;top:100px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--hair);background:var(--porcelain-2)}
.detail .shot img{width:100%;aspect-ratio:1;object-fit:cover}
.crumb{display:inline-block;margin-bottom:26px;color:var(--ash);font-size:.88rem}
.detail .kicker{color:var(--ash);font-size:.84rem;margin-bottom:16px}
.detail h1{font-size:clamp(2.2rem,4vw,3.4rem)}
.detail>div>.lede{margin-top:18px}
.facts{margin:34px 0;border:1px solid var(--hair);border-radius:var(--r-m);display:grid;grid-template-columns:1fr 1fr;background:#fff}
.facts div{padding:20px;border-inline-start:1px solid var(--hair);border-block-start:1px solid var(--hair)}
.facts div:nth-child(-n+2){border-block-start:0}
.facts div:nth-child(odd){border-inline-start:0}
.facts small{color:var(--ash);font-size:.78rem}
.facts b{display:block;margin-top:7px;font-family:var(--serif);font-size:1.7rem;font-weight:500}
.supplier{padding:24px;border-radius:var(--r-m);background:var(--lacquer);color:var(--bone);margin-bottom:20px}
.supplier small{color:var(--brass)}
.supplier h3{margin-top:10px;color:var(--bone)}
.supplier p{margin-top:8px;color:var(--bone-dim);font-size:.93rem}

/* ---------------------------------------------------------- checkout & review */
.pay{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);align-items:start}
.paycard{padding:clamp(26px,3vw,40px);border:1px solid var(--brass-dim);border-radius:var(--r-m);
  background:linear-gradient(170deg,var(--lacquer-2),var(--lacquer));color:var(--bone);text-align:center}
.paylabel{color:var(--brass);font-size:.78rem;margin-bottom:10px}
.payamount{font-family:var(--serif);font-size:clamp(3rem,7vw,4.6rem);line-height:1;color:var(--bone);font-weight:500}
.payunit{margin-top:10px;color:var(--bone-dim);font-size:.9rem}
.paynote{margin:18px auto 0;max-width:42ch;color:#8D8377;font-size:.82rem;line-height:1.65}
.pay .qr{width:180px;height:180px;margin:28px auto 0;background:#fff;border-radius:var(--r-m);padding:10px}
.pay .qr img{width:100%;height:100%;object-fit:contain}
.paysteps{display:flex;margin-bottom:28px;border:1px solid var(--hair-dark);border-radius:var(--r-m);overflow:hidden;text-align:start}
.paysteps div{flex:1;padding:13px 14px;font-size:.8rem;color:var(--bone-dim);border-inline-start:1px solid var(--hair-dark)}
.paysteps div:first-child{border-inline-start:0}
.paysteps b{display:block;color:var(--brass);font-family:var(--serif);font-size:1rem;margin-bottom:4px}

.addr{margin-top:18px;padding:15px 16px;border:1px solid var(--hair-dark);border-radius:var(--r-m);
  background:rgba(23,19,16,.6);text-align:start}
.addr small{display:block;color:var(--brass);font-size:.74rem;margin-bottom:8px}
.addr .val{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.addr code{flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:.85rem;color:var(--bone);
  word-break:break-all;line-height:1.55}
.addr button{flex:0 0 auto;min-height:38px;padding:0 15px;border:1px solid var(--brass);border-radius:var(--r-s);
  color:var(--brass-hi);font-size:.8rem;font-weight:600;background:transparent}
.addr button:hover{background:var(--brass);color:#1B1508}

.warn{margin-top:20px;padding:14px 16px;border-inline-start:3px solid var(--cinnabar);
  background:#FBECEA;color:#8C2A22;font-size:.86rem;line-height:1.65;border-radius:0 var(--r-s) var(--r-s) 0;text-align:start}
.paycard .warn{background:rgba(165,52,43,.18);color:#EFB9B2}

.linky{color:var(--ash);font-size:.86rem;border-bottom:1px solid var(--hair);padding-bottom:2px}
.linky:hover{color:var(--ink);border-bottom-color:var(--brass)}
.danger{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  border:1px solid #E0B7B1;border-radius:var(--r-m);color:var(--cinnabar);font-weight:600;font-size:.94rem;background:#fff}
.danger:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}

.pill{display:inline-block;padding:6px 13px;border-radius:99px;font-size:.74rem;font-weight:600;letter-spacing:.02em}
.pill.pending{background:#FBF1DF;color:#8A6C30}
.pill.active{background:#EAF3EE;color:#1D5942}
.pill.rejected{background:#FBECEA;color:#8C2A22}
.pill.draft,.pill.expired,.pill.cancelled{background:var(--porcelain-2);color:var(--ash)}

.review{padding:clamp(26px,3vw,40px);border:1px solid var(--hair);border-inline-start:3px solid var(--brass);
  border-radius:var(--r-m);background:#fff;max-width:760px}
.review.bad{border-inline-start-color:var(--cinnabar);margin-bottom:34px}
.review h3{margin:16px 0 12px;font-size:1.5rem}
.review .adminnote{margin-top:20px;padding:14px 16px;background:var(--porcelain-2);border-radius:var(--r-s);
  font-size:.9rem;line-height:1.65}

.kv{margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.kv>div{padding:14px 0;border-top:1px solid var(--hair)}
.kv .span{grid-column:1/-1}
.kv dt{color:var(--ash);font-size:.76rem;margin-bottom:6px}
.kv dd{margin:0;font-size:.92rem;font-weight:500;word-break:break-word}
.kv dd.big{font-family:var(--serif);font-size:1.6rem;font-weight:500}

.review-card{margin-bottom:18px;padding:clamp(20px,2.4vw,30px);background:#fff;border:1px solid var(--hair);
  border-inline-start:3px solid var(--brass);border-radius:var(--r-m)}
.review-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.review-card>header b{display:block;font-size:1.05rem}
.review-card>header small{color:var(--ash);font-size:.82rem}
.review-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.review-actions .ghost{min-height:42px;padding:0 18px;font-size:.86rem}
.review-form{margin-top:22px;padding-top:22px;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 110px;gap:0 16px;align-items:end}
.review-form label{margin-bottom:0}
.review-buttons{grid-column:1/-1;display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.tx{font-size:.8rem;color:var(--ash);word-break:break-all;line-height:1.6}
a.tx{color:var(--jade);border-bottom:1px solid rgba(47,109,87,.3)}

/* ---------------------------------------------------------- categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.cats a{padding:30px;border:1px solid var(--hair);border-radius:var(--r-m);background:#fff;
  display:flex;flex-direction:column;min-height:190px;transition:border-color .2s}
.cats a:hover{border-color:var(--brass)}
.cats small{color:var(--ash);font-size:.8rem}
.cats h3{margin:14px 0 8px;font-size:1.5rem}
.cats .g{color:var(--jade);font-weight:600;font-size:.9rem}
.cats span{margin-top:auto;padding-top:18px;font-size:.85rem;color:var(--ash)}

/* rows (alerts, lists) */
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--hair)}
.row:first-of-type{border-top:0}
.row small{display:block;color:var(--ash);font-size:.8rem;margin-top:3px}
.row button{color:var(--cinnabar);font-size:.85rem;font-weight:600}
.chip{display:inline-block;padding:6px 12px;border-radius:99px;background:var(--porcelain-2);font-size:.78rem}
.state{margin:22px 0;padding:20px;border-radius:var(--r-m);background:var(--porcelain-2)}
.state small{color:var(--ash);font-size:.78rem}
.state b{display:block;margin-top:6px;font-family:var(--serif);font-size:1.6rem;font-weight:500}

/* ---------------------------------------------------------- footer */
footer.site-foot{background:var(--lacquer);color:var(--bone-dim);padding-block:clamp(52px,6vw,80px) 34px}
footer.site-foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
footer.site-foot .brand b{color:var(--bone)}
footer.site-foot .brand span{color:#7C7266}
footer.site-foot p{margin-top:16px;font-size:.9rem;max-width:34ch;line-height:1.7}
footer.site-foot h4{margin:0 0 14px;font-size:.82rem;font-weight:600;color:var(--bone);letter-spacing:.06em}
footer.site-foot nav{display:flex;flex-direction:column;gap:10px;font-size:.88rem}
footer.site-foot nav a:hover{color:var(--brass-hi)}
.foot-rule{width:var(--page);margin:44px auto 0;padding-top:24px;border-top:1px solid var(--hair-dark);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.78rem;color:#7C7266;line-height:1.7}
.foot-rule p{max-width:78ch}

/* ---------------------------------------------------------- admin */
.admin{background:var(--porcelain-2)}
.side{position:fixed;inset-block:0;inset-inline-start:0;width:250px;padding:26px 20px;background:var(--lacquer);
  color:var(--bone);display:flex;flex-direction:column;z-index:50}
.side .brand b{color:var(--bone)}
.side nav{margin:38px 0;display:flex;flex-direction:column;gap:3px}
.side nav a{padding:11px 14px;border-radius:var(--r-m);color:var(--bone-dim);font-size:.9rem}
.side nav a:hover{color:var(--bone)}
.side nav a[aria-current]{background:var(--lacquer-3);color:var(--brass-hi)}
.side>a:last-child{margin-top:auto;color:var(--bone-dim);font-size:.86rem}
.work{margin-inline-start:250px;padding:clamp(22px,3vw,38px);min-height:100vh}
.work-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.work-top h1{font-size:1.9rem}
.work-top small{color:var(--ash);font-size:.78rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stats article{padding:24px;background:#fff;border:1px solid var(--hair);border-radius:var(--r-m)}
.stats small{color:var(--ash);font-size:.8rem}
.stats b{display:block;margin-top:10px;font-family:var(--serif);font-size:2.1rem;font-weight:500}
.tbl{background:#fff;border:1px solid var(--hair);border-radius:var(--r-m);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--hair);white-space:nowrap;vertical-align:middle}
th{background:var(--porcelain);font-weight:600;font-size:.78rem;color:var(--ash)}
tr:last-child td{border-bottom:0}
td small{color:var(--ash)}
.inline{display:inline}
.rowform{display:flex;gap:7px;align-items:center}
.rowform select,.rowform input{height:36px;padding-inline:9px;border:1px solid var(--hair);border-radius:var(--r-s);background:#fff}
.rowform button{padding:0 12px;height:36px;border:1px solid var(--hair);border-radius:var(--r-s);font-size:.8rem;font-weight:600}
.gridform{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.gridform .span{grid-column:1/-1}
.gridform h2{grid-column:1/-1;margin-bottom:18px;font-size:1.4rem}
.gridform h4{grid-column:1/-1;margin:14px 0 10px;font-size:.82rem;color:var(--ash);font-weight:600;
  padding-top:16px;border-top:1px solid var(--hair)}
.bar{margin-bottom:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;padding:5px 11px;border-radius:99px;font-size:.72rem;font-weight:600}
.tag.pending{background:#FBF1DF;color:#8A6C30}
.tag.active{background:#EAF3EE;color:#1D5942}
.tag.cancelled,.tag.expired{background:var(--porcelain-2);color:var(--ash)}
.tx{font-size:.78rem;color:var(--ash);word-break:break-all;white-space:normal;max-width:230px;display:inline-block}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .hero .wrap{grid-template-columns:1fr}
  .manifest{max-width:640px}
  .plans{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:1080px){
  .cats,.steps,.stories{grid-template-columns:repeat(2,1fr)}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .side{transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 0 60px rgba(0,0,0,.4)}
  html[dir=rtl] .side{transform:translateX(100%)}
  .side.open{transform:none}
  .side-toggle{display:block;margin-bottom:8px}
  .work{margin-inline-start:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .scrim{position:fixed;inset:0;background:rgba(23,19,16,.5);z-index:45;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.on{opacity:1;pointer-events:auto}
}
@media (max-width:900px){
  .site nav{display:none;position:absolute;inset-block-start:100%;inset-inline:0;flex-direction:column;gap:0;
    background:var(--porcelain);border-bottom:1px solid var(--hair);padding:6px var(--gut) 20px;
    box-shadow:0 18px 40px rgba(23,19,16,.08)}
  .site.open nav{display:flex}
  .burger{display:block}
  .detail,.duo,.pay,.reasons{grid-template-columns:1fr}
  .detail .shot{position:static}
  .reasons article{border-inline-end:0!important;padding-inline:0!important}
  .reasons article:first-child{border-top:0;padding-top:0}
  footer.site-foot .wrap{grid-template-columns:1fr 1fr}
  .review-form{grid-template-columns:1fr}
  .review-form label{margin-bottom:16px}
}
@media (max-width:680px){
  :root{--gut:20px;--page:min(1320px,90vw)}
  .cats,.steps,.stories{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .facts,.kv{grid-template-columns:1fr}
  .facts div{border-inline-start:0;border-block-start:1px solid var(--hair)}
  .facts div:first-child{border-block-start:0}
  .paysteps{flex-direction:column}
  .paysteps div{border-inline-start:0;border-block-start:1px solid var(--hair-dark)}
  .paysteps div:first-child{border-block-start:0}
  .topbar em{display:none}
  .topbar .wrap>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filters{gap:8px}
  .filters input[type=search]{flex:1 1 100%}
  .filters select{flex:1 1 calc(50% - 4px);min-width:0}
  .filters .count{flex:1 1 100%;margin-inline-start:0;text-align:center;padding-top:4px}
  .site .wrap{height:68px}
  .brand b{font-size:1.4rem}
  .brand span{display:none}
  .site .tools .ghost{display:none}
  footer.site-foot .wrap{grid-template-columns:1fr}
  .review-actions .ghost,.review-buttons .btn,.review-buttons .danger{flex:1 1 auto}
  .stats{grid-template-columns:1fr}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
  .payamount{font-size:2.9rem}
  .pay .qr{width:150px;height:150px}
  .btn,.ghost,.quiet,.danger{padding:0 18px;font-size:.9rem}
}

/* touch + safe areas */
@supports (padding:max(0px)){
  body{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
  footer.site-foot{padding-bottom:max(34px,env(safe-area-inset-bottom))}
}
@media (hover:none){
  .tile:hover{transform:none;box-shadow:none}
  .tile:hover .shot img{transform:none}
}
button,a,input,select,textarea{-webkit-tap-highlight-color:rgba(195,154,71,.18)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .topbar,.site,footer.site-foot,.filters,.pager,.keep,.veil{display:none}
  body{background:#fff;color:#000}
  .tile{break-inside:avoid;border-color:#ccc}
}