/* ===========================
   Catalog: Jackets (mobile → desktop)
   =========================== */

/* Базове: мобілка */
html {
  scroll-behavior: smooth;
}

/* Контейнер секції зверху (крихти + плитки COTTON/LEATHER) */
.catbox {
  padding: 1.6rem;
  /* щоб контент не уїжджав під фікс-хедер і «чолку» */
  padding-top: calc(var(--header-h, 6.4rem) + env(safe-area-inset-top, 0rem));
  padding-bottom: 5rem;
  max-width: 1240px; /* нове: центруємо полотно */
  margin-inline: auto;
}

/* Хлебные крошки */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 2rem 0 3.6rem;
  font-size: 1.4rem;
}
.breadcrumbs a {
  color: var(--text, #22272a);
  text-decoration: none;
}
.breadcrumbs__sep {
  opacity: 0.5;
}
.breadcrumbs__current {
  color: var(--muted, #8c8f96);
}

/* ---------------------------
   Плитки-категорії (верх сторінки)
   --------------------------- */
.catgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  padding-inline: 0;
}

.catgrid a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.catcard--plain {
  display: block;
  color: var(--text, #22272a);
  background: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.catcard--plain .catcard__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 4; /* мобільне співвідношення */
  min-height: 16rem;
  overflow: hidden;
  background: #f5f5f5;
}

.catcard--plain .catcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 0.35s ease;
}

/* Підпис */
.catcard--plain .catcard__title {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}

/* Ховер: легкий підйом і зум картинки */
.catcard--plain:hover {
  transform: translateY(-2px);
}
.catcard--plain:hover .catcard__media img {
  transform: scale(1.05);
}

/* Фокус */
.catcard--plain:focus-visible {
  outline: 0.2rem solid #111;
  outline-offset: 0.2rem;
}

/* Fallback без aspect-ratio */
@supports not (aspect-ratio: 1) {
  .catcard--plain .catcard__media::before {
    content: '';
    display: block;
    padding-top: 133.333%;
  }
  .catcard--plain .catcard__media img {
    position: absolute;
    inset: 0;
  }
}

/* Якір — щоб секції не лізли під хедер */
.anchor-target {
  scroll-margin-top: calc(
    var(--header-h, 6.4rem) + env(safe-area-inset-top, 0rem)
  );
}

/* =============================
   Секції з товарами (9 items)
   ============================= */
.products9 {
  padding: 2.4rem 1.6rem;
  max-width: 1240px; /* нове: центруємо полотно */
  margin-inline: auto;
}

.products9__heading {
  margin: 5rem 0 2rem 0;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
}

/* Сітка карток: мобілка — 2 в ряд */
.products9__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

/* =============================
   Картка товару
   ============================= */
.pitem {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease;
}
.pitem:hover {
  transform: translateY(-2px);
}

.pitem__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #eee;
  contain: layout paint size;
}

.pitem__track {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.pitem__track > img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pitem__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 0.2rem;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.pitem__bar-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / var(--slides, 1));
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.35s ease;
  background: #2c2c2c;
}

/* Fallback без aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .pitem__media::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  .pitem__track {
    position: absolute;
    inset: 0;
  }
}

.pitem__info {
  padding-top: 0.8rem;
}
.pitem__title {
  margin: 0 0 0.3rem 0;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pitem__price {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2rem;
  color: #000;
}

img.is-loading {
  background: #f2f2f2;
}
img.is-broken {
  opacity: 0;
}

/* =====================================================
   BREAKPOINTS
   ===================================================== */

/* ≥ 600px: трохи більше повітря й крупніші заголовки */
@media (min-width: 600px) {
  .catbox {
    padding-inline: 2.4rem;
  }
  .products9 {
    padding: 3.2rem 2.4rem;
  }
  .products9__heading {
    font-size: 3rem;
  }
}

/* ≥ 768px: 3 товари в ряд, плитки 2 у ряд, ширші зображення */
@media (min-width: 768px) {
  .catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .catcard--plain .catcard__media {
    aspect-ratio: 4 / 3;
  } /* горизонтальніші прев’ю */
  .catcard--plain .catcard__title {
    font-size: 1.7rem;
  }

  .products9__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .pitem__title {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
  .pitem__price {
    font-size: 1.4rem;
  }
}

/* ≥ 1024px: 4 товари в ряд (як просив), крупні плитки зверху */
@media (min-width: 1024px) {
  .catbox {
    padding-inline: 3.2rem;
  }
  .products9 {
    padding-inline: 3.2rem;
  }

  .catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
  }
  .catcard--plain .catcard__media {
    aspect-ratio: 16 / 10;
  } /* ще ширше, «героїнки» */
  .catcard--plain .catcard__title {
    font-size: 1.9rem;
    text-align: center;
  }

  .products9__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4rem;
  }
  .pitem__title {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
  .pitem__price {
    font-size: 1.5rem;
  }
}

/* ≥ 1440px: трішки більше відступів, щоб все «дихало» */
@media (min-width: 1440px) {
  .catbox,
  .products9 {
    max-width: 1340px;
  }
  .products9__heading {
    font-size: 3.2rem;
  }
}

/* ===== Ховер-стрелки для десктопа ===== */
@media (hover: hover) and (pointer: fine) {
  .js-card-slider {
    --nav-size: 4rem;
    --nav-pad: 0.5rem;
  }
  .pswipe-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--nav-size);
    height: var(--nav-size);
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
    user-select: none;
  }
  .pswipe-btn svg {
    width: 60%;
    height: 60%;
    display: block;
  }
  .pswipe-btn--prev {
    left: var(--nav-pad);
  }
  .pswipe-btn--next {
    right: var(--nav-pad);
  }

  /* показываем на ховере карточки */
  .pitem:hover .pswipe-btn,
  .js-card-slider:hover .pswipe-btn,
  .pswipe-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .pswipe-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.04);
  }

  /* чтобы клики по кнопкам не “пробивались” до ссылки */
  .pswipe-btn {
    z-index: 3;
  }
  .pitem__track {
    z-index: 1;
  }
}

/* ===== На телефонах карточки не "подпрыгивают" при свайпе ===== */
@media (hover: none) and (pointer: coarse) {
  .pitem,
  .pitem:hover,
  .pitem:active {
    transform: none !important;
  }
}

/* гарантируем, что индикатор над лентой, но под кнопками */
.pitem__bar {
  z-index: 2;
  position: absolute;
}
.pitem__track {
  z-index: 1;
} /* (можно оставить как было) */
/* кнопки уже имеют z-index: 3 */

/* курсор «рука» и отключение drag/select у картинок внутри трека */
.js-card-slider {
  cursor: grab;
}
.js-card-slider.is-dragging {
  cursor: grabbing;
}
.pitem__track img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ТОЛЬКО телефоны: ховаємо 1px справа, щоб не було видно наступного фото */
@media (hover: none) and (pointer: coarse) {
  .pitem__media {
    /* акуратно обрізаємо правий край, не ламаючи верстку */
    clip-path: inset(0 0.08rem 0 0);
  }
}