/* =======================================================================
   Renaissance Vinyl — поверх дизайн-системы vinyl-vibe.
   Акцент — апельсин клуба (#F7941E) вместо лайма, ночь тёплая, как от лампы,
   день — бумага конверта и обои 60-х вместо стеклоблоков.
   ======================================================================= */

:root, html[data-theme="dark"] {
  --ink: #120c09;
  --ink-2: #1a120d;
  --ink-3: #22170f;
  --ink-4: #2d1f15;
  --paper: #f3e8d4;
  --paper-dim: #bba98f;
  --paper-mute: #8b775f;
  --acid: #f7941e;
  --acid-deep: #e27a09;
  --acid-text: #f7a540;
  --on-acid: #1a0f08;
  --red: #e5482c;
  --line: rgba(243, 232, 212, 0.12);
  --line-strong: rgba(243, 232, 212, 0.26);
  --ink-rgb: 18, 12, 9;
  --fg-rgb: 255, 246, 232;
  --tint-rgb: 255, 240, 220;
  --shade-rgb: 0, 0, 0;
}
html[data-theme="dark"] body, body { background-color: var(--ink); }

html[data-theme="light"] {
  --ink: #f1e5cc;
  --ink-2: rgba(255, 250, 240, 0.62);
  --ink-3: rgba(255, 250, 240, 0.82);
  --ink-4: rgba(255, 252, 246, 0.96);
  --paper: #2a1a10;
  --paper-dim: #6b4e38;
  --paper-mute: #8f7357;
  --acid: #f7941e;
  --acid-deep: #e27a09;
  --acid-text: #b25a00;
  --on-acid: #1a0f08;
  --line: rgba(42, 26, 16, 0.16);
  --line-strong: rgba(42, 26, 16, 0.32);
  --ink-rgb: 252, 246, 235;
  --fg-rgb: 42, 26, 16;
  --tint-rgb: 42, 26, 16;
  --shade-rgb: 74, 47, 30;
  --shadow-card: 0 16px 34px rgba(74, 47, 30, 0.16);
  --shadow-sheet: 0 -18px 50px rgba(74, 47, 30, 0.25);
}
/* обои 60-х вместо стеклоблоков: «огурец», едва темнее фона */
html[data-theme="light"] body {
  background-color: #f1e5cc;
  background-image:
    radial-gradient(120% 80% at 80% 0%, rgba(247, 148, 30, 0.1), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d8c49a' stroke-width='1.4' opacity='.6'%3E%3Cpath d='M60 6c22 0 30 24 14 36-10 8-10 20 0 28 16 12 8 36-14 36S30 82 46 70c10-8 10-20 0-28C30 30 38 6 60 6Z'/%3E%3Ccircle cx='60' cy='56' r='5'/%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='120' cy='0' r='9'/%3E%3Ccircle cx='0' cy='120' r='9'/%3E%3Ccircle cx='120' cy='120' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 120px 120px;
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat;
}
::selection { background: var(--acid); color: var(--on-acid); }

/* логотип */
.logo__text { display: inline-flex; align-items: baseline; gap: 4px; }
.logo__sub { font-family: var(--ff-cond); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: lowercase; color: var(--acid-text); }
.logo__mark { background: var(--acid); color: var(--on-acid); }

/* карточка: кнопка «послушать», число фото, проданные */
.card__nph {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(18, 12, 9, 0.72); color: #f3e8d4;
  font: 600 11px/1.3 var(--ff-body); letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.card__play {
  --p: 0;
  position: absolute; right: 52px; bottom: 8px; z-index: 4;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--on-acid) calc(var(--p) * 360deg), transparent 0) border-box, rgba(18, 12, 9, 0.72);
  color: #f3e8d4; border: 2px solid rgba(247, 148, 30, 0.9);
  backdrop-filter: blur(6px);
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.card__play:hover { transform: scale(1.08); }
.card__play .ico-pause { display: none; }
.card__play.is-playing { background: var(--acid); color: var(--on-acid); }
.card__play.is-playing .ico-play { display: none; }
.card__play.is-playing .ico-pause { display: block; }
.card__play.is-loading::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--acid); animation: spin 0.8s linear infinite; }
.card__add.is-in { background: var(--paper); color: var(--ink); }
.card__add.is-busy { opacity: 0.55; pointer-events: none; }
.card__badge--sold { background: rgba(18, 12, 9, 0.8); color: #f3e8d4; }
.card__grade--S, .card__grade--M { color: #8aa27f; }
.card__grade--NM { color: #a9d77f; }
.card__grade--EX { color: var(--acid-text); }
.card__grade--VG\+, .card__grade--VG, .card__grade--G { color: #ff8a6a; }
html[data-theme="light"] .card__grade--S, html[data-theme="light"] .card__grade--M { color: #1f6b48; }
html[data-theme="light"] .card__grade--NM { color: #3f6e1c; }
html[data-theme="light"] .card__grade--VG\+, html[data-theme="light"] .card__grade--VG { color: #b5401c; }
.back__btns { display: flex; gap: 6px; margin-top: auto; }
.back__open, .back__cmp {
  flex: 1; min-width: 0; padding: 8px 6px; border-radius: 999px; font: 600 12px/1.2 var(--ff-body);
  border: 1px solid var(--line-strong); color: inherit; background: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .back__btns { gap: 4px; }
  .back__open, .back__cmp { padding: 7px 3px; font-size: 10px; }
}
.back__open { background: var(--acid); color: var(--on-acid); border-color: var(--acid); }
.back__cmp.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* статичная разметка до загрузки витрины */
.card--static { opacity: 1; transform: none; display: block; }
.card--static .card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }

/* новые поступления — лента карточек */
.newin .carousel__nav { display: flex; }
.carousel--cards .card { flex: 0 0 auto; width: 46vw; max-width: 250px; scroll-snap-align: start; }
/* лента «Новые поступления» на телефоне не «гуляет»: после подмены серверной
   разметки на клиентскую карточки сразу видимы, без всплытия и анимации.
   Позицию прокрутки сохраняет renderNew() в app.js. */
.carousel--cards > .card {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}
/* вся обложка и название — ссылка на полноценную страницу пластинки */
.card__open { display: block; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--acid-text); }
.back__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}
/* все мини-карточки и рекомендации — тоже ссылки на страницу пластинки */
.mini__open,
.rec,
.film-rec,
.cmp__ph,
.cmp__name { text-decoration: none; }
@media (min-width: 900px) { .carousel--cards .card { width: 230px; } .newin .carousel__hint { display: none; } }

/* сцена героя: проигрыватель — кнопка, на яблоке обложка свежей пластинки */
button.deck { border: 0; padding: 0; cursor: pointer; display: block; }
button.deck:focus-visible { outline: 3px solid var(--acid); outline-offset: 6px; }
.deck__label { overflow: hidden; }
.deck__label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.deck__label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; transform: translate(-50%, -50%); border-radius: 50%; background: #140e0a; }
.hero2__deck { gap: 14px; }
.hero2__now {
  display: grid; gap: 2px; max-width: 520px; width: 100%;
  padding: 10px 16px; border-radius: 16px;
  background: rgba(18, 12, 9, 0.66); border: 1px solid rgba(247, 148, 30, 0.35); color: #f3e8d4;
  backdrop-filter: blur(10px);
}
.hero2__now i { font-style: normal; font-size: 11px; letter-spacing: 0.06em; color: var(--acid); }
.hero2__now b { font-weight: 600; }
.hero2__now button { justify-self: start; padding: 0; border: 0; background: none; color: rgba(243, 232, 212, 0.75); text-decoration: underline; font-size: 13px; }
#heroDeck.is-playing .deck__record { animation-play-state: running; }

/* шкала состояния */
.grades__scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.grade {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-content: start;
  padding: 16px; border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid var(--line);
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.grade:hover { transform: translateY(-3px); border-color: var(--acid); }
.grade__code { grid-row: span 2; font-family: var(--ff-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--acid-text); min-width: 54px; }
.grade__name b { display: block; font-weight: 700; }
.grade__name i { font-style: normal; font-size: 12px; color: var(--paper-mute); letter-spacing: 0.04em; }
.grade__text { grid-column: 2; font-size: 13.5px; color: var(--paper-dim); }
.grade__n { grid-column: 2; font: 600 13px var(--ff-cond); letter-spacing: 0.04em; color: var(--acid-text); }
.grades__note { margin-top: 16px; color: var(--paper-dim); max-width: 70ch; }
.grades__note a { color: var(--acid-text); text-decoration: underline; }

/* чистка: пять шагов в ряд на широком экране */
@media (min-width: 900px) {
  .steps__list--five { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .steps__list--five .step { border-top: 0; }
}
.steps__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* модалка: состояние, данные, сравнение копий, кнопка лайтбокса */
.modal__buy { display: flex; align-items: center; gap: 10px; }
.modal__buy .modal__price { margin-right: auto; }
.modal__cmp { border: 1px solid var(--line-strong); }
.modal__cmp.is-active { background: var(--paper); color: var(--ink); }
#modalAdd[disabled] { opacity: 0.5; cursor: not-allowed; }
.modal__media { position: relative; }
.modal__zoom {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(18, 12, 9, 0.75); color: #f3e8d4; font: 600 13px var(--ff-body); backdrop-filter: blur(6px);
}
.modal__media .pg-thumbs { position: relative; z-index: 2; }
.pg-thumb.is-active { border-color: var(--acid); }
.cond-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.cond-box__cell { padding: 12px; border-radius: var(--r-md); background: var(--ink-3); border: 1px solid var(--line); }
.cond-box__cell i { display: block; font-style: normal; font-size: 11px; letter-spacing: 0.06em; color: var(--paper-mute); }
.cond-box__cell b { display: block; font-family: var(--ff-display); font-weight: 900; font-size: 24px; color: var(--acid-text); margin: 2px 0 4px; }
.cond-box__cell span { font-size: 12.5px; color: var(--paper-dim); line-height: 1.45; }
.cond-box__raw { grid-column: 1 / -1; font-size: 12.5px; color: var(--paper-mute); }
.cond-box__raw a { color: var(--acid-text); text-decoration: underline; }
.modal__specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 16px 0; font-size: 13.5px; }
.modal__specs dt { color: var(--paper-mute); }
.modal__specs dd { margin: 0; overflow-wrap: anywhere; }
.variants__cmp { width: 100%; margin-top: 8px; padding: 10px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--acid-text); font-weight: 600; font-size: 13px; }
.variants__cmp:hover { border-color: var(--acid); }

/* сравнение */
.cart--wide { width: min(1000px, 100vw); max-width: 100vw; }
.cmp-wrap { overflow-x: auto; margin: 0 -4px; }
.cmp { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13.5px; }
.cmp th, .cmp td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 150px; }
.cmp th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 86px; background: var(--ink-2); color: var(--paper-mute); font-weight: 500; }
.cmp thead td { border-bottom: 0; }
.cmp__ph { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; background: var(--ink-3); }
.cmp__ph img { width: 100%; height: 100%; object-fit: cover; }
.cmp__name { display: block; margin-top: 8px; padding: 0; text-align: left; font-weight: 600; line-height: 1.3; }
.cmp .is-best { color: var(--acid-text); font-weight: 700; }
.cmp__note { margin: 12px 0; font-size: 12.5px; color: var(--paper-mute); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* лайтбокс: оригиналы фото с зумом и перетаскиванием */
.rev-lightbox { display: grid; grid-template-rows: 1fr auto auto; padding: 0; opacity: 0; transition: opacity 0.2s ease; background: rgba(10, 7, 5, 0.96); }
.rev-lightbox.is-open { opacity: 1; }
.rev-lightbox__stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; min-height: 0; }
.rev-lightbox__stage img { max-width: calc(100vw - 120px); max-height: calc(100vh - 150px); cursor: inherit; user-select: none; -webkit-user-drag: none; transition: transform 0.25s var(--ease); background: transparent; }
.rev-lightbox.is-zoom .rev-lightbox__stage { cursor: grab; }
.rev-lightbox.is-zoom .rev-lightbox__stage img { transition: none; }
.rev-lightbox.is-zoom .rev-lightbox__nav { opacity: 0; pointer-events: none; }
.rev-lightbox__bar { position: static; display: flex; justify-content: center; gap: 16px; padding: 8px 16px; color: #d9c8ae; font-size: 13px; transform: none; background: none; }
.rev-lightbox__hint { color: #9b876d; }
.rev-lightbox__thumbs { display: flex; justify-content: center; gap: 6px; padding: 0 16px 16px; overflow-x: auto; }
.rev-lightbox__thumbs button { flex: none; width: 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; opacity: 0.55; }
.rev-lightbox__thumbs button.is-active { opacity: 1; border-color: var(--acid); }
.rev-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .rev-lightbox__stage img { max-width: 100vw; max-height: calc(100vh - 150px); border-radius: 0; }
  .rev-lightbox__hint { display: none; }
}

/* внутренние страницы и WooCommerce */
.page-section { padding-top: calc(var(--header-h) + 30px); min-height: 60vh; }
.prose { max-width: 72ch; color: var(--paper-dim); font-size: 16px; line-height: 1.65; }
.prose h2 { font-family: var(--ff-display); font-weight: 800; font-size: 22px; color: var(--paper); margin: 1.4em 0 0.5em; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose a { color: var(--acid-text); text-decoration: underline; }
.prose .lead { font-size: 19px; color: var(--paper); }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 20px; }
.specs dt { color: var(--paper-mute); }
.specs dd { margin: 0; color: var(--paper); }
.seo-product { padding-top: calc(var(--header-h) + 20px); }
.crumbs { font-size: 13px; color: var(--paper-mute); margin-bottom: 14px; }
/* =======================================================================
   Карточка товара: журнальный разворот
   Большая витрина слева, данные и покупка справа, ниже — характеристики
   и короткий блок «Послушать». Ничего не растягивается: фото вписаны
   в сцену через object-fit: contain.
   ======================================================================= */
.seo-product {
  max-width: 1360px;
  padding-top: calc(var(--header-h, 68px) + 18px);
  padding-bottom: clamp(48px, 6vw, 84px);
}
.seo-product .crumbs { margin-bottom: 14px; }

.rv-pfb {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(24px, 4vw, 52px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 250, 240, 0.94), rgba(247, 238, 220, 0.72));
  box-shadow: 0 26px 64px rgba(42, 26, 16, 0.13);
}
html[data-theme="dark"] .rv-pfb {
  background: linear-gradient(150deg, rgba(43, 29, 19, 0.96), rgba(26, 16, 9, 0.9));
  border-color: rgba(243, 232, 212, 0.12);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.42);
}

.rv-pfb__gallery {
  position: sticky;
  top: calc(var(--header-h, 68px) + 22px);
  min-width: 0;
  align-self: start;
}
.rv-pfb__stage {
  position: relative;
  padding: clamp(10px, 2vw, 18px);
  border-radius: 20px;
  background: linear-gradient(160deg, #fcf5e6, #efe2c8);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 38px rgba(42, 26, 16, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .rv-pfb__stage {
  background: linear-gradient(160deg, #2b1d13, #1a1009);
  border-color: rgba(243, 232, 212, 0.09);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(243, 232, 212, 0.07);
}
.rv-pfb__stage-img {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #f7edda;
}
html[data-theme="dark"] .rv-pfb__stage-img { background: #120b06; }
.rv-pfb__main {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
  transition: opacity 0.22s ease;
}
.rv-pfb__main.is-switching { opacity: 0; }
.rv-pfb__noimg {
  font: 800 30px/1 var(--ff-display);
  color: var(--paper-mute);
  letter-spacing: 0.12em;
}
.rv-pfb__badge {
  position: absolute;
  z-index: 2;
  top: clamp(16px, 2.6vw, 24px);
  left: clamp(16px, 2.6vw, 24px);
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(18, 12, 9, 0.64);
  color: #f3e8d4;
  font: 600 9.5px/1 var(--ff-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rv-pfb__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
.rv-pfb__arrow {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.rv-pfb__arrow:hover { background: rgba(var(--tint-rgb), 0.08); border-color: var(--paper-dim); }
.rv-pfb__arrow:active { transform: scale(0.95); }
.rv-pfb__counter {
  min-width: 54px;
  text-align: center;
  font: 600 12px/1 var(--ff-body);
  color: var(--paper-mute);
}
.rv-pfb__counter b { color: var(--paper); }
.rv-pfb__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 2px 2px 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rv-pfb__thumbs::-webkit-scrollbar { display: none; }
.rv-pfb__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(160deg, #fcf5e6, #efe2c8);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.rv-pfb__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.rv-pfb__thumb:hover { transform: translateY(-1px); border-color: var(--paper-dim); }
.rv-pfb__thumb.is-active {
  border-color: var(--acid);
  box-shadow: 0 0 0 2px rgba(247, 148, 30, 0.22);
}
html[data-theme="dark"] .rv-pfb__thumb { background: linear-gradient(160deg, #2b1d13, #1a1009); }

.rv-pfb__info { min-width: 0; padding-top: 4px; }
.rv-pfb__eyebrow {
  margin: 0 0 10px;
  font: 600 10.5px/1 var(--ff-cond);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acid-text);
}
.rv-pfb__title {
  margin: 0;
  font: 800 clamp(28px, 3.2vw, 46px)/1.05 var(--ff-display);
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--paper);
  overflow-wrap: break-word;
  hyphens: auto;
}
.rv-pfb__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}
.rv-pfb__price {
  margin: 0;
  font: 800 clamp(24px, 2.4vw, 32px)/1 var(--ff-display);
  color: var(--paper);
}
.rv-pfb__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.rv-pfb__price del { font: 400 15px/1 var(--ff-body); color: var(--paper-mute); margin-right: 8px; }
.rv-pfb__price ins { text-decoration: none; }
.rv-pfb__listen[hidden] { display: none !important; }
.rv-pfb__stock {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(143, 174, 136, 0.16);
  color: #4e6b4a;
  font: 600 10.5px/1 var(--ff-body);
  letter-spacing: 0.04em;
}
html[data-theme="dark"] .rv-pfb__stock { color: #a9bfa2; background: rgba(143, 174, 136, 0.18); }

.rv-pfb__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.rv-pfb__buy { flex: 1 1 220px; margin: 0; }
.rv-pfb__buy .btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font: 600 15px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
.rv-pfb__actions > .btn {
  flex: 1 1 170px;
  min-height: 52px;
  border-radius: 14px;
  font: 600 14px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
.rv-pfb__sold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-mute);
}

.rv-pfb__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.rv-pfb__perks li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--paper-dim);
}
.rv-pfb__perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
}

.rv-pfb__specs,
.rv-pfb__tracks-wrap {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rv-pfb__specs h2,
.rv-pfb__tracks-wrap h2 {
  margin: 0 0 12px;
  font: 600 10.5px/1 var(--ff-cond);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.rv-pfb__specs dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.rv-pfb__specs dt { color: var(--paper-mute); }
.rv-pfb__specs dd { margin: 0; color: var(--paper); }

.rv-pfb__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper-dim);
}
.rv-pfb__desc p { margin: 0 0 0.8em; }
.rv-pfb__desc p:last-child { margin-bottom: 0; }
.rv-pfb__desc--full {
  max-height: 210px;
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

/* треклист внутри товара — компактная газетная колонка */
.rv-pfb__tracks {
  max-height: 310px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.rv-pfb__tracks-load {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--paper-mute);
}

.rv-pfb__tracks .tl__head {
  margin-bottom: 8px;
  font-size: 13px;
}
.rv-pfb__tracks .tl__sum { font-size: 11.5px; }
.rv-pfb__tracks .tl__side-name { font-size: 12px; }
.rv-pfb__tracks .tl__list { max-height: none; overflow: visible; padding-right: 0; }
.rv-pfb__tracks .tl__track { font-size: 13px; }
.rv-pfb__tracks .tl__note,
.rv-pfb__tracks .tl__warn { font-size: 11.5px; line-height: 1.5; }
.rv-pfb__tracks .tl__warn { padding: 10px 12px; margin-top: 10px; }

@media (max-width: 1023px) {
  .rv-pfb { max-width: 980px; gap: 24px; }
  .rv-pfb__gallery { position: static; }
}
@media (max-width: 767px) {
  .seo-product { padding-top: calc(var(--header-h, 68px) + 12px); padding-bottom: 56px; }
  .rv-pfb {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    padding: 12px;
    border-radius: 20px;
    gap: 18px;
  }
  .rv-pfb__stage { padding: 8px; border-radius: 14px; }
  .rv-pfb__stage-img { aspect-ratio: 1 / 1; }
  .rv-pfb__badge { top: 12px; left: 12px; }
  .rv-pfb__title { font-size: clamp(25px, 8vw, 34px); }
  .rv-pfb__price { font-size: 25px; }
  .rv-pfb__actions { gap: 8px; }
  .rv-pfb__buy, .rv-pfb__actions > .btn { flex: 1 1 100%; }
  .rv-pfb__perks { gap: 6px 12px; }
  .rv-pfb__desc--full { max-height: 180px; }
  .rv-pfb__tracks { max-height: 260px; padding-right: 2px; }
}
@media (max-width: 420px) {
  .rv-pfb { padding: 10px; }
  .rv-pfb__thumbs { gap: 6px; }
  .rv-pfb__thumb { flex-basis: 56px; width: 56px; height: 56px; }
}

.page-section--flow .woocommerce { max-width: 1100px; color: var(--paper); }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table img { width: 64px; border-radius: 8px; }
.woocommerce a.remove { color: var(--red) !important; font-size: 22px; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--paper); font: 600 15px var(--ff-body); cursor: pointer;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce a.checkout-button, .woocommerce #place_order {
  background: var(--acid) !important; color: var(--on-acid) !important; border-color: var(--acid) !important;
}
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { opacity: 0.5; padding: 0 22px; color: var(--paper); }
.woocommerce form .form-row { margin: 0 0 14px; float: none; width: auto; }
.woocommerce form .form-row label { display: block; margin-bottom: 4px; font-weight: 500; color: var(--paper-dim); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .quantity .qty, .woocommerce .coupon .input-text {
  width: 100%; min-height: 46px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--ink-2); color: var(--paper);
}
.woocommerce form .form-row textarea { min-height: 110px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--acid); color: var(--paper); }
.woocommerce-error { border-left-color: var(--red); }
.woocommerce .col2-set { display: grid; grid-template-columns: 1fr; gap: 8px; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: auto; max-width: none; }
.woocommerce .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.woocommerce .woocommerce-billing-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 0 32px; align-items: start; }
.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: span 2; }
.woocommerce-checkout #order_review_heading { grid-column: 2; margin: 0 0 10px; font-family: var(--ff-display); font-size: 20px; }
.woocommerce-checkout #order_review { grid-column: 2; position: sticky; top: calc(var(--header-h) + 20px); padding: 16px; border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid var(--line); }
.woocommerce-checkout h3, .woocommerce .cart_totals h2 { font-family: var(--ff-display); font-weight: 800; font-size: 20px; margin-bottom: 12px; }
.woocommerce-checkout #payment { background: transparent; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; }
.woocommerce div.payment_box, .woocommerce-checkout #payment div.payment_box { background: var(--ink-3) !important; color: var(--paper-dim) !important; border-radius: var(--r-md); padding: 10px 14px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; min-height: 54px; font-size: 17px; }
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 28px; align-items: start; }
.woocommerce-cart .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; }
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: auto; padding: 16px; border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid var(--line); }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; }
.woocommerce .coupon { display: flex; gap: 8px; align-items: center; }
.woocommerce .coupon .input-text { min-width: 150px; }
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout, .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review, .woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals { grid-column: 1; grid-row: auto; position: static; }
  .woocommerce .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce table.shop_table_responsive thead { display: none; }
}

