/**
 * KV-style product cards (Prostore + OpenCart fallback)
 * Load order: app.min.css (тема Prostore) → kvadrate.css → kv-product-card.css.
 * В app.min.css у .products__item-in:before — полноразмерный слой подсветки при hover (z-index: -1);
 * акцентная полоска KV вынесена в ::after, чтобы не конфликтовать с этим псевдоэлементом.
 */

:root {
  --kv-pc-primary: #345da0;
  --kv-pc-primary-dark: #2d4f8a;
  --kv-pc-primary-pale: #eef3fa;
  --kv-pc-primary-bg: #f6f8fb;
  --kv-pc-accent: #c24036;
  --kv-pc-text: #2c2c2c;
  --kv-pc-text-muted: #8c95a5;
  /* внутренние рамки / поля — светлее */
  --kv-pc-border: #e2e7ef;
  /* внешняя рамка карточки — как в kvadrate.css (.products__item-in { outline: 2px solid #cad8ef }) */
  --kv-pc-card-edge: #cad8ef;
  --kv-pc-card: #ffffff;
  --kv-pc-radius: 14px;
  --kv-pc-radius-sm: 10px;
  --kv-pc-shadow: 0 4px 20px rgba(52, 93, 160, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --kv-pc-shadow-hover: 0 12px 36px rgba(52, 93, 160, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  /* подкатегории на странице каталога — kvadrate.css */
  --kv-pc-categories-edge: #87a1ce;
  --kv-pc-categories-text: #3763ad;
  /* селекты сортировки / лимита — kvadrate.css */
  --kv-pc-settings-select-bg: #e4ecfd;
}

/* ----- app.min.css: внешняя оболочка — убираем второй «белый» слой, чтобы была видна карточка .products__item-in ----- */
.products__item {
  background: transparent !important;
  border-radius: var(--kv-pc-radius);
  position: static;
}

.products__item:hover {
  position: relative;
}

/* ----- Prostore: карточка (совместно с kvadrate: padding + «контур» карточки) ----- */
.products__item-in {
  padding: 1.5rem;
  background: var(--kv-pc-card);
  border: 2px solid var(--kv-pc-card-edge);
  border-radius: var(--kv-pc-radius);
  outline: none;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.35s ease,
    border-color 0.25s ease;
}

/* Акцент сверху — только ::after (:before зарезервирован в app.min.css под hover-слой) */
.products__item-in::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--kv-pc-primary), #4a7abf);
  opacity: 0.75;
  z-index: 4;
  pointer-events: none;
  border-radius: var(--kv-pc-radius) var(--kv-pc-radius) 0 0;
  transition: opacity 0.3s ease;
}

.products__item:hover .products__item-in {
  transform: translateY(-5px);
  box-shadow: var(--kv-pc-shadow-hover);
  border-color: rgba(52, 93, 160, 0.45);
}

.products__item:hover .products__item-in::after {
  opacity: 1;
}

/* Слой :before темы — чуть сильнее тень в тон KV (без смены механики) */
.products__item:hover .products__item-in:before {
  box-shadow: 0 0 24px rgba(52, 93, 160, 0.12);
}

/* Блок действий */
.products__item-action {
  margin-top: auto;
  padding: 16px 0 0;
}

.products__item-action .ui-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.products .products__item-action .ui-btn--primary {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--kv-pc-radius-sm);
  border: 2px solid var(--kv-pc-primary);
  background: var(--kv-pc-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(52, 93, 160, 0.28);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

.products .products__item-action .ui-btn--primary:hover {
  background: var(--kv-pc-primary-dark);
  border-color: var(--kv-pc-primary-dark);
  box-shadow: 0 8px 22px rgba(52, 93, 160, 0.35);
  transform: translateY(-1px);
}

.products .products__item-action .ui-btn--primary svg {
  width: 18px;
  height: 18px;
  margin-left: 6px;
}

.products .products__item-action .ui-btn--view {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: var(--kv-pc-radius-sm);
  border: 2px solid var(--kv-pc-border);
  background: var(--kv-pc-card);
  color: var(--kv-pc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.products .products__item-action .ui-btn--view:hover {
  background: var(--kv-pc-primary-pale);
  border-color: rgba(52, 93, 160, 0.35);
}