/* Страница категории товаров (архив WooCommerce) — Figma node 1:20489.
   Хидер/кнопки/футер — из rasprodazha.css. Префикс pc- (product category). */

/* ---------- Хиро: крошки + заголовок ---------- */

.pc-hero {
  width: min(var(--container-width), calc(100vw - var(--rz-gutter) * 2));
  margin: 170px auto 0;
  text-align: center;
}

.pc-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(15px, 1.04vw, 20px);
  letter-spacing: -0.04em;
  line-height: 1.3;
}

.pc-breadcrumbs a { color: #6b6b6b; transition: color 240ms var(--transition-soft); }
.pc-breadcrumbs a:hover { color: var(--color-accent); }
.pc-breadcrumbs__sep { width: 9px; height: 2px; border-radius: 999px; background: #a0a0a0; }
.pc-breadcrumbs__current { color: var(--color-accent); }

.pc-title {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.8vw, 72px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--color-accent);
}

/* ---------- Тулбар: фильтры/сортировка + поиск ---------- */

.pc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: min(var(--container-width), calc(100vw - var(--rz-gutter) * 2));
  margin: 48px auto 0;
}

.pc-tools { display: flex; gap: 12px; }

.pc-dropdown { position: relative; }

.pc-tool-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 43px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-inverse);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  cursor: pointer;
}

/* Иконка-слайдеры в разметке имеет stroke="#121212" — перекрашиваем в цвет кнопки. */
.pc-tool-btn svg { flex: 0 0 24px; stroke: currentColor; }

.pc-reset {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  transition: background 240ms var(--transition-soft), color 240ms var(--transition-soft);
}
.pc-reset:hover { background: var(--color-accent); color: var(--color-inverse); }
.pc-reset svg { flex: 0 0 20px; }
.pc-reset[hidden] { display: none; }

.pc-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-inverse);
  color: var(--color-text);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms var(--transition-soft), transform 240ms var(--transition-soft), visibility 240ms var(--transition-soft);
}

.pc-dropdown.is-open .pc-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.pc-panel__group + .pc-panel__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.pc-panel__group-title { padding: 6px 8px; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: #6b6b6b; }

.pc-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  font-size: 18px;
  letter-spacing: -0.04em;
  cursor: pointer;
}
.pc-check input { position: absolute; opacity: 0; pointer-events: none; }
.pc-check__box {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid var(--color-accent);
  border-radius: 6px;
}
.pc-check__box svg { opacity: 0; }
.pc-check input:checked ~ .pc-check__box { background: var(--color-accent); border-color: var(--color-accent); }
.pc-check input:checked ~ .pc-check__box svg { opacity: 1; }
.pc-check:hover .pc-check__box { border-color: var(--color-accent-hover); }

.pc-panel__apply {
  width: 100%;
  margin-top: 12px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-inverse);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.04em;
  cursor: pointer;
  transition: opacity 200ms var(--transition-soft);
}
.pc-panel__apply:hover { opacity: 0.85; }

.pc-sort-item {
  display: block;
  width: 100%;
  padding: 12px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: -0.04em;
  text-align: center;
  cursor: pointer;
}
.pc-sort-item:hover { background: rgb(0 48 73 / 0.06); }
.pc-sort-item.is-active { background: var(--color-accent); color: var(--color-inverse); }

.pc-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 287px;
  max-width: 100%;
  height: 43px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-inverse);
}
.pc-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.pc-search input::placeholder { color: #a0a0a0; opacity: 1; }
.pc-search button { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 0; background: transparent; cursor: pointer; }
.pc-search button img { width: 36px; height: 36px; }

/* ---------- Сетка + карточки ---------- */

.pc-cards { width: min(var(--container-width), calc(100vw - var(--rz-gutter) * 2)); margin: 24px auto 0; }

.pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.pc-cards { transition: opacity 200ms var(--transition-soft); }
.pc-cards.is-loading { opacity: 0.5; pointer-events: none; }

.pc-card {
  display: flex;
  gap: 32px;
  height: 498px;
  padding: 32px;
  border-radius: 12px;
  background: var(--color-panel);
  overflow: hidden;
}

.pc-card__media {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
}
.pc-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pc-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.25vw, 24px);
  letter-spacing: -0.05em;
  color: var(--color-accent);
}

.pc-card__info {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  /* Разрешаем детям сжиматься: высота карточки фиксированная, и при ховере
     кнопки не должны выдавливаться за overflow:hidden. */
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
}

