/**
 * SOULÉPUREVANA — Comprehensive Responsive Fixes & Bug Corrections
 * ================================================================
 * Covers: index.html · product.html · cart.html · contact.html
 * Fixes:  layout bugs · mobile offsets · newsletter · hero stats ·
 *         footer grid · tablet breakpoints · performance · a11y
 */

/* ══════════════════════════════════════════════════════════════
   0. GLOBAL RESETS & CORE FIXES
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img, video, picture {
  max-width: 100%;
  display: block;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   1. MOBILE PAGE OFFSET — Push content below fixed nav bar
══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .cart-main {
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  }

  .contact-hero {
    padding-top: calc(80px + env(safe-area-inset-top, 0px)) !important;
  }

  .pdp-breadcrumb,
  .pdp-top-related-wrap {
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  }

  .pdp-main-wrap {
    padding-top: 1rem;
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ══════════════════════════════════════════════════════════════
   2. HERO STATS — Transform Conflict Bug Fix
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero__stats {
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1rem);
  }

  .hero__stats.in {
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important;
  }

  .hero__product {
    width: clamp(130px, 42vw, 220px);
  }

  .hero__content {
    padding-bottom: 120px;
  }
}

@media (max-width: 420px) {
  .hero__stats {
    gap: 1rem;
    left: 0;
    right: 0;
    transform: translateY(14px) !important;
    justify-content: center;
    flex-wrap: wrap;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 0.5rem);
    padding: 0 1rem;
  }

  .hero__stats.in {
    transform: translateY(0) !important;
  }

  .hero__sep {
    display: none;
  }

  .hero__stat-num {
    font-size: 1.4rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. NEWSLETTER FORM — Pill Layout Fix on Mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .nl-form {
    flex-direction: column;
    border-radius: 16px;
    overflow: visible;
    border: none;
    box-shadow: none;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0 1rem;
  }

  .nl-form > [role="group"] {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .nl-input {
    border: 1.5px solid rgba(13, 74, 42, 0.25);
    border-radius: 999px !important;
    width: 100%;
    font-size: 16px !important;
    min-height: 52px;
    padding: 0.875rem 1.5rem;
  }

  .nl-submit {
    border-radius: 999px !important;
    width: 100%;
    min-height: 52px;
    font-size: 0.9rem;
    padding: 0.875rem 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. PRODUCT GRID — Tablet 2-column Fix (560-767px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 560px) and (max-width: 767px) {
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  .bs-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 559px) {
  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .bs-scroll {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   5. FOOTER — Responsive Grid (600-1100px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: 1fr !important;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 0.75rem;
  }

  .footer-bottom__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .footer-brand__mission {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   6. CONTACT PAGE — Header Nav & Hero Fix
══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .contact-header__nav {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .contact-hero {
    padding: calc(80px + env(safe-area-inset-top, 0px)) 1.25rem 3rem;
  }

  .contact-hero__title {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  .contact-main {
    padding: 2.5rem 1.25rem 4rem;
  }

  .contact-form-card {
    padding: 1.75rem 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   7. CART PAGE — Mobile Layout Fixes
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cart-main {
    padding: calc(80px + env(safe-area-inset-top, 0px)) 1rem 5rem !important;
  }

  .cart-items-card,
  .cart-summary-card {
    padding: 1.25rem 1rem;
  }

  .cart-summary-card {
    position: static;
    top: auto;
  }

  .cart-summary-row {
    font-size: 0.875rem;
  }

  .cart-summary-row--total {
    font-size: 1.25rem;
  }

  .cart-title {
    font-size: clamp(1.6rem, 6vw, 2.25rem);
  }

  .cart-nav {
    display: none !important;
  }

  .cart-page-header {
    padding: 0.875rem 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   8. PRODUCT PAGE (PDP) — Mobile Fixes
══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .pdp-grid-split {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .pdp-left-col {
    position: static !important;
  }
}

@media (max-width: 767px) {
  .pdp-gallery-card {
    padding: 1rem;
    max-width: 100%;
  }

  .pdp-breadcrumb {
    padding: calc(72px + env(safe-area-inset-top, 0px)) 1rem 0.5rem !important;
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
  }

  .pdp-main-wrap {
    padding: 1rem 1rem 3rem;
  }

  .pdp-top-related-wrap {
    padding: 0 1rem 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   9. FLAVOUR DISCOVERY GRID
══════════════════════════════════════════════════════════════ */
@media (min-width: 541px) and (max-width: 900px) {
  .fd-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 540px) {
  .fd-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   10. WHY SEA MOSS — Mineral Cards Small Screen
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wsm-right {
    grid-template-columns: 1fr !important;
  }

  .wsm-layout {
    gap: 3rem;
  }

  .mineral-number {
    font-size: clamp(3.5rem, 15vw, 6rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   11. BRAND PROMISE PILLARS
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .bp-pillars {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .bp-pillars {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   12. RITUAL STEPS — Mobile Layout
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .ritual-steps {
    grid-template-columns: 1fr !important;
  }

  .ritual-step {
    border-right: none !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.12);
    padding: 2rem 1.25rem;
  }

  .ritual-step:last-child {
    border-bottom: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   13. BRAND STORY — Mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .bs-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .bs-visual {
    max-width: 320px;
    margin: 0 auto;
  }

  .bs-img-badge {
    width: 80px;
    height: 80px;
    bottom: -1rem;
    right: -0.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. IMMERSIVE CTA — Mobile Buttons
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .immersive-cta {
    padding: 6rem 1.25rem;
  }

  .icta-actions {
    flex-direction: column;
    align-items: center;
  }

  .icta-actions .btn-primary,
  .icta-actions .btn-outline-gold {
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }

  .icta-headline {
    font-size: clamp(1.9rem, 8vw, 3rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   15. SECTION PADDING — Consistent Mobile & Tablet Spacing
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .brand-promise,
  .why-sea-moss,
  .ritual-section,
  .flavour-discovery,
  .best-sellers,
  .brand-story,
  .reviews-section,
  .immersive-cta,
  .newsletter {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .featured-products {
    padding: 4rem 1.25rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .brand-promise,
  .why-sea-moss,
  .ritual-section,
  .flavour-discovery,
  .best-sellers,
  .brand-story,
  .reviews-section,
  .immersive-cta,
  .newsletter {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   16. HEADER NAV — Medium Desktop (900-1200px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1200px) {
  .site-header {
    padding: 0.875rem 3vw;
  }

  .header-nav {
    gap: 1.5rem;
  }

  .header-nav a {
    font-size: 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   17. POPUP MODAL — Mobile Sizing
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #spv-popup-overlay {
    padding: 0.75rem !important;
    align-items: flex-end !important;
  }

  #spv-popup-card {
    border-radius: 24px 24px 18px 18px !important;
    max-width: 100% !important;
  }

  .spv-slide {
    padding: 2rem 1.5rem 2rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   18. REVIEW CARDS — Mobile Grid
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   19. FORMS — iOS Zoom Prevention
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   20. CONTAINER — Max Width Consistency
══════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 max(1.25rem, 4vw);
}

@media (max-width: 767px) {
  .container {
    padding: 0 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   21. PERFORMANCE — Content Visibility
══════════════════════════════════════════════════════════════ */
.why-sea-moss,
.ritual-section,
.flavour-discovery,
.brand-story,
.reviews-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ══════════════════════════════════════════════════════════════
   22. ANIMATION — Performance (will-change budget)
══════════════════════════════════════════════════════════════ */
.hero__product,
.hero__orb-green,
.hero__orb-gold {
  will-change: transform;
}

.hero__product.in,
.reveal.in-view {
  will-change: auto;
}

.reveal {
  transform: translateZ(0) translateY(28px);
}

.reveal.in-view {
  transform: translateZ(0) translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   23. BOTTOM NAV — Ensure visible on all pages
══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .mob-nav-bottom {
    display: flex !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   24. BEST SELLERS — Header Fix on Mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .bs-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bs-headline {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   25. TYPOGRAPHY — Fluid Edge Breakpoints
══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .hero__headline {
    font-size: 1.875rem !important;
  }

  .brand-promise__headline {
    font-size: 1.6rem !important;
  }

  .reviews-headline,
  .fd-headline,
  .ritual-headline,
  .wsm-headline {
    font-size: 1.6rem !important;
  }

  .btn-primary,
  .btn-outline-gold {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.8rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   26. REDUCED MOTION — Respect user preference
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__product {
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   27. BEST SELLERS GRID — Tablet 3-column
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1100px) {
  .bs-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   28. FEATURED PRODUCTS HEADER FIX
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .fp-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .fp-header__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   29. STICKY CART SUMMARY — Desktop Only
══════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  .cart-summary-card {
    position: sticky;
    top: 100px;
  }
}

/* ══════════════════════════════════════════════════════════════
   30. WHATSAPP FLOAT — Safe Positioning
══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .wa-float {
    bottom: 2rem;
    right: 2rem;
  }
}