/* магазин: три кадра */
@media (min-width: 900px) {
  .atmo__grid { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 380px; }
  .atmo__grid .atmo__cell--wide { grid-column: auto; }
}

/* фото клиента показываем целиком: конверт и пластинка не обрезаются */
.modal__media .modal-main-img { object-fit: contain; background: #e9e6df; }
.modal__media .card__art { opacity: 0; }
.modal__media { display: flex; flex-direction: column; }
.modal__media .card__art { position: absolute; inset: 0; z-index: 0; }
.modal__media .modal-main-img { flex: 1 1 auto; min-height: 0; height: auto; }
.modal__media .pg-thumbs { flex: none; margin: 0; padding: 10px; background: var(--ink-3); max-height: none; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
@media (min-width: 900px) {
  .modal__media { position: sticky; top: 0; height: min(86vh, 760px); }
}

/* =======================================================================
   СВЕТЛАЯ ТЕМА — основная. По мотивам референсов 60–70-х:
   кремовая бумага, обои с «огурцом», закат из полос как на рекламе Sony,
   ореховый шпон проигрывателя. Тёмная — только по кнопке.
   ======================================================================= */
html[data-theme="light"] {
  --ink: #f4ead6;
  --ink-2: #fbf4e6;
  --ink-3: #f1e3c6;
  --ink-4: #fffaf0;
  --paper: #2a1a10;
  --paper-dim: #5e4330;
  --paper-mute: #8a6d52;
  --line: rgba(74, 47, 30, 0.16);
  --line-strong: rgba(74, 47, 30, 0.32);
  --sun-1: #f7941e;
  --sun-2: #e5482c;
  --sun-3: #e3a72f;
  --sun-4: #7a3e1d;
}
html[data-theme="light"] body { background-color: #f4ead6; }

/* герой: светлая комната и закат из полос за проигрывателем */
html[data-theme="light"] .hero2 { --room: #f4ead6; --warm-white: #2a1a10; background: #f4ead6; color: #2a1a10; }
html[data-theme="light"] .hero2__photo,
html[data-theme="light"] .hero2__lamp { display: none; }
html[data-theme="light"] .hero2__shade {
  background:
    repeating-radial-gradient(circle at 78% 112%, var(--sun-1) 0 7%, transparent 7% 8.2%, var(--sun-2) 8.2% 15%, transparent 15% 16.2%, var(--sun-3) 16.2% 23%, transparent 23% 24.2%, var(--sun-4) 24.2% 31%, transparent 31% 100%);
  -webkit-mask: radial-gradient(circle at 78% 112%, #000 0 31%, transparent 31.2%);
          mask: radial-gradient(circle at 78% 112%, #000 0 31%, transparent 31.2%);
  opacity: 0.95;
  animation: sunUp 1.4s var(--ease-out) both;
}
@keyframes sunUp { from { transform: translateY(18%); opacity: 0; } to { transform: none; opacity: 0.95; } }
html[data-theme="light"] .hero2__scene::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d9c39a' stroke-width='1.4' opacity='.55'%3E%3Cpath d='M60 6c22 0 30 24 14 36-10 8-10 20 0 28 16 12 8 36-14 36S30 82 46 70c10-8 10-20 0-28C30 30 38 6 60 6Z'/%3E%3Ccircle cx='60' cy='56' r='5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px;
}
html[data-theme="light"] .hero2__title { color: #2a1a10; text-shadow: none; }
html[data-theme="light"] .hero2__kicker,
html[data-theme="light"] .hero2__sub { color: #5e4330; }
html[data-theme="light"] .hero2__facts { border-top-color: rgba(74, 47, 30, 0.18); }
html[data-theme="light"] .hero2__facts b { color: #2a1a10; }
html[data-theme="light"] .hero2__facts span { color: #8a6d52; }
html[data-theme="light"] .hero2__ghost { color: #2a1a10; border-color: rgba(42, 26, 16, 0.35); background: rgba(255, 250, 240, 0.6); }
html[data-theme="light"] .hero2__ghost:hover { color: #b25a00; border-color: #f7941e; }
html[data-theme="light"] .hero2__now { background: rgba(255, 250, 240, 0.85); color: #2a1a10; border-color: rgba(247, 148, 30, 0.45); }
html[data-theme="light"] .hero2__now button { color: #5e4330; }
html[data-theme="light"] .deck { box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.18), inset 0 -14px 30px rgba(0, 0, 0, 0.4), 0 40px 60px -30px rgba(74, 47, 30, 0.7); }
@media (max-width: 959px) {
  html[data-theme="light"] .hero2__shade {
    background: repeating-radial-gradient(circle at 50% 108%, var(--sun-1) 0 9%, transparent 9% 10.5%, var(--sun-2) 10.5% 19%, transparent 19% 20.5%, var(--sun-3) 20.5% 29%, transparent 29% 30.5%, var(--sun-4) 30.5% 39%, transparent 39% 100%);
    -webkit-mask: radial-gradient(circle at 50% 108%, #000 0 39%, transparent 39.2%);
            mask: radial-gradient(circle at 50% 108%, #000 0 39%, transparent 39.2%);
  }
}

/* шапка поверх светлого героя — тёмный текст */
html[data-theme="light"] .header:not(.is-solid) .header__link { color: rgba(42, 26, 16, 0.75); }
html[data-theme="light"] .header:not(.is-solid) .header__link:hover { color: #2a1a10; }
html[data-theme="light"] .header:not(.is-solid) .logo,
html[data-theme="light"] .header:not(.is-solid) .icon-btn { color: #2a1a10; }
html[data-theme="light"] .header.is-solid { background: rgba(251, 244, 230, 0.9); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(74, 47, 30, 0.12); }
html[data-theme="light"] .tabbar { background: rgba(251, 244, 230, 0.92); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 rgba(74, 47, 30, 0.12); }

/* бегущая строка — полоса горчицы с коричневым текстом */
html[data-theme="light"] .ticker { background: #e3a72f; color: #2a1a10; border-color: #7a3e1d; }
html[data-theme="light"] .ticker i { color: #e5482c; }

/* подвал: без цветной полосы, больше воздуха до текста */
.footer { padding-top: 64px; border-top: 0; }
.header__progress { transition: width 0.1s linear, opacity 0.25s ease; }
html[data-theme="light"] .footer {
  background: #2a1a10;
  color: #f3e8d4;
  border-top: 0;
  padding-top: 64px;
}
html[data-theme="light"] .footer::before { display: none; }
.footer__inner { gap: 34px 28px; }
.footer__brand p { margin-top: 14px; line-height: 1.7; }
.footer__bottom { margin-top: 30px; }
html[data-theme="light"] .footer a, html[data-theme="light"] .footer h3 { color: #f3e8d4; }
html[data-theme="light"] .footer .footer__small, html[data-theme="light"] .footer p { color: #c9b496; }
html[data-theme="light"] .manifesto { background: #7a3e1d; color: #f8ecd6; }
html[data-theme="light"] .manifesto__title, html[data-theme="light"] .manifesto__text, html[data-theme="light"] .stat b { color: #fbf1df; }
html[data-theme="light"] .manifesto__text--dim, html[data-theme="light"] .stat span { color: #e8cfa8; }
html[data-theme="light"] .manifesto__title em { color: #f7b04a; }
html[data-theme="light"] .manifesto__bg { opacity: 0.35; }

/* карточки на бумаге: белый конверт с тёплой тенью */
html[data-theme="light"] .card__sleeve,
html[data-theme="light"] .card__media { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 28px -18px rgba(74, 47, 30, 0.55); }
html[data-theme="light"] .grade { background: #fbf4e6; }
html[data-theme="light"] .cond-box__cell { background: #fffaf0; }
html[data-theme="light"] .collection { background: #fbf4e6; }
html[data-theme="light"] .collection.is-active { background: #2a1a10; color: #f8ecd6; }

/* предупреждение о фрагментах */
.tl__warn { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(247, 148, 30, 0.1); border: 1px solid rgba(247, 148, 30, 0.35); font-size: 12.5px; line-height: 1.5; color: var(--paper-dim); }
.tl__warn b { color: var(--paper); }

/* галерея в карточке: все миниатюры видны сразу под главным фото */
.modal__media .pg-thumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px; margin: 0; max-height: none; overflow: visible;
}
.modal__media .pg-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; border: 2px solid var(--line); background: var(--ink-3); }
.modal__media .pg-thumb.is-active { border-color: var(--acid); }
.modal__media .pg-thumb img { opacity: 1; position: static; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .modal__media { aspect-ratio: auto !important; max-height: none !important; height: auto; overflow: visible; }
  .modal__media .modal-main-img { aspect-ratio: 1 / 1; width: 100%; max-height: 56svh; flex: none; }
  .modal__media .pg-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .modal__media .pg-thumb { flex: 0 0 60px; width: 60px; height: 60px; }
}
@media (min-width: 900px) {
  .modal__media .pg-thumbs { max-height: 168px; overflow-y: auto; }
}

/* =================== магазин на Чистых прудах =================== */
.shop__rating {
  display: grid; justify-items: start; gap: 2px; padding: 12px 18px; border-radius: var(--r-lg);
  background: var(--ink-2); border: 1px solid var(--line); text-decoration: none; color: var(--paper);
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.shop__rating:hover { transform: translateY(-2px); border-color: var(--acid); }
.shop__rating b { font-family: var(--ff-display); font-weight: 900; font-size: 34px; line-height: 1; }
.shop__stars, .review__stars { display: inline-flex; gap: 2px; color: #f2b01e; }
.shop__rating i { font-style: normal; font-size: 12.5px; color: var(--paper-mute); }

.shop__photos { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.shop__ph { position: relative; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-3); cursor: zoom-in; }
.shop__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.shop__ph:hover img { transform: scale(1.05); }
.shop__ph span {
  position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: left;
  font: 600 12.5px/1.3 var(--ff-body); color: #fbf1df; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s;
}
.shop__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 12, 8, 0.6)); opacity: 0; transition: opacity 0.3s; }
.shop__ph:hover span, .shop__ph:focus-visible span { opacity: 1; transform: none; z-index: 1; }
.shop__ph:hover::after { opacity: 1; }
.shop__ph--0 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.shop__ph--5 { display: none; }
.shop__ph--4 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .shop__photos { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; }
  .shop__ph, .shop__ph--4 { aspect-ratio: auto; grid-column: auto; }
  .shop__ph--0 { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
}
.shop__door { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin: 4px 0 16px; padding: 0; border: 0; text-align: left; background: none; color: var(--paper-dim); font-size: 13px; cursor: zoom-in; }
.shop__door img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-md); }

.shop__visit { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .shop__visit { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.shop__card { padding: 22px; border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid var(--line); }
.shop__card h3, .shop__reviews h3 { font-family: var(--ff-display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 14px; }
.shop__card .specs a { color: var(--acid-text); }
.shop__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.shop__map { position: relative; min-height: 340px; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3); border: 1px solid var(--line); }
.shop__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shop__map-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper-mute); font-weight: 600; }

.shop__reviews { margin-top: 30px; }
.shop__reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop__reviews .carousel__nav { display: flex; }
.shop__rev-track { list-style: none; }
.review {
  flex: 0 0 auto; width: min(82vw, 360px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-lg);
  background: var(--ink-2); border: 1px solid var(--line);
}
.review blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--paper); }
.review blockquote::before { content: "«"; } .review blockquote::after { content: "»"; }
.review__who { margin-top: auto; display: grid; gap: 2px; font-size: 13px; }
.review__who span { color: var(--paper-mute); }
html[data-theme="light"] .review, html[data-theme="light"] .shop__card, html[data-theme="light"] .shop__rating { background: #fffaf0; box-shadow: 0 14px 28px -22px rgba(74, 47, 30, 0.6); }

/* шкала состояния — только оценка, название и сколько в наличии */
.grades__scale--short { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grades__scale--short .grade { grid-template-columns: auto 1fr; align-items: center; }
.grades__scale--short .grade__n { grid-column: 2; }
.section__sub a, .filter-hint a { color: var(--acid-text); text-decoration: underline; }
.grades__scale--short { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 1100px) { .grades__scale--short { grid-template-columns: repeat(7, 1fr); } .grades__scale--short .grade { grid-template-columns: 1fr; } .grades__scale--short .grade__code { grid-row: auto; } .grades__scale--short .grade__n { grid-column: 1; } }

/* =======================================================================
   АДАПТАЦИЯ ПОД ЛЮБОЙ ЭКРАН (ноутбуки 1024–1440, планшеты, телефоны)
   ======================================================================= */

/* широкий шрифт заголовков с плотной разрядкой «съедал» пробелы:
   «С ИСТОРИЕЙ» читалось как «СИСТОРИЕЙ» — возвращаем воздух между словами */
.hero2__title, .section__title, .manifesto__title, .zp__title, .shop__card h3, .shop__reviews h3, .modal__title, .grade__name b {
  word-spacing: 0.16em;
}
.hero2__title { letter-spacing: -0.03em; }
.section__title { letter-spacing: -0.02em; }

/* обычный текст: длинные слова и названия не вылезают за блок */
p, li, dd, dt, blockquote, .card__title, .card__artist, .modal__artist, .cart-item__title { overflow-wrap: break-word; }
.prose, .section__sub, .hero2__sub, .review blockquote, .zp__text { hyphens: manual; }

/* меню: верхнее — только когда помещается целиком, иначе нижняя панель */
@media (min-width: 768px) and (max-width: 1099px) {
  .header__nav { display: none !important; }
  .tabbar { display: grid !important; }
  body { padding-bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1100px) {
  .tabbar { display: none !important; }
  body { padding-bottom: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .header__nav { gap: 16px; }
  .header__link { font-size: 12px; letter-spacing: 0.06em; }
}

/* невысокие ноутбуки (1280×720, 1366×768): сцена героя помещается в экран */
@media (min-width: 960px) and (max-height: 820px) {
  .hero2 { min-height: auto; padding-top: calc(var(--header-h) + 22px); padding-bottom: 44px; }
  .hero2__title { font-size: clamp(40px, 5.4vw, 74px); }
  .hero2__sub { margin-top: 16px; }
  .hero2__actions { margin-top: 20px; }
  .hero2__facts { margin-top: 24px; padding-top: 14px; }
  .deck { width: min(100%, 470px); }
}
/* ноутбук 1024: две колонки героя без наложений */
@media (min-width: 960px) and (max-width: 1199px) {
  .hero2__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px; }
  .hero2__title { font-size: clamp(40px, 5.6vw, 64px); }
  .hero2__sub { font-size: 15px; }
}

/* шкала состояния: карточки сами подстраивают число колонок */
.grades__scale--short { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) !important; }
.grades__scale--short .grade { grid-template-columns: 1fr !important; gap: 4px; }
.grades__scale--short .grade__code { grid-row: auto !important; min-width: 0; font-size: clamp(24px, 2.4vw, 30px); }
.grades__scale--short .grade__n { grid-column: 1 !important; }
.grade__name b { overflow-wrap: break-word; }
@media (min-width: 1280px) { .grades__scale--short { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }

/* подборки: на ноутбуке 1024 — три в ряд, без сжатого текста */
@media (min-width: 768px) and (max-width: 1199px) {
  .collections { grid-auto-flow: row !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible; }
}
.collection b, .collection i { overflow-wrap: break-word; }

/* кнопки с длинным текстом переносятся, а не вылезают */
.btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.shop__btns .btn { flex: 1 1 auto; }
@media (max-width: 560px) { .shop__btns { flex-direction: column; } .shop__btns .btn { width: 100%; } }

/* шапка на узких экранах: иконки не вылезают за край */
.header__actions { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 380px) { .header__actions { gap: 2px; } .header__actions .icon-btn { width: 38px; height: 38px; } .logo__sub { display: none; } }

/* карточки товара: длинные названия в две строки, цена на месте */
.card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* карточка пластинки на ноутбуке: модалка не выше экрана */
@media (min-width: 900px) and (max-height: 820px) {
  .modal__card { max-height: calc(100vh - 40px); }
  .modal__media { height: calc(100vh - 40px) !important; }
}

/* журнал на средних экранах не шире окна */
.zine__stage { max-width: 100%; }

/* подзаголовки секций — чуть шире строка, без рваных переносов */
.section__sub { max-width: 60ch; }
html[data-theme="light"] .toolbar { background: rgba(244, 234, 214, 0.94); }
@media (min-width: 1024px) { html[data-theme="light"] .toolbar { background: transparent; } }

/* --- узкие телефоны: слово «Пластинки» в герое не влезало и обрезалось (360 px) --- */
@media (max-width: 420px) {
  .hero2__title {
    font-size: min(38px, 9.4vw);
    letter-spacing: -0.02em;
  }
}

/* =======================================================================
   ЧИТАЕМОСТЬ ТЕКСТА — правки 25.10.2026
   ======================================================================= */

/* 1. Герой. Было: line-height 0.92 + overflow:hidden на строках — буквы
   обрезались сверху и снизу, а «с историей» переносилось внутри строки.
   Теперь строки не клипаются, анимация — мягкое появление без обрезки. */
.hero2__line {
  overflow: visible;
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
}
.hero2__line > span {
  display: inline-block;
  max-width: 100%;
  animation: rvLineIn .55s cubic-bezier(.2, .8, .2, 1) both;
}
.hero2__line:nth-child(1) > span { animation-delay: .16s; }
.hero2__line:nth-child(2) > span { animation-delay: .28s; }
.hero2__line:nth-child(3) > span { animation-delay: .4s; }
@keyframes rvLineIn {
  from { opacity: 0; transform: translateY(.24em); }
  to   { opacity: 1; transform: none; }
}

.hero2__title {
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  word-spacing: 0.04em;
}

@media (max-width: 900px) {
  .hero2__title { font-size: clamp(28px, 7.4vw, 46px); line-height: 1.14; }
}
@media (max-width: 420px) {
  .hero2__title { font-size: clamp(26px, 8.4vw, 34px); line-height: 1.16; }
}

/* 2. Крупные заголовки: воздух между строками, чтобы не резались выносные
   буквы (у, р, ц) и слова не слипались */
.section__title,
.zp__title,
.manifesto__title,
.modal__title,
.shop__card h3,
.shop__reviews h3 {
  line-height: 1.08;
  letter-spacing: -0.012em;
  word-spacing: 0.06em;
  text-wrap: balance;
}

/* 3. Служебный текст не мельче 12px — читается на телефоне и в каталоге */
.card__artist, .card__meta, .card__fmt, .card__grade, .card__year, .card__nph,
.card__edition, .card__editions, .chip, .chip__n, .catalog__count, .count__ed,
.carousel__hint, .filter-hint, legend, .zp__text, .zp__kicker, .zp__folio,
.footer__small, .footer__bottom, .footer h3, .footer a, .footer p, .footer li,
.cart__note, .cart__row, .format-tab, .back__open, .back__cmp, .zine__hint,
.hero2__facts span, .stat span, .grade__n, .grades__hint {
  font-size: max(12px, 0.75rem);
}

/* 4. Основной текст: комфортная строка без «рваных» переносов */
.hero2__sub, .section__sub, .manifesto__text, .prose p, .zp__text {
  line-height: 1.62;
  text-wrap: pretty;
}

/* 5. Кнопки: чуть крупнее подпись, ровная высота строки */
.btn { line-height: 1.25; }

/* 6. Контраст мелких подписей на кремовом фоне: было 3.5–4.4 при норме 4.5.
   Затемняем приглушённый и акцентный цвета — теперь 5–6:1 */
html[data-theme="light"] {
  --paper-mute: #6f5238;
  --acid-text: #9d4e00;
}

/* 7. Точечные подписи: на кремовом — темнее, в тёмном подвале — светлее */
html[data-theme="light"] .hero2__facts span,
html[data-theme="light"] .stat span,
html[data-theme="light"] .card__year,
html[data-theme="light"] .card__fmt { color: var(--paper-dim); }

.footer__small,
.footer__bottom,
.footer__note,
.footer .footer__small a { color: #cdb99e; }

/* 8. Тёмные блоки в светлой теме: манифест, журнал, подвал — светлый текст.
   До правки подписи в манифесте были тёмно-коричневыми на коричневом (1.09:1),
   а слово «звучать» — тёмно-оранжевым на коричневом (1.4:1). */
html[data-theme="light"] .manifesto .stat span { color: #e4cfae; }
html[data-theme="light"] .manifesto .stat b { color: #fbf1df; }
html[data-theme="light"] .manifesto__text { color: #f7ecd8; }
html[data-theme="light"] .manifesto__title em { color: #ffb347; }

html[data-theme="light"] .footer__small,
html[data-theme="light"] .footer__bottom,
html[data-theme="light"] .footer p,
html[data-theme="light"] .footer li { color: #cdb99e; }

html[data-theme="light"] .zp__kicker { color: #e9d3ab; }

/* 9. Журнал: светлый «кикер» нужен только на чёрной обложке.
   На светлых страницах возвращаем исходный --mute-z (5.7:1), на оранжевой — тёмный */
html[data-theme="light"] .zp:not(.zp--cover):not(.zp--back) .zp__kicker { color: var(--mute-z); }
html[data-theme="light"] .zp--cover .zp__kicker { color: #ffc078; }
html[data-theme="light"] .zp--back .zp__kicker { color: #2a1a10; }

/* Подвал: базовое правило в styles.css помечено !important — перебиваем так же */
html[data-theme="light"] .footer .footer__small,
html[data-theme="light"] .footer .footer__bottom { color: #cdb99e !important; }

/* 10. Меню в шапке: было 75 % прозрачности — на кремовом фоне читалось вяло */
html[data-theme="light"] .header__link { color: rgba(42, 26, 16, 0.9); }
html[data-theme="light"] .header__link:hover,
html[data-theme="light"] .header__link.is-active { color: #2a1a10; }

/* 11. Телефон: декоративная «волна» заката перекрывала подписи под цифрами */
@media (max-width: 900px) {
  .hero2__inner { position: relative; z-index: 2; }
  .hero2__facts { position: relative; z-index: 3; padding-bottom: 10px; background: none; }
}

/* 12. Мобильные детали (25.10.2026):
   — подчёркивание у «звучать» шло по буквам: опускаем под строку;
   — цифры и подписи в герое тонули на коричневой волне: даём подложку цвета бумаги */
.manifesto__title em { padding-bottom: 0.06em; }
.manifesto__title em::after { bottom: -0.015em; height: 0.05em; }

@media (max-width: 900px) {
  .hero2__facts {
    background: var(--ink);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 20px rgba(74, 47, 30, 0.10);
  }
}

/* 13. Манифест на телефоне: слово «ПЛАСТИНКА» не влезало и резалось краем секции */
@media (max-width: 900px) {
  .manifesto__title { font-size: clamp(26px, 9.8vw, 42px); line-height: 1.06; }
}

/* 14. Карточка с цифрами в герое: кремовый был почти как фон страницы.
   Затемняем подложку и усиливаем текст — карточка заметнее, цифры контрастнее.
   Контраст: подписи #4a3324 на #e8d6b4 → 8.2:1, цифры #2a1a10 → 11:1 */
@media (max-width: 900px) {
  html[data-theme="light"] .hero2__facts {
    background: #e8d6b4;
    border: 1px solid rgba(74, 47, 30, 0.22);
    box-shadow: 0 10px 24px rgba(74, 47, 30, 0.16);
  }
  html[data-theme="light"] .hero2__facts b { color: #2a1a10; }
  html[data-theme="light"] .hero2__facts span { color: #4a3324; }
}

/* =======================================================================
   15. Манифест в палитре первого блока + отступы и переносы (25.10.2026)
   Было: коричневая плашка #7a3e1d с кремовым текстом — цвета спорили
   с кремовым героем, а слово «ПЛАСТИНКА» упиралось в край.
   ======================================================================= */
html[data-theme="light"] .manifesto {
  background: #f4ead6;                 /* та же бумага, что в герое */
  color: #2a1a10;
  border-top: 1px solid rgba(74, 47, 30, 0.16);
  border-bottom: 1px solid rgba(74, 47, 30, 0.16);
}
html[data-theme="light"] .manifesto__title { color: #2a1a10; }
html[data-theme="light"] .manifesto__title em { color: #a24c00; }
html[data-theme="light"] .manifesto__title em::after { background: #d8552c; }
html[data-theme="light"] .manifesto__text { color: #4a3324; }
html[data-theme="light"] .manifesto__text--dim { color: #5e4330; }
html[data-theme="light"] .manifesto .stat b { color: #2a1a10; }
html[data-theme="light"] .manifesto .stat span { color: #4a3324; }
html[data-theme="light"] .manifesto .stat { border-top-color: rgba(74, 47, 30, 0.16); }

/* заголовок не режется ни на одной ширине */
.manifesto__title {
  font-size: clamp(28px, 7.6vw, 92px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  padding-bottom: 0.06em;
}
@media (max-width: 900px) {
  .manifesto__title { font-size: clamp(24px, 8vw, 38px); }
}

/* воздух по краям секции: текст не липнет к границам */
.manifesto { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.manifesto__inner { padding-bottom: 10px; }

/* подвал: после полосы нужен отступ, иначе контент уходит под нижнюю панель */
@media (max-width: 900px) {
  .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .footer__bottom { padding-bottom: 8px; }
}

/* =======================================================================
   16. Манифест: палитра не зависит от переключателя темы (25.10.2026)
   Почему на десктопе правки «не видны»: переключатель темы хранит выбор
   в localStorage (THEME_KEY) и ставит html[data-theme="dark"]. Все мои
   правила были написаны через html[data-theme="light"], поэтому на компе
   блок оставался бетонным, а на телефоне (светлая тема) — кремовым.
   Теперь палитра задана для любой темы.
   ======================================================================= */
html[data-theme] .manifesto,
html:not([data-theme]) .manifesto {
  background-color: #f4ead6;                                   /* бумага героя */
  background-image: repeating-linear-gradient(0deg, rgba(74, 47, 30, 0.045) 0 1px, transparent 1px 6px);
  color: #2a1a10;
  border-top: 1px solid rgba(74, 47, 30, 0.16);
  border-bottom: 1px solid rgba(74, 47, 30, 0.16);
}
/* бетонная/стеклянная подложка в двух темах разная — на кремовом фоне не нужна */
html[data-theme] .manifesto__bg,
html:not([data-theme]) .manifesto__bg { display: none; }
html[data-theme] .manifesto__title,
html:not([data-theme]) .manifesto__title { color: #2a1a10; }
html[data-theme] .manifesto__title em,
html:not([data-theme]) .manifesto__title em { color: #a24c00; }
html[data-theme] .manifesto__title em::after,
html:not([data-theme]) .manifesto__title em::after { background: #d8552c; }
html[data-theme] .manifesto__text,
html:not([data-theme]) .manifesto__text { color: #4a3324; }
html[data-theme] .manifesto__text--dim,
html:not([data-theme]) .manifesto__text--dim { color: #5e4330; }
html[data-theme] .manifesto .stat,
html:not([data-theme]) .manifesto .stat { border-top-color: rgba(74, 47, 30, 0.16); }
html[data-theme] .manifesto .stat b,
html:not([data-theme]) .manifesto .stat b { color: #2a1a10; }
html[data-theme] .manifesto .stat span,
html:not([data-theme]) .manifesto .stat span { color: #4a3324; }
/* надзаголовок: на тёмной теме он оранжевый — на бумаге даём тёмную карамель */
html[data-theme] .manifesto .eyebrow,
html:not([data-theme]) .manifesto .eyebrow { color: #8a4519; }

/* =======================================================================
   17. Горизонтальный «гуляющий» скролл на телефоне (25.10.2026)
   Причина найдена замерами: в шапке «Новые поступления» заголовок 260 px
   и стрелки карусели 86 px не влезали в колонку 273 px при ширине 320 px —
   шапка вылезала на 60 px за экран, и страницу можно было тащить вбок.
   ======================================================================= */
html, body {
  overflow-x: clip;                 /* clip не создаёт скролл-контейнер: sticky работает */
  overscroll-behavior-x: none;      /* без «отскока» страницы вбок на iOS */
  max-width: 100%;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

.section__head--row { flex-wrap: wrap; }
.section__head--row > *:first-child { min-width: 0; flex: 1 1 auto; }
.section__head--row .carousel__nav { flex: 0 0 auto; margin-left: auto; }
.section__title, .section__head .eyebrow { max-width: 100%; overflow-wrap: break-word; }

/* на узких экранах стрелки уходят на свою строку, заголовок получает всю ширину */
@media (max-width: 480px) {
  .section__head--row .carousel__nav { width: 100%; justify-content: flex-end; }
}

/* те же грабли в шапке отзывов и в панели фильтров, плюс мелочи в шоуруме */
.shop__reviews-head { flex-wrap: wrap; }
.shop__reviews-head .carousel__nav { margin-left: auto; }
.catalog__meta, .toolbar { flex-wrap: wrap; }
.catalog__meta > *, .toolbar > * { min-width: 0; }
.select, .select select { max-width: 100%; }
.shop__card, .shop__map { max-width: 100%; }
.shop__map-ph { max-width: 100%; }

/* =======================================================================
   18. Открытая карточка: «Назад» и «Наверх» всегда под рукой (25.10.2026)
   Раньше «Назад» был только в верхней панели: на длинной карточке (до 2900 px)
   приходилось листать наверх. Теперь внизу справа появляются две кнопки,
   как только карточку (или страницу) прокрутили.
   ======================================================================= */
.rv-quicknav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(244, 234, 214, 0.99) 60%, rgba(244, 234, 214, 0.88));
  border-top: 1px solid rgba(74, 47, 30, 0.16);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.rv-quicknav.is-visible { opacity: 1; visibility: visible; transform: none; }
.rv-quicknav > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(74, 47, 30, 0.3);
  background: #fff;
  color: #2a1a10;
  font: 600 14px/1 var(--ff-body);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.rv-quicknav > button:active { transform: scale(0.97); }
.rv-quicknav__up { width: 42px; padding: 0 !important; }
html[data-theme="dark"] .rv-quicknav {
  background: linear-gradient(to top, rgba(20, 14, 10, 0.99) 60%, rgba(20, 14, 10, 0.9));
  border-top-color: rgba(244, 236, 226, 0.16);
}
html[data-theme="dark"] .rv-quicknav > button {
  background: #241a12;
  color: #f4ece2;
  border-color: rgba(244, 236, 226, 0.26);
}
@media (min-width: 768px) {
  .rv-quicknav {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: auto;
    padding: 8px;
    border-radius: 999px;
    border: 1px solid rgba(74, 47, 30, 0.2);
    transform: translateY(12px);
  }
}

/* окно карточки не должно уезжать под чёрную панель WordPress у админа:
   иначе верхняя кнопка «Назад» прячется за ней */
@media (max-width: 767px) {
  body.admin-bar .modal { top: 46px; height: calc(100% - 46px); }
  body.admin-bar .modal__bar { top: 0; }
}
@media (min-width: 768px) and (max-width: 782px) {
  body.admin-bar .modal { top: 32px; height: calc(100% - 32px); }
}

/* горизонтальные ленты в карточке не тянут за собой страницу */
.modal__card { overscroll-behavior-x: contain; }
.recs__list, .collections, .pg-thumbs, .chips, .carousel, .rv-row, .rev-lightbox__thumbs {
  overscroll-behavior-x: contain;
}

/* =======================================================================
   19. Карусели и галереи: без «ползунка» поверх плашки, со стрелками (25.10.2026)
   В карточке лента «Похоже по звучанию» была длинной (12 карточек), её
   горизонтальная полоса прокрутки выполняла на белое поле окна, а карточки
   у краёв обрезались. Теперь полоса скрыта, вместо неё — две стрелки,
   а у лент есть внутренний отступ, чтобы скругления и тени не резались.
   ======================================================================= */
.recs__head { align-items: center; gap: 10px; }
.recs__tools { display: flex; align-items: center; gap: 10px; flex: none; }
.recs__nav { display: flex; gap: 6px; }
.recs__arrow {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(74, 47, 30, 0.24);
  background: #fff;
  color: #2a1a10;
  cursor: pointer;
  transition: opacity .18s ease, transform .15s ease, background .18s;
}
.recs__arrow:hover { background: #f7efe0; }
.recs__arrow:active { transform: scale(0.94); }
.recs__arrow[disabled] { opacity: 0.32; pointer-events: none; }
html[data-theme="dark"] .recs__arrow {
  background: #241a12;
  color: #f4ece2;
  border-color: rgba(244, 236, 226, 0.24);
}
html[data-theme="dark"] .recs__arrow:hover { background: #2f2216; }

/* карточки у краёв ленты не режутся: отступ под скругления и тени.
   min-width: 0 обязателен: в гриде лента иначе распирает карточку на всю
   длину (12 карточек × 124 px) и выезжает на белое поле окна. */
.modal__recs, .modal__recs > *, .recs { min-width: 0; }
.recs__list {
  min-width: 0;
  max-width: 100%;
  /* ровно две целые карточки в видимой части — ничего не обрезано по краям */
  grid-auto-columns: calc((100% - 12px) / 2);
  padding: 2px 2px 4px;
  scroll-padding-inline: 2px;
  scrollbar-width: none;          /* «ползунок» больше не выезжает на плашку */
  -ms-overflow-style: none;
}
.recs__list::-webkit-scrollbar { height: 0; display: none; }

.carousel, .carousel--cards, .shop__rev-track, .rv-row,
.rev-lightbox__thumbs, .collections, .chips, .pg-thumbs {
  padding-inline: 2px;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar, .carousel--cards::-webkit-scrollbar, .shop__rev-track::-webkit-scrollbar,
.rv-row::-webkit-scrollbar, .rev-lightbox__thumbs::-webkit-scrollbar, .collections::-webkit-scrollbar,
.chips::-webkit-scrollbar, .pg-thumbs::-webkit-scrollbar { height: 0; display: none; }

/* на телефоне лента тоже показывает ровно две карточки целиком */
@media (max-width: 767px) {
  .recs__list { grid-auto-columns: calc((100% - 12px) / 2); }
  .recs__nav { display: none; }   /* на телефоне листают пальцем */
}

/* =======================================================================
   20. «Новые поступления» и другие ленты карточек: целое число в кадре
   Было: карточки фиксированной ширины (230 px), в окно 1360 px влезало
   5,6 карточки — шестая всегда обрезана краем. Теперь ширина карточки
   считается от ширины ленты, поэтому в кадре ровно 5 / 4 / 3 / 2 карточки
   без обрезков, а прокрутка идёт страницами.
   ======================================================================= */
.carousel--cards { --rv-cgap: 12px; gap: var(--rv-cgap); }
.carousel--cards > .card {
  flex: 0 0 auto;
  min-width: 0;
  width: calc((100% - 4 * var(--rv-cgap)) / 5);
  max-width: none;
}
@media (max-width: 1199px) {
  .carousel--cards > .card { width: calc((100% - 3 * var(--rv-cgap)) / 4); }
}
@media (max-width: 899px) {
  .carousel--cards > .card { width: calc((100% - 2 * var(--rv-cgap)) / 3); }
}
@media (max-width: 599px) {
  .carousel--cards > .card { width: calc((100% - var(--rv-cgap)) / 2); }
}

/* отзывы в шоуруме — та же логика: целое число плашек, край ровный */
.shop__rev-track { --rv-rgap: 12px; gap: var(--rv-rgap); }
.shop__rev-track > .review {
  width: calc((100% - 2 * var(--rv-rgap)) / 3);
  min-width: 0;
}
@media (max-width: 1023px) {
  .shop__rev-track > .review { width: calc((100% - var(--rv-rgap)) / 2); }
}
@media (max-width: 640px) {
  .shop__rev-track > .review { width: 100%; }
}

/* разделы 21, 22, 24, 26 (клуб, баллы, старый календарь и раскладка оформления) убраны 26.10.2026 — их заменил раздел 28 */

/* =======================================================================
   23. Навигация корзины и оформления в духе Apple Music (25.10.2026)
   Вкладка «Отложено» убрана: пластинка в магазине существует в одном
   экземпляре, второй список дублировал избранное и только путал.
   Что сделано по референсу apple.com / Apple Music:
   • вкладки шторки — сегментированный контрол: одна серая капсула, активный
     сегмент светлее и с мягкой тенью, счётчик — маленькой цифрой;
   • заголовок крупный, без капса, с отрицательным трекингом;
   • строки корзины разделены волосяными линиями, обложки 56 px со
     скруглением 8 px, подписи обычным регистром;
   • подвал шторки — матовое стекло, «Итого» крупно, кнопка-пилюля 50 px;
   • на оформлении — липкая капсула шагов «Получение → Данные → Оплата»:
     текущий шаг подсвечен, пройденные отмечены оранжевой точкой.
   ======================================================================= */
.cart {
  --rv-drawer-bg: rgba(28, 28, 30, 0.96);
  /* 100% вместо 100vw: полоса прокрутки не выдавливает шторку за край */
  width: min(420px, 100%);
  z-index: 130;                    /* выше нижней панели быстрых кнопок (120) */
  background: var(--rv-drawer-bg);
  border-left: 1px solid rgba(84, 84, 88, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
/* панель быстрых кнопок не выглядывает из-под открытой шторки
   (в карточке пластинки она остаётся — там она и нужна) */
body:has(#cartDrawer.is-open) .rv-quicknav,
body:has(#cmpDrawer.is-open) .rv-quicknav { opacity: 0; pointer-events: none; }
html[data-theme="light"] .cart { --rv-drawer-bg: rgba(255, 255, 255, 0.94); border-left-color: rgba(74, 47, 30, 0.14); }

.cart__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 20px 20px 12px;
  border-bottom: 0;
}
.cart__head h2 {
  font: 700 22px/1.15 var(--ff-display);
  text-transform: none;
  letter-spacing: -0.02em;
}
.cart__page-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--paper-mute);
  font: 600 11px/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cart__page-link:hover {
  color: var(--acid-text);
  border-color: var(--acid);
  background: rgba(247, 148, 30, 0.07);
}
.cart__head .icon-btn { font-size: 22px; opacity: .7; transition: opacity .2s ease; }
.cart__head .icon-btn:hover { opacity: 1; }

/* сегментированный контрол вместо «таблеток» */
.cart__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin: 0 16px 4px;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.24);
  overflow: visible;
  scroll-snap-type: none;
}
.cart__tab {
  height: 32px;
  padding: 0 8px;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  font: 500 13px/1 var(--ff-body);
  letter-spacing: -0.01em;
  opacity: .72;
  transition: background .2s ease, opacity .2s ease, box-shadow .2s ease, transform .12s ease;
}
.cart__tab:hover { opacity: 1; background: rgba(118, 118, 128, 0.16); }
.cart__tab:active { transform: scale(0.97); }
.cart__tab.is-active {
  opacity: 1;
  background: #636366;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.cart__tab b { font: 600 11px/1 var(--ff-body); opacity: .82; }
.cart__tab b[hidden] { display: none; }
html[data-theme="light"] .cart__tabs { background: rgba(118, 118, 128, 0.14); }
html[data-theme="light"] .cart__tab { color: #2a1a10; }
html[data-theme="light"] .cart__tab:hover { background: rgba(118, 118, 128, 0.1); }
html[data-theme="light"] .cart__tab.is-active {
  background: #fff;
  color: #2a1a10;
  box-shadow: 0 1px 3px rgba(74, 47, 30, 0.18), 0 0 0 0.5px rgba(74, 47, 30, 0.06);
}

/* содержимое: воздух, волосяные линии, спокойные подписи */
.cart__body { padding: 8px 20px 20px; }
.cart__items { gap: 0; }
.cart-item {
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(84, 84, 88, 0.55);
}
html[data-theme="light"] .cart-item { border-bottom-color: rgba(74, 47, 30, 0.12); }
.cart__items .cart-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.cart-item__thumb { width: 56px; height: 56px; border-radius: 8px; }
.cart-item__title {
  font: 500 14px/1.3 var(--ff-body);
  text-transform: none;
  letter-spacing: -0.01em;
}
.cart-item__artist {
  margin-top: 4px;
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper-mute);
}
.cart-item__price { margin-top: 6px; font: 600 13.5px/1 var(--ff-body); }
.cart-item__side { display: grid; gap: 8px; justify-items: end; text-align: right; }
.cart-item__side .btn[disabled] { opacity: 0.45; cursor: default; }
.cart-item__remove { font-size: 17px; opacity: .55; transition: opacity .18s ease, color .18s ease; }
.cart-item__remove:hover { opacity: 1; }
.cart__panel-note { margin: 22px 2px; font-size: 13.5px; line-height: 1.55; color: var(--paper-mute); }

/* подвал шторки — матовое стекло и большая кнопка */
.cart__foot {
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(84, 84, 88, 0.6);
  background: var(--rv-drawer-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
html[data-theme="light"] .cart__foot { border-top-color: rgba(74, 47, 30, 0.14); }
.cart__row { padding: 4px 0; font-size: 13.5px; }
.cart__row--total { margin-top: 10px; padding-top: 12px; font-family: var(--ff-body); text-transform: none; letter-spacing: 0; }
.cart__row--total b { font: 700 22px/1.1 var(--ff-body); letter-spacing: -0.02em; }
.cart__foot .btn {
  margin-top: 14px;
  height: 50px;
  border-radius: 14px;
  font: 600 16px/1 var(--ff-body);
  letter-spacing: 0;
  text-transform: none;          /* «Оформить заказ» обычным регистром, как в Apple */
}
.cart__foot .btn:active { transform: scale(0.985); }
.cart__note { margin-top: 10px; font-size: 11.5px; line-height: 1.45; letter-spacing: 0; }
.cart__pickup {
  border-radius: 12px;
  padding: 10px 12px;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.cart__pickup b { white-space: nowrap; }

/* ---- шаги оформления: липкая капсула под шапкой ---- */
.rv-steps {
  position: sticky;
  top: calc(var(--rv-ab, 0px) + var(--header-h) + 8px);
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin: 0 0 18px;
  padding: 3px;
  border-radius: 11px;
  /* плотная «заморозка»: под капсулой ничего не просвечивает */
  background: rgba(28, 28, 30, 0.86);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
html[data-theme="light"] .rv-steps { background: rgba(241, 229, 204, 0.9); }
/* на широком экране — компактная капсула по центру, как в Apple */
@media (min-width: 900px) {
  .rv-steps { width: fit-content; max-width: 100%; margin: 0 auto 22px; }
  .rv-steps__item { padding: 0 22px; }
}
/* ---- админ-панель WordPress не накрывает шапку и шторку ----
   У вошедшего админа фиксированная шапка уезжала под панель: кнопка
   корзины оказывалась под чужим элементом и не нажималась. Сдвигаем шапку,
   шторку и капсулу шагов на высоту панели (46 px на телефоне, 32 px на
   десктопе). Для гостей всё остаётся как было: --rv-ab = 0. */
:root { --rv-ab: 0px; }
body.admin-bar { --rv-ab: 32px; }
@media (max-width: 782px) { body.admin-bar { --rv-ab: 46px; } }
body.admin-bar .header { top: var(--rv-ab); }
body.admin-bar .cart { top: var(--rv-ab); }
.rv-steps__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--paper);
  font: 500 13.5px/1 var(--ff-body);
  letter-spacing: -0.01em;
  opacity: .68;
  transition: background .22s ease, opacity .22s ease, box-shadow .22s ease, transform .12s ease;
}
.rv-steps__item i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(237, 233, 225, 0.16);
  font: 700 10.5px/1 var(--ff-body);
  font-style: normal;
  transition: background .22s ease, color .22s ease;
}
.rv-steps__item:hover { opacity: .92; }
.rv-steps__item:active { transform: scale(0.985); }
.rv-steps__item.is-active {
  opacity: 1;
  background: #636366;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.rv-steps__item.is-done i { background: var(--acid); color: #1a1209; }
html[data-theme="light"] .rv-steps__item { color: #2a1a10; }
html[data-theme="light"] .rv-steps__item i { background: rgba(74, 47, 30, 0.12); }
html[data-theme="light"] .rv-steps__item.is-active {
  background: #fff;
  color: #2a1a10;
  box-shadow: 0 1px 3px rgba(74, 47, 30, 0.18), 0 0 0 0.5px rgba(74, 47, 30, 0.06);
}
html[data-theme="light"] .rv-steps__item.is-active i { background: rgba(74, 47, 30, 0.1); }
html[data-theme="light"] .rv-steps__item.is-done i { background: var(--acid); color: #1a1209; }

/* сообщение-тост в открытой шторке не накрывает кнопку «Оформить заказ»:
   показываем его сверху, под вкладками */
body:has(#cartDrawer.is-open) #toast {
  top: calc(var(--rv-ab, 0px) + 118px);
  bottom: auto;
}

/* якоря шагов не прячутся под шапкой и капсулой */
#rvCheckoutPickup, #customer_details, #order_review { scroll-margin-top: 120px; }

/* =======================================================================
   25. Карточки не «плавают» при загрузке (25.10.2026)
   Причина прыжков на телефоне: «Новые поступления» печатает PHP
   (`<a class="card card--static">` с `<span class="card__media">`), а потом
   скрипт заменяет их на свои `<article class="card">` с другим набором
   строк. Медиа-бокс у span был inline, поэтому `aspect-ratio` не работал:
   до подгрузки фото карточка была 273 px, после — 350 px, а страница
   вырастала на 3 700 px. Теперь у всех карточек один и тот же каркас:
   медиа-бокс блочный с соотношением 1:1, а текстовый блок резервирует
   место под артиста, название, метаданные и цену.
   ======================================================================= */
.card__media {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.card__media > img,
.card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* статичная (серверная) карточка — тот же каркас, что и у карточки из скрипта:
   текст берёт типографику из общих правил .card__*, поэтому высоты совпадают */
.card--static {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}
.card--static .card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* «Для вас»: пока каталог не загрузился, блок держит своё место, но
   заголовок не мигает — иначе страница «прыгает» при появлении ленты */
.foryou[data-pending] .section__head { visibility: hidden; }

/* =======================================================================
   27. Поиск и категории в духе Apple Music (25.10.2026)
   Поиск — отдельный оверлей: крупное поле, «Отмена», недавние запросы,
   жанры плитками и живые результаты по всему каталогу (без запросов к сети).
   Категории — сетка плиток с количеством пластинок, вместо мелкой строки чипов.
   ======================================================================= */
.rv-search {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--rv-ab, 0px) + 26px) 18px 18px;
  background: rgba(8, 8, 9, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  overflow-y: auto;
  transition: opacity .2s ease;
  --rv-search-bg: #17171a;
  --rv-search-line: rgba(237, 233, 225, 0.13);
  --rv-search-inset: rgba(237, 233, 225, 0.07);
  --rv-search-hover: rgba(237, 233, 225, 0.08);
}
.rv-search.is-open { opacity: 1; }
.rv-search[hidden] { display: none !important; }
html[data-theme="light"] .rv-search {
  background: rgba(42, 26, 16, 0.28);
  --rv-search-bg: #fffdf9;
  --rv-search-line: rgba(74, 47, 30, 0.12);
  --rv-search-inset: rgba(74, 47, 30, 0.05);
  --rv-search-hover: rgba(74, 47, 30, 0.05);
}
.rv-search__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rv-search__panel {
  position: relative;
  width: min(660px, 100%);
  padding: 14px 16px 18px;
  border-radius: 22px;
  background: var(--rv-search-bg);
  border: 1px solid var(--rv-search-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: translateY(-10px) scale(0.99);
  transition: transform .24s var(--ease-out, ease);
}
.rv-search.is-open .rv-search__panel { transform: none; }

.rv-search__bar { display: flex; align-items: center; gap: 10px; }
.rv-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--rv-search-inset);
  border: 1px solid transparent;
  transition: border-color .18s ease, background .18s ease;
}
.rv-search__field:focus-within { border-color: var(--rv-search-line); background: transparent; }
.rv-search__field svg { flex: none; opacity: .6; }
.rv-search__field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--paper);
  font: 500 16px/1 var(--ff-body);
  letter-spacing: -0.01em;
  outline: none;
}
.rv-search__field input::-webkit-search-cancel-button { display: none; }
.rv-search__clear {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(237, 233, 225, 0.16);
  color: inherit;
  font-size: 15px;
  line-height: 1;
}
html[data-theme="light"] .rv-search__clear { background: rgba(74, 47, 30, 0.12); }
.rv-search__clear[hidden] { display: none; }
.rv-search__cancel {
  flex: none;
  height: 46px;
  padding: 0 8px;
  font: 500 15.5px/1 var(--ff-body);
  color: var(--acid-text, #f7941e);
  letter-spacing: -0.01em;
}

.rv-search__body { margin-top: 14px; }
.rv-search__sec + .rv-search__sec { margin-top: 18px; }
.rv-search__sec h3 {
  margin: 0 0 10px;
  font: 600 12px/1 var(--ff-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.rv-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rv-search-line);
  background: transparent;
  color: var(--paper);
  font: 500 13.5px/1 var(--ff-body);
  transition: background .18s ease, border-color .18s ease;
}
.rv-chip:hover { background: var(--rv-search-hover); }
.rv-chip span { color: var(--paper-mute); font-size: 12px; }

.rv-search__recent { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-recent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rv-search-line);
  background: transparent;
  color: var(--paper);
  font: 500 13.5px/1 var(--ff-body);
}
.rv-recent:hover { background: var(--rv-search-hover); }
.rv-recent i {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--rv-search-inset);
  font-style: normal;
  font-size: 13px;
  color: var(--paper-mute);
  cursor: pointer;
}
.rv-recent i:hover { color: var(--paper); }

.rv-res__list { display: grid; gap: 2px; }
.rv-res {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  text-align: left;
  transition: background .16s ease;
}
.rv-res:hover, .rv-res:focus-visible { background: var(--rv-search-hover); outline: none; }
.rv-res__cover {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--rv-search-inset);
}
.rv-res__cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.rv-res__cover img.is-loaded { opacity: 1; }
.rv-res__text { display: grid; gap: 2px; min-width: 0; }
.rv-res__text b {
  font: 500 14px/1.3 var(--ff-body);
  letter-spacing: -0.01em;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-res__text i { font-style: normal; font-size: 12px; color: var(--paper-mute); }
.rv-res__price { font: 600 13.5px/1 var(--ff-body); white-space: nowrap; }

.rv-search__all {
  width: 100%;
  margin-top: 14px;
  height: 48px;
  border-radius: 14px;
  background: var(--rv-search-inset);
  border: 1px solid var(--rv-search-line);
  color: var(--paper);
  font: 500 15px/1 var(--ff-body);
}
.rv-search__all:hover { background: var(--rv-search-hover); }

.rv-search__empty { padding: 26px 4px 10px; text-align: center; }
.rv-search__empty b { font: 600 15px/1.3 var(--ff-body); }
.rv-search__empty p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--paper-mute); }
.rv-search__hint { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--paper-mute); }

@media (max-width: 640px) {
  .rv-search { padding: 0; align-items: stretch; }
  .rv-search__panel {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    border: 0;
    padding: calc(var(--rv-ab, 0px) + 14px) 14px 24px;
    transform: translateY(12px);
  }
  .rv-res { padding: 8px 6px; }
}

/* ---- категории: плитки вместо мелких чипов ---- */
.rv-cats {
  display: grid;
  /* 8 плиток: 4 + 4 на десктопе, 3 + 3 + 2 на планшете, 2 × 4 на телефоне */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}
@media (max-width: 1023px) {
  .rv-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-cat {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.rv-cat:hover { background: rgba(var(--tint-rgb), 0.06); }
.rv-cat:active { transform: scale(0.985); }
.rv-cat b {
  font: 600 14px/1.25 var(--ff-body);
  letter-spacing: -0.01em;
}
.rv-cat span { font-size: 11.5px; color: var(--paper-mute); }
.rv-cat.is-active {
  background: rgba(247, 148, 30, 0.14);
  border-color: rgba(247, 148, 30, 0.55);
}
.rv-cat.is-active b { color: var(--acid-text); }
html[data-theme="light"] .rv-cat { background: rgba(255, 255, 255, 0.5); border-color: rgba(74, 47, 30, 0.16); }
html[data-theme="light"] .rv-cat:hover { background: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .rv-cat.is-active { background: rgba(247, 148, 30, 0.16); border-color: rgba(199, 111, 0, 0.55); }
@media (max-width: 480px) {
  .rv-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rv-cat { min-height: 58px; padding: 10px 12px; }
  .rv-cat b { font-size: 13px; }
}


/* =======================================================================
   28. Корзина, лайки и оформление заказа в духе Apple (26.10.2026)
   Спокойная типографика без капса, крупные итоги, одна главная кнопка,
   выбор дня плашками. Все цвета — через переменные темы, работают
   и в светлой, и в тёмной теме.
   ======================================================================= */
.bag-drawer, .bag, .page-section--checkout {
  --bag-sel: #f7941e;
  --bag-sel-bg: rgba(247, 148, 30, 0.1);
  --bag-free: #2f7d47;
  --bag-soft: rgba(74, 47, 30, 0.06);
  --bag-heart: #e5482c;
}
html[data-theme="dark"] .bag-drawer, html[data-theme="dark"] .bag, html[data-theme="dark"] .page-section--checkout {
  --bag-free: #7fd39a;
  --bag-soft: rgba(244, 236, 226, 0.07);
  --bag-sel-bg: rgba(247, 148, 30, 0.14);
}

/* ---------- панель ---------- */
.bag-drawer .cart__head { border-bottom: 0; padding: 18px 12px 10px 22px; }
.bag-drawer .cart__head h2 {
  font: 700 24px/1.1 var(--ff-body);
  letter-spacing: -0.015em;
  text-transform: none;
}
.bag-drawer__body { padding: 6px 22px 24px; overscroll-behavior: contain; }
.bag-drawer__foot {
  flex: none;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.bag-drawer__foot[hidden] { display: none; }

/* переключатель «Корзина | Лайки» с ползунком */
.bag-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: none;
  margin: 0 22px 8px;
  padding: 3px;
  border-radius: 12px;
  background: var(--bag-soft, rgba(74, 47, 30, 0.07));
}
.bag-seg__btn {
  position: relative;
  z-index: 1;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--paper);
  font: 600 14px/1 var(--ff-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.66;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.bag-seg__btn.is-active { opacity: 1; }
.bag-seg__btn b {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--acid);
  color: var(--on-acid);
  font: 700 11.5px/20px var(--ff-body);
}
.bag-seg__btn b[hidden] { display: none; }
.bag-seg__thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 9px;
  background: var(--ink-4, #fff);
  box-shadow: 0 1px 2px rgba(42, 26, 16, 0.12), 0 4px 12px rgba(42, 26, 16, 0.08);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-theme="light"] .bag-seg__thumb { background: #fff; }
html[data-theme="dark"] .bag-seg__thumb { background: rgba(244, 236, 226, 0.16); box-shadow: none; }
.bag-seg[data-active="fav"] .bag-seg__thumb { transform: translateX(100%); }

/* ---------- строки товаров ---------- */
.bag-lines { list-style: none; margin: 0; padding: 0; }
.bag-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  animation: rvBagIn 0.32s ease both;
}
@keyframes rvBagIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bag-line__cover { display: block; width: 76px; padding: 0; border: 0; background: none; border-radius: 10px; cursor: pointer; text-decoration: none; }
a.bag-line__cover:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.bag-line__cover .bag-cover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
a.bag-line__cover:hover .bag-cover { box-shadow: 0 8px 20px rgba(42, 26, 16, 0.2); transform: translateY(-1px); }
.bag-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ink-3);
  box-shadow: 0 1px 2px rgba(42, 26, 16, 0.14);
}
.bag-cover > .card__art { position: absolute; inset: 0; padding: 6px; }
.bag-cover .card__art-top, .bag-cover .card__art-bot { display: none; }
.bag-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; }
.bag-cover img.is-loaded { opacity: 1; }
.bag-line__title { display: block; margin: 0; font: 600 15px/1.3 var(--ff-body); color: var(--paper); text-transform: none; letter-spacing: 0; text-decoration: none; }
a.bag-line__title { transition: color 0.18s ease; }
a.bag-line__title:hover { color: var(--acid-text); }
.bag-line__meta { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--paper-mute); }
.bag-line__note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--paper-dim); }
.bag-line__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.bag-line__price { margin: 0; text-align: right; white-space: nowrap; font: 600 15px/1.3 var(--ff-body); color: var(--paper); }
.bag-line__price s { display: block; font-size: 12.5px; font-weight: 400; color: var(--paper-mute); }
.bag-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acid-text);
  font: 500 13.5px/1.2 var(--ff-body);
  cursor: pointer;
}
.bag-link svg { width: 15px; height: 15px; }
.bag-link--muted { color: var(--paper-mute); }
.bag-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bag-link:disabled { opacity: 0.5; cursor: default; }
.bag-pill {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--acid);
  color: var(--on-acid);
  font: 600 13.5px/1 var(--ff-body);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.bag-pill:active { transform: scale(0.96); }
.bag-pill.is-in { background: var(--bag-soft); color: var(--paper-dim); }
.bag-sold { font-size: 13px; color: var(--paper-mute); }

/* ---------- итог ---------- */
.bag-sum { display: grid; gap: 8px; }
.bag-sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--paper-dim); }
.bag-sum__row .is-free { color: var(--bag-free); font-weight: 600; }
.bag-sum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 700 17px/1.2 var(--ff-body);
  color: var(--paper);
}
.bag-sum__total b { font-size: 22px; letter-spacing: -0.01em; }
.bag-sum__go { margin-top: 8px; min-height: 52px; border-radius: 14px; font: 600 16px/1 var(--ff-body); text-transform: none; letter-spacing: 0; }
.bag-sum__page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin-top: 9px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--paper);
  font: 600 13px/1.25 var(--ff-body);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.bag-sum__page:hover {
  border-color: var(--acid);
  color: var(--acid-text);
  background: rgba(247, 148, 30, 0.06);
}
.bag-sum__note { margin: 2px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--paper-mute); }
.bag-drawer .bag-sum__row:first-child { display: none; } /* в панели количество видно на вкладке */

/* ---------- подборки ---------- */
.bag-rail { margin-top: 28px; }
.bag-rail__head h3 { margin: 0; font: 700 18px/1.2 var(--ff-body); letter-spacing: -0.01em; text-transform: none; color: var(--paper); }
.bag-rail__head p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--paper-mute); }
.bag-rail__list {
  list-style: none;
  margin: 12px -22px 0;
  padding: 2px 22px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 136px;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 22px;
  scrollbar-width: none;
}
.bag-rail__list::-webkit-scrollbar { display: none; }
.mini { display: grid; gap: 8px; align-content: start; scroll-snap-align: start; min-width: 0; }
.mini__open { display: grid; gap: 3px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mini__open .bag-cover { margin-bottom: 6px; border-radius: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mini__open:hover .bag-cover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(42, 26, 16, 0.18); }
.mini__title {
  font: 600 13.5px/1.3 var(--ff-body);
  color: var(--paper);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini__meta { font-size: 12px; line-height: 1.35; color: var(--paper-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__foot { display: flex; align-items: center; gap: 6px; }
.mini__foot b { margin-right: auto; font: 600 13.5px/1 var(--ff-body); color: var(--paper); white-space: nowrap; }
.mini__btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.mini__btn svg { width: 16px; height: 16px; }
.mini__btn:active { transform: scale(0.9); }
.mini__add { border-color: var(--acid); background: var(--acid); color: var(--on-acid); }
.mini__add.is-in { border-color: var(--line-strong); background: transparent; color: var(--paper-dim); }

/* сердечко: везде одинаково — красное и залитое */
.mini__like.is-active, .modal__fav.is-active, .bag-empty__icon--heart { color: var(--bag-heart, #e5482c); }
.mini__like.is-active svg path, .modal__fav.is-active svg path, .card__fav.is-active svg path { fill: currentColor; }
.modal__fav { border: 1px solid var(--line-strong); }
.modal__fav.is-active { border-color: rgba(229, 72, 44, 0.45); color: #e5482c; }
#favBtn svg path { transition: fill 0.2s ease; }
@keyframes rvHeartPop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
.is-pop svg { animation: rvHeartPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- пусто ---------- */
.bag-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 6px 6px; text-align: center; }
.bag-empty__icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 999px; background: var(--bag-soft); }
.bag-empty__icon svg { width: 30px; height: 30px; }
.bag-empty__icon .disc { width: 48px; height: 48px; }
.bag-empty__title { margin: 4px 0 0; font: 700 20px/1.2 var(--ff-body); color: var(--paper); }
.bag-empty__text { margin: 0 0 6px; max-width: 300px; font-size: 14px; line-height: 1.55; color: var(--paper-dim); }
.bag-empty .btn { text-transform: none; letter-spacing: 0; }
.bag-wait { margin: 0; padding: 22px 0; font-size: 14px; color: var(--paper-mute); }

/* ---------- страница корзины ---------- */
.page-section--bag .woocommerce, .page-section--checkout .woocommerce { max-width: 1120px; margin-inline: auto; }
.bag-hero { display: grid; justify-items: center; gap: 12px; padding: 8px 0 34px; text-align: center; border-bottom: 1px solid var(--line); }
.bag-hero__title {
  margin: 0;
  font: 700 clamp(28px, 4vw, 44px)/1.12 var(--ff-body);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}
.bag-hero__sub { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--paper-dim); }
.bag-hero .btn { min-width: 260px; min-height: 52px; border-radius: 14px; font: 600 16px/1 var(--ff-body); text-transform: none; letter-spacing: 0; }
.bag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.bag-lines--big .bag-line { grid-template-columns: 140px minmax(0, 1fr) auto; gap: 22px; padding: 26px 0; }
.bag-lines--big .bag-line__cover { width: 140px; }
.bag-lines--big .bag-line__title { font-size: 19px; }
.bag-lines--big .bag-line__meta { font-size: 14.5px; }
.bag-lines--big .bag-line__price { font-size: 19px; }
.bag-lines--big .bag-link { font-size: 14.5px; }
.bag-grid__side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; padding-top: 26px; }
.bag-sum--big { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--ink-2); }
.bag-sum__title { margin: 0 0 6px; font: 700 20px/1.2 var(--ff-body); text-transform: none; letter-spacing: -0.01em; color: var(--paper); }
.bag-perks { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 12px; }
.bag-perks li { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--paper-dim); }
.bag-perks b { font-weight: 600; color: var(--paper); }
.bag-perks a { color: inherit; }
.bag .bag-rail { margin-top: 52px; }
.bag .bag-rail__head h3 { font-size: clamp(20px, 2.4vw, 26px); }
.bag .bag-rail__list { margin: 16px 0 0; padding: 2px 0 10px; grid-auto-columns: 176px; gap: 18px; scroll-padding: 0; }
@media (max-width: 899px) {
  .bag-grid { grid-template-columns: 1fr; gap: 0; }
  .bag-grid__side { position: static; padding-top: 22px; }
  .bag-lines--big .bag-line { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .bag-lines--big .bag-line__cover { width: 96px; }
  .bag-lines--big .bag-line__title { font-size: 16px; }
  .bag-lines--big .bag-line__meta { font-size: 13.5px; }
  .bag-lines--big .bag-line__price { grid-column: 2; text-align: left; font-size: 17px; margin-top: -6px; }
  .bag-lines--big .bag-line__price s { display: inline; margin-right: 8px; }
  .bag .bag-rail__list { margin: 14px -16px 0; padding: 2px 16px 10px; grid-auto-columns: 148px; gap: 14px; scroll-padding: 0 16px; }
  .bag-hero { padding-bottom: 26px; }
  .bag-hero .btn { width: 100%; min-width: 0; }
}

/* ---------- оформление заказа ---------- */
.page-section--checkout .section__title { text-transform: none; font-family: var(--ff-body); font-weight: 700; letter-spacing: -0.02em; }
.woocommerce-checkout .page-section--checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 0 40px;
  align-items: start;
}
.woocommerce-checkout .page-section--checkout form.checkout > * { grid-column: 1; grid-row: auto; }
.woocommerce-checkout .page-section--checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 12px; font: 700 20px/1.2 var(--ff-body); text-transform: none; letter-spacing: -0.01em; }
.woocommerce-checkout .page-section--checkout form.checkout > #order_review {
  grid-column: 2;
  grid-row: 2 / span 12;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  padding: 8px 20px 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.woocommerce-checkout .page-section--checkout form.checkout > .rv-sum-toggle { display: none; }

.rv-step, .woocommerce-checkout .page-section--checkout #customer_details {
  margin: 0 0 16px;
  padding: 22px 24px 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.woocommerce-checkout .page-section--checkout #customer_details .col-2 { display: none; }
.woocommerce-checkout .page-section--checkout #customer_details .col-1 { padding: 0; }
.rv-step__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.rv-step__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 14px/30px var(--ff-body);
  text-align: center;
}
.rv-step__title { margin: 2px 0 0; font: 700 22px/1.2 var(--ff-body); letter-spacing: -0.01em; text-transform: none; color: var(--paper); }
.rv-step__note { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--paper-dim); }
#customer_details .woocommerce-billing-fields > h3, .rv-billing-title { display: none; }

/* поля: крупные, как в Apple */
.page-section--checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.page-section--checkout .woocommerce-billing-fields__field-wrapper .form-row {
  grid-column: auto !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-section--checkout .form-row label {
  display: block;
  margin-bottom: 6px;
  font: 600 13px/1.2 var(--ff-body);
  color: var(--paper-dim);
}
.page-section--checkout .form-row label .required { color: var(--acid-text); text-decoration: none; }
.page-section--checkout .form-row label .optional { display: none; }
.page-section--checkout .form-row input.input-text {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--ink-4, #fff);
  color: var(--paper);
  font: 400 17px/1.2 var(--ff-body);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
html[data-theme="light"] .page-section--checkout .form-row input.input-text { background: #fff; }
.page-section--checkout .form-row input.input-text::placeholder { color: var(--paper-mute); opacity: 0.8; }
.page-section--checkout .form-row input.input-text:focus { outline: 0; border-color: var(--bag-sel); box-shadow: 0 0 0 4px rgba(247, 148, 30, 0.2); }
.page-section--checkout .form-row.woocommerce-invalid input.input-text { border-color: #d0402a; }
@media (max-width: 599px) {
  .page-section--checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* подтверждение и оплата */
.rv-step--pay #payment { background: transparent; border-radius: 0; }
.rv-step--pay #payment ul.payment_methods { margin: 0; padding: 0; border: 0; list-style: none; }
.rv-step--pay #payment ul.payment_methods li {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--bag-sel);
  background: var(--bag-sel-bg);
}
.rv-step--pay #payment ul.payment_methods li input { accent-color: var(--bag-sel); margin-right: 8px; }
.rv-step--pay #payment ul.payment_methods li label { font: 600 15px/1.3 var(--ff-body); color: var(--paper); }
.rv-step--pay #payment div.payment_box { margin: 8px 0 0; padding: 0 0 0 26px !important; background: transparent !important; color: var(--paper-dim) !important; font-size: 13.5px; line-height: 1.5; }
.rv-step--pay #payment div.payment_box p { margin: 0; }
.rv-step--pay #payment .place-order { margin: 18px 0 0; padding: 0; }
.rv-step--pay .woocommerce-privacy-policy-text p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--paper-mute); }
.rv-step--pay .woocommerce-privacy-policy-text a { color: inherit; }
.woocommerce-checkout .rv-step--pay #place_order {
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  font: 600 17px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}

/* сводка заказа */
.page-section--checkout #order_review table.shop_table { border: 0; background: transparent; border-radius: 0; margin: 0; }
.page-section--checkout #order_review thead { display: none; }
.page-section--checkout #order_review td, .page-section--checkout #order_review th {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--paper-dim);
  vertical-align: middle;
}
.page-section--checkout #order_review td.product-total, .page-section--checkout #order_review tfoot td { text-align: right; white-space: nowrap; color: var(--paper); }
.page-section--checkout #order_review tfoot th { font-weight: 500; }
.page-section--checkout #order_review tr.cart_item td { padding: 12px 0; }
.page-section--checkout #order_review tr.order-total th, .page-section--checkout #order_review tr.order-total td {
  border-bottom: 0;
  padding-top: 14px;
  font: 700 18px/1.2 var(--ff-body);
  color: var(--paper);
}
.page-section--checkout #order_review tr.order-total td .amount { font-size: 22px; }
.page-section--checkout #order_review ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
.rv-sum-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-sum-item__cover { flex: none; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--ink-3); box-shadow: 0 1px 2px rgba(42, 26, 16, 0.14); }
.rv-sum-item__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.rv-sum-item__text { display: grid; gap: 2px; min-width: 0; }
.rv-sum-item__text b { font: 600 13.5px/1.3 var(--ff-body); color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-sum-item__text small { font-size: 12px; color: var(--paper-mute); }
.page-section--checkout #order_review tr.rv-sum-perks td { border: 0; padding: 4px 0 0; text-align: left; white-space: normal; }
.rv-sum-perks ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.rv-sum-perks li { position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.45; color: var(--paper-dim); }
.rv-sum-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--bag-free);
  border-bottom: 2px solid var(--bag-free);
  transform: rotate(-45deg);
}

/* сводка на телефоне сворачивается в строку */
.rv-sum-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink-2);
  color: var(--paper);
  font: 600 15px/1.2 var(--ff-body);
  cursor: pointer;
}
.rv-sum-toggle b { margin-left: auto; font-size: 17px; }
.rv-sum-toggle i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.25s ease; }
.rv-sum-open .rv-sum-toggle i { transform: rotate(-135deg) translateY(-2px); }
@media (max-width: 899px) {
  .woocommerce-checkout .page-section--checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout .page-section--checkout form.checkout > * { grid-column: 1 !important; }
  .woocommerce-checkout .page-section--checkout form.checkout > #order_review_heading { display: none; }
  .woocommerce-checkout .page-section--checkout form.checkout > .rv-sum-toggle { display: flex; grid-row: 1; }
  .woocommerce-checkout .page-section--checkout form.checkout > #order_review { grid-row: 2; position: static; display: none; margin-bottom: 16px; }
  .rv-sum-open.woocommerce-checkout .page-section--checkout form.checkout > #order_review { display: block; animation: rvBagIn 0.25s ease both; }
  .rv-step, .woocommerce-checkout .page-section--checkout #customer_details { padding: 18px 16px 20px; border-radius: 18px; }
  .rv-step__title { font-size: 20px; }
}

/* ---------- день и время визита ---------- */
.pk { display: grid; gap: 12px; }
.pk__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; font: 600 15px/1.2 var(--ff-body); color: var(--paper); }
.pk__label small { font: 500 13px/1.2 var(--ff-body); color: var(--paper-mute); }
.pk__days {
  display: flex;
  gap: 8px;
  margin: 0 -4px;
  padding: 4px 4px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.pk__days::-webkit-scrollbar { display: none; }
.pk-day {
  flex: 0 0 72px;
  height: 84px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--paper);
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.pk-day:hover:not(:disabled) { border-color: var(--paper-dim); }
.pk-day:active:not(:disabled) { transform: scale(0.96); }
.pk-day__wd { font: 600 12.5px/1 var(--ff-body); color: var(--paper-dim); }
.pk-day b { font: 700 24px/1 var(--ff-body); letter-spacing: -0.01em; }
.pk-day__m { font: 500 12px/1 var(--ff-body); color: var(--paper-mute); }
.pk-day--other { flex-basis: 96px; }
.pk-day__ico { display: grid; place-items: center; height: 26px; color: var(--paper-dim); }
.pk-day.is-on, .pk-slot.is-on { border-color: var(--bag-sel); background: var(--bag-sel-bg); box-shadow: inset 0 0 0 1px var(--bag-sel); }
.pk-day.is-on .pk-day__wd, .pk-day.is-on .pk-day__m { color: var(--paper); }
.pk__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.pk-slot {
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--paper);
  font: 600 15px/1 var(--ff-body);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.pk-slot small { font: 500 12px/1 var(--ff-body); color: var(--paper-mute); }
.pk-slot:hover:not(:disabled) { border-color: var(--paper-dim); }
.pk-day:disabled, .pk-slot:disabled { opacity: 0.32; cursor: default; }
.pk__later { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--paper-dim); cursor: pointer; }
.pk__later input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--bag-sel); }
.pk__summary { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bag-soft); font-size: 14px; line-height: 1.5; color: var(--paper-dim); }
.pk__summary b { color: var(--paper); }
.pk__summary.is-done { position: relative; padding-left: 40px; background: rgba(47, 125, 71, 0.1); }
.pk__summary.is-done::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--bag-free);
  border-bottom: 2px solid var(--bag-free);
  transform: rotate(-45deg);
}

/* календарь на месяц — раскрывается по «Другая дата» */
.pk-cal { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-4, #fff); animation: rvBagIn 0.25s ease both; }
html[data-theme="light"] .pk-cal { background: #fff; }
.pk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pk-cal__head b { font: 700 16px/1 var(--ff-body); color: var(--paper); }
.pk-cal__nav {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--acid-text);
  font: 600 22px/1 var(--ff-body);
  cursor: pointer;
}
.pk-cal__nav:hover:not(:disabled) { background: var(--bag-soft); }
.pk-cal__nav:disabled { opacity: 0.25; cursor: default; }
.pk-cal__wd, .pk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pk-cal__wd span { text-align: center; font: 600 11px/1.6 var(--ff-body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper-mute); }
.pk-cal__cell {
  aspect-ratio: 1;
  max-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: 500 15px/1 var(--ff-body);
  cursor: pointer;
  transition: background 0.16s ease;
}
.pk-cal__cell:hover:not(:disabled) { background: var(--bag-soft); }
.pk-cal__cell.is-today { color: var(--acid-text); font-weight: 700; }
.pk-cal__cell.is-on { background: var(--bag-sel); color: #1a1209; font-weight: 700; }
.pk-cal__cell:disabled { opacity: 0.28; cursor: default; }
.pk-cal__cell.is-empty { pointer-events: none; }

/* «Спасибо за заказ» */
.rv-thanks { margin: 0 0 24px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--ink-2); }
.rv-thanks p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--paper-dim); }
.rv-thanks__lead { font: 700 22px/1.25 var(--ff-body) !important; color: var(--paper) !important; }
.rv-thanks__addr { font-size: 13.5px !important; margin: 0 !important; }
.rv-thanks a { color: inherit; }

/* «Для вас» на главной */
.section.foryou .section__title { text-transform: uppercase; }

/* панель корзины и лайков открыта — плавающая «Каталог ↑» не мешает */
body.no-scroll:not(:has(.modal.is-open)) .rv-quicknav { opacity: 0 !important; pointer-events: none !important; }

/* иконки шапки со счётчиком */
#favBtn, #cmpBtn { position: relative; }

/* «Ваш заказ»: заголовок внутри карточки сводки, чтобы колонка не «проваливалась» */
.woocommerce-checkout .page-section--checkout form.checkout > #order_review_heading { display: none; }
.woocommerce-checkout .page-section--checkout form.checkout > #order_review { grid-row: 1 / span 12; padding-top: 18px; }
.page-section--checkout #order_review::before {
  content: "Ваш заказ";
  display: block;
  margin: 0 0 4px;
  font: 700 20px/1.2 var(--ff-body);
  letter-spacing: -0.01em;
  color: var(--paper);
}
@media (max-width: 899px) {
  .woocommerce-checkout .page-section--checkout form.checkout > #order_review { grid-row: 2; }
  .page-section--checkout #order_review::before { display: none; }
}
.pk__label small { font-weight: 500; }
.pk__calbtn {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acid-text);
  font: 600 14px/1.2 var(--ff-body);
  cursor: pointer;
}
.pk__calbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk__days { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 28px; }

/* «Спасибо за заказ» */
.woocommerce-order .woocommerce-thankyou-order-received { display: none; }
.woocommerce-order ul.woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
}
.woocommerce-order ul.woocommerce-order-overview li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  background: var(--ink-2);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper-mute);
}
.woocommerce-order ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font: 600 15px/1.3 var(--ff-body); color: var(--paper); }
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title { font: 700 20px/1.2 var(--ff-body); text-transform: none; letter-spacing: -0.01em; }
.woocommerce-order .woocommerce-customer-details address { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); }
/* у страницы корзины своя раскладка — старая сетка WooCommerce ей не нужна */
.woocommerce-cart .page-section--bag .woocommerce { display: block; }
.bag, .bag-grid > *, .bag-rail { min-width: 0; }


/* якоря шагов оформления не прячутся под шапкой и капсулой шагов */
#rvPickup, #customer_details, #rvPay { scroll-margin-top: calc(var(--rv-ab, 0px) + 130px); }
.page-section--checkout .rv-steps { margin-bottom: 18px; }

/* =======================================================================
   29. Каталог и фильтры в духе Apple (26.10.2026)
   Меньше слоёв до первых карточек: подборки и жанры — по одной ленте,
   носитель — сегментом рядом с сортировкой, подписи без капса.
   В шторке фильтров — списки без вложенной прокрутки, «Показать все».
   ======================================================================= */
/* жанры — одна лента вбок вместо двух рядов крупных плиток */
.rv-cats {
  display: flex !important;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 2px 0 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.rv-cats::-webkit-scrollbar { display: none; }
.rv-cats .rv-cat {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  align-content: normal;
  gap: 8px;
  min-height: 0 !important;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  scroll-snap-align: start;
  white-space: nowrap;
}
.rv-cats .rv-cat b { font: 600 14.5px/1 var(--ff-body); letter-spacing: 0; text-transform: none; }
.rv-cats .rv-cat span { font: 500 12.5px/1 var(--ff-body); color: var(--paper-mute); }
.rv-cats .rv-cat.is-active { background: var(--paper) !important; border-color: var(--paper) !important; }
.rv-cats .rv-cat.is-active b, .rv-cats .rv-cat.is-active span { color: var(--ink) !important; }

/* подборки — компактные карточки одной лентой */
.collections { scrollbar-width: none; }
.collections::-webkit-scrollbar { display: none; }

/* панель поиска и фильтров */
.toolbar .search input { font: 400 16px/1.2 var(--ff-body); letter-spacing: 0; }
.btn--filter {
  font: 600 14.5px/1 var(--ff-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.btn--filter .filter-count { background: var(--acid); color: var(--on-acid); }

/* строка над сеткой: носитель сегментом, количество, сортировка */
.catalog__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.catalog__meta .catalog__count {
  margin-right: auto;
  font: 500 13.5px/1.3 var(--ff-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-mute);
}
.rv-seg.format-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 11px;
  background: rgba(118, 118, 128, 0.14);
}
.rv-seg .format-tab {
  height: 32px;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  font: 600 13.5px/1 var(--ff-body);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.72;
  transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.rv-seg .format-tab:hover { opacity: 1; }
.rv-seg .format-tab.is-active {
  opacity: 1;
  background: #fff;
  color: #1a1209;
  box-shadow: 0 1px 2px rgba(42, 26, 16, 0.14), 0 3px 8px rgba(42, 26, 16, 0.08);
}
html[data-theme="dark"] .rv-seg .format-tab.is-active { background: rgba(244, 236, 226, 0.18); color: var(--paper); box-shadow: none; }
.catalog__meta .select select {
  height: 36px;
  padding: 0 30px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  font: 500 13.5px/1 var(--ff-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
}
@media (max-width: 599px) {
  .catalog__meta .rv-seg { order: -1; width: 100%; }
  .catalog__meta .rv-seg .format-tab { padding: 0 8px; }
}

/* шторка фильтров */
.sheet__head h2 { font: 700 22px/1.1 var(--ff-body) !important; letter-spacing: -0.015em; text-transform: none !important; }
.filter-block { padding: 20px 0; }
.filter-block legend {
  margin-bottom: 12px;
  font: 700 16px/1.2 var(--ff-body) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--paper) !important;
}
.filter-scroll { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; padding-right: 0 !important; }
.filter-grid span {
  height: 36px;
  padding: 0 14px;
  font: 500 14px/1 var(--ff-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--paper) !important;
}
.filter-grid span .chip-count { font: 500 12px/1 var(--ff-body) !important; opacity: 0.55; }
.filter-grid input:checked + span { background: var(--paper) !important; border-color: var(--paper) !important; color: var(--ink) !important; font-weight: 600; }
.filter-grid.is-collapsed:not(.is-searching) label:nth-child(n+11) { display: none; }
.filter-more {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acid-text);
  font: 600 14px/1.2 var(--ff-body);
  cursor: pointer;
}
.filter-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.filter-hint { font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; }

/* состояние — список строк с галочкой, как выбор в настройках */
#conditionList { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#conditionList label { display: block; }
#conditionList span {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  padding: 0 44px 0 16px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--paper) !important;
  position: relative;
}
#conditionList label:last-child span { border-bottom: 0 !important; }
#conditionList input:checked + span { background: var(--bag-sel-bg, rgba(247, 148, 30, 0.1)) !important; color: var(--paper) !important; }
#conditionList input:checked + span::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 6px;
  margin-top: -5px;
  border-left: 2px solid var(--acid-text);
  border-bottom: 2px solid var(--acid-text);
  transform: rotate(-45deg);
}
.sheet__foot .btn { text-transform: none !important; letter-spacing: 0 !important; font: 600 16px/1 var(--ff-body) !important; border-radius: 14px; }

/* =======================================================================
   30. Мягкий край у горизонтальных лент (26.10.2026)
   Лента жанров и роллер дней листаются вбок; раньше крайняя плашка
   обрывалась по границе экрана и выглядела «сломанной». Теперь у края,
   куда ещё можно листать, стоит мягкое затухание — как в Apple Music.
   Классы is-scrollable / is-start / is-end ставит initFade() в app.js.
   ======================================================================= */
.rv-cats.is-scrollable:not(.is-end),
.pk__days.is-scrollable:not(.is-end),
.bag-rail__list.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent 100%);
}
.rv-cats.is-scrollable:not(.is-start):not(.is-end),
.pk__days.is-scrollable:not(.is-start):not(.is-end),
.bag-rail__list.is-scrollable:not(.is-start):not(.is-end) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 38px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 38px), transparent 100%);
}
.rv-cats.is-scrollable:not(.is-start).is-end,
.pk__days.is-scrollable:not(.is-start).is-end,
.bag-rail__list.is-scrollable:not(.is-start).is-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px);
}

/* шаги оформления не прячут заголовок раздела при переходе по якорю */
#rvPickup, #customer_details, #rvPay { scroll-margin-top: 132px; }

/* =======================================================================
   31. Жанры: стрелки, а не только свайп. Рекомендации без обрезков.
   Спокойная анимация сетки на телефоне (26.10.2026)
   ======================================================================= */
/* лента жанров + стрелки по краям (на телефоне свайп, стрелки скрыты) */
.rv-cats-row { position: relative; display: flex; align-items: center; gap: 8px; }
.rv-cats-row .rv-cats { flex: 1 1 auto; min-width: 0; }
.rv-cats__nav {
  flex: none;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--paper);
  cursor: pointer;
  transition: opacity .18s ease, background .18s ease, transform .12s ease;
}
.rv-cats__nav:hover { background: rgba(var(--tint-rgb), 0.12); }
.rv-cats__nav:active { transform: scale(0.94); }
.rv-cats__nav[disabled] { opacity: 0.28; pointer-events: none; }
@media (min-width: 900px) {
  .rv-cats__nav { display: grid; }
}
/* затухание у края оставляем и на десктопе: плашка не «режется» ножом,
   а мягко уходит под стрелку */

/* рекомендации в корзине: целое число карточек в кадре — 5 / 4 / 2,
   иначе на широком экране карточка раздувалась на треть полосы */
.bag-rail__list { gap: 14px; grid-auto-columns: calc((100% - 4 * 14px) / 5); }
.bag .bag-rail__list { gap: 16px; grid-auto-columns: calc((100% - 4 * 16px) / 5); }
@media (max-width: 1199px) {
  .bag-rail__list { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
  .bag .bag-rail__list { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}
/* воздух перед подвалом: лента — последний блок на странице корзины */
.bag-rail { margin-bottom: 38px; }
.bag .bag-rail { margin-bottom: 30px; }
.bag-rail + .footer, .bag-rail:last-child { margin-bottom: 38px; }

/* стрелки у рекомендаций — как у ленты жанров */
.bag-rail__row { display: flex; align-items: center; gap: 8px; }
.bag-rail__row .bag-rail__list { flex: 1 1 auto; min-width: 0; margin: 12px 0 0; padding: 2px 2px 8px; }
.bag .bag-rail__row .bag-rail__list { margin: 16px 0 0; padding: 2px 2px 10px; }
.bag-rail__nav {
  flex: none;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  padding: 0;
  margin-top: 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--tint-rgb), 0.06);
  color: var(--paper);
  cursor: pointer;
  transition: opacity .18s ease, background .18s ease, transform .12s ease;
}
.bag-rail__nav:hover { background: rgba(var(--tint-rgb), 0.12); }
.bag-rail__nav:active { transform: scale(0.94); }
.bag-rail__nav[disabled] { opacity: 0.28; pointer-events: none; }
.bag .bag-rail__nav { margin-top: 16px; }
@media (min-width: 900px) {
  .bag-rail__nav { display: grid; }
}
/* на узких экранах и в шторке корзины стрелки — поверх ленты, полупрозрачные:
   показываем только ту, куда действительно можно листать */
@media (max-width: 899px) {
  .bag-rail__row { position: relative; }
  .bag-rail__nav {
    display: grid;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    margin: 0;
    z-index: 3;
    background: rgba(var(--ink-rgb), 0.72);
    border-color: var(--line-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  html[data-theme="light"] .bag-rail__nav { background: rgba(255, 253, 249, 0.86); }
  .bag-rail__nav[data-rail-nav="-1"] { left: 2px; }
  .bag-rail__nav[data-rail-nav="1"] { right: 2px; }
  .bag-rail__nav:active { transform: translateY(-50%) scale(0.94); }
  .bag-rail__nav[disabled] { display: none; }
}
@media (max-width: 899px) {
  .bag-rail__list { gap: 12px; grid-auto-columns: calc((100% - 12px) / 2); }
  .bag .bag-rail__list { gap: 12px; grid-auto-columns: calc((100% - 12px) / 2); }
}

/* на телефоне карточки не «переворачиваются»: спокойное появление */
@keyframes rvCardFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .grid.is-swapping .card,
  .card.is-new {
    animation: rvCardFadeUp 0.3s var(--ease-out) both !important;
    animation-delay: 0ms !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .grid.is-swapping .card,
  .card.is-new { animation: none !important; }
}


/* =======================================================================
   32. Корзина целиком: шторка и страница /cart/ — как оформление заказа
   Шторка шириной 420px не может жить по правилам широкой страницы:
   лента рекомендаций получает ровно две целых карточки, стрелки уходят
   поверх ленты. Страница собирается из тех же карточек, что и checkout:
   радиус 20, hairline-разделители, липкий итог справа.
   ======================================================================= */

/* ---------- шторка: лента «С этим берут» ---------- */
#cartDrawer .bag-rail {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
#cartDrawer .bag-rail__head h3 { font-size: 17px; }
#cartDrawer .bag-rail__head p { margin-top: 2px; font-size: 12.5px; }
#cartDrawer .bag-rail__row { position: relative; }
#cartDrawer .bag-rail__list {
  gap: 12px;
  grid-auto-columns: calc((100% - 12px) / 2);
  margin: 12px 0 0;
  padding: 2px 0 6px;
  scroll-padding: 0;
}
/* стрелки поверх ленты и только там, куда реально можно листать */
#cartDrawer .bag-rail__nav {
  display: grid;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  margin: 0;
  z-index: 3;
  border-color: var(--line-strong);
  background: rgba(var(--ink-rgb), 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-theme="light"] #cartDrawer .bag-rail__nav { background: rgba(255, 253, 249, 0.86); }
#cartDrawer .bag-rail__nav[data-rail-nav="-1"] { left: 0; }
#cartDrawer .bag-rail__nav[data-rail-nav="1"] { right: 0; }
#cartDrawer .bag-rail__nav:active { transform: translateY(-50%) scale(0.94); }
#cartDrawer .bag-rail__nav[disabled] { display: none; }
#cartDrawer .mini__title { font-size: 13px; }
#cartDrawer .mini__meta { font-size: 11.5px; }

/* ---------- страница корзины ---------- */
.page-section--bag .woocommerce { max-width: 1160px; }
.bag { display: grid; gap: 16px; }

.bag-hero {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 2px 2px 16px;
  text-align: left;
  border-bottom: 0;
}
.bag-hero__title {
  font: 700 clamp(26px, 3.4vw, 38px)/1.12 var(--ff-body);
  letter-spacing: -0.02em;
}
.bag-hero__sub { max-width: 640px; font-size: 15.5px; }
.bag-hero .btn { min-width: 240px; min-height: 50px; }
/* на вебе главная кнопка живёт в карточке итога — не дублируем её сверху */
@media (min-width: 900px) {
  .bag-hero__go { display: none; }
}

.bag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 20px;
  align-items: start;
}

/* карточка со списком пластинок */
.bag-card {
  min-width: 0;
  padding: 20px 22px 6px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.bag-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.bag-card__title {
  margin: 0;
  font: 700 20px/1.2 var(--ff-body);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
}
.bag-card__count { font-size: 13px; color: var(--paper-mute); white-space: nowrap; }

.bag-lines--big { margin: 0; }
.bag-lines--big .bag-line {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.bag-lines--big .bag-line:last-child { border-bottom: 0; }
.bag-lines--big .bag-line__cover { width: 120px; }
.bag-lines--big .bag-line__title { font-size: 17px; }
.bag-lines--big .bag-line__meta { font-size: 13.5px; }
.bag-lines--big .bag-line__price { font-size: 17px; }
.bag-lines--big .bag-link { font-size: 13.5px; }

/* правая колонка: липкий итог + справка, обе — карточки */
.bag-grid__side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 14px;
  padding-top: 0;
}
.bag-sum--big { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--ink-2); }
.bag-sum__title { margin-bottom: 10px; font-size: 18px; }
.bag-sum--big .bag-sum__go { margin-top: 14px; }
.bag-perks {
  gap: 14px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.bag-perks li { gap: 3px; padding-top: 14px; border-top: 1px solid var(--line); }
.bag-perks li:first-child { padding-top: 0; border-top: 0; }

/* подборки на странице — тоже карточки, как блоки оформления */
.bag .bag-rail {
  margin: 0;
  padding: 20px 22px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.bag .bag-rail__head h3 { font-size: 20px; }
.bag .bag-rail__row .bag-rail__list { margin: 14px 0 0; padding: 2px 0 14px; }
/* на вебе стрелки живут в строке заголовка: лента выровнена по тексту,
   а не сдвинута вправо кнопками */
@media (min-width: 900px) {
  .bag .bag-rail { position: relative; padding-bottom: 10px; }
  .bag .bag-rail__head { padding-right: 92px; }
  .bag .bag-rail__nav {
    position: absolute;
    top: 16px;
    width: 32px;
    height: 32px;
    margin: 0;
    z-index: 3;
  }
  .bag .bag-rail__nav[data-rail-nav="-1"] { right: 60px; }
  .bag .bag-rail__nav[data-rail-nav="1"] { right: 22px; }
  .bag .bag-rail__nav:active { transform: scale(0.94); }
}
/* подвал шторки — та же поверхность, что у панели: без кремовой полосы */
.bag-drawer__foot { background: transparent; }
/* на планшете в кадр входят три карточки — две раздувались до 330px */
@media (min-width: 600px) and (max-width: 899px) {
  .bag-rail__list { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .bag .bag-rail__list { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
}


/* =======================================================================
   33. Журнал: истории пластинок (26.10.2026)
   Главная — лид + три строки + четыре карточки, дальше архив /journal/
   и страница статьи. Всё в той же системе: карточки, hairline-разделители,
   апельсин как акцент, Unbounded в заголовках.
   ======================================================================= */

/* ---------- шапка блока ---------- */
.journal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font: 600 11.5px/1 var(--ff-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.journal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 3px rgba(247, 148, 30, 0.16);
}
.journal__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font: 600 13.5px/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.journal__all:hover { background: rgba(var(--tint-rgb), 0.08); border-color: var(--paper-dim); }
.journal__all svg { transition: transform 0.25s ease; }
.journal__all:hover svg { transform: translateX(3px); }

/* ---------- рубрики ---------- */
.journal__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.journal__cat {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--paper-dim);
  font: 500 13px/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.journal__cat:hover { color: var(--paper); background: rgba(var(--tint-rgb), 0.07); }
.journal__cat.is-active { background: var(--acid); border-color: var(--acid); color: var(--on-acid); font-weight: 600; }

/* ---------- раскладка главной ---------- */
.journal__top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.journal__rows { display: grid; }
.journal__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.journal__row:first-child { border-top: 0; padding-top: 0; }
.journal__row:last-child { padding-bottom: 0; }
.journal__num {
  font: 900 13px/1.5 var(--ff-display);
  letter-spacing: 0.04em;
  color: var(--acid-text);
}
.journal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 20px;
  margin-top: 26px;
}
.journal__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- карточка статьи ---------- */
.story {
  display: grid;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.story__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 1px 2px rgba(42, 26, 16, 0.14);
}
.story__cover img,
.story__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.story:hover .story__cover img { transform: scale(1.035); }
.story__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.story__kick {
  font: 600 10.5px/1 var(--ff-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid-text);
}
.story__title {
  font: 700 15.5px/1.32 var(--ff-body);
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: color 0.18s ease;
}
.story:hover .story__title { color: var(--acid-text); }
.story__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  color: var(--paper-mute);
}
.story__meta i { font-style: normal; }
.story__meta i:first-child::after { content: "·"; margin-left: 8px; }

/* лид: большая обложка и заголовок в дисплейном шрифте */
.story--lead .story__cover { aspect-ratio: 4 / 3; border-radius: 20px; }
.story--lead .story__body { gap: 9px; align-content: center; }
/* на широком экране лид — разворот: обложка слева, текст справа */
@media (min-width: 900px) {
  .story--lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
  .story--lead .story__cover { aspect-ratio: auto; height: 100%; min-height: 280px; }
}
.story--lead .story__title {
  font: 800 clamp(21px, 1.9vw, 27px)/1.16 var(--ff-display);
  letter-spacing: -0.025em;
}
.story--lead .story__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 62ch;
}
.story__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(18, 12, 9, 0.64);
  color: #f3e8d4;
  font: 600 10.5px/1 var(--ff-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* строка в списке справа */
.story--row {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.story__thumb {
  display: block;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-3);
}
.story__rowtext { display: grid; gap: 4px; min-width: 0; }
.story--row .story__title {
  font: 600 14px/1.35 var(--ff-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* типографская обложка, если картинки нет */
.story__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 15% 0%, hsl(calc(var(--h, 20) * 1deg) 78% 55% / 0.55), transparent 62%),
    linear-gradient(150deg, #2b1a0f, #150d08 72%);
}
.story__poster i {
  font: 900 clamp(38px, 6vw, 76px)/1 var(--ff-display);
  letter-spacing: -0.03em;
  color: rgba(243, 232, 212, 0.92);
}
.story__poster-disc {
  position: absolute;
  right: -10%;
  bottom: -18%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #0b0705 0 2px, #191009 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(243, 232, 212, 0.12);
}
.story__poster-disc::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: inset 0 0 0 2px #150d08;
}

/* ---------- архив /journal/ ---------- */
.journal-page .section__sub { max-width: 64ch; }
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  margin-top: 10px;
}
.story-grid .story__cover { aspect-ratio: 16 / 11; border-radius: 18px; }
.story-grid .story__title { font-size: 17px; }
.story-pager { display: flex; justify-content: center; margin-top: 34px; }
.story-pager .nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.story-pager .page-numbers {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font: 600 13.5px/1 var(--ff-body);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.story-pager .page-numbers:hover { background: rgba(var(--tint-rgb), 0.08); }
.story-pager .page-numbers.current { background: var(--acid); border-color: var(--acid); color: var(--on-acid); }
.story-pager .page-numbers.dots { border: 0; }
.story-pager .screen-reader-text { display: none; }
.story-empty { padding: 40px 0 10px; }
.story-empty__title { margin: 0 0 6px; font: 700 20px/1.2 var(--ff-body); color: var(--paper); }
.story-empty__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--paper-dim); }

/* ---------- страница статьи ---------- */
.story-page { max-width: 1160px; margin-inline: auto; }
.story-hero { max-width: 900px; }
.story-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
  color: var(--paper-mute);
  font: 500 13px/1 var(--ff-body);
  text-decoration: none;
}
.story-hero__back:hover { color: var(--paper); }
.story-hero__kick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 600 11px/1 var(--ff-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.story-hero__kick a { color: var(--acid-text); text-decoration: none; }
.story-hero__kick i { font-style: normal; }
.story-hero__title {
  margin: 0;
  font: 800 clamp(28px, 4.4vw, 52px)/1.08 var(--ff-display);
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--paper);
}
.story-hero__lead {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--paper-dim);
}
.story-hero__meta { margin: 14px 0 0; font-size: 12.5px; color: var(--paper-mute); }
.story-figure {
  position: relative;
  margin: 28px 0 6px;
  aspect-ratio: 16 / 8;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: var(--shadow-card, 0 18px 40px rgba(42, 26, 16, 0.18));
}
.story-figure img { width: 100%; height: 100%; object-fit: cover; }

.story-body {
  max-width: 720px;
  margin: 34px auto 0;
  font-size: 17px;
  line-height: 1.72;
  color: var(--paper-dim);
}
.story-body > p, .story-body > ul, .story-body > ol { margin: 0 0 1.15em; }
.story-body .lead { font-size: 19.5px; line-height: 1.6; color: var(--paper); }
.story-body h2 {
  margin: 1.9em 0 0.55em;
  font: 800 23px/1.24 var(--ff-display);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}
.story-body h3 {
  margin: 1.6em 0 0.5em;
  font: 700 17px/1.35 var(--ff-body);
  text-transform: none;
  color: var(--paper);
}
.story-body ul { list-style: disc outside; padding-left: 1.25em; }
.story-body ol { list-style: decimal outside; padding-left: 1.35em; }
.story-body li::marker { color: var(--acid-text); }
.story-body li { margin: 0 0 0.45em; }
.story-body blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--acid);
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
  color: var(--paper);
}
.story-body a { color: var(--acid-text); text-decoration: underline; text-underline-offset: 3px; }
.story-body__back { margin-top: 2.2em; }
.story-body__back a { font: 600 14px/1 var(--ff-body); text-decoration: none; }

/* «есть в каталоге» */
.story-listen {
  margin: 34px 0 0;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(247, 148, 30, 0.35);
  background: rgba(247, 148, 30, 0.08);
}
.story-listen__kick {
  margin: 0 0 8px;
  font: 600 10.5px/1 var(--ff-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acid-text);
}
.story-listen__text { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--paper); }
.story-listen__go {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font: 600 14px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
.story-listen__go:hover { transform: none; }

/* переходы между статьями */
.story-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 900px;
  margin: 42px auto 0;
}
.story-nav__item {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.story-nav__item:hover { border-color: var(--paper-dim); }
.story-nav__item--next { text-align: right; }
.story-nav__item:only-child { grid-column: 1 / -1; }
.story-nav__dir { font: 500 12px/1 var(--ff-body); color: var(--paper-mute); }
.story-nav__item b { font: 600 15px/1.35 var(--ff-body); color: var(--paper); }

.story-more { margin-top: 50px; }
.story-more__title {
  margin: 0 0 18px;
  font: 800 20px/1.2 var(--ff-display);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}

/* ---------- адаптив ---------- */
@media (max-width: 1023px) {
  .journal__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal__grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story--lead .story__cover { aspect-ratio: 16 / 9; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .journal__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin: 0 -18px 18px;
    padding: 2px 18px 6px;
    scrollbar-width: none;
  }
  .journal__cats::-webkit-scrollbar { display: none; }
  .journal__all { padding: 9px 14px; font-size: 12.5px; }
  .story--lead .story__cover { aspect-ratio: 4 / 3; border-radius: 16px; }
  .story--lead .story__title { font-size: 21px; }
  .story--lead .story__text { font-size: 14px; }
  .story-figure { aspect-ratio: 4 / 3; border-radius: 18px; margin: 20px 0 4px; }
  .story-body { margin-top: 26px; font-size: 16px; line-height: 1.68; }
  .story-body .lead { font-size: 18px; }
  .story-body h2 { font-size: 20px; }
  .story-body blockquote { font-size: 17px; }
  .story-nav { grid-template-columns: 1fr; }
  .story-nav__item--next { text-align: left; }
}
@media (max-width: 600px) {
  .journal__row { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .story--row { grid-template-columns: 64px minmax(0, 1fr); }
  .story__thumb { width: 64px; }
  .journal__grid { gap: 18px 14px; margin-top: 20px; }
  .story__title { font-size: 14.5px; }
  .story--lead .story__title { font-size: 19.5px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .story-grid .story__cover { aspect-ratio: 16 / 10; }
  .story-listen { padding: 18px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .story:hover .story__cover img,
  .journal__all svg { transition: none; transform: none; }
}

@media (max-width: 899px) {
  .bag { gap: 14px; }
  .bag-hero { padding: 0 0 12px; gap: 8px; }
  .bag-hero__sub { font-size: 14.5px; }
  .bag-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bag-grid__side { position: static; gap: 12px; }
  .bag-card { padding: 16px 16px 4px; border-radius: 18px; }
  .bag-card__title { font-size: 18px; }
  .bag-lines--big .bag-line { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .bag-lines--big .bag-line__cover { width: 88px; }
  .bag-lines--big .bag-line__title { font-size: 15.5px; }
  .bag-lines--big .bag-line__meta { font-size: 13px; }
  .bag-lines--big .bag-line__price { font-size: 16px; }
  .bag-sum--big, .bag-perks { padding: 16px; border-radius: 18px; }
  .bag .bag-rail { padding: 16px 16px 6px; border-radius: 18px; }
  .bag .bag-rail__head h3 { font-size: 18px; }
  .bag .bag-rail__row .bag-rail__list { margin: 12px 0 0; padding: 2px 0 6px; }
}


/* =======================================================================
   34. Читальный зал: атмосфера чтения (26.10.2026)
   /journal/ — не «список статей», а комната с лампой: тёплое свечение,
   фотографии в бумажных рамках (не как карточки товара), полки по рубрикам.
   В статье — полоса прогресса чтения и буквица.
   ======================================================================= */

.reading {
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  margin-inline: auto;
  padding: calc(var(--header-h, 68px) + 34px) clamp(16px, 4vw, 24px) 12px;
}
/* лампа над столом: радиальное тепло сверху */
.reading__glow {
  position: absolute;
  z-index: -1;
  top: -70px;
  left: -12%;
  right: -12%;
  height: 520px;
  pointer-events: none;
  background:
    radial-gradient(46% 62% at 34% 0%, rgba(247, 148, 30, 0.2), transparent 70%),
    radial-gradient(38% 54% at 74% 4%, rgba(255, 214, 150, 0.14), transparent 72%);
}
html[data-theme="dark"] .reading__glow {
  background:
    radial-gradient(46% 62% at 34% 0%, rgba(247, 148, 30, 0.17), transparent 70%),
    radial-gradient(38% 54% at 74% 4%, rgba(255, 186, 112, 0.07), transparent 72%);
}
.reading__glow--page { top: -40px; height: 420px; }

.reading__hero { max-width: 800px; padding: 6px 0 4px; }
.reading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font: 600 11.5px/1 var(--ff-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.reading__lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff6e2, var(--acid) 62%, #b25a00);
  box-shadow: 0 0 16px 5px rgba(247, 148, 30, 0.32);
}
.reading__title {
  margin: 0;
  font: 800 clamp(34px, 5.2vw, 62px)/1.03 var(--ff-display);
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--paper);
}
.reading__lead {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--paper-dim);
}
.reading__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.reading__stats li { display: grid; gap: 3px; }
.reading__stats b { font: 800 22px/1 var(--ff-display); color: var(--paper); }
.reading__stats span { font-size: 12px; letter-spacing: 0.04em; color: var(--paper-mute); }

.reading__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 4px; }

/* блок на главной — та же комната, только компактнее */
.journal { position: relative; isolation: isolate; }
.journal .story__cover img { filter: sepia(0.14) saturate(1.05) contrast(1.02); }
.journal .story--lead .story__cover {
  padding: 9px;
  border-radius: 20px;
  background: linear-gradient(160deg, #fcf5e6, #efe2c8);
  box-shadow: 0 18px 38px rgba(42, 26, 16, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .journal .story--lead .story__cover {
  background: linear-gradient(160deg, #2b1d13, #1a1009);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(243, 232, 212, 0.09);
}
.journal .story--lead .story__cover img { border-radius: 12px; }
.journal__cat i { font-style: normal; margin-left: 6px; font-size: 11px; opacity: 0.62; }

/* ---------- полка номера ---------- */
.reading__shelf { margin: 26px 0 4px; }
.reading__shelf-title,
.reading__rail-head h2,
.reading__all-head h2 {
  margin: 0 0 14px;
  font: 800 20px/1.2 var(--ff-display);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}
.reading__shelf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.reading__shelf .story--lead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.reading__shelf .story--lead .story__cover { aspect-ratio: 16 / 11; height: auto; min-height: 0; }
.reading__shelf-side { display: grid; }

/* ---------- полки по рубрикам ---------- */
.reading__rail { margin: 34px 0 0; }
.reading__rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.reading__rail-head h2 { margin-bottom: 14px; }
.reading__rail-head a {
  font: 600 12.5px/1 var(--ff-body);
  color: var(--paper-mute);
  text-decoration: none;
  white-space: nowrap;
}
.reading__rail-head a:hover { color: var(--acid-text); }
.reading__rail-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 18px) / 4);
  gap: 18px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.reading__rail-list::-webkit-scrollbar { display: none; }
.reading__rail-list .story { scroll-snap-align: start; }

/* ---------- все материалы ---------- */
.reading__all { margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.reading__all-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.reading__all-head h2 { margin: 0 0 18px; }

/* ---------- фотографии как отпечатки, а не карточки товара ---------- */
.story-grid--print .story__cover,
.reading__rail-list .story__cover,
.reading__shelf .story__cover {
  padding: 8px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #fcf5e6, #efe2c8);
  box-shadow: 0 14px 28px rgba(42, 26, 16, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.32s ease;
  transform: rotate(-0.45deg);
}
html[data-theme="dark"] .story-grid--print .story__cover,
html[data-theme="dark"] .reading__rail-list .story__cover {
  background: linear-gradient(160deg, #2b1d13, #1a1009);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(243, 232, 212, 0.09);
}
.story-grid--print > .story:nth-child(even) .story__cover,
.reading__rail-list > .story:nth-child(even) .story__cover { transform: rotate(0.55deg); }
.story-grid--print .story:hover .story__cover,
.reading__rail-list .story:hover .story__cover { transform: rotate(0deg) translateY(-3px); }
.story-grid--print .story__cover img,
.reading__rail-list .story__cover img {
  border-radius: 3px;
  filter: sepia(0.16) saturate(1.07) contrast(1.03) brightness(1.01);
}
.story-grid--print .story__cover::after,
.reading__rail-list .story__cover::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 3px;
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 0%, rgba(255, 205, 138, 0.2), transparent 56%),
    linear-gradient(180deg, rgba(255, 240, 214, 0.05), rgba(26, 14, 8, 0.18));
  mix-blend-mode: multiply;
}
.reading__rail-list .story__tag,
.story-grid--print .story__tag { z-index: 2; left: 16px; bottom: 16px; }

/* обложка номера — тоже в рамке */
html[data-theme="dark"] .reading__shelf .story__cover {
  background: linear-gradient(160deg, #2b1d13, #1a1009);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(243, 232, 212, 0.09);
}
.reading__shelf .story__cover img {
  border-radius: 4px;
  filter: sepia(0.16) saturate(1.07) contrast(1.03) brightness(1.01);
}
.reading__shelf .story__cover::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 0%, rgba(255, 205, 138, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(255, 240, 214, 0.05), rgba(26, 14, 8, 0.16));
  mix-blend-mode: multiply;
}
.reading__shelf .story__tag { z-index: 2; left: 18px; bottom: 18px; }

/* ---------- полоса прогресса чтения ---------- */
.read-progress {
  position: fixed;
  z-index: 126;
  left: 0;
  right: 0;
  top: calc(var(--header-h, 68px) + var(--rv-ab, 0px));
  height: 3px;
  pointer-events: none;
  background: transparent;
}
.read-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--acid-deep), var(--acid));
  box-shadow: 0 0 12px rgba(247, 148, 30, 0.55);
  transition: width 0.1s linear;
}
.reading-room { position: relative; isolation: isolate; }
.reading-room .story-figure {
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, #fcf5e6, #efe2c8);
  box-shadow: 0 22px 44px rgba(42, 26, 16, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .reading-room .story-figure {
  background: linear-gradient(160deg, #2b1d13, #1a1009);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(243, 232, 212, 0.09);
}
.reading-room .story-figure img {
  border-radius: 4px;
  filter: sepia(0.14) saturate(1.06) contrast(1.03);
}
.reading-room .story-hero__title { letter-spacing: -0.03em; }

/* буквица у первого абзаца после лида */
.story-body > h2:first-of-type + p::first-letter,
.story-body > p.lead + p::first-letter {
  float: left;
  margin: 4px 10px 0 0;
  font: 800 56px/0.82 var(--ff-display);
  color: var(--paper);
}

@media (max-width: 1023px) {
  .reading__shelf-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .reading__rail-list { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
  .story-grid--print .story__cover { transform: none; }
}
@media (max-width: 700px) {
  /* Как у остальных страниц: тот же шаг 7vw, без «гиганта» на телефоне */
  .reading__title { font-size: clamp(26px, 7vw, 40px); line-height: 1.08; }
  .reading__lead { font-size: 15px; }
  .reading__stats { gap: 10px 22px; }
  .reading__stats b { font-size: 18px; }
  .reading__rail-list { grid-auto-columns: 74%; gap: 12px; }
  .reading__rail-head { align-items: center; }
  .reading__rail-head a { font-size: 11.5px; }
  .reading__all-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .story-grid--print .story__cover,
  .reading__rail-list .story__cover { padding: 6px; }
  .story-grid--print .story__cover::after,
  .reading__rail-list .story__cover::after { inset: 6px; }
  .reading__rail-list .story__tag,
  .story-grid--print .story__tag { left: 12px; bottom: 12px; }
  .story-body > h2:first-of-type + p::first-letter,
  .story-body > p.lead + p::first-letter { font-size: 46px; }
  .reading-room .story-figure { padding: 7px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-grid--print .story__cover,
  .reading__rail-list .story__cover { transform: none !important; }
}

/* цитата на полке номера */
.reading__quote {
  margin: 18px 0 0;
  padding: 18px 20px;
  border-left: 2px solid var(--acid);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(247, 148, 30, 0.09), transparent 72%);
  font: 500 15px/1.55 var(--ff-body);
  color: var(--paper-dim);
}
@media (max-width: 1023px) {
  .reading__quote { margin-top: 14px; font-size: 14px; }
}


/* =======================================================================
   35. Журнальная вёрстка читального зала (26.10.2026)
   Выходные данные номера, линейки-разделители, узкие заголовки Oswald —
   как в журнале 70-х. Статья — разворот: текст слева, липкая колонка
   с выходными данными и каталогом справа.
   ======================================================================= */

/* ---------- шапка номера ---------- */
.reading__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}
.reading__issue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 var(--ff-cond);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
  white-space: nowrap;
}
.reading__issue--mid { color: var(--paper); }
.reading__issue--right { justify-content: flex-end; }
.reading__rule {
  height: 2px;
  background: var(--paper);
  opacity: 0.8;
  box-shadow: 0 4px 0 var(--line-strong);
  margin-bottom: 20px;
}
.reading__rule--thin {
  height: 1px;
  box-shadow: none;
  opacity: 0.32;
  margin: 22px 0 16px;
}

/* узкие заголовки разделов — журнальный голос */
.reading__shelf-title,
.reading__rail-head h2,
.reading__all-head h2,
.story-more__title {
  font-family: var(--ff-cond);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.journal__num { font-family: var(--ff-cond); letter-spacing: 0.1em; }

/* ---------- статья: разворот с колонкой ---------- */
.story-main { min-width: 0; }
.story-aside { display: grid; gap: 14px; align-content: start; }
.story-aside__card {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.story-aside__kick {
  margin: 0 0 12px;
  font: 600 10.5px/1 var(--ff-cond);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acid-text);
}
.story-aside__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
}
.story-aside__meta dt {
  padding-top: 2px;
  font: 500 11px/1.2 var(--ff-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.story-aside__meta dd { margin: 0; color: var(--paper); font-weight: 600; }
.story-aside__meta a { color: var(--acid-text); text-decoration: none; }
.story-aside__meta a:hover { text-decoration: underline; }
.story-aside__card--listen {
  border-color: rgba(247, 148, 30, 0.35);
  background: rgba(247, 148, 30, 0.08);
}
.story-aside__card--listen .story-listen__kick { margin: 0 0 8px; }
.story-aside__card--listen .story-listen__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper);
}
.story-aside__card--listen .story-listen__go {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  font-size: 13.5px;
}
.story-aside__links { display: grid; gap: 10px; padding: 4px 2px; }
.story-aside__links a {
  font: 600 13px/1.35 var(--ff-body);
  color: var(--paper-dim);
  text-decoration: none;
}
.story-aside__links a:hover { color: var(--acid-text); }

.story-layout .story-body { margin: 0; max-width: 100%; }
.story-layout .story-body__back { margin-top: 26px; }
.story-layout .story-nav { margin: 24px 0 0; max-width: none; }

@media (min-width: 1024px) {
  .story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 46px;
    align-items: start;
    margin-top: 34px;
  }
  .story-aside {
    position: sticky;
    top: calc(var(--header-h, 68px) + 24px);
  }
  .story-layout .story-body { font-size: 16.5px; }
}
@media (max-width: 1023px) {
  .story-layout { margin-top: 26px; }
  .story-aside { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .story-aside__links { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 20px; }
}
@media (max-width: 640px) {
  .reading__masthead { flex-wrap: wrap; gap: 6px 12px; }
  .reading__issue { font-size: 10px; letter-spacing: 0.18em; }
  .reading__shelf-title,
  .reading__rail-head h2,
  .reading__all-head h2,
  .story-more__title { font-size: 18px; letter-spacing: 0.08em; }
  .story-aside__card { padding: 16px; border-radius: 16px; }
  .story-aside { grid-template-columns: minmax(0, 1fr); }
  .story-aside__links { grid-auto-flow: row; gap: 10px; }
}

/* мягкие переносы в теле статьи — как в журнале */
.story-body p { hyphens: auto; }

/* плакатные обложки: нарисованы в палитре зала — не фильтруем и не режем */
.story__cover:has(img[src$=".svg"])::after { opacity: 0.45; }
.story__cover img[src$=".svg"] { filter: none; }
.story-figure:has(img[src$=".svg"]) {
  aspect-ratio: 4 / 3;
  max-width: 820px;
  margin-inline: auto;
}
.story-figure img[src$=".svg"] { filter: none; object-fit: cover; }
@media (max-width: 767px) {
  .story-figure:has(img[src$=".svg"]) { aspect-ratio: 4 / 3; }
}

/* =======================================================================
   36. Журнал: воздух до подвала, SEO-блок статьи, мобильные рубрики
   ======================================================================= */

/* Между последней карточкой/блоком статьи и подвалом должен быть воздух:
   раньше секция заканчивалась отступом 8px и подвал «прилипал» к тексту. */
.reading,
.page-section.story-page {
  padding-bottom: clamp(64px, 8vw, 112px);
}
.journal { padding-bottom: clamp(24px, 3vw, 40px); }
.reading__all { margin-bottom: 14px; }
.story-more { margin-bottom: 8px; }
.story-page .story-body__back { margin-bottom: 6px; }

/* ---------- SEO-блок в конце статьи ---------- */
.story-seo {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
}
.story-seo h2 {
  margin: 0 0 14px;
  font: 800 clamp(21px, 2.2vw, 27px)/1.22 var(--ff-display);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}
.story-seo h3 {
  margin: 30px 0 10px;
  font: 700 17px/1.35 var(--ff-body);
  color: var(--paper);
}
.story-seo p { margin: 0 0 1.05em; }
.story-seo ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.story-seo li { margin-bottom: 0.5em; }
.story-seo strong { color: var(--paper); font-weight: 700; }
.story-seo__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.story-seo__tags a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.story-seo__tags a:hover {
  border-color: var(--acid);
  background: rgba(247, 148, 30, 0.08);
  color: var(--acid-text);
}

/* ---------- рубрики на архиве: одна строка со скроллом на телефоне ---------- */
@media (max-width: 767px) {
  .reading__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin: 22px -18px 6px;
    padding: 2px 18px 8px;
    scrollbar-width: none;
  }
  .reading__cats::-webkit-scrollbar { display: none; }
  .reading__cats .journal__cat { flex: none; }

  .reading__masthead {
    align-items: flex-start;
    gap: 6px 12px;
  }
  .reading__issue--mid { order: 3; flex-basis: 100%; }
  .reading__issue--right { margin-left: auto; }

  .story-hero__kick { flex-wrap: wrap; row-gap: 6px; }
  .story-seo { margin-top: 36px; padding-top: 24px; }
  .story-seo__tags { gap: 8px; }
  .story-seo__tags a { min-height: 32px; padding: 0 10px; font-size: 13px; }
}

@media (max-width: 600px) {
  .reading { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .page-section.story-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .journal { padding-bottom: 20px; }
  .story-page .story-more { margin-top: 38px; }
}

@media (max-width: 420px) {
  .reading__stats { gap: 10px 18px; }
  .reading__stats b { font-size: 17px; }
  .reading__stats span { font-size: 11px; }
  .story-hero__title { font-size: clamp(24px, 7vw, 34px); line-height: 1.1; }
  .story-seo h2 { font-size: 20px; }
}

/* тёмная тема: рамка SEO-блока не должна светиться */
html[data-theme="dark"] .story-seo { border-top-color: rgba(243, 232, 212, 0.12); }

/* =======================================================================
   35. Каталог: компактная кнопка «Показать ещё» в духе Apple Music
   (26.10.2026). Никакой полосы на весь экран: центрированная пилюля,
   тихий счётчик и много воздуха до подвала.
   ======================================================================= */
#catalog:last-of-type { padding-bottom: clamp(64px, 9vw, 112px); }

.catalog__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(36px, 6vw, 64px);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.catalog__more-count {
  margin: 0;
  font-family: var(--ff-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.catalog__more-btn {
  width: auto;
  min-width: 0;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.55);
  transition: transform .22s var(--ease), box-shadow .22s, background .22s, color .22s;
}
.catalog__more-btn:hover {
  transform: translateY(-1px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.45);
}
.catalog__more-btn:active { transform: scale(0.98); }
.catalog__more-btn svg { color: var(--acid); transition: transform .22s var(--ease); }
.catalog__more-btn:hover svg { transform: translateY(2px); }
.catalog__more-btn[hidden] { display: none !important; }
.catalog__more-hint { margin: 0; font-size: 12px; color: var(--paper-mute); }
.catalog__more-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: -2px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--paper-mute);
  font-family: var(--ff-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}
.catalog__more-top:hover { color: var(--acid); }

@media (max-width: 767px) {
  #catalog:last-of-type { padding-bottom: 84px; }
  .catalog__more { margin-top: 36px; gap: 10px; }
  .catalog__more-btn { height: 46px; padding: 0 22px; font-size: 12px; }
}

/* =======================================================================
   36. «Как купить» — три карточки и воздух до подвала (26.10.2026)
   Блок был последним на главной и упирался в подвал: нижний отступ секции
   всего 8 px, а шаги — голый список с волосяными линиями. Теперь это
   карточки с оранжевыми номерами, мягкой подложкой и CTA-строкой.
   ======================================================================= */
#howto {
  padding-top: clamp(64px, 9vw, 96px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
.steps__head { max-width: 720px; margin-bottom: 0; }
.steps__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--ff-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.steps__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 3px rgba(247, 148, 30, 0.16);
}
.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 10px 26px -22px rgba(74, 47, 30, 0.4);
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s;
  overflow: hidden;
}
html[data-theme="dark"] .step {
  background: rgba(255, 246, 232, 0.045);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.step::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 148, 30, 0.14), transparent 70%);
  pointer-events: none;
}
@media (hover: hover) {
  .step:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 20px 36px -28px rgba(0, 0, 0, 0.45);
  }
}
.step__num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--acid);
  color: var(--on-acid);
  font-family: var(--ff-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px -12px rgba(247, 148, 30, 0.9);
}
.step__body { display: grid; gap: 8px; }
.step h3 {
  margin: 0;
  font-family: var(--ff-cond);
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}
.step p {
  margin: 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper-mute);
}
.steps__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 4vw, 36px);
}
.steps__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.55);
  transition: transform .22s var(--ease), box-shadow .22s;
}
.steps__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.45); }
.steps__cta-btn span { color: var(--acid); }
.steps__cta-link {
  color: var(--paper-mute);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.steps__cta-link:hover { color: var(--paper); border-color: var(--acid); }

@media (max-width: 1023px) {
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #howto { padding-top: 56px; padding-bottom: 84px; }
  .steps__list { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .step:last-child { grid-column: auto; }
  .step { padding: 18px; border-radius: 18px; }
  .steps__cta { flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; text-align: center; }
  .steps__cta-btn { width: auto; height: 48px; }
  .steps__cta-link { align-self: center; }
}

/* =======================================================================
   37. Шоурум и карта: компактные кнопки и воздух между блоками
   (26.10.2026). Кнопки растягивались на всю ширину карточки и ленты отзывов,
   а секция заканчивалась нижним отступом 8 px перед тёмным манифестом.
   ======================================================================= */
#showroom { padding-bottom: clamp(64px, 8vw, 96px); }

.shop__photos { margin-top: clamp(18px, 3vw, 28px); gap: clamp(8px, 1.4vw, 14px); }
.shop__visit { gap: clamp(14px, 2vw, 20px); margin-top: clamp(18px, 3vw, 26px); }
.shop__card { padding: clamp(20px, 3vw, 28px); }
.shop__reviews { margin-top: clamp(28px, 4vw, 44px); }
.shop__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.shop__btns .btn {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: 46px;
  padding: 0 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: normal;
  text-align: center;
}
.shop__btns .btn--acid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.5);
}
.shop__btns .btn--acid:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-1px);
}
.shop__btns .btn--ghost:hover { border-color: var(--acid); color: var(--acid); }
.shop__reviews .shop__btns { margin-top: 20px; }
.shop__map { min-height: clamp(300px, 34vw, 420px); }

