/* ═══════════════════════════════════════════════════════════════════════════
   HomeLab 3D — Секции #printers, #ams, #filament: компактные карточки 4 в ряд.
   Узкий overlay, локально на тесте.
   Откат: удалить <link rel="stylesheet" href="printers-compact.css?v=N">
          из index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Сетка: ровно 4 колонки на десктопе ─── */
#printers .products-grid,
#ams .products-grid,
#ams #amsGrid,
#filament .filament-grid,
#accessories .products-grid,
#accessories #accessoriesGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) {
  #printers .products-grid,
  #ams .products-grid,
  #ams #amsGrid,
  #filament .filament-grid,
  #accessories .products-grid,
  #accessories #accessoriesGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 820px) {
  #printers .products-grid,
  #ams .products-grid,
  #ams #amsGrid,
  #filament .filament-grid,
  #accessories .products-grid,
  #accessories #accessoriesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 480px) {
  #printers .products-grid,
  #ams .products-grid,
  #ams #amsGrid,
  #filament .filament-grid,
  #accessories .products-grid,
  #accessories #accessoriesGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ─── Карточка ─── */
#printers .product-card,
#ams .product-card,
#filament .filament-card,
#accessories .product-card {
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  background: #fff;
}
#printers .product-card:hover,
#ams .product-card:hover,
#filament .filament-card:hover,
#accessories .product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 178, 45, 0.45);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

/* Изображение — квадратное, на всю ширину карточки */
#printers .product-card__image,
#ams .product-card__image,
#filament .filament-card__image,
#accessories .product-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 0;
  display: block;
  position: relative;
}
#printers .product-card__image img,
#ams .product-card__image img,
#filament .filament-card__image img,
#accessories .product-card__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}
/* Аксессуары: <img> внутри <a> с inline-style — сбросим height limit */
#accessories .product-card__image img[style] {
  max-height: none !important;
  object-fit: contain;
}

/* Бейджи — мельче, плоские. Combo полностью скрыт */
#printers .product-card__badges,
#ams .product-card__badges {
  top: 10px; left: 10px;
  gap: 4px;
}
#printers .product-card__badge,
#ams .product-card__badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-shadow: none;
  box-shadow: none;
}
#printers .product-card__badge--combo,
#ams .product-card__badge--combo {
  display: none !important;
}

/* Тело карточки (printers / ams / accessories) */
#printers .product-card__body,
#ams .product-card__body,
#accessories .product-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
#printers .product-card__name,
#ams .product-card__name,
#filament .filament-card__name,
#accessories .product-card__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
}
#printers .product-card__desc,
#printers .product-card__sub,
#ams .product-card__desc,
#ams .product-card__sub,
#filament .filament-card__desc,
#accessories .product-card__desc,
#accessories .product-card__sub {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── FILAMENT CARD — специфика ─── */
/* Карточка филамента — flex column, паддинги вокруг текста */
#filament .filament-card { padding: 0; }
#filament .filament-card__name {
  padding: 12px 14px 2px;
}
#filament .filament-card__desc {
  padding: 0 14px;
  margin: 0 0 10px;
  color: var(--text-secondary, #6b7280);
}

/* Скрываем только метку выбранного цвета — цвета видно по свотчам */
#filament .filament-card__selected-color {
  display: none !important;
}

/* Spool toggle — компактный segmented control в стиле новой концепции */
#filament .spool-toggle {
  display: flex !important;
  background: var(--bg-secondary, #f4f5f7);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
  margin: 0 14px 16px;
}
#filament .spool-btn {
  flex: 1;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  letter-spacing: 0;
  padding: 0 6px;
  white-space: nowrap;
}
#filament .spool-btn:hover:not(:disabled):not(.active) {
  color: var(--text-color, #0a0a0a);
}
#filament .spool-btn.active {
  background: #fff;
  color: var(--text-color, #0a0a0a);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
}
#filament .spool-btn:disabled {
  color: var(--text-faint, #9ca3af);
  cursor: not-allowed;
}

/* Цветовые свотчи — крупнее, разрешаем перенос на 2-3 ряда */
#filament .color-swatches {
  padding: 0 14px !important;
  gap: 6px !important;
  margin-bottom: 12px;
  display: flex !important;
  flex-wrap: wrap;
}
#filament .color-dot,
#filament .color-swatches .color-dot {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.12s;
  padding: 0;
}
#filament .color-dot:hover { transform: scale(1.18); }
#filament .color-dot.active {
  outline: 2px solid var(--accent, #00B22D);
  outline-offset: 1px;
}

/* Footer филамента — цена */
#filament .filament-card__footer {
  margin-top: auto;
  padding: 0 14px 0 !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
#filament .filament-card__price {
  font-size: 19px !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
#filament .filament-card__price .price-old {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-faint, #9ca3af);
  text-decoration: line-through;
  margin-left: 6px;
}

/* ─── Footer (price) для printers/ams/accessories ─── */
#printers .product-card__footer,
#ams .product-card__footer,
#accessories .product-card__footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
#printers .product-card__price,
#ams .product-card__price,
#accessories .product-card__price {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
/* Аксессуары: кнопка «В корзину» внутри footer — вынесем на свою строку */
#accessories .product-card__footer {
  flex-direction: column;
  align-items: stretch;
}
#accessories .product-card__footer .btn,
#accessories .product-card__footer button {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Переключатель моделей — скрыт на главной (printers) */
#printers .variant-tabs,
#ams .variant-tabs { display: none !important; }

