/*
Theme Name: Sapa Herbs
Theme URI: https://sapaherbs.com
Author: Sapa Herbs
Description: Giao diện cho Sapaherbs.com. Dầu thơm, sáp thơm, xịt thơm từ thảo mộc Sapa, cùng tiểu thuyết và ảnh film của tác giả. Có giỏ hàng gửi đơn về email và Zalo.
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sapaherbs
*/

/* Layout concept: an old apothecary label. Aged cream paper, indigo ink (the indigo of H'Mong dyed hemp),
   a soft sage green for everything that grows. Headings in Lora, all running text typed in Courier New.
   Double-ruled frames and printed offset shadows instead of soft drop shadows. */
:root{
  --paper:#F4EFE1;        /* aged cream */
  --card:#FAF6EA;         /* label stock, a touch lighter than the page */
  --paper-2:#E4E9D6;      /* sage wash */
  --paper-3:#DCE3EB;      /* indigo wash */
  --ink:#222C45;          /* indigo ink */
  --ink-2:#525B70;        /* secondary text */
  --moss:#4B6A47;         /* soft sage green: accents, emphasis */
  --indigo:#2D4070;       /* actions */
  --on-indigo:#F6F2E6;
  --bark:#86501F;         /* prices, sepia */
  --honey:#C2933F; --blush:#EADBC9;
  --line:rgba(34,44,69,.2);
  --rule:rgba(34,44,69,.38);   /* double-ruled frames */
  --shade:rgba(34,44,69,.2);   /* printed offset shadow */
  --veil:244,239,225;
  --film:#2A2B26; --film-fg:#E7E4D4; --film-mark:#D9B56E;
  --cover:#2D4070; --cover-fg:#F4EFE1;
  --s1:#8FA85A; --s2:#C98548; --s3:#4E6FA0;
  --err:#A63A22; --ok-bg:#DCE5CC;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .17 0 0 0 0 .27 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --display:"Lora","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --type:"Courier New","Cousine",Courier,"Liberation Mono",monospace;
  --gutter:clamp(18px,4.5vw,44px);
}
/* One light palette on every device: the page does not switch to a dark theme when the phone does. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper) var(--grain);color:var(--ink);font-family:var(--type);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
h1,h2,h3,.dname,legend,.brand{font-family:var(--display)}
h1,h2,.dname{font-weight:500;margin:0;text-wrap:balance;line-height:1.18}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.65rem,3.2vw,2.4rem)}
.dname{font-size:1.5rem}
h3{font-size:1.1rem;font-weight:600;margin:0;line-height:1.4}
h1 em,h2 em{font-style:italic;color:var(--moss)}
p{margin:0}
.label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.head .label{display:flex;align-items:center;gap:10px;color:var(--moss);font-weight:700}
.head .label::before{content:"";flex:none;width:26px;height:1px;background:currentColor}
.lede{color:var(--ink-2);max-width:60ch}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(44px,7vw,84px)}
.head{display:grid;gap:12px;margin-bottom:clamp(24px,4vw,40px)}
.anchor{scroll-margin-top:110px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.6em 1.3em;border:1.5px solid var(--ink);border-radius:4px;font:700 .92rem/1.2 var(--type);letter-spacing:.02em;text-decoration:none;cursor:pointer;background:transparent;color:var(--ink);transition:transform .12s,box-shadow .12s,background .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.go{background:var(--indigo);border-color:var(--indigo);color:var(--on-indigo);box-shadow:3px 3px 0 var(--shade)}
.btn.go:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shade)}
.btn.small{min-height:42px;padding:.45em 1em;font-size:.86rem}
.btn[disabled]{opacity:.55;cursor:progress}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(var(--veil),.95);backdrop-filter:blur(8px);border-bottom:3px double var(--rule)}
.admin-bar .top{top:32px}
@media (max-width:782px){ .admin-bar .top{top:46px} }
@media (max-width:600px){ .admin-bar .top{top:0} }
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;padding-block:10px}
.brand{font-size:1.45rem;font-weight:600;line-height:1.1;text-decoration:none;white-space:nowrap;color:var(--ink)}
.brand::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.4em;border-radius:0 80% 0 80%;background:var(--moss);transform:rotate(-8deg) translateY(-.02em)}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap;margin-left:auto;font-size:.9rem}
.nav a{text-decoration:none;color:var(--ink-2);padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--indigo)}
.lang{font-size:.8rem;letter-spacing:.08em;background:none;border:1px solid var(--rule);color:var(--ink);border-radius:4px;min-height:38px;padding:0 12px;cursor:pointer}
@media (max-width:900px){
  .top{position:static}
  .top .wrap{padding-block:8px}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:2px 8px;font-size:.84rem;border-top:1px solid var(--line);padding-top:2px}
  .lang{margin-left:auto}
}
@media (max-width:420px){ .top .btn{display:none} .nav{font-size:.78rem} }

/* shared */
.split{display:grid;gap:clamp(30px,5vw,60px);align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1.1fr .9fr} }
.row{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-2)}
.facts li::before{content:"✓ ";color:var(--moss);font-weight:700}
.prose{display:grid;gap:16px;min-width:0}
.prose p{max-width:60ch}

