/* Mobile safety: prevent horizontal scroll + double-tap zoom */
html, body { max-width: 100vw; overflow-x: clip; }
html { touch-action: manipulation; }
img, svg, video { max-width: 100%; height: auto; }

/* Shell-nav min-content (logo + 6 nowrap links + icons + CTA) exceeds the row
   between ~981px and ~1494px, so .nav-right escapes the nav box; the html-level
   clip above hides it visually but body.scrollWidth still inflates site-wide.
   Clip at the nav itself. clip, not hidden: no scroll container is created, so
   the sticky nav keeps sticking and the search overlay (anchored inset-inline-start:0/inset-inline-end:0
   to the nav box, hanging below on the un-clipped y axis) is unaffected. */
body > nav[aria-label="Main navigation"] { overflow-x: clip; }

/* Desktop shell fit band. The Pass 11 shell removes the desktop CTA (Pass 18
   restored the search glyph), so spacing compresses; primary-link type stays
   on its system token. */
@media (min-width: 1024px) and (max-width: 1500px) {
  body > nav .nav-left { gap: 14px; }
  body > nav .nav-left .nav-link { font-size: var(--type-button-md); }
}
@media (min-width: 1024px) and (max-width: 1080px) {
  body > nav { gap: 12px; }
  body > nav .nav-left { gap: 10px; }
  body > nav .nav-logo { font-size: 18px; }
  body > nav .nav-left .nav-link { letter-spacing: var(--tracking-button); }
}

/* Tables / wide blocks */
.table-wrap, .overflow-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { overflow-wrap: break-word; }

/* iOS auto-zoom prevention: all inputs must be >= 16px */
input, select, textarea { font-size: 16px; }

/* Long word / URL overflow prevention */
p, li, td, th, dd, blockquote, .faq-answer, .receptor-desc, .how-desc, .proof-quote {
  overflow-wrap: break-word;
}

/* Code blocks: prevent horizontal overflow on mobile */
pre, code { overflow-wrap: break-word; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Generic responsive grid stacking */
@media (max-width: 640px) {
  body > nav {
    gap: 8px;
    padding: 10px 12px;
  }
  body > nav .nav-right {
    gap: 8px;
    padding: 0;
  }
  body > nav .nav-logo {
    min-height: 44px;
    gap: 10px;
    font-size: 15px;
    letter-spacing: .11em;
  }
  body > nav .nav-logo .logo-mark svg {
    width: 20px;
    height: 15px;
  }
  body > nav .nav-icon,
  body > nav .nav-hamburger,
  body > nav .nav-cart-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .grid, .cols, .columns, .spec-grid, .two-col, .three-col {
    display: block !important;
  }
  .grid > *, .cols > *, .columns > *, .spec-grid > *, .two-col > *, .three-col > * {
    width: 100% !important;
  }
  a.button, button, .btn {
    min-height: 44px;
  }

  /* Touch targets: ensure all interactive elements meet 44px minimum */
  .nav-icon, .hero-qty-btn, .back-to-top {
    min-width: 44px;
    min-height: 44px;
  }

  /* Footer links: wrap and reduce gap on mobile */
  .footer-links {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  footer,
  body > footer {
    padding: 24px 16px 28px;
    gap: 14px;
  }
  .footer-logo {
    font-size: 11px;
    letter-spacing: .16em;
  }
  .footer-links a {
    min-height: 44px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: .12em;
  }
  .footer-social {
    gap: 4px;
  }
  .footer-social a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer-ruo,
  .footer-note,
  .footer-brand,
  .footer-formerly {
    font-size: var(--type-badge-size);
    line-height: 1.6;
  }
  .compliance-banner {
    padding: 6px 12px;
    font-size: 10px;
  }
  .compliance-banner span {
    margin-inline-start: 6px;
  }

  /* WhatsApp float: ensure doesn't overlap sticky elements */
  .whatsapp-float { z-index: 95; }
}

/* Product-page chemistry tables: stack simple two-column specs on narrow phones
   instead of creating a horizontal scroller. */
@media (max-width: 420px) {
  #chemistry-specs table:not(:has(thead)),
  #chemistry-specs table:not(:has(thead)) tbody,
  #chemistry-specs table:not(:has(thead)) tr,
  #chemistry-specs table:not(:has(thead)) td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  #chemistry-specs table:not(:has(thead)) {
    min-width: 0 !important;
  }

  #chemistry-specs table:not(:has(thead)) tr {
    border-bottom: 1px solid var(--surface-3-veil-8) !important;
  }

  #chemistry-specs table:not(:has(thead)) td {
    padding: 12px 14px !important;
  }

  #chemistry-specs table:not(:has(thead)) td:first-child {
    padding-bottom: 4px !important;
  }

  #chemistry-specs table:not(:has(thead)) td + td {
    padding-top: 0 !important;
  }
}

