@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

/* ========= Logo color palette ========= */
:root{
  --scale: 1.15; /* keep your font scaling */
  /* Logo-driven colors */
  --navy: #0f2e44;    /* outer ring / text */
  --gold: #f5c35b;    /* inner circle */
  --red:  #e14a3b;    /* cape */
  --cream:#fff7ed;    /* warm background accent */
  --ink:  #10202c;    /* body text */

  /* map existing tokens used throughout the site */
  --purple: var(--navy);     /* previously used for headings/accents */
  --orange: var(--red);      /* used in button gradient */
  --teal:   #1f4b65;         /* subtle partner tone for gradients */
  --mint:   #1f4b65;         /* not prominent but keeps layout stable */
  --sky:    #f0f6fb;         /* soft bg tint if needed */
  --pink:   #ffe1d9;         /* optional accent */
  --bg:     #f9fcff;
  --lb-max: 96dvh;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, #f8fcff 0%, #f7fbff 40%, #ffffff 100%);
  padding-bottom:290px;
  font-size: calc(100% * var(--scale)); /* scale base text */
}

/* Decorative images */
.sky{ position:relative; overflow:hidden; }
.deco{ position:absolute; pointer-events:none; opacity:.9;}
.deco-a{ top:5rem; left:2rem; width:170px; transform:rotate(-10deg); }
.deco-b{ top:27rem; right:8rem; width:120px; transform:rotate(12deg); }
.deco-rocket{ top:52%; left:3px; width:120px; animation:float 6s ease-in-out infinite; }
.deco-earth{ bottom:18%; right:-24px; width:110px; animation:float 7s ease-in-out infinite reverse; }
.deco-cloud1{ top:58%; right:12%; width:200px; opacity:.7; }
.deco-cloud2{ top:18%; left:16%; width:220px; opacity:.7; }
.deco-cloud3{ bottom:8%; left:10%; width:240px; opacity:.6; }
.deco-star{ top:30%; right:22%; width:70px; animation:twinkle 2.6s ease-in-out infinite; }

@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@keyframes twinkle { 0%,100%{ opacity:.7; transform:scale(1) } 50%{ opacity:1; transform:scale(1.05) } }

/* Header */
header{ padding:28px 20px 8px; text-align:center; }

/* NEW: brand styles for H1 with logo */
h1.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 6px;
  font-size: clamp(calc(32px * var(--scale)), calc(7vw * var(--scale)), calc(56px * var(--scale)));
  color:var(--navy);
  text-shadow:0 2px 0 rgba(15,46,68,.08);
  justify-content: flex-start;
}
.brand-mark{
  /*width: clamp(80px, 12vw, 128px);*/
  width: clamp(100px, 15vw, 160px);
  height:auto;
  display:block;
}
.brand-text{
  letter-spacing:.3px;
}