/* home: hero, mountains printed in indigo */
.hero-art{position:relative;isolation:isolate;overflow:hidden;background:var(--paper-3);display:grid;align-items:end;min-height:min(76vh,660px);border-bottom:3px double var(--rule)}
.hero-art .bg{position:absolute;inset:0;z-index:-3}
.hero-art .bg canvas,.hero-art .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-art .bg img{z-index:1}
.hero-art::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--veil),.94) 0%,rgba(var(--veil),.78) 40%,rgba(var(--veil),0) 80%),linear-gradient(0deg,rgba(var(--veil),.5) 0%,rgba(var(--veil),0) 40%)}
@media (max-width:760px){ .hero-art::before{background:linear-gradient(180deg,rgba(var(--veil),.6) 0%,rgba(var(--veil),.86) 50%,rgba(var(--veil),.94) 100%)} }
.mist{position:absolute;z-index:-2;left:-25%;right:-25%;top:12%;bottom:0;pointer-events:none;background:radial-gradient(48% 30% at 28% 62%,rgba(var(--veil),.6),transparent 72%),radial-gradient(40% 26% at 74% 48%,rgba(var(--veil),.45),transparent 72%);animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-5%,0,0)}to{transform:translate3d(5%,-2%,0)}}
@media (prefers-reduced-motion:reduce){ .mist{animation:none} }
.hero-art .wrap{position:relative;display:grid;gap:14px;padding-block:clamp(64px,13vh,140px) clamp(30px,5vw,52px)}
.hero-copy{display:grid;gap:20px;min-width:0;max-width:640px}
.hero-art .label{color:var(--indigo);font-weight:700}
.hero-art h1{font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:1.1}
.hero-art .lede{color:var(--ink);max-width:54ch}
.hero-art .facts{color:var(--ink)}
.hero-cap{display:flex;gap:14px;align-items:baseline;font-size:.72rem;color:var(--ink-2);padding-top:4px}
.hero-cap .stamp{margin-left:auto;font-weight:700;letter-spacing:.14em;color:var(--bark)}
.hero-art .bg:has(img) ~ .wrap .stamp{display:none}

