/* Calmento BASE theme v3 — ported from base-product-lister design/store-mockup-final-20260926. Night theme = html[data-theme=night]. */
:root{--paper:#FBFAF6;--ink:#3A3935;--muted:#625F58;--line:#E4DFD4;--sand:#EBE6DB;--sage:#9DB6A0;--pine:#2F3E36;--pine2:#3C4E44;--pink:#EEF0EA;--pmut:#C3CCC4;--kaki:#B5553A;--kakil:#D9967F;--kakid:#9E4A33;--night:#1C1B22;--night2:#26242C;--night3:#302D37;--nink:#EDE8DF;--nmut:#A9A4B0;--amber:#D9A45B;
--bg:var(--paper);--alt:var(--sand);--sf:#fff;--tx:var(--ink);--mu:var(--muted);--rl:var(--line);--ac:var(--kaki);--acf:#fff;--act:var(--kaki);--bk:var(--pine);--bk2:var(--pine2);--bkt:var(--pink);--bkm:var(--pmut);--bka:var(--kakil);
--se:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;--ss:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;--r:22px;--r2:14px}
[data-theme=night]{--bg:var(--night);--alt:var(--night2);--sf:var(--night2);--tx:var(--nink);--mu:var(--nmut);--rl:#3A3742;--ac:var(--amber);--acf:var(--night);--act:var(--amber);--bk:var(--night3);--bk2:#3B3843;--bkt:var(--nink);--bkm:var(--nmut);--bka:var(--amber)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.8 var(--ss);letter-spacing:.02em}
[data-theme=night] body{background:radial-gradient(ellipse 70% 45% at 22% 0,rgba(217,164,91,.1),transparent 70%) fixed,var(--night)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.w{max-width:1180px;margin:0 auto;padding:0 20px}
.bt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-size:14px;letter-spacing:.08em;transition:opacity .2s,transform .2s}
.ba{background:var(--ac);color:var(--acf)}.ba:hover{opacity:.9;transform:translateY(-1px)}
.bg{border:1px solid currentColor}
.lk{color:var(--act);border-bottom:1px solid currentColor;padding-bottom:2px;font-size:13px;white-space:nowrap}
.al .lk{color:var(--kakid)}[data-theme=night] .al .lk{color:var(--act)}

/* notice + header */
.nt{background:var(--bk);color:var(--bkt);text-align:center;padding:8px 14px;font-size:12px;letter-spacing:.06em}
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rl)}
.hdi{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:60px}
.lg{justify-self:center;text-align:center}
.lg h1,.lg .logoText{font:500 21px/1 var(--ss);letter-spacing:.26em;margin:0}
.lg img{max-height:30px;width:auto}
.dn{display:none}
.sr{width:44px;height:44px;display:grid;place-items:center}
.mm summary{list-style:none;width:44px;height:44px;display:grid;align-content:center;gap:5px;cursor:pointer;padding:0 11px}
.mm summary::-webkit-details-marker{display:none}
.mm summary i{display:block;height:1.5px;background:currentColor}
.mm nav{position:absolute;left:0;right:0;top:60px;background:var(--bg);border-bottom:1px solid var(--rl);padding:4px 20px 16px}
.mm nav a{display:block;padding:14px 0;border-bottom:1px solid var(--rl);font-size:14px}
@media(min-width:960px){.hdi{grid-template-columns:auto 1fr 44px}.mm{display:none}.lg{justify-self:start;margin-right:56px}.dn{display:flex;gap:32px;font-size:13px;letter-spacing:.08em}}

