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

.catstrip .circles,
.catstrip .circles--row {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
}

/* ---------------- 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; }
  .catstrip .circles--row > li { flex-basis: 96px; width: 96px; }
  .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 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "burger logo actions"
      "search search search";
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    min-height: 0;
    padding-block: 10px;
  }
  .header__burger { grid-area: burger; margin-right: 0; }
  .header__inner > .logo { grid-area: logo; }
  .header__inner > .logo img { max-height: 36px; }
  .header__inner > .search {
    grid-area: search;
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }
  .header__actions { grid-area: actions; gap: 14px; justify-self: end; }
  .logo__word { font-size: 22px; }
  .logo__tag { font-size: 7px; }
  .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,
  .pdp__gallery.has-thumbs {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "thumbs";
  }
  .pdp__thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .pdp__thumb {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
  }
  .pdp__stage { aspect-ratio: 1 / 1; min-height: 280px; }
  .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; }
  .footer__icon,
  .footer__logo {
    height: 56px;
    max-width: min(100%, 200px);
  }

  .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: var(--sp-4); }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }
  .section-head .link-more { margin-top: var(--sp-1); }
  .section { padding-block: var(--section-y-sm) 0; }
  .section + .section { padding-top: var(--section-y-sm); }
  .page-home .section { padding-block: calc(var(--section-y-sm) * 0.75) 0; }
  .page-home .section + .section { padding-top: var(--section-y-sm); }
  .catstrip { padding: var(--sp-3) 0 0; }
  .catstrip__viewport { margin: 0 22px; }
  .catstrip__arrow { width: 26px; height: 26px; top: 18px; }
  .cathero { min-height: 180px; }
  .cathero__body { padding: var(--sp-5) var(--sp-4); max-width: 100%; }
  .cathero__title { font-size: 1.45rem; }
  .catalog { gap: var(--sp-5); }
  .pagehead { padding: var(--sp-1) 0 var(--sp-4); margin-bottom: var(--sp-5); }
  .pagehead h1 { font-size: 1.45rem; }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .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)); }
  .catstrip .circles--row > li { flex-basis: 86px; width: 86px; }

  .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; }

  .hero__slide.is-image-only {
    min-height: 0;
  }
  .hero__slide.is-image-only .hero__bg {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
  .hero:has(.is-image-only) .hero__arrow {
    top: 50%;
  }

  /* Category / PDP banners get more room for their copy */
  .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__inner { min-height: 28px; gap: 8px; }
  .topbar__promo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__links { flex: 0 0 auto; gap: 10px; }
  .topbar__promo span,
  .topbar__links a:nth-child(1) { display: inline; }
  .header__inner { padding-block: 8px; row-gap: 8px; }
  .search__input { padding: 9px 12px; }
  .search__btn { width: 44px; }
  .catstrip__viewport { margin: 0 20px; }
  .catstrip__arrow { width: 24px; height: 24px; top: 14px; }
  .catstrip__arrow svg { width: 13px; height: 13px; }
  .cathero { min-height: 148px; }
  .cathero__body { padding: 14px; }
  .cathero__title { font-size: 1.28rem; }
  .catalog { gap: 14px; }
  .pagehead { padding: 2px 0 12px; margin-bottom: 14px; }

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

  .hero { margin-top: 8px; }
  .hero__bg { height: 148px; }
  .hero__slide.is-image-only { min-height: 0; }
  .hero__slide.is-image-only .hero__bg { height: auto; min-height: 0; }
  .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,
  .pdp__gallery.has-thumbs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "thumbs";
  }
  .pdp__thumbs {
    flex-direction: row;
    grid-auto-flow: unset;
    overflow-x: auto;
  }

  .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: var(--sp-3); }
  .pcard { padding: 0 12px 12px; }
  .pcard__media { margin: 0 -12px 10px; }
  .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)); }
  .catstrip .circles--row > li { flex-basis: 74px; width: 74px; }
  .circle__label { font-size: var(--fs-12); }
}