/* Карточка товара, сетка, плашки статуса и кнопка «В корзину» с бегущим бликом (ButtonShiny).
   Высота карточек в ряду одинакова: рейтинг, характеристики и цена резервируют место всегда. */

/* ---------- Плашки: ХИТ / НОВИНКА / КОМПЛЕКТ / НЕПРЯМОЙ НАГРЕВ / -N% ---------- */
/* Текст на всех плашках белый (решение заказчика, как на старом сайте); скругление 4 px */
.badge-status {
  display: inline-block;
  padding: 4px 6px;
  border-radius: var(--radius-badge);
  color: var(--inverse-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 1.2;
  white-space: nowrap;
}
.badge-status--hit { background: var(--primary-pressed); }
.badge-status--new { background: var(--success); }
.badge-status--kit { background: var(--info); }
.badge-status--indirect { background: var(--info); }
.badge-status--discount { background: var(--error); }

/* ---------- Сетка ---------- */
.product-grid { display: grid; gap: var(--space-16); }
.product-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Каталог с боковым фильтром: 3 колонки, с 1360 px — 4 (у карточки должно хватать места на цену и кнопку) */
.product-grid--cat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1360px) { .product-grid--cat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product-grid > .muted { grid-column: 1 / -1; }
@media (max-width: 1279px) {
  .product-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .product-grid--5, .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .product-grid { gap: var(--space-12); }
  .product-grid--5, .product-grid--4, .product-grid--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Карточка ---------- */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-16);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--canvas);
  transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.pcard__media { position: relative; }
/* Подложка фото белая, как сама карточка: цвет не меняется при наведении, там только тень */
.pcard__photo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--canvas);
}
.pcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Белый фон фото растворяется в цвете подложки */
  mix-blend-mode: multiply;
  transition: transform var(--dur-slow) var(--ease);
}

/* Плашки идут в одну строку по верхнему краю фото (как на старом сайте) и стоят на одном левом отступе с названием и характеристиками;
   три плашки помещаются и в самой узкой карточке */
.pcard__badges { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-flow: row wrap; align-items: flex-start; gap: 4px; pointer-events: none; }

/* Кнопки «в избранное» и «в сравнение»: форма и цвета с 3drops.ru */
/* Стоят столбиком в верхнем правом углу фото, на одном уровне со строкой плашек (слева плашки, справа кнопки) */
.pcard__tools { position: absolute; top: 0; right: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--space-8); }
.pcard__tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tool-bg);
  color: var(--tool-ink);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pcard__tool::before { content: ""; position: absolute; inset: -6px; }
