/* =====================================================================
   Don Lee Farms design system (2026-10-24)
   One shared layer that keeps every page on the same type scale,
   kicker, button, card and focus styles. Selectors are prefixed with
   "html body" so they win over each page's own inline styles.
   ===================================================================== */

/* ---- Tokens ---- */
:root{
  --dlf-h1:clamp(44px,6vw,84px);          /* inner-page titles */
  --dlf-h2:clamp(42px,5.6vw,80px);        /* major section titles */
  --dlf-h2-feature:clamp(38px,4.6vw,62px);/* split feature blocks */
  --dlf-h2-sub:clamp(30px,3.4vw,46px);    /* in-content section titles */
  --dlf-card-r:20px;
  --dlf-card-line:rgba(11,46,44,.10);
  --dlf-kicker-track:.3em;
  --dlf-btn-track:.14em;
}

/* ---- Headline polish (no orphans, balanced lines) ---- */
html body h1,html body h2,html body h3{text-wrap:balance;}
html body p,html body li,html body dd{text-wrap:pretty;}

/* ---- Tier 1: inner-page H1 ---- */
html body .cf h1,
html body .lineup h1,html body .lineup__head h1,
html body .pp-prods h1,html body .pp-hero h1,
html body .lp-head h1{font-size:var(--dlf-h1);line-height:.95;}

/* ---- Tier 2: major section H2 (the two-line "sec-head" titles) ---- */
html body .sec-head h2,html body .products .sec-head h2,html body .family h2{font-size:var(--dlf-h2);line-height:.95;}

/* ---- Tier 2b: split feature titles ---- */
html body .ing__title,html body .plant__title,html body .foldover__title,
html body .cu-why__title,html body .spotlight__body h2,html body .chef h2,html body .cu-sheet .cu-why__title{font-size:var(--dlf-h2-feature);line-height:.96;}
html body .chef h2{color:var(--teal-deep);}

/* ---- Tier 3: in-content section titles ---- */
html body .pp-buy h2,html body .pp-faq h2,html body .pp-feats h2,html body .pp-proof h2,
html body .pp-specs h2,html body .pp-contact__head h2,html body .pp-highlight__body h2,
html body .cu-lineup__head h2,html body .cu-faq__head h2,html body .cu-sheet > .container > h2,
html body .lp-section h2,html body .cf h2,html body .pd-rel__head h2{font-size:var(--dlf-h2-sub);line-height:1;}

/* ---- Card titles ---- */
html body .p-card__body h3{font-size:clamp(24px,2.2vw,30px);}
html body .b-card h3,html body .enjoy__card h3{font-size:24px;}
html body .b-card h3,html body .lp-section h3,html body .wrap h2{color:var(--teal-deep);}

/* ---- Kickers: one size, one tracking ---- */
html body .sec-head__kicker,html body .pp-kicker,html body .ing__kicker,html body .psearch__kicker,
html body .spotlight__kicker,html body .family__kicker,html body .foldover__kicker,html body .lineup__kicker,
html body .chef__kicker,html body .cta__kicker,html body .lp-head__kicker,html body .pp-jump__kicker,
html body .sa-kick,html body .bhero__kicker,html body .cf-crumb + .sec-head__kicker{
  font-size:12px;font-weight:700;letter-spacing:var(--dlf-kicker-track);text-transform:uppercase;}

/* ---- Buttons: one primary size, one compact size ---- */
html body .btn:not(.btn--big),html body .pp-btn,html body .sa-btn,html body .nf-btn,
html body .psearch__btn,html body .cu-btn,html body .snav__btn{
  font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:var(--dlf-btn-track);
  border-radius:999px;padding:15px 30px;line-height:1.1;text-transform:uppercase;}
html body .lcard__cta .pp-btn,html body .prod-modal__cta .pp-btn,
html body .spotlight__btns .pp-btn,html body .snav__btn{font-size:12px;padding:12px 24px;}
html body button,html body input,html body select,html body textarea{font-family:var(--font-body);}

/* ---- Cards: one radius, one hairline ---- */
html body .lcard,html body .pp-prodcard,html body .pd-rel__card,html body .pp-feat,
html body .cu-why__card,html body .sa-card,html body .b-card,html body .p-card,
html body .cf-press li,html body .sc-steps li{border-radius:var(--dlf-card-r);}
html body .b-card{border:1px solid var(--dlf-card-line);box-shadow:0 18px 40px -28px rgba(11,46,44,.35);}
html body .social__card{border:0;}
html body .lcard,html body .pp-feat:not(.pp-feats--dark .pp-feat){border-color:var(--dlf-card-line);}

/* ---- Interactive polish ---- */
html body a:focus-visible,html body button:focus-visible,html body summary:focus-visible,
html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px;}
html body ::selection{background:var(--yellow);color:var(--teal-deep);}
html body .faq__item summary{cursor:pointer;}

