:root{
  --paper:#F5F5F0; --white:#FFFFFF; --mist:#ECEEE6; --sage:#DDE4D5; --sand:#E7DFCF; --clay:#C9B48F;
  --green:#087536; --forest:#0C4A2A; --deep:#0F2A1C; --ink:#18231C; --muted:#5E6B60; --line:#D9DDD2;
  --ochre:#A77A16; --ochre-soft:#F1E7CF; --danger:#A3361F; --ok:#2E6B3F;
  --serif:"Noto Serif Display","GFS Didot",Georgia,"Times New Roman",serif;
  --sans:"Commissioner","Helvetica Neue",Arial,sans-serif;
  --r-s:6px; --r-m:14px; --arch:999px 999px 18px 18px;
  --wrap:1280px; --hh:76px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121813; --white:#18201A; --mist:#1D261F; --sage:#223026; --sand:#2A2A22; --clay:#7A6A4E;
  --green:#4FB57A; --forest:#7CC99B; --deep:#E8EFE9; --ink:#E7ECE6; --muted:#9FAAA1; --line:#2C362E;
  --ochre:#D2A84A; --ochre-soft:#3A3120; --danger:#E0846B; --ok:#7CC99B; color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#121813; --white:#18201A; --mist:#1D261F; --sage:#223026; --sand:#2A2A22; --clay:#7A6A4E;
  --green:#4FB57A; --forest:#7CC99B; --deep:#E8EFE9; --ink:#E7ECE6; --muted:#9FAAA1; --line:#2C362E;
  --ochre:#D2A84A; --ochre-soft:#3A3120; --danger:#E0846B; --ok:#7CC99B; color-scheme:dark;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0;color:var(--deep);letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
[hidden]{display:none!important}
.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.opt-card>.i{color:var(--green);margin-top:1px}
.pdp>*,.two>*,.shop>*,.acct>*,.contact-g>*{min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* demo bar */
.demo-bar{background:var(--forest);color:#EAF2EC;font-size:.8rem;text-align:center;padding:7px 16px}
:root[data-theme="dark"] .demo-bar{background:#0B3A20}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .demo-bar{background:#0B3A20}}
.demo-bar button{text-decoration:underline;color:inherit;margin-left:6px}

/* header */
.hdr{position:sticky;top:0;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:24px;height:var(--hh)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:46px;height:46px}
.brand-txt{font-family:var(--serif);font-size:1.18rem;line-height:1.05;color:var(--deep)}
.brand-txt small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--muted);letter-spacing:.02em;margin-top:3px}
.nav{display:flex;gap:4px;margin-left:auto;margin-right:auto}
.nav a{padding:8px 11px;font-size:.92rem;color:var(--ink);border-radius:999px;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--green)}
.tools{display:flex;gap:2px;align-items:center}
.ic-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:999px;position:relative;transition:background .2s}
.ic-btn:hover{background:var(--mist)}
.ic-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.count{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--green);color:#fff;font-size:.66rem;font-weight:600;display:grid;place-items:center;line-height:1}
.count:empty,.count[data-n="0"]{display:none}
.menu-btn{display:none}
@media (max-width:1100px){.nav{display:none}.menu-btn{display:grid}.brand{margin-right:auto}.hdr-in{gap:8px}}
@media (max-width:560px){.brand-txt small{display:none}.brand img{width:40px;height:40px}.brand-txt{font-size:1.02rem}.tools .hide-sm{display:none}.ic-btn{width:38px;height:38px}}

