/* SEREN MAISON — mobile readability sweep (2026-05-13)
   Goal: every body-style element hits WCAG AA contrast (4.5:1) and 14px+
   on screens <=768px. Replaces the previous gold-on-cream that customers
   were reporting as unreadable. */

/* Beauty trust grid — surgical only: hide any empty children that would create
   a phantom row (and a gold bar). Do NOT touch the original cards-with-gap styling. */
.vgrid > :empty { display: none !important; }

/* Tighten space between trust section and the "What COSMOS means" section */
section.section.reveal#cosmos { padding-top: 40px !important; }
@media (max-width: 768px) {
  section.section.reveal#cosmos { padding-top: 28px !important; }
}

/* Hero scroll-hint "Discover" — was 7px at 50% opacity, near invisible */
.scroll-hint-text {
  font-size: 10px !important;
  letter-spacing: 4px !important;
  color: rgba(160, 120, 64, 0.9) !important;
  font-weight: 500 !important;
}
.scroll-hint-line {
  background: linear-gradient(180deg, rgba(160,120,64,0.7), transparent) !important;
}
@media (max-width: 768px) {
  .scroll-hint-text {
    font-size: 11px !important;
    color: rgba(138, 102, 48, 0.95) !important;
  }
}

/* Footer (dark panel) — link + tagline contrast was rgba(248,244,238,0.4) which fails AA.
   Bump to ~0.78 on every breakpoint, with column titles in gold. */
