/* ==========================================================================
   Сторінка каталогу: навігація, фільтри, заголовок, картки, швидкий перегляд
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ліва панель — навігація по категоріях
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
}

.nav__title {
  padding: 6px 10px 8px;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px 0 6px;
  border-radius: var(--r-control);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  text-align: left;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-item:hover {
  background: var(--c-active);
  color: var(--c-text);
}

.nav-item.is-active {
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

/* Кольорова іконка категорії */
.nav-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  transition: transform var(--t) var(--ease-spring);
}

.nav-item:hover .nav-ico {
  transform: scale(1.08);
}

.nav-ico svg.lucide {
  width: 17px;
  height: 17px;
}

.nav-ico--red { background: var(--cat-red-soft); color: var(--cat-red); }
.nav-ico--amber { background: var(--cat-amber-soft); color: var(--cat-amber); }
.nav-ico--cyan { background: var(--cat-cyan-soft); color: var(--cat-cyan); }
.nav-ico--blue { background: var(--cat-blue-soft); color: var(--cat-blue); }
.nav-ico--violet { background: var(--cat-violet-soft); color: var(--cat-violet); }
.nav-ico--accent { background: var(--c-accent-soft); color: var(--c-accent); }
.nav-ico--plain { background: none; color: var(--c-text-3); }

/* Назви в меню не обрізаються — довга назва переноситься на другий рядок */
.nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nav-item__count {
  min-width: 20px;
  padding: 0 6px;
}

.nav-item__chev {
  margin-left: -4px;
}

.nav-item.is-active .nav-item__count {
  background: #ffdcc4;
  color: var(--c-accent-text);
}

.nav-sub__item.is-active .nav-item__count {
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}

.nav-item__chev {
  color: var(--c-text-3);
  transition: transform var(--t) var(--ease);
}

.nav-group.is-open > .nav-item .nav-item__chev {
  transform: rotate(90deg);
}

.nav-item.is-active .nav-item__chev,
.nav-group:has(.nav-sub__item.is-active) > .nav-item .nav-item__chev {
  color: var(--c-accent);
}

.nav-sub {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 6px 40px;
}

/* Лінія дерева — по центру кольорової іконки */
.nav-sub::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 8px;
  left: 21.5px;
  width: 1.5px;
  border-radius: 2px;
  background: var(--c-active);
}

.nav-sub__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px 0 12px;
  border-radius: var(--r-control);
  font-size: var(--fs-14);
  color: var(--c-text-2);
  text-align: left;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.nav-sub__item:hover {
  background: var(--c-active);
  color: var(--c-text);
}

.nav-sub__item.is-active {
  color: var(--c-accent-text);
  font-weight: var(--fw-semibold);
}

.nav-sub__item.is-active::before {
  content: "";
  position: absolute;
  left: -19.5px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--c-accent);
  animation: fade-in var(--t) var(--ease);
}

.store-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 10px 10px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  font-size: var(--fs-13);
  color: var(--c-text-3);
}

.store-status__now {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  color: var(--c-success);
}

.store-status__now.is-closed {
  color: var(--c-text-2);
}

.store-status__now .dot {
  box-shadow: 0 0 0 3px var(--c-success-soft);
}

.store-status__now.is-closed .dot {
  color: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-danger-soft);
}

/* --------------------------------------------------------------------------
   Права панель — фільтри
   -------------------------------------------------------------------------- */
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  padding: 12px 20px;
}

.filters__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
}

.fgroup {
  padding: 4px 20px;
  box-shadow: inset 0 1px 0 var(--c-line);
}

.fgroup .acc__head {
  min-height: 48px;
}

.fgroup__badge {
  margin-left: 2px;
}

.fgroup__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 4px 4px 16px;
  margin: 0 -4px;
}

.price-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--c-text-3);
}

.price-inputs .input {
  padding-right: 24px;
  font-variant-numeric: tabular-nums;
}

.price-inputs .input-wrap > .input {
  padding-left: 12px;
}

.check-list {
  display: flex;
  flex-direction: column;
}

/* Список виробників + «Показати ще»: відступ між ними задає батько (П4) */
.fgroup__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.filters__more {
  align-self: flex-start;
}