/* mobile menu / drawers */
.scrim{position:fixed;inset:0;background:rgba(15,30,20,.38);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;width:min(420px,92vw);background:var(--paper);z-index:90;display:flex;flex-direction:column;transition:transform .42s cubic-bezier(.2,.75,.2,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.right{right:0;transform:translateX(105%)}
.drawer.left{left:0;transform:translateX(-105%)}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:1.5rem}
.drawer-b{flex:1;overflow:auto;padding:18px 22px}
.drawer-f{border-top:1px solid var(--line);padding:18px 22px}
.mnav a{display:block;font-family:var(--serif);font-size:1.7rem;padding:9px 0;color:var(--deep)}
.mnav .sub{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.mnav .sub a{font-family:var(--sans);font-size:1rem;padding:7px 0;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:500;font-size:.95rem;transition:background .25s,color .25s,border-color .25s,transform .15s;white-space:nowrap;border:1px solid transparent}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--forest)}
:root[data-theme="dark"] .btn-p{color:#0B1A10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-p{color:#0B1A10}}
.btn-o{border-color:var(--ink);color:var(--ink)}
.btn-o:hover{background:var(--ink);color:var(--paper)}
.btn-g{color:var(--green);padding:0 4px;min-height:auto;border-radius:0;border-bottom:1px solid currentColor}
.btn-w{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-sm{min-height:38px;padding:0 16px;font-size:.85rem}
.link{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* sections */
.sec{padding:clamp(56px,9vw,120px) 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px)}
.sec-h h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.sec-h p{color:var(--muted);max-width:42ch;margin:10px 0 0}

/* hero */
.hero{padding:clamp(24px,4vw,56px) 0 clamp(48px,7vw,96px)}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:.98;letter-spacing:-.025em}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:34ch;margin:28px 0 36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:28px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);flex-wrap:wrap}
.hero-meta b{display:block;color:var(--ink);font-weight:500}
.hero-art{position:relative}
.hero-arch{border-radius:var(--arch);overflow:hidden;aspect-ratio:4/5;background:var(--sage);position:relative}
.hero-arch svg{width:100%;height:100%}
.hero-ring{position:absolute;inset:-14px;border:1px solid var(--ochre);border-radius:var(--arch);opacity:.55;pointer-events:none}
.hero-tag{position:absolute;left:-18px;bottom:44px;background:var(--white);padding:14px 18px;border-radius:var(--r-m);box-shadow:0 18px 40px -18px rgba(12,40,25,.35);font-size:.85rem;max-width:230px}
.hero-tag b{font-family:var(--serif);font-weight:400;font-size:1.15rem;display:block;color:var(--deep)}
@media (max-width:860px){.hero-g{grid-template-columns:1fr}.hero-art{max-width:460px;margin:8px auto 0;width:88%}.hero-tag{left:-8px}}
/* one orchestrated load moment */
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln span{display:block;animation:rise 1s cubic-bezier(.2,.75,.2,1) both}
  .hero h1 .ln:nth-child(2) span{animation-delay:.12s}
  .hero .lede,.hero-cta,.hero-meta{animation:fade 1s .45s both}
  .hero-arch{animation:archin 1.3s cubic-bezier(.2,.75,.2,1) both}
  .hero-arch .plant{transform-origin:50% 72%;animation:grow 1.6s .25s cubic-bezier(.2,.75,.2,1) both}
  .hero-ring{animation:fade 1.4s .7s both}
  .hero-tag{animation:fade 1s 1s both}
}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes archin{from{clip-path:inset(100% 0 0 0 round 999px 999px 18px 18px)}to{clip-path:inset(0 0 0 0 round 999px 999px 18px 18px)}}
@keyframes grow{from{transform:scale(.86) translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.cat{display:block;group:x}
.cat-art{border-radius:var(--arch);overflow:hidden;aspect-ratio:3/4;background:var(--mist);transition:border-radius .5s cubic-bezier(.2,.75,.2,1)}
.cat-art svg{width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.cat:hover .cat-art svg{transform:scale(1.05)}
.cat h3{font-size:1.35rem;margin-top:14px}
.cat span{font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.cat h3{font-size:1.1rem}}

/* product grid & cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,32px) clamp(12px,2vw,26px)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid,.grid.g3{grid-template-columns:repeat(2,1fr)}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*26px)/4);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (max-width:1100px){.rail{grid-auto-columns:calc((100% - 2*20px)/3);gap:20px}}
@media (max-width:760px){.rail{grid-auto-columns:68%;gap:14px}}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center}
.rail-nav button:hover{border-color:var(--ink)}
.rail-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.card{position:relative;display:flex;flex-direction:column}
.card-img{position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/5;background:var(--mist)}
.card-img>a{display:block;width:100%;height:100%}
.card-img svg,.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.card:hover .card-img svg,.card:hover .card-img img{transform:scale(1.04)}
.badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.badge{font-size:.7rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--white);color:var(--deep);line-height:1}
.badge.new{background:var(--green);color:#fff}
.badge.best{background:var(--ochre-soft);color:#6B4D0B}
:root[data-theme="dark"] .badge.best{color:var(--ochre)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge.best{color:var(--ochre)}}
.badge.limited{background:var(--deep);color:var(--paper)}
.badge.low{background:#F6E1D8;color:#8A2F17}
.wish{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:999px;background:color-mix(in srgb,var(--white) 85%,transparent);display:grid;place-items:center;transition:transform .2s}
.wish svg{width:18px;height:18px;stroke:var(--deep);fill:none;stroke-width:1.5}
.wish.on svg{fill:var(--green);stroke:var(--green)}
.wish:active{transform:scale(.88)}
.card-acts{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:8px;z-index:2;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.card:hover .card-acts,.card:focus-within .card-acts{opacity:1;transform:none}
.card-acts .btn{flex:1;min-height:40px;padding:0 12px;font-size:.82rem;background:var(--white);color:var(--deep)}
.card-acts .btn.add{background:var(--green);color:#fff}
.card-acts .btn:hover{filter:brightness(.95)}
@media (hover:none),(max-width:760px){.card-acts{display:none}}
.card-b{padding:14px 2px 0;display:flex;flex-direction:column;gap:2px;flex:1}
.card-cat{font-size:.78rem;color:var(--muted)}
.card-b h3{font-size:1.2rem;line-height:1.2}
.card-sci{font-size:.8rem;font-style:italic;color:var(--muted)}
.card-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px}
.price{font-weight:500;font-size:1rem}
.price small{font-weight:400;color:var(--muted);font-size:.78rem}
.avail{font-size:.75rem;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.avail::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.avail.low::before{background:#C9792B}
.avail.out::before{background:var(--danger)}
.m-add{display:none;margin-top:10px}
@media (hover:none),(max-width:760px){.m-add{display:flex}}
@media (max-width:460px){.card-b h3{font-size:1.02rem}.m-add .btn{min-height:40px;font-size:.82rem;padding:0 12px}}

/* finder */
.finder{background:var(--forest);color:#E9F1EB;border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);position:relative;overflow:hidden}
:root[data-theme="dark"] .finder{background:#0E3420}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .finder{background:#0E3420}}
.finder h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem)}
.finder p{color:#BFD2C5;max-width:38ch;margin-top:16px}
.finder-q{display:flex;flex-direction:column;gap:22px}
.fq h4{font-family:var(--sans);font-size:.85rem;font-weight:500;color:#BFD2C5;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:.9rem;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:#fff}
.chip.on{background:#fff;color:var(--forest);border-color:#fff}
:root[data-theme="dark"] .chip.on{color:#0E3420}
.finder-go{display:flex;align-items:center;gap:18px;margin-top:8px;flex-wrap:wrap}
.finder-go .btn{background:#fff;color:#0C4A2A}
.finder-go .btn:hover{background:var(--ochre-soft)}
.finder-go span{color:#BFD2C5;font-size:.9rem}
.finder .leafmark{position:absolute;right:-60px;top:-40px;width:260px;opacity:.08;pointer-events:none}
@media (max-width:860px){.finder{grid-template-columns:1fr}}

/* editorial strip */
.ed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.ed-art{border-radius:var(--arch);overflow:hidden;aspect-ratio:4/5;max-width:520px;background:var(--sand)}
.ed h2{font-size:clamp(2rem,4vw,3.2rem)}
.ed p{color:var(--muted);max-width:46ch;margin-top:18px}
.ed ul{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:14px}
.ed li{display:flex;gap:14px;align-items:flex-start}
.ed li svg{width:22px;height:22px;flex-shrink:0;stroke:var(--green);fill:none;stroke-width:1.5;margin-top:2px}
@media (max-width:860px){.ed{grid-template-columns:1fr}.ed-art{max-width:420px}}

/* shop */
.page-h{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(18px,3vw,32px)}
.page-h h1{font-size:clamp(2.4rem,5.5vw,4.4rem)}
.page-h p{color:var(--muted);max-width:56ch;margin-top:12px}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--green)}
.shop{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,4vw,56px);padding-bottom:96px}
@media (max-width:960px){.shop{grid-template-columns:1fr}}
.filters{position:sticky;top:calc(var(--hh) + 20px);align-self:start;max-height:calc(100vh - var(--hh) - 40px);overflow:auto;padding-right:6px;scrollbar-width:thin}
@media (max-width:960px){.filters{display:none}}
.fgroup{border-top:1px solid var(--line);padding:16px 0}
.fgroup:first-child{border-top:0;padding-top:0}
.fgroup h4{font-family:var(--sans);font-size:.9rem;font-weight:600;margin-bottom:10px;color:var(--ink)}
.check{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.9rem;cursor:pointer;color:var(--ink)}
.check input{appearance:none;width:18px;height:18px;border:1px solid var(--clay);border-radius:5px;display:grid;place-items:center;flex-shrink:0;cursor:pointer;background:var(--white)}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--green);border-color:var(--green)}
.check input:checked::after{content:"";width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.check input[type=radio]:checked::after{width:6px;height:6px;border:0;border-radius:50%;background:#fff;transform:none}
.check .n{margin-left:auto;color:var(--muted);font-size:.78rem}
.range{display:flex;gap:8px;align-items:center}
.range input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);font-size:.9rem}
.toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap}
.toolbar .res{font-size:.9rem;color:var(--muted)}
.sel{appearance:none;padding:10px 38px 10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E6B60' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 15px center;font-size:.9rem;cursor:pointer}
.ftoggle{display:none}
@media (max-width:960px){.ftoggle{display:inline-flex}}
.active-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.af{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--sage);font-size:.8rem;color:var(--deep)}
.af b{font-weight:400;opacity:.6}
.empty{text-align:center;padding:72px 16px;color:var(--muted)}
.empty h3{color:var(--deep);font-size:1.8rem;margin-bottom:10px}

/* product page */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);padding-bottom:64px}
@media (max-width:900px){.pdp{grid-template-columns:1fr}}
.gal{display:grid;grid-template-columns:82px 1fr;gap:14px;position:sticky;top:calc(var(--hh) + 16px);align-self:start}
@media (max-width:900px){.gal{position:static;grid-template-columns:1fr}}
.gal-main{border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--mist);order:2;position:relative}
.gal-main svg,.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-main .fadein{animation:fade .45s both}
.thumbs{display:flex;flex-direction:column;gap:10px;order:1}
@media (max-width:900px){.thumbs{flex-direction:row;order:3;overflow-x:auto}}
.thumb{width:82px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:1px solid transparent;opacity:.65;transition:opacity .2s,border-color .2s;flex-shrink:0;background:var(--mist)}
.thumb.on,.thumb:hover{opacity:1;border-color:var(--ink)}
.thumb svg,.thumb img{width:100%;height:100%;object-fit:cover}
.pinfo h1{font-size:clamp(2.3rem,4.6vw,3.8rem)}
.pinfo .sci{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.15rem;margin-top:8px}
.pinfo .pp{font-size:1.6rem;margin:22px 0 6px;font-weight:400}
.pinfo .lead{color:var(--muted);margin:18px 0 26px;max-width:52ch}
.opt h4{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:10px}
.sizes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.size{padding:10px 18px;border:1px solid var(--line);border-radius:12px;text-align:left;min-width:120px;transition:border-color .2s,background .2s}
.size b{display:block;font-weight:500}
.size span{font-size:.78rem;color:var(--muted)}
.size.on{border-color:var(--green);background:color-mix(in srgb,var(--green) 7%,transparent)}
.buy{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:48px;background:var(--white)}
.qty button{width:42px;height:100%;font-size:1.2rem;color:var(--muted)}
.qty button:hover{color:var(--ink)}
.qty input{width:38px;text-align:center;border:0;background:transparent;font-weight:500;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty.sm{height:38px}.qty.sm button{width:34px}
.buy .btn-p{flex:1}
.wish-l{width:48px;height:48px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;flex-shrink:0}
.wish-l svg{width:20px;height:20px;stroke:var(--deep);fill:none;stroke-width:1.5}
.wish-l.on svg{fill:var(--green);stroke:var(--green)}
.perks{display:grid;gap:10px;font-size:.88rem;color:var(--muted);padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}
.perks div{display:flex;gap:10px;align-items:center}
.perks svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:1.5;flex-shrink:0}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:var(--r-m);overflow:hidden;margin:6px 0 30px}
.spec{background:var(--paper);padding:16px;display:flex;gap:12px}
.spec svg{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:1.3;flex-shrink:0}
.spec small{display:block;font-size:.75rem;color:var(--muted)}
.spec b{font-weight:500;font-size:.92rem}
.dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots i.f{background:var(--green)}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:1.3rem;color:var(--deep)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.5rem;transition:transform .3s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .ab{padding:0 0 22px;color:var(--muted);max-width:62ch}
.acc .ab dl{display:grid;grid-template-columns:140px 1fr;gap:10px 18px;margin:0}
.acc .ab dt{color:var(--ink);font-weight:500}
.acc .ab dd{margin:0}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--white);border-top:1px solid var(--line);padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:12px;transform:translateY(110%);transition:transform .35s}
.sticky-buy.on{transform:none}
.sticky-buy .t{flex:1;min-width:0}
.sticky-buy .t b{display:block;font-family:var(--serif);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.sticky-buy{display:flex}}