@media (prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* =====================================================================
   Mobile rhythm (2026-10-24): smaller logo, tighter header, even spacing
   ===================================================================== */
@media (max-width:900px){
  /* inner pages: header + logo */
  html body .snav{padding:8px 0;}
  html body .snav .snav__logo{height:112px;}
  html body .snav.is-scrolled .snav__logo{height:82px;}
  html body .cu-cine__in{padding-top:176px;}
  html body .sa-hero__inner{padding-top:156px;}
  html body:has(> .snav){padding-top:154px;}
  html body .pp-prods{padding-top:18px;}
  html body .lp-head{padding-top:14px;}
  html body:has(.cu-cine),html body:has(.sa-hero){padding-top:0;}
  /* homepage: header + logo */
  html body .nav{padding-top:8px;padding-bottom:8px;}html body .nav .nav__logo{height:112px;}
  html body .nav.is-scrolled .nav__logo{height:82px;}
}
@media (max-width:820px){
  html body .bhero{padding-top:164px;}
}
@media (max-width:760px){
  html body .sa-hero__inner{padding-top:150px;}
}
@media (max-width:600px){
  /* type: keep headlines bold but in proportion on phones */
  html body .cf h1,html body .lineup h1,html body .lineup__head h1,html body .pp-prods h1,
  html body .pp-hero h1,html body .lp-head h1{font-size:clamp(38px,11vw,48px);}
  html body .pd-title{font-size:clamp(34px,9.6vw,42px);}
  html body .sec-head h2,html body .products .sec-head h2,html body .family h2{font-size:clamp(38px,11vw,50px);}
  html body .ing__title,html body .plant__title,html body .foldover__title,html body .cu-why__title,
  html body .spotlight__body h2,html body .chef h2{font-size:clamp(34px,9.6vw,42px);}
  html body .pp-buy h2,html body .pp-faq h2,html body .pp-feats h2,html body .pp-proof h2,
  html body .pp-specs h2,html body .pp-contact__head h2,html body .pp-highlight__body h2,
  html body .cu-lineup__head h2,html body .cu-faq__head h2,html body .lp-section h2,
  html body .cf h2,html body .pd-rel__head h2{font-size:clamp(28px,8vw,34px);}
  /* kickers: less tracking so they stay on one line */
  html body .sec-head__kicker,html body .pp-kicker,html body .ing__kicker,html body .psearch__kicker,
  html body .spotlight__kicker,html body .family__kicker,html body .foldover__kicker,html body .lineup__kicker,
  html body .chef__kicker,html body .cta__kicker,html body .lp-head__kicker,html body .pp-jump__kicker,
  html body .sa-kick,html body .bhero__kicker{font-size:11px;letter-spacing:.2em;}
  /* body copy + section spacing */
  html body .sec-head{margin-bottom:26px;gap:12px;}
  html body .sec-head p,html body .cf-lede,html body .pd-lede{font-size:16px;line-height:1.6;}
}

/* Anchor landing on inner pages: clear the fixed header + rip */
html{scroll-padding-top:150px;}
@media (max-width:900px){
  html{scroll-padding-top:124px;}
  /* retailer pages: tighter product art so the logo + title come up sooner */
  html body .sc-hero{gap:10px;}
  html body .sc-hero__art{max-width:300px;aspect-ratio:5/4;margin:-6px auto -8px;}
}

/* ---- Product packs: soft contact shadow so each bag/box sits on the surface (2026-10-24) ---- */
html body .pp-prodcard__img{padding-bottom:clamp(14px,2.2vw,22px);}
html body .pp-prodcard__img::before{content:"";position:absolute;left:22%;right:22%;bottom:5%;height:20px;z-index:1;
  background:radial-gradient(closest-side,rgba(11,46,44,.45),rgba(11,46,44,0));pointer-events:none;}
html body .pp-prodcard__img img{z-index:2;object-position:center bottom;filter:drop-shadow(0 6px 8px rgba(11,46,44,.16));}

html body .pd-hero{position:relative;}
html body .pd-hero::before{content:"";position:absolute;left:18%;right:18%;bottom:calc(clamp(22px,7%,56px) - 16px);height:32px;z-index:1;
  background:radial-gradient(closest-side,rgba(11,46,44,.5),rgba(11,46,44,0));pointer-events:none;}
html body .pd-hero img{position:relative;z-index:2;object-position:center bottom;filter:drop-shadow(0 8px 10px rgba(11,46,44,.18));}

html body .lcard__stage,html body .sc-cards .lcard__media a{position:relative;display:block;background:#FAF9F7;border-radius:12px;}
html body .lcard__stage::before,html body .sc-cards .lcard__media a::before{content:"";position:absolute;left:24%;right:24%;bottom:6%;height:18px;z-index:2;
  background:radial-gradient(closest-side,rgba(11,46,44,.42),rgba(11,46,44,0));pointer-events:none;}
html body .lcard__img{object-position:center bottom;}
html body .lcard__stage .lcard__img,html body .sc-cards .lcard__img{position:relative;z-index:3;background:transparent!important;filter:drop-shadow(0 6px 8px rgba(11,46,44,.14));}

html body .pd-rel__card{position:relative;}
html body .pd-rel__grid .pd-rel__card img{object-position:center bottom;filter:drop-shadow(0 6px 8px rgba(11,46,44,.16));}

/* product popup: same "set down" shadow under the pack */
html body .prod-modal__media{padding-bottom:34px;}
html body .prod-modal__main{filter:drop-shadow(0 22px 14px rgba(11,46,44,.26)) drop-shadow(0 4px 6px rgba(11,46,44,.14));}
html body .prod-modal__thumb img{filter:drop-shadow(0 3px 3px rgba(11,46,44,.18));}

/* shadows follow each pack's full width (wide boxes + tall bags alike) */
html body .pp-prodcard__img::before,html body .pd-hero::before,
html body .lcard__stage::before,html body .sc-cards .lcard__media a::before{display:none;}
html body .pp-prodcard__img img,html body .lcard__stage .lcard__img,html body .sc-cards .lcard__img,
html body .pd-rel__grid .pd-rel__card img{filter:drop-shadow(0 16px 11px rgba(11,46,44,.24)) drop-shadow(0 4px 5px rgba(11,46,44,.14));}
html body .pd-hero img{filter:drop-shadow(0 24px 16px rgba(11,46,44,.26)) drop-shadow(0 5px 6px rgba(11,46,44,.14));}