@charset "UTF-8";
/* =====================================================================
 * ui-polish.css — слой «причёсывания» фронта.
 * Подключается ПОСЛЕДНИМ, после style.css, поэтому переопределяет тему.
 * Тему (assets/css/style.css, 500KB minified) НЕ трогаем вообще.
 * Полный откат: удалить <link> на этот файл в
 *   content/tpl/headers/__default_/header.php
 *
 * ВАЖНО: намеренно НЕ ставим overflow-x:hidden на html/body —
 * это ломает position:sticky (у нас sticky-сайдбар на карточке релиза).
 * Вместо этого гасим конкретные источники переполнения.
 * ===================================================================== */

/* ---------------------------------------------------------------
 * 1. Медиа и таблицы не распирают макет
 * --------------------------------------------------------------- */
img, svg, video, canvas {
  max-width: 100%;
}
img {
  height: auto;
}
iframe {
  max-width: 100%;
}
table {
  max-width: 100%;
}

/* Длинные неразрывные строки (названия релизов, каталожные номера, ссылки)
   не должны распирать макет и вызывать горизонтальный скролл на мобильных. */
.product-detail-box,
.sale-details,
.breadcrumb-box,
.seller-card,
.content-box,
.product-card {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Флекс- и грид-элементы по умолчанию не сжимаются меньше содержимого —
   из-за этого узкие экраны разъезжаются. Разрешаем сжатие. */
.row > [class*="col"] {
  min-width: 0;
}

/* ---------------------------------------------------------------
 * 2. Типографика: «плавающие» размеры — заголовки перестают
 *    наезжать друг на друга и на картинки на узких экранах.
 *    clamp(мин, идеал, макс) — на десктопе остаётся крупно.
 * --------------------------------------------------------------- */
h1, .h1 { font-size: clamp(1.55rem, 4.2vw, 2.75rem); line-height: 1.18; }
h2, .h2 { font-size: clamp(1.35rem, 3.2vw, 2.15rem); line-height: 1.22; }
h3, .h3 { font-size: clamp(1.15rem, 2.4vw, 1.6rem);  line-height: 1.28; }
h4, .h4 { font-size: clamp(1.02rem, 1.8vw, 1.3rem);  line-height: 1.32; }

h1, h2, h3, h4 {
  overflow-wrap: break-word;   /* длинные названия релизов не рвут сетку */
  word-break: break-word;
}

p { line-height: 1.6; }

/* ---------------------------------------------------------------
 * 3. Кнопки: единый вид, не сплющиваются, удобны пальцем
 * --------------------------------------------------------------- */
.btn,
.btn-solid,
button[type="submit"] {
  min-height: 44px;                /* комфортный тап-таргет */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.15rem;
  line-height: 1.2;
  /* ВАЖНО: здесь раньше стоял white-space: nowrap, чтобы короткие подписи
     не рвались на две строки. Но у кнопок вроде «Перейти К Основному Релизу
     (Первая Версия)» это делало перенос невозможным — они распирали страницу
     и вызывали горизонтальный скролл на мобильных. Перенос строки в кнопке
     гораздо меньшее зло, чем разъезжающийся вбок макет. */
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* мелкие кнопки оставляем мельче, но всё ещё тапабельными */
.btn-sm {
  min-height: 40px;
  padding: 0.5rem 0.9rem;
}

/* ---------------------------------------------------------------
 * 4. Поля ввода: одинаковая высота с кнопками.
 *    font-size:16px на мобиле обязателен — иначе iOS Safari
 *    зумит страницу при фокусе на поле.
 * --------------------------------------------------------------- */
.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  min-height: 44px;
}

@media (max-width: 767px) {
  .form-control,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------
 * 5. Страница поиска
 * --------------------------------------------------------------- */
@media (max-width: 767px) {

  /* инпут и кнопка перестают тесниться в одну строку */
  .search-page .search-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }

  .search-page .search-box > div:first-child {
    flex: 1 1 100%;
    min-width: 0;                 /* иначе флекс не даёт полю сжиматься */
    position: relative;
  }

  .search-page .search-box .form-control {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;      /* длинный placeholder не распирает поле */
  }

  .search-page .search-box > button,
  .search-page .search-box .filter[type="submit"] {
    flex: 1 1 100%;
    width: 100%;
  }

  /* reCAPTCHA — виджет фикс. ширины ~304px, на 320–360px вылезал за край */
  .search-page .g-recaptcha {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
  .search-page .search-box-side .form-group {
    overflow: hidden;
    max-width: 100%;
  }
}

/* Пустая выдача поиска больше не оставляет полэкрана белизны.
   Класс вешается на контейнер результатов, когда результатов нет. */
.search-empty-state {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  color: #6b6b6b;
}
.search-empty-state .search-empty-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* ---------------------------------------------------------------
 * 6. Мелкая гигиена сетки на мобиле
 * --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* блоки промо/баннеров: текст не наезжает на текст */
  .banner-box .banner-content,
  .banner-contain {
    padding: 1rem;
  }
  .banner-box .banner-content > *,
  .banner-contain > * {
    margin-bottom: 0.4rem;
  }
}

/* ---------------------------------------------------------------
 * 7. Карточка товара: характеристики
 *    Было «Состояние:Very Good Plus» — подпись и значение это два
 *    соседних <li> в одном <ul>, между ними не было отступа.
 * --------------------------------------------------------------- */
.sale-details ul li + li {
  margin-left: 0.4em;
}

/* ---------------------------------------------------------------
 * 8. Пустые состояния (корзина, выдача поиска)
 *    Раньше пустая корзина — голая строка «Ваша Корзина Пуста»
 *    у левого края, без выхода. Теперь центрированный блок с CTA.
 * --------------------------------------------------------------- */
.cart-empty-state {
  text-align: center;
  padding: 3rem 1rem 3.5rem;
  max-width: 520px;
  margin: 0 auto;
}
.cart-empty-state .cart-empty-icon {
  color: #c9c9c9;
  margin-bottom: 1rem;
}
.cart-empty-state h3 {
  margin-bottom: 0.5rem;
}
.cart-empty-state p {
  color: #6b6b6b;
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------
 * 9. Карточка товара в сетке каталога
 *    Только внешний вид: разметка и ссылки не трогаются.
 * --------------------------------------------------------------- */

/* Карточки одной высоты -> кнопки «В корзину» выстраиваются в ровный ряд,
   а не пляшут по вертикали из-за разной длины названий.
   Раньше все правила карточки были привязаны к .grid-section, поэтому
   работали только в каталоге. А на главной, в карточке товара и на
   страницах релиза/артиста/лейбла карточки живут в слайдерах и других
   обёртках — туда стили не доставали. Теперь оформление привязано к самой
   .product-card, а от структуры зависят только правила выравнивания высоты. */
.grid-section > [class*="col"] > div,
.grid-section > [class*="col"] > div > .product-card {
  height: 100%;
}

/* то же для каруселей на главной: «Новинки», «Раритеты», «Бестселлеры» */
.swiper-slide:has(.product-card) > div,
.swiper-slide .product-card {
  height: 100%;
}
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card .content-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: .65rem;
}
/* кнопка всегда прижата к низу карточки */
.product-card .content-box > div:last-child {
  margin-top: auto;
}

/* Мягкий подъём при наведении — карточка ощущается кликабельной */
@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
  }
}

/* Карточка как единый объект: рамка, скругление, белый фон.
   Картинка прилегает к верху вплотную, скругление берёт на себя карточка. */
.product-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  /* Верх карточки — КВАДРАТНЫЙ: там фото пластинки, а карточка с overflow:hidden
     скругляла ему верхние углы. Низ (под кнопками) оставляем скруглённым. */
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.product-card .img-box {
  border-radius: 0 !important;
  overflow: hidden;
}

/* Текст больше не прилипает к краям карточки */
.product-card .content-box {
  padding: .8rem .9rem 1rem !important;
}

/* Жанр — тихая надстрочная метка, а не такой же текст как название.
   Жёстко одна строка: при длинном списке жанров/стилей (напр. «ELECTRONIC,
   FUNK / SOUL, POP») перенос на вторую строку сдвигал название и ломал
   выравнивание карточек в ряду. Обрезаем многоточием. */
