/* Hallmark Nutrition shop — the label identity, on screen.
   cream ground, bottle green ink, gold rules, category accents. */
:root{
  --cream:#F3ECDC; --paper:#FBF8F1; --card:#FFFFFF; --green:#2C4A3A; --green-deep:#1B3A2D;
  --gold:#A8861D; --gold-soft:#C9A84A; --ink:#1E2A24; --muted:#6B6F66; --rule:#E3DBC9; --hair:#EFE9DB;
  --ac:#A8861D; --max:1180px; --serif:"Libre Bodoni","Bodoni MT",Didot,Georgia,serif; --sans:Lato,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.005em;line-height:1.1;margin:0 0 .4em;color:var(--green);text-wrap:balance;font-variant-numeric:lining-nums}
h1{font-size:clamp(30px,4.6vw,48px)} h2{font-size:clamp(24px,3vw,32px)} h3{font-size:20px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 10px}
.eyebrow a{color:inherit;text-decoration:none}
.lede{font-size:18px;color:var(--muted);max-width:60ch;margin:0 0 20px}
.small{font-size:13.5px;color:var(--muted)}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;border:0;border-radius:3px;padding:13px 24px;font:700 15px var(--sans);letter-spacing:.03em;cursor:pointer}
.btn:hover{background:var(--green-deep)} .btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green)} .btn.big{width:100%;padding:16px}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.link{background:none;border:0;color:var(--green);text-decoration:underline;font:inherit;cursor:pointer;padding:0}

/* header */
.announce{background:var(--green-deep);color:var(--cream);text-align:center;font-size:13px;letter-spacing:.06em;padding:7px 16px}
header.site{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:14px 24px;max-width:var(--max);margin:0 auto;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .crest{width:44px;height:auto}
nav.main{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
nav.main a{text-decoration:none;color:var(--ink);font-size:14px;letter-spacing:.02em;padding:4px 0;border-bottom:2px solid transparent}
nav.main a.on,nav.main a:hover{border-bottom-color:var(--gold)}
nav.main a.cat i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ac);margin-right:6px;vertical-align:1px}
.tools{display:flex;align-items:center;gap:14px}
.search{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--card)}
.search input{border:0;padding:8px 10px;width:140px;font:inherit;font-size:14px;background:transparent}
.search button{border:0;background:transparent;padding:0 10px;font-size:18px;cursor:pointer;color:var(--muted)}
.basket{text-decoration:none;color:var(--ink);font-size:14px;font-weight:700}
.basket b{background:var(--gold);color:#fff;border-radius:12px;padding:1px 8px;font-size:12px;margin-left:4px}
.burger{display:none;background:none;border:1px solid var(--rule);border-radius:3px;width:40px;height:36px;position:relative;cursor:pointer}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:9px;right:9px;height:2px;background:var(--ink);top:17px}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media (max-width:900px){
  header.site{grid-template-columns:auto 1fr;gap:12px;padding:12px 16px}
  nav.main{display:none;grid-column:1/-1;flex-direction:column;gap:10px;padding:10px 0 4px;border-top:1px solid var(--rule)}
  body.nav-open nav.main{display:flex}
  .tools{justify-self:end} .search input{width:90px} .burger{display:block}
}
main{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:640px){main{padding:0 16px}}

