/* ============================================================
   MatchaFlow, PDP proof layer
   Loads after styles.css. Adds: buy box spec strip, perk line,
   in buybox testimonial, creator video wall, photo review grid.
   ============================================================ */

/* ---------- Buy box: spec strip ---------- */
.pdp-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
  padding:16px 0;margin:4px 0 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pdp-spec{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.01em}
.pdp-spec svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--lime-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buy box: review jump link ---------- */
.pdp-proof-link{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 14px;font-size:13.5px;font-weight:600;color:var(--lime-deep);
  letter-spacing:.01em;text-decoration:underline;text-underline-offset:3px;
  transition:color .2s ease;
}
.pdp-proof-link:hover{color:var(--ink)}
.pdp-proof-link .stars{letter-spacing:2px;color:var(--lime-deep);text-decoration:none}

/* ---------- Buy box: perk line ---------- */
.pdp-perk{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 0 0;padding:12px 14px;
  background:var(--lime-soft);border-radius:10px;
  font-size:13.5px;line-height:1.5;color:var(--ink);font-weight:500;
}
.pdp-perk svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;stroke:var(--lime-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pdp-perk strong{font-weight:700}

/* ---------- Buy box: inline testimonial video ---------- */
.pdp-vouch{
  display:flex;gap:14px;align-items:center;
  margin:18px 0 0;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:var(--off);
}
.pdp-vouch-media{
  position:relative;flex:0 0 84px;width:84px;aspect-ratio:4/5;
  border-radius:9px;overflow:hidden;background:var(--off);
}
.pdp-vouch-media img,.pdp-vouch-media video{width:100%;height:100%;object-fit:cover;display:block}
.pdp-vouch-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);transition:opacity .25s ease;pointer-events:none;
}
.pdp-vouch-media.is-playing .pdp-vouch-play{opacity:0}
.pdp-vouch-play svg{width:22px;height:22px;fill:#fff;stroke:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.pdp-vouch-body{min-width:0}
.pdp-vouch-quote{
  margin:0 0 7px;font-family:'Fraunces',Georgia,serif;font-size:15.5px;
  line-height:1.35;font-weight:500;font-style:italic;color:var(--ink);
}
.pdp-vouch-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--ink-soft);font-weight:600;margin:0}
.pdp-vouch-verified{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;white-space:nowrap;
  background:var(--lime-soft);color:var(--lime-deep);border-radius:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Creator video wall ---------- */
.creatorwall{background:var(--off);padding:88px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.creatorwall .section-head{margin-bottom:34px}
.creatorwall-track{
  display:flex;gap:16px;overflow-x:auto;padding:4px 0 18px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.creatorwall-track::-webkit-scrollbar{height:5px}
.creatorwall-track::-webkit-scrollbar-track{background:transparent}
.creatorwall-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.creatorcard{
  position:relative;flex:0 0 236px;width:236px;aspect-ratio:9/16;
  border-radius:16px;overflow:hidden;background:#000;
  scroll-snap-align:start;cursor:pointer;
  box-shadow:0 14px 34px -20px rgba(27,36,16,.42);
}
.creatorcard video{width:100%;height:100%;object-fit:cover;display:block}
.creatorcard-veil{
  position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
}
.creatorcard-handle{
  position:absolute;left:12px;bottom:12px;right:12px;
  display:flex;align-items:center;gap:6px;
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none;
}
.creatorcard-handle svg{width:13px;height:13px;flex:0 0 13px;fill:var(--lime);stroke:none}
.creatorcard-sound{
  position:absolute;top:11px;right:11px;
  display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;border-radius:50%;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  transition:opacity .25s ease;pointer-events:none;
}
.creatorcard-sound svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.creatorcard.is-unmuted .creatorcard-sound{opacity:0}
.creatorwall-hint{margin:2px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.creatorwall-hint .hint-short{display:none}

/* ---------- Photo review grid ---------- */
.photoreviews{padding:96px 0;background:var(--paper)}
.photoreviews .section-head{margin-bottom:38px}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.preview-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--paper);transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.preview-card:hover{transform:translateY(-3px);box-shadow:0 20px 42px -26px rgba(27,36,16,.32)}
.preview-media{aspect-ratio:4/5;overflow:hidden;background:var(--off)}
.preview-media img{width:100%;height:100%;object-fit:cover;display:block}
.preview-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px}
.preview-stars{color:var(--lime-deep);letter-spacing:2.5px;font-size:13.5px;line-height:1}
.preview-text{
  margin:0;font-family:'Fraunces',Georgia,serif;font-size:16.5px;line-height:1.45;
  font-weight:500;font-style:italic;color:var(--ink);
}
.preview-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.preview-name{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.preview-verified{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;white-space:nowrap;
  background:var(--lime-soft);color:var(--lime-deep);border-radius:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* badge ticks */
.preview-verified svg,.pdp-vouch-verified svg{
  width:11px;height:11px;flex:0 0 11px;display:block;
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .preview-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:768px){
  .creatorwall{padding:56px 0}
  .creatorwall-track{gap:12px;padding-bottom:14px}
  /* narrower cards so a third peeks in: signals that the row scrolls */
  .creatorcard{flex:0 0 150px;width:150px;border-radius:13px}
  .creatorwall-hint{font-size:11px;letter-spacing:.1em}
  .creatorwall-hint .hint-full{display:none}
  .creatorwall-hint .hint-short{display:inline}
  .photoreviews{padding:56px 0}
  /* review grid becomes a horizontal swipe slider */
  .preview-grid{
    display:flex;grid-template-columns:none;gap:14px;max-width:none;margin:0 -20px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px 20px 16px;scrollbar-width:none;
  }
  .preview-grid::-webkit-scrollbar{display:none}
  .preview-card{flex:0 0 78%;max-width:320px;scroll-snap-align:center}
  .preview-body{padding:17px 18px 21px}
  .preview-text{font-size:15.5px}
  /* spec strip stays 2 up on mobile, but only the 4 core rows show */
  .pdp-specs{grid-template-columns:1fr 1fr;gap:11px 16px;padding:14px 0;margin-bottom:16px}
  .desktop-only-spec{display:none}
  .pdp-vouch{gap:12px;padding:11px}
  .pdp-vouch-media{flex:0 0 72px;width:72px}
  .pdp-vouch-quote{font-size:14.5px}
}

/* ---------- Video lightbox ---------- */
.vlight{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;gap:clamp(8px,3vw,40px);
  background:rgba(12,17,7,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:24px;
}
.vlight.is-open{display:flex;animation:vlightIn .28s ease}
@keyframes vlightIn{from{opacity:0}to{opacity:1}}
.vlight-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.vlight-stage video{
  max-height:82vh;max-width:min(440px,88vw);width:auto;height:auto;
  border-radius:16px;background:#000;display:block;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.vlight-caption{
  display:flex;align-items:center;gap:7px;
  color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;
}
.vlight-close{
  position:absolute;top:18px;right:22px;
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.vlight-close:hover{background:rgba(255,255,255,.28)}
.vlight-nav{
  flex:0 0 auto;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.vlight-nav:hover{background:rgba(255,255,255,.28)}
.creatorcard{cursor:zoom-in}
.creatorwall-hint{margin:2px 0 0}
@media (max-width:768px){
  .vlight{padding:12px;gap:0}
  .vlight-stage video{max-height:76vh;max-width:94vw}
  /* overlay the arrows on the video, there is no room beside it on a phone */
  .vlight-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;font-size:22px;z-index:2;
    background:rgba(0,0,0,.42);backdrop-filter:blur(4px);
  }
  .vlight-prev{left:16px}
  .vlight-next{right:16px}
  .vlight-close{top:10px;right:12px;width:38px;height:38px}
}

/* ---------- Energy curve ---------- */
.curve{
  margin:0 auto 44px;max-width:960px;padding:30px 28px 26px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 44px -34px rgba(27,36,16,.28);
}
.curve svg{width:100%;height:auto;display:block;overflow:visible}
.curve-legend{display:flex;gap:22px;justify-content:center;margin:0 0 14px}
.curve-key{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.curve-key i{width:22px;height:3px;border-radius:2px;display:block}
.curve-key-matcha{color:var(--ink)}
.curve-key-matcha i{background:var(--lime-deep);height:4px}
.curve-key-coffee i{background:repeating-linear-gradient(90deg,#B9BFAE 0 5px,transparent 5px 9px)}
.curve .cx{stroke:var(--line);stroke-width:1.5}
.curve .cg{stroke:var(--line);stroke-width:1;stroke-dasharray:3 6;opacity:.75}
.curve .cy,.curve .cx-lab{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;fill:#9BA391;letter-spacing:.04em}
.curve .cy{text-anchor:end}
.curve .c-coffee{fill:none;stroke:#B9BFAE;stroke-width:3;stroke-dasharray:7 6;stroke-linecap:round}
.curve .c-matcha{fill:none;stroke:var(--lime-deep);stroke-width:4.5;stroke-linecap:round}
.curve .c-dot{fill:#fff;stroke:#8C9481;stroke-width:2.5}
.curve .c-lead{stroke:#C3C9B8;stroke-width:1.4}
.curve .c-note{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;fill:var(--ink-soft)}
.curve-cap{
  margin:18px auto 0;max-width:620px;text-align:center;
  font-size:14.5px;line-height:1.6;color:var(--ink-soft);
}

/* icon cards, no photos */
.benefits .bcard-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:14px;border-radius:12px;
  background:var(--lime-soft);
}
.benefits .bcard-icon svg{
  width:22px;height:22px;stroke:var(--lime-deep);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:768px){
  .curve{padding:20px 10px 18px;margin-bottom:30px;border-radius:14px}
  .curve-legend{gap:14px;margin-bottom:8px}
  .curve-key{font-size:11px}
  /* SVG text does not scale with the viewport, so size it up in user units */
  .curve .cy{display:none}
  .curve .cx-lab{font-size:31px}
  .curve .c-note{font-size:32px;transform:translate(-34px,-16px)}
  .curve .c-coffee{stroke-width:5;stroke-dasharray:11 9}
  .curve .c-matcha{stroke-width:7}
  .curve .c-dot{r:9;stroke-width:4}
  .curve .c-lead{stroke-width:2.5}
  .curve .cx,.curve .cg{stroke-width:2}
  .curve-cap{font-size:14px;margin-top:14px}
}

/* ---------- Whisk perk: always visible ----------
   Previously hidden until the Subscribe radio was checked. Now shown on
   load regardless of plan, so the offer is visible to customers landing
   on the One time default. Base .pdp-perk rule above supplies display:flex
   and all styling. The "Subscribers only" tag keeps the condition clear. */
.pdp-perk-tag{
  display:block;width:fit-content;margin:0 0 7px;padding:3px 8px;
  background:var(--lime-deep);color:#fff;border-radius:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Video scroller inside the homepage testimonial section ---------- */
.creatorwall-inline{margin:56px 0 0;padding:44px 0 0;border-top:1px solid var(--line)}
.creatorwall-inline-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 22px;flex-wrap:wrap}
.creatorwall-inline-head h3{
  margin:0;font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.creatorwall-inline .creatorwall-hint{margin:0}
@media (max-width:768px){
  .creatorwall-inline{margin-top:38px;padding-top:30px}
  .creatorwall-inline-head{margin-bottom:16px;gap:6px}
  .creatorwall-inline-head h3{font-size:21px}
}

/* ---------- Mixed proof row: photo reviews + videos side by side ---------- */
.mix-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:stretch}

.mix-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:16px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.mix-card:hover{transform:translateY(-3px)}

/* photo + quote */
.mix-photo{border:1px solid var(--line);background:var(--paper)}
.mix-photo:hover{box-shadow:0 20px 42px -26px rgba(27,36,16,.32)}
.mix-media{flex:1;min-height:0;overflow:hidden;background:var(--off)}
.mix-media img{width:100%;height:100%;object-fit:cover;display:block}
.mix-body{padding:16px 17px 19px;display:flex;flex-direction:column;gap:8px}
.mix-body .preview-text{font-size:15px;line-height:1.42}
.mix-body .preview-meta{gap:6px}

/* video, sets the row height */
.mix-video{
  aspect-ratio:9/16;background:#000;cursor:zoom-in;
  box-shadow:0 14px 34px -20px rgba(27,36,16,.42);
}
.mix-video video{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1100px){
  .mix-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .mix-video{aspect-ratio:auto}
}
@media (max-width:768px){
  .mix-grid{grid-template-columns:1fr;gap:18px;max-width:440px;margin:0 auto}
  /* full width video, same as the photo cards, no max-height (it fights aspect-ratio) */
  .mix-video{aspect-ratio:9/16;width:100%}
  .mix-body{padding:16px 18px 20px}
  .mix-body .preview-text{font-size:15.5px}
}

/* ---------- Mobile tap targets ---------- */
@media (max-width:768px){
  /* 36px is below the reliable thumb-tap threshold, and this sits on the buy box */
  .pdp-qty-btn{min-height:44px;min-width:44px}
  .pdp-qty-input{min-height:44px}
}
@media (max-width:768px){
  /* pre-existing controls that were too small to thumb-tap reliably */
  .filter-pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* homepage keeps its CSS in an inline <style> that loads after this file, so out-specify it */
  .product-toggle .toggle-pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .grade-edu-toggle{min-height:44px;display:inline-flex;align-items:center}
}