/* ==========================================================================
   V3 COMPOUNDS — global header + footer
   Everything is scoped to .v3-header / .v3-footer (plus the two body-level
   helpers .v3-global and .v3-nav-lock) so it cannot touch theme, Elementor
   content, or WooCommerce templates.

   Loaded by v3-global-header-footer.php via wp_enqueue_style().
   ========================================================================== */

/* ------------------------------------------------------------- tokens ---- */
/* Same values as the Elementor stylesheet — safe if both are loaded. */
:root{
  --v3-ink:            #121212;
  --v3-blue:           #0057E7;
  --v3-blue-light:     #0A75EE;
  --v3-grey:           #EBEBEB;

  --v3-paper:          #F7F6F2;
  --v3-surface:        #FFFFFF;
  --v3-line:           #E2E0DA;
  --v3-line-soft:      #EDEBE5;
  --v3-text-muted:     #5D6169;
  --v3-text-faint:     #676C75;
  --v3-blue-tint:      #EEF4FE;

  /* navy ground - mirrors output/homepage-concept.html (approved 31 Aug 2026) */
  --v3-navy:           #0A1628;
  --v3-navy-deep:      #071021;
  --v3-on-navy:        #FFFFFF;
  --v3-on-navy-soft:   #B4BECD;
  --v3-on-navy-dim:    #8892A4;
  --v3-navy-icon:      #5EA0E8;

  --v3-container:      1200px;
  --v3-tap:            44px;   /* minimum tap target */

  --v3-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --v3-font-body:    'Karla', 'Helvetica Neue', Arial, sans-serif;
}

/* ==================================================================== HEADER */
.v3-header{
  position:sticky;
  top:0;
  z-index:9000;
  background:rgba(247,246,242,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--v3-line-soft);
  font-family:var(--v3-font-body);
}
.v3-header *,
.v3-header *::before,
.v3-header *::after{ box-sizing:border-box; }

.v3-header__inner{
  width:100%;
  max-width:var(--v3-container);
  margin:0 auto;
  padding:14px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* ------------------------------------------------------------- branding -- */
.v3-brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex:none;
  text-decoration:none;
  min-height:var(--v3-tap);
}
.v3-brand__logo{
  width:46px;
  height:46px;
  object-fit:contain;
  display:block;
}
.v3-brand__text{ display:block; }
.v3-brand__name{
  display:block;
  font-family:var(--v3-font-display);
  font-size:23px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.1;
  color:var(--v3-ink);
  white-space:nowrap;
}
.v3-brand__sub{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--v3-text-faint);
  margin-top:2px;
  white-space:nowrap;
}

/* ------------------------------------------------------------------ nav -- */
.v3-nav{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  gap:16px;
}
.v3-nav a{
  display:inline-flex;
  align-items:center;
  min-height:var(--v3-tap);      /* 44px tap target */
  padding:10px 0;
  font-size:14.5px;
  font-weight:500;
  color:var(--v3-text-muted);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  transition:color .18s ease;
}
.v3-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:4px;
  width:0; height:1.5px;
  background:var(--v3-blue);
  transition:width .22s ease;
}
.v3-nav a:hover{ color:var(--v3-ink); }
.v3-nav a:hover::after{ width:100%; }
.v3-nav a[aria-current="page"]{ color:var(--v3-ink); font-weight:600; }
.v3-nav a[aria-current="page"]::after{ width:100%; }
/* mobile panel only — must out-specify `.v3-nav a` or it shows twice */
.v3-nav a.v3-nav__account{ display:none; }

/* ------------------------------------------------------ right-hand group -- */
.v3-header__cta{
  display:flex;
  align-items:center;
  flex:none;
  gap:12px;
}
.v3-header__account{
  display:inline-flex;
  align-items:center;
  min-height:var(--v3-tap);
  font-size:14.5px;
  font-weight:500;
  color:var(--v3-text-muted);
  text-decoration:none;
  transition:color .18s ease;
}
.v3-header__account:hover{ color:var(--v3-blue); }

.v3-header__cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--v3-tap);
  height:var(--v3-tap);
  border-radius:8px;
  color:var(--v3-text-muted);
  text-decoration:none;
  transition:color .18s ease, background-color .18s ease;
}
.v3-header__cart:hover{ color:var(--v3-blue); background:var(--v3-blue-tint); }
.v3-header__cart svg{ display:block; }