/* home: quick buy, epigraph, doors, writer, close */
.quick{background:var(--paper-2) var(--grain)}
.qk-foot{margin-top:22px;font-size:.92rem}
.qk-foot a{color:var(--indigo);font-weight:700}
.sec.epi{background:var(--paper-2) var(--grain);text-align:center;border-block:3px double var(--rule)}
.sec.close{background-color:var(--cover);background-image:radial-gradient(circle at 2px 2px,rgba(244,239,225,.13) 1.2px,transparent 1.6px);background-size:16px 16px;color:var(--cover-fg);text-align:center}
.epi .wrap,.close .wrap{display:grid;justify-items:center;gap:20px}
.epi .label{color:var(--ink-2)}
.sprig{width:120px;height:24px;color:var(--moss)}
.close .sprig{color:var(--honey)}
.epi blockquote{margin:0;max-width:780px;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.3rem,2.9vw,2.05rem);line-height:1.45;text-wrap:balance}
.close h2{max-width:24ch;font-size:clamp(1.65rem,3.8vw,2.7rem)}
.close p{opacity:.9}
.close .btn.go{background:#F4EFE1;border-color:#F4EFE1;color:#222C45;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.close .btn.go:hover{background:var(--honey);border-color:var(--honey);color:#1B2238}
.worlds{display:grid;gap:18px}
@media (min-width:820px){ .worlds{grid-template-columns:repeat(3,1fr)} }
.world{display:grid;align-content:start;gap:8px;padding:0 0 20px;background:var(--card);border:3px double var(--rule);border-radius:6px;overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.world:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shade)}
.w-pic{position:relative;aspect-ratio:16/10;margin-bottom:12px;background:var(--paper-3);border-bottom:1px solid var(--rule)}
.w-pic canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.world > :not(.w-pic){margin-inline:20px}
.world .dname{font-size:1.6rem;font-style:italic}
.world > span:not(.label){font-size:.92rem;color:var(--ink-2);line-height:1.65}
.world i{font-style:normal;color:var(--indigo);font-size:1.2rem}
.sec.band{background:var(--paper-3) var(--grain)}
.author{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){ .author{grid-template-columns:.85fr 1.15fr} }
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px;margin:6px 0 4px;padding:20px 0 0;border-top:1px solid var(--rule);list-style:none}
@media (min-width:700px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stats b{display:block;font-family:var(--display);font-weight:500;font-size:2.2rem;line-height:1;color:var(--indigo)}
.stats span{display:block;margin-top:6px;font-size:.78rem;line-height:1.5;color:var(--ink-2)}

/* negative */
.neg{position:relative;background:var(--film);color:var(--film-fg);padding:30px 14px;margin:0}
.neg::before,.neg::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--paper) 9px 21px,transparent 21px 30px)}
.neg::before{top:9px}
.neg::after{bottom:9px}
.frame{position:relative;aspect-ratio:3/2;max-width:100%;overflow:hidden;background:#3a3b34}
.frame canvas,.frame img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.frame img{z-index:1}
.frame img ~ .date{display:none}
.date{position:absolute;right:12px;bottom:9px;z-index:2;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:#FF9A3D;text-shadow:0 0 6px rgba(255,120,20,.7)}
.cell-foot{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-top:8px;font-size:.72rem;color:var(--film-mark)}
.cell-foot span:last-child{color:var(--film-fg);text-align:right}
.slot-note{display:none}
.draft .slot-note{display:block;font-size:.76rem;color:var(--ink-2);margin-top:12px}
.draft .slot-note::before{content:"✎ "}

/* finder */
.finder{display:grid;gap:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:.88rem;min-height:46px;padding:.5em 1.1em;border:1.5px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--indigo)}
.chip[aria-pressed="true"]{background:var(--indigo);color:var(--on-indigo);border-color:var(--indigo)}
.pick{display:grid;gap:18px;padding:22px;background:var(--paper-2);border:3px double var(--rule);border-radius:6px}
@media (min-width:760px){ .pick{grid-template-columns:1fr auto;align-items:center} }
.pick-copy{display:grid;gap:8px;min-width:0}
.pick-copy p:last-child{color:var(--ink-2);max-width:60ch}

/* story */
.story{display:grid;gap:clamp(30px,5vw,64px)}
@media (min-width:880px){ .story{grid-template-columns:1fr 1fr} }
.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;counter-increment:s}
.steps li::before{content:counter(s) ".";color:var(--indigo);font-weight:700}
.steps p{color:var(--ink-2);font-size:.94rem}
.letter{display:grid;gap:16px;align-content:start;padding:clamp(22px,3.5vw,34px);background:var(--paper-2);border:3px double var(--rule);border-radius:6px}
.letter .label{margin-top:6px}
.contact{display:grid;gap:0;list-style:none;margin:0;padding:0;max-width:640px}
.contact li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.contact li:last-child{border-bottom:1px solid var(--line)}
.contact span:first-child{color:var(--ink-2)}
.sel{user-select:all;font-weight:700;overflow-wrap:anywhere}