.pcard__tool .icon { width: 14px; height: 14px; }
.pcard__tool[data-list-toggle="favorites"]:hover, .pcard__tool[data-list-toggle="favorites"].is-on { color: #fff; background: var(--tool-fav); }
.pcard__tool[data-list-toggle="compare"]:hover, .pcard__tool[data-list-toggle="compare"].is-on { color: #fff; background: var(--tool-compare); }
/* Тень при наведении и приподнимание на 1 px, как на старом kerona.shop */
.pcard__tool:hover, .pcard__tool.is-on { box-shadow: 0 2px 8px rgba(22, 28, 23, 0.22); }
.pcard__tool:hover { transform: translateY(-1px); }
.pcard__tool:active { transform: scale(0.92); }

.pcard__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin-top: var(--space-12);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pcard__star { width: 14px; height: 14px; color: var(--primary); }

.pcard__title {
  display: -webkit-box;
  min-height: calc(1.35em * 3);
  margin: var(--space-4) 0 var(--space-12);
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* Вся карточка — одна ссылка; кнопки лежат выше неё */
.pcard__link { color: var(--ink); }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.pcard__link:focus-visible { outline: none; box-shadow: none; }
.pcard:has(.pcard__link:focus-visible) { box-shadow: var(--shadow-focus); }

.pcard__specs { min-height: calc(var(--rows, 3) * 22px); margin: 0 0 var(--space-12); }
.pcard__spec { display: flex; align-items: baseline; height: 22px; font-size: 13px; line-height: 22px; }
.pcard__spec dt { flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.pcard__spec dd { display: flex; flex: 1 1 0; align-items: baseline; min-width: 0; margin: 0; color: var(--ink); }
.pcard__spec dd::before { content: ""; flex: 1 1 auto; min-width: 8px; margin: 0 6px; border-bottom: 1px dotted var(--hairline); transform: translateY(-5px); }
.pcard__spec dd > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pcard__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); margin-top: auto; }
.pcard__price { display: flex; flex-direction: column; min-width: 0; }
.pcard__old { height: 16px; color: var(--ink-subtle); line-height: 16px; white-space: nowrap; }
.pcard__now { font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcard__vat { height: 15px; color: var(--ink-subtle); line-height: 15px; }
.pcard__form { position: relative; z-index: 2; flex: none; margin: 0; }
/* Вместо кнопки у товара «Нет в наличии»: та же серая надпись, что у «Сопутствующих» (.rcard__out) */
.pcard__out { position: relative; z-index: 2; flex: none; margin: 0; }
.pcard__out span { display: block; padding: 10px 12px; border-radius: var(--radius-btn); background: var(--surface-1); color: var(--ink-muted); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .pcard__tools { opacity: 0; transform: translateX(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .pcard:hover .pcard__tools, .pcard:focus-within .pcard__tools { opacity: 1; transform: none; }
}
/* При наведении: лёгкая тень (цвет карточки и фото не меняется) и небольшое увеличение */
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { z-index: 3; box-shadow: var(--shadow-card-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pcard:hover { transform: scale(1.02); }
}

@media (max-width: 1279px) {
  .pcard { padding: var(--space-12); }
  .pcard__now { font-size: 18px; }
}
@media (max-width: 767px) {
  /* Узкая карточка: плашки компактнее и на всю ширину фото в одну строку; кнопки — там же, в верхнем правом углу */
  .pcard__badges { top: 0; left: 0; right: 0; gap: 3px; }
  .badge-status { padding: 3px 4px; font-size: 10px; letter-spacing: 0.2px; }
  .pcard__tool { width: 30px; height: 30px; }
  .pcard__tools { top: 24px; }
  .pcard__buy { flex-direction: column; align-items: stretch; }
  .pcard__form, .pcard__out { width: 100%; }
  .pcard__form .kerona-shiny { width: 100%; }
  .pcard__title { font-size: 14px; }
  .pcard__spec { font-size: 12px; }
}
@media (max-width: 374px) {
  .badge-status { padding: 3px; font-size: 9px; letter-spacing: 0; }
}

/* ---------- ButtonShiny: «В корзину» (эффект только на этой кнопке) ----------
   Точный перенос присланного заказчиком shiny-button (React → чистый CSS): чёрная заливка #000000,
   обводка #1a1818, оранжевые акценты #ff5f00 / #ff9253, бегущая дуга по контуру, крапинка,
   вращающийся блик снизу и «дыхание» при наведении. Размеры под карточку (padding/шрифт) свои. */
@property --gleam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gleam-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gleam-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gleam-shine { syntax: "<color>"; initial-value: white; inherits: false; }

.kerona-shiny {
  --gleam-base: #000000;
  --gleam-inset: #1a1818;
  --gleam-label: #ffffff;
  --gleam-accent: #ff5f00;
  --gleam-accent-soft: #ff9253;
  --animation: kerona-gleam-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --gleam-ease: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  color: var(--gleam-label);
  background:
    linear-gradient(var(--gleam-base), var(--gleam-base)) padding-box,
    conic-gradient(
      from calc(var(--gleam-angle) - var(--gleam-angle-offset)),
      transparent,
      var(--gleam-accent) var(--gleam-percent),
      var(--gleam-shine) calc(var(--gleam-percent) * 2),
      var(--gleam-accent) calc(var(--gleam-percent) * 3),
      transparent calc(var(--gleam-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--gleam-inset);
  transition: var(--gleam-ease);
  transition-property: --gleam-angle-offset, --gleam-percent, --gleam-shine;
}
.kerona-shiny--sm { padding: 10px 16px; font-size: 13px; }
.kerona-shiny::before,
.kerona-shiny::after,
.kerona-shiny .label::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.kerona-shiny:active { translate: 0 1px; }

/* Крапинка */
.kerona-shiny::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gleam-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}

/* Блик снизу: постоянно вращается */
.kerona-shiny::after {
  --animation: kerona-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--gleam-accent), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

/* Надпись с иконкой; свечение label::before считается от размеров самой кнопки, как в оригинале */
.kerona-shiny .label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kerona-shiny .label .icon { width: 16px; height: 16px; }
.kerona-shiny .label::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--gleam-accent);
  opacity: 0;
  transition: opacity var(--gleam-ease);
  animation: calc(var(--duration) * 1.5) kerona-breathe linear infinite;
}

.kerona-shiny,
.kerona-shiny::before,
.kerona-shiny::after {
  animation:
    var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}
.kerona-shiny:is(:hover, :focus-visible) {
  --gleam-percent: 20%;
  --gleam-angle-offset: 95deg;
  --gleam-shine: var(--gleam-accent-soft);
}
.kerona-shiny:is(:hover, :focus-visible),
.kerona-shiny:is(:hover, :focus-visible)::before,
.kerona-shiny:is(:hover, :focus-visible)::after { animation-play-state: running; }
.kerona-shiny:is(:hover, :focus-visible) .label::before { opacity: 1; }

@keyframes kerona-gleam-angle { to { --gleam-angle: 360deg; } }
@keyframes kerona-shimmer { to { rotate: 360deg; } }
@keyframes kerona-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

@media (prefers-reduced-motion: reduce) {
  .kerona-shiny, .kerona-shiny::before, .kerona-shiny::after, .kerona-shiny .label::before { animation: none !important; }
  .kerona-shiny:is(:hover, :focus-visible),
  .kerona-shiny:is(:hover, :focus-visible)::before,
  .kerona-shiny:is(:hover, :focus-visible)::after { animation-play-state: paused !important; }
  .kerona-shiny:is(:hover, :focus-visible) .label::before { opacity: 0; }
  .kerona-shiny { transition: none; }
}

/* Подсказка «добавлено в сравнение / избранное» (cards.js) и эффект на кнопке. Анимируются только transform и opacity. */
.toast {
  position: fixed;
  z-index: 95;
  top: 84px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: min(400px, calc(100vw - 24px));
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--canvas);
  box-shadow: 0 12px 30px -12px rgba(24, 16, 8, 0.32);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast[hidden] { display: none; }
.toast.is-in { opacity: 1; transform: none; }
.toast__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e6f4ec; color: var(--success); }
.toast.is-off .toast__icon { background: var(--surface-1); color: var(--ink-muted); }
.toast__icon .icon { width: 16px; height: 16px; }
.toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.toast__name { overflow: hidden; color: var(--ink-muted); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.toast__name[hidden] { display: none; }
.toast__action { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-btn); background: var(--primary-tint); color: var(--primary-pressed); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease); }
.toast__action[hidden] { display: none; }
.toast__action:hover { background: #fbe0d7; }
.toast__action:focus-visible, .toast__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.toast__close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-subtle); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.toast__close:hover { background: var(--surface-1); color: var(--ink); }
.toast__close .icon { width: 16px; height: 16px; }
@media (max-width: 1023px) { .toast { top: 68px; right: 12px; left: 12px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .toast { transform: none; transition: opacity var(--dur-fast) linear; } }

.fx-burst { position: fixed; z-index: 96; width: 0; height: 0; pointer-events: none; }
.fx-burst i { position: absolute; left: -1.5px; top: -5px; width: 3px; height: 10px; border-radius: 2px; background: var(--fx, var(--primary)); opacity: 0; animation: fx-ray 560ms var(--ease) forwards; }
@keyframes fx-ray {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-13px) scaleY(0.5); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-30px) scaleY(1); }
}
.icon.is-pop { animation: fx-pop 360ms var(--ease) both; }
@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
/* Полёт миниатюры товара в корзину (02.10.2026): копия фото летит к значку корзины (шапка на десктопе, вкладка внизу на телефоне).
   Движение задаёт скрипт (transform и opacity), здесь только вид. При «меньше анимации» полёта нет (проверка в cards.js). */
.fly-thumb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 97;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--canvas);
  box-shadow: 0 8px 24px rgba(24, 16, 8, 0.2);
  pointer-events: none;
  will-change: transform, opacity;
}
.fly-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-tile); mix-blend-mode: multiply; }
/* Ответ корзины на посадку: значок слегка приседает и от него расходится тонкое кольцо цвета бренда */
.icon-action__icon.is-receive .icon { animation: cart-receive 340ms var(--ease) both; }
.icon-action__icon.is-receive::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--primary); border-radius: 50%; opacity: 0; pointer-events: none; animation: cart-ring 440ms var(--ease) both; }
@keyframes cart-receive { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes cart-ring { 0% { opacity: 0.55; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.55); } }