@media (max-width: 560px) {
  .shop__btns { flex-direction: row; gap: 8px; }
  .shop__btns .btn { height: 44px; padding: 0 16px; font-size: 11.5px; }
}

/* =======================================================================
   38. Карточки каталога: спокойные заголовки и действия у цены
   (26.10.2026). Названия были слишком плотными и высокими, а «+» и
   прослушивание висели поверх обложки и перекрывали переход на страницу.
   Теперь обе кнопки стоят в нижней строке напротив цены.
   ======================================================================= */
.card__title {
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.005em;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.card__foot .card__price {
  min-width: 0;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 6px;
}
.card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.card__actions .card__play,
.card__actions .card__add {
  position: static;
  inset: auto;
  right: auto;
  bottom: auto;
  width: 34px;
  height: 34px;
  box-shadow: none;
}
.card__actions .card__play { border-width: 1.5px; }
.card__actions .card__add { box-shadow: 0 4px 12px -8px rgba(247, 148, 30, 0.8); }
.card__actions .card__play:hover,
.card__actions .card__add:hover { transform: scale(1.08); }
.card__actions .card__add:hover { transform: scale(1.08) rotate(90deg); }

/* оборот конверта: все четыре строки видны и не вылезают */
.back__tracks { justify-content: flex-start; padding-top: 2px; }
.back__tracks li { min-width: 0; }
.back__tracks span { min-width: 0; }
/* в светлой теме подложка конверта кремовая — текст должен быть тёмным */
html[data-theme="light"] .back__tracks li { color: #4a3324; }
html[data-theme="light"] .back__tracks i { color: #9d4e00; }
html[data-theme="light"] .back__top,
html[data-theme="light"] .back__bottom { color: #4a3324; }

@media (max-width: 559px) {
  .back__watermark { display: none; }
  .back__tracks li { padding: 2px 0; }
  .back__tracks li:nth-child(n + 4) { display: flex; }
  .back__btns { gap: 4px; }
  .back__open,
  .back__cmp { padding: 5px 3px; font-size: 8.5px; }
}

/* корзина на телефоне: верхняя кнопка — компактная пилюля,
   основная остаётся в карточке итога */
@media (max-width: 899px) {
  .bag-hero .btn {
    width: auto;
    min-width: 220px;
    min-height: 48px;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font: 600 12px/1 var(--ff-cond);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* сравнение на телефоне: две колонки целиком, без горизонтального скролла */
@media (max-width: 600px) {
  .cmp th,
  .cmp td { min-width: 132px; padding: 8px 6px; font-size: 12.5px; }
  .cmp th[scope="row"] { min-width: 74px; font-size: 11px; }
  .cmp__name {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cmp thead .cmp__ph { max-width: 100%; }
  .cmp .btn { width: 100%; padding: 0 10px; font-size: 11px; }
  .cmp__note { font-size: 12px; }
}

/* =======================================================================
   39. Мобильная производительность (26.10.2026)
   background-attachment: fixed на телефоне вызывает перерисовку всей
   страницы при скролле, а десятки backdrop-filter грузят GPU.
   ======================================================================= */
@media (max-width: 899px) {
  body { background-attachment: scroll, scroll !important; }
  body,
  body * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* =======================================================================
   40. Страница корзины: крошки, этапы, «Продолжить покупки» (26.10.2026)
   ======================================================================= */
.bag-crumbs { margin: 0 0 14px; }
.bag-crumbs b { color: var(--paper); font-weight: 600; }
.bag-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.bag-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-mute);
  font: 600 11px/1 var(--ff-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bag-steps li b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
  color: var(--paper);
  font-size: 10px;
}
.bag-steps li.is-active {
  border-color: var(--acid);
  color: var(--paper);
  background: rgba(247, 148, 30, 0.08);
}
.bag-steps li.is-active b { background: var(--acid); color: var(--on-acid); }
.bag-hero__kicker {
  margin: 0;
  color: var(--paper-mute);
  font: 600 11px/1 var(--ff-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bag-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.bag-hero__continue {
  color: var(--paper-mute);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.bag-hero__continue:hover { color: var(--paper); border-color: var(--acid); }

@media (max-width: 899px) {
  .bag-steps { gap: 6px; margin-bottom: 14px; }
  .bag-steps li { height: 28px; padding: 0 9px; font-size: 10px; gap: 6px; }
  .bag-steps li b { width: 16px; height: 16px; font-size: 9px; }
  .bag-hero__actions { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .bag-hero__continue { align-self: center; }
  .grades,
  .journal,
  .shop,
  .manifesto,
  .steps { content-visibility: auto; contain-intrinsic-size: auto 760px; }
}

@media (max-width: 420px) {
  .card__actions .card__play,
  .card__actions .card__add { width: 32px; height: 32px; }
}

/* Заголовок на странице пластинки: тот же характер, но спокойнее */
.rv-pfb__title {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  /* Общее правило витрины: заголовок первого уровня на телефоне ≈ 7vw */
  .rv-pfb__title {
    font-size: clamp(23px, 7vw, 30px);
    line-height: 1.16;
  }
}

/* =======================================================================
   41. Корзина у правого бортика (26.10.2026)
   Постоянная кнопка на десктопе + жест «потянуть от края влево».
   Середина страницы не перехватывает мышь: выделение текста работает.
   На мобильных кнопку не показываем — там есть таббар.
   ======================================================================= */
.edge-cart {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 40;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 9px 15px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 15px 0 0 15px;
  background: rgba(var(--ink-rgb), 0.92);
  color: var(--paper);
  box-shadow: -10px 14px 36px rgba(0, 0, 0, 0.34);
  cursor: grab;
  touch-action: pan-y;
  transform: translateY(-50%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s, background 0.22s, opacity 0.18s;
}
.edge-cart:hover,
.edge-cart:focus-visible {
  transform: translateY(-50%) translateX(-6px);
  border-color: var(--acid);
  background: rgba(var(--ink-rgb), 0.98);
  outline: none;
}
.edge-cart:active { cursor: grabbing; }
.edge-cart__icon {
  display: grid;
  place-items: center;
  color: var(--paper);
  transition: color 0.22s;
}
.edge-cart:hover .edge-cart__icon,
.edge-cart:focus-visible .edge-cart__icon { color: var(--acid); }
.edge-cart__label {
  writing-mode: vertical-rl;
  color: var(--paper-dim);
  font: 600 10px/1 var(--ff-cond);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.22s;
}
.edge-cart:hover .edge-cart__label,
.edge-cart:focus-visible .edge-cart__label { color: var(--paper); }
.edge-cart__badge {
  position: absolute;
  top: 6px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--acid);
  color: var(--on-acid);
  font: 700 10px/17px var(--ff-cond);
  text-align: center;
}
body.no-scroll .edge-cart { opacity: 0; pointer-events: none; }

@media (max-width: 899px) {
  .edge-cart { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .edge-cart { transition: none; }
  .edge-cart:hover,
  .edge-cart:focus-visible { transform: translateY(-50%); }
}

/* =======================================================================
   42. Уход и хранение: отдельная рубрика и карточки товаров (26.10.2026)
   В рубрике нет подборок и жанров — это не альбомы. Карточка показывает
   название, фасовку и цену, без переворота конверта, оценок и плеера.
   ======================================================================= */
#catalog[data-care] .collections,
#catalog[data-care] .rv-cats-row,
#catalog[data-care] .btn--filter,
#catalog[data-care] #activeFilters { display: none; }
#catalog[data-care] .toolbar { max-width: 640px; }

.card--acc { display: flex; flex-direction: column; }
.card--acc .card__media--acc {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}
.card--acc .acc__shot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.card--acc .acc__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.card--acc .acc__glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--ink-4);
  color: var(--paper-dim);
  font: 700 34px/1 var(--ff-cond);
}
.card--acc .card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card--acc .card__artist { color: var(--acid-text); }
.card--acc .card__title {
  font-size: 15px;
  line-height: 1.24;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--acc .card__info { flex: 1; }
.card--acc .card__edition { white-space: normal; }
.card--acc .card__foot { margin-top: auto; padding-top: 6px; }

/* выбор фасовки: один конверт — одна карточка, несколько вариантов внутри */
.card--acc .acc__packs { display: grid; gap: 5px; margin: 6px 0 0; }
.card--acc .acc__packs-label {
  font: 600 9.5px/1 var(--ff-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.card--acc .acc__packs-row { display: flex; flex-wrap: wrap; gap: 4px; }
.card--acc .acc__pack {
  display: grid;
  gap: 1px;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--paper-dim);
  font: 600 10px/1.1 var(--ff-cond);
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.card--acc .acc__pack i { font-style: normal; font-size: 9.5px; opacity: 0.75; }
.card--acc .acc__pack:hover { border-color: var(--acid); color: var(--paper); }
.card--acc .acc__pack.is-active {
  border-color: var(--acid);
  background: rgba(247, 148, 30, 0.12);
  color: var(--paper);
}
.card--acc .acc__pack.is-active i { opacity: 1; color: var(--acid-text); }
@media (max-width: 420px) {
  .card--acc .acc__pack { padding: 3px 5px; font-size: 9.5px; }
}

/* поиск: уход отдельной секцией, не в списке пластинок */
.rv-search__sec--care h3 { color: var(--acid-text); }
.rv-res--care { text-decoration: none; }
.rv-res__glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--ink-4);
  color: var(--paper-dim);
  font: 700 12px/1 var(--ff-cond);
  letter-spacing: 0.06em;
}
.rec--care .rec__cover { background: #fff; }
.rec--care .rec__cover img { object-fit: contain; }

@media (max-width: 899px) {
  .card--acc .card__title { font-size: 13.5px; -webkit-line-clamp: 4; }
  .card--acc .card__media--acc { background: #fff; }
}

/* =======================================================================
   43. Уход: количество в карточке и страница аксессуара (26.10.2026)
   Карточка: цена, затем ряд «− 1 +  В корзину». Страница товара повторяет
   сетку пластинки, но без оценок и треклиста; под ней — «Ещё для ухода».
   ======================================================================= */
.card--acc .card__foot--acc { display: grid; gap: 8px; }
.card--acc .acc__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card--acc .acc__qty {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.card--acc .acc__qty-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--paper-dim);
  font: 600 14px/1 var(--ff-body);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.card--acc .acc__qty-btn:hover { background: rgba(247, 148, 30, 0.14); color: var(--acid-text); }
.card--acc .acc__qty-btn:disabled { opacity: 0.32; cursor: default; background: transparent; }
.card--acc .acc__qty-val {
  min-width: 20px;
  text-align: center;
  font: 600 12.5px/1 var(--ff-body);
  color: var(--paper);
}
.card--acc .acc__buy--solo { justify-content: stretch; }
.card--acc .card__add--wide {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  flex: 1 1 auto;
  font: 600 11px/1 var(--ff-cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card--acc .card__add--wide:hover { transform: none; }

/* страница аксессуара */
.rv-pfb--care .rv-pfb__gallery { align-self: start; }
.rv-pfb--care .rv-pfb__stage-img { background: #fff; }
.rv-pfb--care .rv-pfb__eyebrow a {
  color: var(--acid-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rv-pfb--care .rv-pfb__eyebrow a:hover { border-color: var(--acid); }
.rv-pfb__care-meta { margin: 6px 0 0; color: var(--paper-dim); font-size: 13.5px; }
.rv-care__packs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.rv-care__pack {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--paper-dim);
  text-decoration: none;
  font: 600 12px/1.15 var(--ff-cond);
  letter-spacing: 0.02em;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.rv-care__pack i { font-style: normal; font-size: 11.5px; opacity: 0.8; }
.rv-care__pack:hover { border-color: var(--acid); color: var(--paper); }
.rv-care__pack.is-active {
  border-color: var(--acid);
  background: rgba(247, 148, 30, 0.12);
  color: var(--paper);
}
.rv-care__pack.is-active i { opacity: 1; color: var(--acid-text); }
.rv-pfb__buy--care { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-pfb__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--paper-dim);
  font-size: 12px;
}
.rv-pfb__qty-static {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--paper-dim);
  font-size: 12.5px;
}
.rv-pfb__qty input {
  width: 54px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  font: 600 14px/1.2 var(--ff-body);
  text-align: center;
}
.rv-care-recs { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.rv-care-recs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.rv-care-recs__head h2 {
  margin: 0;
  font: 600 clamp(20px, 2.2vw, 28px)/1.1 var(--ff-cond);
  letter-spacing: 0.01em;
}
.rv-care-recs__all {
  color: var(--paper-dim);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.rv-care-recs__all:hover { color: var(--acid-text); border-color: var(--acid); }
.rv-care-recs__grid { margin-top: 0; }
@media (max-width: 899px) {
  .card--acc .acc__qty-btn { width: 22px; height: 22px; }
  .rv-care-recs { margin-top: 24px; padding-top: 20px; }
  .rv-pfb__buy--care .btn { flex: 1 1 100%; justify-content: center; }
}

/* =======================================================================
   44. Единая система кнопок (26.10.2026)
   Один размер, стеклянные вторичные кнопки, общая анимация и фокус.
   Токены считаются от цвета текста, поэтому работают в обеих темах.
   ======================================================================= */
:root {
  --btn-h: 48px;
  --btn-h-sm: 36px;
  --ctl: 34px;
  --ctl-lg: 40px;
  --btn-glass: rgba(var(--fg-rgb), 0.06);
  --btn-glass-hover: rgba(var(--fg-rgb), 0.11);
  --btn-line: rgba(var(--fg-rgb), 0.2);
  --btn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* основные и вторичные кнопки — одинаковая высота и типографика */
.btn,
.catalog__more-btn {
  position: relative;
  min-height: var(--btn-h);
  height: var(--btn-h);
  padding: 0 24px;
  border-radius: 999px;
  font: 600 12.5px/1 var(--ff-cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  transition:
    transform 0.28s var(--btn-ease),
    background 0.22s var(--btn-ease),
    color 0.22s var(--btn-ease),
    border-color 0.22s var(--btn-ease),
    box-shadow 0.28s var(--btn-ease),
    opacity 0.22s var(--btn-ease);
}
.btn--sm {
  min-height: var(--btn-h-sm);
  height: var(--btn-h-sm);
  padding: 0 16px;
  font-size: 11px;
}
.btn--filter {
  height: var(--btn-h);
  min-height: var(--btn-h);
  background: var(--btn-glass);
  border: 1px solid var(--btn-line);
  color: var(--paper);
}
.btn--wide { width: 100%; }
.btn svg,
.catalog__more-btn svg { transition: transform 0.3s var(--btn-ease); }
@media (hover: hover) {
  .btn:hover svg,
  .catalog__more-btn:hover svg { transform: translateX(3px); }
}
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }

/* стеклянная подложка вместо плотных плашек */
.btn--ghost,
.catalog__more-btn,
.btn--filter {
  background: var(--btn-glass);
  border: 1px solid var(--btn-line);
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
}
.catalog__more-btn {
  padding: 0 26px;
  color: var(--paper);
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.06), 0 14px 30px -24px rgba(0, 0, 0, 0.6);
}
.btn--filter { isolation: isolate; }
html[data-theme="light"] .btn--ghost,
html[data-theme="light"] .catalog__more-btn,
html[data-theme="light"] .btn--filter {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(42, 26, 16, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* мягкий блик по стеклу */
.btn--ghost::after,
.catalog__more-btn::after,
.btn--filter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 34%, rgba(var(--fg-rgb), 0.14) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--btn-ease);
  pointer-events: none;
}
@media (hover: hover) {
  .btn--ghost:hover,
  .catalog__more-btn:hover,
  .btn--filter:hover {
    background: var(--btn-glass-hover);
    border-color: rgba(var(--fg-rgb), 0.32);
    color: var(--paper);
    transform: translateY(-1px);
  }
  .btn--ghost:hover::after,
  .catalog__more-btn:hover::after,
  .btn--filter:hover::after { transform: translateX(130%); }
  .btn--acid:hover { transform: translateY(-1px); }
}
.btn:active,
.catalog__more-btn:active,
.btn--filter:active { transform: translateY(0) scale(0.97); }
.btn.is-magnetic:hover,
.btn.is-magnetic:active { transform: translate(var(--tx, 0), var(--ty, 0)); }

/* круглые управляющие кнопки: одна сетка размеров */
.icon-btn {
  width: var(--ctl-lg);
  height: var(--ctl-lg);
  border-radius: 50%;
  transition: background 0.22s var(--btn-ease), color 0.22s var(--btn-ease),
    transform 0.3s var(--btn-ease), opacity 0.2s var(--btn-ease);
}
.icon-btn:hover { background: var(--btn-glass-hover); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }

.card__add,
.card__play,
.mini__btn {
  min-width: var(--ctl);
  min-height: var(--ctl);
  transition: transform 0.3s var(--btn-ease), background 0.22s var(--btn-ease),
    border-color 0.22s var(--btn-ease), color 0.22s var(--btn-ease), box-shadow 0.25s var(--btn-ease);
}
.card__actions .card__add,
.card__actions .card__play { width: var(--ctl); height: var(--ctl); }
.mini__btn { width: var(--ctl); height: var(--ctl); }
.mini__btn:active { transform: scale(0.92); }
.bag-pill {
  height: var(--ctl);
  padding: 0 14px;
  border-radius: 999px;
  transition: transform 0.3s var(--btn-ease), background 0.22s var(--btn-ease), color 0.22s var(--btn-ease);
}

/* пилюли выбора: фасовка, назад, ещё — одинаковое поведение */
.acc__pack,
.rv-care__pack,
.back__open,
.back__cmp,
.filter-more,
.rv-chip {
  transition: border-color 0.22s var(--btn-ease), background 0.22s var(--btn-ease),
    color 0.22s var(--btn-ease), transform 0.3s var(--btn-ease), box-shadow 0.25s var(--btn-ease);
}
@media (hover: hover) {
  .acc__pack:hover,
  .rv-care__pack:hover,
  .back__open:hover,
  .back__cmp:hover,
  .filter-more:hover,
  .rv-chip:hover { transform: translateY(-1px); }
}
.acc__pack:active,
.rv-care__pack:active,
.back__open:active,
.back__cmp:active,
.filter-more:active,
.rv-chip:active { transform: translateY(0) scale(0.97); }

/* общий фокус для всего интерфейса */
.btn:focus-visible,
.catalog__more-btn:focus-visible,
.btn--filter:focus-visible,
.icon-btn:focus-visible,
.card__add:focus-visible,
.card__play:focus-visible,
.mini__btn:focus-visible,
.bag-pill:focus-visible,
.acc__pack:focus-visible,
.rv-care__pack:focus-visible,
.filter-more:focus-visible,
.rv-chip:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

/* страница товара: та же высота и форма, что у остальных CTA */
.rv-pfb__buy .btn,
.rv-pfb__actions > .btn {
  min-height: var(--btn-h);
  height: var(--btn-h);
  border-radius: 999px;
  font: 600 14px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
/* корзина: главные CTA тоже в общей сетке */
.bag-hero .btn,
.bag-sum__go {
  min-height: var(--btn-h);
  height: var(--btn-h);
  border-radius: 999px;
  font: 600 15px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
/* чипы фасовки — одинаковая форма и высота в каталоге и на странице товара */
.card--acc .acc__pack,
.rv-care__pack {
  min-height: 44px;
  border-radius: 12px;
}

/* стекло на десктопе чуть глубже, на мобильном blur уже отключён ради fps */
@media (min-width: 900px) {
  .btn--ghost,
  .catalog__more-btn,
  .btn--filter { -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
}
@media (max-width: 899px) {
  :root { --btn-h: 46px; --btn-h-sm: 34px; }
  .btn,
  .catalog__more-btn { padding: 0 20px; font-size: 12px; }
  .catalog__more-btn { padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .catalog__more-btn,
  .btn--filter,
  .icon-btn,
  .card__add,
  .card__play,
  .mini__btn,
  .bag-pill,
  .acc__pack,
  .rv-care__pack,
  .back__open,
  .back__cmp,
  .filter-more,
  .rv-chip { transition-duration: 0.01ms; }
  .btn--ghost::after,
  .catalog__more-btn::after,
  .btn--filter::after { display: none; }
  .btn:hover,
  .catalog__more-btn:hover,
  .btn--filter:hover,
  .icon-btn:hover,
  .acc__pack:hover,
  .rv-care__pack:hover { transform: none; }
}

/* =======================================================================
   45. Компактные CTA вместо полос на всю ширину (26.10.2026)
   «В корзину» и «Оформить заказ» — аккуратные таблетки по содержимому,
   мягкая кислотная заливка с прозрачностью, блик и пружина при нажатии.
   ======================================================================= */
:root {
  --btn-h: 44px;
  --btn-h-sm: 34px;
}
.btn { padding: 0 20px; font-size: 12px; letter-spacing: 0.08em; }
@media (max-width: 899px) {
  :root { --btn-h: 42px; --btn-h-sm: 32px; }
}

/* кислотная CTA: полупрозрачный градиент с внутренним бликом */
.btn--acid {
  background: linear-gradient(180deg, rgba(255, 171, 72, 0.97), rgba(232, 128, 10, 0.94));
  border: 1px solid rgba(255, 196, 122, 0.55);
  color: var(--on-acid);
  box-shadow:
    0 10px 24px -16px rgba(247, 148, 30, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="light"] .btn--acid {
  background: linear-gradient(180deg, rgba(252, 157, 44, 0.96), rgba(226, 122, 9, 0.93));
  border-color: rgba(255, 210, 160, 0.7);
  box-shadow:
    0 10px 22px -16px rgba(190, 96, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (hover: hover) {
  .btn--acid:hover { filter: brightness(1.05) saturate(1.04); }
}
.btn--acid:active { filter: brightness(0.98); }
@media (min-width: 900px) {
  .btn--acid {
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
  }
}

/* главные CTA товара, корзины и ухода — по содержимому, не во всю строку */
.bag-hero .btn,
.bag-sum__go,
.rv-pfb__buy .btn,
.rv-pfb__actions > .btn,
.rv-pfb__buy--care .btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0 22px;
  border-radius: 999px;
  font: 600 13px/1 var(--ff-body);
  text-transform: none;
  letter-spacing: 0;
}
.bag-hero__actions { justify-content: flex-start; }
.bag-sum__go {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  justify-self: start;
}
.rv-pfb__buy { flex: 0 1 auto; }
.rv-pfb__actions { justify-content: flex-start; }
.rv-pfb__buy--care { justify-content: flex-start; }

/* «В корзину» в карточке ухода — компактная кнопка справа от цены */
.card--acc .card__add--wide {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 14px;
  font-size: 10.5px;
}
.card--acc .acc__buy--solo { justify-content: flex-end; }

@media (max-width: 899px) {
  .bag-hero .btn,
  .bag-sum__go,
  .rv-pfb__buy .btn,
  .rv-pfb__actions > .btn,
  .rv-pfb__buy--care .btn {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
  }
  .rv-pfb__buy { flex: 0 0 auto; }
  .rv-pfb__buy--care { flex-wrap: wrap; }
}

/* =======================================================================
   46. Кнопки внутри карточек товара (26.10.2026)
   «+» — тонированное кислотное стекло, плеер/сердце/переворот — дымчатое
   стекло с общей анимацией. Нажатие пружинит, наведение подсвечивает.
   ======================================================================= */
/* «в корзину»: прозрачная кислотная заливка вместо плотного круга */
.card__add,
.card--acc .card__add--wide {
  background: linear-gradient(180deg, rgba(255, 171, 72, 0.3), rgba(232, 128, 10, 0.22));
  border: 1px solid rgba(247, 148, 30, 0.62);
  color: var(--acid-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -14px rgba(247, 148, 30, 0.85);
  transition:
    background 0.22s var(--btn-ease),
    border-color 0.22s var(--btn-ease),
    color 0.22s var(--btn-ease),
    transform 0.3s var(--btn-ease),
    box-shadow 0.25s var(--btn-ease);
}
html[data-theme="light"] .card__add { color: #a24d00; }

/* дымчатое стекло: плеер, сердце, переворот — как капсулы на фото */
.card__play {
  border-width: 1px;
  border-color: rgba(243, 232, 212, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 20px -14px rgba(0, 0, 0, 0.65);
  transition: transform 0.3s var(--btn-ease), border-color 0.22s, color 0.22s, box-shadow 0.25s;
}
.card__fav,
.card__flip-btn {
  border: 1px solid rgba(243, 232, 212, 0.38);
  background: rgba(18, 12, 9, 0.55);
  color: #f3e8d4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px -14px rgba(0, 0, 0, 0.6);
  transition:
    background 0.22s var(--btn-ease),
    border-color 0.22s var(--btn-ease),
    color 0.22s var(--btn-ease),
    transform 0.3s var(--btn-ease),
    box-shadow 0.25s var(--btn-ease);
}

@media (hover: hover) {
  .card__add:hover,
  .card--acc .card__add--wide:hover {
    background: linear-gradient(180deg, #ffb45e, var(--acid));
    border-color: var(--acid);
    color: var(--on-acid);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 12px 26px -12px rgba(247, 148, 30, 0.9);
  }
  .card--acc .card__add--wide:hover { transform: none; }
  .card__play:hover {
    border-color: var(--acid);
    color: var(--acid-text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 12px 24px -12px rgba(247, 148, 30, 0.6);
  }
  .card__fav:hover,
  .card__flip-btn:hover {
    background: rgba(18, 12, 9, 0.78);
    border-color: var(--acid);
    color: var(--acid-text);
  }
}

/* состояния */
.card__add.is-in {
  background: rgba(18, 12, 9, 0.55);
  border-color: rgba(243, 232, 212, 0.4);
  color: #f3e8d4;
  transform: none;
}
.card__fav.is-active {
  color: var(--red);
  border-color: rgba(229, 72, 44, 0.55);
  background: rgba(18, 12, 9, 0.7);
}
.card__play.is-playing {
  background: linear-gradient(180deg, #ffb45e, var(--acid));
  border-color: var(--acid);
  color: var(--on-acid);
}
.card.is-flipped .card__flip-btn {
  background: linear-gradient(180deg, #ffb45e, var(--acid));
  border-color: var(--acid);
  color: var(--on-acid);
}
.card__add:active,
.card__play:active,
.card__fav:active,
.card__flip-btn:active { transform: scale(0.92); }

/* мерч-карточки — та же манера */
.merch-card__add {
  background: linear-gradient(180deg, rgba(255, 171, 72, 0.3), rgba(232, 128, 10, 0.22));
  border: 1px solid rgba(247, 148, 30, 0.62);
  color: var(--acid-text);
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.3s var(--btn-ease);
}
@media (hover: hover) {
  .merch-card__add:hover { background: var(--acid); border-color: var(--acid); color: var(--on-acid); }
}

/* мини-кнопки рекомендаций и корзины — то же кислотное стекло */
.mini__add,
.bag-pill:not(.is-in) {
  background: rgba(247, 148, 30, 0.16);
  border: 1px solid rgba(247, 148, 30, 0.55);
  color: var(--acid-text);
}
html[data-theme="light"] .mini__add,
html[data-theme="light"] .bag-pill:not(.is-in) { color: #a24d00; }
@media (hover: hover) {
  .mini__add:hover,
  .bag-pill:not(.is-in):hover { background: var(--acid); border-color: var(--acid); color: var(--on-acid); }
}
/* в светлой теме состояние «в корзине» должно перекрывать кислотный текст */
html[data-theme="light"] .card__add.is-in,
html[data-theme="light"] .card__add.is-in:hover { color: #f3e8d4; }

/* =======================================================================
   47. Треклист и мини-плеер (26.10.2026)
   Стороны в две колонки — весь список виден без прокрутки. Сверху липкая
   панель: play/pause, полоса прогресса и переходы между фрагментами.
   ======================================================================= */
.tl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; align-items: start; }
.tl__grid .tl__side + .tl__side { margin-top: 0; }
@media (max-width: 899px) {
  .tl__grid { grid-template-columns: 1fr; gap: 4px; }
}

.tl__player {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 42px auto 30px;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  border-radius: 16px;
  background: rgba(var(--ink-rgb), 0.86);
  box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(var(--fg-rgb), 0.07);
  transition: border-color 0.25s var(--btn-ease), background 0.25s var(--btn-ease);
}
html[data-theme="light"] .tl__player { background: rgba(255, 255, 255, 0.84); }
/* на странице пластинки шапка фиксированная — плеер липнет под ней */
.rv-pfb__tracks .tl__player { top: calc(var(--header-h, 68px) + 10px); }
@media (min-width: 900px) {
  .tl__player {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}
.tl__pl-nav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--fg-rgb), 0.22);
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--paper-dim);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s var(--btn-ease);
}
@media (hover: hover) {
  .tl__pl-nav:hover { color: var(--acid-text); border-color: var(--acid); background: rgba(var(--fg-rgb), 0.12); transform: scale(1.05); }
}
.tl__pl-nav:active { transform: scale(0.94); }
.tl__pl-main { display: grid; gap: 2px; min-width: 0; }
.tl__pl-label {
  font: 600 9.5px/1 var(--ff-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.tl__pl-track {
  font: 600 13px/1.25 var(--ff-body);
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl__pl-bar {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.14);
  overflow: hidden;
}
.tl__pl-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acid-deep), var(--acid));
  transition: width 0.2s linear;
}
.tl__pl-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 196, 122, 0.55);
  background: linear-gradient(180deg, rgba(255, 171, 72, 0.97), rgba(232, 128, 10, 0.94));
  color: var(--on-acid);
  box-shadow: 0 10px 22px -14px rgba(247, 148, 30, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.25s var(--btn-ease), filter 0.2s;
}
@media (hover: hover) {
  .tl__pl-toggle:hover { transform: scale(1.05); filter: brightness(1.05); }
}
.tl__pl-toggle:active { transform: scale(0.95); }
.tl__pl-vol {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--btn-ease);
}
@media (hover: hover) {
  .tl__pl-vol:hover { background: rgba(var(--fg-rgb), 0.12); }
}
.tl__pl-vol:active { transform: scale(0.97); }
@media (max-width: 700px) {
  .tl__pl-vol { width: 34px; padding: 0; justify-content: center; }
  .tl__pl-vol span { display: none; }
}
.tl__pl-ico { display: none; }
.tl__pl-ico--play { display: block; margin-left: 2px; }
.tl__player.is-playing .tl__pl-ico--play { display: none; }
.tl__player.is-playing .tl__pl-ico--pause { display: block; }

/* компактные строки: весь треклист помещается без внутренней прокрутки */
.tl__track {
  padding: 5px 6px;
  border-radius: 10px;
  grid-template-columns: 22px 1fr auto 26px;
  gap: 8px;
  transition: background 0.2s var(--btn-ease), transform 0.2s var(--btn-ease);
}
@media (hover: hover) {
  .tl__track:hover { transform: translateX(1px); }
}
.tl__t {
  font-size: 12.8px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.tl__n { font-size: 10.5px; }
.tl__d { font-size: 11px; }
.tl__play { width: 26px; height: 26px; }
.tl__track.is-playing .tl__play { border-color: var(--acid); animation: tlPulse 1.5s ease-in-out infinite; }
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 148, 30, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(247, 148, 30, 0); }
}
.tl__track.is-off .tl__play { opacity: 0.35; }
.tl__track.is-off .tl__t { color: var(--paper-mute); }

/* недоступный фрагмент: кнопка приглушена, но остаётся кликабельной —
   сервер может найти запись позже, и тогда метка снимется */
.card__play.is-off,
.tl__track.is-off .tl__play { opacity: 0.42; }
@media (hover: hover) {
  .card__play.is-off:hover { opacity: 0.62; }
}

@media (max-width: 899px) {
  .tl__player { grid-template-columns: 26px 1fr 40px 26px; padding: 7px 8px; border-radius: 14px; }
  .tl__pl-nav { width: 26px; height: 26px; }
  .tl__pl-toggle { width: 40px; height: 40px; }
  .tl__player {
    grid-template-columns: 26px minmax(0, 1fr) 40px auto 26px;
    gap: 6px;
    padding: 8px;
  }
  .tl__pl-track { font-size: 12.5px; }
  /* на телефоне список в одну колонку: подписи сторон и длительности
     убираем, строки делаем плотнее — скроллить почти нечего */
  .tl__grid { gap: 1px; }
  .tl__side-name {
    padding: 0 6px 3px;
    font-size: 10px;
  }
  .tl__side-name b { font-size: 10.5px; }
  .tl__side-name span { display: none; }
  .tl__track { padding: 3.5px 5px; }
  .tl__t { font-size: 12.3px; -webkit-line-clamp: 1; }
  .tl__n { font-size: 10px; }
  .tl__d { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl__track.is-playing .tl__play { animation: none; }
}

/* Треклист на странице пластинки больше не «прокручивается» внутри рамки:
   раньше max-height 310/260 px прятал половину песен. Теперь список
   раскрыт целиком, а прокручивается сама страница; мини-плеер липнет
   к верху и остаётся под рукой. */
.rv-pfb__tracks {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* =======================================================================
   48. ФИНАЛЬНАЯ ВЫЧИТКА ВЁРСТКИ — 26.10.2026
   Мобильные 320–430, планшетные 768–1024 и десктоп 1280–1440.
   Здесь собраны правки, которые не должны зависеть от порядка остальных
   блоков: цена без переносов, подписи без «обрубков», удобные зоны
   нажатия, аккуратные абзацы и предсказуемая плавность анимаций.
   ======================================================================= */

/* --- 48.1 Цена в карточке всегда одной строкой -------------------------
   Раньше на 360–768 px «5 200 ₽» сжималась до 38–55 px и рвалась на
   2–3 строки. Теперь цифра и знак рубля не переносятся, а если места
   совсем нет, вниз уходит блок кнопок, а не цена. */
.card__foot {
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 8px;
}
.card__foot .card__price {
  flex: 0 0 auto;
  min-width: auto;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.card__price b,
.card__price s {
  white-space: nowrap;
}
.card__foot .card__actions { margin-left: auto; }

/* --- 48.2 Артист: две строки вместо обрезки по многоточию ---------------
   На узких карточках длинный артист обрезался в одну строку. Даём две
   строки и сохраняем одинаковый ритм карточек. */
.card__artist {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* --- 48.3 Запасная обложка: буквы не режутся --------------------------- */
.art-type,
.art-type--stack { line-height: 1.08; padding-block: 0.14em; }
.art-band { padding-block: 2.8cqw; }
.art-band span { line-height: 1.22; padding-block: 0.12em; }
.art-mini { line-height: 1.14; }
.back__bottom { line-height: 1.35; }

/* --- 48.4 Оборот конверта: всё помещается ------------------------------- */
@media (max-width: 899px) {
  .card__face--back { gap: 5px; padding: 10px 10px 9px; }
  .back__tracks li { padding: 3px 0; font-size: clamp(7.5px, 3.4cqw, 10px); }
  .back__tracks li:nth-child(n + 4) { display: none; }
  .back__bottom { display: none; }
  .back__btns { gap: 2px; }
  .back__open,
  .back__cmp { padding: 7px 2px; font-size: 10px; letter-spacing: -0.02em; min-height: 32px; }
}

/* --- 48.5 Зоны нажатия: минимум 40–44 px -------------------------------
   Визуальный размер кнопок не раздуваем, а расширяем кликабельную
   область псевдоэлементом. Кнопки в футере карточки остаются компактными,
   но попасть по ним пальцем проще. */
@media (max-width: 899px) {
  .header__actions .icon-btn { width: 38px; height: 44px; flex: none; }
  .rv-cats .rv-cat { height: 44px; }
  .btn,
  .btn--filter,
  .format-tab,
  .bag-seg__btn,
  .rv-steps__item,
  .bag-hero .btn,
  .bag-sum__go,
  .rv-pfb__buy .btn,
  .rv-pfb__actions > .btn { min-height: 44px; }
  .filter-more { min-height: 44px; padding-block: 12px; }
  .rv-search__clear { width: 40px; height: 40px; }
  .bag-link { min-height: 44px; padding-block: 12px; }
  .pk__calbtn { min-height: 44px; padding-block: 12px; }

  .card__actions { gap: 4px; }
  .card__actions .card__play,
  .card__actions .card__add,
  .mini__btn,
  .card__fav,
  .card__flip-btn { position: relative; }
  .card__actions .card__play::after,
  .card__actions .card__add::after,
  .mini__btn::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
  }
  .card__fav::after,
  .card__flip-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
  }

  .footer a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* На 320–340 px в шапке не хватает места на пять иконок. Оставляем
   поиск, лайки, сравнение и корзину. На 360 px и шире переключатель
   темы снова в шапке. Иконки не сжимаются ниже 38 px. */
@media (max-width: 340px) {
  .header__actions .theme-toggle { display: none; }
  .back__open,
  .back__cmp { padding-inline: 0; font-size: 8.5px; letter-spacing: -0.03em; }
  .back__tracks li:nth-child(n + 3) { display: none; }
}

/* --- 48.6 Абзацы: без «висячих» строк и рваных переносов ---------------- */
p,
li,
blockquote,
.section__sub,
.hero2__sub,
.rv-pfb__desc p,
.legal__main p,
.story-body p {
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}
.legal__main p,
.rv-pfb__desc p,
.story-body p { hyphens: auto; }

/* --- 48.7 Плавность и доступность анимаций ------------------------------ */
a,
button,
[role="button"],
input,
select,
textarea { touch-action: manipulation; }

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__flip,
  .card:focus-within .card__flip { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =======================================================================
   49. ПОИСК И ФИЛЬТРЫ — 26.10.2026
   Поиск разделён на «Пластинки / CD / Уход»: разделы не смешиваются
   в одной выдаче. Фильтры считают только те значения, которые реально
   есть в выбранном формате, поэтому 3–4 жанра не дают «ничего не найдено».
   ======================================================================= */

/* --- 49.1 Переключатель разделов поиска -------------------------------- */
.rv-search__modes {
  display: flex;
  gap: 6px;
  margin: 2px 0 14px;
  padding-bottom: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rv-search__modes::-webkit-scrollbar { display: none; }
.rv-search__mode {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rv-search-line);
  background: transparent;
  color: var(--paper);
  font: 600 13.5px/1 var(--ff-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rv-search__mode:hover { background: var(--rv-search-hover); }
.rv-search__mode span {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--rv-search-inset);
  color: inherit;
  font-size: 11.5px;
  font-weight: 600;
}
.rv-search__mode.is-active {
  background: var(--acid);
  color: var(--on-acid);
  border-color: var(--acid);
}
.rv-search__mode.is-active span { background: rgba(0, 0, 0, .16); }
.rv-search__empty .rv-chip { margin: 4px 4px 0 0; }

/* --- 49.2 Фильтры: нулевые значения не вываливаются в общий список ----- */
.filter-grid label[hidden] { display: none !important; }
.filter-block[hidden] { display: none !important; }
.filter-grid label.is-unavailable { display: none !important; }
.filter-grid input:disabled + span { opacity: .35; cursor: default; }
.sheet__body { scroll-padding-bottom: 84px; }

/* --- 50. Вход в личный кабинет в подвале и шапке --------------------- */
.footer .footer__account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin-left: auto;
  padding: 0 10px 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--paper-mute);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.footer .footer__account svg {
  flex: none;
  transition: transform .35s cubic-bezier(.22, .7, .2, 1);
}
.footer .footer__account:hover {
  color: var(--acid-text);
  border-color: var(--acid-text);
  background: rgba(247, 148, 30, .08);
}
.footer .footer__account:hover svg { transform: translateY(-1px); }
.footer .footer__account:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

.header__account { text-decoration: none; }
.header__account .icon { stroke-width: 1.8; }
@media (max-width: 430px) {
  .header__cmp { display: none; }
}

@media (max-width: 700px) {
  .footer .footer__account {
    margin-left: 0;
    min-width: 34px;
    min-height: 34px;
    justify-content: center;
    padding: 0 7px;
  }
  .footer .footer__account span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer__account svg { transition: none; }
  .footer .footer__account:hover svg { transform: none; }
}