/* 3D-колода карточек-разделов (карусель) — только классическая витрина.
   Карточка — тонкая книга в твёрдой обложке. Вид по разделу (deck.js → .deck-card--dog / --cat / --other):
   собакам — красная ткань и золотой обрез, котам — лён и фото в паспарту с закладкой, остальное — классика с рамкой. */
.deck-section {
  position: relative; overflow: hidden; padding: 28px 0 22px;
  /* размер книги — от высоты окна: заголовок, вся колода и стрелки помещаются на экран под шапкой */
  --deck-w: clamp(200px, min((100vh - 305px) * .7, 72vw), 330px);
  --deck-w: clamp(200px, min((100svh - 305px) * .7, 72vw), 330px);
  --deck-h: calc(var(--deck-w) * 1.42);
  --deck-d: 14px;   /* толщина книги */
}
.deck-section [data-carbg] {
  position: absolute; inset: 0; z-index: 0; transition: background .6s;
  background: radial-gradient(circle at var(--gx,30%) 45%, var(--c1,#fde8ea) 0%, var(--bg) 62%);
}
.deck-section .wrap { position: relative; z-index: 1; }
.deck-section .s-head { display: block; text-align: center; margin-bottom: 4px; }
.deck-section .s-head .kicker { margin-bottom: 6px; }
.deck-section .s-head h2 { margin: 0; }
.deck-section .s-head h2 em { font-style: italic; color: var(--red); }

/* сцена */
.deck-stage {
  position: relative; height: calc(var(--deck-h) + 44px);
  perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none;
}
.deck-stage.is-dragging { cursor: grabbing; }

/* ---------- книга ---------- */
.deck-card {
  position: absolute; left: 50%; top: 50%;
  width: var(--deck-w); height: var(--deck-h);
  transform-style: preserve-3d; will-change: transform, opacity;
}
.deck-card [data-tilt] { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.deck-card [data-tilt] > * { position: absolute; }

/* обложка (передняя крышка) и задняя крышка */
.deck-card .deck-face {
  inset: 0; border-radius: 3px 7px 7px 3px; overflow: hidden; transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.deck-card .deck-back {
  inset: 0; border-radius: 3px 7px 7px 3px; transform: translateZ(calc(var(--deck-d) * -1));
  box-shadow: 0 30px 56px rgba(60,25,20,.26);
}
/* обрез страниц: справа и снизу — бумага (или золото), а не тёмная грань */
.deck-card .deck-spine {
  top: 3px; bottom: 3px; right: 1.5px; width: calc(var(--deck-d) - 2px);
  transform-origin: right center; transform: rotateY(-90deg);
  border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(to right, #fbf8f2 0 1px, #ece4d6 1px 1.6px, #f6f1e8 1.6px 2.6px);
}
.deck-card .deck-bottom {
  left: 3px; right: 1.5px; bottom: 1.5px; height: calc(var(--deck-d) - 2px);
  transform-origin: center bottom; transform: rotateX(90deg);
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, #fbf8f2 0 1px, #ece4d6 1px 1.6px, #f6f1e8 1.6px 2.6px);
}
/* бороздка у корешка, как у твёрдого переплёта */
.deck-card .deck-hinge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26px; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.28) 0, rgba(0,0,0,.05) 5px, rgba(255,255,255,.18) 9px, rgba(0,0,0,.12) 12px, rgba(0,0,0,0) 26px);
}
.deck-card .deck-mat { position: absolute; inset: 0; overflow: hidden; }
.deck-card .deck-mat [data-cimg] {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; max-height: none;  /* запас под параллакс; общее img{max-width:100%} его срезало */
  object-fit: cover; pointer-events: none; user-select: none;
}
.deck-card .deck-face [data-glare] {
  position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 60%);
  opacity: 0; pointer-events: none;
}
.deck-card .deck-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px 22px 32px; text-align: left; }
.deck-card .deck-kicker {
  display: block; font: 700 clamp(10px, calc(var(--deck-w) * .034), 11px)/1 var(--font-h); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 7px;
}
/* надписи уменьшаются вместе с книгой (книга — по высоте экрана) */
.deck-card .deck-title { display: block; font: 700 clamp(18px, calc(var(--deck-w) * .079), 26px)/1.12 var(--font-logo); margin-bottom: 8px; }
.deck-card .deck-link { font: 700 clamp(11px, calc(var(--deck-w) * .04), 13px)/1 var(--font-h); }
/* ещё раздел на той же книге («+ Прибирання · 51») — плашка в правом верхнем углу фото */
.deck-card .deck-extra {
  position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 10px; border-radius: 999px;
  font: 700 12px/1 var(--font-h); text-decoration: none; white-space: nowrap;
  color: #8f0f1f; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.deck-card--dog .deck-extra { border: 1px solid #e3c27a; }

/* ===== остальное (бренды, гризуни, птахи…): классика — фото на всю обложку, тонкая золотая рамка ===== */
.deck-card--other .deck-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(25,18,16,.84) 0%, rgba(25,18,16,.28) 42%, rgba(25,18,16,0) 62%);
}
.deck-card--other .deck-frame {
  position: absolute; inset: 11px 11px 11px 19px; border: 1px solid rgba(232,205,150,.75); border-radius: 2px; pointer-events: none;
}
.deck-card--other .deck-txt { color: #fff; }
.deck-card--other .deck-kicker { color: #ecd6a6; }
.deck-card--other .deck-link { color: #fff; opacity: .85; }
.deck-card--other .deck-back { background: #3a2a24; }

/* ===== собакам: фото сверху, внизу красная ткань с «золотым тиснением», золотой обрез ===== */
/* обложка колонкой: внизу текст своей высоты, фото — всё остальное; текст не налезает на фото ни на каком экране */
.deck-card--dog .deck-face, .deck-card--cat .deck-face { display: flex; flex-direction: column; }
.deck-card--dog .deck-txt, .deck-card--cat .deck-txt { position: relative; flex: none; }
.deck-card--dog .deck-face { background: #860c1d; }
.deck-card--dog .deck-mat { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.deck-card--dog .deck-shade { display: none; }
.deck-card--dog .deck-txt {
  padding-top: clamp(12px, calc(var(--deck-w) * .06), 20px); padding-bottom: clamp(14px, calc(var(--deck-w) * .06), 20px);
  border-top: 3px solid #d9b65f;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.04) 2px 4px), linear-gradient(#a3122a, #860c1d);
}
.deck-card--dog .deck-kicker, .deck-card--dog .deck-title, .deck-card--dog .deck-link {
  background: linear-gradient(180deg, #f7e3a8, #c99a45 60%, #f0d48a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.deck-card--dog .deck-back { background: #860c1d; }
.deck-card--dog .deck-spine {
  background: repeating-linear-gradient(to right, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.08) 1px 1.6px, transparent 1.6px 2.6px),
              linear-gradient(to bottom, #b8893f, #f3dc9b 35%, #c99a45 70%, #f0d48a);
}
.deck-card--dog .deck-bottom {
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.08) 1px 1.6px, transparent 1.6px 2.6px),
              linear-gradient(to right, #b8893f, #f3dc9b 35%, #c99a45 70%, #f0d48a);
}

/* ===== котам: льняная обложка, фото в белом паспарту, красная закладка ===== */
.deck-card--cat .deck-face {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px),
              repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), #efe8dc;
}
.deck-card--cat .deck-mat {
  position: relative; inset: auto; flex: 1 1 auto; min-height: 0; margin: 18px 16px 0 26px; border-radius: 2px;
  box-shadow: 0 0 0 5px #fbf8f2, 0 0 0 6px rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.18);
}
.deck-card--cat .deck-txt { padding-top: clamp(12px, calc(var(--deck-w) * .055), 18px); padding-bottom: clamp(14px, calc(var(--deck-w) * .06), 20px); }
.deck-card--cat .deck-kicker { color: var(--red); }
.deck-card--cat .deck-title { color: #2a1f1b; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.deck-card--cat .deck-link { color: #6b5a50; }
.deck-card--cat .deck-back { background: #e6ddcf; }
.deck-card--cat .deck-ribbon {
  right: 22%; bottom: -18px; width: 11px; height: 26px; pointer-events: none; transform: translateZ(-6px);
  background: linear-gradient(to right, #a30e22, #d5122b 50%, #a30e22);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

/* управление */
.deck-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px;
}
.deck-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .15s, border-color .15s;
}
.deck-btn:hover { border-color: var(--red); color: var(--red); }
.deck-btn--next { background: var(--red); color: var(--on-red); border-color: var(--red); }
.deck-btn--next:hover { background: var(--red-dark); border-color: var(--red-dark); }
.deck-counter {
  font: 700 14px/1 var(--font-h); color: var(--muted); min-width: 52px; text-align: center;
  letter-spacing: .06em;
}

/* адаптивность */
@media (max-width: 640px) {
  .deck-section { padding: 22px 0 18px; --deck-w: clamp(190px, min((100svh - 300px) * .7, 66vw), 300px); }
  .deck-card .deck-txt { padding-left: 26px; padding-right: 16px; }
}