/*
Theme Name: Pota Water
Theme URI: https://example.com/pota-water
Author: Pota Water
Author URI: https://example.com
Description: Minimal, tech-clean homepage theme for Pota Water, a potassium-charged sparkling water brand focused on reducing facial puffiness and swelling.
Version: 6.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pota-water
*/

:root{
  --white:      #FFFFFF;
  --bg-alt:     #F5F5F7;
  --ink:        #1D1D1F;
  --ink-soft:   #6E6E73;
  --blue:       #0071E3;
  --blue-hover: #0077ED;
  --line:       #D2D2D7;
  --card:       #FFFFFF;
  --yellow:     #FFDE59;
  --rose:       #C4404E;
  --rose-soft:  #E4706C;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:var(--font-sans);
  font-weight:800;
  line-height:1.02;
  text-wrap:balance;
  margin:0;
  letter-spacing:-0.025em;
}
.wrap{
  max-width:1240px;
  margin:0 auto;
  padding-inline:24px;
}
.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
  border-radius:980px;
  padding:15px 28px;
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
.btn:hover{ background:#000; border-color:#000; transform:translateY(-1px); }
.btn .arrow{ font-size:15px; line-height:1; }

/* ---------- NAV ---------- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--rose);
  border-top:1px solid rgba(255,255,255,0.16);
  border-bottom:1px solid rgba(255,255,255,0.16);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:20px;
  gap:16px;
}
.logo{
  font-family:var(--font-sans);
  font-size:22px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.nav-right{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-links{
  display:flex;
  gap:32px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links li{ display:flex; }
.nav-links a{
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.85);
  transition:color .15s ease;
}
.nav-links a:hover{ color:#fff; }
.icon-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}
.icon-btn.cart-btn{ display:inline-flex; position:relative; }
.icon-btn svg{ width:23px; height:23px; }
.cart-count{
  position:absolute;
  top:-4px;
  right:-6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--rose);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
  font-family:var(--font-sans);
}
.mobile-menu{
  display:none;
  list-style:none;
  margin:0;
  padding:4px 24px 18px;
  flex-direction:column;
}
.mobile-menu a{
  display:block;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,0.2);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  color:#fff;
}
.mobile-menu.open{ display:flex; }
@media (max-width:760px){
  .nav-links{ display:none; }
}
@media (max-width:859px){
  .icon-btn.menu-toggle{ display:inline-flex; }
}
/* Desktop only: center the logo between the nav links and the icons.
   Mobile keeps the original left-logo / right-icons layout untouched
   (nav-links is already hidden below 760px, so nothing to reorder there). */
@media (min-width:760px){
  .nav .logo{ order:2; flex:1 0 0; text-align:center; }
  .nav .nav-links{ order:1; flex:1 0 0; }
  .nav .nav-right{ order:3; flex:1 0 0; justify-content:flex-end; }
}

/* ---------- HERO (mobile: original photographed can, unchanged — only the
   headline text baked into the image was edited, badge removed) ---------- */
.hero-mobile{
  position:relative;
  /* Fills to the fold (header height subtracted) with no white gap below.
     The +96px (~1in) buffer makes the section deliberately overshoot the
     fold a little, so the pink safely covers the full screen even if a
     device's real header height or dynamic-viewport math is slightly off
     — any shortfall is covered by this background color (sampled from the
     image's own bottom edge) instead of showing white. The image is never
     cropped or stretched — width:100%/height:auto, same as the original —
     so the headline text can never get clipped. Padding is reset to
     override the generic `section{ padding-block:96px }` rule below. */
  min-height:calc(100dvh - 76px + 96px);
  padding:0;
  background:#FDA5A1;
  overflow:hidden;
}
.hero-mobile-media{
  position:relative;
  width:100%;
}
.hero-mobile-media img{
  display:block;
  width:100%;
  height:auto;
}
/* Button sits in the gap between the headline and the can, and fades in */
@keyframes heroBtnFadeIn{
  from{ opacity:0; transform:translate(-50%, -50%) translateY(10px); }
  to{ opacity:1; transform:translate(-50%, -50%) translateY(0); }
}
.hero-mobile .btn{
  position:absolute;
  left:50%;
  top:34.19%;
  transform:translate(-50%, -50%);
  opacity:0;
  animation:heroBtnFadeIn 0.9s ease forwards;
  animation-delay:0.7s;
}

/* ---------- HERO (desktop: same photographed can, unchanged) ---------- */
.hero-desktop{
  position:relative;
  width:100%;
  padding:0;
  display:none;
}
.hero-desktop img{
  display:block;
  width:100%;
  height:auto;
}
/* Button is centered under the headline column (headline is centered in
   the left ~1700px of the image, so the button centers on that same
   column, not on the full image width, keeping it clear of the can) */
.hero-desktop .btn{
  position:absolute;
  left:32.9%;
  top:61.1%;
  transform:translate(-50%, -50%);
  background:#fff;
  color:var(--ink);
  border-color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
}

.hero-mobile .btn{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
}
.hero-mobile .btn:hover{
  background:var(--bg-alt);
  border-color:var(--bg-alt);
  transform:translate(-50%, -50%) translateY(-1px);
}
.hero-desktop .btn:hover{
  background:var(--bg-alt);
  border-color:var(--bg-alt);
  transform:translate(-50%, -50%) translateY(-1px);
}

@media (min-width:860px){ .hero-mobile{ display:none; } .hero-desktop{ display:block; } }

/* ---------- SECTION HEADS ---------- */
section{ padding-block:96px; }
.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head h2{ font-size:clamp(28px, 3.4vw, 42px); margin-top:10px; color:var(--ink); }
.section-head p{
  margin-top:16px;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:56ch;
}

/* ---------- FLAVORS ---------- */
.flavors{ background:var(--white); }
.flavor-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.flavor-card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.flavor-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -22px rgba(29,29,31,0.28);
}
/* One border per card, colored to match that flavor's own swatch color
   instead of a flat neutral gray on every card. */
