/* ==============================================================
   HERITAGE LABS USA — v5 "Heritage Modern"
   GLPeptides-caliber execution: light, calm, rounded, trustworthy.
   Poppins headings · Inter body · navy pills · red reserved accents
   ============================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2')}

:root{
  /* canvas + surfaces */
  --bg:        #FAF8F4;    /* soft warm ivory canvas — premium heritage feel, not stark white */
  --bg-2:      #F1EDE4;    /* warm sand mist for alternating sections */
  --card:      #FFFFFF;    /* cards stay crisp white so they lift off the canvas */
  --card-hi:   #FBFAF7;
  --tile:      #F0EDE6;    /* product image areas — warm to match the ivory canvas */
  --hairline:  #EAE7DF;
  --hairline-2:#DED9CE;

  /* brand */
  --navy:      #1A2C83;    /* heritage label navy — primary */
  --navy-deep: #14226A;
  --navy-ink:  #0D1126;    /* headings */
  --red:       #D32F2D;    /* reserved accent */
  --red-deep:  #B9251F;

  /* text */
  --t1: #0D1126;
  --t2: #3E455C;
  --t3: #6C7389;
  --stock: #1E9E5A;

  --head: 'Poppins', 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --display: var(--head); --mono: var(--body);

  --maxw: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --r: 16px; --r-sm: 10px; --r-lg: 22px; --pill: 999px;
  --hl-btn-shadow:       0 4px 14px rgba(211,47,45,.38);
  --hl-btn-shadow-hover: 0 8px 20px rgba(211,47,45,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-1: 0 1px 2px rgba(13,17,38,.05), 0 4px 14px rgba(13,17,38,.05);
  --shadow-2: 0 10px 32px rgba(13,17,38,.1);
  --ring: 0 0 0 3px rgba(26,44,131,.22);
  --glow-text: none;

  /* legacy aliases so existing page styles resolve into v5 */
  --white:#fff; --light:var(--bg-2); --text:var(--t2); --text-2:var(--t3);
  --on-dark:#fff; --on-dark-2:rgba(255,255,255,.82); --on-dark-3:rgba(255,255,255,.6);
  --line:var(--hairline); --line-2:var(--hairline-2); --glass-line:var(--hairline-2);
  --paper:var(--card); --paper-2:var(--bg-2); --ink:var(--navy-ink); --ink-1:var(--t1); --ink-2:var(--t2); --ink-3:var(--t3);
  --royal:var(--navy); --royal-hi:#3D55C9; --red-hi:var(--red-deep);
  --navy-700:var(--navy-deep); --mist:var(--bg-2); --cloud:var(--tile);
  --rule:var(--hairline-2); --rule-soft:var(--hairline); --rule-faint:var(--hairline); --rule-dark:rgba(255,255,255,.16);
  --radius:var(--r); --radius-sm:var(--r-sm);
  --grad-red:none; --grad-red-pill:none; --grad-royal:none; --grad-glass:none;
  --shadow-red:none; --shadow-royal:none; --shadow-glass:var(--shadow-1);
  --shadow-sm:var(--shadow-1); --shadow-md:var(--shadow-1); --shadow-lg:var(--shadow-2); --shadow-card:var(--shadow-1);
  --red-700:var(--red-deep); --red-900:#8C1A16; --red-lo:var(--red-deep); --star:var(--hairline-2);
  --ink-soft:var(--bg-2); --ink-80:var(--card-hi); --bg-old:#0A0E1C;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--t2);
  font-family:var(--body); font-size:15.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--navy); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
h1,h2,h3,h4{ font-family:var(--head); color:var(--t1); margin:0; line-height:1.14; font-weight:700; letter-spacing:-.01em; text-transform:none; }
p{ margin:0 0 1em; }
::selection{ background:var(--navy); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.center{ text-align:center; }
.muted{ color:var(--t3); }
.hide{ display:none !important; }

/* eyebrow — small caps, red, quiet */
.eyebrow{
  font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--red); display:inline-block;
}