/* ── NARROW MOBILE NAV (≤374px): compact but keep 44px touch area ── */
@media (max-width: 374px) {
  body > nav .nav-icon,
  body > nav .nav-hamburger,
  body > nav .nav-cart-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 3px;
  }
  body > nav .nav-icon svg,
  body > nav .nav-hamburger svg,
  body > nav .nav-cart-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* sub-360px nav fallback now lives in global.css so it applies everywhere,
   not only on pages that load responsive-fixes.css. */

/* page.css pages (privacy, terms, editorial): tighter mobile padding */
@media (max-width: 480px) {
  .hero, .policy-content { padding-inline-start: 16px; padding-inline-end: 16px; }
  .policy-section-header { flex-direction: column; gap: 8px; }
}

/* Article body links: --pink (var(--pink)) ~4.14 on black; switch to
   --pink-text (var(--pink-text)) and add underline so links aren't color-only. */
main .content-block p a,
main .content-block li a,
main .citations a,
main .article-footnote a,
main .verdict a,
main .faq-answer a,
/* These article surfaces were omitted from the list above, so their links stayed
   colour-only against the surrounding text (1.63:1 in .page-subtitle, 2.37:1 in
   .quick-answer__lead — both under the 3:1 floor). The underline, not a colour
   change, is what clears axe's link-in-text-block rule. Found by sweeping the
   research corpus with axe rather than by fixing the first reported page. */
main .page-subtitle a,
main .quick-answer__lead a,
main .snippet-map-lead a,
main .snippet-answer a,
main .beginner-note a,
main .compound-card p a,
/* article.min.css has `.container a{text-decoration:none}` at (0,1,1); a bare
   `main > p a` is only (0,0,3) and loses. Qualify with .container to reach
   (0,1,3). The `main > p a` fallback covers mains without .container. */
