/* =====================================================================
   Jojo's Puure: phone and tablet layout
   Load this AFTER the main stylesheet. It only adds or overrides
   layout for smaller screens and touch devices; desktop is unchanged.
   Breakpoints:  tablet 701-1024px  |  phone <=700px  |  small phone <=380px
   ===================================================================== */

/* ---------- 1. Safety: nothing may push the page sideways ---------- */
.hero-top > *, .sec-head > *, .story > *, .baby-intro > *, .chapters > *,
.chapter .top > *, .clinic > *, .order .cols > *, .fh > *, .letter > *,
.pd > *, .grid > *, .figs > *, .buyrow > * { min-width: 0; }
html, body { overflow-x: clip; }
img, svg { max-width: 100%; }

/* ---------- 2. Touch devices (phones, tablets, iPad landscape) ---------- */
@media (hover: none), (pointer: coarse) {
  .card .pic .peek { display: none; }
  .card .pic:hover img, .slot:hover img { transform: none; }
  nav.main a { padding: .85rem 0; }
  .wa-link { padding: .8rem 0; }
  .tab { padding: .8rem 0; min-width: 44px; text-align: center; }
  .cart-btn { min-height: 44px; }
  .tlink { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; }
  .sw { gap: .6rem; }
  .sw button { width: 34px; height: 34px; }
  .step { height: 44px; }
  .step button { width: 44px; }
  .add { height: 44px; }
  summary { min-height: 52px; }
  .rm { min-height: 44px; }
  .x { width: 44px; height: 44px; }
}

/* ---------- 3. Small text: nothing below ~11px ---------- */
@media (max-width: 1024px) {
  .card .pic .tag, .slot .flag { font-size: .7rem; }
  .mrp, .visual .note, .clinic dt, .ltable th, .pd h4 { font-size: .72rem; }
  .eyebrow { font-size: .76rem; }
}

/* =====================================================================
   TABLET  701px - 1024px
   ===================================================================== */
@media (min-width: 701px) and (max-width: 1024px) {
  .wrap { width: min(1240px, 100% - 56px); }

  /* hero: show three bottles at a time instead of one giant panel */
  .shelf { height: clamp(360px, 52vw, 460px); gap: 12px; }
  .slot { flex: 0 0 38%; }
  .slot.hero-pick { flex-basis: 42%; }

  /* range */
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.1rem; }
  .code { font-size: 1.45rem; }

  /* JR6 + Sit Sure: picture beside the story, not a full-width block */
  .story, .story.flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.4rem; }
  .story.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .story.flip .visual { order: 2; }
  .visual { position: sticky; top: 100px; height: auto; max-height: none; aspect-ratio: 3 / 4; }
  .story h3 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
  .facts { grid-template-columns: 1fr; }
  .figs strong { font-size: clamp(1.6rem, 3.3vw, 2.2rem); }

  /* baby: tighter chapter headers */
  .chapter .top { grid-template-columns: minmax(0, 1fr) 170px; min-height: 240px; }
  .chapter .top img { height: 240px; }

  /* lab table: keep the real table on tablets, just tighter */
  .ltable td:first-child { font-size: 1.25rem; }
  .ltable .num { font-size: 1.35rem; line-height: 2rem; }
  .ltable .bac { line-height: 2rem; font-size: .9rem; }

  /* about */
  .letter { grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; }
  .who img { max-width: 220px; }
  .beliefs { grid-template-columns: 1fr 1fr; gap: 0; }
  .beliefs div { padding-bottom: 1.5rem; }
  .beliefs div:nth-child(3) { border-left: 0; padding-left: 0; }

  /* product popup */
  .pd { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* portrait tablets: stack section headings above their intro text */
@media (min-width: 701px) and (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 1rem; }
  .sec-head .lead { max-width: 60ch !important; }
}

/* lab table: restore the full table between 701 and 820px
   (the base styles switch it to cards below 820px) */
