/* ==========================================================================
   DAILY LEAF — RESPONSIVE
   Every media query lives here and this file loads last.
   Breakpoints: 1280 / 1024 / 768 / 560
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAPTOP — up to 1280px
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  :root {
    --fs-display-xl: 3.75rem;
    --fs-display-l: 3rem;
    --fs-h1: 2.375rem;
    --fs-h2: 1.875rem;
    --gutter: 32px;
    --section-y: 100px;
    --section-y-lg: 128px;
  }

  .split { gap: var(--sp-16); }
  .hero { min-height: 680px; }
  .hero-inner { gap: var(--sp-12); }
  .mega-grid { grid-template-columns: repeat(3, 1fr) 1.2fr; gap: var(--sp-8); }
  .insta-grid { grid-template-columns: repeat(4, 1fr); }
  .benefits-ghost { font-size: 8rem; }
  .expert-panel { padding: var(--sp-12); gap: var(--sp-10); }
  .pdp { gap: var(--sp-12); }
}

/* --------------------------------------------------------------------------
   TABLET — up to 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --fs-display-xl: 3rem;
    --fs-display-l: 2.5rem;
    --fs-h1: 2.125rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --section-y: 88px;
    --section-y-lg: 104px;
    --section-y-sm: 56px;
  }

  /* Nav collapses to the drawer */
  .nav,
  .header-actions .desktop-only { display: none; }
  .nav-toggle { display: inline-flex; }
  .header .container { justify-content: space-between; gap: var(--sp-4); }

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

  .hero { min-height: auto; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    padding-block: var(--sp-20) var(--sp-16);
  }
  .hero-media { order: -1; max-width: 460px; margin-inline: auto; }
  .hero-copy { max-width: none; }
  .hero-dots { position: static; transform: none; justify-content: center; margin-top: var(--sp-8); }

  .split,
  .pdp,
  .article-layout,
  .expert-panel { grid-template-columns: 1fr; gap: var(--sp-10); }

  .split-reverse .split-media { order: -1; }
  .split-media { order: -1; }
  .split + .split { margin-top: var(--section-y-sm); }

  .gallery { position: static; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar-card { flex: 1; min-width: 260px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .benefits-ghost { font-size: 6rem; }
  .section-head-split { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .cta-band { padding: var(--sp-16) var(--sp-8); }
}

/* --------------------------------------------------------------------------
   MOBILE — up to 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --fs-display-xl: 2.25rem;
    --fs-display-l: 1.875rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.1875rem;
    --fs-body-lg: 1rem;
    --gutter: 20px;
    --section-y: 64px;
    --section-y-lg: 80px;
    --section-y-sm: 48px;
    --header-h: 64px;
  }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .section-head { margin-bottom: var(--sp-10); }

  /* Buttons go full width and stack */
  .hero-actions,
  .pdp-buy-row { flex-direction: column; }
  .hero-actions .btn,
  .pdp-buy-row .btn { width: 100%; }
  .qty { width: 100%; justify-content: space-between; }

  .hero-trust { gap: var(--sp-4); }
  .hero-trust div { width: 100%; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .pdp-assurance { grid-template-columns: 1fr; gap: var(--sp-5); }

  .gallery-thumb { width: 66px; height: 66px; }
  .benefits-ghost { display: none; }

  .accordion-trigger { font-size: var(--fs-body); min-height: 60px; }
  .accordion-icon { width: 28px; height: 28px; }

  /* Tabs scroll horizontally instead of shrinking */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }

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

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer-base { flex-direction: column; align-items: flex-start; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .review-summary { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .author-box { flex-direction: column; }
  .timeline { padding-left: var(--sp-8); }
  .timeline-item::before { left: calc(var(--sp-8) * -1); }
  .error-code { font-size: 6rem; }
  .cta-band { padding: var(--sp-12) var(--sp-6); border-radius: var(--r-lg); }
  .expert-panel { padding: var(--sp-8); }
  .split-badge { right: var(--sp-4); bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE — up to 560px
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .product-card-body,
  .feature-card,
  .testimonial,
  .post-card-body { padding: var(--sp-5); }

  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .drawer { width: 100%; }
  .toast { left: var(--sp-4); right: var(--sp-4); transform: translateY(140%); }
  .toast.is-visible { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   TOUCH DEVICES — remove hover-only transforms
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .product-card:hover,
  .post-card:hover,
  .concern-tile:hover,
  .feature-card:hover,
  .hover-lift:hover { transform: none; box-shadow: var(--shadow-sm); }

  .product-card:hover .product-card-media img,
  .post-card:hover .post-card-media img,
  .concern-tile:hover img,
  .hover-zoom:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .announce,
  .footer,
  .drawer,
  .overlay,
  .toast,
  .hero-dots,
  .btn { display: none !important; }

  body { color: #000; background: #fff; }
  .container { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}