/* Mobile-flawless polish.
   Addresses common mobile UX issues across the site:
   - Card labels clearly readable
   - Touch targets ≥44px (WCAG 2.5.5)
   - Hero text sized for narrow viewports
   - No horizontal scroll causes
   - Consistent spacing scale
*/

@media (max-width: 640px) {

/* --- 1. CATALOG CARDS (products grid + research-kits + stacks) --- */

.product-grid .card,
.stacks-grid__card,
article.card.kit-card {
  /* Single column already from prior CSS. Give cards a clear, readable
     layout with generous padding so text doesn't crowd the photo. */
  padding: 0;
  border-radius: 0;
}
.product-grid .card .card__body,
.stacks-grid__card .stacks-grid__body,
article.card.kit-card .card__body {
  padding: 14px 16px 16px !important;
}
.product-grid .card__photo,
.stacks-grid__photo,
.kit-card .card__photo {
  /* Stop photos from getting square on tiny screens — bound the aspect */
  aspect-ratio: 4 / 3 !important;
  max-height: 280px;
}
.product-grid .card__name,
.stacks-grid__name,
.kit-card .card__name {
  font-size: 17px !important;
  line-height: 1.25 !important;
  margin: 4px 0 6px !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.product-grid .card__cat,
.stacks-grid__cat,
.kit-card .card__cat {
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
  font-weight: 700 !important;
}
.product-grid .card__meta,
.stacks-grid__blurb,
.kit-card .card__meta,
.kit-card .card__blurb {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--body, #3c3c3c) !important;
  margin: 4px 0 12px !important;
  /* Don't truncate — show full text on mobile so customers know what it is */
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  display: block !important;
}
.product-grid .card__price,
.stacks-grid__card .card__price,
.kit-card .card__price {
  font-size: 18px !important;
  font-weight: 800 !important;
}
.product-grid .card__cta,
.stacks-grid__card .card__cta,
.kit-card .card__cta {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.product-grid .card__row,
.kit-card .card__row {
  align-items: center !important;
  margin-top: 8px !important;
}

/* --- 2. TOUCH TARGETS (44px min per WCAG 2.5.5) --- */

button,
.btn,
.nav__links a,
.product-grid .card,
.iconbtn,
input[type="button"],
input[type="submit"] {
  min-height: 44px !important;
}
.iconbtn {
  min-width: 44px !important;
}
/* Inline cart-quantity steppers need room to tap */
.qty__btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* --- 3. HEROES — readable text on narrow screens --- */

section.page-hero,
section.page-hero--media,
section.page-head,
section.hero {
  padding-left: 18px !important;
  padding-right: 18px !important;
  padding-top: 48px !important;
  padding-bottom: 40px !important;
}
section.page-hero h1,
section.page-hero .display-lg,
section.page-head h1 {
  font-size: clamp(26px, 7vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin: 8px 0 12px !important;
}
section.page-hero p,
section.page-hero .page-head__lead,
section.page-head p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
}
section.page-hero .eyebrow {
  font-size: 10px !important;
  letter-spacing: 2px !important;
}
.page-hero__strip {
  /* Stat strip below hero — wrap on mobile */
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 16px 0 !important;
}
.page-hero__strip > div {
  flex: 0 0 calc(50% - 6px) !important;
  text-align: center;
}
.page-hero__strip__num {
  font-size: 18px !important;
}
.page-hero__strip__lbl {
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
}

/* --- 4. BAND SECTION PADDING — tighter on mobile --- */

section.band,
section.band--light,
section.band--dark {
  padding-left: 18px !important;
  padding-right: 18px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
section.band h2,
section.band--light h2,
section.band--dark h2 {
  font-size: clamp(20px, 5vw, 26px) !important;
  line-height: 1.2 !important;
}

/* --- 5. PDP — make the buy rail readable + tappable --- */

.pdp__info {
  padding: 18px !important;
}
.pdp__h1 {
  font-size: 24px !important;
  line-height: 1.15 !important;
}
.pdp__price {
  font-size: 28px !important;
  font-weight: 800 !important;
}
.buy-rail {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px !important;
}
.buy-rail .btn {
  width: 100% !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
}

/* --- 6. CART/CHECKOUT — readable + tappable --- */

.cart-foot-row,
.checkout-row {
  font-size: 14px !important;
  padding: 8px 0 !important;
}
.cart-foot-row.tabular,
.cart-foot-row span:last-child {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* --- 7. NAV — burger button needs proper hit area --- */

.nav__burger {
  width: 44px !important;
  height: 44px !important;
}
.nav__brand img,
.nav__brand svg {
  height: 28px !important;
}

/* --- 8. FOOTER spacing --- */

.footer-sitemap {
  padding: 32px 18px 18px !important;
}
.footer-sitemap__col h3 {
  font-size: 13px !important;
  margin-bottom: 10px !important;
}
.footer-sitemap__col ul li {
  margin-bottom: 8px !important;
}
.footer-sitemap__col a {
  font-size: 13px !important;
  padding: 4px 0 !important;
  display: inline-block;
}
.footer-sitemap__pay-marks {
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.footer-sitemap__pay-mark img {
  height: 22px !important;
}

/* --- 9. KILL horizontal scroll causes --- */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
img, picture, video {
  max-width: 100% !important;
  height: auto;
}
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* --- 10. STICKY CART BAR / SUPPORT WIDGET don't overlap --- */

.lumera-mobile-cta {
  /* The bottom-of-screen sticky cart bar — already fixed, just ensure
     it doesn't sit ON TOP of the support widget */
  padding-right: 70px !important;
}

/* --- 11. HOMEPAGE LAB HERO (hero--lab) — fix mobile cutoff --- */
/*  The lab hero has max-height + overflow:hidden + absolutely-positioned
    ribbon. On small phones that combo clips the lead text + CTAs. Let
    the hero size to its content and put the ribbon in normal flow. */
html body section.hero.hero--lab {
  min-height: auto !important;
  max-height: none !important;
  padding: 0 !important;
}
html body section.hero.hero--lab .lab__hero {
  min-height: auto !important;
  max-height: none !important;
  padding: 56px 0 0 !important;
  overflow: visible !important;
}
html body section.hero.hero--lab .lab__grid {
  display: block !important;
  padding: 0 18px 24px !important;
  min-height: 0 !important;
}
html body section.hero.hero--lab .lab__copy {
  max-width: 100% !important;
  gap: 14px !important;
}
html body section.hero.hero--lab .lab__display {
  font-size: clamp(26px, 7.4vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
}
html body section.hero.hero--lab .lab__lead {
  font-size: 15px !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
}
html body section.hero.hero--lab .lab__cta {
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 4px !important;
}
html body section.hero.hero--lab .lab__btn {
  height: 48px !important;
  padding: 0 22px !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}
html body section.hero.hero--lab .lab__btn--blue {
  flex: 1 1 100% !important;
  justify-content: center !important;
}
html body section.hero.hero--lab .lab__btn--ghost {
  height: auto !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
}
/*  RIBBON: position static so it appears under the CTAs and is fully
    visible. No more absolute-position clipping. */
html body section.hero.hero--lab .lab__ribbon {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  margin-top: 20px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body section.hero.hero--lab .lab__ribbon__cell {
  padding: 12px 14px !important;
  min-width: 0 !important;
}
html body section.hero.hero--lab .lab__ribbon__cell:nth-child(2n) {
  border-right: none !important;
}
html body section.hero.hero--lab .lab__ribbon__cell:nth-child(-n+2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html body section.hero.hero--lab .lab__ribbon__k {
  font-size: 8.5px !important;
  letter-spacing: 1.5px !important;
}
html body section.hero.hero--lab .lab__ribbon__v {
  font-size: 17px !important;
}
html body section.hero.hero--lab .lab__ribbon__v i {
  font-size: 10.5px !important;
}
/*  Lab video — let it render on mobile too (per user 2026-05-23 it should
    play on iPhone). preload="none" on the <video> + poster keeps initial
    paint fast; the MP4 streams in lazily after the page is interactive.
    The video-shade overlay also stays so text stays readable on top. */
/*  Brackets (decorative corner marks) — keep but pull inward so they
    don't clip when ribbon is now in-flow rather than overlay. */
html body section.hero.hero--lab .lab__bracket--bl,
html body section.hero.hero--lab .lab__bracket--br {
  display: none !important;
}

}

/* Touch device — disable hover-only effects that flash on tap */
@media (hover: none) {
  .card:hover,
  .stacks-grid__card:hover,
  .stack-related:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card:hover .card__photo img,
  .stacks-grid__card:hover .stacks-grid__photo img {
    transform: none !important;
  }
}

/* iOS Safari notch — pad bottom-fixed elements */
@supports (padding: env(safe-area-inset-bottom)) {
  .lumera-mobile-cta,
  .lsw-root {
    padding-bottom: calc(env(safe-area-inset-bottom) + 14px) !important;
  }
}