/* forms */
.form{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width:600px){.row2,.row3{grid-template-columns:1fr}}
.fld label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.fld label .req{color:var(--danger)}
.inp{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:16px;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}
.inp.err{border-color:var(--danger)}
.ferr{color:var(--danger);font-size:.8rem;margin-top:5px}
textarea.inp{min-height:96px;resize:vertical}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--white);transition:border-color .2s,background .2s}
.opt-card:has(input:checked){border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,var(--white))}
.opt-card.dis{opacity:.5;cursor:not-allowed}
.opt-card input{margin-top:3px;accent-color:var(--green);width:18px;height:18px;flex-shrink:0}
.opt-card b{font-weight:500;display:block}
.opt-card span{font-size:.84rem;color:var(--muted)}
.opt-card .pr{margin-left:auto;font-weight:500;font-size:.9rem;white-space:nowrap}
.note{padding:14px 16px;border-radius:12px;background:var(--ochre-soft);font-size:.86rem;color:var(--ink)}
.note.g{background:var(--sage)}
.ph{background:var(--ochre-soft);color:#6B4D0B;padding:1px 6px;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:.85em}
:root[data-theme="dark"] .ph{color:var(--ochre)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ph{color:var(--ochre)}}

/* cart & checkout */
.two{display:grid;grid-template-columns:1fr 380px;gap:clamp(24px,4vw,64px);padding-bottom:96px;align-items:start}
@media (max-width:960px){.two{grid-template-columns:1fr}}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}
.line:first-child{border-top:1px solid var(--line)}
.line-img{width:96px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--mist)}
.line-img svg,.line-img img{width:100%;height:100%;object-fit:cover}
.line h4{font-size:1.15rem}
.line .meta{font-size:.82rem;color:var(--muted)}
.line .ctl{display:flex;align-items:center;gap:14px;margin-top:10px}
.line .rm{font-size:.8rem;color:var(--muted);text-decoration:underline}
.line .lp{font-weight:500;text-align:right}
.drawer .line{grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0}
.drawer .line-img{width:72px}
.drawer .line:first-child{border-top:0}
.summary{background:var(--white);border-radius:20px;padding:26px;position:sticky;top:calc(var(--hh) + 16px)}
.summary h3{font-size:1.6rem;margin-bottom:18px}
.srow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.93rem}
.srow.tot{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:1.1rem;font-weight:500}
.srow span:last-child{text-align:right}
.co-sec{padding:28px 0;border-bottom:1px solid var(--line)}
.co-sec:first-child{padding-top:0}
.co-sec h3{font-size:1.6rem;margin-bottom:18px;display:flex;gap:12px;align-items:baseline}
.co-sec h3 i{font-style:normal;font-family:var(--sans);font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;width:26px;height:26px;display:inline-grid;place-items:center}
.reveal{animation:fade .35s both}
.mini-line{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:.88rem}
.mini-line .mi{width:48px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--mist);position:relative}
.mini-line .mi svg,.mini-line .mi img{width:100%;height:100%;object-fit:cover}
.mini-line .q{position:absolute;top:2px;right:2px;background:var(--deep);color:var(--paper);font-size:.65rem;border-radius:9px;padding:1px 5px}
.mini-line .nm{flex:1;min-width:0}