.v3-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--v3-tap);
  padding:11px 22px;
  border-radius:6px;
  border:1px solid transparent;
  font-family:var(--v3-font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.v3-btn--primary{
  background:var(--v3-blue);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,87,231,.20), 0 10px 24px rgba(0,87,231,.18);
}
.v3-btn--primary:hover{
  background:var(--v3-blue-light);
  color:#fff;
  transform:translateY(-2px);
}

/* -------------------------------------------------------------- burger --- */
/* Themes reset bare buttons with an ATTRIBUTE selector: Hello Elementor ships
   `[type=button],[type=submit],button{border:1px solid #c36;color:#c36;
   display:inline-block}`. `[type=button]` scores (0,1,0), which TIES a bare
   `.v3-burger`, and this file is enqueued before the theme's stylesheet, so the
   theme won on source order and the burger showed up crimson on desktop.
   Every burger rule is therefore scoped under `.v3-header` (0,2,0), and the
   theme's button chrome is neutralised first. Do not un-scope these. */
.v3-header button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  border-radius:8px;
  padding:0;
}
.v3-header .v3-burger{
  display:none;                 /* desktop: hidden */
  align-items:center;
  justify-content:center;
  width:var(--v3-tap);
  height:var(--v3-tap);
  padding:0;
  border:0;
  border-radius:8px;
  background:none;
  cursor:pointer;
  color:var(--v3-ink);
}
.v3-header .v3-burger:hover{ background:var(--v3-blue-tint); }
.v3-header .v3-burger__bars{ position:relative; }
.v3-header .v3-burger__bars,
.v3-header .v3-burger__bars::before,
.v3-header .v3-burger__bars::after{
  display:block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .22s ease, background-color .18s ease;
}
.v3-header .v3-burger__bars::before{ content:""; position:absolute; top:-7px; }
.v3-header .v3-burger__bars::after { content:""; position:absolute; top:7px; }
.v3-header--open .v3-burger__bars{ background:transparent; }
.v3-header--open .v3-burger__bars::before{ transform:translateY(7px) rotate(45deg); }
.v3-header--open .v3-burger__bars::after { transform:translateY(-7px) rotate(-45deg); }

/* keyboard focus stays visible everywhere */
.v3-header a:focus-visible,
.v3-header button:focus-visible,
.v3-footer a:focus-visible{
  outline:2px solid var(--v3-blue);
  outline-offset:3px;
  border-radius:3px;
}

/* ==================================================================== FOOTER */
.v3-footer{
  background:var(--v3-navy-deep);
  border-top:1px solid rgba(255,255,255,.09);
  padding:76px 0 0;
  font-family:var(--v3-font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--v3-ink);
}
.v3-footer *,
.v3-footer *::before,
.v3-footer *::after{ box-sizing:border-box; }
.v3-footer p{ margin:0; }
.v3-footer a{ text-decoration:none; }

.v3-footer__inner{
  width:100%;
  max-width:var(--v3-container);
  margin:0 auto;
  padding:0 32px;
}
.v3-footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:50px;
  padding-bottom:52px;
}
.v3-footer__name{
  display:block;
  font-family:var(--v3-font-display);
  font-size:22px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.1;
  color:var(--v3-on-navy);
}
.v3-footer__sub{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--v3-on-navy-dim);
  margin-top:2px;
}
.v3-footer__tagline{
  margin-top:12px;
  font-size:16px;
  color:var(--v3-on-navy-soft);
  max-width:30ch;
}
.v3-footer__local{
  margin-top:20px;
  font-size:14px;
  color:var(--v3-on-navy-dim);
  display:flex;
  align-items:center;
  gap:8px;
}
.v3-footer__col h4{
  font-family:var(--v3-font-body);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--v3-on-navy-dim);
  margin:0 0 18px;
}
.v3-footer__col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.v3-footer__col a{
  display:inline-flex;
  align-items:center;
  min-height:var(--v3-tap);       /* 44px tap target */
  font-size:15px;
  color:var(--v3-on-navy-soft);
  transition:color .18s ease;
}
.v3-footer__col a:hover{ color:var(--v3-navy-icon); }

