/* ═══════════════════════════════════════════════════════════════════════
   PNC — MOBILE MASTERPASS  v2  ·  loaded LAST (after palette.css)
   One authoritative touch / small-screen layer for home · bread · brew.

   The v1 problem: an `overflow-x:hidden` firewall only CLIPPED over-wide
   content (tables, pricing grids, stat bands, nowrap mono labels) — the
   right edge was hidden, not made to fit. v2 makes content genuinely FIT:
   flex/grid children may shrink (min-width:0), grids use minmax(0,1fr),
   the nutrition table is table-fixed, and nowrap labels are released.
   Desktop (≥769px) is untouched — everything lives in media queries.
═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · OVERFLOW CONTAINMENT — make it FIT, not merely clip ─────────── */
@media (max-width: 768px){
  html,body{ overflow-x:hidden !important; max-width:100% !important; }
  img,svg,video,canvas,iframe,table{ max-width:100% !important; height:auto; }

  /* The #1 root cause of mobile overflow: flex/grid items default to
     min-width:auto and refuse to shrink below their content. Release them. */
  .order-grid > *, .order-inner > *, .order-info > *, .order-info-right > *,
  .order-form > *, .order-left > *, .order-right > *,
  .brm-inner > *, .brm-data > *, .brm-copy-col > *,
  .source-grid > *, .source-stats > *, .source-col > *,
  .ing-row > *, .ing-data > *, .ing-main > *,
  .who-cols > *, .who-col > *, .summary-inner > *, .nutrition-inner > *,
  .hero-products > *, .hero-product > *, .hp-body > *,
  .fmts-rows > *, .fmts-row > *, .fmts-body > *,
  .price-block > *, .trust-block > *, .trust-item > *,
  .qty-grid > *, .qty-card > *, .bread-qty-grid > *, .bread-qty-card > *,
  .batch-email-row > *, .batch-notice > *,
  .tasting-list > *, .tl-row > *, .tl-meta > *, .order-method > *,
  .principles-list > *, .principle-item > *, .nutr-tags-row > *{
    min-width:0 !important;
  }

  /* Huge decorative watermarks / ghost numerals: clip, never push width. */
  .hero-watermark, .hero-watermark-text, .brm-wm, .ft-statement,
  .phil-accent-num, .prin-accent-num, .hero-accent-num,
  .ing-axis, .ing-axis-num, .sum-num, .stmt-bg-rule{
    max-width:100vw !important; overflow:hidden !important;
  }
}

/* ── 1 · NOWRAP DEFEAT + tamer mono letter-spacing ──────────────────── */
@media (max-width: 600px){
  /* mono prose / multi-clause labels that used to run off the right edge */
  .nn-seg, .nutr-note, .order-sub, .order-why li, .brm-copy, .brm-coords,
  .ing-terroir, .ing-desc, .sc-text, .step-meta, .price-note, .oi-sub,
  .trust-sub, .order-assure, .order-batch, .freshness-days,
  .stmt-foot-item, .fmts-sub, .fmts-waternote, .hp-origin, .hp-desc{
    white-space:normal !important;
    word-break:normal; overflow-wrap:anywhere;
  }
  /* heavy tracking on small mono labels overflows narrow columns — cap it */
  .ing-stat-label, .ing-bar-label, .ing-coords, .order-method-label,
  .trust-label, .qty-tag, .bqc-unit, .order-eyebrow, .price-unit,
  .stmt-foot-item, .nutr-table td:first-child, .batch-badge-label{
    letter-spacing:0.12em !important;
  }
}

/* ── 2 · DISPLAY TYPE — capped so it always fits 320–430px ──────────── */
@media (max-width: 600px){
  .stmt-line--lg .stmt-word{ font-size:clamp(3rem,15.5vw,5rem) !important; line-height:0.9 !important; }
  .stmt-line--sm .stmt-word{ font-size:clamp(1.45rem,6.6vw,2.4rem) !important; letter-spacing:0.02em !important; }
  .statement-hero{ min-height:auto !important; padding-top:clamp(92px,24vw,140px) !important; padding-bottom:clamp(44px,11vw,72px) !important; }

  .hero-headline{ font-size:clamp(34px,11.5vw,50px) !important; line-height:0.92 !important; }
  .hero-headline span{ font-size:clamp(15px,4vw,19px) !important; }
  .hero-watermark-text{ font-size:38vw !important; }
  .hero-decree{ font-size:clamp(15px,4.2vw,18px) !important; }

  .order-h2{ font-size:clamp(2.8rem,14vw,5rem) !important; line-height:0.92 !important; }
  .price-main{ font-size:clamp(2.8rem,15vw,5rem) !important; }

  .principles-h2, .h2, .source-headline, .fmts-h2, .ing-header-h2,
  .stmt-headline, .nutr-headline, .batch-headline{ font-size:clamp(2rem,9vw,3.2rem) !important; line-height:0.97 !important; }
  .pfs-main{ font-size:clamp(2.2rem,11vw,3.6rem) !important; line-height:0.97 !important; }
  .pfs-mybread{ font-size:clamp(1.5rem,7vw,2.4rem) !important; }

  .phil-accent-num, .prin-accent-num, .hero-accent-num,
  .ing-axis-num, .sum-num{ font-size:clamp(80px,26vw,150px) !important; }
  .fmts-time span{ font-size:clamp(60px,19vw,108px) !important; }
  .ft-statement-line{ font-size:clamp(52px,19vw,120px) !important; line-height:0.9 !important; }

  .principles-coda{ font-size:clamp(12px,3.4vw,18px) !important; white-space:normal !important; letter-spacing:0.12em !important; }
}

