/* hlth — for healthier living · faithful conversion of the approved earthy-classic design */
:root{
  --maroon:#6B1F2A; --cream:#FBF7E3; --cream2:#F5EDCE; --card:#FFFDF2;
  --ink:#3A2420; --sub:#5A4A42; --muted:#8A7A6E; --orange:#E06A1E;
  --gold:#F2C879; --green:#1E6B3C; --sage:#E9EEDA; --tan:#EBD9BC;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);font-family:Karla,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--maroon);text-decoration:none}
a:hover{color:var(--orange)}
input,textarea{font-family:Karla,sans-serif}
img{max-width:100%}
@keyframes marqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes pinPulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.8);opacity:0}100%{opacity:0}}

.page{min-height:100vh;display:flex;flex-direction:column}
.page>.grow{flex:1}
.container{max-width:1200px;margin:0 auto;padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}

/* announcement */
.announce{background:var(--maroon);color:var(--cream);text-align:center;padding:9px 16px;font-size:13px;font-weight:600;letter-spacing:.06em}

/* nav */
.sitehead{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid rgba(107,31,42,.14)}
.sitehead .bar{max-width:1200px;margin:0 auto;padding:12px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sitehead nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.nl{cursor:pointer;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--maroon)}
.nl:hover{color:var(--orange)}
.nl.active{font-weight:800}
.nl-cta{cursor:pointer;background:var(--maroon);color:var(--cream);padding:10px 20px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.06em}
.nl-cta:hover{background:var(--orange);color:var(--cream)}
.logo-link img{height:52px;display:block;mix-blend-mode:multiply}

/* type */
.cav{font-family:Caveat,cursive;font-weight:600;color:var(--orange);font-size:clamp(20px,2.2vw,26px)}
.cav-lg{font-size:clamp(22px,2.6vw,30px)}
h1.display{margin:10px 0 18px;font-family:Bitter,serif;font-weight:900;font-size:clamp(38px,5.2vw,64px);line-height:1.06;color:var(--maroon);text-wrap:pretty}
h1.pagetitle{margin:6px 0 10px;font-family:Bitter,serif;font-weight:900;font-size:clamp(32px,4.4vw,54px);color:var(--maroon)}
h2.sect{margin:6px 0 8px;font-family:Bitter,serif;font-weight:800;font-size:clamp(28px,3.4vw,42px);color:var(--maroon)}
.lead{color:var(--sub);font-size:16.5px;line-height:1.6}

/* buttons */
.btn{border:none;cursor:pointer;border-radius:999px;font-family:Karla,sans-serif;font-weight:800;letter-spacing:.05em;display:inline-block;text-align:center}
.btn-primary{background:var(--maroon);color:var(--cream);padding:16px 32px;font-size:15px}
.btn-primary:hover{background:var(--orange);color:var(--cream)}
.btn-outline{background:transparent;color:var(--maroon);border:2px solid var(--maroon);padding:14px 30px;font-size:15px}
.btn-outline:hover{background:rgba(107,31,42,.08);color:var(--maroon)}
.btn-gold{background:var(--gold);color:var(--maroon);padding:15px 30px;font-size:15px}
.btn-gold:hover{background:var(--cream);color:var(--maroon)}
.btn-sm{padding:14px 28px;font-size:14px}
.btn-outline.btn-sm{padding:12px 26px}

