/* ── SHOP TOOLBAR ────────────────────────────────────────────── */
.al-shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--al-border);
}
.woocommerce-result-count {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-light);
  margin: 0;
}
.woocommerce-ordering select {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--al-border);
  background: var(--al-cream);
  color: var(--al-ink);
  padding: 8px 14px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ── WC PAGINATION ───────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul {
  list-style: none;
  display: flex;
  gap: 2px;
  padding: 0;
  margin: 0;
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--al-mid);
  background: var(--al-cream2);
  border: 1px solid var(--al-border);
  transition: background 0.2s, color 0.2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--al-ink);
  color: var(--al-white);
  border-color: var(--al-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--al-gold);
  color: var(--al-white);
  border-color: var(--al-gold);
}

/* ── FOOTER SOCIAL LINKS ─────────────────────────────────────── */
.al-footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.al-footer__social-link {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(253,251,248,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(253,251,248,0.4);
  transition: border-color 0.2s, color 0.2s;
}
.al-footer__social-link:hover {
  border-color: var(--al-gold);
  color: var(--al-gold);
}

/* My Account page padding is handled by .al-myaccount in style.css */

/* ── WC CART PAGE ────────────────────────────────────────────── */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 5rem;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.woocommerce-cart .cart-collaterals {
  margin-top: 3rem;
  max-width: 400px;
  margin-left: auto;
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--al-mid);
  margin-bottom: 1.5rem;
}
.woocommerce-checkout #order_review_heading {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--al-mid);
  margin-bottom: 1.5rem;
}
.woocommerce-checkout #payment {
  background: var(--al-cream2);
  padding: 2rem;
  border: 1px solid var(--al-border);
  margin-top: 2rem;
}
.woocommerce-checkout #payment .payment_methods {
  list-style: none;
  padding: 0;
}
.woocommerce-checkout #payment .payment_methods li label {
  font-family: var(--f-display);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--al-ink);
}

/* ── AL-PRODUCT DIMENSIONS LINE ──────────────────────────────── */
.al-product__dims {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--al-light);
  margin-top: 0.5rem;
}
.al-product__dims a {
  color: var(--al-gold);
  margin-left: 0.5rem;
}

/* ── WOOCOMMERCE VARIABLE PRODUCT VARIATIONS ─────────────────── */
.woocommerce div.product form.cart .variations_button {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}
.woocommerce div.product .single_variation_wrap { margin-bottom: 1rem; }
.woocommerce div.product .woocommerce-variation-price .price {
  font-family: var(--f-ui);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--al-ink);
}

/* ── STAR RATINGS ────────────────────────────────────────────── */
.woocommerce .star-rating {
  color: var(--al-gold);
  font-size: 1rem;
}

/* ── SEARCH FORM (inside overlay) ───────────────────────────── */
.al-search .search-form { width: 100%; }
.al-search .search-field {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(253,251,248,0.15);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--al-white);
  padding: 1rem 0;
  outline: none;
  width: 100%;
}
.al-search .search-field::placeholder { color: rgba(253,251,248,0.2); }
.al-search .search-submit {
  background: none;
  border: none;
  color: var(--al-gold);
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 1rem;
  padding: 0;
}

/* ── 404 PAGE ────────────────────────────────────────────────── */
.al-404 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--al-dark);
  padding: var(--pad);
  padding-top: var(--nav-h);
}
.al-404__num {
  font-family: var(--f-display);
  font-size: clamp(6rem, 18vw, 18rem);
  font-style: italic;
  color: rgba(253,251,248,0.05);
  line-height: 1;
  pointer-events: none;
}
.al-404__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--al-white);
  margin-bottom: 1rem;
}
.al-404__desc {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: rgba(253,251,248,0.45);
  margin-bottom: 2.5rem;
}

/* ── TRY-ON MOBILE FIXES ─────────────────────────────────────── */
@media (max-width: 768px) {
  .al-tryon {
    grid-template-columns: 1fr;
    min-height: 100svh;
  }
  .al-tryon__viewport {
    height: 60svh;
    min-height: 300px;
  }
  .al-tryon__cam-wrap { height: 100%; }
  .al-tryon__sidebar {
    max-height: 40svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem;
    gap: 1.25rem;
  }
  .al-tryon__frame-grid { grid-template-columns: repeat(4,1fr); gap: 3px; }
  .al-tryon__frame-btn img { height: 52px; }
  .al-tryon__cam-bar { padding: 0.75rem 1rem; gap: 0.5rem; }
  .al-tryon__cam-bar .al-btn { padding: 10px 16px; font-size: 9px; }
  .al-tryon__status { font-size: 9px; padding: 6px 12px; bottom: 1rem; }
  .al-tryon__guide { width: min(200px, 50%); }
  .al-tryon__privacy { padding: 0.5rem 1rem 0.75rem; }
}

