/* ═══════════════════════════════════════════════════════
   ENDLESS PURE LANDING — SHARED MOBILE STYLES
   Linked from all 6 landing pages.
   Breakpoints: 860px (tablet/mobile), 480px (small phone)
═══════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON ────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.5px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(15,14,12,0.14);
  border-radius: 7px;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.nav-hamburger:hover { background: rgba(15,14,12,0.04); }
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #0F0E0C;
  border-radius: 2px;
  transition: transform 0.26s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SHOW HAMBURGER + HIDE SIGNIN ON MOBILE ──────────── */
@media (max-width: 860px) {
  .nav-hamburger { display: flex; }
  .nav-signin { display: none !important; }
  nav .nav-lang { display: none !important; }
}

/* ── btn-nav shrink on very small screens ────────────── */
@media (max-width: 400px) {
  .btn-nav { font-size: 11.5px; padding: 8px 14px; }
  .btn-nav .arr { display: none; }
}

/* ── MOBILE NAV OVERLAY ──────────────────────────────── */
.nav-mob-overlay {
  /* Always in DOM — display:none breaks opacity transitions */
  position: fixed;
  inset: 0;
  z-index: 298;
  background: rgba(15,14,12,0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;           /* block iOS momentum scroll-through */
  overscroll-behavior: none;
  /* hide immediately, reveal after opacity fades in */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.nav-mob-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* ── MOBILE NAV DRAWER ───────────────────────────────── */
.nav-mob-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: min(340px, 92vw);
  background: #F7F4EF;
  border-left: 1px solid rgba(15,14,12,0.10);
  box-shadow: -8px 0 40px rgba(15,14,12,0.10);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mob-drawer.is-open { transform: translateX(0); }

/* Drawer header (logo + close btn) */
.nav-mob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  border-bottom: 1px solid rgba(15,14,12,0.09);
  flex-shrink: 0;
}
.nav-mob-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.nav-mob-logo-top {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #0F0E0C;
}
.nav-mob-logo-sub {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15,14,12,0.45);
  margin-top: 2px;
}
.nav-mob-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15,14,12,0.12);
  border-radius: 7px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F0E0C;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-mob-close:hover { background: rgba(15,14,12,0.06); }

/* Drawer nav links */
.nav-mob-links {
  flex: 1;
  padding: 6px 0;
}
.nav-mob-link {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(15,14,12,0.65);
  text-decoration: none;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(15,14,12,0.06);
  transition: color 0.14s, background 0.14s;
  -webkit-tap-highlight-color: transparent;
}
.nav-mob-link:last-child { border-bottom: none; }
.nav-mob-link:hover,
.nav-mob-link:active { color: #0F0E0C; background: rgba(15,14,12,0.03); }
.nav-mob-link.active { color: #0F0E0C; font-weight: 600; }

/* Drawer footer CTAs */
.nav-mob-footer {
  padding: 20px 24px 36px;
  border-top: 1px solid rgba(15,14,12,0.09);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.nav-mob-signin {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(15,14,12,0.7);
  text-decoration: none;
  text-align: center;
  padding: 11px 20px;
  border: 1px solid rgba(15,14,12,0.16);
  border-radius: 6px;
  transition: color 0.14s, border-color 0.14s;
  -webkit-tap-highlight-color: transparent;
}
.nav-mob-signin:hover { color: #0F0E0C; border-color: rgba(15,14,12,0.3); }
.nav-mob-cta {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: #0F0E0C;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 14px 20px;
  border-radius: 6px;
  transition: background 0.14s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.nav-mob-cta:hover { background: #4A5C45; }

/* Drawer lang switcher */
.nav-mob-lang {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(15,14,12,0.50);
  background: none;
  border: 1px solid rgba(15,14,12,0.12);
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  text-align: left;
  transition: color 0.14s, border-color 0.14s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.nav-mob-lang:hover { color: #0F0E0C; border-color: rgba(15,14,12,0.28); }
/* ep-lang-wrap inside drawer: dropdown opens upward */
.nav-mob-footer .ep-lang-wrap { position: relative; width: 100%; }
.nav-mob-footer .ep-lang-menu {
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  right: 0;
  min-width: 100%;
}

/* ── SCROLL LOCK when drawer open ───────────────────── */
body.nav-is-open { overflow: hidden; }

/* ── SHARED MOBILE LAYOUT FIXES ─────────────────────── */
@media (max-width: 860px) {

  /* Footer shared (ep-footer) */
  .ep-footer {
    padding: 40px 24px 28px;
  }
  .ep-footer .ep-ft-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Hero pills / USP rows */
  .hero-pills,
  .usp-row {
    flex-wrap: wrap;
  }

  /* Stat strips inside hero */
  .hero-stats {
    flex-wrap: wrap;
  }
  .hero-stats .hs {
    min-width: 120px;
  }
}

/* ── INLINE GRID OVERRIDE (mob-stack utility) ─────────
   Applied to divs that use inline style="display:grid;
   grid-template-columns:..." so media queries can't
   target them directly. Add class="mob-stack" to the
   element alongside its inline style to collapse it to
   a single column on mobile.
─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mob-stack {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* When the #terms right-side photo panel stacks below
     the text column, give it a reasonable fixed height
     instead of growing to fill an empty container */
  #terms .mob-stack > div:last-child {
    min-height: 240px;
  }

  /* Kits / samples photo column: cap height when stacked */
  .mob-stack > div[style*="max-height:320px"],
  .mob-stack > div[style*="max-height: 320px"] {
    max-height: 200px !important;
  }
}

@media (max-width: 480px) {
  .ep-footer .ep-ft-top {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
  .hero-stats .hs {
    min-width: unset;
  }
}

/* ── SAMPLES section: hide photo grid on mobile ──────── */
@media (max-width: 860px) {
  #samples > div:nth-child(5) { display: none !important; }
}

/* ── SCIENCE STRIP: show photo when stacked ─────────── */
@media (max-width: 860px) {
  /* pharmacy.html: science-strip stacks to 1 col, photo shown below text */
  .science-strip { max-height: none !important; }
  .science-photo { display: block !important; }
  .science-photo img { height: 320px; }

  /* cosmetologist.html: mob-stack outer science block */
  .mob-stack { max-height: none !important; }
}

/* ── DRAWER ANIMATION (hardware-accelerated) ─────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-mob-drawer { transition: none; }
  .nav-mob-overlay { transition: none; }
  .nav-hamburger span { transition: none; }
}