/* У режимі шторки заголовок береться з .panel__head */
@media (max-width: 1279px) {
  .filters__head {
    display: none;
  }

  .fgroup:first-child {
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Верх сторінки: хлібні крихти, заголовок + тулбар в один рядок (П8)
   -------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.page-top {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

/* Хлібні крихти — блок з фоном, скруглення як у кнопок */
.crumbs {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 6px;
  border-radius: var(--r-control);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-13);
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: calc(var(--control-h) - 10px);
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.crumbs a:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}

.crumbs > svg.lucide {
  color: #c3c9d3;
}

.crumbs__home svg.lucide {
  color: var(--c-accent);
}

.crumbs__current {
  min-width: 0;
  padding: 0 8px;
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumbs > .sk-line {
  margin: 0 8px;
}

.page-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--control-h);
}

.page-head__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
}

.page-head h1 {
  /* запас праворуч: крапки «ї» та інші виносні елементи останньої літери не обрізаються (відступ до лічильника — той самий) */
  margin-right: -0.12em;
  padding-right: 0.12em;
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-head__count {
  height: 24px;
  padding: 0 10px;
  font-size: var(--fs-13);
  background: #dde1e8;
  color: var(--c-text);
  /* по центру слова: між центром великих і малих літер (у назвах переважають малі) */
  translate: 0 1px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.filters-btn {
  display: none;
}

.filters-btn .count {
  margin-left: 2px;
}

.sort-btn {
  min-width: 210px;
  justify-content: flex-start;
}

.sort-btn > svg.lucide:first-child {
  color: var(--c-accent);
}

/* Коротка назва сортування — лише на телефоні */
.sort-short {
  display: none;
}

.sort-btn .select__chevron {
  margin-left: auto;
}

@media (max-width: 1279px) {
  .filters-btn {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Чіпи підкатегорій + активні фільтри
   -------------------------------------------------------------------------- */
/* Рядок підкатегорій — звичайна горизонтальна прокрутка.
   Без тіней і світіння: нічому обрізатися, без від'ємних відступів і масок */
.chips {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.chips .chip {
  box-shadow: none;
}

.chips .chip:hover {
  box-shadow: none;
  background: var(--c-hover-on-bg);
}

.chips .chip.is-active,
.chips .chip.is-active:hover {
  background: var(--c-accent);
  box-shadow: none;
}

/* --- Горизонтальна стрічка: стежимо, чи можна гортати (класи can-prev / can-next) --- */
.hscroll {
  position: relative;
  min-width: 0;
}

/* Рядок підкатегорій схований (пошук, «Усі товари») — обгортка теж не займає місця й не додає відступ */
.hscroll:has(> [hidden]) {
  display: none;
}

/* --- Активні фільтри: стрічка чіпів + «Скинути все» --- */
.active-filters {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.active-filters[hidden] {
  display: none;
}

/* ПК: чіпи переносяться на новий рядок */
.active-filters__list {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 8px;
  min-width: 0;
}

/* «+3» / «Згорнути» — лише на телефоні */
.chip--more {
  display: none;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* На сенсорних екранах hover «залипає» після дотику — лишаємо білий фон */
@media (hover: none) {
  .chip--more:hover {
    background: var(--c-surface);
  }
}

.active-filters__reset {
  flex: none;
}

/* Вибране авто — зелений чип у рядку фільтрів */
.chip--vehicle {
  background: var(--c-success);
  color: var(--c-text-inv);
}

.chip--vehicle:hover {
  background: #0e8a44;
  color: var(--c-text-inv);
}

.chip--vehicle .chip__x {
  background: rgba(255, 255, 255, 0.18);
}

.chip--vehicle:hover .chip__x {
  background: rgba(255, 255, 255, 0.28);
}

.active-filters__reset {
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
}

.active-filters__reset:hover {
  background: var(--c-hover-on-bg);
  color: var(--c-text);
  box-shadow: none;
}

/* Поява нового чіпа — один раз, плавно (старі чіпи не перезапускаються) */
.active-filters__list > .is-new {
  animation: chip-in var(--t-slow) var(--ease-spring) backwards;
}

@keyframes chip-in {
  from { opacity: 0; transform: scale(0.9); }
}

/* --------------------------------------------------------------------------
   Сітка товарів
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: var(--s-4);
}

.grid.is-list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}

/* --------------------------------------------------------------------------
   Картка товару
   -------------------------------------------------------------------------- */
.pcard {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t) var(--ease);
}

/* Нові картки після «Показати ще» — лише м'яка поява, без зсуву */
.pcard.is-new {
  animation: fade-in var(--t) var(--ease);
}

/* Поява карток після зміни фільтрів/категорії (на першому екрані анімації немає) */
/* Лише прозорість, без зсуву: картка з'являється рівно на місці скелетона, без мікро-скачка */
.grid.is-animated .pcard:not(.pcard--sk) {
  animation: fade-in var(--t) var(--ease) both;
  animation-delay: calc(min(var(--i, 0), 8) * 20ms);
}

/* Hover — лише тінь, без підйому */
.pcard:hover {
  box-shadow: var(--sh-lg);
}

.pcard__media {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 5 / 4;
  margin: 6px 6px 0;
  border-radius: var(--r-xl);
  background: var(--c-media);
  overflow: hidden;
  /* multiply лише всередині мініатюри: без ізоляції Chrome змішує її з розмиттям модалки, і blur зникає */
  isolation: isolate;
}

.pcard__media-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  border-radius: inherit;
  cursor: pointer;
}

.pcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  mix-blend-mode: multiply;
}

.pcard__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c3c9d3;
}

.pcard__ph svg.lucide {
  width: 48px;
  height: 48px;
  stroke-width: 1.25;
}

.pcard__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 60px);
  pointer-events: none;
}

.pcard__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-control);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  color: var(--c-text-3);
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t), transform var(--t-fast);
}