/* Верх (название + характеристики) уступает место кнопкам… */
.pc-card__top {
  display: flex;
  flex: 0 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

.pc-card__title {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--color-accent);
  /* Длинные названия не распирают карточку. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pc-card__attrs { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pc-attr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  letter-spacing: -0.04em;
  line-height: 1.3;
}
.pc-attr + .pc-attr { border-top: 1px solid #999999; padding-top: 8px; } /* линии характеристик по макету #999999 */
.pc-attr dt { margin: 0; opacity: 0.6; color: var(--color-muted); }
.pc-attr dd { margin: 0; text-align: right; color: var(--color-accent); }

/* …а низ (цена + кнопки) не сжимается и не обрезается. */
.pc-card__bottom { display: flex; flex: 0 0 auto; flex-direction: column; }

.pc-card__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 1.9vw, 32px);
  letter-spacing: -0.05em;
  color: var(--color-accent);
}

/* Ховер: из-под цены выезжают 2 кнопки, цена уходит вверх */
.pc-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms var(--transition-soft), opacity 320ms var(--transition-soft), margin-top 320ms var(--transition-soft);
}
.pc-card:hover .pc-card__actions,
.pc-card:focus-within .pc-card__actions {
  max-height: 160px;
  margin-top: 24px;
  opacity: 1;
}

.pc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 63px;
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 240ms var(--transition-soft), color 240ms var(--transition-soft);
}
.pc-btn--light { background: var(--color-accent); color: var(--color-inverse); }

/* Круги кнопок: PNG с запечённым диском (перекрасить фильтром нельзя — стрелка
   зальётся вместе с диском). Прячем img из разметки и свапаем файл через
   background-image, чтобы на ховере инвертировать диск вместе с пилюлей. */
.pc-btn__circle {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  place-items: center;
  border-radius: 999px;
  /* secondary: диск #003049 + белая стрелка */
  background: var(--color-accent) url(../assets/icons/rasprodazha/arrow-bottom-left-white.png?v=20260812) center / 47px 47px no-repeat;
  transition: background-color 240ms var(--transition-soft);
}
.pc-btn__circle img { display: block; width: 47px; height: 47px; opacity: 0; }
/* primary: белый диск + синяя стрелка */
.pc-btn--light .pc-btn__circle { background: var(--color-inverse) url(../assets/icons/rasprodazha/arrow-bottom-left-black.png?v=20260812) center / 47px 47px no-repeat; }

/* Ховеры — инверсия пилюли и круга (канон синей темы). */
.pc-btn:hover { background: var(--color-accent); color: var(--color-inverse); }
.pc-btn:hover .pc-btn__circle { background: var(--color-inverse) url(../assets/icons/rasprodazha/arrow-bottom-left-black.png?v=20260812) center / 47px 47px no-repeat; }
.pc-btn--light:hover { background: var(--color-inverse); color: var(--color-accent); }
.pc-btn--light:hover .pc-btn__circle { background: var(--color-accent) url(../assets/icons/rasprodazha/arrow-bottom-left-white.png?v=20260812) center / 47px 47px no-repeat; }

/* ---------- Показать еще ---------- */

.pc-more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.pc-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 325px;
  max-width: 100%;
  height: 63px;
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-inverse);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.05em;
  cursor: pointer;
}
.pc-more[hidden] { display: none; }
/* Круг «Показать еще»: разметка отдаёт arrow-bottom-left-black.png (белый диск +
   синяя стрелка) — ровно вид из макета (белая пилюля, белый круг, видимая стрелка).
   PNG с запечённым диском: никаких monochrome-фильтров сюда не вешать. */
.pc-more__circle { display: grid; width: 47px; height: 47px; flex: 0 0 47px; place-items: center; border-radius: 999px; background: var(--color-inverse); }
.pc-more__circle img { width: 47px; height: 47px; }
.pc-more.is-loading { opacity: 0.6; pointer-events: none; }

.pc-empty { margin-top: 24px; color: var(--color-muted); font-size: 20px; }

/* ---------- Адаптив ---------- */

@media (max-width: 1200px) {
  .pc-grid { grid-template-columns: 1fr; }
}

/* Тач-устройства: ховера нет — кнопки карточки всегда видимы */
@media (hover: none), (max-width: 1024px) {
  .pc-card__actions {
    max-height: none;
    margin-top: 24px;
    opacity: 1;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .pc-hero { margin-top: 140px; }
  .pc-card { flex-direction: column; height: auto; min-height: 0; overflow: visible; gap: 24px; padding: 24px; }
  .pc-card__media { flex: 0 0 auto; min-height: 240px; }
  .pc-card__info { flex: 0 0 auto; min-height: 0; gap: 20px; }
  .pc-card__top { flex: 0 0 auto; }
  .pc-card__actions { max-height: none; margin-top: 16px; opacity: 1; overflow: visible; }
  .pc-toolbar { flex-direction: column; }
  .pc-search { width: 100%; }
}