/* ============================================================
   SomaGenix v2 — shared chrome for the non-homepage pages.
   Restyles the existing .sg-header / .mobile-menu-panel markup
   to match the redesign. Loaded AFTER store.css so it wins.
   ============================================================ */
@font-face{font-family:"Switzer";src:url("fonts/switzer-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("fonts/martianmono.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --v2-sans:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --v2-mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --v2-paper:#F1F0ED; --v2-ink:#000; --v2-line:rgba(0,0,0,.16); --v2-num:#8C8C88;
}

/* ---------- header ---------- */
.sg-header{ background:var(--v2-paper); border-bottom:1px solid var(--v2-line); }
.sg-header .sg-header-inner{ min-height:58px; }
.sg-header .sg-wordmark{
  font-family:var(--v2-sans); font-size:19px; font-weight:600;
  letter-spacing:-.045em; color:var(--v2-ink); text-transform:none;
}
.sg-header .sg-wordmark span{ font-weight:400; }

/* NAV A — clean sans, sentence case */
.sg-header .sg-nav a{
  font-family:var(--v2-sans); font-size:14px; font-weight:500;
  letter-spacing:-.005em; text-transform:none; color:var(--v2-ink);
  position:relative; padding-block:6px;
}
.sg-header .sg-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.sg-header .sg-nav a:hover::after{ transform:scaleX(1); }

.sg-header .sg-header-actions .sg-header-button{
  font-family:var(--v2-sans); font-size:14px; font-weight:500; letter-spacing:-.005em;
  text-transform:none; color:var(--v2-ink); background:none; border:0; padding:0;
}
.sg-header .sg-header-actions{ gap:20px; }
@media (max-width:860px){ .sg-header .sg-search{ display:none; } }

/* ---------- burger ---------- */
.mobile-menu-toggle span{ background:var(--v2-ink); }

/* ---------- DRAWER B ---------- */
body .mobile-menu-panel[data-mobile-menu]{
  background:var(--v2-paper); color:var(--v2-ink);
  padding:calc(58px + 58px) clamp(22px,5.6vw,32px) 44px;
}
body .mobile-menu-panel .mm-links{
  display:flex; flex-direction:column; gap:2px; counter-reset:mm; border:0;
}
body .mobile-menu-panel .mm-links a{
  font-family:var(--v2-sans);
  font-size:clamp(34px,9vw,64px); font-weight:600; letter-spacing:-.045em; line-height:1.02;
  text-transform:none; color:var(--v2-ink);
  display:flex; align-items:baseline; justify-content:flex-start; gap:0; padding:0; border:0;
}
body .mobile-menu-panel .mm-links a::before{
  counter-increment:mm; content:"0" counter(mm);
  font-family:var(--v2-mono); font-size:14px; font-weight:400; letter-spacing:.08em;
  color:var(--v2-num); width:2.3em; flex:none;
}
body .mobile-menu-panel .mm-links a::after{ content:none; }

/* ---------- the real v2 full-screen menu, identical to the homepage ---------- */
.v2menu{
  position:fixed; inset:0; z-index:65; background:var(--v2-paper); color:var(--v2-ink);
  padding:calc(58px + 58px) clamp(22px,5.6vw,32px) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); visibility:hidden; pointer-events:none;
  transition:clip-path .72s cubic-bezier(.16,1,.3,1), visibility 0s .72s;
}
body.menu-open .v2menu{ clip-path:inset(0 0 0 0); visibility:visible; pointer-events:auto; transition:clip-path .72s cubic-bezier(.16,1,.3,1), visibility 0s; }
body.menu-open{ overflow:hidden; }
.v2menu-links{ display:flex; flex-direction:column; gap:2px; }
.v2menu-links a{
  font-family:var(--v2-sans); font-size:clamp(34px,9vw,64px); font-weight:600;
  letter-spacing:-.045em; line-height:1.02; color:var(--v2-ink); text-decoration:none;
  display:flex; align-items:baseline; justify-content:flex-start; gap:0;
  opacity:0; transform:translateY(26px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.v2menu-links a em{
  font-family:var(--v2-mono); font-style:normal; font-size:14px; font-weight:400;
  letter-spacing:.08em; color:var(--v2-num); width:2.3em; flex:none;
}
body.menu-open .v2menu-links a{ opacity:1; transform:none; }
body.menu-open .v2menu-links a:nth-child(1){ transition-delay:.16s }
body.menu-open .v2menu-links a:nth-child(2){ transition-delay:.22s }
body.menu-open .v2menu-links a:nth-child(3){ transition-delay:.28s }
body.menu-open .v2menu-links a:nth-child(4){ transition-delay:.34s }
.v2menu-foot{
  display:flex; flex-wrap:wrap; gap:8px 28px; opacity:0;
  transition:opacity .5s .46s cubic-bezier(.22,.61,.36,1);
  font-family:var(--v2-mono); font-size:9.5px; font-weight:400; letter-spacing:.17em;
  text-transform:uppercase; color:var(--v2-ink);
}
body.menu-open .v2menu-foot{ opacity:1; }
body .mobile-menu-panel[data-mobile-menu]{ display:none !important; }
@media (prefers-reduced-motion:reduce){ .v2menu,.v2menu-links a,.v2menu-foot{ transition-duration:.001ms !important } }

/* header must stay above the open menu so the close control is reachable */
body.menu-open .sg-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:var(--v2-paper); border-bottom:1px solid var(--v2-line);
}
/* burger -> X, matching the homepage */
.sg-header .mobile-menu-toggle{ position:relative; width:22px; height:14px; background:none; border:0; padding:0; }
.sg-header .mobile-menu-toggle span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--v2-ink); border-radius:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.sg-header .mobile-menu-toggle span:nth-child(1){ top:0; }
.sg-header .mobile-menu-toggle span:nth-child(2){ top:6.2px; }
.sg-header .mobile-menu-toggle span:nth-child(3){ top:12.4px; }
body.menu-open .sg-header .mobile-menu-toggle span:nth-child(1){ transform:translateY(6.2px) rotate(45deg); }
body.menu-open .sg-header .mobile-menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .sg-header .mobile-menu-toggle span:nth-child(3){ transform:translateY(-6.2px) rotate(-45deg); }

