/* ════════════════════════════════════════════════════════════════════════
   PAOS · PATIENT-FACING SITE · DEVICE COMPATIBILITY LAYER
   Loaded AFTER style.css and each page's own <style> block (last thing in
   <head>), so it only has to out-rank them by order, not by !important.

   Breakpoints
     ≥ 2560px   4K / TV            root font scales up
     ≥ 1920px   large desktop      root font scales up, wider container
     ≥ 1600px   wide desktop       wider container
     ≥ 1025px   desktop            original layout (untouched)
     ≤ 1024px   tablet             3-up grids, 2-up reviews, tighter footer
     ≤  768px   small tablet/phone single-column reviews, dvh-safe menu
     ≤  480px   phone              safe-area padding on sheets
     ≤  360px   small phone        compact type + spacing
     ≤  320px   tiny phone / folded foldable
     landscape phones (short height), touch devices, notches/cut-outs

   Pairs with the viewport tag  <meta name="viewport" content="…, viewport-fit=cover">
   (needed for the env(safe-area-inset-*) values below to be non-zero).
   ════════════════════════════════════════════════════════════════════════ */

:root { --rp-gutter: var(--page-gutter, clamp(1rem, 4vw, 2rem)); }   /* single source: --page-gutter in style.css */

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

body {
  min-height: 100vh; min-height: 100dvh;
  /* One long word / wide element can never create sideways scrolling.
     `clip` (unlike `hidden`) doesn't break position:sticky. */
  overflow-x: hidden; overflow-x: clip;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

img, video, canvas, svg, iframe, embed, object { max-width: 100%; }

button, [role="button"], a, label, select, summary { touch-action: manipulation; }

/* Notch / cut-out / rounded-corner safe areas (landscape phones, iPhone, foldables) */
.navbar {
  padding-left:  env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.container {
  padding-left:  max(var(--rp-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-gutter), env(safe-area-inset-right, 0px));
}
.footer-bottom { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }

/* Grid children may shrink below their content width — stops a wide image,
   select or table from forcing a column past the screen. */
:is(.product-grid, .shop-grid, .review-grid, .category-grid, .promo-grid, .story-grid,
    .footer-grid, .pd-layout, .cart-layout, .checkout-layout, .profile-grid,
    .appt-layout, .form-grid, .auth-page, .related-grid) > * { min-width: 0; }

/* Review avatars: the flex ITEM is .review-avatar (style.css only sets flex-shrink on the
   <img> inside it, which does nothing). With `img { max-width:100% }` above, the squeezed
   wrapper capped the photo's width but not its height, so avatars turned into tall ovals. */
.review-avatar { flex: 0 0 52px; width: 52px; height: 52px; }
.review-avatar img { width: 52px; height: 52px; max-width: none; object-fit: cover; display: block; }

/* Wide tables scroll inside themselves instead of widening the page */
.rxt-wrap, .table-wrap, .table-responsive, .table-scroll {
  overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
}

/* ── Large screens ─────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --page-max: 1400px; }   /* navbar, hero and all sections widen together */
}
@media (min-width: 1920px) {
  html { font-size: 112.5%; }
  :root { --page-max: 1560px; }
}
@media (min-width: 2560px) {
  html { font-size: 125%; }
  :root { --page-max: 1800px; }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET & BELOW (≤ 1024px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid  { gap: 2rem; }
  .category-grid { gap: 1rem; }
  .newsletter-form input { width: min(280px, 100%); }
}

/* ════════════════════════════════════════════════════════════════════════
   SMALL TABLET / PHONE (≤ 768px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* style.css has `.review-grid { grid-column: 1fr }` here, which is not a
     valid layout rule — reviews stayed 3-up on phones. */
  .review-grid  { grid-template-columns: minmax(0, 1fr); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Shop by Age: Kids / Adults cards stay side by side on phones (style.css stacks
     them into one tall column here). Taller portrait cards keep faces clear of the
     text, a deeper gradient keeps the text readable, and the button is full-width. */
  .categories .section-title { margin-bottom: 1.5rem; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .cat-card-img {
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(40, 52, 40, .18);
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .cat-card-img:active { transform: scale(.98); box-shadow: 0 3px 10px rgba(40, 52, 40, .18); }
  .cat-card-img img { height: auto; aspect-ratio: 1 / 1.14; object-position: center 8%; }
  .cat-card-img .cat-overlay {
    padding: .85rem .8rem;
    background: linear-gradient(to top, rgba(28, 38, 28, .94) 0%, rgba(28, 38, 28, .72) 34%,
                                        rgba(28, 38, 28, .12) 62%, transparent 100%);
  }
  .cat-card-img .cat-overlay h3 { font-size: 1.1rem; line-height: 1.2; margin-bottom: .1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
  .cat-card-img .cat-overlay p {
    font-size: .72rem; line-height: 1.3; margin-bottom: .55rem; color: rgba(255, 255, 255, .88);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cat-card-img .cat-overlay .btn-lime.small {
    align-self: stretch; justify-content: center; text-align: center;
    padding: .45rem .5rem; font-size: .76rem; gap: .35rem; white-space: nowrap; border-radius: 10px;
  }

  /* Hamburger menu never taller than the visible screen (mobile browser bars) */
  .nav-links.mobile-open { max-height: calc(100vh - 68px); }
  @supports (height: 100dvh) {
    .nav-links.mobile-open { max-height: calc(100dvh - 68px); }
  }
  .nav-links.mobile-open { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }

  .newsletter-form { width: 100%; }
  .newsletter-form .btn-primary, .newsletter-form button { flex: 1 1 auto; }
}

/* Shop by Age on large phones / small tablets: wider cards, so make them
   squarer and let the button hug its label instead of stretching. */
@media (min-width: 481px) and (max-width: 768px) {
  .cat-card-img img { aspect-ratio: 1 / 1; object-position: center 20%; }
  .cat-card-img .cat-overlay { padding: 1.2rem; }
  .cat-card-img .cat-overlay h3 { font-size: 1.4rem; }
  .cat-card-img .cat-overlay p { font-size: .88rem; }
  .cat-card-img .cat-overlay .btn-lime.small { align-self: flex-start; padding: .55rem 1.25rem; font-size: .85rem; }
}

/* Touch devices: ≥44px tap targets, and 16px inputs so iOS Safari doesn't
   zoom the page when a field is focused. */
@media (pointer: coarse) {
  .nav-hamburger, .cart-icon-btn, .modal-close, .pd-tab-btn,
  .type-tab, .ctab, .nav-search-close { min-width: 44px; min-height: 44px; }
  .nav-links a { min-height: 44px; }
  .footer-col a { display: inline-block; padding: .3rem 0; }
  .social-links a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (pointer: coarse) and (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHONE (≤ 480px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .modal-bg { padding: max(.75rem, env(safe-area-inset-top, 0px)) max(.75rem, env(safe-area-inset-right, 0px))
                       max(.75rem, env(safe-area-inset-bottom, 0px)) max(.75rem, env(safe-area-inset-left, 0px)); }
  .modal-box { max-height: 90vh; max-height: 90dvh; padding: 1.4rem 1.2rem; }
  .btn-primary, .btn-outline { max-width: 100%; }
  .categories { padding: 3rem 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   SMALL PHONE (≤ 360px) — Galaxy S-series, older iPhones/SE, Pixel 4a
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container { padding-left: max(.9rem, env(safe-area-inset-left, 0px)); padding-right: max(.9rem, env(safe-area-inset-right, 0px)); }
  .hero h1 { font-size: 2rem; }
  .category-grid { gap: .65rem; }
  .cat-card-img .cat-overlay { padding: .7rem .6rem; }
  .cat-card-img .cat-overlay h3 { font-size: 1.02rem; }
  .cat-card-img .cat-overlay p { font-size: .7rem; }
  .cat-card-img .cat-overlay .btn-lime.small { padding: .5rem .4rem; font-size: .72rem; }
  .hero-content { padding-top: 3rem; padding-bottom: 3.5rem; }
  .auth-panel { padding: 2rem 1.1rem; }
  .auth-center { padding: 1rem; }
  .appt-page .appt-form-card, .appt-form-card { padding: .8rem; }
  .cart-item { grid-template-columns: 64px minmax(0, 1fr); gap: .6rem; padding: .9rem; }
  .nav-container { padding: 0 .5rem; }
  .logo-img { width: 70px; height: 36px; }
  .nav-links { padding-left: 1.1rem; padding-right: 1.1rem; }
  .nav-links.mobile-open { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   TINY (≤ 320px) — iPhone SE 1st gen, Galaxy Fold cover screen (~280px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  html { font-size: 15px; }
  .product-grid, .shop-grid, .related-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .form-group input, .form-group select, .form-group textarea { padding-left: .7rem; padding-right: .7rem; }
  .hero h1 { font-size: 1.75rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   LANDSCAPE PHONES (short viewports) — a full-height hero or menu would
   push all content below the fold.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero-content { padding-top: 2rem; padding-bottom: 2.5rem; }
  .hero h1 { font-size: clamp(1.8rem, 6vh + 1rem, 2.6rem); }
  .auth-page, .auth-panel { min-height: 0; }
  .auth-panel { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .modal-box { max-height: 100vh; max-height: 100dvh; }
  .nav-links.mobile-open { max-height: calc(100vh - 68px); }
  @supports (height: 100dvh) { .nav-links.mobile-open { max-height: calc(100dvh - 68px); } }
}

/* Foldables in a two-screen posture: keep content off the hinge */
@media (horizontal-viewport-segments: 2) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   HOME HERO + SIDEWAYS-SCROLL SAFETY NET
   ════════════════════════════════════════════════════════════════════════ */

/* If anything on a page is ever a few pixels too wide, phone browsers (especially
   in-app ones like Messenger / Facebook) zoom the page OUT to fit it, which leaves
   a blank white strip down the right side. Clipping at the root stops that. */
html { overflow-x: hidden; }

/* The model's face sits ~70% across the hero photo, the clinic wall ~40% across.
   `cover` crops from the centre on narrow screens and cuts the face off, so each
   slide gets its own focal point (slide 1 = model, 2 = clinic, 3 = logo case). */
@media (max-width: 1024px) {
  .hero-slide:nth-child(1) { background-position: 85% 30%; }
  .hero-slide:nth-child(2) { background-position: 35% 50%; }
  .hero-slide:nth-child(3) { background-position: 50% 45%; }
}

/* Portrait phones + small tablets: the photo stays the hero BACKGROUND (as on desktop),
   but it is drawn smaller and pinned to the top so the model's face sits above the text.

   HOW THE EDGE IS HIDDEN (no mask-image — in-app browsers like Messenger ignore it and
   the photo's bottom edge showed as a hard line): slides 1–2 are shrunk to a box pinned
   to the top of the hero, and an ::after gradient inside that box ends in solid --deep
   (#283428), the same colour as .hero's own background. The photo therefore melts into
   the dark green whether or not the browser supports masks. Slide 3 is untouched. */
@media (max-width: 768px) and (orientation: portrait) {
  .hero { min-height: clamp(520px, 142vw, 600px); align-items: flex-end; }

  .hero-slide:nth-child(1), .hero-slide:nth-child(2) {
    bottom: auto; height: 72%;
    background-size: auto 100%;
  }
  .hero-slide:nth-child(1)::after, .hero-slide:nth-child(2)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 45%;
    background: linear-gradient(to bottom,
      rgba(40,52,40,0) 0%, rgba(40,52,40,.55) 50%, rgba(40,52,40,1) 100%);
  }
  .hero-slide:nth-child(1) { background-position: 100% 0; }   /* model's face */
  .hero-slide:nth-child(2) { background-position: 30% 0; }    /* clinic wall of frames */
  .hero-slide:nth-child(3) { background-position: 50% 50%; }  /* logo case */
  .hero-overlay {
    background: linear-gradient(to top,
      rgba(40,52,40,.97) 0%, rgba(40,52,40,.9) 45%, rgba(40,52,40,0) 62%);
    background: linear-gradient(to top,
      color-mix(in srgb, var(--deep) 97%, transparent) 0%,
      color-mix(in srgb, var(--deep) 90%, transparent) 45%,
      color-mix(in srgb, var(--deep) 0%, transparent) 62%);
  }
  .hero::after { height: 56px; }
  .hero .hero-content { padding-top: 0; padding-bottom: 3.75rem; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); margin-bottom: .4rem; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
  .hero .hero-tagline { margin-bottom: .7rem; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
  .hero .hero-sub { font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; }
  .hero-btns { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .7rem; }
  .hero-btns > * { flex: 1 1 0; min-width: 0; text-align: center; justify-content: center;
                   padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
}

/* Phones: photo box smaller still (56% of the hero's height), fade starts a bit higher. */
@media (max-width: 480px) and (orientation: portrait) {
  .hero-slide:nth-child(1), .hero-slide:nth-child(2) { height: 56%; }
  .hero-slide:nth-child(1)::after, .hero-slide:nth-child(2)::after { height: 38%; }
  .hero-slide:nth-child(2) { background-position: 20% 0; }
  .hero-overlay {
    background: linear-gradient(to top,
      rgba(40,52,40,.97) 0%, rgba(40,52,40,.85) 48%, rgba(40,52,40,0) 62%);
    background: linear-gradient(to top,
      color-mix(in srgb, var(--deep) 97%, transparent) 0%,
      color-mix(in srgb, var(--deep) 85%, transparent) 48%,
      color-mix(in srgb, var(--deep) 0%, transparent) 62%);
  }
}

/* ── Hero: no hairline between the hero and the next section ───────────────
   At fractional zoom / pixel ratios (browser zoom, DevTools "fit to window", some
   Android phones) the hero's last pixel row is blended with the dark --deep background
   behind the fade, which shows up as a thin dark line. The bottom 4px of the hero's own
   background is now the same colour the fade ends in, so there is nothing dark to blend. */
.hero {
  background:
    linear-gradient(var(--deep), var(--deep)) top left / 100% calc(100% - 4px) no-repeat,
    var(--offwhite);
}
/* The hero's layers (photo, overlay, fade) are each anti-aliased on their own at that
   last pixel row, so a trace can still leak through. The next section therefore paints
   a 2px strip of its own background up over the hero's bottom edge. */
.hero + .categories { position: relative; z-index: 3; box-shadow: 0 -2px 0 var(--offwhite); }

/* ── Special Offers: keep the two small promos (Kids Frames / Free Eye Exam)
   side by side in a 2-column grid on tablet + phone. The big "Buy 2, Get 1 Free"
   card stays full width above them (.promo-grid is already 1 column ≤1024px). ── */
@media (max-width: 1024px) {
  .promo-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .promo-side > .promo-card { min-width: 0; }
}
@media (max-width: 600px) {
  .promo-side { gap: .75rem; }
  .promo-small img { min-height: 190px; height: 100%; object-fit: cover; }
  .promo-small .promo-text { padding: 1rem .8rem .85rem; }
  .promo-small .promo-text h3 { font-size: 1rem; line-height: 1.25; margin-bottom: .55rem; }
  .promo-small .promo-text .btn-lime.small { padding: .45rem .8rem; font-size: .74rem; gap: .3rem; }
}
@media (max-width: 360px) {
  .promo-small .promo-text { padding: .85rem .6rem .75rem; }
  .promo-small .promo-text h3 { font-size: .92rem; }
  .promo-small .promo-text .btn-lime.small { padding: .4rem .6rem; font-size: .7rem; }
  .promo-small .promo-text .btn-lime.small i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}