.badges{ margin:0; }
.badge{
  display:inline-block; margin:6px; padding:8px 12px;
  border-radius:999px; font-weight:1000; color:#C73C36;
  /*background:linear-gradient(135deg, var(--navy), var(--teal));
  box-shadow:0 4px 10px rgba(15,46,68,.20);*/
}
/*.badge:last-child{ background:linear-gradient(135deg, var(--navy), var(--teal)); color:#fff; }*/
.tagline{ color:#3b4b5c; margin:8px auto 0; max-width:720px; }

/* HERO with overlays */
.hero{ display:grid; place-items:center; padding:16px 16px 24px; }
.hero-frame{ position:relative; width:min(900px, 94vw); }
.hero-img{ width:100%; height:auto; border-radius:24px; box-shadow:0 16px 44px rgba(86,49,191,.18); border:6px solid #fff; display:block; }

.hero-banner{
  position:absolute; inset:0 auto auto 0; width:100%; padding:12px 16px;
  background:rgba(255,255,255,.9); border-radius:18px 18px 0 0;
  display:grid; place-items:center;
}
.hero-banner h2{ margin:0; font-size:clamp(calc(22px * var(--scale)), calc(3.8vw * var(--scale)), calc(38px * var(--scale))); color:#000; }
.hero-banner p{ margin:4px 0 0; font-size:clamp(calc(14px * var(--scale)), calc(2.2vw * var(--scale)), calc(20px * var(--scale))); color:#333; }

.hero-svg{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  z-index: 2;
}

.callout{
  position:absolute; z-index:3; background:#fff; border:2px solid rgb(225,29,72);
  border-radius:16px; padding:10px 12px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  font-size:clamp(calc(14px * var(--scale)), calc(2.2vw * var(--scale)), calc(18px * var(--scale)));
}
.callout p{ margin:0; line-height:1.2; }
.callout.left{ left:6%; top:45%; }
.callout.right{ left:62%; top:62%; }

.hero-footer{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(255,255,255,.9); padding:10px 14px; text-align:center;
  border-radius:0 0 18px 18px; font-weight:700; z-index:3;
  font-size: calc(18px * var(--scale));
}

/* Content */
.details{ max-width:1000px; margin: 24px auto 140px; padding:0 16px; display:grid; gap:20px; grid-template-columns:1fr; }
.card{ background:#fff; border-radius:20px; padding:40px; box-shadow: 0 0 0 rgba(0,0,0,.08); border:0px solid rgba(86,49,191,.08); }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.thumb{ width:100%; border-radius:16px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }

/* Sticky checkout */
.buy-right{float: right; margin-right: 55px; }
.buy{ position:fixed; bottom:0; left:0; right:0; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.96)); border-top:0px solid rgba(86,49,191,.15); z-index:999; }
.buy-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; max-width:1000px; margin:0 auto; }
.buy .price{ color:var(--purple); }
.btn{
  appearance:none; background:linear-gradient(135deg, var(--gold), var(--orange)); color:#432;
  border:none; border-radius:999px; padding:14px 26px; font-weight:800; font-size:calc(18px * var(--scale)); cursor:not-allowed;
  box-shadow:0 10px 20px rgba(240,138,36,.35);
}
.note{ font-size:calc(13px * var(--scale)); color:#5b5b66; margin-top:6px; text-align:center; }

/* Footer */
footer{ text-align:center; padding:28px 16px 34px; color:#6b6b77; font-size:calc(14px * var(--scale)); }

/* Responsive tweaks */
@media (max-width:720px){
  .buy-inner{ flex-direction:column; text-align:center; }
  .callout.left{ left:4%; top:52%; }
  .callout.right{ left:58%; top:66%; }
}

/* ----- Measurement UI in sticky bar ----- */
.measure-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  margin:8px 0 0 50px;
  flex-wrap:wrap;
}

.measure-figure{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.measure-thumb{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  border:3px solid #fff;
}

#measure-label{
  font-weight:700;
  line-height:1.2;
}

.measure-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.measure-field__label{
  font-weight:700;
}

.measure-select{
  appearance:none;
  padding:10px 14px;
  border-radius:12px;
  border:2px solid rgba(86,49,191,.25); /* uses your purple */
  font-size:calc(16px * var(--scale));
  background:#fff;
  outline:none;
}

.measure-select:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(86,49,191,.18);
}

/* Stack better on small screens */
@media (max-width:720px){
  .measure-wrap{
    flex-direction:column;
    align-items:flex-start;
  }
  .measure-figure{
    width:100%;
  }
}


/* ----- Clickable thumbnail button ----- */
.measure-thumb-btn{
  padding:0;
  border:0;
  background:transparent;
  line-height:0;
  border-radius:12px;
}
.measure-thumb-btn:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:3px;
}

/* Clickable product thumbnails for lightbox */
.thumb-btn{
  padding:0;
  border:0;
  background:transparent;
  line-height:0;
  border-radius:12px;
}
.thumb-btn:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:3px;
}