@media (min-width: 701px) and (max-width: 820px) {
  .ltable thead { display: table-header-group; }
  .ltable tr { display: table-row; padding: 0; }
  .ltable td { display: table-cell; padding: 1.1rem .8rem 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .ltable td:first-child { width: 22%; }
  .ltable td[data-l]::before { content: none; }
}

/* =====================================================================
   PHONE  <= 700px
   ===================================================================== */
@media (max-width: 700px) {
  html { scroll-padding-top: 84px; }
  .wrap { width: calc(100% - 36px); }
  section { padding: 3.2rem 0; }
  .btn { white-space: normal; }

  /* top bar + header */
  .announce { font-size: .66rem; letter-spacing: .1em; padding: .5rem .8rem; line-height: 1.5; }
  .bar { height: 64px; }
  .bar .logo img { height: 48px; }
  .cart-btn { padding: .55rem .75rem; min-height: 44px; }
  .mnav { top: var(--mnav-top, 96px); }
  .mnav a { padding: 1.05rem 18px; }

  /* headings */
  .eyebrow { flex-wrap: wrap; gap: .25rem .7rem; letter-spacing: .14em; margin-bottom: .9rem; }
  .eyebrow b { white-space: nowrap; }
  .eyebrow::after { display: none; }
  h2.display { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
  .lead { font-size: 1rem; }
  .sec-head { margin-bottom: 1.6rem; padding-bottom: 1.2rem; gap: 1rem; }

  /* hero */
  .hero { padding-top: 2rem; }
  .hero-top { gap: 1.2rem; margin-bottom: 1.6rem; }
  .hero h1 { font-size: clamp(2.6rem, 12.4vw, 3.5rem); line-height: 1.02; }
  .hero-side .lead { margin-bottom: 1.3rem; }
  .hero-side .cta { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hero-side .cta .btn { width: 100%; padding: 1rem; }
  .shelf { height: clamp(330px, 98vw, 420px); gap: 8px; margin-right: -18px; padding-right: 18px; scroll-padding-left: 0; }
  .slot { flex: 0 0 64%; }
  .slot.hero-pick { flex-basis: 72%; }
  .slot img { height: 82%; }
  .ticker span { font-size: .7rem; padding: .85rem .9rem; gap: 1.6rem; }

  /* category tabs: one swipeable row */
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 1.4rem; margin: 0 -18px; padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: none; }

  /* product cards: 2 per row, compact */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem .75rem; }
  .card .pic { aspect-ratio: 4 / 5; }
  .card .pic img { height: 86%; }
  .card .pic .tag { left: .5rem; top: .5rem; padding: .25rem .45rem; letter-spacing: .1em; }
  .card .body { padding-top: .75rem; gap: .35rem; }
  .code { font-size: 1.3rem; flex-wrap: wrap; row-gap: .1rem; }
  .code small { font-size: .7rem; letter-spacing: .08em; }
  .pname { font-size: .92rem; }
  .card .sub { font-size: .82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sw em { display: none; }
  .sw { gap: .45rem; }
  .sw button { width: 30px; height: 30px; }
  .buyrow { flex-direction: column; align-items: stretch; gap: .6rem; padding-top: .7rem; }
  .buyrow .price { font-size: 1.25rem; }
  .add, .step { width: 100%; }
  .add { padding: 0 .5rem; letter-spacing: .1em; font-size: .72rem; }
  .step { justify-content: space-between; }

  /* JR6 + Sit Sure stories */
  .story, .story.flip { gap: 1.6rem; padding: 2.4rem 0; }
  .visual { height: clamp(300px, 92vw, 400px); }
  .jr6-ph { width: 66%; }
  .jr6-ph b { font-size: 3.2rem; }
  .story h3 { font-size: clamp(1.75rem, 7.6vw, 2.2rem); margin-bottom: 1rem; }
  .story p { font-size: .98rem; }
  .figs { margin: 1.4rem 0; }
  .figs div { padding: 1rem .6rem 1rem 0; }
  .figs div + div { padding-left: .9rem; }
  .figs strong { font-size: clamp(1.45rem, 7.2vw, 2.1rem); }
  .figs span { font-size: .8rem; }
  .facts li { font-size: .9rem; }
  .howto { padding: 1rem 1.1rem; font-size: .92rem; }
  .story .buy, .chapter .buy { flex-direction: column; align-items: stretch; gap: .4rem; }
  .story .buy .btn, .chapter .buy .btn { width: 100%; padding: 1rem; }
  .story .buy .tlink, .chapter .buy .tlink { justify-content: center; }

  /* baby care */
  .baby-intro { gap: 1.2rem; margin-bottom: 2rem; }
  .chapters { gap: 1rem; }
  .chapter .top { grid-template-columns: minmax(0, 1fr) 104px; min-height: 190px; padding: 1.2rem 0 0 1.2rem; gap: .6rem; }
  .chapter .top img { height: 176px; }
  .chapter .top h3 { font-size: clamp(1.4rem, 6.4vw, 1.8rem); margin: .3rem 0 1.2rem; }
  .chapter .txt { padding: 1.2rem; }
  .chapter .txt p { font-size: .95rem; }
  .science li { grid-template-columns: 28px minmax(0, 1fr); font-size: .9rem; }
  .clinic .l { padding: 1.5rem 1.2rem; }
  .clinic dl div { padding: 1.1rem 1.2rem; }
  .clinic dd { font-size: 1.1rem; }
  .clinic .fine { padding: 1rem 1.2rem; }

  /* lab results: one card per product */
  .ltable td:first-child { font-size: 1.35rem; }
  .ltable tr { gap: .2rem .8rem; }
  .ltable .num { font-size: 1.3rem; line-height: 1.9rem; }
  .ltable .bac { line-height: 1.9rem; font-size: .84rem; white-space: nowrap; }

  /* founders (home) */
  .quotes figure { padding-top: 1.3rem; }
  .quotes blockquote { font-size: 1.22rem; margin-bottom: .8rem; }

  /* how to order + faq */
  .steps li { grid-template-columns: 48px minmax(0, 1fr); padding: 1.1rem 0; }
  .steps li::before { font-size: 1.8rem; }
  summary { font-size: .97rem; padding: 1rem 0; }

  /* footer */
  footer.site { padding-bottom: 6rem; }
  footer.site img { height: 76px; }
  footer.site .top { gap: 2rem 1.4rem; }
  footer.site a { display: inline-block; padding: .25rem 0; }

  /* cart drawer: full screen */
  aside.drawer { width: 100%; }
  .drawer .dh { padding: .8rem 1.1rem; }
  .drawer .dh h2 { font-size: 1.6rem; }
  .drawer .scroll { padding: .2rem 1.1rem 1.1rem; }
  .drawer .foot { padding: .9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  .line { grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; }
  .line .th { height: 80px; }
  .line .ctl { flex-wrap: wrap; gap: .4rem; }
  form.co .two { gap: .6rem; }

  /* product popup: full screen sheet */
  dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
  dialog .pd .info { position: static; }
  dialog .pd .x { position: absolute; top: .6rem; right: .6rem; z-index: 3; background: rgba(250,246,238,.92); border-radius: 50%; }
  .pd .img { position: relative; height: min(46vh, 340px); }
  .pd .info { padding: 1.3rem 1.2rem 2rem; }
  .pd .code { font-size: 2.1rem; }
  .pd .lede { font-size: 1.15rem; }
  .pd .dbuy { flex-direction: column; align-items: stretch; gap: .8rem; }
  .pd .dbuy .add, .pd .dbuy .step { width: 100%; }

  /* about page */
  .about-hero { padding: 2.4rem 0 1.4rem; }
  .about-hero h1 { font-size: clamp(2.3rem, 10.4vw, 3.2rem); }
  .names { font-size: .68rem; letter-spacing: .06em; gap: .5rem; line-height: 1.35; }
  .letter { gap: 1.4rem; padding: 2.2rem 0; }
  .letter .who { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .letter .who img { grid-row: 1 / span 3; max-width: 96px; margin: 0; }
  .letter .who h3 { font-size: 1.6rem; margin: .1rem 0; }
  .letter .who .pull { grid-column: 1 / -1; font-size: 1.15rem; margin-top: 1.1rem; padding-top: 1rem; }
  .letter .body p { font-size: 1rem; line-height: 1.7; }
  .letter .body p:first-child::first-letter { font-size: 3.3rem; padding-right: .5rem; }
  .letter .sign { font-size: 1.35rem; }
  .beliefs h3 { font-size: 1.35rem; }
  .beliefs div { padding-bottom: 1.3rem; }

  .fab { width: 52px; height: 52px; right: 14px; }
  .toast { top: calc(76px + env(safe-area-inset-top, 0px)); }
}

/* =====================================================================
   SMALL PHONE  <= 380px
   ===================================================================== */
@media (max-width: 380px) {
  .wrap { width: calc(100% - 28px); }
  .tabs { margin: 0 -14px; padding: 0 14px; }
  .shelf { margin-right: -14px; padding-right: 14px; }
  .hero h1 { font-size: 2.45rem; }
  .grid { gap: 1.7rem .6rem; }
  .code { font-size: 1.15rem; }
  .pname { font-size: .86rem; }
  .card .sub { -webkit-line-clamp: 2; }
  .add { font-size: .7rem; letter-spacing: .05em; }
  .figs strong { font-size: 1.32rem; }
  .ltable tr { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .ltable .bac { font-size: .76rem; }
  .ltable .num { font-size: 1.15rem; }
  .chapter .top { grid-template-columns: minmax(0, 1fr) 88px; }
  .chapter .top img { height: 150px; }
  .letter .who { grid-template-columns: 80px minmax(0, 1fr); }
  .letter .who img { max-width: 80px; }
}