/* 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 left:0/right:0
   to the nav box, hanging below on the un-clipped y axis) is unaffected. */
body > nav[aria-label="Main navigation"] { overflow-x: clip; }

/* Nav CTA visibility bands (2026-07-05, Suhail-approved): restore the
   "shrink instead of hide" intent of global.css's 981-1080 band, which no
   longer fits after the 7th nav-left element landed. Measured fit points:
   shrunken row needs >=1256px with all 6 links, >=1075px with Compare
   Suppliers hidden, >=981px with the tighteners. Mobile collapse stays at
   <=980px. Selectors outrank the global.css full-size rules, so load order
   is not load-bearing.
   2026-07-11: cap raised 1395->1500 — with DM Mono loaded the FULL-SIZE nav
   needs ~1495px, so 1396-1494 (incl. 1440x900) clipped the CTA on every page
   without pdp-system.css's own 1341-1500 compress block. 1500 matches that
   proven band; overlap 1495-1500 is harmless (shrunken row still fits). */
@media (min-width: 981px) and (max-width: 1500px) {
  body > nav .nav-right .nav-cta { min-height: 38px; padding: 0 14px; font-size: 10px; }
  body > nav .nav-left { gap: 14px; }
  body > nav .nav-left .nav-link { font-size: 11px; }
}
@media (min-width: 981px) and (max-width: 1255px) {
  /* Compare Suppliers stays in the drawer, footer, mobile nav, and >=1256px. */
  body > nav .nav-left .nav-link[href="/guides/best-retatrutide-supplier-dubai"] { display: none; }
}
@media (min-width: 981px) 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: .09em; }
}

/* 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, 10px);
    line-height: 1.6;
  }
  .compliance-banner {
    padding: 6px 12px;
    font-size: 10px;
  }
  .compliance-banner span {
    margin-left: 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 rgba(31, 19, 27, 0.08) !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-left: 16px; padding-right: 16px; }
  .policy-section-header { flex-direction: column; gap: 8px; }
}

/* Article body links: --pink (#db266c) ~4.14 on black; switch to
   --pink-text (#ff5a9e) 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: #ffd6e5;
  text-decoration-thickness: 2px;
}
.breadcrumb a,
.breadcrumb a:visited {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.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 rgba(255,255,255,0.12) ≈ 0.93:1) */
body > nav .nav-icon,
header nav .nav-icon {
  border-color: rgba(255, 255, 255, 0.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-left: 0;
    margin-right: 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: #0b6f34 !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-contact--whatsapp:hover,
.btn-contact--whatsapp:focus-visible {
  background: #095c2c !important;
  color: #fff !important;
}

.product-card .spec-label,
.product-card .product-brand,
.product-card .coa-doc-meta-label {
  color: var(--pink-text-strong, #b81f5b) !important;
  font-weight: 700;
}
.product-card .tier-card .save {
  color: #0f6a3f !important;
  background: rgba(15, 106, 63, 0.12) !important;
  font-weight: 700;
}
.product-card .bundle-anchor {
  color: #0f6a3f !important;
}
.product-card .bundle-anchor > span:first-child {
  background: #107f38 !important;
  color: #fff !important;
}
.coa-section .coa-proof-caption {
  color: #5f4a58 !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*="#ff5a9e"],
.bridge-proof-intro a[style*="#ff5a9e"],
.bridge-proof-intro strong[style*="#ff5a9e"],
.coa-section a[style*="#ff5a9e"] {
  color: var(--pink-text-strong, #b81f5b) !important;
  text-decoration-color: rgba(184, 31, 91, 0.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
   #080808, AA). */
.home-faq a[style*="#ff5a9e"],
.home-faq summary .pink {
  color: var(--pink-text, #ff5a9e) !important;
  text-decoration-color: rgba(255, 90, 158, 0.58) !important;
}

.cross-sell__card .trust-chip--verified {
  background: #e8f2ed !important;
  color: #0f6a3f !important;
  border-color: rgba(15, 106, 63, 0.26) !important;
  font-weight: 700;
}
.cross-sell__card .trust-chip--oos {
  background: #f1ecef !important;
  color: #5f4a58 !important;
  border-color: rgba(31, 19, 27, 0.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, #ff5a9e) !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, #ff5a9e) !important;
}

#routers .comparison-card > div:last-child {
  color: var(--pink-text-strong, #b81f5b) !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, #ff5a9e) !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, #b81f5b) !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;
}