/* confirmation */
.conf{max-width:820px;margin:0 auto;padding:clamp(32px,6vw,72px) 0 96px}
.conf-mark{width:72px;height:72px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin-bottom:24px}
.conf-mark svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:2;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .8s .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.conf h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:16px;overflow:hidden;margin:30px 0}
.kv div{background:var(--white);padding:16px 18px}
@media (max-width:600px){.kv{grid-template-columns:repeat(2,1fr)}}
.kv small{display:block;color:var(--muted);font-size:.78rem}
.kv b{font-weight:500}
.bank{border:1px solid var(--ochre);border-radius:18px;padding:24px;margin:24px 0;background:color-mix(in srgb,var(--ochre-soft) 45%,var(--paper))}
.bank h3{font-size:1.5rem;margin-bottom:12px}
.bank dl{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;margin:14px 0 0}
.bank dt{color:var(--muted);font-size:.88rem}
.bank dd{margin:0;font-weight:500;word-break:break-word}
@media (max-width:560px){.bank dl{grid-template-columns:1fr;gap:2px}.bank dd{margin-bottom:8px}}

/* account */
.auth{max-width:460px;margin:0 auto;padding:clamp(32px,6vw,72px) 0 96px}
.auth h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:10px}
.tabs-l{display:flex;gap:6px;background:var(--mist);padding:5px;border-radius:999px;margin:24px 0}
.tabs-l button{flex:1;padding:10px;border-radius:999px;font-size:.92rem}
.tabs-l button.on{background:var(--white);box-shadow:0 2px 8px -3px rgba(0,0,0,.15)}
.acct{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,64px);padding-bottom:96px;align-items:start}
@media (max-width:860px){.acct{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--hh) + 16px)}
@media (max-width:860px){.side{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;scrollbar-width:none}.side::-webkit-scrollbar{display:none}}
.side a,.side button{padding:11px 14px;border-radius:10px;font-size:.93rem;text-align:left;white-space:nowrap;color:var(--ink)}
.side a:hover,.side button:hover{background:var(--mist)}
.side a.on{background:var(--white);color:var(--green);font-weight:500}
@media (max-width:860px){.side a,.side button{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.85rem}}
.panel h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:20px}
.cardbox{background:var(--white);border-radius:18px;padding:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:28px}
.stat{background:var(--white);border-radius:16px;padding:18px 20px}
.stat small{color:var(--muted);font-size:.8rem}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--deep);line-height:1.2}
.tbl-w{overflow-x:auto;background:var(--white);border-radius:16px}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:.78rem;padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--mist)}
.st{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.76rem;white-space:nowrap;background:var(--mist);color:var(--ink)}
.st-new{background:#E3ECF5;color:#1E4E79}
.st-await{background:var(--ochre-soft);color:#6B4D0B}
.st-paid{background:#DCEBDD;color:#205A2F}
.st-proc{background:#E2E6F5;color:#36408A}
.st-ready{background:#D8EEE9;color:#1D5F51}
.st-done{background:var(--sage);color:var(--forest)}
.st-cancel{background:#F3DED8;color:#8A2F17}
.addr{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.addr .cardbox{font-size:.92rem;position:relative}
.addr .cardbox .acts{display:flex;gap:14px;margin-top:12px;font-size:.84rem}
.addr .cardbox .acts button{color:var(--green);text-decoration:underline}

/* admin */
.adm{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - var(--hh));}
@media (max-width:900px){.adm{grid-template-columns:1fr}}
.adm-side{background:var(--deep);color:var(--paper);padding:24px 14px}
.adm-side h4{color:inherit;font-family:var(--sans);font-size:.75rem;opacity:.6;font-weight:500;padding:0 12px;margin:8px 0 8px}
.adm-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.92rem;opacity:.82;color:var(--paper)}
.adm-side a:hover{opacity:1;background:rgba(255,255,255,.07)}
.adm-side a.on{opacity:1;background:rgba(255,255,255,.12)}
.adm-side a .count{position:static;margin-left:auto}
@media (max-width:900px){.adm-side{display:flex;overflow-x:auto;gap:4px;padding:10px}.adm-side h4{display:none}.adm-side a{white-space:nowrap}}
.adm-main{padding:clamp(18px,3vw,40px);min-width:0}
.adm-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.adm-h h1{font-size:clamp(1.8rem,3vw,2.4rem)}
.tbl .thumbx{width:44px;height:54px;border-radius:8px;overflow:hidden;background:var(--mist)}
.tbl .thumbx svg,.tbl .thumbx img{width:100%;height:100%;object-fit:cover}
.tog{display:inline-flex;gap:4px}
.tog button{font-size:.7rem;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tog button.on{background:var(--green);border-color:var(--green);color:#fff}
.imgs{display:flex;gap:10px;flex-wrap:wrap}
.imgs .im{width:90px;height:110px;border-radius:10px;overflow:hidden;position:relative;background:var(--mist)}
.imgs .im img{width:100%;height:100%;object-fit:cover}
.imgs .im button{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:22px;height:22px;font-size:.8rem}
.upl{width:90px;height:110px;border:1.5px dashed var(--clay);border-radius:10px;display:grid;place-items:center;text-align:center;font-size:.75rem;color:var(--muted);cursor:pointer}
.mail{background:var(--white);border-radius:14px;padding:18px;margin-bottom:12px;font-size:.9rem}
.mail pre{white-space:pre-wrap;font-family:var(--sans);margin:10px 0 0;color:var(--muted)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;pointer-events:none}
.modal .box{background:var(--paper);border-radius:24px;max-width:960px;width:100%;max-height:calc(100vh - 40px);overflow:auto;pointer-events:auto;transform:translateY(16px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.2,.75,.2,1),opacity .3s;position:relative}
.modal.on .box{transform:none;opacity:1}
.modal .x{position:absolute;top:14px;right:14px;z-index:3;background:var(--white)}
.qv{display:grid;grid-template-columns:1fr 1fr}
.qv .qimg{aspect-ratio:4/5;background:var(--mist)}
.qv .qimg svg,.qv .qimg img{width:100%;height:100%;object-fit:cover}
.qv .qb{padding:36px 32px}
.qv h2{font-size:2.2rem}
@media (max-width:700px){.qv{grid-template-columns:1fr}.qv .qimg{aspect-ratio:1/1}}

/* search */
.search{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s;padding-top:env(safe-area-inset-top,0px)}
.search.on{opacity:1;pointer-events:auto}
.search-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:18px 0}
.search-top input{flex:1;border:0;background:transparent;font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--deep);outline:none;min-width:0}
.search-res{flex:1;overflow:auto;padding:28px 0 60px}
.sr-row{display:flex;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sr-row .ri{width:56px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--mist);flex-shrink:0}
.sr-row .ri svg,.sr-row .ri img{width:100%;height:100%;object-fit:cover}
.sr-row b{font-family:var(--serif);font-weight:400;font-size:1.2rem;display:block}
.sr-sug{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sr-sug button{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:.88rem}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--deep);color:var(--paper);padding:13px 20px;border-radius:999px;font-size:.9rem;z-index:120;opacity:0;transition:opacity .3s,transform .3s;display:flex;gap:14px;align-items:center;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast a{text-decoration:underline;white-space:nowrap}

/* footer */
.ftr{background:var(--deep);color:#C9D3CB;padding:72px 0 calc(28px + env(safe-area-inset-bottom,0px));margin-top:40px}
:root[data-theme="dark"] .ftr{background:#0B110D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ftr{background:#0B110D}}
.ftr-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media (max-width:860px){.ftr-g{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-g{grid-template-columns:1fr}}
.ftr img{width:64px;height:64px;margin-bottom:18px}
.ftr h4{font-family:var(--sans);font-size:.85rem;color:#fff;font-weight:500;margin-bottom:14px}
.ftr .bn{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-bottom:10px}
.ftr a{display:block;padding:4px 0;font-size:.92rem}
.ftr a:hover{color:#fff}
.ftr address{font-style:normal;font-size:.92rem;line-height:1.8}
.ftr-b{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:.8rem;flex-wrap:wrap}

/* prose pages */
.prose{max-width:720px;padding-bottom:96px}
.prose h2{font-size:1.9rem;margin:40px 0 14px}
.prose h3{font-size:1.35rem;margin:28px 0 10px}
.prose p,.prose li{color:var(--muted)}
.guide{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:40px}
@media (max-width:760px){.guide{grid-template-columns:1fr}}
.guide .cardbox h3{font-size:1.5rem;margin:12px 0 10px;display:flex;gap:12px;align-items:center}
.guide .cardbox svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:1.3}
.guide .cardbox p{color:var(--muted);font-size:.95rem}
.contact-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);padding-bottom:96px}
@media (max-width:860px){.contact-g{grid-template-columns:1fr}}
.contact-g dl{display:grid;gap:18px;margin:0}
.contact-g dt{font-size:.82rem;color:var(--muted)}
.contact-g dd{margin:2px 0 0;font-family:var(--serif);font-size:1.4rem;color:var(--deep)}
.spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.buy .btn-p{min-width:0}
@media (max-width:480px){.buy{flex-wrap:wrap}.buy .btn-p{order:3;flex:1 1 100%}.buy .qty{flex:1}.buy .qty input{flex:1}}

.od{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
@media (max-width:760px){.od{grid-template-columns:1fr}}
body.is-admin .ftr{display:none}
#app{outline:none;min-height:60vh}