/* ════════════════════════════════════════════════════════════
   catalog-prom.css — DermLab · каталог у стилі Prom.ua
   Підключається в index.html ПІСЛЯ style.css і filters.css.
   Кольори — з вашої теми (графіт + золото), змінних не додає.
   ════════════════════════════════════════════════════════════ */

/* Індикатор «Завантаження…» більше не висить над товарами:
   display:flex перебивав атрибут hidden */
.state-loader[hidden],
.state-error[hidden] { display: none; }

/* ── Ширший каталог, компактніша шапка розділу ─────────────── */
.catalog { padding: 32px 0 72px; }
.catalog__inner { max-width: 1560px; padding: 0 32px; }
.catalog__header { margin-bottom: 24px; padding-bottom: 16px; }

/* ── Вкладки сортування ────────────────────────────────────── */
.sort-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 99px;
}
.sort-tabs__btn {
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--c-text-secondary);
  background: none;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sort-tabs__btn:hover { color: var(--c-text-primary); }
.sort-tabs__btn.is-active {
  background: var(--c-gold-light);
  color: var(--c-gold-dark);
  box-shadow: inset 0 0 0 1px var(--c-gold-mid);
}
.sort-tabs__btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* ── Сітка: 5 колонок (з панеллю фільтрів і без неї) ───────── */
.products-grid,
body.has-filters .catalog__layout .products-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* ── Картка ────────────────────────────────────────────────── */
.product-card {
  border-radius: var(--r-lg);
  contain-intrinsic-size: auto 430px;
}
.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;            /* фото товарів на білому тлі, як на Prom */
  padding: 14px;
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.product-card__img-placeholder { width: 100%; height: 100%; color: #9CA3AF; }

.product-card__tag { top: 10px; left: 10px; }

/* Серце «в обране» */
.product-card__wish {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.product-card__wish:hover { border-color: #DC2626; color: #DC2626; }
.product-card__wish.is-on { color: #DC2626; border-color: #DC2626; }
.product-card__wish:active { transform: scale(.9); }
.product-card__wish:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Текстова частина */
.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 0;
}
.product-card__name {
  font-family: var(--f-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}
.product-card__stock { font-size: 13.5px; line-height: 1.2; }
.product-card__stock.is-in  { color: #4ADE80; }
.product-card__stock.is-out { color: var(--c-text-muted); }

.product-card__price-wrap {
  margin-top: auto;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 4px;
}
.product-card__price { font-size: 19px; font-weight: 700; }
.product-card__price-old { font-size: 13px; }

/* Кнопка на всю ширину, «пігулкою» */
.product-card__footer {
  display: block;
  margin-top: 0;
  padding: 12px 16px 16px;
  border-top: none;
}
.product-card .btn--buy {
  width: 100%;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-black);
  background: var(--grad-gold);
  border: none;
  border-radius: 99px;
  cursor: pointer;
}
.product-card .btn--buy:hover { box-shadow: var(--shadow-gold); }
.product-card .btn--buy:focus-visible { outline: 2px solid var(--c-gold-dark); outline-offset: 2px; }
.product-card .btn--buy--disabled {
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 1440px) {
  .products-grid,
  body.has-filters .catalog__layout .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .products-grid,
  body.has-filters .catalog__layout .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 900px) {
  .products-grid,
  body.has-filters .catalog__layout .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .catalog__inner { padding: 0 16px; }
  .products-grid,
  body.has-filters .catalog__layout .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sort-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; border-radius: var(--r-lg); }
  .sort-tabs__btn { white-space: nowrap; padding: 8px 14px; }
  .product-card__body { padding: 12px 12px 0; }
  .product-card__footer { padding: 10px 12px 12px; }
  .product-card__price { font-size: 17px; }
}

/* ── Без верхньої смуги категорій ──────────────────────────────
   Щоб повернути меню категорій — видаліть цей блок до кінця файлу. */
.cat-nav { display: none; }
@media (min-width: 901px) {
  body.has-filters .filters {
    top: 92px;
    max-height: calc(100vh - 112px);
  }
}

/* ── Підкатегорії у групі «Категорія» ──────────────────────── */
.fopt--sub { padding-left: 29px; }
.fopt--sub .fopt__name { font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   ТЕЛЕФОН І ПЛАНШЕТ
══════════════════════════════════════════════════════════ */

/* чат-кнопка не перекриває шухляду з фільтрами */
body.filters-lock #dl-chat-btn,
body.filters-lock #dl-chat-window { display: none; }

@media (max-width: 900px) {
  /* зручні для пальця рядки й кнопки в шухляді */
  .fopt { padding: 10px 0; font-size: 14.5px; }
  .fopt input, .fopt__box { width: 22px; height: 22px; }
  .fgroup__head { padding: 16px 0; font-size: 15px; }
  .fquick__btn { padding: 10px 15px; font-size: 14px; }
  .fmore { padding: 10px 0; font-size: 14px; }
  .fopt--sub { padding-left: 33px; }
  /* 16px у полях — iOS не збільшує сторінку при фокусі */
  .fsearch, .fprice__in, .search__input { font-size: 16px; }
  .fprice__ok { padding: 10px 16px; }
  .filters__close { width: 40px; height: 40px; }
  .filters-toggle { padding: 11px 18px; font-size: 14.5px; }
}

@media (pointer: coarse) {
  .frange__in::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -2px; }
  .frange__in::-moz-range-thumb { width: 22px; height: 22px; }
  .frange { height: 26px; }
  /* на дотик немає hover — картки не «стрибають» після тапу */
  .product-card:hover { transform: none; box-shadow: none; border-color: var(--c-border); }
  .product-card:hover::after { transform: scaleX(0); }
  .product-card:hover .product-card__img { transform: none; }
}

@media (max-width: 768px) {
  .catalog { padding: 20px 0 48px; }
  .catalog__header { margin-bottom: 14px; padding-bottom: 12px; flex-wrap: wrap; gap: 10px; }
  .catalog__title { font-size: 1.6rem; }
  .catalog__tools { gap: 10px; }

  /* вкладки сортування — стрічка, що гортається вбік, без смуги прокрутки */
  .sort-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sort-tabs::-webkit-scrollbar { display: none; }
  .sort-tabs__btn { flex: 0 0 auto; }

  /* чипи вибраних фільтрів — теж в один рядок */
  .filters-active { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
  .filters-active::-webkit-scrollbar { display: none; }
  .fchip, .fchip-reset { flex: 0 0 auto; white-space: nowrap; }

  /* картка для вузьких екранів */
  .product-card__image-wrap { padding: 8px; }
  .product-card__tag { top: 8px; left: 8px; font-size: 11px; }
  .product-card__wish { width: 36px; height: 36px; right: 8px; bottom: 8px; }
  .product-card__name { font-size: 13.5px; }
  .product-card__stock { font-size: 12.5px; }
  .product-card .btn--buy { padding: 10px 12px; font-size: 14px; }
}

@media (max-width: 480px) {
  .catalog__inner { padding: 0 12px; }
  .product-card__body { gap: 6px; padding: 10px 10px 0; }
  .product-card__footer { padding: 8px 10px 10px; }
  .product-card__price { font-size: 16px; }
  .product-card__price-old { font-size: 12px; }
  .product-card .btn--buy { padding: 9px 8px; font-size: 13.5px; }
  .catalog-empty { padding: 40px 8px; }
}

/* ── Вкладка «Знижки» — червона ────────────────────────────── */
.sort-tabs__btn--sale { color: #EF4444; font-weight: 800; }
.sort-tabs__btn--sale.is-active { font-weight: 800; }
.sort-tabs__btn--sale:hover { color: #F87171; }
.sort-tabs__btn--sale.is-active {
  background: rgba(239, 68, 68, .14);
  color: #F87171;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .5);
}
/* посилання в назві картки — виглядає як раніше, але видиме для Google */
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { text-decoration: underline; }