/* NOTE: .al-nav__toggle base + responsive rules live in style.css
   (single source of truth — avoids cascade conflicts). */

/* ── PREVENT HORIZONTAL OVERFLOW ON MOBILE ───────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
.al-hero, .al-gender, .al-featured, .al-usp,
.al-ai, .al-hiw, .al-newsletter, .al-footer {
  overflow-x: hidden;
}

/* ── MOBILE WRAP ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .al-wrap { padding-inline: 1.25rem; }
  .al-section { padding-block: clamp(3rem, 6vw, 5rem); }
}

/* ── PRODUCT GRID MOBILE ENSURE 2 COLS ───────────────────────── */
@media (max-width: 768px) {
  .al-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
}

/* ── BACK TO TOP BUTTON ───────────────────────────────────────── */
.al-totop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--al-ink);
  color: var(--al-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background 0.25s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.al-totop--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.al-totop:hover { background: var(--al-gold); }

@media (max-width: 768px) {
  .al-totop {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
  }
}

/* ── NAV: TRY-ON HIGHLIGHTED LINK ────────────────────────────── */
.al-nav__links a.al-nav__tryon-link {
  color: var(--al-gold2) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.al-nav__links a.al-nav__tryon-link svg { flex-shrink: 0; }
.al-nav__links a.al-nav__tryon-link::after { background: var(--al-gold2); }

/* Floating Try-On button (always visible, bottom-left) */
.al-tryon-fab {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--al-gold);
  color: var(--al-white);
  padding: 12px 20px;
  border-radius: 99px;
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(168,134,74,0.4);
  transition: transform 0.25s, background 0.25s;
}
.al-tryon-fab:hover { background: var(--al-ink); transform: translateY(-2px); }
.al-tryon-fab svg { flex-shrink: 0; }

@media (max-width: 768px) {
  .al-tryon-fab {
    bottom: 1.25rem;
    left: 1.25rem;
    padding: 10px 16px;
    font-size: 9px;
  }
  .al-tryon-fab span { display: none; }
  .al-tryon-fab { width: 42px; height: 42px; border-radius: 50%; justify-content: center; padding: 0; }
}

/* Hide FAB on the try-on page itself */
.al-tryon-page-active .al-tryon-fab { display: none; }

/* ── PRESCRIPTION UPLOAD FORM ────────────────────────────────── */
.al-rx-intro { margin-bottom: 1.5rem; }
.al-rx-method-select {
  display: flex;
  gap: 0;
  border: 1px solid var(--al-border);
  margin-bottom: 1.5rem;
}
.al-rx-method {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-mid);
  border-right: 1px solid var(--al-border);
  transition: background 0.2s, color 0.2s;
  text-align: center;
}
.al-rx-method:last-child { border-right: none; }
.al-rx-method input { display: none; }
.al-rx-method:has(input:checked) {
  background: var(--al-ink);
  color: var(--al-white);
}

/* Panel visibility — controlled by JS adding/removing this class.
   No inline styles, no :has() dependency — works in every browser. */
.al-rx-panel--hidden {
  display: none !important;
}
.al-rx-panel { margin-bottom: 1.5rem; }
.al-rx-panel-label {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-mid);
  margin-bottom: 0.75rem;
}
.al-rx-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  border: 1.5px dashed var(--al-border);
  cursor: pointer;
  text-align: center;
  color: var(--al-mid);
  transition: border-color 0.2s, background 0.2s;
}
.al-rx-upload-box:hover { border-color: var(--al-gold); background: var(--al-cream2); }
.al-rx-upload-box span {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--al-ink);
}
.al-rx-upload-box small {
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--al-light);
}

/* Manual entry form — redesigned as two clear eye cards (OD/OS)
   instead of a cramped 5-column grid. Unambiguous at any width. */
.al-rx-eyes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.al-rx-eye-card {
  border: 1px solid var(--al-border);
  padding: 1.25rem;
  background: var(--al-cream2);
}
.al-rx-eye-title {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--al-ink);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--al-border);
}
.al-rx-eye-field {
  margin-bottom: 0.9rem;
}
.al-rx-eye-field:last-child { margin-bottom: 0; }
.al-rx-eye-field-label {
  display: block;
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-mid);
  margin-bottom: 0.35rem;
}
.al-rx-eye-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--al-border);
  background: var(--al-white);
  padding: 11px 14px;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--al-ink);
  outline: none;
  transition: border-color 0.2s;
}
.al-rx-eye-field input:focus { border-color: var(--al-gold); }
.al-rx-eye-field input::placeholder { color: var(--al-light); }