/* ─── КНОПКИ: одна «Подробнее» во всю ширину ─── */
#printers .product-card__buttons,
#ams .product-card__buttons,
#filament .product-card__buttons {
  padding: 0 14px 14px !important;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
/* У филамента footer (цена) идёт отдельным блоком от .product-card__buttons,
   между ними был большой воздух — сокращаем до 4px */
#filament .product-card__buttons {
  margin-top: 4px;
}
#filament .filament-card__footer {
  margin-bottom: 0 !important;
}
/* в printers/ams блок buttons — внутри body, поэтому padding 0 + margin-top */
#printers .product-card__body > .product-card__buttons,
#ams .product-card__body > .product-card__buttons {
  padding: 0 !important;
  margin-top: 8px;
}
#printers .product-card__buttons > *:first-child,
#ams .product-card__buttons > *:first-child,
#filament .product-card__buttons > *:first-child {
  display: none !important;
}
#printers .product-card__buttons .btn,
#printers .product-card__buttons button,
#printers .product-card__buttons a.btn,
#ams .product-card__buttons .btn,
#ams .product-card__buttons button,
#ams .product-card__buttons a.btn,
#filament .product-card__buttons .btn,
#filament .product-card__buttons button,
#filament .product-card__buttons a.btn {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOG /printers.html — каталожная страница принтеров.
   Разметка отличается: <a class="product-card"> с img как прямым ребёнком,
   используется __title вместо __name, есть __category и __stock.
   ═══════════════════════════════════════════════════════════════════════════ */

.catalog-grid.catalog-grid--printers {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) {
  .catalog-grid.catalog-grid--printers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 820px) {
  .catalog-grid.catalog-grid--printers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
  .catalog-grid.catalog-grid--printers { grid-template-columns: 1fr; gap: 14px; }
}

.catalog-grid--printers .product-card,
.catalog-grid--printers a.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  padding: 0;
}
.catalog-grid--printers .product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 178, 45, 0.45);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

/* Изображение — прямой ребёнок .product-card, квадратное на всю ширину */
.catalog-grid--printers .product-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bg-secondary, #f5f5f5);
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.catalog-grid--printers .product-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.catalog-grid--printers .product-card__category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6b7280);
  margin: 0;
}
.catalog-grid--printers .product-card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
  color: var(--text-color, #0a0a0a);
}
.catalog-grid--printers .product-card__desc {
  font-size: 12.5px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-grid--printers .product-card__price {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: auto 0 0;
  padding-top: 10px;
  color: var(--text-color, #0a0a0a);
}
/* Скрываем «В наличии / Под заказ» — пользователь увидит наличие на странице товара */
.catalog-grid--printers .product-card__stock { display: none !important; }

/* Кнопка «Подробнее» через ::after — карточка уже целиком является <a>,
   поэтому клик по любой точке (включая псевдо-кнопку) ведёт на товар. */
.catalog-grid--printers .product-card__body::after {
  content: 'Подробнее';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin-top: 12px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--accent, #00B22D);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background 0.15s, transform 0.05s;
  box-sizing: border-box;
}
.catalog-grid--printers .product-card:hover .product-card__body::after {
  background: #048a26;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOG /filament.html — каталог филаментов.
   Используется грид .catalog-grid с карточками .fil-card.
   Селектор по .fil-card, чтобы не задеть каталог принтеров.
   ═══════════════════════════════════════════════════════════════════════════ */

.catalog-grid:has(> .fil-card) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) {
  .catalog-grid:has(> .fil-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 820px) {
  .catalog-grid:has(> .fil-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
  .catalog-grid:has(> .fil-card) { grid-template-columns: 1fr; gap: 14px; }
}

.catalog-grid .fil-card,
a.product-card.fil-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  padding: 0;
}
.catalog-grid .fil-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 178, 45, 0.45);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

/* Изображение — квадратное на всю ширину */
.catalog-grid .fil-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bg-secondary, #f5f5f5);
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.catalog-grid .fil-card .product-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.catalog-grid .fil-card .product-card__category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6b7280);
  margin: 0;
}
.catalog-grid .fil-card .product-card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
  color: var(--text-color, #0a0a0a);
}
.catalog-grid .fil-card .product-card__desc {
  font-size: 12.5px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Цветовые свотчи в карточке филамента — компактный ряд */
.catalog-grid .fil-card .cat-card__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  align-items: center;
}
.catalog-grid .fil-card .cat-card__color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
  flex: 0 0 auto;
}
.catalog-grid .fil-card .cat-card__color-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  padding: 0 6px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary, #f1f5f9);
  border-radius: 999px;
  letter-spacing: 0;
}

.catalog-grid .fil-card .product-card__price {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: auto 0 0;
  padding-top: 10px;
  color: var(--text-color, #0a0a0a);
}

/* Скрываем «В наличии / Под заказ» — статус виден на странице товара */
.catalog-grid .fil-card .product-card__stock { display: none !important; }

/* Кнопка «Подробнее» через ::after (карточка целиком — <a>, клик ведёт на товар) */
.catalog-grid .fil-card .product-card__body::after {
  content: 'Подробнее';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin-top: 10px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--accent, #00B22D);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background 0.15s;
  box-sizing: border-box;
}
.catalog-grid .fil-card:hover .product-card__body::after {
  background: #048a26;
}

/* Бейдж "Новинка" на карточке каталога принтеров — точная копия .product-card__badge с главной */
.catalog-grid--printers .printer-card { position: relative; }
.catalog-grid--printers .printer-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}
.catalog-grid--printers .printer-card__badge--new {
  background: linear-gradient(135deg, #FF3B30, #FF9500);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
}