.flavor-card.flavor-grapefruit{ border-color:#F0A38E; }
.flavor-card.flavor-lemon{ border-color:#F6D65A; }
.flavor-card.flavor-lime{ border-color:#B7DE85; }
.flavor-media{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-alt);
}
.flavor-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.flavor-card:hover .flavor-media img{ transform:scale(1.04); }
.flavor-body{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.flavor-name{
  font-family:var(--font-sans);
  font-size:20px;
  font-weight:800;
}
.flavor-note{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5;
  flex:1;
}
.flavor-shop{
  margin-top:10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink);
}
@media (max-width:820px){
  .flavor-grid{ grid-template-columns:1fr; }
}

/* ---------- POTASSIUM DEFINITION (dictionary-style entry) ---------- */
.potassium-def{ background:var(--white); }
.potassium-def-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}
.potassium-def-media{
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:1/1;
  max-width:380px;
  margin:0 auto;
  box-shadow:0 30px 60px -28px rgba(29,29,31,0.35);
}
.potassium-def-media img{
  display:block;
  width:100%; height:100%; object-fit:cover;
}
.potassium-def-word{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  font-size:clamp(32px, 4vw, 44px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-top:8px;
}
.potassium-def-phonetic{
  font-size:15px;
  font-weight:400;
  font-style:italic;
  color:var(--ink-soft);
}
.potassium-def-copy{
  margin-top:16px;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:46ch;
}
.potassium-def-stat{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  margin-top:22px;
  padding:10px 18px;
  border-radius:980px;
  background:var(--bg-alt);
  font-size:14px;
  color:var(--ink-soft);
}
.potassium-def-stat strong{ font-size:16px; color:var(--ink); font-weight:800; }
@media (min-width:760px){
  .potassium-def-grid{
    grid-template-columns:0.85fr 1fr;
    gap:64px;
  }
  .potassium-def-media{ margin:0; max-width:none; }
}

/* ---------- SCIENCE ---------- */
.science{ background:var(--bg-alt); }
.science-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.science-media img{
  border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(29,29,31,0.25);
}
.nutrient-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:8px;
}
.nutrient{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px;
}
.nutrient .amt{
  font-family:var(--font-sans);
  font-size:24px;
  font-weight:800;
  color:var(--ink);
}
.nutrient .name{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--blue);
  margin-top:2px;
}
.nutrient .desc{
  font-size:13.5px;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.5;
}
@media (max-width:900px){
  .science-grid{ grid-template-columns:1fr; gap:40px; }
  .nutrient-list{ grid-template-columns:1fr 1fr; }
}

