/* T·Lab Variant C · Our formulas page (slug our-formulas)
   Loaded after shop-c.css / tlab-wp.css. Uses shop-c.css tokens and components; page classes prefixed .f- */

#main{display:block}

/* hero */
.f-hero{padding-block:clamp(8px,2vw,20px) clamp(32px,5vw,64px)}
.f-hero .crumbs{margin-bottom:clamp(8px,2vw,16px)}
.f-hero-grid{display:grid;gap:24px;align-items:center}
.f-hero-grid>*{min-width:0}
.f-hero h1{font:600 clamp(36px,5.6vw,60px)/1.04 var(--sans);letter-spacing:-.03em;color:var(--ink);margin:0 0 14px}
.f-lede{font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--muted);max-width:40ch;margin:0 0 20px}
.f-trust{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
.f-trust li{white-space:normal}
.f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:24px}
.f-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--teal);font-weight:600;text-decoration:none}
.f-link:hover{text-decoration:underline;text-underline-offset:4px}
.f-hero-media{margin:0;border-radius:var(--r);background:var(--stone);aspect-ratio:1719/1386;overflow:hidden}
.f-hero-media img{width:100%;height:100%;object-fit:contain}
@media (min-width:900px){.f-hero-grid{grid-template-columns:1fr 1.05fr;gap:48px}}

/* how we make them */
.f-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.f-steps li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;background:var(--white);border-radius:var(--r);padding:18px}
.f-ico{width:48px;height:48px;border-radius:12px;background:var(--mint);color:var(--teal);display:grid;place-items:center}
.f-steps h3{font:600 17px/1.3 var(--sans);color:var(--ink);margin:2px 0 4px}
.f-steps p{color:var(--muted);font-size:15px;line-height:1.5}
.f-fine{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.5}
@media (min-width:760px){
  .f-steps{grid-template-columns:repeat(3,1fr);gap:16px}
  .f-steps li{grid-template-columns:1fr;gap:12px;padding:22px}
}

/* product cards */
.f-prods{display:grid;gap:16px;align-items:start}
.f-prod{background:var(--white);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:grid;grid-template-columns:120px 1fr}
.f-prod-img{position:relative;display:block;background:var(--stone);padding:12px 8px;align-self:stretch}
.f-prod-img img{width:100%;height:100%;max-height:220px;object-fit:contain;margin-inline:auto}
.f-prod-img .xflag{top:8px;left:8px;font-size:11.5px;padding:6px 8px}
.f-prod-body{padding:16px;display:grid;gap:8px;align-content:start;min-width:0}
.f-prod h3{font:600 21px/1.15 var(--sans);letter-spacing:-.02em}
.f-prod h3 a{color:var(--ink);text-decoration:none}
.f-prod h3 a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.f-prod-for{font-size:15px;line-height:1.45;color:var(--ink)}
.f-chips{margin:2px 0 0;gap:6px}
.f-chips li{min-height:32px;padding:0 11px;font-size:13.5px}
.f-kkm{font-size:13px;color:var(--muted)}
.f-prod-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:4px}
.f-prod-buy .btn{min-height:44px}
.f-inci{margin-top:4px}
.f-inci .inci-body p{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
@media (min-width:560px){
  .f-prod{grid-template-columns:160px 1fr}
}
@media (min-width:760px){
  .f-prods{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .f-prods{grid-template-columns:repeat(4,1fr)}
  .f-prod{grid-template-columns:1fr}
  .f-prod-img{aspect-ratio:4/5;padding:16px}
  .f-prod-img img{max-height:none}
}

/* actives */
.f-actives{grid-template-columns:1fr}
.f-muted{font-weight:600;color:var(--muted)}
.f-in{font-size:13.5px;font-weight:600;color:var(--teal-deep)}
.f-actives .active p:not(.f-in){font-size:15.5px}
.f-actives .study-link{min-height:44px;margin-top:-6px}
@media (min-width:640px){.f-actives{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.f-actives{grid-template-columns:repeat(3,1fr);gap:16px}}

/* inside / not */
.f-io{display:grid;gap:16px}
.f-io-col{background:var(--white);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(18px,3vw,28px)}
.f-io-col h3{font:600 19px/1.3 var(--sans);margin-bottom:12px}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.f-list li{display:flex;align-items:flex-start;gap:10px;line-height:1.5;color:var(--muted);font-size:15.5px}
.f-list b{color:var(--ink);font-weight:600}
.f-list svg{flex:none;margin-top:2px;width:22px;height:22px;padding:3px;border-radius:50%}
.f-list-in svg{background:var(--mint);color:var(--teal)}
.f-list-out svg{background:var(--stone);color:var(--ink)}
@media (min-width:760px){.f-io{grid-template-columns:1fr 1fr}}

/* safety */
.f-safe{display:grid;gap:12px}
.f-safe-item{background:var(--white);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:18px;display:grid;gap:8px;align-content:start}
.f-safe-item h3{font:600 17px/1.3 var(--sans)}
.f-safe-item p{font-size:15px;line-height:1.5;color:var(--muted)}
.f-safe-item a{color:var(--teal);font-weight:600}
.f-kkm-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.f-kkm-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;color:var(--muted)}
.f-kkm-list b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:640px){.f-safe{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.f-safe{grid-template-columns:repeat(4,1fr)}}

/* closing strip */
.f-last{padding-top:0}
.f-ready{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;background:var(--mint);border-radius:var(--r);padding:clamp(22px,4vw,36px) clamp(20px,4vw,40px)}
.f-ready h2{font:600 clamp(22px,2.6vw,28px)/1.2 var(--sans);letter-spacing:-.015em;color:var(--teal-deep)}
.f-ready p{color:var(--teal-deep);margin-top:4px}
@media (max-width:480px){.f-ready-btn{width:100%}}

/* actives disclosure */
.f-discs{max-width:none}
.f-discs .f-actives .active{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}

/* equal-height cards: price row and ingredients line up across a row */
@media (min-width:760px){
  .f-prods{align-items:stretch}
  .f-prod{grid-template-rows:auto 1fr}
  .f-prod-body{display:flex;flex-direction:column}
  .f-prod-buy{margin-top:auto;padding-top:4px}
}
@media (min-width:760px) and (max-width:1099px){.f-prod{grid-template-rows:none}}