/* ============ Buttons — pills ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:600; text-transform:none;
  letter-spacing:0; font-size:14.5px; line-height:1;
  padding:13px 24px; border:1.5px solid transparent; border-radius:var(--pill);
  transition:transform .15s var(--ease), background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space:nowrap; color:#fff; background:var(--navy);
}
.btn:active{ transform:translateY(1px); }
.btn-red{ background:var(--red); }               /* RWB: red = action */
.btn-red:hover{ background:var(--red-deep); transform:translateY(-1px); box-shadow:0 10px 32px rgba(211,47,45,.28); }
.btn-navy{ background:var(--navy); }
.btn-navy:hover{ background:var(--navy-deep); transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn-accent{ background:var(--red); }
.btn-accent:hover{ background:var(--red-deep); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--t1); border-color:var(--hairline-2); }
.btn-ghost:hover{ border-color:var(--navy); color:var(--navy); }
.btn-ghost.on-light{ background:#fff; color:var(--t1); border-color:var(--hairline-2); }
.btn-ghost.on-light:hover{ border-color:var(--navy); color:var(--navy); }
.btn-ghost.on-dark{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost.on-dark:hover{ background:rgba(255,255,255,.2); }
.btn-lg{ padding:15px 30px; font-size:15.5px; }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-block{ width:100%; }

/* ============ RWB flag ribbon ============ */
.rwb-bar{ height:4px; background:linear-gradient(90deg, var(--red) 0 12%, #fff 50%, var(--navy) 88% 100%); border-bottom:1px solid var(--hairline); }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; }
/* real miniature US flag: red/white stripes + navy canton with a star field */
.eyebrow::before{ content:""; width:22px; height:14px; border-radius:1.5px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Crect width='22' height='14' fill='%23ffffff'/%3E%3Cg fill='%23D32F2D'%3E%3Crect width='22' height='2' y='0'/%3E%3Crect width='22' height='2' y='4'/%3E%3Crect width='22' height='2' y='8'/%3E%3Crect width='22' height='2' y='12'/%3E%3C/g%3E%3Crect width='9' height='8' fill='%231A2C83'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='2.2' cy='2' r='.85'/%3E%3Ccircle cx='4.5' cy='2' r='.85'/%3E%3Ccircle cx='6.8' cy='2' r='.85'/%3E%3Ccircle cx='3.3' cy='4' r='.85'/%3E%3Ccircle cx='5.6' cy='4' r='.85'/%3E%3Ccircle cx='2.2' cy='6' r='.85'/%3E%3Ccircle cx='4.5' cy='6' r='.85'/%3E%3Ccircle cx='6.8' cy='6' r='.85'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  box-shadow:0 0 0 1px rgba(120,132,168,.55); }

/* ============ Chrome: trust ticker + minimal header ============ */
.util,.pills,.nav{ display:none; }
.announce{ display:none; }
.ticker2{
  background:var(--bg-2); border-bottom:1px solid var(--hairline);
  overflow:hidden; padding:8px 0;
}
.ticker2 .trk{ display:flex; width:max-content; animation:tick2 40s linear infinite; align-items:center; }
.ticker2 span{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:var(--navy); padding:0 18px;
}
.ticker2 span svg{ width:14px; height:14px; }
.ticker2 span:nth-of-type(odd) svg{ color:var(--red); }
.ticker2 span:nth-of-type(even) svg{ color:var(--navy); }
.ticker2 i{ font-style:normal; color:var(--hairline-2); font-size:9px; }
@keyframes tick2{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.hdr{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline); box-shadow:none;
}
.hdr-main{ display:flex; align-items:center; gap:10px; min-height:66px; }
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand img{ height:42px; width:auto; filter:none; }
.brand .vet-tag{ display:none; }
.hdr-nav{ display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.hdr-nav a.navlink{
  display:inline-flex; align-items:center; gap:6px; padding:9px 9px; border-radius:var(--pill); white-space:nowrap;
  color:var(--t2); font-family:var(--body); text-transform:none; letter-spacing:0;
  font-weight:600; font-size:14.5px; position:relative; transition:color .14s, background .14s;
}
.hdr-nav a.navlink:hover{ color:var(--t1); background:var(--bg-2); }
.hdr-nav a.navlink.active{ color:var(--navy); background:#EDF0FA; box-shadow:none; }
.hdr-actions{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.icon-btn{
  position:relative; height:40px; min-width:40px; padding:0 9px; border:none; background:transparent;
  color:var(--t2); display:inline-flex; align-items:center; gap:8px; border-radius:var(--pill);
  font-family:var(--body); font-weight:600; font-size:13px; transition:.14s;
}
.icon-btn:hover{ color:var(--t1); background:var(--bg-2); }
/* persistent header search bar (desktop) */
.hdr-search{
  display:flex; align-items:center; gap:9px; flex:0 1 190px; min-width:126px;
  height:41px; padding:0 16px; background:var(--bg-2);
  border:1.5px solid var(--hairline-2); border-radius:var(--pill);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.hdr-search:focus-within{ border-color:var(--navy); box-shadow:var(--ring); background:#fff; }
.hdr-search svg{ width:16px; height:16px; color:var(--t3); flex:0 0 auto; }
.hdr-search input{
  border:none; background:transparent; flex:1; min-width:0;
  font-family:var(--body); font-size:13.5px; color:var(--t1); padding:0;
}
.hdr-search input::placeholder{ color:var(--t3); }
.hdr-search input:focus{ outline:none; }
.search-toggle{ display:none; }
@media(max-width:1460px){
  .hdr-nav a.navlink{ padding:9px 8px; font-size:13.5px; }
  .hdr-search{ flex:0 1 170px; min-width:118px; }
}
@media(max-width:1279px){ .hdr-search{ display:none; } .search-toggle{ display:inline-flex; }
  .hdr-nav a.navlink{ padding:9px 8px; font-size:13px; } }
.verify-pill{
  display:inline-flex; align-items:center; margin-left:8px; padding:9px 18px; border-radius:var(--pill);
  border:1.5px solid rgba(211,47,45,.4); color:var(--red); font-weight:700; font-size:13.5px; transition:.14s;
}
.verify-pill:hover{ border-color:var(--red); background:#FDEEED; }
.cart-count{
  position:absolute; top:0; right:0; background:var(--red); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:grid; place-items:center; padding:0 4px; line-height:1;
}
.burger{ display:none; }
.has-menu{ position:relative; }
.has-menu > .navlink .chev{ transition:transform .15s; }
.has-menu:hover > .navlink .chev{ transform:rotate(180deg); }
.menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:256px;
  background:#fff; border:1px solid var(--hairline); border-radius:14px;
  box-shadow:var(--shadow-2); padding:6px; opacity:0; visibility:hidden;
  transition:.15s var(--ease); z-index:70;
}
.has-menu:hover .menu{ opacity:1; visibility:visible; transform:translate(-50%,4px); }
.menu a{ display:block; padding:10px 13px; border-radius:10px; color:var(--t2); font-size:14px; }
.menu a:hover{ background:var(--bg-2); color:var(--t1); }
.menu a b{ display:block; font-family:var(--body); font-weight:600; color:var(--t1); font-size:14px; letter-spacing:0; text-transform:none; }
.menu a span{ font-size:12.5px; color:var(--t3); }
.search-row{ border-top:1px solid var(--hairline); background:#fff; display:none; }
.search-row.on{ display:block; }
.search{ position:relative; max-width:620px; margin:0 auto; padding:12px var(--pad); }
.search input{
  width:100%; height:46px; border:1.5px solid var(--hairline-2); border-radius:var(--pill); background:#fff;
  padding:0 54px 0 20px; font-family:var(--body); font-size:16px; color:var(--t1);
}
.search input::placeholder{ color:var(--t3); }
.search input:focus{ outline:none; border-color:var(--navy); box-shadow:var(--ring); }
.search .go{
  position:absolute; right:calc(var(--pad) + 5px); top:16px; height:38px; width:38px; border:none; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center;
}
.search .go:hover{ background:var(--navy-deep); }

/* ============ Sections ============ */
section{ position:relative; }
.sec{ padding:clamp(40px,5vw,68px) 0; }
.sec-tight{ padding:clamp(26px,3.4vw,44px) 0; }
.sec.dark{ background:transparent; color:var(--t2); }
.sec.dark h1,.sec.dark h2,.sec.dark h3{ color:var(--t1); text-shadow:none; }
.sec.dark .sec-head p{ color:var(--t3); }
.sec.mist{ background:var(--bg-2); }
.sec.warm{ background:#FBF4F3; }
.sec-head{ margin:0 0 clamp(20px,2.6vw,32px); text-align:left; max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.sec-head > div{ max-width:640px; }
.sec-head h2{ font-size:clamp(24px,2.8vw,32px); margin:.24em 0 .25em; }
.sec-head p{ font-size:14.5px; color:var(--t3); margin:0; }
.sec-head .idx{ display:none; }
.sec-head .view-all{
  display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:var(--pill);
  background:var(--navy); color:#fff; font-weight:600; font-size:13.5px; border-bottom:none; white-space:nowrap;
  transition:.14s;
}
.sec-head .view-all:hover{ background:var(--navy-deep); color:#fff; }
.sec-head.center{ display:block; text-align:center; max-width:660px; margin:0 auto clamp(22px,3vw,34px); }
.sec-head.center p{ margin:.5em auto 0; }

/* ============ Hero — rounded image card ============ */
.panel{
  position:relative; color:#fff; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; min-height:clamp(400px,52vh,540px);
  border-radius:var(--r-lg); margin-inline:auto; max-width:calc(var(--maxw) - 0px);
}
.hero-shell{ padding:18px var(--pad) 0; max-width:calc(var(--maxw) + 2*var(--pad)); margin:0 auto; }
.panel.hero-xl{ min-height:clamp(460px,60vh,600px); }
.panel .bg{ position:absolute; inset:0; z-index:-2; }
.panel .bg img{ width:100%; height:100%; object-fit:cover; }
.panel .scrim{ position:absolute; inset:0; z-index:-1; opacity:1; visibility:visible;
  background:linear-gradient(90deg, rgba(7,10,24,.82) 0%, rgba(7,10,24,.55) 40%, rgba(7,10,24,.18) 75%, rgba(7,10,24,.1) 100%); }
.panel.flip .scrim{ background:linear-gradient(270deg, rgba(7,10,24,.82) 0%, rgba(7,10,24,.55) 40%, rgba(7,10,24,.18) 75%, rgba(7,10,24,.1) 100%); }
.panel::after{ content:none; }
.hero-shell .panel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:1; background:linear-gradient(90deg, var(--red) 0 12%, #fff 50%, var(--navy) 88% 100%); }
.panel .wrap{ width:100%; padding-inline:clamp(22px,3.4vw,48px); }
.panel h1{ font-family:var(--head); font-size:clamp(34px,4.6vw,58px); color:#fff; letter-spacing:-.015em; margin:.18em 0 .22em; line-height:1.06; text-transform:none; }
.panel h2{ font-family:var(--head); font-size:clamp(26px,3.2vw,40px); color:#fff; letter-spacing:-.01em; margin:.18em 0 .22em; text-transform:none; }
.panel .sub{ font-size:15.5px; color:rgba(255,255,255,.85); margin-bottom:18px; max-width:460px; }
.panel .eyebrow{ color:#FF8A85; }
.panel .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

/* ============ Trust strip → clean cards row ============ */
.trust-strip{ background:transparent; border:none; padding:0; }
.trust-strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.trust-strip .cell{
  display:flex; align-items:flex-start; gap:12px; padding:18px; color:var(--t2);
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r); box-shadow:var(--shadow-1);
}
.trust-strip .cell:first-child{ padding-left:18px; }
.trust-strip .ico{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:#FDEEED; border:none; color:var(--red); box-shadow:none;
}
.trust-strip .cell:nth-child(even) .ico{ background:#EDF0FA; color:var(--navy); }
.trust-strip .cell b{ display:block; font-family:var(--body); font-weight:700; font-size:14px; color:var(--t1); letter-spacing:0; text-transform:none; }
.trust-strip .cell span{ font-size:12.5px; color:var(--t3); }
@media(max-width:1020px){ .trust-strip .wrap{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .trust-strip .wrap{ grid-template-columns:1fr; } .trust-strip .cell{ border-bottom:1px solid var(--hairline); } }

/* ============ Page hero (interior) — clean light ============ */
.page-hero{ position:relative; color:var(--t1); overflow:visible; isolation:auto; background:transparent; border:none; }
.page-hero::before, .page-hero::after{ content:none; display:none; }
.page-hero .wrap{ position:relative; padding-top:clamp(22px,3vw,36px); padding-bottom:clamp(6px,1vw,10px); }
.page-hero h1{ color:var(--t1); font-size:clamp(28px,3.6vw,42px); letter-spacing:-.015em; text-shadow:none; text-transform:none; font-family:var(--head); }
.page-hero p{ color:var(--t3); font-size:15px; max-width:640px; margin:10px 0 0; text-shadow:none;
  /* No orphan words. The 640px cap was dropping a lone trailing word onto
     its own line ("...Certificate of / Analysis." on /shop). balance evens
     the line lengths so the last line is never a single word. */
  text-wrap:balance; }
/* The hero already leaves room under the subhead; .sec's 88px top padding
   stacked on top of that left a dead band between the copy and the filter
   pills. Scoped to a section directly following a hero. */
.page-hero + .sec{ padding-top:28px; }
.page-hero .crumb{ color:var(--t3); padding:0 0 10px !important; }

.crumb{ font-size:13px; color:var(--t3); padding:14px 0; }
.crumb a:hover{ color:var(--navy); }
.crumb .sep{ margin:0 7px; color:var(--hairline-2); }

/* ============ Product cards — GLP style ============ */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:16px; border:none; }
.prod-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.prod-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.card{
  position:relative; background:#fff; border:1px solid var(--hairline); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease), box-shadow .18s, border-color .18s; padding:10px;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--hairline-2); background:#fff; }
.card .thumb{ position:relative; aspect-ratio:1/.92; background:var(--tile); overflow:hidden; display:block; border-radius:calc(var(--r) - 6px); }
.card .thumb img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:calc(100% - 60px); max-height:calc(100% - 30px); width:auto; height:auto;
  filter:drop-shadow(0 12px 18px rgba(13,17,38,.16));
  transition:transform .28s var(--ease);
}
.card:hover .thumb img{ transform:translate(-50%,-52%) scale(1.04); }
.tag{
  position:absolute; top:10px; left:10px; z-index:2; font-family:var(--body); text-transform:none;
  letter-spacing:0; font-size:11px; font-weight:700; padding:5px 11px; color:#fff; border-radius:var(--pill);
  background:var(--red); box-shadow:none;
}
.tag.sellers{ background:var(--red); }
.tag.deal{ background:var(--navy); }
.tag.new{ background:var(--stock); }
.tag.glp{ background:var(--navy); }
.card .body{ padding:12px 8px 8px; display:flex; flex-direction:column; flex:1; border:none; }
.card .cat{ font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--t3); font-weight:700; margin-bottom:3px; }
.card .name{ font-family:var(--body); text-transform:none; letter-spacing:0; font-size:15px; font-weight:600; color:var(--t1); line-height:1.3; }
.card .blurb{ display:none; }
.card .foot{ margin-top:auto; padding-top:8px; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.card .price{ font-family:var(--body); font-weight:700; font-size:16.5px; color:var(--navy); }
.card .price .cur{ font-size:13px; color:var(--t3); margin-right:1px; }
.card .stock{ display:none; }
.card .add{
  height:40px; width:100%; border:none; border-radius:var(--pill);
  background:var(--red); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--body); font-weight:600; font-size:13.5px; box-shadow:var(--hl-btn-shadow); transition:.14s;
}
.card .add::after{ content:"Add to Cart"; }
.card .add svg{ width:14px; height:14px; }
.card .add:hover{ background:var(--red-deep); box-shadow:var(--hl-btn-shadow-hover); transform:none; }

/* ============ Split ============ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4.4vw,56px); align-items:center; }
.split .media{ border:none; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:1/1; }
.split h2{ font-size:clamp(24px,2.8vw,32px); margin:.2em 0 .3em; }
.split .media picture{ display:contents; }
.split .media img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:840px){ .split{ grid-template-columns:1fr; } .split .media{ aspect-ratio:4/3; } }

.feat-list{ display:grid; gap:12px; margin-top:22px; border:none; }
.feat{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--hairline); border-radius:var(--r); background:#fff; box-shadow:var(--shadow-1); }
.sec:not(.dark) .feat{ background:#fff; border:1px solid var(--hairline); }
.feat .ico{
  width:36px; height:36px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  background:#EDF0FA; border:none; color:var(--navy);
  font-family:var(--body); font-weight:700; font-size:12.5px; min-width:36px; padding:0;
}
.sec:not(.dark) .feat .ico{ background:#EDF0FA; border:none; color:var(--navy); }
.feat .ico::before{ content:attr(data-n); }
.feat b{ font-family:var(--body); text-transform:none; letter-spacing:0; font-size:14.5px; color:var(--t1); display:block; margin-bottom:2px; font-weight:700; }
.feat p{ margin:0; font-size:13.5px; color:var(--t3); max-width:520px; }
.sec:not(.dark) .feat b{ color:var(--t1); } .sec:not(.dark) .feat p{ color:var(--t3); }

/* ============ Compare band (navy rounded) ============ */
.compare-band{
  background:linear-gradient(120deg,#131B45 0%, #0E1330 100%), #131B45;
  border-radius:var(--r-lg); color:#fff; overflow:hidden; position:relative;
}
.compare-band::before{ content:""; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 8l2.4 5 5.6.6-4.2 3.7 1.2 5.5-5-2.9-5 2.9 1.2-5.5-4.2-3.7 5.6-.6z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"); pointer-events:none; }
.compare-band::after{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--red) 0 12%, #fff 50%, var(--navy) 88% 100%); }
.compare-band .in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,56px); padding:clamp(28px,4vw,52px); align-items:center; }
.compare-band h2{ color:#fff; font-size:clamp(24px,3vw,34px); margin:.2em 0 .3em; }
.compare-band .lead{ color:rgba(255,255,255,.7); font-size:14.5px; max-width:380px; }
.compare-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:8px 18px; }
.compare-row{ display:grid; grid-template-columns:1fr 92px 110px; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.88); }
.compare-row:last-child{ border-bottom:none; }
.compare-row .ok{ display:grid; place-items:center; }
.compare-row .ok i{ width:26px; height:26px; border-radius:50%; background:#2AA968; display:grid; place-items:center; color:#fff; font-style:normal; }
.compare-row .no{ text-align:center; color:rgba(255,255,255,.45); font-size:12px; }
.compare-head{ display:grid; grid-template-columns:1fr 92px 110px; gap:12px; padding:12px 0 4px; font-size:11.5px; letter-spacing:.6px; color:rgba(255,255,255,.55); font-weight:600; }
.compare-head .c1{ text-align:center; background:rgba(255,255,255,.12); border-radius:999px; padding:5px 8px; color:#fff; }
.compare-head .c2{ text-align:center; }
@media(max-width:840px){ .compare-band .in{ grid-template-columns:1fr; } }
@media(max-width:600px){
  .compare-row, .compare-head{ grid-template-columns:1fr 44px 74px; gap:8px; font-size:12.5px; }
  .compare-row .ok i{ width:22px; height:22px; }
  .compare-row .no{ font-size:11px; }
  .compare-head .c1{ padding:4px 4px; font-size:10.5px; }
  .compare-card{ padding:6px 12px; }
}

/* ============ Programs — clean cards ============ */
.programs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border:none; background:transparent; overflow:visible; border-radius:0; }
.program{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r); box-shadow:var(--shadow-1);
  padding:28px 24px 26px; display:flex; flex-direction:column; transition:transform .16s var(--ease), box-shadow .16s;
  position:relative; overflow:hidden;
}
.program::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--red) 0 12%, #fff 50%, var(--navy) 88% 100%); }
.program:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); background:#fff; }
.program h3{ font-family:var(--body); text-transform:none; font-size:16.5px; color:var(--t1); letter-spacing:0; font-weight:700; }
.program .off{ font-family:var(--head); color:var(--red); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:8px 0 10px; text-transform:none; line-height:1.1; }
.program p{ font-size:13.5px; color:var(--t3); flex:1; }
.program a{
  margin-top:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:var(--body); text-transform:none; letter-spacing:0; font-size:14px; font-weight:600;
  color:#fff; background:var(--navy); border:none; border-radius:var(--pill); padding:12px 18px; box-shadow:none;
}
.program a:hover{ background:var(--navy-deep); color:#fff; }
@media(max-width:860px){ .programs{ grid-template-columns:1fr; } .program{ border-bottom:1px solid var(--hairline); } }

/* ============ Specimen COA ============ */
.specimen{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r); padding:24px 26px; position:relative;
  color:var(--t2); font-size:13.5px; box-shadow:var(--shadow-2);
}
.specimen .doc-h{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--navy); padding-bottom:12px; margin-bottom:12px; }
.specimen .doc-h b{ font-family:var(--head); font-size:16px; color:var(--t1); letter-spacing:0; text-transform:none; }
.specimen .doc-h span{ font-size:10.5px; letter-spacing:1.6px; color:var(--t3); font-weight:700; }
.specimen .row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hairline); }
.specimen .row .v{ color:var(--t1); font-weight:600; }
.specimen .stamp{
  position:absolute; right:20px; bottom:40px; transform:rotate(-11deg);
  border:2.5px solid var(--stock); color:var(--stock); font-family:var(--head); text-transform:uppercase;
  font-size:16px; letter-spacing:3px; padding:4px 12px; opacity:.9; border-radius:8px; font-weight:700;
}
.specimen .chrom{ display:flex; align-items:flex-end; gap:3px; height:60px; margin-top:12px; border-bottom:1px solid var(--hairline); padding-bottom:2px; }
.specimen .chrom i{ flex:1; background:rgba(26,44,131,.2); border-radius:2px 2px 0 0; }
.specimen .chrom i.peak{ background:var(--red); }

/* ============ FAQ ============ */
.faq{ max-width:none; margin:0; display:grid; gap:10px; border:none; }
.qa{ background:#fff; border:1px solid var(--hairline); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-1); transition:box-shadow .16s; }
.qa[open]{ box-shadow:var(--shadow-2); }
.qa summary{
  list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:15px; color:var(--t1); font-weight:600;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .plus{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-2); border:none; color:var(--navy); font-size:16px; margin-left:auto; line-height:1;
  transition:transform .18s, background .18s, color .18s;
}
.qa[open] summary .plus{ transform:rotate(45deg); background:var(--navy); color:#fff; }
.qa .a{ padding:0 20px 18px; color:var(--t2); font-size:14px; }
.qa .a a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.sec.dark .qa{ background:#fff; border-color:var(--hairline); }
.sec.dark .qa summary{ color:var(--t1); } .sec.dark .qa .a{ color:var(--t2); }

/* ============ COA band ============ */
.coa-band{ position:relative; color:#fff; border-radius:var(--r-lg); overflow:hidden; isolation:isolate; background:linear-gradient(120deg,#131B45 0%, #0E1330 100%); border:none; box-shadow:var(--shadow-2); }
.coa-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 150% at 92% 8%, rgba(211,47,45,.22), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 8l2.4 5 5.6.6-4.2 3.7 1.2 5.5-5-2.9-5 2.9 1.2-5.5-4.2-3.7 5.6-.6z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"); display:block; }
.coa-band::after{ content:""; position:absolute; top:0; left:0; right:0; height:5px; z-index:1; background:linear-gradient(90deg, var(--red) 0 12%, #fff 50%, var(--navy) 88% 100%); }
.coa-band .in{ position:relative; padding:clamp(26px,3.6vw,42px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.coa-band h2{ color:#fff; font-size:clamp(22px,2.6vw,30px); text-shadow:none; }
.coa-band p{ color:rgba(255,255,255,.72); margin:.5em 0 0; max-width:520px; font-size:14px; }
.coa-band .eyebrow{ color:#FF8A85; }
.coa-band .btn-red, .coa-band .btn-navy{ background:#fff; color:var(--navy-ink); }
.coa-band .btn-red:hover, .coa-band .btn-navy:hover{ background:#EDF0FA; }

/* ============ Footer ============ */
.ft{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 8l2.4 5 5.6.6-4.2 3.7 1.2 5.5-5-2.9-5 2.9 1.2-5.5-4.2-3.7 5.6-.6z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(180deg,#16246E 0%, #101A52 100%); color:rgba(255,255,255,.72); padding-top:clamp(36px,4.4vw,56px); border-top:4px solid var(--red); }
.ft-mark,.ft-star{ display:none; }
.ft-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:34px; padding:0 0 34px; border-bottom:1px solid rgba(255,255,255,.16); }
.ft-brand img{ height:46px; margin-bottom:14px; filter:brightness(0) invert(1); opacity:1; }
.ft-brand p{ font-size:13.5px; color:rgba(255,255,255,.6); max-width:300px; }
.ft h4{ color:#fff; text-transform:none; font-size:14px; letter-spacing:0; margin-bottom:14px; font-family:var(--body); font-weight:700; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ft ul a{ color:rgba(255,255,255,.75); font-size:13.5px; transition:color .14s; }
.ft ul a:hover{ color:#FF8A85; }
.ft-contact div{ margin-bottom:12px; font-size:13.5px; color:rgba(255,255,255,.72); }
.ft-contact b{ display:block; color:#fff; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:12.5px; margin-bottom:2px; font-weight:700; }
.ft-contact a{ color:#FF8A85; font-weight:600; }
.ft-ship{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:13px 15px; margin-top:12px; font-size:12px; color:rgba(255,255,255,.65); box-shadow:none; }
.ft-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 0 26px; font-size:12px; color:rgba(255,255,255,.55); }
.ft-bottom .disc{ max-width:840px; line-height:1.7; }
.ft-bottom .disc b{ color:#fff !important; }
.ft-bottom .disc a{ color:#FF8A85 !important; }
.ft-coord{ display:none; }
@media(max-width:900px){ .ft-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .ft-top{ grid-template-columns:1fr; } }

/* about stats rhythm */
.stat-row .stat:nth-child(even) .big{ color:var(--red) !important; }

/* ============ USA badge ============ */
.usa-badge{
  position:absolute; top:16px; right:16px; z-index:2; width:64px; height:64px; border-radius:50%;
  background:#fff; border:2px solid var(--navy); display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow-1); transform:rotate(6deg);
}
.usa-badge .st{ color:var(--red); font-size:13px; line-height:1.1; }
.usa-badge b{ font-family:var(--head); font-weight:700; font-size:12px; color:var(--navy); letter-spacing:.5px; line-height:1.1; }
.usa-badge small{ font-size:6.5px; letter-spacing:.8px; color:var(--t3); text-transform:uppercase; font-weight:700; }

/* ============ Footer star divider + closing ribbon ============ */
.ft-stars{ display:flex; align-items:center; justify-content:center; padding:18px 0 0; color:rgba(255,255,255,.4); font-size:12px; letter-spacing:8px; }
.rwb-bottom{ height:6px; background:linear-gradient(90deg, var(--red) 0 12%, #fff 50%, var(--navy) 88% 100%); }

/* ============ Cart drawer ============ */
.scrim{ position:fixed; inset:0; background:rgba(13,17,38,.42); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.22s; z-index:90; }
.scrim.on{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,93vw); background:#fff; z-index:100;
  transform:translateX(100%); transition:transform .26s var(--ease); display:flex; flex-direction:column;
  border-left:1px solid var(--hairline); box-shadow:-18px 0 60px rgba(13,17,38,.18);
}
.drawer.on{ transform:none; }
.drawer .dh{ padding:0 20px; min-height:60px; display:flex; align-items:center; justify-content:space-between; background:#fff; color:var(--t1); border-bottom:1px solid var(--hairline); }
.drawer .dh h3{ font-family:var(--head); text-transform:none; font-size:17px; color:var(--t1); letter-spacing:0; }
.drawer .dh .x{ border:1px solid var(--hairline-2); background:#fff; width:38px; height:38px; border-radius:50%; font-size:14px; color:var(--t2); }
.drawer .dh .x:hover{ background:var(--bg-2); color:var(--t1); }
.drawer .items{ flex:1; overflow:auto; padding:6px 20px; }
.drawer .empty{ text-align:center; color:var(--t3); padding:60px 20px; font-size:14px; }
.ci{ display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--hairline); }
.ci .cimg{ width:58px; height:62px; border-radius:12px; background:var(--tile); flex:0 0 auto; display:grid; place-items:center; padding:6px; }
.ci .cimg img{ max-height:100%; width:auto; }
.ci .cmid{ flex:1; }
.ci .cn{ font-family:var(--body); text-transform:none; font-size:14px; color:var(--t1); letter-spacing:0; font-weight:600; }
.ci .cp{ color:var(--navy); font-weight:700; font-size:13.5px; }
.ci .qty{ display:inline-flex; align-items:center; border:1px solid var(--hairline-2); border-radius:var(--pill); overflow:hidden; margin-top:6px; }
.ci .qty button{ width:38px; height:38px; border:none; background:#fff; color:var(--t2); font-size:16px; }
.ci .qty button:hover{ background:var(--bg-2); color:var(--t1); }
.ci .qty span{ width:32px; text-align:center; font-weight:700; font-size:13px; color:var(--t1); }
.ci .rm{ border:none; background:none; color:var(--t3); font-size:11.5px; text-decoration:underline; margin-top:2px; padding:10px 8px 10px 0; }
.drawer .df{ border-top:1px solid var(--hairline); padding:16px 20px 18px; background:var(--card-hi); }
.drawer .df .row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.drawer .df .row .tot{ font-family:var(--head); font-size:21px; color:var(--t1); font-weight:700; }
.drawer .df small{ display:block; text-align:center; color:var(--t3); margin-top:10px; font-size:11.5px; }

/* ============ Toast ============ */
.toast{
  position:fixed; bottom:22px; left:0; right:0; width:max-content; max-width:calc(100vw - 32px); margin-inline:auto; transform:translateY(16px);
  background:var(--navy-ink); color:#fff; border:none; border-radius:var(--pill);
  padding:12px 22px; font-size:13.5px; font-weight:600;
  z-index:120; opacity:0; visibility:hidden; transition:.22s var(--ease);
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-2);
}
.toast.on{ opacity:1; visibility:visible; transform:translateY(0); }
.toast svg{ color:#7DD8A0; }

/* ============ Mobile nav ============ */
.m-nav{ position:fixed; inset:0 0 0 auto; width:min(360px,90vw); background:#fff; z-index:100; transform:translateX(100%); transition:transform .26s var(--ease); overflow:auto; border-left:1px solid var(--hairline); box-shadow:-18px 0 60px rgba(13,17,38,.18); }
.m-nav.on{ transform:none; }
.m-nav .mh{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--hairline); }
.m-nav .mh img{ height:38px; filter:none; }
.m-nav a{ display:block; padding:14px 22px; border-bottom:1px solid var(--hairline); font-family:var(--body); text-transform:none; letter-spacing:0; color:var(--t1); font-size:15px; font-weight:600; }
.m-nav a:hover{ color:var(--navy); }
.m-nav a.sub{ padding-left:36px; font-size:13.5px; color:var(--t2); background:var(--bg-2); font-weight:500; }

/* legacy leftovers */
.ticker,.marquee,.promo{ display:none; }

/* cat tiles — GLP category cards */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border:none; }
.cat-tile{
  position:relative; border-radius:var(--r); overflow:hidden; min-height:0;
  display:flex; flex-direction:row; align-items:center; gap:16px; padding:18px 20px;
  background:#fff; color:var(--t1); border:1px solid var(--hairline);
  box-shadow:var(--shadow-1); transition:transform .15s var(--ease), box-shadow .15s;
}
.cat-tile::before{ content:none; }
.cat-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); background:#fff; }
.cat-tile .ct-img{ width:64px; height:72px; flex:0 0 auto; border-radius:12px; background:var(--tile); display:grid; place-items:center; padding:8px; }
.cat-tile .ct-img img{ max-height:100%; width:auto; filter:drop-shadow(0 6px 8px rgba(13,17,38,.15)); }
.cat-tile .n{ position:relative; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:16px; font-weight:700; color:var(--t1); text-shadow:none; }
.cat-tile .c{ position:relative; font-size:12.5px; color:var(--t3); margin-top:2px; }
.cat-tile .arrow{ position:relative; margin-top:6px; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--red); font-weight:600; }
@media(max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* responsive header */
@media(max-width:1080px){
  .hdr-nav, .desktop-only, .verify-pill{ display:none; }
  .burger{ display:inline-grid; }
}
@media(max-width:900px){
  .hdr-main{ min-height:60px; }
  .brand img{ height:36px; }
  .prod-grid.cols-4, .prod-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .panel{ min-height:460px; align-items:flex-end; border-radius:var(--r); }
  .panel .scrim{ background:linear-gradient(180deg, rgba(7,10,24,.2) 0%, rgba(7,10,24,.66) 55%, rgba(7,10,24,.88) 100%) !important; }
  .hero-shell{ padding-top:12px; }
}
@media(max-width:560px){
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .card .name{ font-size:13.5px; }
}

/* canvas: reverted to original white */
:root{--bg:#FFFFFF;--bg-2:#F4F6FA;--card-hi:#F8F9FC;--tile:#EEF1F7;--hairline:#E8EBF2;--hairline-2:#D8DDE9}
.sec.warm{background:#F3F3F3}
/* ───────────────────────────────────────────────────────────────────────────
   HL SEASONAL ACCENTS — autumn 2026.  Approved by John 2026-10-06.

   Decoration only. Every rule is additive on a ::before/::after of a container
   that already exists, or on elements added purely for this, always with
   pointer-events:none. Nothing changes a background, colour token, layout or
   z-index of anything that was already on the page.

   It cannot reach the money path by construction: cart, checkout and account
   are WordPress-rendered and never load this stylesheet — only the static
   storefront does.

   Golden/amber leaf tones below are a deliberate, scoped exception to the
   Heritage palette, granted for the seasonal leaf art only. They must not be
   reused anywhere else on the brand.

   TO REMOVE AT THE END OF THE SEASON: delete this block from
   rebuild/assets/site.css and the two markup divs from src/layouts/base.astro,
   then rebuild. Nothing else references it.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. EDGE FOLIAGE ─────────────────────────────────────────────────────── */
/* Cluster now TOP-RIGHT. Sits above the sticky header (z-index 100) so it
   drapes over the nav rather than being clipped by it; pointer-events:none
   keeps every link and the search box clickable straight through it. */
body::before {
  content: "";
  position: fixed;
  right: -64px; top: -30px;
  width: 330px; height: 217px;
  background: url("/assets/fall/cluster-tl.png") no-repeat right top / contain;
  opacity: .5;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 120;
}
/* Branch now BOTTOM-LEFT, pulled back on-screen — it was hanging off the edge
   with only a sliver showing. Mirrored so the branch still grows inward. */
body::after {
  content: "";
  position: fixed;
  left: 0; bottom: 0;
  width: 300px; height: 205px;
  background: url("/assets/fall/corner.png") no-repeat left bottom / contain;
  opacity: .5;
  /* mirror in place — transform-origin:left pushed the flipped image off-screen */
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 120;
}
@media (max-width: 760px) {
  body::before { width: 190px; height: 125px; opacity: .4; }
  body::after  { width: 180px; height: 123px; opacity: .4; }
}

/* ── SEASONAL LEAF TONES ─────────────────────────────────────────────────
   Applied to the leaf art itself, never to any page element. Golden hues are
   a deliberate, scoped exception to the Heritage palette for autumn only.
   ───────────────────────────────────────────────────────────────────────── */
.fall-leaves i span, .leaf-pile i { filter: none; }
/* warm amber / gold */
.fall-leaves i:nth-child(2) span,
.fall-leaves i:nth-child(6) span,
.leaf-pile   i:nth-child(2),
.leaf-pile   i:nth-child(9),
.leaf-pile   i:nth-child(13) { filter: hue-rotate(28deg) saturate(1.45) brightness(1.32); }
/* russet — a leaf part-way through turning */
.fall-leaves i:nth-child(4) span,
.fall-leaves i:nth-child(8) span,
.leaf-pile   i:nth-child(5),
.leaf-pile   i:nth-child(11) { filter: hue-rotate(16deg) saturate(1.25) brightness(1.16); }
/* deep rust / brown — the oldest in the pile */
.fall-leaves i:nth-child(7) span,
.leaf-pile   i:nth-child(3),
.leaf-pile   i:nth-child(8)  { filter: hue-rotate(6deg) saturate(.8) brightness(.86); }

/* ── LEAF PILES ──────────────────────────────────────────────────────────
   Two dense mounds in the bottom corners, overlapping by roughly half both
   ways so no daylight shows through.

   TIMING: the base two rows are already settled on first paint — leaves have
   been falling all season, so the pile exists before you arrive. Everything
   above accumulates at one leaf per 7.5s. That is the rate leaves
   actually arrive IN A PILE: one reaches the bottom every ~2.5s, but the
   mounds cover only about a quarter of the width, so roughly a third of them
   feed one. Pacing to the landing rate alone built the pile about three times
   too fast and read as leaves appearing from nowhere.

   FINITE — 66 fixed elements, each appearing once; the last lands at
   ~125s and then it stops. Nothing is appended at runtime, so the piles
   cannot grow without bound. pointer-events:none, below the cart button.
   ───────────────────────────────────────────────────────────────────────── */
.leaf-pile { position: fixed; left: 0; right: 0; bottom: 0; height: 130px;
             pointer-events: none; z-index: 119; overflow: hidden; }
.leaf-pile i {
  position: absolute;
  display: block;
  background: url("/assets/fall/leaf-maple.png") no-repeat center / contain;
  opacity: 0;
  animation: pile-settle ease-out forwards;
}
.leaf-pile i:nth-child(3n) { background-image: url("/assets/fall/leaf-oak.png"); }
@keyframes pile-settle {
  0%   { opacity: 0;  transform: translateY(-22px) rotate(var(--r, 0deg)); }
  70%  { opacity: .92; }
  100% { opacity: .92; transform: translateY(0)    rotate(var(--r, 0deg)); }
}

/* LEFT MOUND */
.leaf-pile i:nth-child(1){left:-2.00%; bottom:-16px; width:57px;height:36px; --r:2deg; opacity:.92; animation:none; transform:rotate(2deg) }
.leaf-pile i:nth-child(2){left:-0.65%; bottom:-16px; width:54px;height:40px; --r:-5deg; opacity:.92; animation:none; transform:rotate(-5deg) }
.leaf-pile i:nth-child(3){left:0.70%; bottom:-16px; width:58px;height:45px; --r:-30deg; opacity:.92; animation:none; transform:rotate(-30deg) }
.leaf-pile i:nth-child(4){left:2.05%; bottom:-16px; width:51px;height:31px; --r:-20deg; opacity:.92; animation:none; transform:rotate(-20deg) }
.leaf-pile i:nth-child(5){left:3.40%; bottom:-16px; width:51px;height:41px; --r:25deg; opacity:.92; animation:none; transform:rotate(25deg) }
.leaf-pile i:nth-child(6){left:4.75%; bottom:-16px; width:59px;height:43px; --r:-7deg; opacity:.92; animation:none; transform:rotate(-7deg) }
.leaf-pile i:nth-child(7){left:6.10%; bottom:-16px; width:50px;height:32px; --r:29deg; opacity:.92; animation:none; transform:rotate(29deg) }
.leaf-pile i:nth-child(8){left:7.45%; bottom:-16px; width:52px;height:35px; --r:-13deg; opacity:.92; animation:none; transform:rotate(-13deg) }
.leaf-pile i:nth-child(9){left:8.80%; bottom:-16px; width:61px;height:48px; --r:-27deg; opacity:.92; animation:none; transform:rotate(-27deg) }
.leaf-pile i:nth-child(10){left:-1.20%; bottom:-2px; width:46px;height:36px; --r:21deg; opacity:.92; animation:none; transform:rotate(21deg) }
.leaf-pile i:nth-child(11){left:0.15%; bottom:-2px; width:47px;height:31px; --r:0deg; opacity:.92; animation:none; transform:rotate(0deg) }
.leaf-pile i:nth-child(12){left:1.50%; bottom:-2px; width:47px;height:33px; --r:-5deg; opacity:.92; animation:none; transform:rotate(-5deg) }
.leaf-pile i:nth-child(13){left:2.85%; bottom:-2px; width:48px;height:41px; --r:-5deg; opacity:.92; animation:none; transform:rotate(-5deg) }
.leaf-pile i:nth-child(14){left:4.20%; bottom:-2px; width:46px;height:34px; --r:29deg; opacity:.92; animation:none; transform:rotate(29deg) }
.leaf-pile i:nth-child(15){left:5.55%; bottom:-2px; width:46px;height:36px; --r:-3deg; opacity:.92; animation:none; transform:rotate(-3deg) }
.leaf-pile i:nth-child(16){left:6.90%; bottom:-2px; width:56px;height:37px; --r:-22deg; opacity:.92; animation:none; transform:rotate(-22deg) }
.leaf-pile i:nth-child(17){left:8.25%; bottom:-2px; width:47px;height:40px; --r:18deg; opacity:.92; animation:none; transform:rotate(18deg) }
.leaf-pile i:nth-child(18){left:0.40%; bottom:11px; width:49px;height:40px; --r:-13deg; animation-duration:1.2s; animation-delay:4.0s }
.leaf-pile i:nth-child(19){left:1.80%; bottom:11px; width:42px;height:30px; --r:10deg; animation-duration:1.2s; animation-delay:11.5s }
.leaf-pile i:nth-child(20){left:3.20%; bottom:11px; width:52px;height:33px; --r:8deg; animation-duration:1.2s; animation-delay:19.0s }
.leaf-pile i:nth-child(21){left:4.60%; bottom:11px; width:51px;height:32px; --r:3deg; animation-duration:1.2s; animation-delay:26.5s }
.leaf-pile i:nth-child(22){left:6.00%; bottom:11px; width:49px;height:32px; --r:29deg; animation-duration:1.2s; animation-delay:34.0s }
.leaf-pile i:nth-child(23){left:7.40%; bottom:11px; width:44px;height:33px; --r:-29deg; animation-duration:1.2s; animation-delay:41.5s }
.leaf-pile i:nth-child(24){left:1.40%; bottom:23px; width:40px;height:34px; --r:25deg; animation-duration:1.2s; animation-delay:49.0s }
.leaf-pile i:nth-child(25){left:2.80%; bottom:23px; width:38px;height:28px; --r:29deg; animation-duration:1.2s; animation-delay:56.5s }
.leaf-pile i:nth-child(26){left:4.20%; bottom:23px; width:48px;height:32px; --r:4deg; animation-duration:1.2s; animation-delay:64.0s }
.leaf-pile i:nth-child(27){left:5.60%; bottom:23px; width:40px;height:33px; --r:-25deg; animation-duration:1.2s; animation-delay:71.5s }
.leaf-pile i:nth-child(28){left:7.00%; bottom:23px; width:39px;height:33px; --r:22deg; animation-duration:1.2s; animation-delay:79.0s }
.leaf-pile i:nth-child(29){left:2.60%; bottom:34px; width:43px;height:33px; --r:-20deg; animation-duration:1.2s; animation-delay:86.5s }
.leaf-pile i:nth-child(30){left:4.05%; bottom:34px; width:41px;height:27px; --r:-7deg; animation-duration:1.2s; animation-delay:94.0s }
.leaf-pile i:nth-child(31){left:5.50%; bottom:34px; width:43px;height:29px; --r:31deg; animation-duration:1.2s; animation-delay:101.5s }
.leaf-pile i:nth-child(32){left:3.40%; bottom:44px; width:41px;height:35px; --r:19deg; animation-duration:1.2s; animation-delay:109.0s }
.leaf-pile i:nth-child(33){left:4.90%; bottom:44px; width:34px;height:21px; --r:17deg; animation-duration:1.2s; animation-delay:116.5s }

/* RIGHT MOUND */
.leaf-pile i:nth-child(34){right:-2.00%; bottom:-16px; width:50px;height:36px; --r:13deg; opacity:.92; animation:none; transform:rotate(13deg) }
.leaf-pile i:nth-child(35){right:-0.65%; bottom:-16px; width:51px;height:37px; --r:-26deg; opacity:.92; animation:none; transform:rotate(-26deg) }
.leaf-pile i:nth-child(36){right:0.70%; bottom:-16px; width:61px;height:44px; --r:7deg; opacity:.92; animation:none; transform:rotate(7deg) }
.leaf-pile i:nth-child(37){right:2.05%; bottom:-16px; width:57px;height:38px; --r:-25deg; opacity:.92; animation:none; transform:rotate(-25deg) }
.leaf-pile i:nth-child(38){right:3.40%; bottom:-16px; width:56px;height:41px; --r:30deg; opacity:.92; animation:none; transform:rotate(30deg) }
.leaf-pile i:nth-child(39){right:4.75%; bottom:-16px; width:58px;height:42px; --r:11deg; opacity:.92; animation:none; transform:rotate(11deg) }
.leaf-pile i:nth-child(40){right:6.10%; bottom:-16px; width:50px;height:42px; --r:3deg; opacity:.92; animation:none; transform:rotate(3deg) }
.leaf-pile i:nth-child(41){right:7.45%; bottom:-16px; width:62px;height:45px; --r:-8deg; opacity:.92; animation:none; transform:rotate(-8deg) }
.leaf-pile i:nth-child(42){right:8.80%; bottom:-16px; width:57px;height:36px; --r:30deg; opacity:.92; animation:none; transform:rotate(30deg) }
.leaf-pile i:nth-child(43){right:-1.20%; bottom:-2px; width:55px;height:35px; --r:17deg; opacity:.92; animation:none; transform:rotate(17deg) }
.leaf-pile i:nth-child(44){right:0.15%; bottom:-2px; width:58px;height:49px; --r:26deg; opacity:.92; animation:none; transform:rotate(26deg) }
.leaf-pile i:nth-child(45){right:1.50%; bottom:-2px; width:52px;height:33px; --r:-17deg; opacity:.92; animation:none; transform:rotate(-17deg) }
.leaf-pile i:nth-child(46){right:2.85%; bottom:-2px; width:53px;height:33px; --r:29deg; opacity:.92; animation:none; transform:rotate(29deg) }
.leaf-pile i:nth-child(47){right:4.20%; bottom:-2px; width:46px;height:33px; --r:22deg; opacity:.92; animation:none; transform:rotate(22deg) }
.leaf-pile i:nth-child(48){right:5.55%; bottom:-2px; width:52px;height:37px; --r:-22deg; opacity:.92; animation:none; transform:rotate(-22deg) }
.leaf-pile i:nth-child(49){right:6.90%; bottom:-2px; width:57px;height:46px; --r:5deg; opacity:.92; animation:none; transform:rotate(5deg) }
.leaf-pile i:nth-child(50){right:8.25%; bottom:-2px; width:46px;height:33px; --r:-30deg; opacity:.92; animation:none; transform:rotate(-30deg) }
.leaf-pile i:nth-child(51){right:0.40%; bottom:11px; width:50px;height:36px; --r:0deg; animation-duration:1.2s; animation-delay:5.2s }
.leaf-pile i:nth-child(52){right:1.80%; bottom:11px; width:46px;height:34px; --r:24deg; animation-duration:1.2s; animation-delay:12.7s }
.leaf-pile i:nth-child(53){right:3.20%; bottom:11px; width:50px;height:37px; --r:-20deg; animation-duration:1.2s; animation-delay:20.2s }
.leaf-pile i:nth-child(54){right:4.60%; bottom:11px; width:50px;height:42px; --r:17deg; animation-duration:1.2s; animation-delay:27.7s }
.leaf-pile i:nth-child(55){right:6.00%; bottom:11px; width:52px;height:42px; --r:-12deg; animation-duration:1.2s; animation-delay:35.2s }
.leaf-pile i:nth-child(56){right:7.40%; bottom:11px; width:53px;height:46px; --r:21deg; animation-duration:1.2s; animation-delay:42.7s }
.leaf-pile i:nth-child(57){right:1.40%; bottom:23px; width:43px;height:26px; --r:0deg; animation-duration:1.2s; animation-delay:50.2s }
.leaf-pile i:nth-child(58){right:2.80%; bottom:23px; width:45px;height:30px; --r:-26deg; animation-duration:1.2s; animation-delay:57.7s }
.leaf-pile i:nth-child(59){right:4.20%; bottom:23px; width:46px;height:40px; --r:10deg; animation-duration:1.2s; animation-delay:65.2s }
.leaf-pile i:nth-child(60){right:5.60%; bottom:23px; width:40px;height:29px; --r:-7deg; animation-duration:1.2s; animation-delay:72.7s }
.leaf-pile i:nth-child(61){right:7.00%; bottom:23px; width:48px;height:36px; --r:26deg; animation-duration:1.2s; animation-delay:80.2s }
.leaf-pile i:nth-child(62){right:2.60%; bottom:34px; width:36px;height:24px; --r:28deg; animation-duration:1.2s; animation-delay:87.7s }
.leaf-pile i:nth-child(63){right:4.05%; bottom:34px; width:35px;height:24px; --r:34deg; animation-duration:1.2s; animation-delay:95.2s }
.leaf-pile i:nth-child(64){right:5.50%; bottom:34px; width:40px;height:28px; --r:-25deg; animation-duration:1.2s; animation-delay:102.7s }
.leaf-pile i:nth-child(65){right:3.40%; bottom:44px; width:38px;height:26px; --r:-31deg; animation-duration:1.2s; animation-delay:110.2s }
.leaf-pile i:nth-child(66){right:4.90%; bottom:44px; width:40px;height:32px; --r:-14deg; animation-duration:1.2s; animation-delay:117.7s }

@media (prefers-reduced-motion: reduce) {
  .leaf-pile i { animation: none; opacity: .92; transform: rotate(var(--r,0deg)); }
}
/* Phones: base rows plus one tier */
@media (max-width: 760px) {
  .leaf-pile { height: 86px; }
  .leaf-pile i:nth-child(n+18):nth-child(-n+23) { display: none; }
  .leaf-pile i:nth-child(n+41) { display: none; }
}

/* ── 4. DRIFTING LEAVES ──────────────────────────────────────────────────── */
.fall-leaves { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fall-leaves i {
  position: absolute;
  top: -12vh;
  display: block;
  opacity: 0;
  animation: leaf-fall linear infinite, leaf-sway ease-in-out infinite alternate;
}
.fall-leaves i span {
  display: block;
  width: 100%; height: 100%;
  background: url("/assets/fall/leaf-maple.png") no-repeat center / contain;
  animation: leaf-tumble ease-in-out infinite;
}
/* every third leaf is the oak, so the set never looks like one leaf repeated */
.fall-leaves i:nth-child(3n) span { background-image: url("/assets/fall/leaf-oak.png"); }
@keyframes leaf-fall {
  0%   { transform: translateY(-12vh); opacity: 0; }
  7%   { opacity: .9; }
  88%  { opacity: .82; }
  100% { transform: translateY(114vh); opacity: 0; }
}
@keyframes leaf-sway  { 0% { margin-left: -46px; } 100% { margin-left: 46px; } }
@keyframes leaf-tumble {
  0%   { transform: rotate(0deg)   scaleX(1); }
  25%  { transform: rotate(110deg) scaleX(.4); }
  50%  { transform: rotate(205deg) scaleX(1); }
  75%  { transform: rotate(310deg) scaleX(.55); }
  100% { transform: rotate(360deg) scaleX(1); }
}
/* Sizes raised to 26-54px: the photographic leaves hold their detail here,
   where the old drawn silhouette turned to specks below ~20px. */
.fall-leaves i:nth-child(1){left: 5%; width:30px;height:26px; animation-duration:21s, 4.1s; animation-delay:-2s,  -1s }
.fall-leaves i:nth-child(1) span{ animation-duration:5.5s }
.fall-leaves i:nth-child(2){left:16%; width:48px;height:41px; animation-duration:15s, 3.2s; animation-delay:-9s,  -2s }
.fall-leaves i:nth-child(2) span{ animation-duration:3.4s }
.fall-leaves i:nth-child(3){left:27%; width:36px;height:23px; animation-duration:25s, 5.6s; animation-delay:-14s, 0s  }
.fall-leaves i:nth-child(3) span{ animation-duration:7.2s }
.fall-leaves i:nth-child(4){left:39%; width:26px;height:22px; animation-duration:19s, 2.8s; animation-delay:-5s,  -2s }
.fall-leaves i:nth-child(4) span{ animation-duration:4.6s }
.fall-leaves i:nth-child(5){left:51%; width:54px;height:47px; animation-duration:13s, 4.8s; animation-delay:-17s, -3s }
.fall-leaves i:nth-child(5) span{ animation-duration:3.9s }
.fall-leaves i:nth-child(6){left:63%; width:33px;height:21px; animation-duration:23s, 3.6s; animation-delay:-7s,  -1s }
.fall-leaves i:nth-child(6) span{ animation-duration:6.1s }
.fall-leaves i:nth-child(7){left:74%; width:42px;height:36px; animation-duration:17s, 5.1s; animation-delay:-20s, -4s }
.fall-leaves i:nth-child(7) span{ animation-duration:4.2s }
.fall-leaves i:nth-child(8){left:86%; width:28px;height:24px; animation-duration:27s, 3.9s; animation-delay:-11s, -2s }
.fall-leaves i:nth-child(8) span{ animation-duration:8.0s }
.fall-leaves i:nth-child(9){left:95%; width:38px;height:25px; animation-duration:20s, 4.4s; animation-delay:-24s, 0s  }
.fall-leaves i:nth-child(9) span{ animation-duration:5.0s }

/* Density: show four of the eight falling leaves — present, not busy.
   Hidden by POSITION rather than by deleting the markup: left/size/timing are all
   bound to :nth-child, so removing elements renumbers the survivors and bunches
   them to the left of the viewport. The four that remain sit at 5%, 27%, 63% and
   86% and keep all three colour treatments plus both leaf shapes. */
.fall-leaves i:nth-child(2),
.fall-leaves i:nth-child(4),
.fall-leaves i:nth-child(5),
.fall-leaves i:nth-child(7) { display: none; }
@media (prefers-reduced-motion: reduce) { .fall-leaves { display: none; } }
@media (max-width: 760px) { .fall-leaves i:nth-child(n+6) { display: none; } }


/* ===== next design overrides (baked by scripts/port.py — not in noah's source) ===== */
.hero-cs .hcs-slide .sph[src*="hero-test-3"]{ object-position:18% center; }
/* Mobile header (<=1080px): LEFT = hamburger (first) + logo, RIGHT = search, cart, account. */
@media(max-width:1080px){
  .hdr-burger{ order:-3; margin-right:8px; }
  .hdr-main > .brand{ order:2; margin-left:6px; }
  .hdr-main > .hdr-actions{ order:-2; margin-right:auto; }
  .hdr-account{ display:inline-flex !important; }
}
/* Sticky nav: .hdr is already position:sticky top:0, but noah body overflow-x:hidden
   turns <body> into a scroll container, which breaks the sticky (header scrolled off).
   Move the horizontal clip to <html> (the viewport scroll container, where sticky still
   pins to the top) and free <body>. Result: the sp-promo-bar marquee + the rwb-bar scroll
   away, and the .hdr nav stays pinned. scroll-padding offsets in-page anchors. */
html{ overflow-x:hidden; scroll-padding-top:96px; scroll-behavior:smooth; }
body{ overflow-x:visible !important; }
/* The injected header wrapper div is only ~71px tall; a sticky child stays pinned
   only while its containing block is in view, so .hdr un-sticks after 71px. Collapse
   the wrapper with display:contents so .hdr containing block becomes <body> (full page
   height) and it stays pinned the whole scroll. The rwb-bar inside still scrolls away. */
body > div:has(> header.hdr){ display:contents; }
.hdr{ z-index:100 !important; box-shadow:0 3px 14px rgba(13,17,38,.10) !important; }
/* Unified-header height parity: the hl-next theme's generic .wrap{padding:56px 56px 96px}
   inflates the header on WP pages (storefront has no such rule) -> ~157px tall. Pin the
   header's own .wrap to the storefront geometry so every WP page's header == /shop/ (61px). */
.hdr .wrap{ padding:0 32px !important; max-width:1240px !important; margin:0 auto !important; }
/* Scroll-spy active state: highlight the in-view section's left-nav link (navy pill,
   matching the header .navlink.active). Applies to .faq-nav + any [data-section-nav]. */
.faq-nav a.active, [data-section-nav] a.active{ color:var(--navy) !important; background:#EDF0FA !important; }
/* Verify & Save chooser: right-align its dropdown (pill sits at the far right). */
.verify-menu{ position:relative; }
.verify-menu > .menu{ right:0; left:auto; }
/* nav bar drop shadow (John) */
.hdr{ box-shadow:0 6px 20px rgba(13,17,38,.13) !important; }
/* MADE IN USA seal removed from PDP images (John asked 3x) — kill both templates' badges */
.usa-badge, .pdp2-seal{ display:none !important; }
/* Shop card sale price (live WooCommerce): struck-through regular + sale. */
.card .price .was{ color:var(--t3); text-decoration:line-through; font-weight:600; font-size:.72em; margin-right:6px; }
.card .price .now{ color:var(--red); }
/* Shop live-load skeleton cards (shown while the live catalog fetches; never a blank grid). */
.sk-card{ border:1px solid var(--hairline); border-radius:16px; overflow:hidden; background:#fff; }
.sk-card .sk-thumb{ aspect-ratio:1/1; background:linear-gradient(100deg,#eef1f6 30%,#f6f8fb 50%,#eef1f6 70%); background-size:200% 100%; animation:sk-sh 1.2s linear infinite; }
.sk-card .sk-body{ padding:14px 16px 18px; }
.sk-card .sk-line{ height:12px; border-radius:6px; margin-top:10px; background:linear-gradient(100deg,#eef1f6 30%,#f6f8fb 50%,#eef1f6 70%); background-size:200% 100%; animation:sk-sh 1.2s linear infinite; }
.sk-card .sk-line.sk-short{ width:55%; }
@keyframes sk-sh{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---- promo-bar marquee icons (noah's icon set as coloured SVG background-images,
   since wp_kses strips inline SVG from item content; each item carries an
   <i class="hlp-ico-X"> marker painted here). Colour alternates red/navy by
   position, matching noah's original ticker. */
.sp-promo-bar__item .hlp-ico{ display:inline-block; width:15px; height:15px; margin-right:7px; vertical-align:-3px; background:center/contain no-repeat; flex:0 0 auto; }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-shield{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNEMzJGMkQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMiA0IDV2NmMwIDUgMy40IDguNSA4IDExIDQuNi0yLjUgOC02IDgtMTFWNXoiLz48cGF0aCBkPSJtOSAxMiAyIDIgNC00Ii8+PC9zdmc+"); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-shield{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxQTJDODMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMiA0IDV2NmMwIDUgMy40IDguNSA4IDExIDQuNi0yLjUgOC02IDgtMTFWNXoiLz48cGF0aCBkPSJtOSAxMiAyIDIgNC00Ii8+PC9zdmc+"); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-doc{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNEMzJGMkQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgM0g2YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjl6Ii8+PHBhdGggZD0iTTE0IDN2Nmg2TTggMTNoOE04IDE3aDUiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-doc{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxQTJDODMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgM0g2YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjl6Ii8+PHBhdGggZD0iTTE0IDN2Nmg2TTggMTNoOE04IDE3aDUiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-flask{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNEMzJGMkQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAzaDZNMTAgM3Y2bC01IDlhMiAyIDAgMCAwIDEuOCAzaDEwLjRBMiAyIDAgMCAwIDE5IDE4bC01LTlWMyIvPjxwYXRoIGQ9Ik03LjUgMTRoOSIvPjwvc3ZnPg=="); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-flask{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxQTJDODMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSAzaDZNMTAgM3Y2bC01IDlhMiAyIDAgMCAwIDEuOCAzaDEwLjRBMiAyIDAgMCAwIDE5IDE4bC01LTlWMyIvPjxwYXRoIGQ9Ik03LjUgMTRoOSIvPjwvc3ZnPg=="); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-check{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNEMzJGMkQiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-check{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxQTJDODMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-flag{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRDMyRjJEIj48cGF0aCBkPSJNNCAydjIwaDJ2LThoNWwxIDJoOFY1aC03bC0xLTJ6Ii8+PC9zdmc+"); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-flag{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjMUEyQzgzIj48cGF0aCBkPSJNNCAydjIwaDJ2LThoNWwxIDJoOFY1aC03bC0xLTJ6Ii8+PC9zdmc+"); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-truck{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNEMzJGMkQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMSA0aDEzdjExSDF6TTE0IDhoNGwzIDN2NGgtNyIvPjxjaXJjbGUgY3g9IjYiIGN5PSIxOCIgcj0iMS42Ii8+PGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE4IiByPSIxLjYiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-truck{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxQTJDODMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMSA0aDEzdjExSDF6TTE0IDhoNGwzIDN2NGgtNyIvPjxjaXJjbGUgY3g9IjYiIGN5PSIxOCIgcj0iMS42Ii8+PGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE4IiByPSIxLjYiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-star{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjRDMyRjJEIj48cGF0aCBkPSJtMTIgMyAyLjYgNS42IDYgLjUtNC41IDQgMS40IDUuOUwxMiAxNS44IDYuNSAxOWwxLjQtNS45LTQuNS00IDYtLjV6Ii8+PC9zdmc+"); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-star{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjMUEyQzgzIj48cGF0aCBkPSJtMTIgMyAyLjYgNS42IDYgLjUtNC41IDQgMS40IDUuOUwxMiAxNS44IDYuNSAxOWwxLjQtNS45LTQuNS00IDYtLjV6Ii8+PC9zdmc+"); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-bell{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDMyRjJEIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDhhNiA2IDAgMCAwLTEyIDBjMCA3LTMgOS0zIDloMThzLTMtMi0zLTkiLz48cGF0aCBkPSJNMTMuNyAyMWEyIDIgMCAwIDEtMy40IDAiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-bell{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUEyQzgzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDhhNiA2IDAgMCAwLTEyIDBjMCA3LTMgOS0zIDloMThzLTMtMi0zLTkiLz48cGF0aCBkPSJNMTMuNyAyMWEyIDIgMCAwIDEtMy40IDAiLz48L3N2Zz4="); }
.sp-promo-bar__item:nth-of-type(odd) .hlp-ico-tag{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDMyRjJEIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwLjYgMTMuNCAxMiAyMmwtOS05VjNoMTBsNy42IDcuNmEyIDIgMCAwIDEgMCAyLjh6Ii8+PGNpcmNsZSBjeD0iNy41IiBjeT0iNy41IiByPSIxLjYiIGZpbGw9IiNEMzJGMkQiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg=="); }
.sp-promo-bar__item:nth-of-type(even) .hlp-ico-tag{ background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUEyQzgzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwLjYgMTMuNCAxMiAyMmwtOS05VjNoMTBsNy42IDcuNmEyIDIgMCAwIDEgMCAyLjh6Ii8+PGNpcmNsZSBjeD0iNy41IiBjeT0iNy41IiByPSIxLjYiIGZpbGw9IiMxQTJDODMiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg=="); }
/* accent + separators are plugin-driven (SP Promo Bar config) — no hardcoded override (John 2026-08-04) */
.sp-promo-bar__item a{ color:inherit !important; }

/* ---- storefront footer (#sf) shared so WP pages match /shop/ ---- */
/* Current next footer — id-scoped (#sf) so the rebuild site.css .ft rules
       cannot bleed onto it. Structure/content locked; palette sits on navy. */
    #sf.ft { background: #0f172a; color: #94a3b8; padding: 40px 56px 22px; margin-top: 64px; font-family: var(--body); border-top: 4px solid #D32F2D; }
    #sf .ft-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
    #sf .ft-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.4; }
    #sf .ft-row--nav { padding-bottom: 12px; border-bottom: 1px solid #1e293b; }
    #sf .ft-row--nav .ft-brand { color: #fff; font-family: var(--head); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; text-decoration: none; line-height: 1; }
    #sf .ft-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: 8px; }
    #sf .ft-nav a { color: #cbd5e1; font-size: 13px; text-decoration: none; transition: color .15s; }
    #sf .ft-nav a:hover { color: #fff; }
    #sf .ft-madein { margin-left: auto; color: #FF8A85; font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
    #sf .ft-row--info { gap: 24px; color: #cbd5e1; padding-bottom: 12px; border-bottom: 1px solid #1e293b; font-size: 12.5px; }
    #sf .ft-row--info a { color: #cbd5e1; text-decoration: none; transition: color .15s; }
    #sf .ft-row--info a:hover { color: #fff; }
    #sf .ft-row--info strong { color: #fff; font-weight: 600; margin: 0 .28em; }
    #sf .ft-row--info span { display: inline-block; }
    #sf .ft-row--ruo { color: #64748b; font-size: 11px; line-height: 1.5; padding-bottom: 12px; border-bottom: 1px solid #1e293b; align-items: baseline; gap: 10px; }
    #sf .ft-ruo-label { color: #FF8A85; font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
    #sf .ft-row--legal { justify-content: space-between; font-family: var(--body); font-size: 10.5px; letter-spacing: 0.06em; color: #64748b; padding-top: 4px; }
    #sf .ft-legal-links { display: flex; gap: 18px; }
    #sf .ft-legal-links a { color: #64748b; text-decoration: none; transition: color .15s; }
    #sf .ft-legal-links a:hover { color: #cbd5e1; }
    @media (max-width: 980px) {
      #sf.ft { padding: 34px 22px calc(22px + env(safe-area-inset-bottom)); }
      #sf .ft-in { gap: 22px; }
      #sf .ft-row { align-items: flex-start; gap: 14px; }
      /* nav: brand on its own line, tappable 2-col link grid */
      #sf .ft-row--nav { flex-direction: column; gap: 16px; padding-bottom: 18px; }
      #sf .ft-row--nav .ft-brand { font-size: 21px; }
      #sf .ft-nav { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; width: 100%; }
      #sf .ft-nav a { min-height: 40px; display: flex; align-items: center; font-size: 14.5px; }
      #sf .ft-madein { margin-left: 0; }
      /* info: each fact stacks; email/phone tappable accents; ship facts become a clean card (no columnize) */
      #sf .ft-row--info { flex-direction: column; align-items: stretch; gap: 11px; padding-bottom: 18px; }
      #sf .ft-row--info span { display: block; }
      #sf .ft-row--info a { min-height: 36px; display: inline-flex; align-items: center; font-size: 14px; color: #FF8A85; font-weight: 600; }
      #sf .ft-row--info > span:last-child { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 13px 15px; font-size: 13px; line-height: 1.7; color: #cbd5e1; }
      #sf .ft-row--info > span:last-child strong { margin: 0 .22em; white-space: nowrap; }
      /* ruo + legal stack */
      #sf .ft-row--ruo { flex-direction: column; gap: 7px; padding-bottom: 18px; }
      #sf .ft-row--legal { flex-direction: column; align-items: flex-start; gap: 10px; }
      #sf .ft-legal-links { gap: 18px; }
    }