.pcard__fav:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  box-shadow: var(--sh-md);
}

.pcard__fav:active {
  transform: scale(0.9);
}

/* В обраному: рожевий фон + червоне заповнене серце — видно одразу, без наведення */
.pcard__fav.is-active,
.qv__fav.is-active,
.qv__fav.is-active:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.pcard__fav.is-active svg.lucide,
.qv__fav.is-active svg.lucide {
  fill: currentColor;
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px 0;
}

.pcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* = висота кнопки «скопіювати артикул», щоб скелетон і картка збігались */
  min-height: 24px;
  font-size: var(--fs-13);
  color: var(--c-text-3);
}

.pcard__brand {
  flex: none;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.pcard__sku {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Копіювання артикулу: сірий фон завжди; після копіювання — зелена галочка, що «малюється» */
.copy-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--c-active);
  color: var(--c-text-2);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.copy-btn svg.lucide {
  width: 13px;
  height: 13px;
}

.copy-btn:hover {
  background: #dde1e8;
  color: var(--c-text);
}

.copy-btn:active {
  transform: scale(0.88);
}

.copy-btn.is-copied {
  background: var(--c-success-soft);
  color: var(--c-success);
  animation: pop var(--t) var(--ease-spring);
}

.copy-btn.is-copied svg.lucide {
  stroke-width: 2.5;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: check-draw 320ms var(--ease) 60ms forwards;
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

.pcard__title {
  min-height: calc(2em * 1.4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--c-text);
  cursor: pointer;
  transition: color var(--t-fast);
}

.pcard__title:hover {
  color: var(--c-accent);
}

.pcard__specs {
  font-size: var(--fs-13);
  color: var(--c-text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding: 14px 16px 16px;
}

/* Висота блоку ціни = висоті кнопки: одна ціна стоїть рівно по центру кнопки,
   ціна зі старою ціною займає ту саму висоту двома рядками */
.price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: var(--control-h);
}

.price__old {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-13);
  line-height: 1.2;
  color: var(--c-text-3);
  white-space: nowrap;
}

.price__old s {
  text-decoration-thickness: 1px;
}

.price__now {
  font-size: var(--price-now-fs, var(--fs-20));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price.is-sale .price__now {
  color: var(--c-danger);
}

.price.is-muted .price__now {
  color: var(--c-text-3);
}

/* У картці ціна завжди займає місце під два рядки (стара + нова):
   картки зі знижкою і без однакової висоти, скелетон — теж. Одна ціна — по центру */
.pcard .price,
.grid.is-list .pcard .price {
  min-height: max(var(--control-h), calc((var(--fs-13) + var(--price-now-fs, var(--fs-20))) * 1.2));
}

/* Кнопка «Купити» і степер однакової ширини — без стрибків (П7) */
.buy {
  display: flex;
  flex: none;
  width: 120px;
}

.buy > .btn,
.buy > .stepper {
  width: 100%;
}

.buy > .btn--accent:hover svg.lucide {
  transform: translateX(-1px) rotate(-8deg);
}

/* Вузька картка — ціна над кнопкою, кнопка на всю ширину (без обрізань) */
@container (max-width: 226px) {
  .pcard__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }

  .pcard__foot .buy {
    width: 100%;
  }
}

/* --- Вигляд «список» --- */
.grid.is-list .pcard {
  flex-direction: row;
  align-items: stretch;
}

.grid.is-list .pcard__media {
  width: 200px;
  margin: 6px 0 6px 6px;
}

.grid.is-list .pcard__body {
  padding: 16px 20px;
  gap: 8px;
}

.grid.is-list .pcard__title {
  min-height: 0;
  font-size: var(--fs-16);
}

.grid.is-list .pcard__specs {
  white-space: normal;
}

.grid.is-list .pcard__foot {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-3);
  width: 220px;
  margin: 12px 0;
  padding: 4px 20px;
  box-shadow: inset 1px 0 0 var(--c-line);
}