/* ----- Lightbox dialog ----- */
.lightbox{
  width:min(96vw, 900px);
  max-width:96vw;
  max-height: var(--lb-max);
  border:0;
  border-radius:16px;
  padding:0;
  background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.lightbox::backdrop{
  background:rgba(0,0,0,.45);
}

.lightbox-body{
  padding:14px 14px 18px;
  display:grid;
  grid-template-rows: 1fr auto;   /* image grows, caption sits below */
  padding: 14px 14px 18px;
  box-sizing: border-box;
  height: var(--lb-max);           /* give the grid a definite height */
  max-height: var(--lb-max);
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.lightbox-body img{
  width:100%;
  height: 100%;
  object-fit: contain;             /* SCALE TO FIT */
  border-radius:12px;
  display:block;
}
.lightbox-caption{
  margin:0;
  font-weight:700;
  text-align:center;
}

.lightbox-close{
  position:absolute;
  top:8px; right:10px;
  width:36px; height:36px;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.65);
  color:#fff; font-size:22px; line-height:36px;
  cursor:pointer;
  z-index: 2;
}
.lightbox-close:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* Make sure it clears the sticky bar on small screens */
@media (max-width:720px){
  .lightbox{ width:96vw; }
}

/* Dynamic space for the sticky bar */
:root{
  --buy-h: 170px; /* fallback; JS will keep this accurate */
}

/* Reserve exactly enough space below the page content */
body{
  padding-bottom: calc(var(--buy-h) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

/* Make sure the main content (and FAQ) can scroll past the bar */
.details{
  margin-bottom: calc(var(--buy-h) + env(safe-area-inset-bottom, 0px) + 32px) !important;
}

/* If your FAQ might sit outside .details, keep this too */
.faq-card{
  margin-bottom: calc(var(--buy-h) + 24px);
}

/* Smooth anchor scrolling won’t hide content under the bar */
html{
  scroll-padding-bottom: calc(var(--buy-h) + 24px);
}

/* Hide all floating decorations on phone-sized screens */
@media (max-width: 920px){
  .deco { display: none !important; }
}

/* Disabled look (keeps your brand styles but clearly inactive) */
.btn[disabled],
.btn[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.6);
  box-shadow: none;
}

/* Active state when measurement selected */
.btn.is-active{
  cursor: pointer;
  opacity: 1;
  filter: none;
}

/* Optional: clearer keyboard focus when active */
.btn.is-active:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* --- Simple responsive nav --- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; max-width:1000px; margin:0 auto 10px; padding:8px 16px;
}
.nav-logo{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--navy, var(--purple)); font-weight:800; }
.nav-logo img{ width:128px; height:128px; display:block; }
.nav-links{ display:flex; gap:14px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color:var(--navy, var(--purple)); font-weight:700; padding:8px 10px; border-radius:10px; }
.nav-links a:hover, .nav-links a:focus-visible{ background:var(--cream, #fff7ed); outline:0; }

/* Ensure consistent color across states */
.nav-links a,
.nav-links a:visited { color: var(--navy, var(--purple)); text-decoration: none; }

.nav-links a:hover,
.nav-links a:focus-visible {
  background: var(--cream, #fff7ed);
  outline: 0;
}

/* Optional: current page highlight (already using aria-current on some pages) */
.nav-links [aria-current="page"] > a,
.nav-links a[aria-current="page"] {
  background: var(--cream, #fff7ed);
  font-weight: 800;
  border-radius: 10px;
}

/* Mobile menu */
.nav-toggle{ display:none; border:2px solid rgba(0,0,0,.1); background:#fff; border-radius:10px; padding:8px 12px; font-weight:800; }
@media (max-width:720px){
  .nav-toggle{ display:inline-block; }
  .nav-links{ display:none; position:absolute; left:0; right:0; top:64px; margin:0; padding:10px 16px; background:#fff; border-top:1px solid rgba(0,0,0,.08); }
  .nav-links.show{ display:grid; gap:8px; }
}

/* Keep header left-aligned per your current layout */
header{ text-align:left; }


/* Re-center header content (but keep the nav layout) */
header { text-align: center !important; }

/* Keep the nav behaving the same (not center-justified text) */
header .site-nav { text-align: initial; }

/* Center the H1 flex content */
h1.brand { justify-content: center !important; }

/* Optional: ensure badges & taglines center even if other rules change */
header .badges, header .tagline { text-align: center; margin-left: auto; margin-right: auto; }

/* Subscribe card */
.subscribe-card h2{ margin-top:0; color:var(--navy, var(--purple)); }
.sub-copy{ color:#3b4b5c; margin:6px 0 14px; }

.subscribe-form{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto; /* input grows, button hugs */
  gap: 14px;
  align-items: center;
  max-width: 720px;   /* keep it tidy on desktop */
}

.subscribe-form input[type="email"]{
  width: 100%;
  min-width: 260px;
  padding: 14px 16px;
  font-size: clamp(16px, 1.1vw, 18px);
  border: 2px solid rgba(15,46,68,.18);
  border-radius: 12px;
  background: #fff;
}

.subscribe-form .btn{
  padding: 14px 24px;
  font-size: clamp(16px, 1.2vw, 20px);
  border-radius: 999px;
}

/* Stack cleanly on phones */
@media (max-width: 640px){
  .subscribe-form{ grid-template-columns: 1fr; }
  .subscribe-form .btn{ width: 100%; }
}

.subscribe-form input[type="email"]:focus{
  border-color: var(--gold); 
  box-shadow: 0 0 0 3px rgba(245,195,91,.25);
  outline: none;
  border-color: #0f2e44;
  box-shadow: 0 0 0 3px rgba(15,46,68,.12);
}

.subscribe-form .btn:hover:not([disabled]){ filter: brightness(1.03); }

.subscribe-form input[type="email"]:invalid:focus{
  border-color:#e11d48;
  box-shadow: 0 0 0 3px rgba(225,29,72,.12);
}


.sub-msg{ margin:6px 0 0; grid-column:1 / -1; font-size:14px; color:#2c3a46; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Buttons: default to clickable */
.btn { cursor: pointer; }

/* Disabled only when actually disabled */
.btn[disabled],
.btn[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.6);
  box-shadow: none;
}

/* When JS marks it active, force the pointer (wins over earlier rules) */
.btn.is-active,
.btn.is-active:hover,
.btn.is-active:focus-visible{
  cursor: pointer !important;
}

.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* Subscribe form layout + sizing */
.subscribe-card .subscribe-form{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto; /* input grows, button hugs */
  gap: 14px;
  align-items: center;
  max-width: 720px;   /* keeps things from stretching too far on desktop */
}

.subscribe-card .subscribe-form input[type="email"]{
  width: 100%;
  min-width: 260px;
  padding: 14px 16px;
  font-size: clamp(16px, 1.1vw, 18px);
  border: 2px solid rgba(15,46,68,.18);
  border-radius: 12px;
}

.subscribe-card .subscribe-form .btn{
  padding: 14px 24px;
  font-size: clamp(16px, 1.2vw, 20px);
  border-radius: 999px;
}

/* Stack on phones */
@media (max-width: 640px){
  .subscribe-card .subscribe-form{ grid-template-columns: 1fr; }
  .subscribe-card .subscribe-form .btn{ width: 100%; }
}

/* Honeypot remains invisible */
.hp{ position:absolute; left:-9999px; opacity:0; width:0; height:0; }


/* Confetti canvas overlay */
.confetti-canvas{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9999; display: block;
}
@media (prefers-reduced-motion: reduce){
  .confetti-canvas{ display: none !important; }
}

/* Make mobile menu render ABOVE the page and sticky bar */
@media (max-width: 720px){
  .site-nav{
    position: relative;
    z-index: 1200;                 /* create a stacking context */
  }
  .nav-links{
    position: fixed;               /* take it out of the flow so it can overlay */
    top: 64px;                     /* below your header area */
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px 16px 16px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    display: none;
    z-index: 1300;                 /* above sticky bar (z:999) and hero/deco */
  }
  .nav-links.show{ display: grid; gap: 8px; }

  /* Ensure the sticky bar stays under the menu when open */
  .buy, .sticky-cta, .sticky-bar{ z-index: 1000; }
}

/* Make sure the toggle button is clickable above everything */
.nav-toggle{
  position: relative;
  z-index: 1400;
}


/* Sticky CTA height (edit if your bar grows on mobile) */
:root{ --sticky-cta-h: 88px; }

/* Your floating bar */
.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

/* Make room so content/footer isn’t covered */
.has-sticky-cta main,
.has-sticky-cta .content{ 
  padding-bottom: calc(var(--sticky-cta-h) + 24px + env(safe-area-inset-bottom));
}

.has-sticky-cta .site-footer{
  padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom));
}

/* Push the footer's last row above the sticky CTA */
:root{ --sticky-cta-h: 96px; } /* tweak if your bar is taller */

.has-sticky-cta .footer-bottom{
  padding-bottom: calc(var(--sticky-cta-h) + 16px + env(safe-area-inset-bottom));
}

/* We no longer need extra padding on the whole footer */
.has-sticky-cta .site-footer{ padding-bottom: 0; }

/* If needed, add a tiny bottom margin so the gradient doesn't look cut off */
.has-sticky-cta .site-footer{ margin-bottom: 6px; }