/* ============================================
   ADVANCED HEALING — Responsive Breakpoints
   Tablet (1024px) · Mobile (640px)
   ============================================ */

/* ===========================================
   TABLET — max-width: 1024px
   =========================================== */
@media (max-width: 1024px) {

  /* --- Navigation --- */
  .navbar__links {
    display: none;
  }

  .navbar__mobile-toggle {
    display: flex;
  }

  /* --- Hero --- */
  .hero__content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  /* Hide 3D canvas on tablet — it overlaps centered content */
  .hero__canvas {
    display: none;
  }

  .hero__grid-lines {
    display: none;
  }

  /* --- Product Grid --- */
  #products .product-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  /* --- Science Grid --- */
  #science .science-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Features Strip --- */
  #features .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #features .features-grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Footer --- */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Cart Sidebar --- */
  .cart-sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* --- Section Padding Reduction --- */
  .section-padding {
    padding-block: var(--space-24);
  }

  /* --- Testimonials --- */
  #testimonials .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .about__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .about__image-col { max-width: 300px; margin: 0 auto; }

  /* --- Subscription CTA --- */
  #subscription .subscription-card {
    padding: var(--space-10);
  }
}


/* ===========================================
   MOBILE — max-width: 768px
   Intermediate breakpoint for mid-size phones
   =========================================== */
@media (max-width: 768px) {
  .hero__title { font-size: var(--text-4xl); }
  .hero__subtitle { font-size: var(--text-base); }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 280px; justify-content: center; }
  .hero__content { padding: var(--space-12) var(--space-4); }
  .section-header__title { font-size: var(--text-3xl); }
  .section-header__subtitle { font-size: var(--text-sm); }
  .trust-bar__number { font-size: var(--text-2xl); }
  .feature-card { padding: var(--space-6); }
  .feature-card__number { font-size: var(--text-4xl); }
}

/* ===========================================
   MOBILE — max-width: 640px
   =========================================== */
@media (max-width: 640px) {

  /* --- Product Grid → Single Column --- */
  #products .product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 400px;
    margin: 0 auto;
  }

  /* --- Science Grid → Single Column --- */
  #science .science-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* --- Features → Single Column --- */
  #features .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  #features .features-grid > *:last-child:nth-child(odd) {
    max-width: 100%;
  }

  /* --- Testimonials → Single Column --- */
  #testimonials .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .testimonials__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  /* --- Footer → Single Column --- */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }

  /* --- Hero Adjustments --- */
  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Section Padding --- */
  .section-padding {
    padding-block: var(--space-20);
  }

  .section-padding-sm {
    padding-block: var(--space-12);
  }

  /* --- Phone CTA --- */
  .phone-cta__number {
    font-size: var(--text-3xl);
  }

  /* --- Spacing Reductions --- */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* --- Section Headers --- */
  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-header__title {
    font-size: var(--text-3xl);
  }

  .section-header__subtitle {
    font-size: var(--text-base);
  }

  /* --- Product Filter Tabs --- */
  .product-filter {
    gap: var(--space-2);
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }

  .product-filter__btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- Cart Item Adjustments --- */
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .cart-item__image {
    width: 100%;
    max-width: 100px;
  }

  .cart-item__details {
    width: 100%;
  }

  .cart-item__actions {
    width: 100%;
    justify-content: space-between;
  }

  /* --- Contact Form --- */
  #contact .contact-form {
    padding: var(--space-6);
  }

  /* --- Subscription CTA --- */
  #subscription .subscription-card {
    padding: var(--space-6);
  }

  #subscription .subscription-features {
    flex-direction: column;
    gap: var(--space-4);
  }

  /* --- Nutrient Counter --- */
  .nutrient-counter__number {
    font-size: var(--text-4xl);
  }

  /* --- Buttons --- */
  .btn-lg {
    width: 100%;
    justify-content: center;
  }
}


/* ===========================================
   MOBILE MENU — Full-screen overlay
   =========================================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  z-index: var(--z-overlay);
  background: var(--bg-glass-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-smooth);
  will-change: transform;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Mobile menu links */
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.mobile-menu__links a {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-smooth);
}

.mobile-menu__links a:hover,
.mobile-menu__links a.active {
  color: var(--gold);
}

/* Close button */
.mobile-menu__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-smooth),
              border-color var(--duration-base) var(--ease-smooth);
}

.mobile-menu__close:hover {
  background: rgba(212, 168, 83, 0.1);
  border-color: var(--gold);
}


/* ===========================================
   SMALL DEVICES — max-width: 480px
   Compact adjustments
   =========================================== */
@media (max-width: 480px) {
  .hero__title { font-size: var(--text-3xl); }
  .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
  .navbar__logo img { height: 38px; }
}

/* ===========================================
   SMALL DEVICES — max-width: 380px
   Ultra-compact adjustments
   =========================================== */
@media (max-width: 380px) {
  .hero__title {
    font-size: var(--text-3xl);
  }

  .phone-cta__number {
    font-size: var(--text-2xl);
  }

  .nutrient-counter__number {
    font-size: var(--text-3xl);
  }
}