/* ==========================================================================
   responsive.css
   Desktop: 1440+ | Laptop: 1024-1366 | Tablet: 768-1023 | Mobile: 320-767
   ========================================================================== */

/* ---------- Laptop ---------- */
@media (max-width: 1290px) {
  .nav { margin-left: 44px; }
  .nav__list { gap: 24px; }
  .header__actions { gap: 14px; margin-left: 24px; margin-right: 0; }
  .topbar__list { gap: 40px; margin-left: 0; }
  .page-product .nav { margin-left: 32px; }
  .page-product .nav__list { gap: 18px; }
  .page-product .search { flex-basis: 240px; }
  .page-product .logo { margin-left: 0; }
  .page-product .header__actions { gap: 14px; margin-left: 20px; margin-right: 0; }
}

@media (max-width: 1180px) {
  .nav { margin-left: 28px; }
  .nav__list { gap: 16px; font-size: 13px; }
  .search { flex-basis: 220px; }
  .page-product .nav { margin-left: 22px; }
  .page-product .nav__list { gap: 14px; }
  .page-product .logo__mark { display: none; }

  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .card__image img { height: 180px; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer__brand { grid-column: 1 / -1; padding-right: 0; }

  /* Product page: keep three columns but tighten them */
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: var(--gutter); }
  .buybox { grid-column: 1 / -1; }
  .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .assurances .icon { margin-bottom: 4px; }
  .related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .salon { grid-template-columns: minmax(0, 1fr); }
  .ingredients { margin-left: 0; padding: 20px 16px; }

  .categories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .category { width: auto; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  :root { --topbar-height: 38px; --header-height: 70px; --gutter: 20px; }
  .page-product { --topbar-height: 38px; --header-height: 70px; }

  .topbar, .page-product .topbar { font-size: 10.5px; }
  .topbar__list { gap: 20px; white-space: nowrap; }
  .topbar__list li { gap: 7px; }
  .topbar .icon, .page-product .topbar .icon { font-size: 16px; }
  .topbar__phone { margin-right: 0; font-size: 12px; white-space: nowrap; }
  .topbar__phone span { display: none; }

  .logo__word { font-size: 30px; }
  .logo__sub { margin-top: 3px; font-size: 9px; letter-spacing: .72em; }

  /* The benefits move out of the hero into a strip so they stay readable */
  .hero { aspect-ratio: auto; }
  .hero__track { position: relative; aspect-ratio: 666 / 245; }
  .hero__text { font-size: 11.5px; }
  .hero__cta { margin-top: 10px; padding: 9px 14px; }
  .hero__arrow { top: 18.4vw; width: 34px; height: 34px; font-size: 18px; }

  .hero__benefits, .hero.is-light .hero__benefits {
    position: static;
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--gutter);
    background: var(--topbar);
    color: #fff;
    font-size: 11.5px;
    text-shadow: none;
  }

  .hero.is-light .hero__benefits .icon { border-color: rgba(255, 255, 255, .85); }
  .hero__benefits li { gap: 8px; }
  .hero__benefits .icon { width: 28px; height: 28px; padding: 5px; }

  .promo__content { top: 4%; }
  .promo__title { font-size: 3.5cqw; }
  .promo__text { margin-top: 3px; font-size: 10.5px; line-height: 1.3; }
  .promo .btn { margin-top: 5px; padding: 6px 11px; font-size: 10.5px; }
  .promo__benefits { left: 79.6%; gap: 5px; padding-bottom: 0; }
  .promo__benefits li { gap: 6px; }
  .promo__benefits .ring { width: 26px; height: 26px; font-size: 13px; }

  .section--featured .section__head { flex-wrap: wrap; gap: 10px; }
  .tabs { width: 100%; }

  .header__menu { display: grid; place-items: center; margin-right: 14px; }

  /* Off-canvas navigation */
  .nav, .page-product .nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: min(300px, 84%);
    margin: 0;
    padding: 0 20px;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: 10px 0 30px rgba(36, 22, 12, .18);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
  }

  .nav.is-open { transform: none; visibility: visible; }

  .nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 18px;
    border-bottom: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
  }

  .nav__head button { font-size: 22px; line-height: 0; }

  .nav__list, .page-product .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 15px;
    font-weight: 600;
  }

  .nav__list a { padding: 13px 0; border-bottom: 1px solid var(--border); }
  .nav__list a::after { display: none; }

  .search, .page-product .search { flex: 1 1 200px; height: 42px; margin-left: 24px; }
  .header__actions, .page-product .header__actions { gap: 10px; margin-left: 14px; margin-right: 0; }
  .action__label { display: none; }
  .action { width: auto; padding: 5px; }
  .page-product .logo__mark { display: block; }

  .section__title { font-size: 22px; }

  .categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .category { width: auto; }

  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews, .review-list { grid-template-columns: minmax(0, 1fr); }
  .shades { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .guide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    aspect-ratio: auto;
    background-image: none;
  }

  .guide__intro { padding: 32px 24px; }
  .guide__title { font-size: 32px; }
  .guide__intro p { margin-top: 10px; font-size: 14px; }
  .guide .btn { margin-top: 14px; padding: 11px 18px; font-size: 13px; }
  .guide__tips { grid-column: 1 / -1; gap: 16px; padding: 24px; }
  .guide__tips li { gap: 14px; }
  .guide__tips .ring { width: 42px; height: 42px; font-size: 18px; }
  .guide__tips strong { font-size: 14px; }
  .guide__tips p { font-size: 13px; }

  /* Product page stacks to gallery + info, then purchase */
  .panel-description { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .desc-col:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
  .desc-col:nth-child(2) { border-left: 0; }
  .ingredient-list, .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --gutter: 16px; --header-height: 62px; }
  .page-product { --header-height: 62px; }
  html { scroll-padding-top: 76px; }

  .topbar__inner { justify-content: center; }
  .topbar__list { display: none; }
  .topbar__phone { margin: 0; font-size: 12px; }

  .header__inner { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  .header__menu { margin-right: 10px; }
  .logo__word, .page-product .logo__word { font-size: 24px; }
  .logo__sub, .page-product .logo__sub { font-size: 8.5px; }
  .page-product .logo__mark { width: 40px; height: 36px; }
  .header__actions, .page-product .header__actions { gap: 8px; margin-left: auto; }
  .action .icon, .page-product .action .icon { font-size: 23px; }

  /* The search field drops onto its own row */
  .search, .page-product .search { flex: 1 0 100%; order: 5; height: 40px; margin: 0; }

  /* Hero: image on top, copy beneath it */
  .hero { background: var(--panel); container-type: normal; }
  .hero__track { display: grid; aspect-ratio: auto; }

  .hero__slide {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
  }

  .hero__slide > img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 11;
    object-position: 26% center;
  }

  .hero__slide--alt > img { object-position: 76% center; }

  .hero__content, .hero__slide--alt .hero__content {
    position: static;
    width: auto;
    padding: 20px 16px 22px;
  }

  .hero__title { font-size: clamp(36px, 11vw, 46px); }
  .hero__text { margin-top: 10px; font-size: 14.5px; }
  .hero__text br { display: none; }
  .hero__cta { margin-top: 14px; padding: 13px 20px; font-size: 13px; }

  .hero__arrow {
    top: calc(50vw * 11 / 16);
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .hero__arrow--prev { left: 10px; }
  .hero__arrow--next { right: 10px; }

  .hero__benefits, .hero.is-light .hero__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 16px;
    font-size: 12px;
  }

  .hero__benefits li { gap: 9px; }
  .hero__benefits .icon { width: 32px; height: 32px; padding: 6px; }

  .section { padding-top: 28px; }
  .section--categories { padding-top: 26px; }
  .section__title { font-size: 21px; }
  .section__head { flex-wrap: wrap; gap: 8px 16px; }

  .category { font-size: 13px; }
  .category img { width: min(100%, 104px); height: auto; aspect-ratio: 1; }

  /* Stack the full-width promos */
  .promo { aspect-ratio: auto; container-type: normal; background: var(--panel); }

  .promo__image {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: left center;
  }

  .promo__content { position: static; width: auto; padding: 20px 16px 0; }
  .promo__title { font-size: 32px; }
  .promo__text { margin-top: 8px; font-size: 14px; }
  .promo .btn { margin-top: 14px; padding: 12px 18px; font-size: 13px; }

  .promo__benefits {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 16px 22px;
    font-size: 12.5px;
  }

  .promo__benefits li { gap: 9px; }
  .promo__benefits .ring { width: 36px; height: 36px; font-size: 16px; }

  /* Filter tabs scroll sideways instead of wrapping */
  .tabs {
    flex-wrap: nowrap;
    width: calc(100% + var(--gutter));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs__btn { flex: none; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card__image img { height: 140px; }

  .brands { gap: 10px; }
  .brand img { height: 70px; }

  .shades { gap: 12px; }
  .shade img { height: 104px; }

  .guide {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
    container-type: normal;
  }

  .guide__intro { padding: 24px 16px; }
  .guide__title { font-size: 30px; }
  .guide__model img { aspect-ratio: 16 / 11; height: auto; }
  .guide__tips { padding: 22px 16px; }

  .review { padding: 14px; gap: 14px; }

  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__question { padding-inline: 16px; }
  .faq__answer p { padding-inline: 16px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer__contact, .footer__news { grid-column: 1 / -1; }
  .payments { flex-wrap: wrap; }

  /* Product page */
  .breadcrumbs ol { padding-left: 0; }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pdp > .gallery { margin-left: 0; }

  /* Main image first, thumbnails become a swipeable strip */
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gallery__main { order: -1; cursor: default; }

  .gallery__thumbs {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .gallery__thumb { flex: 0 0 68px; scroll-snap-align: start; }
  .gallery__badge { width: 26%; height: auto; }

  .info { padding-left: 0; }
  .info__title { font-size: 22px; }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }

  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .buybox__row { flex-wrap: wrap; }
  .buybox__add { min-height: 44px; }
  .buybox .qty button { width: 40px; height: 44px; }
  .buybox .btn--buy { min-height: 46px; }
  .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; font-size: 11.5px; }

  .salon__promo { aspect-ratio: 672 / 300; }
  .salon__image { object-position: 34% center; }
  .salon__title { font-size: 26px; top: 8%; left: 16px; }
  .salon__benefits { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; background: var(--topbar); font-size: 12.5px; }
  .salon__benefits .icon { font-size: 18px; }
  .salon__benefits li { gap: 7px; }
  .salon__promo { aspect-ratio: auto; overflow: visible; }
  .salon__image { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }

  .ingredients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  .ingredients img { width: 80px; height: 80px; }

  .panel-description { grid-template-columns: minmax(0, 1fr); }
  .desc-col, .desc-col + .desc-col { grid-column: auto; padding-inline: 14px; border-left: 0; }
  .desc-col + .desc-col { border-top: 1px solid var(--border); }
  .desc-col:first-child { border-bottom: 0; }

  .ingredient-list, .benefit-grid { grid-template-columns: minmax(0, 1fr); }
  .related__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .logo__word, .page-product .logo__word { font-size: 21px; }
  .header__actions, .page-product .header__actions { gap: 2px; }
  .hero__benefits { font-size: 11px; }
}