:root{color-scheme:light;--paper:#faf8f1;--ink:#172b23;--muted:#46564d;--line:#c9cec1;--accent:#dbea9f}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,sans-serif}
button,select{font:inherit}button,summary{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #548000;outline-offset:4px}
.notice{margin:0;background:var(--ink);color:var(--paper);text-align:center;padding:8px;font-size:.73rem;letter-spacing:.16em}
header,footer{max-width:1320px;margin:auto;padding:16px clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:850;letter-spacing:-.075em;font-size:1.85rem;text-decoration:none}.brand span{color:#54713d}
.bag,.close,.quantity button{background:transparent;color:inherit;border:1px solid var(--line);padding:7px 13px;border-radius:6px}.bag span{margin-left:8px;font-weight:800}
.hero{max-width:1320px;margin:0 auto;padding:12px clamp(20px,5vw,72px) 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(26px,6vw,90px);align-items:center}
figure{margin:0;position:relative;background:#e3e9d7;border-radius:8px;overflow:hidden}figure img{display:block;width:100%;height:auto}figcaption{position:absolute;left:20px;bottom:14px;font-size:.7rem;letter-spacing:.14em}
.copy{max-width:470px}.eyebrow{font-size:.75rem;letter-spacing:.17em;font-weight:750;margin:0 0 12px}
h1,h2{line-height:1.02;letter-spacing:-.055em;margin:0}h1{font-size:clamp(3.25rem,6.8vw,6.4rem)}h2{font-size:clamp(2rem,4vw,3.6rem)}
.intro{font-size:1.18rem;color:var(--muted);max-width:25ch}.price{font-size:1.5rem;font-weight:750}.price small{font-size:.76rem;color:var(--muted);font-weight:500;margin-left:8px}.finish{display:flex;gap:10px;align-items:center}.finish span{width:18px;height:18px;border-radius:50%;background:#46583f}
.primary{width:100%;padding:14px 17px;color:var(--paper);background:var(--ink);border:0;border-radius:6px;font-weight:750;text-align:left}.primary span{float:right}.primary:hover{background:#365344}.primary:disabled{opacity:.55;cursor:default}
details{border-bottom:1px solid var(--line);padding:12px 0}details:first-of-type{margin-top:12px}details p,.hint{color:var(--muted);font-size:.92rem}
.story{background:var(--accent);text-align:center;padding:46px 20px}.story p:last-child{max-width:52ch;margin:16px auto 0}footer p{font-size:.8rem}
dialog{width:min(460px,calc(100% - 24px));max-height:calc(100% - 24px);padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#13271db0}.dialog-head,.line,.quantity{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-head h2{font-size:2rem}.close{font-size:1.2rem}.line{border-bottom:1px solid var(--line);padding:14px 0}label{display:block;margin:14px 0}select{display:block;width:100%;padding:8px;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:4px}
@media(max-width:700px){.hero{grid-template-columns:1fr}.copy{max-width:none}figure img{aspect-ratio:1.2;object-fit:contain}.intro{max-width:none}}