/* =========================================================
   SHOP NOW — page-specific styles

   Builds entirely on tokens and components already defined in
   styles.css (--green, --green-deeper, --cream, --cream-soft,
   --ink, --ink-soft, --line, --radius-lg, --shadow-soft, .btn,
   .active-chip, .trust-item, .final-cta-trust, .faq-item,
   .value-cards, .review-card, .feels-*) so this page stays
   visually identical to the rest of the site. Three things are
   genuinely new here and defined below: the sticky media/scroll
   layout, the benefit check-list, and the comparison table.
========================================================= */

.shop-hero{
  padding-top:56px;
  padding-bottom:72px;
}

/* ---- Sticky image / scrolling content ---------------------------------
   Same position:sticky mechanism as the site's existing
   .faq-inner / .faq-content pair (index.html's FAQ + Feels Like
   section): both columns sit in one grid with align-items:start,
   the left column sticks at a fixed offset, and it releases on
   its own once the taller right column's bottom edge scrolls
   into view — no scroll-tracking JS needed. ------------------------- */

.shop-sticky-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);
  align-items:start;
}

.shop-sticky-media{
  position:sticky;
  top:clamp(88px,10vh,120px);
  width:100%;
}

/* Base sizing: fills the width of whatever column/wrap it's in at
   every screen size, height simply following the aspect-ratio.
   Two different caps apply depending on layout:
   - min-width:901px (two-column sticky layout): the image column
     is already only ~half the page, so a max-height is enough.
   - max-width:900px (stacked layout): the "column" here is the
     full .wrap width, which on tablet-sized screens is still wide
     enough that width:100% + a 4:5 ratio blows the image up to
     900px+ tall. Capped with a max-width instead, centered, so it
     scales down proportionally rather than fighting the ratio. */
.shop-product-placeholder{
  width:100%;
  aspect-ratio:4/5;
}

@media(min-width:901px){
  .shop-product-placeholder{
    max-height:min(620px,72vh);
  }
}

@media(max-width:900px){
  .shop-product-placeholder{
    max-width:420px;
    margin:0 auto;
  }
}

.shop-scroll-content .final-cta-rating{
  margin-bottom:4px;
}

.shop-scroll-content h1{
  margin-top:14px;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.15;
  color:var(--ink);
}

.shop-scroll-content .desc{
  margin-top:16px;
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.6;
}

.shop-scroll-content .actives-list{
  margin-top:20px;
}

/* ---- Benefit check-list ------------------------------------------------ */

.shop-check-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.shop-check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:clamp(.8rem,1.6vw,.9rem);
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
}

.shop-check-icon{
  flex-shrink:0;
  width:1.6em;
  height:1.6em;
  border-radius:50%;
  background:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}

.shop-check-icon svg{
  width:0.75em;
  height:0.75em;
}

/* ---- Buy button + trust row -------------------------------------------- */

.shop-buy-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  text-align:center;
  margin-top:22px;
}

/* ---- Buy button cart icon + add-to-cart animation ----------------------
   A small "product" dot sits just above the cart outline and loops
   through a drop-into-the-cart motion continuously (cartDrop) so the
   icon always reads as "something going into the cart" next to the
   Get Mugtea label. On click, shop-now.js adds .is-adding to the
   button: the label swaps to "Adding...", the drop speeds up
   (cartDropFast) and the cart outline gives a quick shake
   (cartShake) to sell the "filling up" moment. Once the (simulated)
   add completes, shop-now.js swaps to .is-added for a brief pop,
   then removes both classes and the idle loop above simply resumes
   on its own — no extra JS state needed for the "back to normal"
   step. --------------------------------------------------------- */

.shop-buy-icon{
  position:relative;
  width:19px;
  height:19px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.shop-buy-icon .cart-icon{
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin:50% 70%;
}

.cart-drop-item{
  position:absolute;
  top:-6px;
  left:56%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%,0) scale(.6);
  opacity:0;
  animation:cartDrop 1.8s ease-in-out infinite;
}

@keyframes cartDrop{
  0%{   transform:translate(-50%,-3px) scale(.6); opacity:0; }
  18%{  opacity:1; }
  55%{  transform:translate(-50%,8px) scale(1); opacity:1; }
  72%{  transform:translate(-50%,9px) scale(.7); opacity:0; }
  100%{ transform:translate(-50%,-3px) scale(.6); opacity:0; }
}

.shop-buy-btn.is-adding .cart-drop-item{
  animation:cartDropFast .5s ease-in-out infinite;
}

@keyframes cartDropFast{
  0%{   transform:translate(-50%,-3px) scale(.6); opacity:0; }
  20%{  opacity:1; }
  60%{  transform:translate(-50%,8px) scale(1.15); opacity:1; }
  80%{  transform:translate(-50%,9px) scale(.75); opacity:0; }
  100%{ transform:translate(-50%,-3px) scale(.6); opacity:0; }
}

.shop-buy-btn.is-adding .cart-icon{
  animation:cartShake .4s ease-in-out 3;
}