.product-card .content-box > a > p:first-child {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Название: две строки вместо жёсткой обрезки в одну.
   Исполнитель — одной строкой. */
.product-card .product-title strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.product-card .product-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Издание и формат — вторичная информация. В разметке они <strong>,
   то есть спорили по весу с названием и делали карточку «шумной».
   Возвращаем им роль подписи. */
.product-card .edition-block {
  margin: .45rem 0 0;
}
.product-card .edition-block strong {
  display: block;
  font-weight: 400 !important;
  font-size: .78rem;
  line-height: 1.45;
  color: #7a7a7a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Цена — главный акцент в карточке */
.product-card .price {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: #1f2937;
  margin: .6rem 0 .75rem;
  text-align: left !important;
}

/* Кнопка во всю ширину карточки — крупнее цель нажатия и ровный низ */
.product-card .content-box > div:last-child {
  min-height: 0 !important;
  padding-top: .15rem;
}
.product-card .content-box > div:last-child > a {
  width: 100%;
}

/* ---------------------------------------------------------------
 * 10. Подвал
 *     Заголовок «Задать Нам Вопрос» тема красила тёмным (рассчитано
 *     на светлый фон), а подвал тёмно-синий — текст сливался с фоном.
 *     Приводим к тому же виду, что и соседние заголовки колонок.
 * --------------------------------------------------------------- */
.subscribe-box h3 {
  color: #fff;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  margin-bottom: .5rem;
}
.subscribe-box p {
  color: rgba(255, 255, 255, .75);
}

/* Кнопка «Написать нам» — ровная, без съехавшей рамки */
.footer-form .btn-style2 {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

/* ---------------------------------------------------------------
 * 11. Съехавшая рамка у кнопок .btn-style2 (по всему сайту)
 *     У темы есть декоративный дубль рамки:
 *       .btn-style2::after{position:absolute;bottom:0;right:0;
 *                          width:100%;height:100%;border:inherit;z-index:-1}
 *     но у самой кнопки не задан position:relative, поэтому псевдоэлемент
 *     отсчитывался от ближайшего позиционированного предка и уезжал
 *     вниз-вправо — выглядело как глюк рендера (баннер WaxPost, подвал).
 * --------------------------------------------------------------- */
.btn-style2 {
  position: relative;
}

/* Замер показал: ::after смещён на +13px вниз и +22.5px вправо — это
   преднамеренная «двойная рамка со сдвигом» из шаблона. Смотрится неряшливо
   (выглядит как съехавшая рамка), поэтому декорацию убираем: кнопка остаётся
   чистой и современной. Сама кнопка и её поведение не затронуты. */
.btn-style2::after {
  display: none !important;
}

/* ---------------------------------------------------------------
 * 12. Карточка товара: правила продавца
 *     Текст правил (доставка, оплата, брони) растягивал правую колонку
 *     на пол-экрана, а рядом с треклистом зияла пустота. Свернули в
 *     нативный <details> — без JS, с клавиатурной доступностью.
 * --------------------------------------------------------------- */
/* Раньше правила прятались целиком в <details>, и на первый взгляд казалось,
   что их вообще нет. Теперь: заголовок и первые строки видны сразу,
   а «Читать все правила» раскрывает остальное. Чистый CSS, без JS. */
.seller-terms {
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding-top: .85rem;
  margin-top: .5rem;
}
/* Разделитель нужен только когда выше есть город или описание.
   Если правила — единственный блок, линия висела сиротой. */
.seller-card .seller-terms:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.seller-terms-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .4rem;
}

/* сам переключатель не показываем, но он остаётся фокусируемым с клавиатуры */
.seller-terms-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seller-terms-body {
  color: #5c5c5c;
  font-size: .95rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* видно первые строки — понятно, что правила есть */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seller-terms-toggle:checked ~ .seller-terms-body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.seller-terms-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color: var(--theme-color, #e07b39);
  min-height: 40px;
}
.seller-terms-more::before {
  content: "Читать все правила";
}
.seller-terms-more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.seller-terms-toggle:checked ~ .seller-terms-more::before {
  content: "Свернуть";
}
.seller-terms-toggle:checked ~ .seller-terms-more::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.seller-terms-toggle:focus-visible ~ .seller-terms-more {
  outline: 2px solid var(--theme-color, #e07b39);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
 * Логотип магазина: тема задаёт .img-box органическую форму-кляксу
 *   border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; overflow: hidden;
 * из-за чего у круглого логотипа «откусывался» кусок. Возвращаем
 * ровные границы.
 * --------------------------------------------------------------- */
.seller-logo-box {
  border-radius: 0 !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}
/* Клякса висела не только на контейнере, но и на самом <img> — поэтому
   у логотипа продолжало срезать правый край («MINIMAI» вместо «MINIMAL»). */
.seller-logo-box img {
  border-radius: 0 !important;
  clip-path: none !important;
}

/* =================================================================
 * СПРАВКА ПО СОСТОЯНИЮ (шкала Goldmine)
 * Кнопка-вопросик ставится везде, где упоминается состояние;
 * само окно рендерится один раз на страницу (подвал шаблона).
 * ================================================================= */
.cond-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: .3rem;
  border: 0;
  background: none;
  color: #9a9a9a;
  cursor: pointer;
  vertical-align: -3px;
  flex: 0 0 auto;
  /* это <span role="button">, а не <button> — гасим выделение текста
     и наследование оформления ссылки-родителя */
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none !important;
  line-height: 0;
  transition: color .15s ease, transform .15s ease;
}
.cond-help svg {
  width: 16px;
  height: 16px;
  display: block;
}
.cond-help:hover,
.cond-help:focus-visible {
  color: var(--theme-color, #e07b39);
  outline: none;
}
.cond-help:focus-visible {
  outline: 2px solid var(--theme-color, #e07b39);
  outline-offset: 2px;
  border-radius: 50%;
}

/* обозначение состояния в карточке — спокойнее, чем тройной <small> */
.cond-badge {
  font-size: .75rem;
  color: #8a8a8a;
  white-space: nowrap;
}

/* --- окно справки --- */
.cond-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cond-modal[hidden] {
  display: none;
}
.cond-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 26, .55);
  backdrop-filter: blur(2px);
}
.cond-modal-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: min(560px, 100%);
  max-height: min(80vh, 680px);
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1.4rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.cond-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.cond-modal-head h4 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}
.cond-modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(0, 0, 0, .05);
  font-size: 22px;
  line-height: 1;
  color: #5c5c5c;
  cursor: pointer;
}
.cond-modal-close:hover {
  background: rgba(0, 0, 0, .1);
}
.cond-modal-intro {
  color: #6b6b6b;
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.cond-list {
  margin: 0;
}
.cond-section + .cond-section {
  margin-top: 1.5rem;
}
.cond-section-title {
  margin: 0 0 .25rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--theme-color, #e07b39);
}
.cond-row {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  padding: .6rem 0;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.cond-row dt {
  flex: 0 0 150px;
  margin: 0;
  font-weight: 700;
  font-size: .88rem;
  color: #1f2937;
}
.cond-row dd {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #5c5c5c;
}
@media (max-width: 575px) {
  .cond-row dt {
    flex: 1 1 100%;
  }
}

/* =================================================================
 * СТРАНИЦА ТОВАРА /product/{id}
 * ================================================================= */

/* Тема даёт секциям по ~83px сверху и снизу — на странице товара это
   давало огромные пустоты вокруг центрального блока. Ужимаем до
   современного ритма. */
.product-page {
  padding-top: clamp(1.25rem, 3vw, 2.5rem) !important;
  padding-bottom: clamp(1rem, 2.5vw, 2rem) !important;
}

/* --- Левая колонка: обложка + Deezer единым блоком ---------------
 * :last-child решает оба случая разом — если виджета Deezer нет,
 * картинка одновременно первая и последняя, и скругляется целиком. */
.product-media-stack > [class*="col-"] {
  overflow: hidden;
}
.product-media-stack > [class*="col-"]:first-child {
  border-top-left-radius: 0; /* фото конверта — прямые углы */
  border-top-right-radius: 0;
}
.product-media-stack > [class*="col-"]:last-child {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.product-media-stack iframe {
  display: block;
}

/* --- Центральная колонка ----------------------------------------- */
.product-detail-box .product-option > h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  margin-bottom: .25rem;
}
.product-detail-box .product-option > h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: #5c5c5c;
  margin-bottom: .9rem;
}

/* «В Коллекцию» / «В Список Желаний» — не голые ссылки, а чипы */
.product-detail-box .wishlist-btn,
.product-detail-box .add-to-collection,
.product-detail-box .product-option > .option > a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
}

/* цена — главный акцент */
.product-detail-box .option.price {
  margin: .35rem 0 1.1rem;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: #1f2937;
}

/* кнопки: одной высоты, в одну строку, растягиваются поровну */
.product-detail-box .btn-solid,
.product-detail-box .btn {
  min-height: 48px;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  font-size: .95rem;
}
@media (min-width: 480px) {
  .product-detail-box .product-option .row > [class*="col-"] > .btn-solid,
  .product-detail-box .product-option .row > [class*="col-"] > .btn {
    width: 100%;
  }
}

/* «В Коллекцию» / «В Список Желаний» — чипы вместо голых ссылок вразнобой */
.product-detail-box .option > ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}
/* ВАЖНО: только кнопки «В Коллекцию» / «В Список Желаний» — у них li с
   id wantli…/haveli…. Раньше селектор был просто `> a`, и на страницах
   artist и label под него попадали ВСЕ ссылки внутри описания: текст
   превращался в россыпь кнопок-бляшек. */
.product-detail-box .option > ul > li[id^="wantli"] > a,
.product-detail-box .option > ul > li[id^="haveli"] > a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  min-height: 38px;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.product-detail-box .option > ul > li[id^="wantli"] > a:hover,
.product-detail-box .option > ul > li[id^="haveli"] > a:hover {
  border-color: var(--theme-color, #e07b39);
  background: rgba(139, 127, 214, .12);
}
.product-detail-box .option > ul > li[id^="wantli"] > a svg,
.product-detail-box .option > ul > li[id^="haveli"] > a svg {
  width: 15px;
  height: 15px;
}

/* Описание на artist/label лежит в том же .option > ul > li. Возвращаем
   ссылкам внутри текста обычный вид ссылки. */
.product-detail-box .option > ul > li p a,
.product-detail-box .option > ul > li > a[href*="/label/"],
.product-detail-box .option > ul > li > a[href*="/artist/"],
.product-detail-box .option > ul > li > a[href*="/release/"],
.product-detail-box .option > ul > li > a[href*="/master/"] {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  min-height: 0 !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  color: #272238 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Характеристики. Разметку переписали на <dl>: раньше каждое значение
   и каждая запятая были отдельными <li>, и блок выглядел лесенкой. */
.spec-note {
  color: #5c5c5c;
  line-height: 1.6;
  margin-bottom: .9rem;
}
.spec-list {
  margin: 0 0 1.1rem;
}
.spec-row {
  display: flex;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.spec-row:last-child {
  border-bottom: 0;
}
.spec-row dt {
  flex: 0 0 110px;
  margin: 0;
  color: #8a8a8a;
  font-weight: 500;
  font-size: .85rem;
  line-height: 1.45;
}
.spec-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #1f2937;
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.45;
}

/* Лейблы — кликабельные чипы. Идея была верная, но раньше они шли
   отдельными <li> вперемешку с <li>, </li>, и ряд «съезжал». */
.spec-labels {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.spec-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2937;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.spec-label:hover {
  border-color: var(--theme-color, #e07b39);
  background: rgba(139, 127, 214, .12);
  color: #1f2937;
}
.spec-label-cat {
  font-weight: 500;
  font-size: .76rem;
  color: #8a8a8a;
}

/* плотнее по вертикали — лишний воздух в центральной колонке убран */
.product-detail-box .sale-details {
  margin-bottom: 1.1rem;
}
.product-detail-box .title-box4 {
  margin-bottom: .5rem;
}

/* --- Правая колонка: компактный профиль продавца ------------------
 * Было: логотип 100×100 по центру, затем имя, город и ссылка
 * в столбик с line-height:2em — блок занимал полэкрана. */
.seller-mini {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .9rem;
}
.seller-mini-logo {
  flex: 0 0 auto;
  display: inline-flex;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  padding: 6px;
}
.seller-mini-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 !important;
}
.seller-mini-info {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.seller-mini-name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: #1f2937;
}
.seller-mini-city {
  font-size: .8rem;
  color: #7a7a7a;
  line-height: 1.3;
}
.seller-mini-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--theme-color, #e07b39);
  margin-top: .1rem;
}

/* --- Правая колонка: «Также в продаже у других продавцов» ---------
 * Было на float:left/right с процентными ширинами — строки не
 * выравнивались, цена уезжала вниз. Теперь флекс-строки. */
.delevery-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}
/* (Старый флекс-вариант .other-seller удалён — конфликтовал с 3-строчной
   версией ниже и «сжимал» название в столбик по буквам.) */

/* единый ритм блоков в сайдбаре товара */
.product-section .sidebar-box,
.sidebar-box {
  padding: 1.1rem 1.15rem;
  border-radius: 14px;
}
.sidebar-box .mb-4 {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------
 * Страница продавца: воздух и плотность
 *   Замер: у .about-section по 83.5px сверху и снизу, у следующей
 *   секции столько же — между блоком продавца и каталогом зияло 167px.
 *   Приводим к современному ритму.
 * --------------------------------------------------------------- */
.about-section {
  padding-top: clamp(1.5rem, 3.5vw, 2.75rem) !important;
  padding-bottom: clamp(1rem, 2.5vw, 1.75rem) !important;
}
.about-section + section,
.about-section + .shop-page {
  padding-top: clamp(1rem, 2.5vw, 2rem) !important;
}

/* Заголовок продавца: надзаголовок тише, имя крупнее и ближе к нему */
.about-section .contenten-wrap > .content-box h5 {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--theme-color, #e07b39);
  margin-bottom: .3rem;
}
.about-section .contenten-wrap > .content-box h4 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

/* Плитки статистики под логотипом — компактнее и аккуратнее */
.widget-list {
  margin-top: 1rem;
}
.widget-list .widget {
  padding: .8rem .95rem !important;
  border-radius: 12px;
  gap: .7rem;
  height: 100%;
}
.widget-list .widget h6 {
  font-size: 1.2rem;
  line-height: 1.15;
  margin-bottom: .1rem;
}
.widget-list .widget p {
  font-size: .8rem;
  line-height: 1.3;
  margin: 0;
  color: #6b6b6b;
}

/* Логотип и статистика центрируются в своей колонке */
@media (min-width: 992px) {
  .seller-logo-box {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
 * 13. Страница поиска: убираем белый провал
 *     Замер: секция .shop-page рендерилась пустой на 167px, плюс
 *     .search-page занимала 214px ради формы в ~60px.
 * --------------------------------------------------------------- */
.shop-page.is-empty-hidden {
  display: none;
}

.search-page {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.search-hint {
  max-width: 620px;
  margin: 2rem auto 0;
  text-align: center;
  color: #6b6b6b;
}
.search-hint-icon {
  color: #c9c9c9;
  margin-bottom: .75rem;
}
.search-hint h3 {
  margin-bottom: .5rem;
  color: #262834;
}
.search-hint p {
  margin: 0;
  line-height: 1.6;
}

/* Заголовки страниц: тема применяет text-transform:capitalize — приём из
   английских шаблонов. В русском он даёт «Поиск По Базе Данных Более 17
   Миллионов Релизов». Возвращаем нормальный регистр. */
.breadcrumb-box h1,
.heading-box h1,
.breadcrumb-box .breadcrumb li a {
  text-transform: none !important;
}
.breadcrumb-box h1 {
  line-height: 1.2;
  margin-bottom: .5rem;
}

/* Форма поиска: собираем в аккуратный центрированный блок.
   Раньше поле, кнопка и reCAPTCHA висели вразнобой по левому краю. */
.search-page .container-lg > .search-box,
.search-page .search-box {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.search-page .search-box-side .form-group {
  display: flex;
  justify-content: center;
  width: 100%;
}
.search-page .search-box + .search-box {
  margin-top: .85rem;
}

@media (max-width: 767px) {
  /* на мобиле капча центрируется после масштабирования */
  .search-page .g-recaptcha {
    transform-origin: center top;
  }
  .search-page .search-box-side .form-group {
    overflow: visible;
  }
}

/* ---------------------------------------------------------------
 * 14. Баннер WaxPost
 *     Три inline-<span> с крупными кеглями наезжали друг на друга
 *     («2990₽» на «За Коробочку Винила»), а инлайновые padding:30px
 *     и border-radius:40px не адаптировались под узкие экраны.
 * --------------------------------------------------------------- */
.sub-banner .content-box {
  max-width: min(92%, 620px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(1.1rem, 3vw, 2rem) !important;
  border-radius: 24px !important;
}

.sub-banner .content-box .heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: 100%;
}

/* спаны становятся блоками — больше не наезжают друг на друга */
.sub-banner .content-box .heading-wrap > span {
  display: block;
  line-height: 1.15;
  padding-bottom: 0 !important;
}

.sub-banner .content-box .offer-text {
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  font-weight: 600;
}

.sub-banner .content-box .span-4 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
}

/* Мобильная версия баннера.
   Замер на узком экране: .content-box имеет position:absolute и высоту 321px,
   тогда как сам баннер — всего 215px. Абсолютный блок не растягивает родителя,
   поэтому текст вылезал за картинку вверх и наезжал сам на себя.
   Решение: на узких экранах пускаем контент в обычный поток — баннер растёт
   под содержимое, картинка остаётся фоном. */
@media (max-width: 991px) {
  .sub-banner.ratio_asos,
  .sub-banner .sub-banner {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
  }
  .sub-banner .sub-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 2.5rem) 1rem !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .sub-banner .sub-banner::before,
  .sub-banner.ratio_asos::before {
    content: none !important;
    padding-top: 0 !important;
  }
  .sub-banner .content-box {
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    inset: auto !important;
  }
}

/* ---------------------------------------------------------------
 * 15. Селекты тулбара (кол-во позиций, сортировка)
 *     Были нативные, со стрелками операционки — на macOS двойная
 *     стрелка, на Windows своя. Выглядело чужеродно. Приводим к
 *     единому виду со своим шевроном.
 * --------------------------------------------------------------- */
.select-dropdown select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  border-radius: 10px;
  padding: .55rem 2.4rem .55rem .9rem;
  min-height: 44px;
  font-size: .95rem;
  color: #262834;
  cursor: pointer;
  line-height: 1.2;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23262834' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select-dropdown select:hover {
  border-color: rgba(0, 0, 0, .28) !important;
}
.select-dropdown select:focus-visible {
  outline: none;
  border-color: var(--theme-color, #e07b39) !important;
  box-shadow: 0 0 0 3px rgba(139, 127, 214, .25);
}

/* ---------------------------------------------------------------
 * 16. Страница продавца /user/{name}
 *     Было: инлайновая фиолетовая рамка со смещённой на 12px тенью,
 *     логотип-заглушка 427px, вылезавший за край на 1440,
 *     и стена правил продавца.
 * --------------------------------------------------------------- */
.seller-card {
  margin: 1.25rem 0 0 !important;
  padding: clamp(1rem, 2.5vw, 1.5rem) !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04) !important;
  background: #fff;
}
.seller-card .seller-city {
  margin-bottom: .75rem;
  color: #5c5c5c;
}
.seller-card .seller-about {
  color: #444;
  line-height: 1.65;
  margin-bottom: .5rem;
}
/* правила продавца используют тот же аккордеон, что и карточка товара */
.seller-card .seller-terms {
  margin-top: .75rem;
}

/* Логотип магазина: заглушка приходит 427×427 и на 1440 вылезала за край */
.seller-logo-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.seller-logo-box img {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 991px) {
  .seller-logo-box {
    margin-bottom: 1.25rem;
  }
  .seller-logo-box img {
    max-width: 170px;
  }
}

/* --- Мобильный подвал ---------------------------------------------
 * Замер показал: списки ссылок схлопнуты (max-height:0; overflow:hidden),
 * раскрываются классом .open, который вешает аккордеон из script_1.js.
 * Но обработчик ищет «.nav-footer h5», а заголовки в разметке — <h3>.
 * Селектор не совпадает => клик не вешается, раскрыть невозможно,
 * и 12 ссылок подвала были недоступны на мобиле в принципе.
 * Плюс у заголовка cursor:auto и нет никакого значка — то есть даже
 * намёка на кликабельность.
 * Решение: не чиним хрупкий аккордеон, а показываем ссылки сразу.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .nav-footer ul {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: .35rem;
  }
}

@media (max-width: 767px) {
  /* колонки подвала не липнут друг к другу на узком экране */
  footer .row > [class*="col"],
  .nav-footer {
    margin-bottom: 1.5rem;
  }

  /* заголовки колонок — единый ритм */
  .nav-footer h3,
  .nav-footer h4,
  .nav-footer h5 {
    font-size: 1.05rem;
    margin-bottom: .25rem;
  }

  /* Второй заголовок в колонке («Личный Кабинет» после «Базы Данных»)
     липнул к списку выше. Правило «ul + h3» не срабатывало: между ними
     стоит <p>. Поэтому отступ даём любому заголовку, кроме первого. */
  .nav-footer h3:not(:first-child),
  .nav-footer h4:not(:first-child),
  .nav-footer h5:not(:first-child) {
    margin-top: 1.6rem !important;
  }

  /* воздух между колонками подвала */
  .nav-footer ul {
    margin-bottom: .25rem;
  }

  /* ссылки удобно нажимать пальцем */
  .nav-footer ul li a {
    display: inline-block;
    padding: .3rem 0;
    line-height: 1.45;
  }

  /* Иконки соцсетей. Замер показал 20×23 вместо заданных 40×40:
     флекс-контейнер сжимал <li>, и размер ссылки не применялся —
     та же болезнь, что была в шапке. Запрещаем сжатие. */
  .follow-wrap ul {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
  }
  .follow-wrap ul li {
    flex: 0 0 auto !important;
    width: auto !important;
    list-style: none;
  }
  .follow-wrap ul li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    transition: background-color .15s ease;
  }
  .follow-wrap ul li a:hover {
    background: rgba(255, 255, 255, .16);
  }
  .follow-wrap ul li a img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    flex: 0 0 auto;
    object-fit: contain;
  }

  /* нижняя строка: условия и копирайт по центру, а не вразнобой */
  .sub-footer .row > [class*="col"] {
    text-align: center !important;
    margin-bottom: .5rem;
  }
}

/* ---------------------------------------------------------------
 * 17. Шапка: логотип
 *     Был 240×32 при ширине шапки до 1920 — терялся рядом с меню.
 * --------------------------------------------------------------- */
/* Логотип был 245×32 и терялся рядом с меню.
   Тонкость: у картинки max-width:100%, а родитель .logo-link — строчный
   элемент, чья ширина считается по содержимому. Возникал замкнутый круг
   (картинка меряется от родителя, родитель — от картинки), и браузер
   схлопывал логотип до 90px. Поэтому родителю задаём inline-flex,
   а картинке снимаем max-width. */
.logo-link {
  display: inline-flex !important;
  align-items: center;
}
.logo-link .logo {
  /* 320px оказалось перебором: меню сжималось, а блок иконок ужимался
     до 57px на три штуки. 250 — золотая середина между «мелкий» и «огромный». */
  width: clamp(160px, 17vw, 250px) !important;
  max-width: none !important;
  height: auto !important;
}

/* ---------------------------------------------------------------
 * Иконки профиля / избранного / корзины в шапке.
 * Замер: их <ul> сжимался до 57px на три иконки — те слипались,
 * а абсолютный бейдж корзины наезжал на пункт меню.
 * Та же болезнь, что была у соцсетей: флекс сжимал <li>.
 * --------------------------------------------------------------- */
.menu-right {
  flex: 0 0 auto;
}
.menu-right .icon-menu {
  display: flex !important;
  align-items: center;
  gap: .9rem;
  flex: 0 0 auto !important;
  margin-bottom: 0;
  padding-left: 0;
}
.menu-right .icon-menu > li {
  flex: 0 0 auto !important;
  width: auto !important;
  list-style: none;
}
.menu-right .icon-menu > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  position: relative;
  transition: background-color .15s ease;
}
.menu-right .icon-menu > li > a:hover {
  background-color: rgba(255, 255, 255, .10);
}