.al-rx-pd-field {
  margin-bottom: 1.5rem;
  max-width: 240px;
}
.al-rx-pd-field label {
  display: block;
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-mid);
  margin-bottom: 0.35rem;
}
.al-rx-pd-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--al-border);
  background: var(--al-white);
  padding: 11px 14px;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--al-ink);
  outline: none;
}
.al-rx-pd-field input:focus { border-color: var(--al-gold); }

@media (max-width: 600px) {
  .al-rx-eyes { grid-template-columns: 1fr; gap: 0.75rem; }
  .al-rx-eye-field input,
  .al-rx-pd-field input { font-size: 16px; } /* prevents iOS zoom-on-focus */
}
.al-rx-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--al-mid);
  cursor: pointer;
  margin-bottom: 0.75rem;
}
.al-rx-add-row input {
  border: 1px solid var(--al-border);
  background: var(--al-white);
  padding: 10px 14px;
  font-family: var(--f-display);
  font-size: 0.95rem;
  width: 100%;
  max-width: 220px;
  outline: none;
  box-sizing: border-box;
}
.al-rx-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--al-light);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--al-border);
}

/* Manual entry form responsiveness is handled natively by
   .al-rx-eyes (see definition above) — no extra breakpoints needed. */

/* ── GLOBAL OVERFLOW SAFETY NET ───────────────────────────────── */
/* Catches any image anywhere with WP inline width/height attributes
   that would otherwise break mobile layout regardless of upload size. */
img {
  max-width: 100% !important;
  height: auto !important;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.al-product__main-img img,
.al-product__thumb img,
.al-card__img-wrap img {
  width: 100% !important;
}

/* WooCommerce gallery wrapper sometimes gets inline width from JS init */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
  max-width: 100% !important;
}

/* Prevent any fixed-width inline elements from forcing horizontal scroll */
.al-product__info,
.al-product__short-desc,
.al-product__tab-panel {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   DEFINITIVE FIX: prevent oversized images from breaking layout
   CSS Grid tracks default to a minimum size based on content —
   without min-width:0 a large image can force the whole grid,
   and therefore the page, wider than the viewport. This breaks
   position:fixed elements like the navbar on mobile.
═══════════════════════════════════════════════════════════ */
.al-product-grid,
.al-gender__grid,
.woocommerce ul.products,
.al-ai-page__lines-grid,
.al-thankyou__grid,
.al-product__grid,
.al-shop__layout,
.al-hiw__layout,
.al-ai__layout,
.al-newsletter__layout,
.al-tryon,
.al-tryon__frame-grid,
.al-footer__grid,
.al-rx-eyes,
.al-product__specs,
.al-myaccount {
  min-width: 0;
}
.al-product-grid > *,
.al-gender__grid > *,
.woocommerce ul.products > li,
.al-ai-page__lines-grid > *,
.al-thankyou__grid > *,
.al-product__grid > *,
.al-shop__layout > *,
.al-hiw__layout > *,
.al-ai__layout > *,
.al-newsletter__layout > *,
.al-tryon > *,
.al-footer__grid > *,
.al-rx-eyes > *,
.al-product__specs > * {
  min-width: 0;
}

/* Same fix for flex containers (cards, nav, tabs) */
.al-card,
.al-nav__inner,
.al-nav__right,
.al-hero__actions,
.al-newsletter__form,
.al-rx-method-select,
.al-rx-method,
.al-product__qty-row,
.al-tryon__cta,
.al-product__reassurance {
  min-width: 0;
}

/* Images and their direct wrappers must never exceed their container,
   regardless of the uploaded file's native resolution */
img, picture, svg, video, canvas {
  max-width: 100%;
  height: auto;
  min-width: 0;
}
.al-card__img-wrap,
.al-gender__tile,
.al-hero__image,
.al-product__main-img,
.al-product__thumb,
.al-ai-card,
.woocommerce-product-gallery {
  min-width: 0;
  overflow: hidden;
}

/* Absolute final safety net: nothing can ever force horizontal scroll */
html {
  overflow-x: hidden;
  width: 100%;
}
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
/* Targeted max-width cap — applied to block-level content containers only,
   not to every element (which would break SVG viewBox-based icons). */
img, video, iframe, embed, object, table, pre, figure {
  max-width: 100%;
}

/* Method selector — stack vertically on small screens */
@media (max-width: 600px) {
  .al-rx-method-select { flex-direction: column; }
  .al-rx-method { border-right: none; border-bottom: 1px solid var(--al-border); }
  .al-rx-method:last-child { border-bottom: none; }
}

/* ── ACCOUNT PAGE: neutralise WC/WP wrappers ────────────────── */
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  display: block !important;
  grid-template-columns: none !important;
}