:root{
  --husk:#2F5233; --husk-d:#1E3622; --gold:#F4A300; --gold-d:#B97800;
  --leaf:#E3EDCB; --paper:#FBFCF6; --ink:#1F2B21; --muted:#5B6A5D; --line:#D5E0BE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Figtree,system-ui,sans-serif}
h1,h2,h3,.brand{font-family:"Bricolage Grotesque",Figtree,sans-serif;line-height:1.1;margin:0}
a{color:var(--husk)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.top{display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:5}
.brand{font-weight:800;font-size:1.35rem;color:var(--husk);text-decoration:none}
.top nav{display:flex;gap:22px;align-items:center}
.top nav a{text-decoration:none;font-weight:500}
.pill{background:var(--husk);color:#fff!important;padding:7px 14px;border-radius:99px}
.pill span{background:var(--gold);color:var(--ink);border-radius:99px;padding:0 8px;margin-left:4px;font-weight:600}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;align-items:center;padding:7vh 5vw;background:var(--leaf)}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;color:var(--husk-d);max-width:12ch}
.hero p{max-width:52ch;margin:20px 0 28px;font-size:1.1rem}
.hero-art{width:100%;max-width:440px;justify-self:center}

.btn{display:inline-block;background:var(--gold);color:var(--ink);font:600 1rem Figtree,sans-serif;padding:14px 26px;border-radius:10px;border:0;text-decoration:none;cursor:pointer}
.btn:hover{background:#FFB62B}
.btn.small{padding:9px 18px}
.ghost{background:none;border:1px solid var(--muted);border-radius:10px;padding:9px 18px;cursor:pointer;font:500 1rem Figtree,sans-serif;color:var(--ink)}

.block{padding:9vh 5vw}
.block.alt{background:var(--husk);color:#fff}
.block h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:10px}
.lead{color:var(--muted);margin:0 0 32px;max-width:60ch}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:6px}
.card h3{font-size:1.25rem;font-weight:500}
.card p{margin:0;color:var(--muted);flex:1}
.price{font:800 1.6rem "Bricolage Grotesque",sans-serif;color:var(--husk);margin-top:8px}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;margin-top:28px}
.three h3{font-size:1.4rem;font-weight:500;color:var(--gold);margin-bottom:8px}
.three p{margin:0;opacity:.92}

.cart{list-style:none;padding:0;margin:0 0 18px;max-width:640px}
.cart li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.1rem}
.total{font:800 1.5rem "Bricolage Grotesque",sans-serif;margin:0 0 18px}
.muted{color:var(--muted)}

footer{padding:28px 5vw;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:720px;margin:auto;background:var(--husk-d);color:#fff;padding:16px 20px;border-radius:14px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:10}
.consent p{margin:0;flex:1 1 300px;font-size:.95rem}.consent a{color:var(--gold)}
.consent .ghost{color:#fff;border-color:#fff8;margin-right:8px}
.legal{max-width:70ch;margin:auto;padding:8vh 5vw}.legal h1{font-size:2.4rem;margin-bottom:18px}.legal h2{font-size:1.4rem;margin:28px 0 8px}

@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-art{max-width:280px;order:-1}.top nav a:not(.pill){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}