/* home */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding:44px 0 30px}
.hero h1{font-size:clamp(40px,6vw,68px);margin-bottom:16px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;height:520px;background:radial-gradient(ellipse at 50% 85%,#e7dfcb 0,transparent 60%)}
.hero-bottle{position:absolute;bottom:0;left:calc(50% - 150px + (var(--i) - 1) * 150px);width:300px;z-index:calc(3 - var(--i));transform:translateY(calc(var(--i) * 6px)) scale(calc(1 - var(--i) * .06));filter:drop-shadow(0 18px 24px rgba(0,0,0,.14))}
.hero-bottle:nth-child(2){z-index:4}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:28px}.hero-art{height:380px}.hero-bottle{width:220px;left:calc(50% - 110px + (var(--i) - 1) * 105px)}}
.families{padding:30px 0}
.fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.fam{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--ac);padding:16px 16px 14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;border-radius:3px}
.fam:hover{border-color:var(--ac)} .fam b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--green)} .fam span:last-child{font-size:13.5px;color:var(--muted)}
.fam .swatch{display:none}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:26px 0 12px}
.sec-head a{font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding-bottom:20px}
.grid.wide{padding-bottom:50px}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:12px 14px 16px;position:relative;transition:border-color .15s}
.card:hover{border-color:var(--ac)}
.card .pic{display:block;background:var(--cream);border-radius:3px;margin-bottom:12px;aspect-ratio:3/4;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:contain;padding:6px}
.card .cname{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--green);line-height:1.15}
.card .csub{font-size:13px;color:var(--muted);margin:3px 0 8px}
.card .cprice{font-weight:700;margin-top:auto}
.card.na .cprice{color:var(--muted);font-weight:400}
.chip{position:absolute;top:18px;left:20px;background:var(--green-deep);color:var(--cream);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:36px 0 50px;border-top:1px solid var(--rule)}
.pr b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--green);margin-bottom:6px} .pr span{font-size:14.5px;color:var(--muted)}

/* collection */
.coll-head{padding:34px 0 10px;border-bottom:3px solid var(--ac);margin-bottom:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.chips a{text-decoration:none;color:var(--ink);font-size:13px;border:1px solid var(--rule);border-radius:20px;padding:5px 12px;background:var(--card)}
.chips a.on,.chips a:hover{border-color:var(--ac);color:var(--green)}
.empty{color:var(--muted)}

/* product */
.crumbs{font-size:13px;color:var(--muted);padding:16px 0 6px} .crumbs a{color:var(--muted)}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:10px 0 40px}
@media (max-width:820px){.product{grid-template-columns:1fr;gap:20px}}
.gallery .main{background:var(--cream);border-radius:4px;width:100%}
.labelview{margin-top:10px} .labelview summary{cursor:pointer;color:var(--green);font-size:14px} .labelview img{margin-top:8px;border:1px solid var(--rule)}
.buy .sub{color:var(--muted);margin:0 0 14px} .buy .desc{font-size:17px;max-width:56ch}
.claims{margin:0 0 14px;padding-left:18px;font-size:15px;color:var(--green)} .claims li{margin-bottom:3px}
.price-row{display:flex;align-items:baseline;gap:10px;margin:8px 0 12px}
.price{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--green)} .price-row s{color:var(--muted)} .vat{font-size:12px;color:var(--muted)}
.add{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qty{display:flex;align-items:center;gap:8px;font-size:14px} .qty input{width:64px;padding:11px 8px;border:1px solid var(--rule);border-radius:3px;font:inherit}
.note{font-size:14px;color:var(--muted);margin:12px 0 0;padding:10px 12px;background:var(--hair);border-radius:3px}
.note.chilled{background:#E6EFEA;color:var(--green-deep)} .note.hold{background:#F6EDD0}
.facts{margin-top:22px;border-top:1px solid var(--rule)}
.facts details{border-bottom:1px solid var(--rule)}
.facts summary{cursor:pointer;padding:13px 0;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--green);list-style:none;display:flex;justify-content:space-between;align-items:baseline}
.facts summary::-webkit-details-marker{display:none}
.facts summary::after{content:"+";color:var(--gold);font-family:var(--sans)} .facts details[open] summary::after{content:"–"}
.facts summary small{font-family:var(--sans);font-size:13px;color:var(--muted);margin-left:8px}
.facts details > div{padding:0 0 14px;font-size:14.5px}
.facts p{margin:0 0 8px}
.nrv{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--hair);padding:10px;border-radius:3px;white-space:pre-wrap;overflow-x:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0} .kv dt{color:var(--muted)} .kv dd{margin:0}