/* ── 3 · SINGLE-COLUMN REFLOW (belt over the page 760px rules) ───────── */
@media (max-width: 600px){
  .hero-products, .order-grid, .order-inner, .brm-inner, .source-grid,
  .who-cols, .summary-inner, .nutrition-inner, .philosophy-inner,
  .principles-list, .tasting-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .brm-inner{ gap:clamp(28px,8vw,44px) !important; }
  .brm-rule, .source-divider, .order-divider{ display:none !important; }
  .hero-grain{ width:min(62vw,300px) !important; margin:8px auto 0 !important; order:-1; }
  /* ingredient provenance band: stack coords + stats, never clip the label */
  .ing-data{ flex-direction:row !important; flex-wrap:wrap !important; gap:18px 22px !important; }
  .ing-stat{ flex:1 1 auto; }
}

/* ── 4 · PRICING / QTY GRIDS — shrink-to-fit, never clip a card ──────── */
@media (max-width: 600px){
  .qty-grid, .bread-qty-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important; width:100% !important;
  }
  .qty-card, .bread-qty-card{ padding:14px 6px !important; text-align:center; align-items:center; }
  .qty-num, .bqc-count{ font-size:clamp(15px,4.4vw,19px) !important; }
  .qty-tag, .bqc-unit, .qty-price, .bqc-price{ font-size:clamp(9px,2.6vw,11px) !important; }
}
@media (max-width: 380px){
  .qty-grid, .bread-qty-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}

/* ── 5 · PRICE BLOCK — keep "€3" and "Per Loaf" tidy, no overlap ────── */
@media (max-width: 600px){
  .price-block{ flex-wrap:wrap !important; align-items:flex-end !important; gap:6px 10px !important; }
  .price-unit{ white-space:nowrap !important; }
  .price-note{ margin-bottom:24px !important; }
}

/* ── 6 · NUTRITION TABLE — four columns that actually fit 320px ──────── */
@media (max-width: 600px){
  .nutr-table{ table-layout:fixed !important; width:100% !important; }
  .nutr-table th,.nutr-table td{ padding:11px 0 !important; }
  .nutr-table tr>:first-child{ width:34% !important; padding-right:8px !important;
    font-size:11px !important; letter-spacing:0.06em !important; }
  .nutr-table tr>*+*{ padding-left:8px !important; white-space:normal !important;
    font-size:clamp(12px,3.4vw,15px) !important; }
  .nutr-table .nth{ white-space:normal !important; font-size:11px !important; }
  .nutr-table .nth-sub{ font-size:9.5px !important; }
}

/* ── 7 · NOTIFY / EMAIL ROW — input + button wrap, never clip ────────── */
@media (max-width: 600px){
  .batch-email-row{ flex-wrap:wrap !important; gap:10px !important; }
  .batch-email-row input, #batch-email{ flex:1 1 100% !important; width:100% !important; }
  .batch-notify-btn{ flex:1 1 100% !important; width:100% !important; }
}

/* ── 8 · CALMER VERTICAL RHYTHM ─────────────────────────────────────── */
@media (max-width: 600px){
  section, .section{ padding-top:clamp(56px,14vw,84px) !important; padding-bottom:clamp(56px,14vw,84px) !important; }
  .statement-hero{ padding-top:clamp(92px,24vw,140px) !important; }
  .pre-footer-statement{ padding-top:clamp(64px,16vw,96px) !important; padding-bottom:clamp(48px,12vw,72px) !important; }
  footer{ padding:clamp(40px,12vw,64px) clamp(20px,6vw,32px) clamp(64px,18vw,96px) !important; }
}

/* ── 9 · TAP TARGETS ≥ 44/48px + iOS-safe 16px inputs ───────────────── */
@media (pointer: coarse){
  .nav-cta, .nav-drawer-cta, .nav-drawer-link,
  .btn-primary, .btn-light, .btn-ghost, .btn-ghost-dark, .btn-ghost-pale,
  .btn-order, .principles-cta-row a, .blessing-cta-row a,
  .hp-cta, .batch-notify-btn, #order-submit, .order-submit{
    min-height:48px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  .footer-link, .ft-link{ min-height:44px !important; display:inline-flex !important; align-items:center !important; }
  .nav-hamburger{ min-width:44px !important; min-height:44px !important; }
  .bread-qty-card, .qty-card{ min-height:72px !important; }
  input, select, textarea,
  .form-row input, .form-row select, .batch-email-row input, #batch-email{
    font-size:16px !important; min-height:48px !important;
  }
  .brm-copy, .sc-text, .order-sub, .fmts-desc, .hp-desc, .ing-desc,
  .manifesto-copy, .phil-quote{ line-height:1.6 !important; }
}