@keyframes cartShake{
  0%,100%{ transform:rotate(0deg); }
  25%{     transform:rotate(-10deg); }
  75%{     transform:rotate(10deg); }
}

.shop-buy-btn.is-added .cart-icon{
  animation:cartPop .4s ease;
}

@keyframes cartPop{
  0%{   transform:scale(1); }
  45%{  transform:scale(1.3); }
  100%{ transform:scale(1); }
}

@media(prefers-reduced-motion:reduce){
  .cart-drop-item{
    animation:none;
    opacity:0;
  }
  .shop-buy-btn.is-adding .cart-icon,
  .shop-buy-btn.is-added .cart-icon{
    animation:none;
  }
}

.shop-scroll-content .final-cta-trust{
  flex-wrap:nowrap;
  gap:10px;
}

/* Keep all three trust items on a single row at every width — only
   the wording inside each one wraps to a second line as space
   shrinks, instead of a whole item dropping to a new row. */
.shop-scroll-content .final-cta-trust .trust-item{
  flex:1 1 0;
  min-width:0;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}

.shop-scroll-content .final-cta-trust .trust-item span{
  font-size:clamp(.66rem,2vw,.82rem);
  line-height:1.25;
}

/* ---- Quick answers block inside the scrolling column ------------------- */

.shop-quick-faq{
  margin-top:44px;
  padding-top:36px;
  border-top:1px solid var(--line);
}

.shop-quick-faq h3{
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:6px;
}

.shop-quick-faq .faq-list{
  margin-top:14px;
}

/* ---- Feels Like block inside the scrolling column ---------------------- */

.shop-feels-block{
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid var(--line);
}

.shop-feels-block .feels-grid{
  justify-content:center;
}

/* Packed With intentionally keeps the site's default .packed-list
   layout (a left-aligned vertical list of icon+label rows, 14px
   gap — see index.html's "Why Velnaura?" section) rather than a
   centered wrapping grid like Feels Like above it. The two use
   different patterns by design, so no override is needed here. */

/* ---- Results value-cards (4 stats) --------------------------------------
   Explicit column counts rather than auto-fit: auto-fit's breakpoint
   depends on card content width, so it was leaving an uneven 3+1
   split on medium screens. Fixed at 4-across on wide screens and
   exactly 2-across below that, so shrinking always pairs two cards
   per row instead of stranding a single one on its own row. Scoped
   to #results (not the shared .value-cards rule) so our-science.html's
   3-card layout is unaffected. */
#results .value-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,28px);
}

@media(max-width:760px){
  #results .value-cards{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ---- Results heading + intro (overrides the shared .value-head
   sizing, which was built for the homepage's short two-line
   headline and a narrow 780px/50ch column) --------------------- */

#results .value-head{
  max-width:none;
}

#results .value-head h2{
  font-size:clamp(1.2rem,4.6vw,2.9rem);
  white-space:nowrap;
}

#results .vh-line1{
  white-space:nowrap;
}

#results .value-head p{
  max-width:none;
}

@media(max-width:600px){
  #results .value-head h2{
    font-size:clamp(.95rem,5.4vw,1.6rem);
  }
}


/* ---- What's Whipped In + Mugtea vs. The Old Routine ---------------------
   Two columns side by side: ingredients accordion (left) and the
   comparison table (right), sharing one section so both headings
   sit in the same row at the top of the page. Below 900px the
   grid collapses to a single stacked column — ingredients first,
   comparison table underneath — matching the same breakpoint and
   collapse pattern already used by .shop-sticky-grid above. ---- */

.whip-compare-section{
  padding-top:88px;
  padding-bottom:88px;
}

/* Tighter side margins just for this section so the two columns
   have more breathing room to sit next to each other — the site's
   shared .wrap padding/max-width is generous by default, this
   narrows it specifically here without touching .wrap globally. */
.whip-compare-section .wrap{
  max-width:1360px;
  padding-left:clamp(14px,2.6vw,32px);
  padding-right:clamp(14px,2.6vw,32px);
}

.whip-compare-grid{
  display:grid;
  /* Table column runs slightly wider than the ingredients column,
     since the comparison table has more horizontal content
     (four cells per row) to fit comfortably. */
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.2vw,56px);
  align-items:start;
}

.whip-col,
.compare-col{
  min-width:0;
}

/* ---- Sticky ingredients / scrolling table --------------------------------
   Same position:sticky mechanism used by .shop-sticky-media /
   .shop-scroll-content further up this page: both columns sit in
   one grid with align-items:start, the shorter left column (the
   ingredients accordion) sticks at a fixed offset while the taller
   right column (the comparison table) scrolls past it, and it
   releases on its own once the table's bottom edge scrolls into
   view — at that point both columns simply move up the page
   together as part of normal scroll. No scroll-tracking JS needed.
--------------------------------------------------------------- */
.whip-col{
  position:sticky;
  top:clamp(88px,10vh,120px);
}