@media (min-width: 992px) {
  /* меню не должно упираться в иконки */
  .menu-right {
    margin-left: 1.25rem;
  }
}

/* Иконки соцсетей в верхней строке.
   Замер: 9×20px — картинку раздавило по ширине (флекс-контейнер сжал <li>
   до 9px), из-за чего логотипы VK и Telegram выглядели грязными полосками.
   Фиксируем размер и не даём их сжимать. */
.top-header ul li {
  flex: 0 0 auto !important;
  width: auto !important;
}
.top-header ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: background-color .15s ease;
}
.top-header ul li a:hover {
  background-color: rgba(255, 255, 255, .15);
}
.top-header ul li a img {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------
 * 18. Мобильное меню (offcanvas)
 *     Было: у каждого <li> рамка 1px — пункты выглядели как поля
 *     формы; раскрывающийся «База данных дискографий» превращался
 *     в пустой прямоугольник, а подменю — в белую карточку поверх.
 * --------------------------------------------------------------- */
@media (max-width: 991px) {

  #primaryMenu .offcanvas-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  /* убираем «поля формы» */
  #primaryMenu .navbar-nav > li.nav-item {
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  #primaryMenu .navbar-nav > li.nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .95rem .25rem !important;
    min-height: 48px;
    font-size: .92rem;
    line-height: 1.3;
    color: #262834;
  }

  /* раскрывающийся пункт: свой шеврон вместо пустоты */
  #primaryMenu .nav-link.dropdown-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    margin: 0 2px 0 0;
    flex: 0 0 auto;
  }
  #primaryMenu .nav-item.dropdown.show .nav-link.dropdown-toggle::after {
    transform: rotate(-135deg);
  }

  /* подменю — вложенный список, а не белая карточка поверх контента */
  #primaryMenu .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, .03) !important;
    border-radius: 10px !important;
    margin: 0 0 .6rem !important;
    padding: .35rem .25rem !important;
    transform: none !important;
  }
  #primaryMenu .dropdown-menu .dropdown-item {
    padding: .7rem .75rem !important;
    white-space: normal;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* второстепенный блок — пункты бывшей верхней строки */
  .mobile-extra-nav {
    margin-top: 1.25rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(0, 0, 0, .10);
  }
  .mobile-extra-nav > li.nav-item {
    border-bottom: 0 !important;
  }
  .mobile-extra-nav > li.nav-item > .nav-link {
    text-transform: none !important;
    font-size: .95rem !important;
    color: #6b6b6b !important;
    padding: .6rem .25rem !important;
    min-height: 44px;
  }
}

/* ==========================================================================
   СЕТКА КАРТОЧЕК — одинаковая ширина независимо от количества позиций
   --------------------------------------------------------------------------
   Было: bootstrap row-cols-2 / -sm-3 / -xl-4 — жёстко заданное КОЛИЧЕСТВО
   колонок. Ширина карточки = 1/N ширины контейнера, а контейнер на разных
   страницах разный (на /release он ~936px, на /marketplace ~1320px).
   Из-за этого на странице релиза карточка получалась 234px: заголовок
   обрезался, «Добавить В Корзину» переносилось в две строки. Одна позиция
   в такой сетке выглядела особенно узко.

   Стало: CSS Grid c auto-fill — задаём МИНИМАЛЬНУЮ ширину трека, а
   количество колонок считает браузер под фактическую ширину контейнера.
   Одна позиция получает ровно такой же трек, как и двадцать.
   ========================================================================== */
/* На телефоне ширины слишком мало, чтобы доверять auto-fill: жёстко две
   колонки — как было раньше. Дальше уже считает браузер. */
.grid-section {
  display: grid !important;
  /* minmax(0,1fr), а не 1fr: у 1fr нижняя граница — min-content, и длинное
     неразрывное название раздувает колонку за пределы экрана. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem .75rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* У бутстраповского .row тут margin-top: calc(-1 * gutter-y) = -24px.
     Сетка из-за него наезжала на счётчик «1–20 из 691» сверху. */
  margin-top: 0 !important;
}
/* обнуляем bootstrap-овские гаттеры на колонках: расстояния теперь даёт gap */
.grid-section > * {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* колонка — флекс-контейнер, чтобы карточка тянулась на всю её высоту */
  display: flex !important;
}

/* Карточки в одной строке одинаковой высоты: трек грида и так одной высоты,
   но сама .product-card раньше тянулась только по своему содержимому —
   у карточек с коротким названием кнопка и продавец «подпрыгивали». */