/* ──10 · FORMATS RAIL — clean full-card swipe on touch ───────────────── */
@media (max-width: 600px){
  .fmts-rows{
    grid-auto-columns:84vw !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:20px !important;
    gap:14px !important;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
  .fmts-row{ scroll-snap-align:start !important; min-height:auto !important; padding:28px 22px 32px !important; }
}

/* ──11 · READY BANNER — slim, never overlaps content ─────────────────── */
@media (max-width: 600px){
  #ready-banner{ padding:9px 16px !important; }
  #ready-banner .rb-text{ font-size:13px !important; }
}

/* ──12 · NAV — pills off, solid hamburger + the money CTA stay ───────── */
@media (max-width: 600px){
  html body #site-nav .nav-links{ display:none !important; }
  html body #site-nav .nav-cta{ display:inline-flex !important; align-items:center; justify-content:center;
    padding:10px 16px !important; font-size:12px !important; letter-spacing:0.16em !important; }
  html body #site-nav .nav-hamburger{ display:inline-flex !important; align-items:center; justify-content:center; }
  html body #site-nav{ gap:10px; }
}
@media (max-width: 480px){
  .nav-drawer{ background:var(--pp-cream,#F8F4EC) !important; }
  .nav-drawer-link{ color:var(--pp-ink,#2A1810) !important; font-size:clamp(28px,9vw,42px) !important; }
  .nav-drawer-sub{ color:rgba(92,61,46,0.72) !important; }
  .nav-drawer-cta{ background:var(--pp-ink,#2A1810) !important; color:var(--pp-cream,#F8F4EC) !important; }
}

/* ──13 · MOBILE CONTRAST BUMP — sunlight-legible, WCAG-AA on paper ───── */
@media (max-width: 768px){
  .trust-label, .trust-sub, .order-batch, .order-assure,
  .price-note, .oi-sub, .fmts-waternote, .stmt-foot-item, .brm-coords,
  .ing-coords, .ing-coords span, .ing-stat-label, .ing-bar-label,
  .nutr-note, .order-method-label, .batch-note, .form-note{
    color:#6B4A37 !important;            /* solid bronze ≈ 5.3:1 on paper */
    -webkit-text-fill-color:#6B4A37 !important;
  }
  .trust-val, .price-main, .ss-val, .ing-stat-val,
  .brm-fact-val, .sum-num, .sum-val{ color:var(--pp-ink,#2A1810) !important; -webkit-text-fill-color:var(--pp-ink,#2A1810) !important; }
}

/* ════ MOBILE MASTERY PASS — 2026-06-17 (phone ≤600px; desktop untouched) ══
   The long uppercase-via-CSS body blocks become readable sentence-case
   Helvetica (source text is already mixed-case); short mono-caps labels stay.
   Plus a clean stacked footer and belt-and-suspenders scroll-frame hide. */
@media (max-width:600px){
  .fmts-waternote,
  .nutr-note,
  .trust-sub,
  .order-assure,
  .order-batch{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;
    text-transform:none !important;
    letter-spacing:normal !important;
    font-weight:400 !important;
  }
  .fmts-waternote{ font-size:14.5px !important; line-height:1.6 !important; max-width:none !important; color:rgba(92,61,46,0.72) !important; }
  .nutr-note{ font-size:14px !important; line-height:1.62 !important; }
  .nutr-note .nn-line{ display:block; margin-bottom:9px; }
  .trust-sub{ font-size:13.5px !important; line-height:1.6 !important; color:rgba(92,61,46,0.62) !important; }
  .order-assure{ font-size:13.5px !important; font-weight:500 !important; }
  .order-batch{ font-size:12.5px !important; }

  footer .footer-links{ flex-direction:column !important; flex-wrap:nowrap !important; gap:0 !important; width:100% !important; align-items:stretch !important; justify-content:flex-start !important; }
  footer .footer-link{ border-right:none !important; border-bottom:1px solid rgba(92,61,46,0.12) !important; padding:14px 4px !important; margin:0 !important; text-align:center !important; justify-content:center !important; }
  footer .footer-link:last-child{ border-bottom:none !important; }

  #prog,#prog-r,#prog-b-l,#prog-b-r,#prog-t-l,#prog-t-r,#ready-banner{ display:none !important; }
}

/* MOBILE MASTERY PASS 2 — the ingredient terroir prose was the last mono wall */
@media (max-width:600px){
  .ing-terroir{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;
    text-transform:none !important; letter-spacing:normal !important;
    font-size:13.5px !important; line-height:1.62 !important;
  }
}