/* hero */
.hr{position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;color:#F6F3EC;background:#cfc6b8 60% 30%/cover no-repeat}
.hr:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,20,0) 25%,rgba(20,24,20,.35) 55%,rgba(20,24,20,.72))}
.hc{position:relative;width:100%;padding-bottom:56px}
.eb{font:600 11px/1 var(--ss);letter-spacing:.22em;text-transform:uppercase;color:#E7D8C9}
.hr h1{font:500 clamp(34px,9vw,58px)/1.45 var(--se);letter-spacing:.08em;margin:14px 0}
.hr p{font-size:14px;color:#E6E1D8;max-width:420px}
.ha{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
@media(min-width:960px){.hr{background-position:center right;align-items:center}.hr:before{background:linear-gradient(90deg,rgba(20,24,20,.55),rgba(20,24,20,.15) 55%,transparent)}.hc{padding-bottom:0}}

/* sections */
.sc{padding:44px 0}.al{background:var(--alt)}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
.sh h2{font:500 clamp(21px,5.4vw,30px)/1.5 var(--se);letter-spacing:.05em}
@media(min-width:960px){.sc{padding:72px 0}}

/* picks rail */
.rl{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
.rl::-webkit-scrollbar{display:none}
.pk{flex:0 0 58%;scroll-snap-align:start}
.pi{position:relative;aspect-ratio:1;border-radius:var(--r2);overflow:hidden;background:#F1EEE7}
.pi img{width:100%;height:100%;object-fit:cover}
.lb{position:absolute;left:8px;top:8px;width:clamp(42px,22%,58px);line-height:0;z-index:1}.lb img{height:auto}
.pk b{display:block;font:500 14px/1.5 var(--se);margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr{font:600 15px/1.4 var(--ss);color:var(--act)}
.so{font-size:12px;color:var(--mu);letter-spacing:.1em}
@media(min-width:960px){.rl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0}}

/* collections: magazine spread; desktop bands alternate */
.sg{display:grid;gap:22px}
.st{display:block;border-radius:var(--r);overflow:hidden;transition:transform .35s,box-shadow .35s}
.st:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(30,32,26,.14)}
.hm{background:var(--night);color:var(--nink)}.mv{background:var(--sand);color:var(--ink)}
.sv{aspect-ratio:16/11;overflow:hidden;background:#d8d0c3}
.sv img{width:100%;height:100%;object-fit:cover}
.hm .sv img{filter:brightness(.85)}
.tl{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px;margin-top:-64px;position:relative}
.tl span{background:var(--paper);color:var(--ink);border-radius:14px;padding:8px;box-shadow:0 12px 28px rgba(0,0,0,.22);font-size:11px;line-height:1.4}
.hm .tl span{background:#2A2831;color:var(--nink)}
.tl img{aspect-ratio:1;object-fit:cover;border-radius:8px;width:100%;margin-bottom:7px}
.sb2{padding:22px 22px 24px}
.tg{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.tg em{font-style:normal;letter-spacing:.06em;border:1px solid currentColor;border-radius:999px;padding:1px 9px;color:var(--kakid)}
.hm .tg{color:var(--nmut)}.hm .tg em{color:var(--amber)}
.st h3{font:500 clamp(22px,5.4vw,30px)/1.45 var(--se);letter-spacing:.06em;margin:10px 0 6px}
.st p{font-size:13px;color:var(--muted);display:none}.hm p{color:var(--nmut)}
.rw{display:flex;justify-content:space-between;align-items:end;margin-top:18px;padding-top:16px;border-top:1px solid rgba(58,57,53,.14)}
.hm .rw{border-color:rgba(255,255,255,.14)}
.rw small{display:block;font-size:10px;color:var(--muted)}.hm .rw small{color:var(--nmut)}
.rw strong{font:600 24px/1.2 var(--ss);color:var(--kaki)}.hm .rw strong{color:var(--amber)}
.rw i{font-style:normal;width:48px;height:48px;border-radius:50%;background:var(--kaki);color:#fff;display:grid;place-items:center;font-size:18px}
.hm .rw i{background:var(--amber);color:var(--night)}
@media(min-width:960px){
.st{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto 1fr;min-height:480px}
.sv{grid-column:1;grid-row:1/3;aspect-ratio:auto}
.tl{grid-column:2;grid-row:1;margin:0;padding:36px 36px 0;gap:14px}
.sb2{grid-column:2;grid-row:2;padding:24px 36px 34px;display:flex;flex-direction:column;justify-content:flex-end}
.st p{display:block}
.mv{grid-template-columns:1fr 1.35fr}.mv .sv{grid-column:2}.mv .tl,.mv .sb2{grid-column:1}}

/* brand story (pine block) */
.sy{display:grid;border-radius:var(--r);overflow:hidden;background:var(--bk);color:var(--bkt)}
.sti{aspect-ratio:4/3;background:#cfc6b8 center/cover no-repeat}
.stt{padding:26px 22px 28px}
.stt h2{font:500 clamp(20px,5.2vw,28px)/1.6 var(--se);letter-spacing:.05em;margin-bottom:10px}
.stt p{font-size:14px;color:var(--bkm);margin-bottom:16px}
.stt .lk{color:var(--bka)}
@media(min-width:960px){.sy{grid-template-columns:1fr 1fr}.sti{aspect-ratio:auto;min-height:340px}.stt{padding:44px;align-self:center}}

/* journal */
.rd{display:grid;border-radius:var(--r2);overflow:hidden;background:var(--sf)}
.rdi{aspect-ratio:16/9;background:#d8d0c3 center/cover no-repeat}
.rdt{padding:16px 18px 20px}.rdt b{display:block;font:500 16px/1.6 var(--se)}.rdt span{font-size:12px;color:var(--mu)}
@media(min-width:960px){.rd{grid-template-columns:1.4fr 1fr;align-items:center}.rdt{padding:36px}}

/* shopping info + FAQ */
.ts{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid var(--rl)}
.ts li{padding:13px 2px 13px 40px;border-bottom:1px solid var(--rl);font-size:13px;position:relative}
.ts li:before{content:"";position:absolute;left:4px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;border:1.2px solid var(--ac);background:radial-gradient(circle,var(--ac) 3px,transparent 3.5px)}
.fb{background:var(--bk);color:var(--bkt);border-radius:var(--r);padding:6px 22px}
.fb details{border-bottom:1px solid var(--bk2)}.fb details:last-child{border:0}
.fb summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:17px 0;cursor:pointer;font-size:14px}
.fb summary::-webkit-details-marker{display:none}
.fb summary:after{content:"＋";color:var(--bka)}.fb details[open] summary:after{content:"－"}
.fb p{font-size:13px;color:var(--bkm);padding-bottom:18px}.fb p a{color:var(--bka);text-decoration:underline}
@media(min-width:960px){.fq{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:56px;align-items:start}.ts{display:flex;flex-direction:column;gap:10px;border:0}.ts li{background:var(--alt);border:0;border-radius:var(--r2);padding:16px 18px 16px 50px}.ts li:before{left:16px}.fb{padding:12px 36px}}

/* product page */
.cb{font-size:12px;color:var(--mu);padding:16px 0}
.cb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.cb li+li:before{content:"/";margin-right:6px}
.pd{display:grid;gap:26px}
.gm{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--alt)}
.gm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.gl input{position:absolute;opacity:0;pointer-events:none}
.gt{display:flex;gap:8px;margin-top:10px}
.gt label{width:58px;height:58px;border-radius:10px;overflow:hidden;border:1.5px solid transparent;opacity:.6;cursor:pointer}
.gt img{width:100%;height:100%;object-fit:cover}
#g1:checked~.gm .i1,#g2:checked~.gm .i2,#g3:checked~.gm .i3,#g4:checked~.gm .i4,#g5:checked~.gm .i5{opacity:1}
#g1:checked~.gt .i1,#g2:checked~.gt .i2,#g3:checked~.gt .i3,#g4:checked~.gt .i4,#g5:checked~.gt .i5{border-color:var(--ac);opacity:1}
.pl{width:68px;line-height:0;margin-bottom:12px}.pl img{height:auto}
.pn h1{font:500 clamp(22px,5.6vw,30px)/1.5 var(--se);letter-spacing:.04em;margin-bottom:12px}
.pp{font:600 30px/1.2 var(--ss);color:var(--act);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pp s{font-size:15px;color:var(--mu);font-weight:400}.pp small{font-size:12px;color:var(--mu);font-weight:400}
.mt{list-style:none;padding:0;margin:14px 0 18px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--mu)}
.mt li:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sage);margin-right:7px;vertical-align:2px}
[data-theme=night] .mt li:before{background:var(--amber)}
.pb{margin:18px 0;padding:18px;border:1px solid var(--rl);border-radius:var(--r2);background:var(--sf);scroll-margin-top:84px}
.pb select{width:100%;padding:13px 14px;border:1px solid var(--rl);border-radius:10px;font:13px var(--ss);background:var(--bg);color:var(--tx);margin-bottom:14px}
.pb button,.pb input[type=submit]{display:block;width:100%;min-height:52px;background:var(--ac);color:var(--acf);border:0;border-radius:999px;font:14px var(--ss);letter-spacing:.12em;cursor:pointer}
.dc{padding:44px 0}
.bd{font-size:14px;color:var(--mu);line-height:2.1;white-space:pre-wrap}
.bd.fx{white-space:normal}
.bd .ld{font:500 16px/2 var(--se);color:var(--tx);margin:0 0 8px}
.bd h3{font:600 15px/1.6 var(--ss);color:var(--tx);letter-spacing:.06em;margin:30px 0 8px;padding-left:12px;border-left:3px solid var(--ac)}
.bd ul{list-style:none;margin:0;padding:0}
.bd li{position:relative;padding:5px 0 5px 18px}
.bd li:before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--sage)}
[data-theme=night] .bd li:before{background:var(--amber)}
.bd .bx{margin-top:26px;padding:16px 18px;border-radius:var(--r2);background:var(--alt);font-size:13px;line-height:1.9}
.bd .bx b{display:block;color:var(--kakid);font-weight:600;margin-bottom:4px;letter-spacing:.06em}
[data-theme=night] .bd .bx b{color:var(--amber)}
.al .bd .bx b{color:var(--kakid)}
.dx{margin-top:34px}.dx img{height:auto;border-radius:6px}
.nb{margin-top:24px;font-size:11px;color:var(--mu)}
@media(min-width:960px){.pd{grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}.pn{position:sticky;top:84px}.dc{max-width:760px;padding:72px 0}}
.sk{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--rl);transform:translateY(110%);transition:transform .35s}
.sk.on{transform:none}
.sk div{flex:1;min-width:0}.sk b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sk span{font:600 15px/1.2 var(--ss);color:var(--act)}
.sk .bt{min-height:44px;padding:0 20px;font-size:13px}

/* static pages */
.gp{max-width:760px;margin:0 auto;padding:44px 20px 72px}
.gp h1{font:500 clamp(24px,6vw,34px)/1.5 var(--se);letter-spacing:.05em;margin-bottom:24px}
.cn{font-size:14px;line-height:2.1}.cn img{height:auto}

/* footer */
.ft{background:var(--bk);color:var(--bkm);padding:56px 0 110px;font-size:13px}
.fw{font:500 21px/1 var(--ss);letter-spacing:.26em;color:var(--bkt);margin-bottom:8px}
.fbr{margin-bottom:22px}
.ft details{border-bottom:1px solid var(--bk2)}
.ft summary{list-style:none;display:flex;justify-content:space-between;padding:16px 0;color:var(--bkt);cursor:pointer;font-size:14px}
.ft summary::-webkit-details-marker{display:none}
.ft summary:after{content:"＋";color:var(--bka)}.ft details[open] summary:after{content:"－"}
.ft details a{display:block;padding:6px 0}.ft details div{padding-bottom:12px}
.sn{display:flex;gap:16px;margin-top:26px;color:var(--bkt)}
@media(min-width:960px){.fti{display:grid;grid-template-columns:1.4fr repeat(3,1fr);column-gap:48px}.ft details{border:0}.ft summary{pointer-events:none;padding:0 0 12px;font-weight:500}.ft summary:after{display:none}.sn{grid-column:1/-1;border-top:1px solid var(--bk2);padding-top:22px;margin-top:34px}}

/* dusk transition (home → HOME night item) */
.dk{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 40%,#3a2f24,var(--night) 60%);opacity:0;pointer-events:none;transition:opacity .7s}
.dk.on{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* mobile hero: image fills the top ~2/3 so the product stays clear of the headline; text sits on the dark fade below */
@media(max-width:959px){.hr{background-size:auto 66%;background-position:58% top;background-color:#2b2823}.hr:before{background:linear-gradient(180deg,transparent 38%,#2b2823 66%)}}