/* =========================================================
   OK Baby — Responsive breakpoints
   Desktop-first source lives in main.css; this file scales
   spacing/grids down for tablet and mobile.
   ========================================================= */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --space-2xl: 5.5rem;
    --space-xl: 3.5rem;
  }

  .hero .container { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero-visual { order: -1; aspect-ratio: 16 / 10; }

  .category-grid { grid-template-columns: repeat(2, 1fr); }

  .products-grid, ul.products { grid-template-columns: repeat(3, 1fr) !important; }

  .gifting-section .container { grid-template-columns: 1fr; }
  .gifting-visual { order: -1; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .layer-row { grid-template-columns: 60px 1fr; gap: var(--space-md); }
}

/* Mobile */
@media (max-width: 720px) {
  :root {
    --space-2xl: 3.5rem;
    --space-xl: 2.5rem;
    --space-lg: 2rem;
  }

  .container { padding-inline: var(--space-sm); }

  .primary-nav { display: none; }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
  }

  .header-actions .account-link,
  .header-actions .search-toggle .label { display: none; }

  .mobile-nav-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--ok-ivory);
    z-index: 60;
    padding: var(--space-md);
    overflow-y: auto;
  }

  .mobile-nav-panel.is-open { display: flex; }

  .mobile-nav-panel .mobile-nav-close {
    align-self: flex-end;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 0.5rem;
  }

  .mobile-nav-panel ul { margin-top: var(--space-lg); }

  .mobile-nav-panel li { border-bottom: 1px solid var(--ok-border); }

  .mobile-nav-panel a {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
  }

  .hero { padding-block: var(--space-xl) var(--space-lg); }
  .hero-copy .lede { max-width: none; }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .section-heading { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  .category-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .category-card figcaption { padding: var(--space-sm); }
  .category-card h3 { font-size: 1.05rem; }

  .fold-intro { margin-bottom: var(--space-xl); }
  .layer-row { grid-template-columns: 44px 1fr; gap: var(--space-sm); padding-block: var(--space-sm); }
  .layer-copy h4 { font-size: 1rem; }

  .products-grid, ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-sm) !important; }
  .product-info { padding: var(--space-sm); }
  .product-title, ul.products li.product .woocommerce-loop-product__title { font-size: 0.95rem; }

  .gifting-section .container { gap: var(--space-md); }

  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; justify-content: center; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .category-grid { grid-template-columns: 1fr; }
}