/* ---------- EDITORIAL BREAK ---------- */
.editorial{
  position:relative;
  padding-block:0;
  background:var(--white);
}
.editorial-frame{
  position:relative;
  width:100%;
  aspect-ratio:1774 / 887;
  overflow:hidden;
  border-radius:24px;
  max-width:1240px;
  margin:0 auto;
}
.editorial-frame img{
  width:100%; height:100%; object-fit:cover;
}
.editorial-caption{
  text-align:center;
  padding-top:28px;
  font-size:17px;
  font-weight:500;
  color:var(--ink-soft);
}
@media (max-width:900px){
  .editorial-frame{ border-radius:0; }
}

/* ---------- LIFESTYLE CTA (closing section) ---------- */
.lifestyle-cta{ background:var(--bg-alt); }
.lifestyle-cta .section-head{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.lifestyle-cta .section-head p{ margin-left:auto; margin-right:auto; }
.lifestyle-card{
  position:relative;
  max-width:480px;
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,0.14);
}
.lifestyle-card img{
  width:100%;
  display:block;
}
.lifestyle-card .btn{
  position:absolute;
  left:50%;
  bottom:36px;
  transform:translateX(-50%);
  background:#fff;
  color:var(--ink);
  border-color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
}
.lifestyle-card .btn:hover{
  background:var(--bg-alt);
  border-color:var(--bg-alt);
  transform:translateX(-50%) translateY(-1px);
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--bg-alt);
  color:var(--ink-soft);
  padding-block:48px 24px;
  border-top:1px solid var(--line);
}
.foot-top{
  display:flex;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.foot-logo{
  font-family:var(--font-sans);
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.foot-tag{
  margin-top:10px;
  max-width:34ch;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.6;
}
.foot-cols{
  display:flex;
  gap:56px;
  flex-wrap:wrap;
}
.foot-col h4{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  margin:0 0 14px;
  font-weight:600;
}
.foot-col ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.foot-col a{
  text-decoration:none;
  font-size:13.5px;
  color:var(--ink);
}
.foot-col a:hover{ color:var(--blue); }
.foot-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-top:20px;
  font-size:12px;
  color:var(--ink-soft);
}

/* ---------- EMAIL CAPTURE POPUP ---------- */
.popup-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(20,10,10,0.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.popup-overlay.open{ opacity:1; visibility:visible; }
.popup-card{
  position:relative;
  width:100%;
  max-width:420px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:44px 32px 32px;
  border-radius:28px;
  text-align:center;
  color:#fff;
  background:linear-gradient(165deg, var(--rose) 0%, var(--rose-soft) 55%, #FDA6A1 100%);
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
  transform:scale(0.96);
  transition:transform .3s ease;
}
.popup-overlay.open .popup-card{ transform:scale(1); }
@media (min-width:760px){
  .popup-card{
    max-width:600px;
    padding:64px 60px 48px;
  }
}
.popup-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  color:#fff;
  opacity:0.55;
  cursor:pointer;
  line-height:1;
  transition:opacity .15s ease;
}
.popup-close:hover{ opacity:0.9; }
.popup-close svg{ width:16px; height:16px; }
@media (min-width:760px){
  .popup-close{ top:20px; right:20px; width:36px; height:36px; }
  .popup-close svg{ width:18px; height:18px; }
}
.popup-logo{
  font-size:19px;
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:22px;
}
.popup-eyebrow{
  margin:0;
  font-size:20px;
  font-weight:400;
  opacity:0.92;
}
.popup-headline{
  margin:2px 0 18px;
  font-size:42px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.popup-question{
  margin:0 0 20px;
  font-size:15px;
  font-weight:500;
  opacity:0.92;
}
.popup-options{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:18px;
}
.popup-option{
  appearance:none;
  background:#fff;
  color:var(--ink);
  border:none;
  border-radius:999px;
  padding:16px 20px;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.popup-option:hover{ background:var(--bg-alt); transform:translateY(-1px); }
.popup-skip{
  appearance:none;
  background:none;
  border:none;
  color:rgba(255,255,255,0.88);
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:500;
  text-decoration:underline;
  cursor:pointer;
  padding:4px;
}
.popup-subtext{
  margin:0 0 24px;
  font-size:14.5px;
  line-height:1.55;
  opacity:0.92;
}
.popup-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.popup-input{
  width:100%;
  padding:16px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.5);
  background:#fff;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  box-sizing:border-box;
}
.popup-input::placeholder{ color:var(--ink-soft); }
.popup-continue{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:16px 20px;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease;
}
.popup-continue:hover{ background:#000; }
.popup-fineprint{
  margin:16px 0 0;
  font-size:11.5px;
  line-height:1.5;
  opacity:0.78;
}
.popup-fineprint a{ color:#fff; }
.popup-step[hidden]{ display:none; }
@media (min-width:760px){
  .popup-logo{ font-size:22px; margin-bottom:28px; }
  .popup-eyebrow{ font-size:26px; }
  .popup-headline{ font-size:64px; margin:4px 0 28px; }
  .popup-question{ font-size:18px; margin-bottom:28px; }
  .popup-options{ gap:16px; margin-bottom:22px; }
  .popup-option{ padding:20px 24px; font-size:17px; border-radius:999px; }
  .popup-skip{ font-size:14.5px; }
  .popup-subtext{ font-size:16.5px; margin-bottom:32px; }
  .popup-form{ gap:14px; }
  .popup-input{ padding:19px 22px; font-size:16.5px; }
  .popup-continue{ padding:19px 22px; font-size:13.5px; }
  .popup-fineprint{ font-size:12.5px; margin-top:20px; }
}

/* ---------- SHOP PAGE ---------- */
.shop-hero{
  padding-block:40px 0;
  text-align:center;
}
.shop-hero .eyebrow{ display:block; margin-bottom:8px; }
.shop-hero h1{
  font-size:clamp(32px, 4.2vw, 48px);
  color:var(--ink);
}
.shop-hero-accent{
  width:56px;
  height:4px;
  border-radius:999px;
  margin:20px auto 0;
  background:linear-gradient(90deg, var(--rose), var(--rose-soft));
}
.shop-hero-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.shop-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg-alt);
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  padding-block:20px 80px;
}
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,0.08);
}
/* One border per card, colored to match that flavor's own swatch color
   instead of a flat neutral gray on every card. */
.product-card.flavor-grapefruit{ border-color:#F0A38E; }
.product-card.flavor-lemon{ border-color:#F6D65A; }
.product-card.flavor-lime{ border-color:#B7DE85; }
.product-media{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--bg-alt);
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
}
.product-badge{
  position:absolute;
  top:10px; left:10px;
  background:var(--ink);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
}
.product-body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.product-name{
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.product-note{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:34px;
}
.product-meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.product-price{
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}
.product-add{
  appearance:none;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:9px 16px;
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease;
}
.product-add:hover{ background:#000; }

@media (min-width:620px){
  .shop-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}
@media (min-width:960px){
  .product-body{ padding:20px 20px 22px; gap:6px; }
  .product-name{ font-size:17px; }
  .product-note{ font-size:13.5px; min-height:38px; }
  .product-price{ font-size:17px; }
  .product-add{ padding:11px 18px; font-size:12px; }
}

/* ---------- PRODUCT DETAIL (single product) ---------- */
.product-detail{ padding-block:48px 96px; }
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:32px;
}
.back-link:hover{ color:var(--ink); }
.product-detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
.product-detail-media{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(165deg, var(--bg-alt) 0%, #ECECEF 100%);
  aspect-ratio:4/5;
  box-shadow:0 40px 70px -32px rgba(29,29,31,0.32), 0 1px 0 rgba(29,29,31,0.04);
}
.product-detail-media img{
  width:100%; height:100%; object-fit:cover;
}
.product-detail-info{ display:flex; flex-direction:column; }
.product-detail-info h1{
  font-size:clamp(30px, 4vw, 44px);
  color:var(--ink);
  margin-top:6px;
}
.product-detail-desc{
  margin-top:18px;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:52ch;
}
.product-detail-price{
  margin-top:22px;
}
.product-detail-price .total{
  display:inline-block;
  font-size:26px;
  font-weight:800;
  color:var(--ink);
}
.product-detail-price .unit{
  display:block;
  font-size:12px;
  color:var(--ink-soft);
  margin-top:4px;
}
.price-tbd{ font-size:16px; font-weight:600; color:var(--ink-soft); }
.product-detail-actions{
  margin-top:28px;
}
/* Variable products: hide WooCommerce's own Pack Size dropdown and its
   duplicate price line — the tier buttons above drive the real dropdown
   behind the scenes, and #totalPrice already mirrors the real price. */
.product-detail-actions .variations,
.product-detail-actions .reset_variations,
.product-detail-actions .woocommerce-variation-price,
.product-detail-actions .woocommerce-variation-description{
  display:none !important;
}
.product-detail-nutrients{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.nutrient-pill{
  font-size:12.5px;
  color:var(--ink-soft);
  background:var(--bg-alt);
  border-radius:999px;
  padding:8px 14px;
  box-shadow:inset 0 1px 2px rgba(29,29,31,0.06);
}
.nutrient-pill strong{ color:var(--ink); font-weight:800; }

/* Style WooCommerce's real add-to-cart form to match the theme — quantity
   stepper and Add to Cart sit side by side in one row, stepper compact,
   button filling the rest of the width. */
.product-detail-actions form.cart{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
/* Variable products: WooCommerce nests the real quantity input and Add to
   Cart button one level deeper, inside .woocommerce-variation-add-to-cart
   (itself inside .single_variation_wrap) — NOT as direct children of
   form.cart. The flex rule above only reaches direct children, so on a
   Variable product it never actually applied to this pair, which is what
   made them stack instead of sitting side by side. Flex that real wrapper
   too so both modes line up the same way. */
.product-detail-actions .woocommerce-variation-add-to-cart{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}
.product-detail-actions .quantity{
  display:flex;
  align-items:center;
  margin:0;
}
/* Real WooCommerce quantity <input>, wrapped by single-product.php's small
   inline script in a .qty-stepper with − / + buttons on either side. The
   input itself still carries the real value WooCommerce reads at submit. */
.qty-stepper{
  display:inline-flex;
  align-items:center;
  border:1.5px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  flex:none;
}
.qty-stepper-btn{
  appearance:none;
  background:none;
  border:none;
  width:40px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease;
}
.qty-stepper-btn:hover{ background:var(--bg-alt); }
.product-detail-actions .qty{
  width:34px;
  padding:12px 0;
  border:none;
  text-align:center;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  -moz-appearance:textfield;
}
.product-detail-actions .qty::-webkit-inner-spin-button,
.product-detail-actions .qty::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.product-detail-actions .single_add_to_cart_button,
.product-detail-actions .single_add_to_cart_button.button,
.product-detail-actions .single_add_to_cart_button.alt,
.woocommerce .product-detail-actions .single_add_to_cart_button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-width:150px;
  background:var(--ink) !important;
  color:#fff !important;
  border:1px solid var(--ink) !important;
  border-radius:980px;
  padding:15px 32px;
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 28px -12px rgba(29,29,31,0.4);
  transition:background .2s ease, transform .15s ease, box-shadow .15s ease;
}
.product-detail-actions .single_add_to_cart_button:hover,
.woocommerce .product-detail-actions .single_add_to_cart_button:hover{
  background:#000 !important;
  border-color:#000 !important;
  transform:translateY(-1px);
  box-shadow:0 16px 32px -12px rgba(29,29,31,0.45);
}
.product-detail-actions p.stock{
  margin:12px 0 0;
  font-size:13px;
  color:var(--ink-soft);
}
.product-detail-actions p.stock.out-of-stock{ color:var(--rose); }

@media (min-width:760px){
  .product-detail-grid{
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:64px;
  }
}

/* ---------- PRODUCT PAGE (centralized, flavor + tier picker) ---------- */
.product-page{ padding-block:48px 96px; }
.product-page-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
.product-page-media{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--card);
  border:2px solid var(--line);
  /* Matches the real product photo's own aspect ratio (2:3) so the image
     fills the frame edge to edge with no letterboxing — that mismatch was
     why the border looked like it had a big, uneven gap around the can. */
  aspect-ratio:2/3;
}
/* One border, colored to match this product's own flavor swatch — same
   single-border pattern used on the flavor/product cards elsewhere. */
.product-page-media.flavor-grapefruit{ border-color:#F0A38E; }
.product-page-media.flavor-lemon{ border-color:#F6D65A; }
.product-page-media.flavor-lime{ border-color:#B7DE85; }
.product-page-media img{
  display:block;
  width:100%; height:100%; object-fit:contain; object-position:center;
}
.product-page-info{ display:flex; flex-direction:column; }
.product-page-info h1{
  font-size:clamp(30px, 4vw, 44px);
  color:var(--ink);
  margin-top:6px;
}
.product-page-tagline{
  margin-top:8px;
  font-size:16px;
  color:var(--ink-soft);
}

/* Flavor swatches */
.flavor-swatches-wrap{ display:flex; gap:12px; margin-top:24px; }
.flavor-swatch-item{ display:flex; flex-direction:column; align-items:center; }
.flavor-swatch{
  display:block;
  cursor:pointer;
  width:52px;
  height:52px;
  border-radius:14px;
  border:2px solid transparent;
  padding:3px;
  background:none;
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.flavor-swatch-fill{
  display:block;
  width:100%;
  height:100%;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(29,29,31,0.18), inset 0 1px 1px rgba(255,255,255,0.4);
}
.flavor-swatch:hover{ transform:translateY(-2px); }
.flavor-swatch.active{
  border-color:var(--rose);
  box-shadow:0 2px 8px rgba(196,64,78,0.18);
}
.flavor-swatch-label{
  display:block;
  margin-top:6px;
  font-size:10.5px;
  font-weight:600;
  text-align:center;
  color:var(--ink-soft);
}

.product-page-desc{
  margin-top:20px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:52ch;
}

/* Tier selector */
.tier-select{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:28px;
  max-width:420px;
}
.tier-btn{
  appearance:none;
  cursor:pointer;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:14px 8px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 1px 2px rgba(29,29,31,0.04);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tier-btn:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 10px 20px -12px rgba(29,29,31,0.25);
}
.tier-btn.active{
  border-color:var(--rose);
  background:rgba(196,64,78,0.06);
  box-shadow:0 10px 24px -10px rgba(196,64,78,0.35);
}
.tier-cans{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:0.01em;
}
.tier-price{
  font-size:12px;
  color:var(--ink-soft);
}
.tier-save{
  display:inline-block;
  margin-top:2px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--rose);
}

@media (min-width:760px){
  .product-page-grid{
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:64px;
  }
}

/* Mobile: shrink the hero image and reorder so the product name, flavor,
   and pack size all land above the fold — the description and nutrient
   pills move below the pack-size picker instead of ahead of it. */
@media (max-width:759px){
  .product-page{ padding-block:16px 64px; }
  /* gap:0 — .product-page-info becomes `display:contents` below, so its
     children join .product-page-media as direct items of this grid.
     Spacing between all of them is handled by each item's own
     margin-top instead, so a grid `gap` here doesn't double it up. */
  .product-page-grid{ gap:0; }
  .product-page-media{
    /* Keep the real 2:3 photo ratio (so the border still hugs the can
       tightly) but size it off height, centered, instead of stretching
       to the full column width — that stretch was what made the mobile
       border look like it had huge left/right gaps. */
    justify-self:center;
    width:auto;
    height:clamp(280px, 44vh, 440px);
    order:4;
    margin-top:20px;
  }
  /* The flavor name + tagline read as the hook above the photo, so the
     info column's children become direct items of the same single-column
     grid as the photo — that's what lets `order` interleave the photo
     between them instead of the whole info block always trailing it. */
  .product-page-info{ display:contents; }
  .product-page-info .eyebrow{ order:1; font-size:11px; }
  .product-page-info h1{
    order:2;
    font-size:24px;
    margin:4px 0 0;
    padding:0;
    text-indent:0;
  }
  .product-page-tagline{ order:3; margin-top:6px; font-size:14.5px; }
  .flavor-swatches-wrap{ order:5; margin-top:20px; gap:10px; }
  .flavor-swatch{ width:40px; height:40px; }
  .tier-select{ order:6; margin-top:14px; gap:8px; }
  .tier-btn{ padding:10px 6px; }
  /* These three are the REAL classes single-product.php renders for the
     price / real WooCommerce add-to-cart form / nutrient pills — a
     previous pass here mistakenly targeted .product-page-price /
     .product-page-add-row / .product-page-nutrients (classes this
     template never uses), so these fell back to order:0 and rendered
     ahead of the flavor swatches and tier picker instead of below the
     photo. Fixed to match the template's actual markup. */
  .product-detail-price{ order:7; margin-top:18px; }
  .product-detail-actions{ order:8; margin-top:14px; }
  .product-detail-nutrients{ order:9; margin-top:22px; padding-top:18px; }
  .product-page-desc{ order:10; margin-top:14px; font-size:12.5px; }
}

/* ---------- CART DRAWER (real cart, rendered as a sidebar) ---------- */
.cart-drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(29,29,31,0.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:120;
}
.cart-drawer-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.cart-drawer{
  position:fixed;
  top:0;
  right:-420px;
  width:400px;
  max-width:92vw;
  height:100%;
  height:100dvh;
  background:#fff;
  box-shadow:-24px 0 60px -20px rgba(29,29,31,0.35);
  z-index:121;
  display:flex;
  flex-direction:column;
  transition:right .3s ease;
}
.cart-drawer.open{ right:0; }
/* Mobile: the cart drawer covers the whole screen instead of staying a
   narrow side panel — still slides in from the right, with the same
   close (×) button to dismiss it and keep shopping. */
@media (max-width:640px){
  .cart-drawer{
    width:100%;
    max-width:100vw;
    right:-100%;
    box-shadow:none;
  }
}
.cart-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 24px 18px;
  border-bottom:1px solid var(--line);
}
.cart-drawer-title{
  font-size:18px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.cart-drawer-count{ font-weight:600; color:var(--ink-soft); }
.cart-drawer-close{
  appearance:none;
  background:none;
  border:none;
  font-size:26px;
  line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
  padding:4px;
}
.cart-drawer-close:hover{ color:var(--ink); }
.cart-drawer-body{
  flex:1;
  overflow-y:auto;
  padding:20px 24px 24px;
  display:flex;
  flex-direction:column;
}
.cart-drawer-items{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.cart-drawer-item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:start;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.cart-drawer-item-media{
  width:64px;
  height:64px;
  border-radius:12px;
  overflow:hidden;
  background:var(--bg-alt);
}
.cart-drawer-item-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cart-drawer-item-name{
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}
.cart-drawer-item-qty-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.cart-drawer-qty-btn{
  appearance:none;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease;
}
.cart-drawer-qty-btn:hover{ border-color:var(--ink); }
.cart-drawer-qty-value{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  min-width:14px;
  text-align:center;
}
.cart-drawer-remove{
  appearance:none;
  background:none;
  border:none;
  padding:0;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cart-drawer-remove:hover{ color:var(--rose); }
.cart-drawer-item-price{
  font-size:13.5px;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
}
.cart-drawer-subtotal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:20px;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}
.cart-drawer-note{
  margin-top:4px;
  font-size:12px;
  color:var(--ink-soft);
}
.cart-drawer-checkout{
  display:flex;
  width:100%;
  justify-content:center;
  margin-top:16px;
}
.cart-drawer-empty{
  margin:auto;
  text-align:center;
  color:var(--ink-soft);
}
.cart-drawer-empty p{ margin-bottom:16px; font-size:14px; }
.cart-drawer-empty .btn{ display:inline-flex; }