/* ============================================================
   CART — direction C: progress to next tier + one upsell
   ============================================================ */
.cart-drawer .cart-panel{
  background:var(--v2-paper); color:var(--v2-ink);
  display:flex; flex-direction:column; max-width:420px; width:100%;
}
.cart-drawer .cart-head{
  display:flex; align-items:center; gap:10px; padding:16px 20px;
  border-bottom:1px solid var(--v2-line); background:var(--v2-paper);
}
.cart-drawer .cart-head h2{
  font-family:var(--v2-sans); font-size:17px; font-weight:600; letter-spacing:-.03em;
  margin:0; display:flex; align-items:baseline; gap:10px; text-transform:none;
}
.cart-n{ font-family:var(--v2-mono); font-size:9px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--v2-num); }
.cart-drawer .cart-close{ margin-left:auto; font-size:20px; line-height:1; background:none; border:0; color:inherit; cursor:pointer; }
.cart-scroll{ flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }

.cart-prog{ border:1px solid var(--v2-line); border-radius:4px; padding:13px 14px; }
.cart-prog-bar{ height:4px; border-radius:99px; background:rgba(0,0,0,.1); overflow:hidden; }
.cart-prog-bar i{ display:block; height:100%; background:#00A3D9; transition:width .5s cubic-bezier(.16,1,.3,1); }
.cart-prog-t{ margin:10px 0 0; font-family:var(--v2-sans); font-size:13.5px; line-height:1.4; }
.cart-prog-t b{ font-weight:600; }

.cart-drawer .cart-body{ display:flex; flex-direction:column; gap:16px; flex:0 0 auto; }
.ci{ display:flex; gap:13px; }
.ci-img{
  width:56px; height:70px; flex:none; border:1px solid rgba(0,0,0,.1); border-radius:3px;
  background:linear-gradient(180deg,#F8F8F6,#ECEBE7); display:grid; place-items:center; overflow:hidden;
}
.ci-img img{ height:58px; width:auto; display:block; }
.ci-main{ flex:1; min-width:0; }
.ci-top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.ci-name{ font-family:var(--v2-sans); font-size:15px; font-weight:600; letter-spacing:-.028em; }
.ci-name i{ font-style:normal; font-weight:400; }
.ci-price{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.ci-was{ display:block; margin-top:3px; font-family:var(--v2-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--v2-num); }
.ci-qty{ display:flex; align-items:center; gap:0; margin-top:10px; }
.ci-qty button{
  width:28px; height:28px; border:1px solid rgba(0,0,0,.14); background:none; color:inherit;
  font:inherit; cursor:pointer; display:grid; place-items:center;
}
.ci-qty button:first-of-type{ border-radius:3px 0 0 3px; }
.ci-qty span{ min-width:34px; height:28px; display:grid; place-items:center; border-block:1px solid rgba(0,0,0,.14); font-size:13px; font-variant-numeric:tabular-nums; }
.ci-qty button[data-cart-inc]{ border-radius:0 3px 3px 0; }
.ci-rm{
  width:auto !important; margin-left:12px; border:0 !important; padding:0 !important;
  font-family:var(--v2-mono); font-size:8.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--v2-num);
}
.ci-rm:hover{ color:var(--v2-ink); text-decoration:underline; }
.cart-empty{ font-family:var(--v2-sans); font-size:14px; color:var(--v2-num); margin:0; }

.cart-drawer .cart-up{ display:flex; flex:0 0 auto; align-items:center; gap:12px; border:1px solid var(--v2-line); border-radius:4px; padding:11px 13px; }
.cart-up img{ width:32px; height:auto; flex:none; }
.cart-up b{ display:block; font-family:var(--v2-sans); font-size:13.5px; font-weight:600; letter-spacing:-.02em; }
.cart-up button{
  margin-left:auto; border:1px solid var(--v2-ink); background:none; color:inherit; border-radius:999px;
  padding:7px 15px; font-family:var(--v2-mono); font-size:8.5px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer;
  transition:background .3s, color .3s;
}
.cart-up button:hover{ background:var(--v2-ink); color:var(--v2-paper); }

.cart-drawer .cart-foot{
  border-top:1px solid var(--v2-line); padding:16px 20px 20px;
  display:flex; flex-direction:column; gap:9px; background:var(--v2-paper);
}
.cart-sum{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--v2-sans); font-size:14px; }
.cart-sum b{ font-size:21px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.cart-sub{ margin-top:-5px; font-family:var(--v2-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.cart-save{ color:#0B6B37; }
.cart-cta{
  margin-top:5px; height:50px; display:grid; place-items:center; border-radius:999px;
  background:var(--v2-ink); color:var(--v2-paper); text-decoration:none;
  font-family:var(--v2-mono); font-size:10px; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
}
.cart-disp{ margin:0; text-align:center; font-family:var(--v2-mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--v2-num); }
.cart-drawer .cart-ruo{ margin:4px 0 0; font-family:var(--v2-sans); font-size:11px; line-height:1.45; color:var(--v2-num); }
.cart-drawer .cart-ruo strong{ color:var(--v2-ink); font-weight:600; }