.grid-section > * > .product-card {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.product-card > .content-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* блок продавца прижимаем к низу — тогда кнопки «В корзину» встают в ряд */
.product-card .card-seller-wrap {
  margin-top: auto;
}
/* Количество колонок берём ОТ классов row-cols-* (их ставит тема через
   переключатель плотности 2/3/4 — см. grid-style.js). Раньше здесь были
   жёсткие брейкпоинты, и переключатель менял класс, а колонки — нет. */
.grid-section.row-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-section.row-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-section.row-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-section.row-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 576px) {
  .grid-section { gap: 1.5rem 1rem; }
  .grid-section.row-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-section.row-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-section.row-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-section.row-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid-section.row-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-section.row-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-section.row-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .grid-section { gap: 1.75rem 1.25rem; }
  .grid-section.row-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-section.row-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-section.row-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Блок вкладок на release/master/artist/label занимал 1051px вместо 1376px:
   .description-box у темы — flex-контейнер, а вложенный .row не растягивался
   и вставал по ширине содержимого. Справа пустовало ~325px, из-за чего
   карточки и выглядели тесными. */
.description-box > .row {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* ==========================================================================
   ВКЛАДКИ-ПИЛЮЛИ.
   .nav-tabs2 — release/master/artist/label (Релизы В Продаже / Другие Версии).
   .nav-tabs5 — главная (Раритеты / Новинки / БестСеллеры), тот же вид.
   ========================================================================== */
.nav-tabs2.row-tab,
.nav-tabs5.row-tab {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
}
.nav-tabs2.row-tab > .nav-item,
.nav-tabs5.row-tab > .nav-item {
  flex: 0 1 auto;
  margin: 0 !important;
}
.nav-tabs2.row-tab .nav-link,
.nav-tabs5.row-tab .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1.15rem !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #4a4a4a !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  white-space: normal;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nav-tabs2.row-tab .nav-link:hover,
.nav-tabs5.row-tab .nav-link:hover {
  background: #f6f6f6 !important;
  border-color: rgba(0, 0, 0, .18) !important;
  color: #1f1f1f !important;
}
.nav-tabs2.row-tab .nav-link.active,
.nav-tabs5.row-tab .nav-link.active {
  background: #272238 !important;
  border-color: #272238 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.nav-tabs2.row-tab .nav-link:focus-visible,
.nav-tabs5.row-tab .nav-link:focus-visible {
  outline: 2px solid #272238;
  outline-offset: 2px;
}

/* ==========================================================================
   СЧЁТЧИК РЕЗУЛЬТАТОВ «1–20 из 27»
   ========================================================================== */
.results-count {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: #f2f3f5;
  color: #5b6070;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* ==========================================================================
   БЛОК ПРОДАВЦА ВНУТРИ КАРТОЧКИ ТОВАРА
   --------------------------------------------------------------------------
   Было: bootstrap-колонки col-lg-3 / col-lg-9 внутри карточки шириной 250px.
   Ниже lg колонки схлопывались в полную ширину, логотип уезжал по центру
   отдельной строкой, а имя магазина шло вложенной ссылкой внутри ссылки
   на товар (невалидный HTML — браузер перестраивал разметку).
   Стало: обычный flex, без вложенных ссылок.
   ========================================================================== */
.card-seller-wrap {
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
/* !important здесь по делу: тема задаёт display и font-size для span внутри
   карточки более специфичными селекторами, и без этого блок разъезжался —
   элементы вставали inline-block по 18px и переносились как попало. */
.card-seller {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  text-align: left !important;
}
.card-seller-logo {
  flex: 0 0 auto;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 50%;
  background: #fff;
}
.card-seller-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 3px;
  margin: 0 !important;
}
.card-seller-info {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3 !important;
  text-align: left !important;
}
.card-seller-name {
  display: block !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: #272238 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-seller-meta {
  display: block !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  color: #8a8f9c !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-seller-meta:empty { display: none !important; }

/* Ссылки в описаниях релизов/артистов/лейблов — в цвет уже существующих
   ссылок на artist/label в том же тексте (они заданы инлайн-стилем). */
.desc-link {
  color: #272238;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.desc-link:hover {
  color: #8b7fd6;
}

/* ==========================================================================
   ДОРАБОТКИ ПО ЗАМЕЧАНИЯМ
   ========================================================================== */

/* Лейблы: чипы прижимаем влево и не даём им торчать за колонку.
   На узких экранах подпись и значение встают друг под другом — иначе
   колонка dt в 110px съедает половину ширины. */
.spec-row dd {
  text-align: left;
}
.spec-labels {
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 100%;
}
.spec-label {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.spec-label-cat {
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .spec-row {
    flex-direction: column;
    gap: .2rem;
  }
  .spec-row dt {
    flex: 0 0 auto;
  }
}

/* Вопросик рядом со значением состояния: не отрывается от текста
   и не съезжает на свою строку. */
.cond-help {
  margin-left: .25rem;
  vertical-align: middle;
}

/* Блок продавца в карточке теперь отдельная ссылка на профиль, а не часть
   ссылки на товар (раньше вложенный <a> внутри <a> — браузер их разрывал,
   и клик по продавцу вёл на товар). */
a.card-seller-wrap {
  display: block;
  text-decoration: none;
}
a.card-seller-wrap:hover .card-seller-name {
  text-decoration: underline;
}

/* ==========================================================================
   «ТАКЖЕ В ПРОДАЖЕ У ДРУГИХ ПРОДАВЦОВ» — три строки
   Строка 1: название на всю ширину
   Строка 2: состояние и конверт
   Строка 3: цена и продавец по краям
   ========================================================================== */
.other-seller {
  display: block;
  padding: .85rem .9rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  background: #fff;
}
.other-seller + .other-seller {
  margin-top: .6rem;
}
@media (hover: hover) {
  .other-seller:hover {
    border-color: rgba(0, 0, 0, .18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  }
}
.other-seller-item {
  display: block;
  text-decoration: none;
}
.other-seller-title {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  color: #272238;
}
.other-seller-item:hover .other-seller-title {
  text-decoration: underline;
}
.other-seller-conds {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  margin-top: .35rem;
}
.other-seller-cond {
  font-size: .8rem;
  color: #6b7280;
  line-height: 1.4;
  white-space: nowrap;
}
.other-seller-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.other-seller-foot .price {
  flex: 0 0 auto;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  text-decoration: none;
  white-space: nowrap;
}
.other-seller-shop {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .45rem;
  flex: 0 1 auto;
  min-width: 0;
  width: auto !important;
  text-decoration: none;
}
.other-seller-shop img {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}
.other-seller-shop span {
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.other-seller-shop:hover span {
  color: #272238 !important;
  text-decoration: underline;
}

/* ==========================================================================
   СТРЕЛКИ У СЛАЙДЕРОВ ПОДБОРОК (Раритеты / Новинки / БестСеллеры)
   В разметке темы их не было вовсе, слайдер листался только мышью.
   ========================================================================== */
.product-slider {
  position: relative;
}
.mv-slider-nav {
  position: absolute;
  top: 38%;
  z-index: 5;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.mv-slider-nav:hover {
  background: #272238;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
/* стрелка — уголок из бордеров, чтобы не тянуть иконочный шрифт */
.mv-slider-nav::before {
  content: "";
  width: 9px;
  height: 9px;
  border: solid #272238;
  border-width: 2px 2px 0 0;
}
.mv-slider-nav:hover::before {
  border-color: #fff;
}
.mv-slider-prev {
  left: -8px;
}
.mv-slider-prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}
.mv-slider-next {
  right: -8px;
}
.mv-slider-next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}
/* Swiper сам вешает этот класс, когда листать некуда */
.mv-slider-nav.swiper-button-disabled,
.mv-slider-nav.swiper-button-lock {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  /* на тапскрине листают пальцем — стрелки только отъедают место */
  .mv-slider-nav {
    display: none;
  }
}

/* ==========================================================================
   КАРТОЧКИ СОБЫТИЙ (/events и блок «Выставки и Ярмарки» на главной)
   Те же .product-card в .grid-section, что и в каталоге, но текст разной
   длины делал карточки разной высоты. Фиксируем число строк у даты,
   названия и адреса — тогда все карточки одной высоты.
   Скоуп по ссылке на /event/, чтобы не задеть товарные карточки.
   ========================================================================== */
.content-box > a[href^="/event/"] {
  display: block;
  text-decoration: none;
}
.content-box > a[href^="/event/"] > p:first-child {
  margin: 0 0 .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: #8a8f9c;
}
.content-box > a[href^="/event/"] > h5,
.content-box > a[href^="/event/"] > .event-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0 0 .4rem;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.3;
  color: #272238;
}
.content-box > a[href^="/event/"] > p:last-child,
.content-box > a[href^="/event/"] > .details {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
  margin: 0;
  font-size: .82rem;
  line-height: 1.3;
  color: #6b7280;
}
.content-box > a[href^="/event/"] > p:last-child strong {
  color: #3c4150;
}


/* ==========================================================================
   ФИЛЬТРЫ (artist / label / master) — сайдбар как в /marketplace.
   Разметка и классы темы (.sidebar-controll / .filter-option / .checkboxes),
   поэтому основной вид даёт сама тема. Здесь — только мелочи.
   ========================================================================== */
/* выбранное значение подсвечиваем прямо в списке */
.sidebar-controll .filter-check > li.is-on > .checkboxes > form > a {
  font-weight: 700;
  color: var(--theme-color, #e07b39);
}
.sidebar-controll .filter-check > li.is-on > .checkboxes > form > a::before {
  content: "\2713\00a0";
}
/* кнопка «Фильтры» на мобильном — иконка не растягивается */
.filter-btn i {
  width: 16px;
  height: 16px;
  margin-left: .4rem;
}

/* ==========================================================================
   КАРТОЧКА artist/label/master/release — строки состояния как в /marketplace.
   Раньше «Состояние:/Конверт:» шли обычным текстом с <br/>, а вопросик
   переносился на отдельную строку — карточки «прыгали». Теперь каждая
   строка спецификации — один ряд (nowrap, ellipsis), вопросик прижат к
   тексту и не переносится.
   ========================================================================== */
.product-card .edition-block strong.cond-strong {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.product-card .edition-block strong.cond-strong .cond-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  /* тема раздувает <span> внутри карточки до ~17px/600 — гасим явно,
     чтобы «Состояние/Конверт» были тем же кеглем, что «Издание» и формат */
  font-size: .78rem !important;
  font-weight: 400 !important;
  color: #7a7a7a !important;
  line-height: 1.45 !important;
}
.product-card .edition-block strong.cond-strong .cond-help {
  flex: 0 0 auto;
}

/* ==========================================================================
   РЕДИЗАЙН: лавандовый акцент + Inter + современные кнопки/иконки.
   Всё в оверрайд-слое, тему не трогаем. Откат — удалить этот блок.
   --------------------------------------------------------------------------
   Тема почти целиком завязана на переменную --theme-color (её задаёт
   body.theme-color2 = #d97819). Переопределяем переменную — и оранжевый
   становится лавандовым почти везде. Отдельно правим жёстко прописанные
   бирюзу/оранжевый и декоративные детали.
   ========================================================================== */
:root,
body.theme-color2 {
  /* Два цвета. --theme-color = ЛАВАНДА: акцентный ТЕКСТ и элементы, которые
     тема красит переменной (заголовок-хайлайт на тёмном фоне, «В Коллекцию»,
     бордеры). Оставляем лавандовой, иначе акцентный текст на тёмных фонах
     становится тёмным и пропадает.
     Кнопки красим ОТДЕЛЬНО тёмным #272238 явными правилами (см. ниже) —
     чтобы не зависеть от переменной и не ломать варианты. */
  --theme-color: #8b7fd6;
  --theme-color2: #8b7fd6;
  --mv-accent: #8b7fd6;          /* акцент/ховер/крошки/фокус */
  --mv-accent-dark: #272238;     /* тёмный — заливка кнопок */
  --mv-accent-strong: #272238;
  --mv-accent-tint: rgba(139, 127, 214, .12);
}

/* --- Шрифт: Inter по всему сайту (декоративный Leckerli One у логотипа
       не трогаем) --- */
body,
button,
input,
select,
textarea,
.btn,
.btn-solid,
.nav-link,
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- Кнопки: убираем «полосочку» снизу (декоративный ::after у темы) и
       делаем современный вид: скругление, мягкая тень, без резинового
       padding. Заливка — глубокая лаванда, чтобы белый текст читался. --- */
.btn-solid::after,
.btn-outline::after,
.btn-special::after,
.btn-solid .arrow::after,
.btn-solid .arrow,
.btn-outline .arrow,
.btn-special .arrow {
  display: none !important;
}
.mb-line,
.mb-line.btn-outline,
.mb-line.btn-special {
  margin-bottom: 0 !important;
}
.btn-solid,
.btn-special {
  background-color: var(--mv-accent-strong) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(39, 34, 56, .22);
  transition: background-color .18s ease, box-shadow .18s ease, transform .05s ease;
}
.btn-solid:hover,
.btn-special:hover {
  background-color: #453d66 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(39, 34, 56, .30);
}
.btn-solid:active,
.btn-special:active {
  transform: translateY(1px);
}
/* тёмные кнопки-корзины и т.п. в карточках — оставляем тёмными, только
   выравниваем скругление и убираем полоску */
.addtocart-btn {
  border-radius: 12px !important;
}
.btn-outline {
  border-radius: 12px !important;
}

/* --- «Голубая подложка» под заголовками: тема красит .bg-theme-blue в
       бирюзу 10%. Меняем на лавандовый тинт (или можно сделать прозрачной). --- */
.bg-theme-blue {
  background-color: var(--mv-accent-tint) !important;
}

/* выделение текста — в тон */
::selection {
  background-color: rgba(139, 127, 214, .35);
  color: #272238;
}

/* --- Иконки: квадратные оранжевые плашки (напр. на «Написать нам»,
       карточки контактов) — тема красит их var(--theme-color), уже станут
       лавандовыми. Добавляем современное скругление и убираем острые углы. --- */
.contact-card .icon,
.contact-box .icon,
[class*="icon-box"],
.info-icon,
.feature-icon {
  border-radius: 14px !important;
}

/* поля ввода — современный фокус в лаванде вместо синего браузерного */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--mv-accent) !important;
  box-shadow: 0 0 0 3px rgba(139, 127, 214, .22) !important;
  outline: none !important;
}

/* ==========================================================================
   РЕДИЗАЙН v2 — шапка, отступы, формы, иконки, остатки оранжевого
   ========================================================================== */

/* --- (1) Верхняя плашка меню: была охра #d8b399, выбивалась. Делаем тёмной,
       в тон основной навигации, с лёгким лавандовым отливом. --- */
.top-header,
.header-common .top-header {
  background: linear-gradient(90deg, #272238 0%, #201f2e 100%) !important;
}
/* именно этот псевдоэлемент давал золотую/охровую полосу поверх плашки */
.top-header::before,
.header-common .top-header::before {
  display: none !important;
}
.top-header .select-menu a,
.top-header .marquee,
.top-header .social-list a {
  color: #e8e6f2 !important;
}
/* Ссылки верхней плашки: КАПС, но визуально в размер бегущей строки.
   Числом было 14px = marquee, однако заглавные читаются крупнее строчных,
   поэтому кегль слегка уменьшаем (13px) — так меню и marquee смотрятся ровно. */
.top-header .select-menu a {
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  font-weight: 500 !important;
}
.top-header .marquee,
.top-header .marquee span,
.top-header .marquee a {
  font-size: 14px !important;
}

/* --- (2) Шапка: меню налезало на иконки (gap 52px) и всё было не по центру.
       Уменьшаем расстояние между пунктами, выравниваем по вертикали. --- */
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.menu-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}
.icon-menu {
  display: flex;
  align-items: center;
  margin: 0 !important;
}
@media (min-width: 1200px) {
  .navbar-nav {
    gap: 1.6rem !important;      /* было 52px — из-за этого меню перекрывало иконки */
  }
  .navbar-nav .nav-link {
    font-size: 13.5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    letter-spacing: .01em !important;
  }
}

/* --- (4) Единые вертикальные отступы секций. Эталон — release/product (40/32).
       Большие «дыры» на marketplace/search/events/contacts/support/product_group
       приводим к тому же. product получает чуть больший низ, чтобы не липнуть
       к футеру. --- */
.shop-page,
.search-page,
.contact-section,
.faq-section,
.product-page,
.about-section,
.event-section,
section.pb-0 {
  padding-top: clamp(28px, 3.2vw, 42px) !important;
  padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}
/* последняя секция перед футером не должна прижиматься вплотную */
main > section:last-of-type,
.product-page {
  padding-bottom: clamp(40px, 4vw, 56px) !important;
}

/* --- (5) Формы: единые скругления/высоты/зазоры во всех формах. --- */
.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  padding: .7rem .95rem !important;
  background-color: #fff !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
textarea {
  min-height: 120px !important;
  border-radius: 14px !important;
}
select {
  padding-right: 2rem !important;
}
/* подписи полей — единый ритм */
.form-group,
.form-item,
.input-box {
  margin-bottom: 1rem;
}
label {
  margin-bottom: .35rem;
  font-weight: 500;
}
/* поиск в шапке каталога — то же скругление, что у кнопки рядом */
.search-box .form-control,
.search-box input {
  border-radius: 12px !important;
}

/* --- (6) Иконки: круглые/скруглённые контейнеры, ровные размеры, лавандовый
       тон. Сами глифы — Feather (line-иконки), их не трогаем, только оформление
       подложек. --- */
[class*="icon-box"],
.contact-card .icon,
.info-icon,
.feature-icon,
.widget span,
.steps-box .icon,
.card-icon {
  border-radius: 14px !important;
}
/* соц-иконки/кружки в подвале и контактах — ровные круги */
.social-list a,
.footer-social a,
.contact-social a {
  border-radius: 50% !important;
}

/* --- (7) Шрифт Inter шире по элементам (тему местами перебивал Montserrat).
       Иконочные шрифты (Themify .ti-*) НЕ трогаем — у них свой font-family. --- */
body, h1, h2, h3, h4, h5, h6,
p, a, span, li, ul, ol, dl, dt, dd,
td, th, label, input, select, textarea, button,
.btn, .btn-solid, .btn-outline, .nav-link, .heading,
.dropdown-item, .breadcrumb, blockquote, small, strong, em,
[class*="title"], [class*="heading"] {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- (9) Подчистка остатков оранжевого/охры, что заданы в теме жёстко. --- */
.top-header { background-color: #201f2e; }  /* фолбэк если градиент не поддержан */

/* Декоративные PNG-сетки в футере были оранжевыми — сдвигаем оттенок в
   лаванду фильтром (перекрасить сам файл нельзя без замены картинки). */
footer img[src*="bg-footer"],
.footer-document img[src*="bg-footer"] {
  filter: hue-rotate(212deg) saturate(.85);
}
/* активная страница пагинации, если тема красит её жёстко — в акцент */
.pagination li a.active,
.pagination .active > a,
.pagination .active {
  background-color: var(--mv-accent-strong, #272238) !important;
  border-color: var(--mv-accent-strong, #272238) !important;
  color: #fff !important;
}

/* ==========================================================================
   ПРАВКИ ПО ЗАМЕЧАНИЯМ (партия 3)
   ========================================================================== */

/* (1) Верхняя плашка: уводим края в чуть более светлую лаванду, центр темнее */
.top-header,
.header-common .top-header {
  background: linear-gradient(90deg, #38315a 0%, #24223a 50%, #38315a 100%) !important;
}

/* (4) «В Коллекцию» / «В Список Желаний»: иконки были жёлтые/залитые.
   Делаем лавандовые контурные (Feather line-стиль) — современнее. */
.product-detail-box .option > ul > li[id^="wantli"] a,
.product-detail-box .option > ul > li[id^="haveli"] a {
  color: var(--mv-accent) !important;
}
.product-detail-box .option > ul > li[id^="wantli"] a i,
.product-detail-box .option > ul > li[id^="haveli"] a i,
.product-detail-box .option > ul > li[id^="wantli"] a svg,
.product-detail-box .option > ul > li[id^="haveli"] a svg {
  color: var(--mv-accent) !important;
  stroke: var(--mv-accent) !important;
  fill: none !important;
  width: 18px;
  height: 18px;
}

/* (5) Кнопки в карточках — только одна строка, без переноса. Текст короткий,
   переносить незачем; при нехватке места ужимаем шрифт, но не в две строки. */
.product-card .addtocart-btn,
.addtocart-btn.btn-sm {
  white-space: nowrap !important;
  font-size: 13.5px !important;
  padding-left: .6rem !important;
  padding-right: .6rem !important;
  gap: 6px;
}
.product-card .addtocart-btn i,
.product-card .addtocart-btn svg {
  flex: 0 0 auto;
}

/* ==========================================================================
   ДВУХЦВЕТНАЯ СИСТЕМА (партия 4): #272238 основной + #8b7fd6 акцент/ховер
   ========================================================================== */
/* Кнопки: тёмные, при наведении — лаванда */
.btn-solid:hover,
.btn-special:hover {
  background-color: #453d66 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(139, 127, 214, .30) !important;
}
/* Контентные ссылки (описания, тексты) — основной тёмный, ховер лаванда.
   Навигацию/подвал (светлый текст на тёмном) не трогаем.
   ВАЖНО: кнопки внутри .content-box (карточки каталога — .btn-solid и т.п.)
   ИСКЛЮЧАЕМ, иначе `.content-box a:hover` (специфичность выше, чем
   `.btn-solid:hover`) перекрашивал текст кнопки в лаванду на ховере —
   именно поэтому в каталоге ховер выглядел иначе, чем на /product/. */
.desc-link,
.content-box a:not(.btn-solid):not(.btn-special):not(.btn-style2):not(.filter-btn),
.product-detail-box .option > ul > li p a,
.spec-note a,
.faq-section a,
.about-section a {
  color: #272238 !important;
}
.desc-link:hover,
.content-box a:not(.btn-solid):not(.btn-special):not(.btn-style2):not(.filter-btn):hover,
.product-detail-box .option > ul > li p a:hover,
.faq-section a:hover,
.about-section a:hover {
  color: var(--mv-accent) !important;
}
/* Хлебные крошки — акцентная лаванда */
.breadcrumb .current a,
.breadcrumb-box .current a,
.breadcrumb li.current a,
.breadcrumb-box .breadcrumb .current,
ol.breadcrumb .current a {
  color: var(--mv-accent) !important;
}

/* (4) «Также в продаже»: тема делает .delevery-list li флексом (специфичнее
   моего .other-seller) — из-за этого название сжималось в столбик. Бьём той
   же/большей специфичностью и возвращаем 3-строчную раскладку. */
.delevery-list li.other-seller,
.delevery-service .delevery-list li.other-seller {
  display: block !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.delevery-list li.other-seller .other-seller-item {
  display: block !important;
}
.delevery-list li.other-seller .other-seller-conds {
  display: flex !important;
  flex-wrap: wrap;
  gap: .15rem .9rem;
}
.delevery-list li.other-seller .other-seller-foot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/* (3) Фото пластинки/конверта — квадратное (пластинка квадратная, логично).
   Скругления карточек/кнопок/прочего НЕ трогаем — только само изображение
   товара в сетке и его контейнер сверху. */
.product-card .img-box,
.product-card .primary-img,
.product-card .primary-img img,
.product-card .img-box img {
  border-radius: 0 !important;
}

/* ==========================================================================
   ПОРЯДОК: единые кнопки, единый шрифт Inter, квадратное фото (партия 5)
   ========================================================================== */

/* --- Шрифт: Inter ПРИНУДИТЕЛЬНО на всём, кроме иконочных шрифтов.
       Тема местами оставляла Montserrat (заголовки) — отсюда «разнокалиберность». */
body,
body *:not([class*="ti-"]):not([class*="fa-"]):not([class*="flaticon"]):not([data-feather]):not(svg):not(path):not(use):not(.feather) {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* --- Кнопки: ВСЕ заполненные — один вид. Тёмные #272238, белый текст,
       один размер, без иконок. Так они перестают «прыгать» размерами и
       текст всегда читается (раньше .btn-style2 брал тёмный текст из
       переменной на тёмном фоне — надписи пропадали). --- */
.btn-solid,
.btn-special,
.btn-style2,
.addtocart-btn,
.filter-btn,
button.btn,
.btn-solid.btn-sm {
  background-color: #272238 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 46px !important;
  padding: .7rem 1.4rem !important;
  box-shadow: 0 4px 14px rgba(39, 34, 56, .18);
  white-space: nowrap !important;
}
.btn-solid:hover,
.btn-special:hover,
.btn-style2:hover,
.addtocart-btn:hover,
.filter-btn:hover {
  background-color: #453d66 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(139, 127, 214, .30);
}
/* иконки внутри заполненных кнопок убираем — по просьбе, только текст.
   (Иконки-«сердечки» у «В Коллекцию / В Список Желаний» это НЕ .btn-solid —
   их не трогаем.) */
.btn-solid > i,
.btn-solid > svg,
.btn-special > i,
.btn-special > svg,
.btn-style2 > i,
.btn-style2 > svg,
.addtocart-btn > i,
.addtocart-btn > svg,
.filter-btn > i,
.filter-btn > svg {
  display: none !important;
}
/* Кнопки в карточках каталога — ТОТ ЖЕ вид, что на /product/ (одни и те же
   классы, стиль из общих правил выше), только чуть компактнее по высоте и с
   переносом текста: в узкой мобильной карточке длинная подпись не должна
   распирать сетку и давать горизонтальный скролл. */
.product-card .btn-solid,
.product-card .addtocart-btn {
  min-height: 38px !important;
  font-size: 13px !important;
  padding: .45rem .8rem !important;
  border-radius: 10px !important;
  white-space: normal !important;
}

/* --- Фото пластинки/конверта — квадратное ВЕЗДЕ (карточки + крупное фото
       на /product/). Прочие скругления (карточки, плеер Deezer, логотипы)
       не трогаем. --- */
.product-card .img-box,
.product-card .img-box img,
.product-card .primary-img,
.product-card .primary-img img,
.product-page .mainslider2,
.product-page .mainslider2 img,
.product-page .mainslider2 .bg-img,
.product-page .slider-box .swiper img,
.thumbnailSlider2 img {
  border-radius: 0 !important;
}

/* --- Умеренная типографическая шкала: убираем скачки размеров. --- */
h1, .h1 { font-size: clamp(1.5rem, 3vw, 1.9rem) !important; font-weight: 700 !important; }
h2, .h2 { font-size: clamp(1.3rem, 2.4vw, 1.55rem) !important; font-weight: 700 !important; }
h3, .h3 { font-size: clamp(1.12rem, 2vw, 1.3rem) !important; font-weight: 600 !important; }
h4, .h4, .heading { font-size: 1.1rem !important; font-weight: 600 !important; }
h5, .h5 { font-size: 1rem !important; font-weight: 600 !important; }

/* --- Кнопки: усиление. Текст бывает во вложенном <span> — красим и его
       белым, иначе на некоторых вариантах (.btn-style2.bg-white и т.п.) он
       брал цвет из переменной и пропадал. --- */
.btn-solid, .btn-solid *,
.btn-special, .btn-special *,
.btn-style2:not(.btn-outline2), .btn-style2:not(.btn-outline2) *,
.addtocart-btn, .addtocart-btn *,
.filter-btn, .filter-btn * {
  color: #fff !important;
}
.btn-style2:not(.btn-outline2),
.btn-style2.bg-white,
.btn-style2.btn-theme {
  background-color: #272238 !important;
  border-color: #272238 !important;
}
/* контурные кнопки — прозрачные, тёмный текст (не заполненные) */
.btn-outline,
.btn-outline2,
.btn-style2.btn-outline2 {
  background-color: transparent !important;
  color: #272238 !important;
  border: 1px solid #272238 !important;
}
.btn-outline *,
.btn-outline2 * {
  color: #272238 !important;
}
.btn-outline:hover,
.btn-outline2:hover {
  background-color: #272238 !important;
  color: #fff !important;
}
.btn-outline:hover *,
.btn-outline2:hover * {
  color: #fff !important;
}

/* --- Кнопки: наведение. Фон — тёмно-лавандовый (#453d66, чуть светлее
       базового #272238 — виден как ховер), текст — БЕЛЫЙ. Белый на тёмном
       всегда читается (~10:1). От «лаванда + тёмный текст» отказались:
       на светлой лаванде контраст пограничный и текст сливался. --- */
.btn-solid:hover, .btn-solid:hover *,
.btn-special:hover, .btn-special:hover *,
.btn-style2:not(.btn-outline2):hover, .btn-style2:not(.btn-outline2):hover *,
.addtocart-btn:hover, .addtocart-btn:hover *,
.filter-btn:hover, .filter-btn:hover * {
  background-color: #453d66 !important;
  color: #ffffff !important;
}

/* --- Кнопки: текст по центру по вертикали. .btn-style2 у темы inline-block,
       из-за чего надпись «съезжала» вверх. Делаем видимые кнопки inline-flex.
       ВАЖНО: НЕ трогаем скрытые кнопки —
         • скрытая «Уже В Корзине» прячется инлайном display:none (PHP) и
           display: none (JS add_cart);
         • кнопка «Фильтры» скрыта на десктопе классом d-lg-none.
       Раньше !important показывал их принудительно (дубли кнопок, «Фильтры»
       на десктопе). Поэтому исключаем скрытые состояния через :not(). --- */
.btn-solid:not([style*="display:none"]):not([style*="display: none"]):not(.d-none):not(.d-sm-none):not(.d-md-none):not(.d-lg-none):not(.d-xl-none),
.btn-special:not([style*="display:none"]):not([style*="display: none"]),
.btn-style2:not([style*="display:none"]):not([style*="display: none"]),
.addtocart-btn:not([style*="display:none"]):not([style*="display: none"]),
.btn-outline:not([style*="display:none"]):not([style*="display: none"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

/* --- Баннер на главной: воздух ВОКРУГ ТЕКСТОВ. Инлайн у плашки был
       padding сверху/слева 20px и 0 снизу — тексты «сжаты». Даём симметричные
       щедрые отступы + ритм между заголовком, описанием и кнопкой. Responsive
       через clamp, чтобы на всех ширинах было ровно. --- */
.home-slider .banner .content-box,
.banner .content-box {
  padding: clamp(1.75rem, 3.4vw, 2.85rem) clamp(1.5rem, 3vw, 2.6rem) !important;
}
.home-slider .banner .content-box .heading,
.banner .content-box .heading { margin-bottom: .95rem !important; }
.home-slider .banner .content-box p,
.banner .content-box p { margin-top: 0 !important; margin-bottom: 1.5rem !important; }
.home-slider .banner .content-box .btn-style2,
.banner .content-box .btn-style2 { margin-top: 0 !important; margin-bottom: 0 !important; }

/* --- Баннер на главной: первую строчку (заголовок страницы) уменьшаем,
       вторую («МАРКЕТ ВИНИЛА», акцент) оставляем крупной. --- */
.banner .content-box .heading,
.banner .heading,
.content-box .heading.color-white {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem) !important;   /* строка 1 — меньше */
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin-bottom: .5rem !important;
}
.banner .content-box .heading span,
.banner .heading span {
  display: inline-block;
  font-size: clamp(1.6rem, 3.8vw, 2.5rem) !important;    /* строка 2 — крупная */
  line-height: 1.15 !important;
  font-weight: 800 !important;
}
/* На узких экранах баннер разъезжался — держим текст в рамках, по центру,
   без переполнения. text-align с !important и margin auto, иначе «МАРКЕТ
   ВИНИЛА» на самых узких (~574–674px) уезжал влево. */
@media (max-width: 767px) {
  .home-slider-common .home-slider .banner .content-box,
  .banner .content-box,
  .banner .heading,
  .banner .content-box .heading {
    max-width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner .content-box .heading {
    font-size: clamp(.95rem, 4vw, 1.25rem) !important;
  }
  /* строку-акцент делаем блочной на всю ширину — тогда центрируется гарантированно */
  .banner .content-box .heading span,
  .banner .heading span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(1.3rem, 6.5vw, 1.9rem) !important;
  }
  .banner .content-box p,
  .banner .content-box .text {
    font-size: .85rem !important;
    line-height: 1.45 !important;
  }
  .banner .content-box .btn-style2,
  .banner .content-box .btn-solid {
    width: auto;
    max-width: 100%;
  }
}

/* --- Фото пластинки на /product/: контейнер .ratio_square скруглял верх
       (14px 14px 0 0) и обрезал фото. Делаем квадратным, как на /release/. --- */
.product-page .ratio_square,
.product-page .col-12.ratio_square,
.product-page .mainslider2,
.product-page .mainslider2 .bg-img,
.product-media-stack .ratio_square {
  border-radius: 0 !important;
}

/* --- (#2) Воздух между блоком поиска и «Применёнными фильтрами» в сайдбаре
       каталога (раньше слипались). --- */
.shop-page .sidebar-inner > .sidebar-box {
  margin-bottom: 1.25rem;
}
.shop-page .sidebar-inner > .sidebar-box:last-child {
  margin-bottom: 0;
}

/* --- (#1) Кнопка «Добавить в корзину» в карточке не должна прилипать к
       нижнему краю / блоку продавца. Немного воздуха снизу. --- */
.product-card .content-box {
  padding-bottom: .9rem;
}
.product-card .card-seller-wrap {
  margin-top: .85rem !important;
  padding-top: .75rem;
}
/* если продавца в карточке нет — просто отступ под кнопкой */
.product-card .content-box > div:last-child {
  margin-bottom: .2rem;
}

/* --- Блок Deezer под главным фото (product/release/master): верх квадратный
       (стыкуется с квадратным низом фото), низ скруглённый. Убираем зазор
       между фото и плеером — читаются как единый блок. --- */
.product-page .ratio_square:has(iframe) {
  margin-top: 0 !important;
}
/* Скругляем весь стек Deezer-блока (внешний контейнер + внутренний слайдер +
   сам iframe), иначе внутренний .mainslider2 с overflow:hidden обрезает
   контент квадратом раньше, чем сработает внешний радиус. */
.product-page .ratio_square:has(iframe),
.product-page .ratio_square:has(iframe) .mainslider2,
.product-page .ratio_square:has(iframe) .swiper-wrapper,
.product-page .ratio_square:has(iframe) .swiper-slide,
.product-page .ratio_square:has(iframe) iframe {
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   ВСПЛЫВАЮЩИЕ УВЕДОМЛЕНИЯ («Товар добавлен …») — чистый компактный вид
   Было: иконка-диск compact-disc.png, текст в <h3> (огромный глобальный
   размер) и медленный выезд с top:-1999px за 1с. Стало: аккуратная карточка,
   лавандовая галочка вместо иконки, мелкий текст, плавный fade + slide.
   ========================================================================== */
.notification-wrap {
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  box-shadow: none !important;
  transition: opacity .28s ease, transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.notification-wrap.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.notification-wrap .notification {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 12px 18px 12px 13px !important;
  gap: 12px !important;
  min-width: 210px;
  max-width: min(88vw, 340px);
  box-shadow: 0 12px 32px rgba(39, 34, 56, .18), 0 2px 8px rgba(39, 34, 56, .08) !important;
  border: 1px solid rgba(39, 34, 56, .06) !important;
}
/* убираем картинку-диск и декоративную полоску снизу */
.notification-wrap .notification img { display: none !important; }
.notification-wrap .notification::after { display: none !important; }
/* аккуратная галочка в лавандовом кружке вместо иконки-диска */
.notification-wrap .notification::before {
  content: "✓";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #8b7fd6;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* текст — компактный, не «h3-огромный» */
.notification-wrap .notification h3,
.notification-wrap .notification h5 {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #272238 !important;
}
.notification-wrap .notification h3 a,
.notification-wrap .notification h5 a {
  color: #272238 !important;
  text-decoration: none !important;
  transition: color .15s ease;
}
.notification-wrap .notification h3 a:hover,
.notification-wrap .notification h5 a:hover {
  color: #8b7fd6 !important;
}

/* ==========================================================================
   КОРЗИНА /cart/ — аккуратный современный вид
   Только оформление, разметку/логику не трогаем. Классы cart-специфичные,
   на другие страницы не влияют.
   ========================================================================== */
/* Заголовок «Ваша корзина» (прямой ребёнок контейнера, не пустое состояние) */
.card-page > .container-lg > h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin-bottom: 1rem !important;
}

/* --- Тонированный фон секции + белые карточки (как в макете). Раньше секция
       была прозрачной на белом фоне, товары/форма лежали «голыми» — карточки
       не читались. Теперь тонируем секцию и заворачиваем блоки в белые карты. --- */
.card-page {
  background: #f4f3f8 !important;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}
/* Список товаров — белая карточка */
.card-page .items-list {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  padding: 8px 20px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
}
/* Форма оформления — белая карточка под списком товаров */
.card-page .custom-form {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.4rem .35rem !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  margin-top: 1.25rem;
}
/* На тонированном фоне поля формы делаем чисто-белыми для контраста */
.card-page .custom-form .form-control {
  background: #fbfbfd !important;
}

/* --- Список товаров: строки-разделители, ровное выравнивание --- */
.cart-table { border-collapse: separate !important; border-spacing: 0 !important; }
.cart-table td {
  vertical-align: middle !important;
  padding: 14px 12px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(39, 34, 56, .08) !important;
  background: transparent !important;
}
.cart-table tr:last-child td { border-bottom: 0 !important; }
.cart-table .product-detail { display: flex; align-items: center; gap: 14px; }
.cart-table .pr-img {
  width: 76px !important;
  height: 76px !important;
  object-fit: cover !important;
  border-radius: 0 !important; /* конверт пластинки — квадрат, углы прямые */
  border: 1px solid rgba(39, 34, 56, .08);
  flex: 0 0 auto;
}
.cart-table .details h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #272238 !important;
  margin: 0 0 4px !important;
  line-height: 1.3;
}
/* Строки состояния/формата — обычный текст. Тема ставит .sold-by{display:flex}
   и .size{d-flex}, из-за чего <br/> между «Состояние» и «Конверт» ломал поток
   и вторая строка уезжала к центру. Возвращаем блочный текст.
   ВАЖНО: строку «Цена :» (.size.d-sm-none) НЕ трогаем — она должна оставаться
   скрытой на десктопе (цена и так есть в колонке справа) и показываться только
   на мобиле. Поэтому display возвращаем только для видимых строк. */
.cart-table .details .sold-by,
.cart-table .details .size {
  font-size: 13px !important;
  color: #6b6b6b !important;
  line-height: 1.5;
  margin: 0 !important;
}
.cart-table .details .sold-by,
.cart-table .details .size:not(.d-sm-none) {
  display: block !important;
}
.cart-table .details .size:not(.d-sm-none) { margin-top: 3px !important; }
/* иконка «?» (пояснение состояния) — ровно в строке текста */
.cart-table .details .cond-help {
  display: inline-flex !important;
  vertical-align: -2px;
  margin-left: 3px;
}
.cart-table td.price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #272238 !important;
  white-space: nowrap;
  text-align: right;
}
/* кнопка удаления — деликатная иконка, краснеет на ховере */
.cart-table .delete {
  background: transparent !important;
  border: 0 !important;
  color: #b0abbd !important;
  padding: 8px !important;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
  cursor: pointer;
}
.cart-table .delete:hover {
  color: #e24b4a !important;
  background: rgba(226, 75, 74, .08) !important;
}
.cart-table .delete svg {
  width: 18px;
  height: 18px;
}
/* мягкая подсветка строки товара под курсором */
.cart-table tbody tr {
  transition: background-color .15s ease;
}
.cart-table tbody tr:hover td {
  background: #faf9fd !important;
}
/* цены — табличные цифры, чтобы разряды стояли ровно */
.cart-table td.price,
.order-summery li span:last-child {
  font-variant-numeric: tabular-nums;
}

/* --- Правая колонка (итог): равная высота с левой колонкой. Блок «Условия
       продавца» тянется до низа соседнего блока (формы контактов), а зазор
       между блоками итога и условий = зазору между блоками слева (1.25rem). --- */
@media (min-width: 768px) {
  /* НЕ растягиваем колонки друг под друга (иначе более высокая правая колонка
     тянула бы левую). Высоту .summery-wrap задаёт скрипт = высоте контента
     левой колонки, после чего блок условий (flex:1) заполняет её и скроллится
     — так он доходит РОВНО до низа формы, не ниже. */
  .card-page .row.cart { align-items: flex-start; }
  .summery-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .summery-wrap .grand-total-wrap { flex: 0 0 auto; }
  .summery-wrap .seller-terms-box {
    flex: 1 1 auto;          /* заполняет остаток высоты до низа формы */
    min-height: 0;
    margin-top: 1.25rem !important;
  }
}
.summery-wrap .coupon-box,
.summery-wrap .grand-total-wrap {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.25rem !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .06);
}
.summery-wrap .coupon-box { margin-bottom: 0 !important; }
.summery-wrap .cart-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #272238 !important;
  margin-bottom: .35rem !important;
}
.summery-wrap .coupon-box .text-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: .5rem 0;
}
.summery-wrap .coupon-box .text-wrap h4 {
  font-size: 15px !important;
  margin: 0 !important;
}

/* Список сумм */
.order-summery { list-style: none; margin: .5rem 0 0 !important; padding: 0 !important; }
.order-summery li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #4a4658;
  border-bottom: 1px solid rgba(39, 34, 56, .06);
}
.order-summery li span:last-child {
  font-weight: 600;
  color: #272238;
  white-space: nowrap;
  text-align: right;
}
/* последняя строка — «Итого к оплате», выделяем */
.order-summery li:last-child {
  border-bottom: 0;
  margin-top: 4px;
  padding-top: 12px !important;
  font-size: 17px;
  font-weight: 700;
  color: #272238;
  border-top: 1px solid rgba(39, 34, 56, .12);
}
.order-summery li:last-child span:last-child { font-weight: 800; }

/* --- Форма оформления: подписи, фокус-ринг, предупреждение --- */
.card-page .input-box label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #272238 !important;
}
.card-page .form-control:focus {
  border-color: #8b7fd6 !important;
  box-shadow: 0 0 0 3px rgba(139, 127, 214, .18) !important;
}
/* красное предупреждение о правилах продавца — мягкая плашка, не голый red */
.card-page .checkbox-custom-label[style*="red"] {
  display: block;
  background: rgba(226, 75, 74, .07);
  border: 1px solid rgba(226, 75, 74, .20);
  border-radius: 10px;
  padding: 10px 12px;
  color: #b23c3c !important;
  font-size: 13px;
  line-height: 1.45;
}
.card-page .checkbox-custom { accent-color: #8b7fd6; width: 16px; height: 16px; }

/* --- Блок согласия. Остаётся на своём месте (в своей колонке — БЕЗ растяжки
       на всю ширину). ГЛАВНОЕ: текст обычным потоком, НЕ flex — иначе тема
       делала каждый кусок/ссылку отдельным флекс-элементом и текст «дробился»
       на нечитаемые обрывки. Чекбокс позиционируем абсолютом слева, текст
       обтекает его с отступом. Красное предупреждение (без чекбокса) не трогаем. --- */
.card-page .checkbox-custom-label:has(.checkbox-custom) {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 13px 16px 13px 46px;
  background: #f7f6fb;
  border: 1px solid rgba(39, 34, 56, .08);
  border-radius: 12px;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #5a556a !important;
  cursor: pointer;
}
.card-page .checkbox-custom-label:has(.checkbox-custom) .checkbox-custom {
  position: absolute;
  left: 16px;
  top: 15px;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #8b7fd6;
  cursor: pointer;
}
.card-page .checkbox-custom-label:has(.checkbox-custom) a {
  color: #8b7fd6 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.card-page .checkbox-custom-label:has(.checkbox-custom) a:hover { text-decoration: underline !important; }

/* --- «Комментарий к заказу» — textarea, растягивается по высоте ВРОВЕНЬ с
       соседним блоком согласия (они в одной строке grid). --- */
.card-page .custom-form .col-lg-6:has(.comment-textarea) { display: flex; }
.card-page .custom-form .input-box:has(.comment-textarea) {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0;
}
.card-page .custom-form .comment-textarea {
  flex: 1 1 auto;
  min-height: 72px;
  resize: vertical;
  line-height: 1.5 !important;
}

/* --- Правый блок согласия — зеркально левому: подпись сверху + плашка снизу,
       плашка заполняет высоту колонки, вровень с textarea «Комментарий». --- */
.card-page .custom-form .col-lg-6:has(.checkbox-custom) { display: flex; }
.card-page .custom-form .input-box:has(.checkbox-custom) {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0;
}
.card-page .custom-form .agree-field-label { flex: 0 0 auto; }
.card-page .checkbox-custom-label:has(.checkbox-custom) {
  flex: 1 1 auto;   /* плашка тянется на всю высоту колонки */
}

/* --- Действия в итоговом блоке: «Оформить заказ» (лаванда) над «Продолжить
       покупки». Обе кнопки — ОДИНАКОВАЯ высота, размер и начертание. --- */
.summery-wrap .cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
}
.summery-wrap .cart-actions .checkout-btn,
.summery-wrap .cart-actions .btn-outline {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 1.2rem !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* «Оформить заказ» — как кнопки на странице товара: тёмная, белый текст,
   мягкая тень, ховер — фиолетово-тёмный (#453d66), как у «Добавить в корзину». */
.checkout-btn.btn-solid,
.summery-wrap .checkout-btn {
  background-color: #272238 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(39, 34, 56, .18) !important;
  transition: background-color .18s, box-shadow .18s, transform .05s;
}
.checkout-btn.btn-solid *,
.summery-wrap .checkout-btn * { color: #fff !important; }
.checkout-btn.btn-solid:hover,
.summery-wrap .checkout-btn:hover {
  background-color: #453d66 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(139, 127, 214, .30) !important;
}
.summery-wrap .checkout-btn:active { transform: translateY(1px); }
/* «Продолжить покупки» — контур; при наведении мягкий лавандовый тон
   (не чёрный «траур»): светлая заливка + лавандовая рамка. */
.summery-wrap .cart-actions .btn-outline {
  background: #fff !important;
  color: #272238 !important;
  border: 1px solid #d7d2e8 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.summery-wrap .cart-actions .btn-outline:hover,
.summery-wrap .cart-actions .btn-outline:hover * {
  background: #efedf9 !important;
  color: #272238 !important;
  border-color: #453d66 !important;
}

/* --- Блок продавца: шапка (логотип + заголовок), затем текст условий, который
       заполняет карточку до низа и скроллится с явным индикатором. --- */
.summery-wrap .seller-terms-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.summery-wrap .seller-terms-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.summery-wrap .seller-logo { flex: 0 0 auto; display: inline-flex; }
.summery-wrap .seller-logo img {
  width: 48px !important;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  background: #f4f3f8;
  padding: 4px;
  border: 1px solid rgba(39, 34, 56, .08);
}
.summery-wrap .seller-terms-title {
  font-size: 14px;
  font-weight: 700;
  color: #272238;
}
.summery-wrap .seller-terms-text {
  flex: 1 1 auto;
  min-height: 64px;
  overflow-y: auto;
  font-size: 13px;
  color: #6b6b6b;
  line-height: 1.55;
  word-break: break-word;
  padding-right: 8px;
  /* мягкое затухание снизу — намёк, что текст продолжается */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.summery-wrap .seller-terms-text.seller-terms-empty {
  -webkit-mask-image: none;
  mask-image: none;
  color: #8a8598;
  font-style: italic;
}
/* видимый скроллбар — сразу ясно, что можно листать дальше */
.summery-wrap .seller-terms-text { scrollbar-width: thin; scrollbar-color: #b7aee0 #efedf7; }
.summery-wrap .seller-terms-text::-webkit-scrollbar { width: 8px; }
.summery-wrap .seller-terms-text::-webkit-scrollbar-track { background: #efedf7; border-radius: 4px; }
.summery-wrap .seller-terms-text::-webkit-scrollbar-thumb { background: #b7aee0; border-radius: 4px; }
.summery-wrap .seller-terms-text::-webkit-scrollbar-thumb:hover { background: #8b7fd6; }
/* «Читать все условия» — компактная ссылка-кнопка внизу блока (открывает
   модалку с полными правилами продавца) */
.summery-wrap .seller-terms-showall {
  flex: 0 0 auto;
  margin-top: 10px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: #8b7fd6;
  cursor: pointer;
  transition: color .15s ease;
}
.summery-wrap .seller-terms-showall::before,
.summery-wrap .seller-terms-showall::after { content: none !important; }
.summery-wrap .seller-terms-showall:hover { color: #6f62c8; text-decoration: underline; }

/* ==========================================================================
   ХЛЕБНЫЕ КРОШКИ — единый аккуратный вид на ВСЕХ страницах (как в /cart/)
   Чистый центрированный заголовок + строка навигации, без баннер-картинок,
   приглушённые ссылки, акцент на текущей странице.
   ========================================================================== */
/* Убираем баннер-картинки и «баннерную» пустоту (тема давала ~50px padding). */
.breadcrumb-wrap .banner .bg-img,
.breadcrumb-wrap .banner img.bg-top,
.breadcrumb-wrap .banner > img {
  display: none !important;
}
.breadcrumb-wrap .banner {
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* Аккуратная фоновая плашка-хедер: мягкий лавандовый градиент + тонкая
   нижняя линия — отделяет шапку страницы от контента, смотрится завершённо. */
.breadcrumb-wrap {
  background: #fff !important;
  border-bottom: 1px solid rgba(39, 34, 56, .06) !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* Современный компактный ЛЕВОСТОРОННИЙ вид: сверху тонкий приглушённый трейл
   навигации, под ним — заголовок H1. Без центрирования и лишней высоты. */
.breadcrumb-box {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  gap: .45rem;
  padding: 1.25rem 0 1.1rem !important;
}
/* трейл — НАД заголовком (в разметке он идёт после h1, меняем порядок flex) */
.breadcrumb-box .breadcrumb,
.breadcrumb-box ol.breadcrumb {
  order: 1;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 2px 7px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.breadcrumb-box .heading-box { order: 2; margin: 0; }
.breadcrumb-box h1 {
  font-size: clamp(1.45rem, 2.4vw, 1.8rem) !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
}
.breadcrumb-box .breadcrumb li { display: inline-flex !important; align-items: center; }
/* ссылки трейла: контрастнее (AA), увеличенная зона клика для тача */
.breadcrumb-box .breadcrumb li a {
  color: #6f6a80 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  transition: color .15s ease;
  padding: 4px 2px;
  border-radius: 6px;
}
.breadcrumb-box .breadcrumb li a:hover {
  color: #8b7fd6 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
/* видимый фокус для клавиатурной навигации */
.breadcrumb-box .breadcrumb li a:focus-visible {
  outline: 2px solid #8b7fd6;
  outline-offset: 2px;
}
/* домик перед «Главная» — быстрый визуальный якорь начала пути */
.breadcrumb-box .breadcrumb li:first-child a::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb-box .breadcrumb li a i,
.breadcrumb-box .breadcrumb li a svg { color: #c7c2d4 !important; width: 14px; height: 14px; }
/* разделитель-«ссылка» из темы (href=javascript:void) — декорация:
   не кликается, не ловит таб и ховер */
.breadcrumb-box .breadcrumb li a[href^="javascript"] {
  pointer-events: none;
  cursor: default;
  padding: 0;
}
/* текущая страница — компактный «чип»; длинные названия аккуратно обрезаются */
.breadcrumb-box .breadcrumb li.current a {
  color: #4a4658 !important;
  font-weight: 600 !important;
  cursor: default;
  background: #f4f3f8;
  border-radius: 999px;
  padding: 3px 11px !important;
  max-width: min(440px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.breadcrumb-box .breadcrumb li.current a:hover { text-decoration: none !important; color: #4a4658 !important; }

/* ==========================================================================
   КОНТАКТЫ /contacts/ — форма и карточки соцсетей в едином стиле с корзиной
   ========================================================================== */
/* Тонированный фон секции + белые карточки — тот же рисунок, что в корзине */
.contact-section {
  background: #f4f3f8 !important;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}
.contact-section .round-wrap-content {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.25rem 1.4rem !important;
}
/* правая карточка тянется на высоту левой — колонки ровные, без «хвоста» */
.contact-section .address-content { height: 100%; }
/* Заголовки карточек — как в корзине: просто жирный тёмный текст,
   без декоративного подчёркивания темы */
.contact-section .title-box4 .heading {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin-bottom: 1rem !important;
}
.contact-section .title-box4 .heading span,
.contact-section .title-box4 .heading .bg-theme-blue {
  display: none !important;
}
/* Поля — как в корзине на тонированном фоне */
.contact-section .input-box label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #272238 !important;
}
.contact-section .form-control {
  background: #fbfbfd !important;
}
.contact-section .form-control:focus {
  border-color: #8b7fd6 !important;
  box-shadow: 0 0 0 3px rgba(139, 127, 214, .18) !important;
}
/* кнопка отправки — фирменная лаванда, один в один «Оформить заказ»:
   белый текст и иконки на лавандовом фоне */
.contact-section .post-button,
.contact-section .post-button * {
  color: #fff !important;
}
.contact-section .post-button {
  background-color: #8b7fd6 !important;
  border-color: #8b7fd6 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 16px rgba(139, 127, 214, .30) !important;
}
.contact-section .post-button:hover {
  background-color: #7d70d0 !important;
  border-color: #7d70d0 !important;
}
/* Карточки соцсетей — светло-лавандовые плашки, как блок согласия в корзине.
   Тема выносила иконку абсолютом за левый край плашки (left:-16px) — возвращаем
   её в поток: флекс-строка, иконка внутри карточки. */
.contact-section .steps-box {
  background: #f7f6fb !important;
  border: 1px solid rgba(39, 34, 56, .08) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  margin-top: 16px !important;
}
.contact-section .steps-box.mt-0 { margin-top: 0 !important; }
.contact-section .steps-box > span {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
}
/* сами иконки (svg через <img>) — белые на лавандовом квадрате */
.contact-section .steps-box > span img {
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
}
.contact-section .steps-box .content {
  padding: 0 !important;
  margin: 0 !important;
}
.contact-section .steps-box .content h4 {
  color: #272238 !important;
  font-size: 15px !important;
  margin: 0 0 2px !important;
}
.contact-section .steps-box .content p {
  margin: 0 !important;
  font-size: 13px !important;
}
.contact-section .steps-box .content a {
  color: #8b7fd6 !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .15s ease;
}
.contact-section .steps-box .content a:hover {
  color: #6f62c8 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   ТИПОГРАФИКА — тема ставит text-transform:capitalize на h1/h2, из-за чего
   русские заголовки превращаются в «Title Case» («Выбор Издания У Продавца»).
   Отключаем для заголовков страниц и секционных заголовков.
   ========================================================================== */
h1,
h2.unique-heading {
  text-transform: none !important;
}


/* ==========================================================================
   КАРТОЧКА ТОВАРА /product/ — фон и карточки как в корзине: тонированная
   секция #f4f3f8, блоки — белые карты с рамкой, радиусом 14px и мягкой тенью.
   ========================================================================== */
.product-page { background: #f4f3f8 !important; }
/* секция «Интересное у этого продавца» / «Возможно, вам…» — тот же фон */
.product-page + section.pb-0 {
  background: #f4f3f8 !important;
  padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}
/* средняя колонка (название, цена, кнопки, характеристики, треклист) */
.product-page .product-detail-box {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.25rem 1.4rem !important;
}
/* правая колонка: карточка продавца и «Также в продаже» */
.product-page .sidebar-box {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.1rem 1.25rem !important;
}
/* обложка + виджет Deezer — единая карточка с той же рамкой и тенью.
   Верх — КВАДРАТНЫЙ (там фото конверта, прямые углы как у карточек каталога),
   скругление только снизу. */
.product-page .product-media-stack {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  overflow: hidden;
}
/* чипы лейблов на белой карте — светлая плашка для контраста */
.product-page .spec-label { background: #f7f6fb; }

/* --- /product/: секция «Интересное у этого продавца» ---------------------
   Заголовок — слева, в стиле секций корзины (тема центрировала .title-box
   через max-width:540px + margin:auto и рисовала декоративные квадратики).
   Стрелки слайдера — аккуратные круглые кнопки справа от заголовка.
   Карточки — лёгкий подъём на ховере. */
.product-page + section.pb-0 .title-box {
  max-width: none !important;
  margin: 0 0 1.1rem !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 12px;
}
.product-page + section.pb-0 .unique-heading {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin: 0 !important;
}
.product-page + section.pb-0 .title-divider1 { display: none !important; }
.product-page + section.pb-0 .swiper-box { position: relative; }
.product-page + section.pb-0 .swiper-button {
  position: absolute !important;
  top: -56px;
  right: 0;
  left: auto !important;
  display: flex;
  gap: 8px;
}
.product-page + section.pb-0 .swiper-button button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .12) !important;
  box-shadow: 0 3px 10px rgba(39, 34, 56, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #272238 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}
.product-page + section.pb-0 .swiper-button button:hover {
  background: #efedf9 !important;
  border-color: #8b7fd6 !important;
  color: #453d66 !important;
}
.product-page + section.pb-0 .swiper-button button svg { width: 17px; height: 17px; }
/* на узких экранах листается свайпом — стрелки не нужны и могут налезть на заголовок */
@media (max-width: 575px) {
  .product-page + section.pb-0 .swiper-button { display: none !important; }
}
.product-page + section.pb-0 .product-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-page + section.pb-0 .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(39, 34, 56, .10);
}


/* ==========================================================================
   КАТАЛОГ /marketplace/ и /product_group/ — фон и карточки как в корзине.
   ========================================================================== */
.shop-page {
  background: #f4f3f8 !important;
  padding-top: clamp(24px, 2.8vw, 36px) !important;
  padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}
/* сайдбар: поиск, фильтры, кнопки — белые карточки */
.shop-page .sidebar-box {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.1rem 1.2rem !important;
}
/* верхняя панель (счётчик, сортировки, переключатели сетки) — белый тулбар */
.shop-page .top-header-wrap {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: .7rem 1rem !important;
  margin-bottom: 1.1rem;
}
/* счётчик предложений в тулбаре /product_group/ */
.shop-page .offers-count {
  font-size: 14px;
  color: #5a556a;
  align-self: center;
}
.shop-page .offers-count b { color: #272238; font-weight: 700; }
/* пагинация — белые «пилюли», лавандовый ховер (актив уже тёмный) */
.shop-page .pagination li a {
  background: #fff;
  border: 1px solid rgba(39, 34, 56, .12);
  border-radius: 10px;
  color: #272238;
  transition: border-color .15s ease, background .15s ease;
}
.shop-page .pagination li a:hover {
  border-color: #8b7fd6;
  background: #efedf9;
}


/* --- /product/, /release/, /master/: ряд кнопок в карточке не выпирает ---
   Тема кладёт кнопки в bootstrap .btn-group (inline-flex без переноса) —
   два широких «таблетки» вылезали за правый край белой карточки.
   Превращаем в переносимый флекс-ряд с зазором и возвращаем кнопкам
   скругление (btn-group его срезает у соседних кнопок). */
.product-page .product-detail-box .btn-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}
.product-page .product-detail-box .btn-group > .btn-solid,
.product-page .product-detail-box .btn-group > .btn-sm {
  flex: 0 1 auto;
  border-radius: 12px !important;
  margin: 0 !important;
  white-space: nowrap;
}


/* ==========================================================================
   МЕРОПРИЯТИЯ, МАГАЗИН, ПОИСК, ПРОФИЛЬ ПРОДАВЦА — тот же визуальный язык
   ========================================================================== */
/* /event/ и /shop/ — детальные страницы: тонированный фон + белая карточка */
.detail-page {
  background: #f4f3f8 !important;
  padding-top: clamp(24px, 2.8vw, 36px) !important;
  padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}
.detail-page .blog-box.blog-detail {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.25rem 1.4rem !important;
}
.detail-page #map {
  border-radius: 14px;
  border: 1px solid rgba(39, 34, 56, .10);
  overflow: hidden;
}
/* заголовки секций на страницах каталога/мероприятий — слева, без квадратиков,
   как «Интересное у этого продавца» */
.shop-page .title-box,
.detail-page .title-box {
  max-width: none !important;
  margin: 0 0 1.1rem !important;
  text-align: left !important;
}
.shop-page .title-box .unique-heading,
.detail-page .title-box .unique-heading {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin: 0 !important;
}
.shop-page .title-box .title-divider1,
.detail-page .title-box .title-divider1 { display: none !important; }
/* /search/ — секция формы поиска на том же тонированном фоне, без «шва»
   с секцией результатов (.shop-page) ниже */
.search-page { background: #f4f3f8 !important; }


/* --- /search/: иконка-лупа не наезжает на текст в поле --- */
.search-page .search-box-side > div:first-child { position: relative; }
.search-page .search-box-side i.search,
.search-page .search-box-side svg.search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #8a8598;
  pointer-events: none;
  margin: 0;
}
.search-page .search-box-side .form-control {
  padding-left: 42px !important;
}
/* --- результаты поиска и сетки каталога: кнопка карточки прижата к низу
       и на всю ширину — ряды выглядят ровно при разной длине текста --- */
.shop-page .product-card .content-box > a.addtocart-btn,
.shop-page .product-card .content-box > .addtocart-btn {
  margin-top: auto !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================================================
   ЯНДЕКС-КАРТА — вписана в стиль: белая карточка с рамкой, скруглением
   и мягкой тенью (на /shops/, /shop/, /event/ и на главной).
   ========================================================================== */
#map {
  border-radius: 14px;
  border: 1px solid rgba(39, 34, 56, .10);
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  overflow: hidden;
  background: #fff;
}
/* внутренности карты не должны вылезать за скругление */
#map .ymaps-2-1-79-map, #map [class*="ymaps"] { border-radius: inherit; }

/* --- /about/ — тот же язык: тонированный фон, текст в белой карте --- */
.about-section { background: #f4f3f8 !important; }
.about-section .align-ment .contenten-wrap {
  background: #fff;
  border: 1px solid rgba(39, 34, 56, .10);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.5rem 1.75rem;
}
.about-section .img-box img {
  border-radius: 14px;
  border: 1px solid rgba(39, 34, 56, .10);
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  width: 100%;
  object-fit: cover;
}

/* --- /support/ — тонированный фон, аккордеоны белыми карточками --- */
.faq-section {
  background: #f4f3f8 !important;
  padding-top: clamp(24px, 2.8vw, 36px) !important;
  padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}
.faq-section .accordion-item {
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(39, 34, 56, .04);
}
.faq-section .accordion-button {
  background: #fff !important;
  font-weight: 600 !important;
  color: #272238 !important;
  box-shadow: none !important;
}
.faq-section .accordion-button:not(.collapsed) {
  background: #f7f6fb !important;
  color: #272238 !important;
}
.faq-section .accordion-body {
  color: #4a4658;
  line-height: 1.6;
}

/* --- /event/ — афиша мероприятия той же карточкой, что и карта рядом --- */
.detail-page .ratio_36 > img {
  border-radius: 14px;
  border: 1px solid rgba(39, 34, 56, .10);
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
}


/* ==========================================================================
   ГЛАВНАЯ /main/ — контентные секции в общем стиле: тонированный фон,
   карточки, заголовок секции слева.
   ========================================================================== */
.main-products,
.brand-section2 {
  background: #f4f3f8 !important;
}
.main-products {
  padding-top: clamp(24px, 2.8vw, 36px) !important;
  padding-bottom: clamp(24px, 2.8vw, 36px) !important;
}
.brand-section2 {
  padding-top: clamp(24px, 2.8vw, 36px) !important;
  padding-bottom: clamp(34px, 3.6vw, 48px) !important;
}
/* заголовок «Выставки и ярмарки» — слева, без декоративной иконки-разделителя */
.brand-section2 .title-box {
  max-width: none !important;
  margin: 0 0 1.1rem !important;
  text-align: left !important;
}
.brand-section2 .title-box .unique-heading {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin: 0 0 .3rem !important;
}
.brand-section2 .title-box .title-divider2 { display: none !important; }
.brand-section2 .title-box p {
  margin: 0 !important;
  color: #6b6b7a;
  font-size: 14px;
  text-align: left;
  max-width: 640px;
}

/* --- /about/: текстовая карта тянется на высоту фото, колонки вровень --- */
.about-section .row { align-items: stretch; }
.about-section .align-ment { height: 100%; }
.about-section .align-ment .contenten-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-section .img-box { height: 100%; }
.about-section .img-box img { height: 100%; object-fit: cover; }

/* ==========================================================================
   /support/ — юзабилити FAQ: категории крупными карточками, подразделы
   с чёткими заголовками, аккордеоны с явной стрелкой и крупной зоной клика.
   Все вопросы свёрнуты по умолчанию — страница сканируется глазами.
   ========================================================================== */
.faq-section .nav-tabs4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border: 0 !important;
  margin-bottom: 1.5rem !important;
}
@media (max-width: 991px) { .faq-section .nav-tabs4 { grid-template-columns: repeat(2, 1fr); } }
.faq-section .nav-tabs4 .nav-item { margin: 0 !important; }
.faq-section .nav-tabs4 .nav-link {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #272238 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-align: left;
  box-shadow: 0 4px 14px rgba(39, 34, 56, .04);
  transition: border-color .15s ease, background .15s ease;
}
.faq-section .nav-tabs4 .nav-link i,
.faq-section .nav-tabs4 .nav-link svg { width: 18px; height: 18px; color: #8b7fd6; flex: 0 0 auto; }
.faq-section .nav-tabs4 .nav-link:hover { border-color: #8b7fd6 !important; }
.faq-section .nav-tabs4 .nav-link.active {
  background: #272238 !important;
  color: #fff !important;
  border-color: #272238 !important;
}
.faq-section .nav-tabs4 .nav-link.active i,
.faq-section .nav-tabs4 .nav-link.active svg { color: #b7aee0; }
/* заголовки подразделов */
.faq-section .title-box4 { margin: 1.7rem 0 .8rem !important; }
.faq-section .title-box4 .heading {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #272238 !important;
  margin: 0 !important;
}
.faq-section .title-box4 .heading span { display: none !important; }
.faq-section .title-box4 p { color: #6b6b7a; font-size: 13.5px; margin: .25rem 0 0 !important; }
/* аккордеон: крупная зона клика + явная стрелка-индикатор */
.faq-section .accordion-button {
  padding: 16px 52px 16px 18px !important;
  font-size: 15px !important;
  line-height: 1.45;
  position: relative;
}
.faq-section .accordion-button::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: #8b7fd6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
  transition: transform .2s ease;
}
.faq-section .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.faq-section .accordion-body { padding: 2px 18px 16px !important; }

/* --- /events/: прошедшие мероприятия приглушены, оживают под курсором --- */
.events-past .product-card { opacity: .72; }
.events-past .product-card img { filter: grayscale(65%); transition: filter .2s ease; }
.events-past .product-card:hover { opacity: 1; }
.events-past .product-card:hover img { filter: none; }

/* --- ФУТЕР: возврат светлых ссылок -----------------------------------------
   Правило «контентные ссылки — тёмные» (.content-box a) цепляло и колонки
   подвала: их div тоже имеет класс .content-box, и ссылки становились
   тёмными на тёмном фоне (видны только на ховере). Перебиваем той же
   специфичностью (те же :not), но со скоупом footer. */
footer .content-box a:not(.btn-solid):not(.btn-special):not(.btn-style2):not(.filter-btn),
.footer-document .content-box a:not(.btn-solid):not(.btn-special):not(.btn-style2):not(.filter-btn) {
  color: rgba(255, 255, 255, .78) !important;
}
footer .content-box a:not(.btn-solid):not(.btn-special):not(.btn-style2):not(.filter-btn):hover,
.footer-document .content-box a:not(.btn-solid):not(.btn-special):not(.btn-style2):not(.filter-btn):hover {
  color: #b7aee0 !important;
}


/* ==========================================================================
   /support/ v2 — ПЕРЕВЁРСТКА РАЗДЕЛА.
   Категории — липкий сайдбар слева, контент — широкая колонка справа,
   форма вопроса — белая карта на всю ширину. Правила ниже перекрывают
   раннюю версию (сетка 4-в-ряд) тем же селектором.
   ========================================================================== */
.faq-section .container-lg {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.faq-section .nav-tabs4 {
  grid-column: 1;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  position: sticky;
  top: 96px;
}
.faq-section .tab-content {
  grid-column: 2;
  min-width: 0;
}
@media (max-width: 991px) {
  .faq-section .container-lg { grid-template-columns: 1fr; }
  .faq-section .nav-tabs4 {
    grid-column: 1;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .faq-section .nav-tabs4 .nav-item { flex: 1 1 46%; }
  .faq-section .tab-content { grid-column: 1; }
}
/* текст активной категории должен быть виден (тема красила span в тёмный) */
.faq-section .nav-tabs4 .nav-link span { color: inherit !important; }
.faq-section .nav-tabs4 .nav-link.active,
.faq-section .nav-tabs4 .nav-link.active span { color: #fff !important; }

/* контент вкладок — влево, на всю ширину колонки (тема центрировала узко) */
.faq-section .tab-pane,
.faq-section .tab-pane > div {
  text-align: left !important;
}
.faq-section .tab-content .title-box4 {
  max-width: none !important;
  margin: 1.6rem 0 .8rem !important;
  text-align: left !important;
}
.faq-section .tab-content .title-box4:first-child { margin-top: 0 !important; }
.faq-section .tab-content .title-box4 p { max-width: none !important; margin-left: 0 !important; }
.faq-section .accordion {
  max-width: none !important;
  width: 100%;
  margin: 0 0 1.4rem !important;
}
.faq-section .accordion-button { text-align: left !important; }
/* видео в ответах не разрывает колонку */
.faq-section .accordion-body iframe {
  max-width: 100%;
  border-radius: 10px;
}

/* форма «Задайте нам вопрос» — белая карта на всю ширину, поля как в корзине */
.faq-section .replay-form {
  grid-column: 1 / -1;
  background: #fff !important;
  border: 1px solid rgba(39, 34, 56, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(39, 34, 56, .05);
  padding: 1.5rem 1.75rem !important;
  margin-top: .4rem;
  text-align: left !important;
}
.faq-section .replay-form .title-box4 {
  max-width: none !important;
  margin: 0 0 1rem !important;
  text-align: left !important;
}
.faq-section .replay-form .input-box label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #272238 !important;
}
.faq-section .replay-form .form-control { background: #fbfbfd !important; }
.faq-section .replay-form .form-control:focus {
  border-color: #8b7fd6 !important;
  box-shadow: 0 0 0 3px rgba(139, 127, 214, .18) !important;
}
.faq-section .replay-form .post-button,
.faq-section .replay-form .post-button * { color: #fff !important; }
.faq-section .replay-form .post-button {
  background-color: #8b7fd6 !important;
  border-color: #8b7fd6 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 16px rgba(139, 127, 214, .30) !important;
}
.faq-section .replay-form .post-button:hover {
  background-color: #7d70d0 !important;
  border-color: #7d70d0 !important;
}
/* заголовки и подводки секций FAQ — строго влево (тема центрирует сам текст) */
.faq-section .title-box4,
.faq-section .title-box4 .heading,
.faq-section .title-box4 p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- /product/: блоки «Подробнее о данном релизе» / «Подробнее об исполнителе»
       — тот же сворачиваемый паттерн, что «Правила продавца» --- */
.about-release-terms {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.about-release-terms .seller-terms-more { color: #8b7fd6; }
.about-release-terms .seller-terms-more:hover { color: #6f62c8; }
.about-release-terms .seller-terms-more::before { content: "Читать полностью"; }
.about-release-terms .seller-terms-toggle:checked ~ .seller-terms-more::before { content: "Свернуть"; }


/* --- примечание под Deezer-виджетом: тихий пояснительный текст --- */
.deezer-note {
  font-size: 12.5px;
  color: #8a8598;
  line-height: 1.5;
  padding: 10px 14px;
  background: #f7f6fb;
  border-top: 1px solid rgba(39, 34, 56, .06);
}


/* --- фото исполнителя в блоке «Подробнее об исполнителе» --- */
.about-terms-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .45rem;
}
.about-terms-head .seller-terms-title { margin-bottom: 0; }
.about-terms-photo { flex: 0 0 auto; display: inline-flex; }
.about-terms-photo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(39, 34, 56, .10);
}