.v3-footer__disclaimer{
  border-top:1px solid rgba(255,255,255,.11);
  padding:34px 0;
}
.v3-footer__disclaimer-title{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--v3-on-navy);
  margin-bottom:12px;
}
.v3-footer__disclaimer p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--v3-on-navy-soft);   /* RUO text - was 5.9:1 on white, now 10:1 */
}
.v3-footer__disclaimer p + p{ margin-top:10px; }

.v3-footer__bottom{
  border-top:1px solid rgba(255,255,255,.11);
  padding:24px 0 34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:13.5px;
  color:var(--v3-on-navy-dim);
}
.v3-footer__bottom nav{ display:flex; flex-wrap:wrap; gap:22px; }
.v3-footer__bottom a{
  display:inline-flex;
  align-items:center;
  min-height:var(--v3-tap);
  color:var(--v3-on-navy-dim);
  transition:color .18s ease;
}
.v3-footer__bottom a:hover{ color:var(--v3-navy-icon); }

/* ================================================ RESPONSIVE — 1240 / 768 = */
/* The nav collapses at 1240px, not 1024px: the cart + account controls make
   the full label set ("Certificate of Analysis") too wide below that, and the
   1200px container leaves no slack if Karla falls back to Arial. The resize
   handler in header.html uses the same 1240 threshold. */
@media (max-width:1240px){
  .v3-header__inner{ padding:12px 26px; gap:16px; }

  /* nav becomes a panel hanging off the sticky header */
  .v3-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 26px 18px;
    background:var(--v3-surface);
    border-bottom:1px solid var(--v3-line);
    box-shadow:0 18px 40px rgba(18,18,18,.10);
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .v3-header--open .v3-nav{ display:flex; }

  .v3-nav a{
    min-height:52px;                 /* comfortable thumb target */
    padding:12px 0;
    font-size:16px;
    border-bottom:1px solid var(--v3-line-soft);
  }
  .v3-nav a:last-child{ border-bottom:0; }
  .v3-nav a::after{ display:none; }
  .v3-nav a.v3-nav__account{ display:inline-flex; }

  .v3-header__account{ display:none; }  /* lives in the panel on mobile */
  .v3-header .v3-burger{ display:inline-flex; }

  body.v3-nav-lock{ overflow:hidden; }

  .v3-footer__inner{ padding:0 26px; }
  .v3-footer__grid{ grid-template-columns:repeat(2, 1fr); gap:40px; }
}

@media (max-width:768px){
  .v3-header__inner{ padding:10px 20px; }
  .v3-brand__logo{ width:40px; height:40px; }
  .v3-brand__name{ font-size:19px; }
  .v3-brand__sub{ font-size:9px; letter-spacing:.14em; }
  .v3-nav{ padding:6px 20px 18px; }

  /* keep cart + burger; the Shop Now button would crowd the bar */
  .v3-header__cta .v3-btn{ display:none; }

  .v3-footer{ padding-top:56px; }
  .v3-footer__inner{ padding:0 20px; }
  .v3-footer__grid{ grid-template-columns:1fr; gap:34px; padding-bottom:40px; }
  .v3-footer__bottom{ justify-content:flex-start; gap:10px 22px; }
}

@media (prefers-reduced-motion: reduce){
  .v3-header *,
  .v3-footer *{ transition:none !important; }
}

/* ================================= ELEMENTOR PRO TEMPLATES — SAFETY NET === */
/* Applies only inside the two Theme Builder templates (`.v3-el-header` /
   `.v3-el-footer` are the CSS classes set on their outer containers). Lucky
   edits those templates by hand, so the responsive behaviour cannot live in
   the template settings alone — the rules below make the header and footer
   hold together whatever a container's width control says.

   Why it is needed (13 Sep 2026): Elementor's frontend.css sets every
   `.e-con.e-flex` to `--width:100%` at <=767px. A child container with
   Size: None (flex-shrink 0) then fills the whole bar and pushes the burger,
   cart and button off the right edge — the header rendered as an empty cream
   strip on phones. `!important` is deliberate: element CSS printed by
   Elementor (`.elementor-408 .elementor-element.elementor-element-x.e-con`)
   out-specifies anything scoped by a class alone.                           */