main.container > p a,
main > p a {
  color: var(--pink-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
main .content-block p a:hover,
main .content-block li a:hover,
main .citations a:hover,
main .article-footnote a:hover,
main .verdict a:hover,
main .faq-answer a:hover {
  color: var(--white);
  text-decoration-thickness: 2px;
}
.breadcrumb a,
.breadcrumb a:visited {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--white-veil-25);
}
.breadcrumb a:hover { text-decoration-color: var(--pink-text); }

/* 2026-05-26 a11y: bump nav-icon border to meet WCAG 1.4.11 non-text 3:1 (was var(--border-hover) ≈ 0.93:1) */
body > nav .nav-icon,
header nav .nav-icon {
  border-color: var(--white-veil-30) !important;
}

/* 2026-05-26 hero pills: keep chips compact and wrapping inside product
   hero columns. Avoid horizontal chip scrollers on mobile product pages. */
.hero-points .hero-pill {
  padding: 7px 11px;
  font-size: 10px;
  letter-spacing: 0.08em;
  min-width: 0;
  flex-shrink: 1;
  white-space: nowrap;
  max-width: 100%;
}
.hero-points {
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
@media (max-width: 600px) {
  .hero {
    overflow-x: clip;
  }
  .hero-points {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 0;
    scroll-snap-type: none;
  }
  .hero-points::-webkit-scrollbar { display: none; }
  .hero-points .hero-pill {
    flex: 0 1 auto;
    scroll-snap-align: none;
    white-space: nowrap;
  }
  .product-contact-strip {
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-contact-strip .btn-contact {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 11px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* 2026-05-26 inline WhatsApp CTAs: keep hero + final-cta buttons inside column */
.hero-copy,
.hero-left {
  min-width: 0;
}
.product-contact-strip {
  width: 100%;
  max-width: 100%;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost,
.hero-actions .btn-whatsapp,
.hero-actions .btn-secondary,
.final-cta-inner .btn-primary,
.final-cta-inner .btn-whatsapp {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.hero-actions {
  max-width: 100%;
}
@media (max-width: 768px) {
  .product-contact-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .product-contact-strip .btn-contact {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 720px) {
  .hero-actions .btn-whatsapp,
  .final-cta-inner .btn-whatsapp {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
    padding-block: 12px;
  }
}

/* 2026-05-31 mobile contrast hardening for audited commerce/reference pages. */
.btn-contact--whatsapp,
.btn-contact--whatsapp:visited {
  background: var(--green) !important;
  color: var(--white) !important;
  font-weight: 700;
}
.btn-contact--whatsapp:hover,
.btn-contact--whatsapp:focus-visible {
  background: var(--green) !important;
  color: var(--white) !important;
}

.product-card .spec-label,
.product-card .product-brand,
.product-card .coa-doc-meta-label {
  color: var(--pink-text-strong) !important;
  font-weight: 700;
}
.product-card .tier-card .save {
  color: var(--green) !important;
  background: var(--green-veil-12) !important;
  font-weight: 700;
}
.product-card .bundle-anchor {
  color: var(--green) !important;
}
.product-card .bundle-anchor > span:first-child {
  background: var(--green) !important;
  color: var(--white) !important;
}
.coa-section .coa-proof-caption {
  color: var(--gray-faint) !important;
  font-weight: 700;
}
#clicks-per-dose dd[style*="var(--pink-text)"],
#clicks-per-dose a[style*="var(--pink-text)"],
#chemistry-specs td[style*="var(--pink)"],
#buy-retatrutide-20mg p a,
#buy-retatrutide-20mg p a:visited,
#buy-bpc-157-10mg p a,
#buy-bpc-157-10mg p a:visited,
#bpc-157-dubai-price p a,
#bpc-157-dubai-price p a:visited,
#buy-peptides-dubai-queries p a,
#buy-peptides-dubai-queries p a:visited,
.quick-answer a[style*="var(--pink-text)"],
.bridge-proof-intro a[style*="var(--pink-text)"],
.bridge-proof-intro strong[style*="var(--pink-text)"],
.coa-section a[style*="var(--pink-text)"] {
  color: var(--pink-text-strong) !important;
  text-decoration-color: var(--pink-text-strong-veil-58) !important;
}

/* .home-faq sections have no background of their own — the dark page field
   shows through on every carrier page (homepage, peptides-dubai/uae,
   retatrutide-uae/kaufen), so --pink-text-strong (the LIGHT-panel variant)
   only reaches ~3.2:1 there. Keep the dark-background pink (6.9:1 on
   var(--bg), AA). */
.home-faq a[style*="var(--pink-text)"],
.home-faq summary .pink {
  color: var(--pink-text) !important;
  text-decoration-color: var(--pink-text-veil-58) !important;
}

.cross-sell__card .trust-chip--verified {
  background: var(--white) !important;
  color: var(--green) !important;
  border-color: var(--green-veil-26) !important;
  font-weight: 700;
}
.cross-sell__card .trust-chip--oos {
  background: var(--white) !important;
  color: var(--gray-faint) !important;
  border-color: var(--surface-3-veil-14) !important;
  font-weight: 700;
}

.reference-page--contact-verify .page-header .tag,
.reference-page--contact-verify .alert-box-label,
.reference-page--contact-verify .section-label,
.reference-page--contact-verify .verify-list li::before,
.reference-page--contact-verify .verify-list code,
.reference-page--contact-verify .copy-btn:hover,
.reference-page--contact-verify .channel-card:hover .channel-arrow,
.reference-page--contact-verify .back-links a:hover,
.reference-page--contact-verify .intent-router-heading,
.reference-page--contact-verify .intent-card-arrow {
  color: var(--pink-text) !important;
}

.reference-page--coa .compliance-banner span,
.reference-page--coa .page-header .tag,
.reference-page--coa .breadcrumb a:hover,
.reference-page--coa .intro-text a,
.reference-page--coa .quick-answer-label,
.reference-page--coa .coa-batch-product:hover,
.reference-page--coa .coa-batch-purity,
.reference-page--coa .coa-pink,
.reference-page--coa .coa-purity-claim .coa-pink,
.reference-page--coa .coa-purity-claim a,
.reference-page--coa .coa-purity-claim a:visited,
.reference-page--coa .coa-purity-table thead th,
.reference-page--coa .coa-purity-table .coa-row-highlight .coa-purity-value,
.reference-page--coa .coa-purity-table tbody th a:hover,
.reference-page--coa .coa-purity-table tbody th a:focus-visible,
.reference-page--coa .coa-faq-item summary::after,
.reference-page--coa .coa-faq-answer code,
.reference-page--coa .coa-report-test,
.reference-page--coa .coa-faq-answer a,
.reference-page--coa .coa-faq-answer a:visited,
.reference-page--coa .content > p a,
.reference-page--coa .content > p a:visited,
.reference-page--coa .intent-router-heading,
.reference-page--coa .intent-card-arrow {
  color: var(--pink-text) !important;
}

#routers .comparison-card > div:last-child {
  color: var(--pink-text-strong) !important;
  font-weight: 700;
}

main .ai-summary a[href="/coa/retp002/"],
main .quick-answer a[href="/coa/"],
main .quick-answer a[href="/coa"]:visited,
main .ai-summary a[href="/coa/retp002/"]:visited {
  color: var(--pink-text) !important;
}

main .dosing-visual .pink,
main .dosing-visual a,
main .detail-right a,
main #clicks-per-dose a,
main #clicks-per-dose a:visited {
  color: var(--pink-text-strong) !important;
}

/* ── Tap-target hardening (WCAG 2.5.8, audit 2026-07-04) ──────────────────
   Expand small standalone tappable controls to a ~44px hit area without
   visual/layout shift: padding grows the hit box, negative block margin
   cancels the flow impact. Inline prose links are exempt by the guideline
   and deliberately untouched. */
.drawer-brand,
.wholesale-inline a,
.batch-verification a {
  display: inline-flex;
  align-items: center;
  padding-block: 14px;
  margin-block: -14px;
}