/* cart / checkout / order */
.narrow{max-width:760px;margin:0 auto;padding:34px 0 60px}
.lines{width:100%;border-collapse:collapse;margin:16px 0}
.lines td{padding:12px 8px;border-bottom:1px solid var(--rule);vertical-align:middle} .lines td.pic img{border-radius:3px;background:var(--cream)}
.lines td.num{text-align:right;white-space:nowrap} .lines tr.grand td{font-weight:700;font-size:17px}
.qtyf input{width:58px;padding:7px;border:1px solid var(--rule);border-radius:3px;font:inherit} .qtyf .link{margin-left:6px;font-size:13px}
.totals{max-width:380px;margin-left:auto} .totals > div{display:flex;justify-content:space-between;padding:6px 0} .totals .grand{border-top:1px solid var(--rule);font-size:20px;margin:6px 0 14px}
.totals .btn{display:block;text-align:center;margin-bottom:10px}
.checkout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;padding:30px 0 60px}
@media (max-width:820px){.checkout{grid-template-columns:1fr}}
.co-form label{display:block;margin:0 0 12px;font-size:14px;color:var(--muted)}
.co-form input:not([type=checkbox]),.co-form textarea,.co-form select{display:block;width:100%;margin-top:4px;padding:11px 12px;border:1px solid var(--rule);border-radius:3px;font:inherit;font-size:15px;color:var(--ink);background:var(--card)}
.co-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-form h2{font-size:22px;margin:18px 0 10px} .co-form h2 small{font-family:var(--sans);font-size:13px;color:var(--muted)}
.co-form .check{display:flex;gap:10px;align-items:flex-start;color:var(--ink);margin:16px 0}
.summary{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:20px;align-self:start;position:sticky;top:16px}
.sl{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:15px} .sl small{color:var(--muted)} .sl.grand{border:0;font-size:19px;margin-top:6px}
.codef{display:flex;gap:6px;margin-top:12px} .codef input{flex:1;padding:9px;border:1px solid var(--rule);border-radius:3px;font:inherit} .codef button{padding:9px 12px;border:1px solid var(--green);background:transparent;color:var(--green);border-radius:3px;font:inherit;cursor:pointer}
.err{color:#8A3B3B}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* prose pages */
.prose p{max-width:66ch} .prose h2{font-size:24px;margin-top:24px}

/* footer */
footer.site{border-top:1px solid var(--rule);margin-top:40px;background:var(--cream)}
footer .cols{max-width:var(--max);margin:0 auto;padding:36px 24px 10px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:24px}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}} @media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h4{margin:0 0 8px;font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
footer .cols a{display:block;text-decoration:none;color:var(--ink);font-size:14px;padding:3px 0}
footer .mono{color:var(--green);margin-bottom:8px}
.news label{font-size:13.5px;color:var(--muted);display:block;margin-bottom:6px} .news div{display:flex;gap:6px} .news input{flex:1;padding:9px;border:1px solid var(--rule);border-radius:3px;font:inherit;min-width:0} .news button{padding:9px 14px;background:var(--green);color:#fff;border:0;border-radius:3px;font:inherit;cursor:pointer}
footer .legal{max-width:var(--max);margin:0 auto;padding:16px 24px 28px;font-size:12px;color:var(--muted)}

/* admin */
.admin{padding:30px 0 60px}
.adm-head{display:flex;justify-content:space-between;align-items:baseline}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin:10px 0 16px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:inherit;cursor:pointer;color:var(--muted)} .tabs button.on{color:var(--green);border-bottom-color:var(--gold);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:18px}
.stats div{background:var(--card);border:1px solid var(--rule);padding:10px 12px;border-radius:3px} .stats b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--green)} .stats span{font-size:12px;color:var(--muted)}
table.adm{width:100%;border-collapse:collapse;font-size:14px;background:var(--card)} table.adm th,table.adm td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top} table.adm input.n{width:80px;padding:6px;border:1px solid var(--rule);border-radius:3px;font:inherit}
.pill{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:3px;background:var(--hair)} .st-paid .pill{background:#F6EDD0} .st-dispatched .pill{background:#E6EFEA} .st-pending .pill{color:var(--muted)}
.actions{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:16px} .actions input{padding:10px;border:1px solid var(--rule);border-radius:3px;font:inherit;display:block}
.admin .two{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media (max-width:700px){.admin .two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}