/* ==========================================================================
   RESPONSIVE — desktop-down breakpoints
   1200px · 1024px (tablet) · 768px (large phone) · 560px (phone)
   Load this LAST so its overrides win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Small desktop / large tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .slider__slide { flex: 0 0 calc((100% - (var(--sp-5) * 2)) / 3); }
  .slider__nav--prev { left: -8px; }
  .slider__nav--next { right: -8px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-layout { grid-template-columns: 240px 1fr; gap: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }

  /* Header: swap desktop nav for the burger + drawer */
  .nav { display: none; }
  .header__burger { display: inline-grid; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .header__logo img { width: 138px; }

  /* Hero stacks, image sits below the copy */
  .hero__slide.is-active { grid-template-columns: 1fr; text-align: center; }
  .hero__content { margin-inline: auto; padding-block: var(--sp-7) var(--sp-4); }
  .hero__rule { margin-inline: auto; }
  .hero__text { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__stats { justify-content: center; }
  .hero__arch { margin-inline: auto; width: min(100%, 420px); }
  .hero__float { left: 0; bottom: 8%; }
  .hero__dots { position: static; translate: none; margin-block: var(--sp-4) var(--sp-6); }

  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .newsletter__inner { grid-template-columns: 1fr; text-align: center; }
  .newsletter__head { justify-content: center; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }

  /* Shop: filters move into a slide-in drawer */
  .shop-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(340px, 90%);
    z-index: calc(var(--z-drawer) + 1);
    border-radius: 0;
    border: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--t-base);
  }
  .filters.is-open { transform: none; }
  .shop-toolbar__filter-btn { display: inline-flex; }

  /* Product detail stacks */
  .pdp { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; padding-bottom: 4px; }
  .gallery__thumb { flex: 0 0 84px; }

  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }

  .story { grid-template-columns: 1fr; }
  .story--reverse .story__media { order: 0; }
  .story__badge { right: var(--sp-4); }

  .contact-layout { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Large phone
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .announce__social span { display: none; }

  .product-grid,
  .product-grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .slider__slide { flex: 0 0 calc((100% - var(--sp-5)) / 2); }
  .slider__nav { display: none; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* Product card actions are always visible on touch devices */
  .product-card__actions { position: static; transform: none; opacity: 1; padding: 0 var(--sp-4) var(--sp-4); }
  .product-card__action { backdrop-filter: none; background: var(--blush-50); border-color: var(--line); }
  .product-card__action--primary { background: var(--deep-rose); color: var(--white); }
  .product-card__wish { opacity: 1; transform: none; }
  .product-card__body { padding-bottom: var(--sp-2); }

  .promo { min-height: 360px; }
  .promo__overlay { background: linear-gradient(180deg, rgba(255, 245, 248, 0.95) 30%, rgba(255, 245, 248, 0.55) 100%); }
  .countdown__unit { min-width: 58px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }

  .spec-list { grid-template-columns: 1fr; }
  .review-summary { grid-template-columns: 1fr; text-align: center; }
  .pdp__trust { grid-template-columns: 1fr; text-align: left; }
  .pdp__trust div { display: flex; align-items: center; gap: var(--sp-3); }
  .pdp__trust svg { margin: 0; }

  /* Cart rows become a stacked card */
  .cart-row { grid-template-columns: 88px 1fr; row-gap: var(--sp-3); }
  .cart-row__img { width: 88px; }
  .cart-row__qty { grid-column: 1 / -1; }
  .cart-row__total { grid-column: 1 / -1; text-align: left; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-7) var(--sp-5); }
  .footer__bottom { justify-content: center; text-align: center; }

  .steps .step span:not(.step__num) { display: none; }

  .whatsapp-fab { right: var(--sp-4); bottom: var(--sp-4); padding: 0.7rem; }
  .to-top { right: var(--sp-4); bottom: calc(var(--sp-4) + 58px); }

  .toast-stack { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
  .toast { min-width: 0; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --fs-base: 0.875rem; }

  .announce__inner { justify-content: center; }
  .announce__social { display: none; }

  .hero__slide.is-active { min-height: auto; }
  .hero__stats { gap: var(--sp-5); flex-wrap: wrap; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__float { display: none; }

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

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

  .promo__content { padding: var(--sp-5); }
  .countdown { gap: var(--sp-2); }
  .countdown__unit { min-width: 0; flex: 1; }

  .drawer { width: 100%; }
  .modal__box { max-height: 88vh; }

  .pagination button { min-width: 38px; height: 38px; font-size: var(--fs-xs); }

  .tabs { gap: var(--sp-4); }
  .timeline { padding-left: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Print — clean invoices / order confirmations
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .announce,
  .footer,
  .whatsapp-fab,
  .to-top,
  .drawer,
  .overlay,
  .modal { display: none !important; }

  body { background: #fff; }
  .section { padding-block: 1rem; }
}