/* ============================================================
   Карточка товара — доводка до витринного уровня.
   Отдельный файл: sections.css принадлежит другому агенту.
   Только transform/opacity в движении, ни одного filter в кадре.
   ============================================================ */

/* ── Наклон карточки к курсору (значения пишет cards.js) ──
   perspective держим на СЕТКЕ, а не на карточке: на карточке она создаёт
   контекст наложения и съедает крылья wings.css, которые лежат под фото
   с z-index:-1. На родителе перспектива действует на детей так же. */
.catalog-grid{
  perspective:1100px;
}
.catalog-grid .card .card-media{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--ease-out), border-color .45s;
}
.catalog-grid .card.is-tilting .card-media{
  transition:transform .12s linear, border-color .45s;
}

/* ── Ярлык категории: проявляется на фото при наведении ── */
.card-tag{
  position:absolute;
  left:10px; top:10px;
  z-index:2;
  padding:.34em .7em;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(5,5,8,.62);
  border:1px solid var(--line);
  border-radius:2px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events:none;
}
.card:hover .card-tag,
.card:focus-visible .card-tag{opacity:1; transform:none;}
body.is-demon .card-tag{background:rgba(10,4,6,.66);}

/* ── Подпись «смотреть» у нижней кромки фото ── */
.card-peek{
  position:absolute;
  left:0; right:0;
  z-index:2;
  padding:.7rem .8rem;
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:center;
  background:linear-gradient(0deg, rgba(5,5,8,.86) 0%, rgba(5,5,8,0) 100%);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events:none;
}
.card:hover .card-peek,
.card:focus-visible .card-peek{opacity:1; transform:none;}
body.is-demon .card-peek{
  background:linear-gradient(0deg, rgba(10,4,6,.88) 0%, rgba(10,4,6,0) 100%);
}

/* ── Цена: символ рубля тише самой цифры ── */
.card-price .cur{
  margin-left:.15em;
  font-size:.82em;
  opacity:.6;
  font-weight:500;
}

/* ── Уголки-метки кадра на фото (появляются с ховером) ── */
.card-corners{
  position:absolute;
  left:0; top:0;
  width:100%;
  aspect-ratio:3/4;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--ease-out);
}
.card:hover .card-corners,
.card:focus-visible .card-corners{opacity:.75;}
.card-corners i{
  position:absolute;
  width:14px; height:14px;
  border:1px solid var(--chrome-mid);
}
.card-corners i:nth-child(1){left:8px;  top:8px;    border-right:0; border-bottom:0;}
.card-corners i:nth-child(2){right:8px; top:8px;    border-left:0;  border-bottom:0;}
.card-corners i:nth-child(3){left:8px;  bottom:8px; border-right:0; border-top:0;}
.card-corners i:nth-child(4){right:8px; bottom:8px; border-left:0;  border-top:0;}
body.is-demon .card-corners i{border-color:var(--blood);}

/* ── Заголовок карточки: подчёркивание слева направо ── */
.card-title{position:relative; display:inline-block;}
.card-title::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:var(--chrome-mid);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease-out);
}
.card:hover .card-title::after,
.card:focus-visible .card-title::after{transform:scaleX(1);}
body.is-demon .card-title::after{background:var(--blood);}

/* ── Тач-устройства: ховер-детали не нужны, показываем сразу тише ── */
@media (hover:none){
  .card-tag,.card-peek,.card-corners{display:none;}
  .catalog-grid .card .card-media{transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .catalog-grid .card .card-media{transform:none!important; transition:border-color .2s;}
  .card-tag,.card-peek,.card-corners,.card-title::after{transition:none;}
}

/* ============================================================
   Блок доверия в секции заказа — проверяемые факты из канала.
   ============================================================ */
.order-trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem 2rem;
  max-width:820px;
  margin:3.5rem auto 0;
  padding:0;
  list-style:none;
  text-align:center;
}
.order-trust li{
  display:grid;
  gap:.5rem;
  padding:0 .5rem;
}
.order-trust li + li{border-left:1px solid var(--line);}
.order-trust b{
  font-family:var(--font-display),sans-serif;
  font-size:clamp(1rem,2vw,1.25rem);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
.order-trust span{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
@media (max-width:700px){
  .order-trust{grid-template-columns:1fr; gap:0; margin-top:2.5rem;}
  .order-trust li{padding:1.3rem 0;}
  .order-trust li + li{border-left:0; border-top:1px solid var(--line);}
}