.footer-tagline,
.footer-links a,
.footer-copy,
footer .footer-tagline,
footer .footer-links a,
footer .footer-copy {
  color: rgba(248,244,238,0.82) !important;
  opacity: 1 !important;
}
.footer-col-title,
footer .footer-col-title {
  color: #C9A96E !important;
  font-weight: 500 !important;
}
.social-link,
footer .social-link {
  color: rgba(201,169,110,0.95) !important;
  border-color: rgba(201,169,110,0.55) !important;
}
.footer-bottom .footer-copy,
.footer-bottom .footer-gold-line,
footer .footer-bottom .footer-gold-line {
  color: rgba(248,244,238,0.65) !important;
}
@media (max-width: 768px) {
  .footer-tagline,
  .footer-links a,
  footer .footer-tagline,
  footer .footer-links a {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: rgba(248,244,238,0.88) !important;
  }
  .footer-col-title,
  footer .footer-col-title {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 16px !important;
  }
  .social-link,
  footer .social-link {
    width: 40px !important;
    height: 40px !important;
    font-size: 11px !important;
  }
  .footer-bottom .footer-copy,
  footer .footer-bottom .footer-copy {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}

/* Phone + small tablet */
@media (max-width: 768px) {
  .page-sub,
  .page-subtitle,
  .header-sub,
  .section-sub {
    font-size: 14px !important;
    color: #1C1C1C !important;
    letter-spacing: 1.2px !important;
    opacity: 1 !important;
  }

  .badge,
  .pi-trust-chip,
  .trust-chip {
    font-size: 10.5px !important;
    padding: 7px 14px !important;
    color: #1C1C1C !important;
    border-color: #C9A96E !important;
    font-weight: 500;
  }

  .delivery-note,
  .footer-tagline,
  .footer-links a {
    font-size: 13px !important;
    color: #1C1C1C !important;
    opacity: 1 !important;
  }

  .marquee-item,
  .marquee-dot {
    font-size: 12.5px !important;
    color: #1C1C1C !important;
    letter-spacing: 1.5px !important;
  }

  body,
  p,
  li,
  td,
  .product-card-name,
  .product-card-price {
    font-size: 15px;
    line-height: 1.55;
  }

  small,
  .small,
  .caption {
    font-size: 13px !important;
    color: #3A3A3A !important;
  }

  /* Eyebrow lines that often render as light gold caps */
  .eyebrow,
  .section-eyebrow,
  .product-eyebrow {
    font-size: 11.5px !important;
    color: #1C1C1C !important;
    letter-spacing: 2px !important;
  }

  /* Nav links */
  .nav-list a,
  .footer-col-title {
    font-size: 12.5px !important;
    color: #1C1C1C !important;
  }

  /* Forms (already meet 14px iOS no-zoom rule, but enforce) */
  input,
  textarea,
  select,
  button {
    font-size: 14px !important;
  }
}

/* Beauty hero (left side of /beauty page) — was rendering small + low-contrast on mobile */
@media (max-width: 900px) {
  .hero-eyebrow {
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    color: #1C1C1C !important;
    opacity: 1 !important;
  }
  .hero-title,
  .hero-title-gold {
    font-size: 52px !important;
    line-height: 1.05 !important;
  }
  .hero-title-sub {
    font-size: 19px !important;
    color: #1C1C1C !important;
    opacity: 1 !important;
  }
  .hero-desc {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    color: #1C1C1C !important;
    opacity: 1 !important;
  }
  .hero-badges .hero-badge,
  .hero-badges span {
    font-size: 10.5px !important;
    color: #1C1C1C !important;
  }
}

/* Ingredient Intelligence (scanner) section — was a tall black void on mobile
   because .scanner-visual was display:none and padding stayed at 80px. */
@media (max-width: 768px) {
  .scanner {
    padding: 48px 22px !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 24px !important;
  }
  .scanner-text { max-width: 100% !important; }
  .scanner-eyebrow {
    justify-content: center !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
  }
  .scanner-eyebrow::before {
    margin: 0 auto !important;
  }
  .scanner-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.2 !important;
  }
  .scanner-divider {
    margin: 14px auto 18px !important;
  }
  .scanner-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    color: rgba(255,255,255,0.85) !important;
  }
  .app-btns {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .app-btn {
    font-size: 11px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
  }
  /* Bring back a compact phone visual on mobile (was hidden, leaving an empty dark void) */
  .scanner-visual {
    display: block !important;
    margin-top: 12px;
    transform: scale(0.55);
    transform-origin: center top;
    height: 320px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .phone-mockup {
    margin: 0 auto !important;
  }
}

/* Hero S monogram — was too faint, especially on mobile */
.hero-s {
  color: rgba(201,169,110,0.32) !important;
  -webkit-text-fill-color: rgba(201,169,110,0.32);
}
@media (max-width: 768px) {
  .hero-s {
    color: rgba(201,169,110,0.45) !important;
    -webkit-text-fill-color: rgba(201,169,110,0.45);
    font-size: clamp(140px, 36vw, 220px) !important;
  }
}

/* "Designed to be lived with" tagline — bolder + more visible */
.hero-sub {
  font-weight: 400 !important;
  color: #A07840 !important;
  font-size: clamp(13px, 1.4vw, 18px) !important;
  letter-spacing: 5px !important;
}
@media (max-width: 768px) {
  .hero-sub {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 3.5px !important;
    color: #8A6630 !important;
  }
}

/* Promo strip / marquee banner — bigger + darker on every breakpoint */
.marquee-strip,
.promo-strip,
.top-strip {
  background: rgba(201,169,110,0.10) !important;
}
.marquee-strip .marquee-item,
.promo-strip span,
.top-strip span {
  font-size: 13px !important;
  color: #1C1C1C !important;
  font-style: italic;
  letter-spacing: 1.5px !important;
}
@media (max-width: 600px) {
  .marquee-strip .marquee-item,
  .promo-strip span,
  .top-strip span {
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .hero-title,
  .hero-title-gold {
    font-size: 44px !important;
  }
  .hero-title-sub {
    font-size: 17px !important;
  }
  .hero-desc {
    font-size: 14.5px !important;
  }

  .page-sub,
  .page-subtitle {
    font-size: 13px !important;
    letter-spacing: 1px !important;
  }

  .badge,
  .pi-trust-chip {
    font-size: 10px !important;
    padding: 6px 10px !important;
    letter-spacing: 1.5px !important;
  }

  .marquee-item {
    font-size: 11.5px !important;
  }

  body,
  p,
  li {
    font-size: 14.5px;
  }
}