/* ==========================================================================
   Responsive — laptop / tablet / mobile
   ========================================================================== */

/* ---------------- Laptop (≤1180px) ---------------- */
@media (max-width: 1180px) {
  :root { --container: 100%; }

  .navlist { gap: 20px; }
  .header__actions { gap: 20px; }
  .hero__body { padding-left: 44px; }
  .hero__disc { right: 40px; }
}

/* ---------------- Small laptop (≤1080px) ---------------- */
@media (max-width: 1080px) {
  .mainnav__inner { gap: var(--sp-5); }
  .navlist { gap: 15px; }
  .navlist > li > a { font-size: var(--fs-12); }
  .grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .circles { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 20px; }
  .subcats { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 20px; }
}

/* ---------------- Tablet (≤900px) ---------------- */
@media (max-width: 900px) {
  .header__burger { display: grid; }
  .mainnav { display: none; }

  .header__inner { gap: var(--sp-3); min-height: 64px; }
  .logo__word { font-size: 22px; }
  .logo__tag { font-size: 7px; }
  .search { max-width: none; margin-inline: 0; }
  .header__actions { gap: 16px; }
  .action span:not(.action__badge) { display: none; }
  .action svg { width: 23px; height: 23px; }

  /* product page: single column above the fold */
  .pdp__top { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pdp__grid-2 { grid-template-columns: 1fr; }
  .pdp__gallery { max-width: 560px; }
  .pdp__stage { aspect-ratio: 1 / 1; }
  .hero__body { padding-left: 48px; }
  .hero__arrow--prev { left: 8px; }
  .hero__arrow--next { right: 8px; }

  /* category page: filters become a collapsible panel */
  .catalog { grid-template-columns: 1fr; }
  .filters {
    position: static;
    order: -1;
  }
  .filters__panel { display: none; }
  .filters.is-open .filters__panel { display: block; }
  .filters__toggle { display: flex; }

  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

  .trustbar { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-6);
  }
  .footer__brand { grid-column: 1 / -1; }

  .hero__slide { min-height: 290px; }
  .hero__bg { width: 48%; }
  .hero__slide::before {
    background: linear-gradient(90deg,
      var(--slide-bg) 0%,
      var(--slide-bg) 45%,
      color-mix(in srgb, var(--slide-bg) 55%, transparent) 55%,
      transparent 68%);
  }
  .hero__body { padding: 26px 18px 26px 48px; max-width: 54%; }
  .hero__title { font-size: 2rem; }
  .hero__text { max-width: 100%; font-size: var(--fs-14); }
  .hero__disc { width: 82px; height: 82px; right: 22px; }
  .hero__disc b { font-size: 21px; }

  .specs-row { grid-template-columns: 1fr; }
}

/* ---------------- Large phone (≤720px) ---------------- */
@media (max-width: 720px) {
  .topbar__links { gap: 14px; }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .promos { grid-template-columns: 1fr; }
  .circles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .section-title { font-size: var(--fs-18); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .included { grid-template-columns: repeat(3, 1fr); }
  .love-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-summary { grid-template-columns: 1fr; gap: var(--sp-5); text-align: left; }
  .reviews-summary__cta { justify-self: start; }

  .subcats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; row-gap: 18px; }
  .catalog__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Hero stacks: photo on top, copy on the flat brand colour below */
  .hero__slide {
    display: block;
    min-height: 0;
  }
  .hero__slide::before { display: none; }
  .hero__bg {
    position: static;
    width: 100%;
    height: 168px;
    object-position: center;
  }
  .hero__body {
    max-width: none;
    padding: 20px 20px 42px;
  }
  .hero__disc {
    top: 16px;
    right: 16px;
    transform: none;
    width: 78px;
    height: 78px;
  }
  .hero__disc b { font-size: 20px; }
  .hero__arrow { top: 84px; }

  /* Category / PDP banners get more room for their copy */
  .cathero__body { padding: 22px 22px 24px; }
  .pdp__banner-body { width: 68%; }
  .promo__body { max-width: 72%; }
}

/* ---------------- Phone (≤560px) ---------------- */
@media (max-width: 560px) {
  :root { --container-pad: 14px; }

  .topbar { font-size: 11px; }
  .topbar__promo span,
  .topbar__links a:nth-child(1) { display: inline; }

  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .circles,
  .subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .circle__ring { width: 52px; height: 52px; font-size: 23px; }
  .subcats .circle__ring { font-size: 22px; }

  .hero { margin-top: 8px; }
  .hero__bg { height: 148px; }
  .hero__body { padding: 18px 16px 40px; }
  .hero__title { font-size: 1.6rem; }
  .hero__text { font-size: var(--fs-13); max-width: 100%; }
  .hero__kicker { font-size: var(--fs-13); }
  .hero__disc {
    width: 66px; height: 66px; right: 12px; top: 14px;
  }
  .hero__disc b { font-size: 17px; }
  .hero__disc small,
  .hero__disc span { font-size: 9px; }
  .hero__arrow { width: 26px; height: 26px; top: 74px; }

  .reassure { grid-template-columns: 1fr; gap: 12px; }

  .trustbar { grid-template-columns: 1fr; padding: 18px; }

  .promo__body { padding: 20px; max-width: 100%; }
  .promo__title { font-size: var(--fs-20); }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .included { grid-template-columns: 1fr; }
  .love-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  .pdp__title { font-size: var(--fs-24); }
  .pdp__price-now { font-size: var(--fs-28); }
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 62px;
    overflow-x: auto;
    order: 2;
    padding-bottom: 4px;
  }

  .pagination a, .pagination span { min-width: 29px; height: 29px; font-size: var(--fs-12); }

  .tabs { gap: 18px; }
  .tabs a { font-size: var(--fs-13); }
}

/* ---------------- Small phone (≤400px) ---------------- */
@media (max-width: 400px) {
  .grid-6, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { padding: 9px; }
  .pcard__title { font-size: var(--fs-12); }
  .btn--cart { font-size: var(--fs-11); padding: 8px 6px; }
  .circles,
  .subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .circle__label { font-size: var(--fs-12); }
}