/* products: two per row on phones, three on large phones, as many as fit on desktop */
.prods,.qk-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:540px){ .prods,.qk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }
@media (min-width:900px){ .prods,.qk-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px} }
.prod,.qk{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;background:var(--card);border:3px double var(--rule);border-radius:6px}
.prod-pic{position:relative;aspect-ratio:4/3;max-width:100%;background:linear-gradient(160deg,var(--paper-2),var(--paper-3));display:grid;place-items:center;color:var(--indigo);overflow:hidden;border-radius:3px;border:1px solid var(--line)}
.prod-pic svg{width:38%;height:auto;max-height:74%}
.prod-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod-pic .label{position:absolute;left:6px;top:6px;background:var(--card);border:1px solid var(--rule);padding:0 6px;border-radius:2px;color:var(--ink);font-size:.64rem;letter-spacing:.1em;line-height:1.7}
.prod h3.dname,.qk h3.dname{font-size:1rem;font-weight:600;line-height:1.28}
.price{color:var(--bark);font-weight:700;font-variant-numeric:tabular-nums;font-size:.92rem}
.price span{font-weight:400;color:var(--ink-2)}
.price s{font-weight:400;color:var(--ink-2);margin-right:8px}
.prod .d,.qk .d{color:var(--ink-2);font-size:.8rem;line-height:1.55}
.d .d2{display:none}
.prod.open .d2{display:inline}
.more{align-self:flex-start;border:0;background:none;padding:2px 0;font-size:.76rem;color:var(--indigo);text-decoration:underline;cursor:pointer}
.buy{display:grid;gap:8px;margin-top:auto;padding-top:4px}
.buy .btn{width:100%;min-height:44px;padding:.4em .4em;font-size:.8rem;letter-spacing:0}
.spick{display:flex;flex-wrap:wrap;gap:8px}
.sp{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:.3em .9em;font-size:.84rem;border:1.5px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink);cursor:pointer}
.sp .dot{width:10px;height:10px}
.sp[aria-checked="true"]{border-color:var(--indigo);background:var(--ok-bg);font-weight:700}
.sp-name{font-size:.76rem;color:var(--ink-2);line-height:1.4}
.sp-name b{color:var(--ink)}
.item .sp-name{display:none}
/* inside a card the scents are colour swatches, the chosen name is written underneath */
.buy .spick{gap:6px}
.buy .sp{width:36px;height:36px;min-height:0;padding:0;justify-content:center;border-radius:50%}
.buy .sp span{display:none}
.buy .sp .dot{width:18px;height:18px}
.buy .sp[aria-checked="true"]{background:var(--card);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--indigo)}
@media (min-width:900px){
  .prod,.qk{padding:16px;gap:10px}
  .prod h3.dname,.qk h3.dname{font-size:1.25rem}
  .price{font-size:1rem}
  .prod .d,.qk .d{font-size:.88rem;line-height:1.65}
  .prod .d2{display:inline}
  .more{display:none}
  .buy .btn{font-size:.9rem;min-height:46px}
  .prod-pic .label{left:10px;top:10px;font-size:.7rem;padding:0 8px}
}

/* scents */
.scents{display:grid;gap:18px}
@media (min-width:860px){ .scents{grid-template-columns:repeat(3,1fr)} }
.scent{display:grid;gap:14px;align-content:start;padding:22px;border:3px double var(--rule);border-radius:6px;min-width:0;background:var(--paper-2)}
.scent:nth-child(2){background:var(--blush)}
.scent:nth-child(3){background:var(--paper-3)}
.scent-name{display:flex;align-items:center;gap:10px}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.scent .dname{font-style:italic;font-size:1.7rem}
.scent > p{font-size:.94rem}
.notes{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;padding:12px 0;border-block:1px dashed var(--rule);font-size:.9rem}
.notes dt{color:var(--ink-2)}
.notes dd{margin:0}
.pair{font-size:.8rem;color:var(--moss);font-weight:700}
.sc-note{margin-top:20px;font-size:.9rem;color:var(--ink-2);max-width:64ch}

