/* Lead Opticals — mobile refinement layer. Loaded after page styles. */
@media (max-width: 767px) {
  :root {
    --gutter: 1rem;
    --section-y: 3.5rem;
  }

  html { scroll-padding-top: calc(var(--header-h) + 10px); }
  body { font-size: 16px; }
  button, a, input, select, textarea { touch-action: manipulation; }
  input, select, textarea { font-size: 16px !important; }
  .btn, .input, .select { min-height: 48px; }
  .section { padding-block: var(--section-y); }
  .section-head { margin-bottom: 1.75rem; gap: 1rem; }
  .page-head { padding-block: 1.25rem 1.75rem; }
  .page-head h1 { margin-block: .5rem .75rem; }
  .crumb { padding-top: .9rem; font-size: .68rem; }

  /* Product: keep the frame useful, then expose buying choices quickly. */
  .pdp-page { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .pdp { gap: 1.25rem; padding-block: .85rem 2rem; }
  .pdp-gallery { width: 100%; }
  .pdp .gallery-main {
    aspect-ratio: 1 / .92;
    max-height: min(72vh, 460px);
  }
  .pdp .gallery-stage { width: 72%; max-height: 260px; }
  .pdp .gallery-stage.has-photo {
    width: 96%;
    height: 96%;
    max-height: none;
  }
  .card-media .card-art { inset: 4% 3%; }
  .gallery-thumbs { gap: 6px; margin-top: 6px; }
  .gallery-thumbs button { min-height: 54px; padding: 5px; }
  .gallery-thumbs .thumb-label { display: none; }
  .pdp-info h1 { margin-block: .45rem; }
  .pdp-price { margin-block: .8rem .65rem; }
  .pdp-ticket { margin-bottom: 1.25rem; }
  .opt-block { margin-bottom: 1.25rem; }
  .swatch { width: 44px; height: 44px; }
  .lens-builder { padding: 14px; margin-bottom: 1rem; }
  .purchase-mode-card { min-height: 68px; padding: 13px; }
  .purchase-mode-card > .num { white-space: nowrap; }
  .lens-card, .lens-chip { min-height: 52px; }
  .addon-check { min-height: 52px; padding-block: 11px; }
  .rx-choices { display: grid; grid-template-columns: 1fr; }
  .rx-choice { min-height: 46px; border-radius: 3px; }
  .rx-row { gap: 8px; }
  .rx-cell .select { min-width: 0; width: 100%; }
  .rx-head { align-items: flex-start; }
  .rx-note { max-width: 16ch; text-align: right; }
  .pdp-buy { margin-bottom: 8px; }
  .pdp-buy .btn { min-height: 52px; }
  .sticky-buy {
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-buy .sticky-info { display: none; }
  .sticky-buy .btn { width: 100%; min-height: 52px; font-size: .94rem; }
  .rx-vision-card { padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .rx-vision-option { min-height: 60px; }

  /* Catalogue: two useful columns, visible save controls, less dead space. */
  .shop { gap: 1.25rem; padding-bottom: 3.5rem; }
  .results-bar { gap: 10px; margin-bottom: 1rem; }
  .product-grid, .product-grid.is-roomy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem .75rem;
    max-width: none;
  }
  .card-media { margin-bottom: .65rem; }
  .card-wish { opacity: 1; transform: none; width: 42px; height: 42px; }
  .card-top { display: grid; gap: 3px; }
  .card-price { white-space: normal; }
  .card-meta { line-height: 1.45; }
  .card-hover { display: none; }

  /* Cart and checkout: readable summaries and full-width actions. */
  .cart-layout, .checkout-grid { gap: 1.5rem; padding-bottom: 3.5rem; }
  .cart-line { grid-template-columns: 82px minmax(0, 1fr); column-gap: 12px; }
  .line-links { gap: 12px; flex-wrap: wrap; }
  .cart-actions, .step-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .cart-actions .btn, .step-actions .btn { width: 100%; }
  .cart-summary, .checkout-summary { position: static; }
  .summary-card { padding: 1rem; }
  .checkout { padding-block: 1.25rem 3.5rem; }
  .checkout-head { margin-bottom: 1.25rem; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .step { min-width: 0; padding: 7px; justify-content: center; }
  .step > span:last-child { display: none; }
  .step-num { width: 28px; height: 28px; }
  .step-intro { margin-bottom: 1.25rem; }
  .ship-opt, .pay-opt { min-height: 58px; }

  /* Booking and account: reduce scrolling and keep controls thumb-friendly. */
  .book-head { gap: 1.25rem; padding-bottom: 1.5rem; }
  .book { gap: 1.5rem; }
  .book-block { padding-block: 1.25rem; }
  .service-grid, .slot-grid { gap: 8px; }
  .service-card, .slot { min-height: 50px; }
  .date-rail { scroll-snap-type: x mandatory; }
  .date-card { scroll-snap-align: start; min-width: 64px; }
  .book-submit { position: static; }
  .book-aside { display: grid; gap: 12px; }
  .account { gap: 1.25rem; }
  .account-panel, .aside-card { padding: 1rem; }
  .account-tabs { overflow-x: auto; scrollbar-width: none; }
  .account-tab { min-height: 48px; white-space: nowrap; }
  .account-sections { margin-top: 1.25rem; }
  .account-section-tab { min-height: 46px; }

  /* Footer: retain access to links without an unnecessarily tall single column. */
  .foot-main { padding-block: 2.5rem; }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .foot-col a { min-height: 40px; display: flex; align-items: center; }
  .foot-bottom { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }

  .modal { padding: 12px; }
  .modal-card { max-height: 92vh; }
  .toast { width: 100%; line-height: 1.4; }
}

@media (max-width: 360px) {
  .product-grid, .product-grid.is-roomy { gap-inline: .55rem; }
  .card-name, .card-price { font-size: .82rem; }
  .purchase-mode-card { align-items: flex-start; flex-direction: column; gap: 6px; }
  .foot-links { grid-template-columns: 1fr; }
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 460px) {
  .pdp-page { padding-bottom: 0; }
  .sticky-buy { display: none !important; }
}