/* filter chips */
.chip{cursor:pointer;padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px;background:transparent;color:var(--maroon);border:1.5px solid rgba(107,31,42,.25)}
.chip:hover{border-color:var(--maroon)}
.chip.sel{background:var(--maroon);color:var(--cream)}
.chip-sm{padding:9px 18px;font-size:13.5px;letter-spacing:.03em}
.chiprow{display:flex;gap:8px;flex-wrap:wrap}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.pcard{cursor:pointer;background:var(--card);border:1.5px solid rgba(107,31,42,.12);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;color:inherit}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(58,36,32,.14);color:inherit}
.pcard .ph{background:var(--cream2);display:flex;align-items:center;justify-content:center;height:210px;position:relative;overflow:hidden}
.pcard .ph img.pimg{height:180px;border-radius:6px;box-shadow:0 10px 24px rgba(58,36,32,.18);max-width:none}
.pcard .catpill{position:absolute;top:12px;left:12px;color:var(--cream);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:99px;white-space:nowrap}
.pcard .pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .pname{font-family:Bitter,serif;font-weight:800;font-size:17.5px;color:var(--ink)}
.pcard .ptag{font-size:13.5px;color:var(--muted);font-weight:600}
.pcard .pfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:8px}
.pcard .pprice{font-weight:800;color:var(--maroon);font-size:15.5px}
.pcard .pcta{font-size:12.5px;font-weight:800;color:var(--orange);letter-spacing:.05em}

/* related mini cards */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.rcard{cursor:pointer;background:var(--card);border:1.5px solid rgba(107,31,42,.12);border-radius:16px;overflow:hidden;display:block;color:inherit}
.rcard:hover{box-shadow:0 12px 26px rgba(58,36,32,.14);color:inherit}
.rcard .ph{background:var(--cream2);display:flex;align-items:center;justify-content:center;height:150px}
.rcard .ph img{height:124px;border-radius:5px;box-shadow:0 8px 18px rgba(58,36,32,.16);max-width:none}

/* info cards */
.icard{background:var(--card);border:1.5px solid rgba(107,31,42,.12);border-radius:18px;padding:26px}
.icard-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}

/* forms */
.tfield{padding:14px 16px;border-radius:12px;border:1.5px solid rgba(107,31,42,.25);background:var(--cream);font-size:15px;outline:none;color:var(--ink);width:100%}
.tfield:focus{border-color:var(--orange)}
.rfield{flex:1;min-width:180px;padding:13px 16px;border-radius:999px;border:1.5px solid rgba(107,31,42,.3);background:var(--cream);font-size:14.5px;outline:none;color:var(--ink)}
.okpill{background:var(--sage);color:var(--green);font-weight:800;padding:12px 18px;border-radius:999px;font-size:14.5px}

/* footer */
.sitefoot{background:var(--ink);color:var(--tan)}
.sitefoot .inner{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(16px,4vw,48px)}
.sitefoot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,48px)}
.sitefoot .flabel{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sitefoot .flinks{display:flex;flex-direction:column;gap:9px;font-size:14.5px;font-weight:600}
.sitefoot .flinks a{color:var(--tan)}
.sitefoot .flinks a:hover{color:var(--gold)}
.sitefoot .social a{color:var(--tan);cursor:pointer;font-size:14px;font-weight:700}
.sitefoot .social a:hover{color:var(--gold)}
.sitefoot .nlfield{flex:1;min-width:160px;padding:12px 16px;border-radius:999px;border:1.5px solid rgba(242,200,121,.4);background:rgba(251,247,227,.08);font-size:14px;outline:none;color:var(--cream)}
.sitefoot .nlfield::placeholder{color:rgba(251,247,227,.55)}
.sitefoot .nlbtn{background:var(--gold);color:var(--ink);border:none;cursor:pointer;padding:12px 22px;border-radius:999px;font-family:Karla,sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.05em}
.sitefoot .nlbtn:hover{background:var(--cream)}
.sitefoot .legal{border-top:1px solid rgba(242,200,121,.2);margin-top:clamp(28px,4vw,44px);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#C9AE92}
.sitefoot .nlok{background:rgba(109,179,63,.18);color:#A8D48A;font-weight:800;padding:12px 18px;border-radius:999px;font-size:14px}

/* sections */
.section-pad{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.scard{background:var(--card);border:1.5px solid rgba(107,31,42,.12);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.statcard{background:var(--cream);border-radius:14px;padding:18px;border:1.5px solid rgba(30,107,60,.2)}
.chapter{background:var(--card);border:1.5px solid rgba(107,31,42,.12);border-radius:16px;padding:24px}