/* promises + faq */
.proms{display:grid;gap:16px;list-style:none;margin:0;padding:0}
@media (min-width:760px){ .proms{grid-template-columns:repeat(3,1fr)} }
.proms li{display:grid;gap:6px;align-content:start;padding:18px;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--moss);border-radius:4px}
.proms strong{font-family:var(--display);font-weight:600;font-size:1.08rem}
.proms span{color:var(--ink-2);font-size:.92rem;line-height:1.65}
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line);padding:15px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--indigo)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding-top:10px;max-width:64ch}

/* book */
.book{display:grid;gap:clamp(28px,5vw,60px);align-items:start}
@media (min-width:820px){ .book{grid-template-columns:minmax(200px,280px) 1fr} }
.cover{aspect-ratio:2/3;width:min(100%,270px);justify-self:center;background:repeating-radial-gradient(circle at 72% 80%,transparent 0 15px,rgba(244,239,225,.13) 15px 16px),var(--cover);color:var(--cover-fg);padding:24px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 6px 0 0 rgba(0,0,0,.22),5px 5px 0 var(--shade)}
.cover.c1{background:repeating-radial-gradient(circle at 28% 78%,transparent 0 15px,rgba(244,239,225,.13) 15px 16px),#4F6B4B}
.cover.c2{background:repeating-radial-gradient(circle at 70% 22%,transparent 0 15px,rgba(244,239,225,.13) 15px 16px),#74492A}
.cover.pic{padding:0;background:var(--paper-2);display:block;overflow:hidden}
.cover.pic img{width:100%;height:100%;object-fit:cover;display:block}
.sec.bk-head{padding-bottom:0}
.bk-title{font-size:clamp(1.8rem,4vw,2.7rem)}
.book-copy .hint{font-size:.86rem}
.cover small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.88}
.cover strong{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(1.45rem,2.7vw,1.85rem);line-height:1.2}
.book-copy{display:grid;gap:18px;min-width:0}
.book-copy p{max-width:60ch}
.specs{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:14px 0;border-block:1px solid var(--rule);font-size:.86rem;color:var(--ink-2)}
.pairs{width:100%;border-collapse:collapse;font-size:.92rem;max-width:640px}
.pairs th,.pairs td{text-align:left;padding:12px 16px 12px 0;border-top:1px solid var(--line);font-weight:400;vertical-align:top}
.pairs tr:last-child th,.pairs tr:last-child td{border-bottom:1px solid var(--line)}
.pairs th{color:var(--ink-2);white-space:nowrap}
.pairs td:last-child{color:var(--ink-2)}

/* art */
.sheet{display:grid;gap:14px;align-items:start}
@media (min-width:620px){ .sheet{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .sheet{grid-template-columns:repeat(3,1fr)} }
.frame.photo{aspect-ratio:auto;background:none}
.frame.photo img{position:static;height:auto}

/* order: steps and product rows */
.stepper3{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0 0 6px;padding:0}
.stepper3 li{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2)}
.step-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--indigo);color:var(--on-indigo);font-weight:700;font-size:.84rem}
.order{display:grid;gap:clamp(24px,4vw,48px);align-items:start}
@media (min-width:940px){ .order{grid-template-columns:1.25fr .85fr} }
.form{display:grid;gap:34px;min-width:0}
fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
legend{font-size:1.35rem;font-weight:600;color:var(--ink);padding:0;margin-bottom:10px}
.sr{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.items{display:grid;gap:12px}
.item{display:grid;grid-template-columns:60px 1fr;gap:6px 14px;align-items:start;padding:14px;background:var(--card);border:1px solid var(--rule);border-radius:6px}
.item-pic{grid-row:span 3;width:60px;height:60px;border-radius:3px;border:1px solid var(--line);background:linear-gradient(160deg,var(--paper-2),var(--paper-3));display:grid;place-items:center;color:var(--indigo);overflow:hidden}
.item-pic svg{width:62%;height:auto}
.item-pic img{width:100%;height:100%;object-fit:cover}
.item-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.item-head b{font-family:var(--display);font-weight:600;font-size:1.05rem}
.item small{color:var(--ink-2);font-size:.84rem;line-height:1.6;max-width:56ch}
.item .rec{color:var(--moss);font-family:var(--type);font-weight:700;font-size:.76rem}
.item-add{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
@media (max-width:520px){ .item{grid-template-columns:1fr} .item-pic{display:none} .item-add .btn{width:100%} }
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:.4em 1.1em;border:1.5px solid var(--rule);border-radius:4px;cursor:pointer;background:var(--card)}
input:checked + .pill{background:var(--ok-bg);border-color:var(--indigo);font-weight:700}
input:focus-visible + .pill{outline:2px solid var(--indigo);outline-offset:3px}
.fields{display:grid;gap:16px}
@media (min-width:640px){ .fields{grid-template-columns:1fr 1fr} .fields .full{grid-column:1/-1} }
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:.86rem;color:var(--ink-2)}
.field input,.field textarea{width:100%;font-size:1rem;color:var(--ink);background:var(--card);border:1.5px solid var(--rule);border-radius:4px;padding:.75em .9em;min-height:50px}
.field input:focus,.field textarea:focus{border-color:var(--indigo);outline:3px solid rgba(45,64,112,.18)}
.field .e{color:var(--err);font-size:.84rem}
.field.bad input{border-color:var(--err)}