@media(max-width:900px){
  .whip-col{
    position:static;
  }
}

.whip-col .section-head,
.compare-col .section-head{
  max-width:none;
}

/* Headings stay on a single line at every width: instead of
   wrapping to a second line as the column narrows, the font-size
   itself scales down via clamp() — same technique already used
   by #results' h2 further down this file. Each column gets its
   own clamp values since "Mugtea vs. The Old Routine" is longer
   than "What's Whipped In" and needs to shrink further to still
   fit one line at the same column width. */
.whip-col .section-head h2,
.compare-col .section-head h2{
  white-space:nowrap;
}

.whip-col .section-head h2{
  font-size:clamp(.95rem,3.6vw,1.9rem);
}

.compare-col .section-head h2{
  font-size:clamp(.72rem,3.1vw,1.9rem);
}

.compare-col .compare-grid{
  max-width:none;
  margin:0;
}

.mugtea-green-text{
  color:var(--green-deeper);
}

@media(max-width:900px){

  .whip-compare-grid{
    grid-template-columns:1fr;
    gap:56px;
  }

  /* Full page width is available again once the columns stack,
     so both headings can render larger while still keeping to
     one line. */
  .whip-col .section-head h2{
    font-size:clamp(1.3rem,6vw,2.3rem);
  }

  .compare-col .section-head h2{
    font-size:clamp(1.05rem,5.4vw,2.3rem);
  }

}

@media(max-width:480px){

  .whip-col .section-head h2{
    font-size:clamp(1.05rem,6.4vw,1.7rem);
  }

  .compare-col .section-head h2{
    font-size:clamp(.88rem,6vw,1.7rem);
  }

}

/* ---- Comparison grid ----------------------------------------------------
   A CSS grid rather than a real <table>: real table cells can't grow
   independently of their row, so there's no way to make one column's
   header/footer cell poke out past the table's edges. Each .compare-row
   uses display:contents so its four cells still land in the right
   grid columns while staying grouped in markup for readability.
--------------------------------------------------------------------- */

.compare-grid{
  display:grid;
  grid-template-columns:1.3fr repeat(3,1fr);
  max-width:820px;
  margin:0 auto;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  position:relative;
}

.compare-row{
  display:contents;
}

.compare-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 14px;
  text-align:center;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
}

.compare-row:last-child .compare-cell{
  border-bottom:none;
}

.compare-label{
  justify-content:flex-start;
  text-align:left;
  font-weight:700;
  padding-left:22px;
}

.compare-head{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.85rem;
  color:var(--ink);
  padding-top:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.compare-row:first-child .compare-label{
  border-bottom:1px solid var(--line);
}

.is-yes{
  color:var(--green-deeper);
  font-weight:800;
}

.is-no{
  color:#B5493F;
  font-weight:800;
}

.compare-stars{
  font-size:1.6rem;
  letter-spacing:-2px;
  line-height:1;
}

.compare-stars-gold{
  color:var(--yellow);
}

.compare-stars-dark{
  color:var(--ink);
}

/* ---- The highlighted Mugtea column --------------------------------------
   Every cell in the column gets the same green fill/yellow text, so the
   colour reads as one continuous stripe. Only the very first (header)
   and very last cell get pulled outward with a negative margin, extra
   padding and rounded outer corners — that's what makes the column
   visually poke out above and below the rest of the grid. Margins work
   here because these are ordinary grid items, not table cells. -------- */

.compare-highlight{
  background:var(--green-deeper);
  color:var(--yellow);
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,0.18);
  position:relative;
  z-index:1;
}

.compare-highlight-top{
  margin-top:-18px;
  padding-top:34px;
  padding-bottom:24px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -8px 20px rgba(0,107,49,0.25);
  z-index:2;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:800;
  line-height:1;
}

.compare-highlight-bottom{
  margin-bottom:-18px;
  padding-bottom:34px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  border-bottom:none;
  box-shadow:0 8px 20px rgba(0,107,49,0.25);
  z-index:2;
}

/* ---- Responsive: collapse sticky layout on narrower screens ------------ */

@media(max-width:900px){

  /* Only the grid itself stacks here — aspect-ratio and max-height
     stay exactly as defined above, so the product image keeps
     scaling smoothly with the viewport instead of jumping to a
     different fixed size at this breakpoint. */
  .shop-sticky-grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .shop-sticky-media{
    position:static;
  }

}

@media(max-width:620px){

  .compare-grid{
    grid-template-columns:1.1fr repeat(3,minmax(0,1fr));
    font-size:.78rem;
  }

  .compare-cell{
    padding:10px 6px;
    font-size:.78rem;
  }

  .compare-label{
    padding-left:12px;
  }

  .compare-highlight-top{
    padding-top:24px;
    padding-bottom:16px;
    font-size:clamp(1.05rem,5vw,1.4rem);
  }

  .compare-stars{
    font-size:1.15rem;
    letter-spacing:-1.5px;
  }

  .compare-highlight-bottom{
    padding-bottom:24px;
  }

}