.grid.is-list .price {
  align-items: flex-end;
  min-height: 0;
}

.grid.is-list .buy {
  width: 100%;
}

/* --- Скелетон картки: та сама розмітка і ті самі розміри (П7) --- */
.pcard--sk {
  pointer-events: none;
  animation: none;
}

.pcard--sk .pcard__media {
  background: none;
}

.pcard--sk .pcard__media > .sk {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.pcard--sk .pcard__title {
  display: flex;
  flex-direction: column;
}

.pcard--sk .buy > .sk {
  width: 100%;
  height: var(--control-h);
  border-radius: var(--r-md);
}

.pcard--sk .price {
  justify-content: center;
}

/* У списку на ПК назва в один рядок — скелетон теж */
@media (min-width: 768px) {
  .grid.is-list .pcard--sk .pcard__title .sk-line + .sk-line {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Пагінація
   -------------------------------------------------------------------------- */
.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
}

.pager__info {
  font-size: var(--fs-13);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.pager__more {
  min-width: 220px;
}

.pager__pages {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.pager__btn {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--r-control);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t), transform var(--t-fast);
}

.pager__btn:hover {
  background: var(--c-hover-on-bg);
  color: var(--c-text);
  box-shadow: none;
}

.pager__btn:active {
  transform: scale(0.94);
}

.pager__btn.is-active {
  background: var(--c-accent);
  color: var(--c-text-inv);
  box-shadow: var(--sh-accent);
}

/* Сторінка вже показана вище (після «Показати ще») — м'яка підсвітка, активна лише поточна */
.pager__btn.is-loaded {
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  box-shadow: none;
}

.pager__btn--gap {
  background: none;
  box-shadow: none;
  min-width: 20px;
}

.pager__btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Кнопка «В обране» поруч із «Купити» (сторінка товару), характеристики, застосовність
   -------------------------------------------------------------------------- */
.qv__fav {
  flex: none;
}

.qv__fav:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.specs {
  display: flex;
  flex-direction: column;
}

.specs__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
}

.specs__row:nth-child(odd) {
  background: var(--c-surface-2);
}

.specs__row dt {
  color: var(--c-text-3);
}

.specs__row dd {
  text-align: right;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.fits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 4px 10px;
}

/* --------------------------------------------------------------------------
   Адаптивність каталогу
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  }

  .buy {
    width: 112px;
  }
}

@media (max-width: 1023px) {
  .page-head h1 {
    font-size: var(--fs-22);
  }

}

@media (max-width: 767px) {
  /* Телефон: один рядок — стільки фільтрів, скільки влазить повністю, + «+N» (розгортає решту);
     «Скинути» завжди справа. Розгорнуто — чіпи переносяться, внизу «Згорнути» */
  .active-filters__list {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .active-filters.is-expanded .active-filters__list {
    flex-wrap: wrap;
  }

  .chip--more {
    display: inline-flex;
  }

  .chip--more[hidden] {
    display: none;
  }

  .active-filters__all {
    display: none;
  }

  .page {
    gap: var(--s-4);
  }

  /* Тулбар під заголовком на всю ширину — без порожнього місця */
  .page-head {
    flex-wrap: wrap;
    row-gap: var(--s-3);
  }

  /* Назва категорії вже є в хлібних крихтах — заголовок на телефоні візуально ховаємо
     (лишається для пошуковиків і екранних читачів) */
  .page-head__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .page-head h1 {
    font-size: var(--fs-20);
  }

  /* Фільтри і сортування — дві рівні колонки, вигляд — по вмісту */
  .toolbar {
    flex: 1 1 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .filters-btn,
  .sort-btn {
    padding: 0 10px;
    gap: 6px;
  }

  #view-seg .seg__btn {
    width: 28px;
    min-width: 28px;
  }

  .toolbar > .filters-btn,
  .toolbar > .dd {
    flex: 1 1 0;
    min-width: 0;
  }

  .toolbar > .dd > .btn {
    width: 100%;
  }

  .sort-btn {
    min-width: 0;
  }

  .sort-full {
    display: none;
  }

  .sort-short {
    display: inline;
  }

  .sort-btn .ico-text-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .crumbs__home span {
    display: none;
  }

  /* На телефоні крихти — смуга впритик під шапкою, від краю до краю екрана (продовження шапки) */
  .crumbs {
    align-self: stretch;
    max-width: none;
    margin: calc(var(--s-4) * -1) calc(var(--gutter) * -1) 0;
    padding: 0 calc(var(--gutter) - 6px);
    border-radius: 0;
    box-shadow: 0 6px 18px -10px rgba(16, 24, 40, 0.2);
    /* Шлях не влазить — гортається пальцем (без смуги прокрутки), нічого не обрізається */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .crumbs::-webkit-scrollbar {
    display: none;
  }

  .crumbs__current {
    flex: none;
    overflow: visible;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }

  .pcard {
    border-radius: var(--r-xl);
  }

  .pcard__media {
    margin: 4px 4px 0;
    border-radius: var(--r-lg);
    aspect-ratio: 1 / 1;
  }

  .pcard__img {
    padding: 8px;
  }

  .pcard__fav {
    width: 32px;
    height: 32px;
    top: 6px;
    right: 6px;
  }

  .pcard__body {
    padding: 10px 10px 0;
    gap: 4px;
  }

  .pcard__meta {
    font-size: var(--fs-12);
  }

  .pcard__title {
    font-size: var(--fs-13);
  }

  .pcard__specs {
    display: none;
  }

  .status {
    font-size: var(--fs-12);
  }

  .pcard__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: 10px;
  }

  .price {
    min-height: 0;
  }

  .price {
    --price-now-fs: var(--fs-18);
  }

  .pcard .price {
    min-height: calc((var(--fs-13) + var(--price-now-fs)) * 1.2);
  }

  .buy {
    width: 100%;
  }

  .pcard__badges .badge:nth-child(n + 3) {
    display: none;
  }

  .grid.is-list .pcard {
    flex-wrap: wrap;
  }

  .grid.is-list .pcard__media {
    width: 116px;
    margin: 4px 0 4px 4px;
    align-self: flex-start;
  }

  .grid.is-list .pcard__body {
    flex: 1 1 calc(100% - 124px);
    padding: 10px 12px;
  }

  /* Назва завжди займає два рядки — як у скелетоні, статус не стрибає */
  .grid.is-list .pcard__title {
    font-size: var(--fs-14);
    min-height: calc(2em * 1.4);
  }

  /* Низ картки: ціна зліва, «Купити» справа */
  .grid.is-list .pcard__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    box-shadow: inset 0 1px 0 var(--c-line);
    padding: 10px 12px;
  }

  .grid.is-list .price {
    align-items: flex-start;
  }

  .grid.is-list .buy {
    width: 128px;
  }

  .pager {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .pager__more {
    width: 100%;
    height: var(--control-h-lg);
    grid-row: 1;
    font-size: var(--fs-15);
  }

  .pager__pages {
    justify-self: center;
    grid-row: 2;
  }

}

@media (max-width: 359px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Ряд товарів «рівно один ряд» (.hrow--one: «Акції» на головній, «Схожі товари» на сторінці товару, «Товари до статті») — без JS:
   ховаємо картки, що не вміщаються в перший ряд.
   Колонок у .grid (auto-fill, minmax(M, 1fr), gap 16px) при ширині W: floor((W + 16) / (M + 16));
   M = 224px (≥1440) / 208px (768–1439, catalog.css). Телефон — два ряди по 2
   -------------------------------------------------------------------------- */
.hsection,
.psection,
#article-products {
  container: hsection / inline-size;
}

@media (min-width: 1440px) {
  @container hsection (max-width: 463.98px) {
    .hrow--one > .pcard:nth-child(n+2) {
      display: none;
    }
  }

  @container hsection (min-width: 464px) and (max-width: 703.98px) {
    .hrow--one > .pcard:nth-child(n+3) {
      display: none;
    }
  }

  @container hsection (min-width: 704px) and (max-width: 943.98px) {
    .hrow--one > .pcard:nth-child(n+4) {
      display: none;
    }
  }

  @container hsection (min-width: 944px) and (max-width: 1183.98px) {
    .hrow--one > .pcard:nth-child(n+5) {
      display: none;
    }
  }

  @container hsection (min-width: 1184px) and (max-width: 1423.98px) {
    .hrow--one > .pcard:nth-child(n+6) {
      display: none;
    }
  }

  @container hsection (min-width: 1424px) and (max-width: 1663.98px) {
    .hrow--one > .pcard:nth-child(n+7) {
      display: none;
    }
  }

  @container hsection (min-width: 1664px) and (max-width: 1903.98px) {
    .hrow--one > .pcard:nth-child(n+8) {
      display: none;
    }
  }

  @container hsection (min-width: 1904px) and (max-width: 2143.98px) {
    .hrow--one > .pcard:nth-child(n+9) {
      display: none;
    }
  }

  @container hsection (min-width: 2144px) and (max-width: 2383.98px) {
    .hrow--one > .pcard:nth-child(n+10) {
      display: none;
    }
  }

  @container hsection (min-width: 2384px) {
    .hrow--one > .pcard:nth-child(n+11) {
      display: none;
    }
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  @container hsection (max-width: 431.98px) {
    .hrow--one > .pcard:nth-child(n+2) {
      display: none;
    }
  }

  @container hsection (min-width: 432px) and (max-width: 655.98px) {
    .hrow--one > .pcard:nth-child(n+3) {
      display: none;
    }
  }

  @container hsection (min-width: 656px) and (max-width: 879.98px) {
    .hrow--one > .pcard:nth-child(n+4) {
      display: none;
    }
  }

  @container hsection (min-width: 880px) and (max-width: 1103.98px) {
    .hrow--one > .pcard:nth-child(n+5) {
      display: none;
    }
  }

  @container hsection (min-width: 1104px) and (max-width: 1327.98px) {
    .hrow--one > .pcard:nth-child(n+6) {
      display: none;
    }
  }

  @container hsection (min-width: 1328px) and (max-width: 1551.98px) {
    .hrow--one > .pcard:nth-child(n+7) {
      display: none;
    }
  }

  @container hsection (min-width: 1552px) and (max-width: 1775.98px) {
    .hrow--one > .pcard:nth-child(n+8) {
      display: none;
    }
  }

  @container hsection (min-width: 1776px) and (max-width: 1999.98px) {
    .hrow--one > .pcard:nth-child(n+9) {
      display: none;
    }
  }

  @container hsection (min-width: 2000px) and (max-width: 2223.98px) {
    .hrow--one > .pcard:nth-child(n+10) {
      display: none;
    }
  }

  @container hsection (min-width: 2224px) {
    .hrow--one > .pcard:nth-child(n+11) {
      display: none;
    }
  }
}

@media (max-width: 767px) {
  .hrow--one > .pcard:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 359px) {
  .hrow--one > .pcard:nth-child(n+3) {
    display: none;
  }
}