/* order: basket */
.sum{display:grid;gap:14px;padding:clamp(18px,3vw,26px);background:var(--paper-2);border:3px double var(--rule);border-radius:6px;min-width:0}
@media (min-width:940px){ .sum{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px)} .admin-bar .sum{top:124px} }
.cart{list-style:none;margin:0;padding:0;display:grid}
.cart li{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.cart li:last-child{border-bottom:1px solid var(--line)}
.cart b{display:block;line-height:1.35}
.cart small{color:var(--ink-2);font-size:.82rem}
.cart-empty{color:var(--ink-2);font-size:.92rem;padding:18px;border:1.5px dashed var(--rule);border-radius:4px;text-align:center}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--rule);border-radius:4px;background:var(--card)}
.qty button{width:40px;height:40px;border:0;background:none;color:var(--ink);font-size:1.2rem;cursor:pointer}
.qty span{min-width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.x{width:40px;height:40px;border:0;background:none;color:var(--ink-2);font-size:1.3rem;cursor:pointer}
.x:hover{color:var(--err)}
.sum-line{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.total{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.save{font-size:.82rem;color:var(--moss)}
.sum .btn{width:100%}
.sum .btn.go{min-height:54px;font-size:1rem}
.status{font-size:.92rem;color:var(--ink);padding:12px 14px;border-radius:4px;border:1px solid var(--rule);background:var(--ok-bg)}
.status.bad{color:var(--err);background:rgba(166,58,34,.08);border-color:var(--err)}
.how{font-size:.86rem;color:var(--ink-2)}
.sum textarea{width:100%;font-size:.82rem;line-height:1.55;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:.7em .9em;resize:vertical;min-height:190px}
.count{font-weight:400}
.bar-total{opacity:.9}

/* WordPress page content */
.entry{max-width:720px}
.entry > * + *{margin-top:1.1em}
.entry h2,.entry h3{margin-top:1.6em}
.entry a{color:var(--indigo)}

/* footer + mobile bar */
.foot{border-top:3px double var(--rule);padding-block:32px 40px;color:var(--ink-2);font-size:.86rem;background:var(--paper-2) var(--grain)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between}
.foot a{color:var(--ink)}
.bar{display:none}
@media (max-width:900px){
  .site{padding-bottom:84px}
  .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(var(--veil),.97);backdrop-filter:blur(8px);border-top:3px double var(--rule)}
  .bar[hidden]{display:none}
  .bar .btn{flex:1;min-height:50px}
  .bar .btn:first-child{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn,.world{transition:none} }