:root{
  --ink:#202725;
  --forest:#173d35;
  --forest2:#275b4f;
  --red:#c6493f;
  --orange:#db8a37;
  --cream:#f5f3ec;
  --paper:#fffdfa;
  --mint:#e1ece6;
  --blue:#e8eef0;
  --line:#d9dfdc;
  --muted:#697570;
  --white:#fff;
  --wrap:1180px;
  --shadow:0 22px 58px rgba(23,61,53,.12);
  --soft:0 10px 28px rgba(23,61,53,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Tahoma,"Noto Sans Thai","Leelawadee UI",Arial,sans-serif;line-height:1.72}
a{color:var(--forest2);text-underline-offset:.18em}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0 0 .65em;color:var(--forest);line-height:1.1;letter-spacing:-.025em}
h1{font-size:clamp(2.8rem,5.8vw,5.5rem);max-width:11ch}
h2{font-size:clamp(2rem,3.8vw,3.45rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
button,input{font:inherit}
.wrap{width:min(var(--wrap),calc(100% - 2rem));margin-inline:auto}
.narrow>*{max-width:820px}
.section{padding:clamp(4rem,7vw,7rem) 0}
.section-soft{background:#f3f7f5}
.section-heading{max-width:860px;margin-bottom:2.4rem}
.lead{font-size:clamp(1.08rem,2vw,1.28rem);color:#52615b}
.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:900;color:var(--red);text-transform:uppercase;margin:0 0 .85rem}
.eyebrow.light{color:#ffc587}
.skip-link{position:absolute;left:-9999px;top:1rem;background:var(--forest);color:#fff;padding:.8rem 1rem;z-index:3000}
.skip-link:focus{left:1rem}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,253,250,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(23,61,53,.10)}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--forest);font-weight:900}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--red);color:#fff;font-size:.72rem;box-shadow:5px 5px 0 var(--forest)}
.header-nav{display:flex;align-items:center;gap:1.1rem}
.header-nav a{text-decoration:none;font-size:.84rem;font-weight:800}
.header-cta{padding:.65rem 1rem;background:var(--forest);color:#fff!important}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.25rem;border:2px solid var(--forest);text-decoration:none;font-weight:900;cursor:pointer;background:#fff;color:var(--forest);transition:.18s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--forest)}
.btn-primary{background:var(--red);color:#fff}
.btn-secondary{background:#fff}
.btn-block{width:100%}

.hero{padding:clamp(4.5rem,8vw,7.2rem) 0;background:linear-gradient(90deg,var(--cream) 0 58%,#efe1df 58% 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);gap:clamp(3rem,6vw,5.5rem);align-items:center}
.hero-lead{max-width:680px;font-size:1.18rem;color:#56645f}
.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.8rem 0}
.hero-meta div{padding:1rem;background:rgba(255,255,255,.72);border:1px solid var(--line)}
.hero-meta span{display:block;font-size:.73rem;color:var(--muted);font-weight:800}
.hero-meta strong{display:block;margin-top:.25rem;color:var(--forest)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0}
.microcopy{font-size:.85rem;color:var(--muted)}
.hero-media{position:relative}
.hero-media img{width:100%;border:2px solid var(--forest);box-shadow:12px 12px 0 var(--forest)}
.price-badge{position:absolute;left:-1rem;bottom:1.5rem;background:var(--orange);border:2px solid var(--forest);padding:.8rem 1rem;box-shadow:5px 5px 0 var(--forest)}
.price-badge span{display:block;font-size:.72rem;font-weight:800}
.price-badge strong{font-size:1.35rem}

.trust-strip{background:var(--forest);color:#fff}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-grid div{padding:1.2rem;border-right:1px solid rgba(255,255,255,.18)}
.trust-grid div:last-child{border-right:0}
.trust-grid strong,.trust-grid span{display:block}
.trust-grid span{font-size:.78rem;color:#c8d8d2}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.product-pack img{background:#faf8f3;border:1px solid var(--line);box-shadow:var(--shadow)}
.check-list{list-style:none;padding:0;margin:1.5rem 0}
.check-list li{position:relative;padding:.6rem 0 .6rem 2rem;border-bottom:1px solid var(--line)}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}

.ingredient-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.ingredient-grid article{padding:1.25rem;background:#fff;border:1px solid var(--line);box-shadow:var(--soft)}
.ingredient-grid span{display:grid;place-items:center;width:44px;height:44px;background:var(--mint);color:var(--forest);font-weight:900;margin-bottom:1rem}
.ingredient-grid p{font-size:.9rem;color:var(--muted)}
.notice-box{margin-top:1.5rem;padding:1.2rem 1.3rem;background:#fff5e7;border-left:5px solid var(--orange)}
.notice-box p{margin:.3rem 0 0}

.dark-section{background:linear-gradient(135deg,#173d35,#102d27);color:#dce8e3}
.dark-section h2{color:#fff}
.dark-section p{color:#c8d7d1}
.dark-section img{border:2px solid #fff;box-shadow:12px 12px 0 var(--red)}
.numbered-list{list-style:none;padding:0;margin:1.5rem 0}
.numbered-list li{display:grid;grid-template-columns:52px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.numbered-list span{color:#ffc587;font-weight:900}
.numbered-list strong{color:#fff}
.numbered-list p{margin:.25rem 0 0}

.safety-grid,.order-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.safety-grid article,.order-facts article{padding:1.25rem;background:#fff;border:1px solid var(--line);box-shadow:var(--soft)}
.order-facts span{font-size:.72rem;font-weight:900;color:var(--red)}

.advertiser-card{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem;background:var(--mint);border:2px solid var(--forest)}
.advertiser-details{padding:1.2rem;background:#fff}

details{margin-bottom:.75rem;padding:1rem 1.1rem;background:#fff;border:1px solid var(--line)}
summary{cursor:pointer;font-weight:900;color:var(--forest)}
details p{margin:.6rem 0 0;color:var(--muted)}

.order-section{background:linear-gradient(135deg,#173d35,#102d27);color:#dce8e3}
.order-section h2{color:#fff}
.order-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.summary-card{padding:1.2rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.summary-card div{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.summary-card strong{color:#fff}
.summary-card p{font-size:.85rem;color:#c7d6d1;margin:1rem 0 0}
.order-form{padding:1.4rem;background:#fff;color:var(--ink);box-shadow:12px 12px 0 var(--red)}
.field{margin-bottom:1rem;border:0;padding:0}
.field label,.field legend{display:block;margin-bottom:.45rem;font-weight:900;color:var(--forest)}
.field input[type=text],.field input[type=tel]{width:100%;min-height:50px;border:1px solid #aebbb6;padding:.75rem .85rem}
.radio{display:flex!important;gap:.65rem;align-items:center;padding:.75rem;border:1px solid var(--line);margin-bottom:.5rem;font-weight:700!important}
.radio input{width:20px;height:20px;accent-color:var(--red)}
.check-consent{display:flex;gap:.65rem;align-items:flex-start;margin:1rem 0;font-size:.85rem}
.check-consent input{width:20px;height:20px;flex:none;accent-color:var(--red)}
.form-note{font-size:.82rem;color:var(--muted);margin:.8rem 0 0}
.honeypot{position:absolute;left:-9999px}

.legal-page{padding:clamp(4rem,7vw,6rem) 0}
.legal-wrap{max-width:920px}
.legal-page h1{max-width:15ch}
.legal-page section{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.legal-page h2{font-size:1.75rem}
.legal-card{padding:1.2rem;background:var(--mint);border-left:5px solid var(--red)}
.legal-page li{margin:.45rem 0}

.site-footer{padding:4rem 0 2rem;background:#0e2924;color:#bdcec7}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1.2fr;gap:2rem}
.footer-grid h3{color:#fff;font-size:.95rem}
.footer-grid a{display:block;color:#dce8e3;text-decoration:none;margin:.4rem 0;font-size:.84rem}
.footer-grid p{font-size:.84rem}
.footer-brand{font-size:1.15rem!important;font-weight:900}
.footer-company strong{color:#fff}
.footer-disclaimer{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}
.footer-disclaimer p{font-size:.8rem;color:#aebfb8}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:#fff;border-top:2px solid var(--forest);box-shadow:0 -14px 40px rgba(23,61,53,.15)}
.cookie-inner{width:min(var(--wrap),calc(100% - 2rem));margin:auto;padding:1rem 0;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.cookie-inner p{margin:.3rem 0;font-size:.84rem;color:var(--muted)}
.cookie-actions{display:flex;gap:.6rem}

@media(max-width:980px){
  .header-nav a:not(.header-cta){display:none}
  .hero{background:linear-gradient(180deg,var(--cream) 0 54%,#efe1df 54% 100%)}
  .hero-grid,.split,.advertiser-card,.order-layout{grid-template-columns:1fr}
  .hero-media{max-width:700px}
  .ingredient-grid{grid-template-columns:repeat(3,1fr)}
  .safety-grid,.order-facts{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  h1{font-size:2.8rem}
  h2{font-size:2.1rem}
  .wrap{width:min(var(--wrap),calc(100% - 1.25rem))}
  .hero{padding:3.5rem 0 4rem}
  .hero-meta{grid-template-columns:1fr}
  .hero-actions{display:grid}
  .btn{width:100%}
  .ingredient-grid,.safety-grid,.order-facts,.trust-grid,.footer-grid{grid-template-columns:1fr}
  .trust-grid div{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .cookie-inner{grid-template-columns:1fr}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr}
}