/* X Factor Peptides — site-wide safety net v9.5
   Loaded on customer pages. Admin opts out.
   This file does NOT override typography sizing — each page owns its own
   type scale via Tailwind utilities. We only provide layout & a11y safety.
*/

:root {
  --xfp-touch-min: 44px;
  --xfp-pad-x: clamp(12px, 4vw, 28px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Prevent any element from busting out of its flex/grid container. */
* { min-width: 0; }

/* Media: never wider than the column they're in. */
img, video, svg, canvas, picture, iframe, object, embed {
  max-width: 100%;
  height: auto;
}

/* Long-word safety on every heading and paragraph — prevents overflow on
   narrow phones for SKU codes, lot numbers, scientific names, URLs. */
h1, h2, h3, h4, p, li, dd {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Touch targets — WCAG 2.5.5 / Apple HIG / Material */
button,
a.btn,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
select {
  min-height: var(--xfp-touch-min);
}

/* Inputs at >=16px so iOS Safari doesn't auto-zoom on focus. */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* Sticky header gets safe-area on notched devices. */
.sticky-nav,
nav.sticky,
header.sticky {
  padding-top: env(safe-area-inset-top);
}

/* Phone breakpoint */
@media (max-width: 640px) {
  .cart-drawer,
  #cart-drawer,
  [data-cart-drawer] {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
  }

  .sticky-cta,
  [data-sticky-cta],
  .mobile-sticky-add {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Prop 65 warning style — used on every product page. */
.prop65-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 18px 0;
  border: 1px solid #f59e0b;
  background: rgba(245, 158, 11, 0.06);
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 8px;
}
.prop65-warning a { color: #fde68a; text-decoration: underline; }
.prop65-warning strong { color: #fef3c7; }

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print-friendly */
@media print {
  nav, footer, .cart-drawer, .sticky-cta, [data-no-print] { display: none !important; }
  body { color: black; background: white; }
}

/* Focus-visible — keyboard-only outline */
:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip-to-content link styling (injected on every page) */
.skip-nav:focus { left: 8px !important; top: 8px !important; }