/* --- header ------------------------------------------------------------- */
.v3-el-header > .e-con-inner,
.v3-el-header.e-con-full{
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
}
/* every container inside the bar sizes to its content, never to a width % */
.v3-el-header .e-con{
  --width:auto !important;
  width:auto !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  min-width:0 !important;
}
.v3-el-header .elementor-widget-theme-site-logo img,
.v3-el-header .elementor-widget-image img{ height:auto; max-width:100%; }
.v3-el-header .elementor-button{ white-space:nowrap; }
.v3-el-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{ white-space:nowrap; }

@media (max-width:1024px){
  /* nav collapsed to the burger: logo | account cart (shop) | burger */
  .v3-el-header .elementor-widget-nav-menu.elementor-element{ --order:99; order:99; }
  .v3-el-header .e-con-inner > .e-con:last-child,
  .v3-el-header.e-con-full > .e-con:last-child{
    flex:1 1 auto !important;
    justify-content:flex-end !important;
  }
  .v3-el-header .elementor-widget-theme-site-logo img{ max-width:200px; }
}

@media (max-width:767px){
  .v3-el-header .elementor-widget-theme-site-logo img{ max-width:156px; }
  /* the logo may sit inside a container that is hidden on mobile (it did on
     13 Sep 2026) — a hidden brand is never what anyone wants */
  .v3-el-header .elementor-hidden-mobile:has(.elementor-widget-theme-site-logo){ display:flex !important; }
  .v3-el-header .elementor-hidden-mobile.elementor-widget-theme-site-logo{ display:block !important; }
  /* keep cart + burger; a Shop Now / My Account button would crowd the bar */
  .v3-el-header .elementor-widget-button{ display:none !important; }
  .v3-el-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{ padding:9px; }
}

/* --- footer ------------------------------------------------------------- */
/* the first child container of the footer is the brand + link-columns grid */
.v3-el-footer .e-con-inner > .e-con:first-child,
.v3-el-footer.e-con-full > .e-con:first-child{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
}
.v3-el-footer .e-con-inner > .e-con:first-child > .e-con,
.v3-el-footer.e-con-full > .e-con:first-child > .e-con{
  min-width:0 !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}
.v3-el-footer .elementor-widget-image img{ height:auto; max-width:100%; }

@media (max-width:1024px){
  .v3-el-footer .e-con-inner > .e-con:first-child,
  .v3-el-footer.e-con-full > .e-con:first-child{ --gap:36px 32px; --row-gap:36px; --column-gap:32px; gap:36px 32px !important; }
  /* brand column full width, three link columns 3-up */
  .v3-el-footer .e-con-inner > .e-con:first-child > .e-con:first-child,
  .v3-el-footer.e-con-full > .e-con:first-child > .e-con:first-child{ --width:100% !important; width:100% !important; }
  .v3-el-footer .e-con-inner > .e-con:first-child > .e-con:nth-child(n+2),
  .v3-el-footer.e-con-full > .e-con:first-child > .e-con:nth-child(n+2){
    --width:calc((100% - 68px) / 3) !important;
    width:calc((100% - 68px) / 3) !important;
  }
  /* wordmark in the brand column: never the full column width */
  .v3-el-footer .e-con-inner > .e-con:first-child > .e-con:first-child .elementor-widget-image img,
  .v3-el-footer.e-con-full > .e-con:first-child > .e-con:first-child .elementor-widget-image img{ max-width:240px; }
}

@media (max-width:767px){
  .v3-el-footer .e-con-inner > .e-con:first-child,
  .v3-el-footer.e-con-full > .e-con:first-child{ --gap:32px 24px; --row-gap:32px; --column-gap:24px; gap:32px 24px !important; }
  /* link columns 2-up, not a one-column stack */
  .v3-el-footer .e-con-inner > .e-con:first-child > .e-con:nth-child(n+2),
  .v3-el-footer.e-con-full > .e-con:first-child > .e-con:nth-child(n+2){
    --width:calc(50% - 12px) !important;
    width:calc(50% - 12px) !important;
  }
  .v3-el-footer .e-con-inner > .e-con:first-child > .e-con:first-child .elementor-widget-image img,
  .v3-el-footer.e-con-full > .e-con:first-child > .e-con:first-child .elementor-widget-image img{ max-width:200px; }
}