/* =========================
   ГРУППА 3: SAFE Glass (десктопная шапка) — только контейнер + подложки ::before/::after
   ========================= */

/* SAFE Glass для десктопной шапки — только контейнер */
.header__inner.header__inner--no-pt.header__inner--bordered {
  position: relative;
  z-index: 0;                 /* создаём контекст для подложки */
  border-radius: 20px;        /* скругление краёв */
  /* ВАЖНО: overflow оставляем видимым, чтобы dropdown не обрезались */
  overflow: visible;
  /* если у темы есть собственная рамка, её можно оставить — или переопределить ниже */
}

/* Группа 3.1 — Стеклянная подложка (не перекрывает клики, не ломает детей) */
.header__inner.header__inner--no-pt.header__inner--bordered::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;  /* клики проходят внутрь */
  z-index: -1;           /* подложка под контентом */
}

/* Группа 3.2 — Блики по краям (overlay) */
.header__inner.header__inner--no-pt.header__inner--bordered::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 10% -10%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,0.20), transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* Группа 3 фикс 1 — Тёмная тема САЙТА (не зависит от Windows/ОС) */
html[data-theme="dark"] .header__inner.header__inner--no-pt.header__inner--bordered::before,
body[data-theme="dark"] .header__inner.header__inner--no-pt.header__inner--bordered::before,
body.theme-dark .header__inner.header__inner--no-pt.header__inner--bordered::before,
body.dark-theme .header__inner.header__inner--no-pt.header__inner--bordered::before,
html.dark .header__inner.header__inner--no-pt.header__inner--bordered::before {
  background: linear-gradient(135deg, rgba(20,20,20,0.45), rgba(20,20,20,0.25));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 36px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
}

html[data-theme="dark"] .header__inner.header__inner--no-pt.header__inner--bordered::after,
body[data-theme="dark"] .header__inner.header__inner--no-pt.header__inner--bordered::after,
body.theme-dark .header__inner.header__inner--no-pt.header__inner--bordered::after,
body.dark-theme .header__inner.header__inner--no-pt.header__inner--bordered::after,
html.dark .header__inner.header__inner--no-pt.header__inner--bordered::after {
  background:
    radial-gradient(120% 60% at 10% -10%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,0.12), transparent 65%);
}

/* Группа 3 фикс 2 — Safari: минимальный фон для срабатывания blur (только ::before) */
@supports (-webkit-backdrop-filter: blur(0)) {
  .header__inner.header__inner--no-pt.header__inner--bordered::before {
    background: rgba(255,255,255,0.06);
  }
}



/* =========================
   ГРУППА 4: Фиксированная шапка (#headerfixed) — glass + темная тема + Safari fix
   ========================= */

/* =========================
   Фиксированная шапка (#headerfixed)
   ========================= */
#headerfixed {
  position: fixed;      /* уже есть в разметке */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;        /* чтобы оставалась поверх контента */
}

/* Группа 4.1 — Внутренний контейнер со стеклянным фоном */
#headerfixed .header__inner.header__inner--shadow-fixed {
  position: relative;
  z-index: 0;
  border-radius: 20px;
  overflow: visible; /* не режем dropdown */
}

/* Группа 4.2 — Подложка стекла */
#headerfixed .header__inner.header__inner--shadow-fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: -1;
}

/* Группа 4.3 — Блики */
#headerfixed .header__inner.header__inner--shadow-fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 10% -10%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,0.2), transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* Группа 4 фикс 1 — Тёмная тема САЙТА (не зависит от Windows/ОС) */
html[data-theme="dark"] #headerfixed .header__inner.header__inner--shadow-fixed::before,
body[data-theme="dark"] #headerfixed .header__inner.header__inner--shadow-fixed::before,
body.theme-dark #headerfixed .header__inner.header__inner--shadow-fixed::before,
body.dark-theme #headerfixed .header__inner.header__inner--shadow-fixed::before,
html.dark #headerfixed .header__inner.header__inner--shadow-fixed::before {
  background: linear-gradient(135deg, rgba(20,20,20,0.45), rgba(20,20,20,0.25));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 36px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}

html[data-theme="dark"] #headerfixed .header__inner.header__inner--shadow-fixed::after,
body[data-theme="dark"] #headerfixed .header__inner.header__inner--shadow-fixed::after,
body.theme-dark #headerfixed .header__inner.header__inner--shadow-fixed::after,
body.dark-theme #headerfixed .header__inner.header__inner--shadow-fixed::after,
html.dark #headerfixed .header__inner.header__inner--shadow-fixed::after {
  background:
    radial-gradient(120% 60% at 10% -10%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,0.12), transparent 65%);
}

/* Группа 4 фикс 2 — Safari fix */
@supports (-webkit-backdrop-filter: blur(0)) {
  #headerfixed .header__inner.header__inner--shadow-fixed::before {
    background: rgba(255,255,255,0.06);
  }
}


/* =========================
   ГРУППА 5: Ссылка "Все модификации" — глобально + пилюля счётчика + темная тема
   ========================= */

/* ==========================================================================
   Глобальные стили для ссылки "Все модификации"
   ========================================================================== */
a.mods-link {
  color: #00aea0 !important;
  text-decoration: none;   /* убираем подчёркивание */
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
}

/* Группа 5.1 — «пилюля» из data-count (без JS) */
a.mods-link.mods-link--has-count::after {
  content: attr(data-count);
  display: inline-block;   /* совместимость */
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 174, 160, 0.15);
  color: #00aea0;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
}

/* Группа 5 фикс 1 — Тёмная тема */
@media (prefers-color-scheme: dark) {
  a.mods-link { color: #00aea0; }
  a.mods-link.mods-link--has-count::after {
    background: rgba(0, 174, 160, 0.22);
    color: #00aea0;
  }
}

/* =========================
   ГРУППА 5 фикс 2: Переопределение внешнего вида mods-link (цвет/пилюля) — более “нейтральный” стиль
   ========================= */

/* Ссылка-кнопка 
#cfg-mods-link > a,
.mods-link.mods-trigger.mods-link--has-count {
  color: #444 !important;
  opacity: 1 !important;
  text-decoration: none;
}

/* Пилюля-число (через data-count) 
.mods-link.mods-trigger.mods-link--has-count::after {
  content: attr(data-count);
  margin-left: .4em;
  padding: .1em .55em;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #444;
  font-weight: 600;
  line-height: 1;
}


/* =========================
   ГРУППА 6: "Все модификации" — оформление внутри карточек каталога (.catalog-block__inner)
   ========================= */

/* ==========================================================================
   Специально для карточек каталога (.catalog-block__inner)
   ========================================================================== */
.catalog-block__inner.flexbox.height-100.item-action-static-fill-svg a.mods-link {
  display: block;           /* растянуть на всю ширину */
  text-align: center;       /* текст по центру */
  margin: 15px auto 0;      /* отступ сверху, автоцентр */
            /* уменьшенный шрифт */
  line-height: 1.4;
}

/* Группа 6.1 — Пилюля в карточках */
.catalog-block__inner.flexbox.height-100.item-action-static-fill-svg 
a.mods-link.mods-link--has-count::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 174, 160, 0.15);
  color: #00aea0;
  font-size: 11px;   /* чуть меньше текста */
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}



/* =========================
   ГРУППА 8: Баннер/лейаут — фикс overflow-x (чтобы не ломало верстку)
   ========================= */

/* Чиним баннер на мобилке на десктопе */
#main > div.layout.layout--left-column-.flex-1 > div > div.body.relative.index.hover_ > div.main.banner-auto > div > div.drag-block.container.CUSTOM_NEW_BLOCK > div {
    overflow-x: clip;
}


/* =========================
   ГРУППА 9: Правый sticky buy-block — адаптивное скрытие/показ
   ========================= */

@media (max-width: 1191px) {
  div.catalog-detail__main-part.catalog-detail__main-part--right.sticky-block 
  > div.grid-list.grid-list--items.gap 
  > div.grid-list__item.hidden-by-container-rule 
  > div.catalog-detail__buy-block.catalog-detail__cell-block.outer-rounded-x {
    display: none !important;
  }
}

@media (max-width: 767px) {
  div.catalog-detail__main-part.catalog-detail__main-part--right.sticky-block 
  > div.grid-list.grid-list--items.gap 
  > div.grid-list__item.hidden-by-container-rule 
  > div.catalog-detail__buy-block.catalog-detail__cell-block.outer-rounded-x {
    display: block !important;
  }
}


/* =========================
   ГРУППА 10: Обрамление “инфо-блоков” (brand/properties/previewtext) — фон/паддинг/скругления
   ========================= */

/* =========================
   LIGHT THEME (фон есть)
   ========================= */
body:not(.theme-dark)
.brand-detail.flexbox.line-block--gap.line-block--gap-12,
body:not(.theme-dark)
.properties-wrapper.grid-list__item,
body:not(.theme-dark)
.grid-list__item.catalog-detail__previewtext{
  border: 0px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  background-color: #f9f9f9; /* фон только в светлой */
}

/* =========================
   DARK THEME (фон убираем)
   ========================= */
body.theme-dark
.brand-detail.flexbox.line-block--gap.line-block--gap-12,
body.theme-dark
.properties-wrapper.grid-list__item,
body.theme-dark
.grid-list__item.catalog-detail__previewtext{
  background: transparent !important; /* убрали фон */
  border: 0 !important;               /* убрали рамку (если не нужна) */
  /* padding/margin оставляем как в светлой, если нужно одинаково */
  padding: 12px;
  margin-bottom: 16px;
}



/* =========================
   ГРУППА 11: Слайдер-лента карточек (scroller) — горизонтальный скролл + drag UX + стабилизация
   ========================= */

/* Слайдер */
.tab-content-block .js_append[data-cards-scroller]{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;     /* вертикаль — странице */
  gap:16px;
  -webkit-overflow-scrolling:touch; /* инерция на iOS */
  scroll-snap-type:none;
  /* ВАЖНО: на тачах не мешаем жестам — и X, и Y разрешаем,
     вертикаль в самом слайдере всё равно запрещена (overflow-y:hidden) */
  touch-action:auto;
  overscroll-behavior-x: contain;   /* не тянем всю страницу по X */
  align-items:stretch;
  cursor:grab;
}
.tab-content-block .js_append[data-cards-scroller].is-dragging{
  cursor:grabbing; user-select:none;
}
.tab-content-block .js_append[data-cards-scroller] > .catalog-block__wrapper{
  flex:0 0 auto; display:flex; align-self:stretch;
  inline-size:clamp(240px,25vw,320px);
}
.tab-content-block .js_append[data-cards-scroller] > .catalog-block__wrapper > .catalog-block__item{
  display:flex; flex-direction:column; width:100%; height:100%;
}
.tab-content-block .js_append[data-cards-scroller] .catalog-block__inner{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:100%;
}

/* Группа 11 фикс 1 — Гасим входные анимации внутри ленты (чтобы не «подпрыгивало») */
.tab-content-block .js_append[data-cards-scroller] .appear-block,
.tab-content-block .js_append[data-cards-scroller] .animate,
.tab-content-block .js_append[data-cards-scroller] .wow,
.tab-content-block .js_append[data-cards-scroller] [data-animate],
.tab-content-block .js_append[data-cards-scroller] [data-aos],
.tab-content-block .js_append[data-cards-scroller] [style*="transform"],
.tab-content-block .js_append[data-cards-scroller] [class*="animate__"]{
  animation:none !important; transition:none !important; transform:none !important; opacity:1 !important;
}


/* =========================
   ГРУППА 15: Баннер (banners-big) — позиционирование стрелок/пагинации
   ========================= */

/* блок со стрелками – снизу справа, но чуть выше */
.banners-big__nav-wrap .slider-nav-wrap {
  position: absolute;
  right: 40px;      /* расстояние от правого края */
  bottom: 80px;     /* подними/опусти, меняя это значение */
  display: flex;
  gap: 8px;
  z-index: 5;
}

/* Группа 15 фикс 1 — Сброс “старого” позиционирования стрелок */
.banners-big__nav-wrap .slider-button-prev,
.banners-big__nav-wrap .slider-button-next {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Группа 15.2 — Пагинация баннера: поднять выше */
.banners-big__nav-wrap.theme-light .swiper-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 70px !important; /* подбери значение под макет: 60–100px */
  z-index: 4;
}



/* =========================
   ГРУППА 15: специальное
   ========================= */

/* пока юзер тянет окно — глушим анимации/транзишены, иначе часто ловятся глюки */
html.is-resizing *{
  transition: none !important;
  animation: none !important;
}


/* =========================
   ГРУППА 16: темная тема
   ========================= */

/* ===== STATUS TEXT COLOR (light / dark) ===== */

/* обычная (светлая) тема */
body:not(.theme-dark) .js-replace-status,
body:not(.theme-dark) .js-replace-status *,
body:not(.theme-dark) .js-replace-status .color_dark{
  color: #111 !important;
}

/* тёмная тема */
body.theme-dark .js-replace-status,
body.theme-dark .js-replace-status *,
body.theme-dark .js-replace-status .color_dark{
  color: #fff !important;
}

/* ============================
   DARK: Premier offers cards (colors only)
   scope: body.theme-dark
   ============================ */

body.theme-dark .premier-offers-cards{
  /* переопределяем “светлые” переменные блока */
  --scanlite-ink: rgba(255,255,255,.92);
  --scanlite-muted: rgba(255,255,255,.62);
  --scanlite-line: rgba(255,255,255,.14);
  --scanlite-shadow: 0 10px 30px rgba(0,0,0,.55);

  /* доп. переменные (чисто для удобства) */
  --scanlite-card-bg: rgba(17,24,39,.92);      /* фон карточек */
  --scanlite-card-bg-2: rgba(255,255,255,.06); /* “плашки”/контейнеры */
}

/* Карточка */
body.theme-dark .premier-offers-cards .mod-card{
  background: var(--scanlite-card-bg) !important;
  border-color: var(--scanlite-line) !important;
  box-shadow: var(--scanlite-shadow) !important;
}

/* Картинка-рамка */
body.theme-dark .premier-offers-cards .mod-card__img{
  background: rgba(255,255,255,.05) !important;
}

/* Заголовок/текст */
body.theme-dark .premier-offers-cards .mod-card__name-link{
  color: var(--scanlite-ink) !important;
}
body.theme-dark .premier-offers-cards .mod-card__article{
  color: var(--scanlite-muted) !important;
}
body.theme-dark .premier-offers-cards .mod-card__article .js-replace-article{
  color: rgba(255,255,255,.72) !important; /* вместо #8d8d8d */
}

/* Разделители (meta/bottom) */
body.theme-dark .premier-offers-cards .mod-card__meta,
body.theme-dark .premier-offers-cards .mod-card__bottom{
  border-top-color: var(--scanlite-line) !important;
}
body.theme-dark .premier-offers-cards .mod-card__k{
  color: var(--scanlite-muted) !important;
}
body.theme-dark .premier-offers-cards .mod-card__v{
  color: var(--scanlite-ink) !important;
}

/* Цена (внутри часто сидит color_dark) */
body.theme-dark .premier-offers-cards .mod-card__price,
body.theme-dark .premier-offers-cards .mod-card__price .price,
body.theme-dark .premier-offers-cards .mod-card__price .color_dark,
body.theme-dark .premier-offers-cards .mod-card__price .price__new-val{
  color: var(--scanlite-ink) !important;
}

/* Статус (у тебя он принудительно серый светлый — в dark делаем тёмную плашку) */
body.theme-dark .premier-offers-cards .mod-card__stock{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.86) !important;
}
body.theme-dark .premier-offers-cards .mod-card__stock .color_dark{
  color: rgba(255,255,255,.90) !important;
}

/* “Сравнить” (у тебя оно было forced white) */
body.theme-dark .premier-offers-cards .mod-card__action--compare
.item-action--compare a,
body.theme-dark .premier-offers-cards .mod-card__action--compare
.item-action--compare .item-action__inner{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
}
body.theme-dark .premier-offers-cards .mod-card__action--compare
.item-action--compare a::after,
body.theme-dark .premier-offers-cards .mod-card__action--compare
.item-action--compare .item-action__inner::after{
  color: rgba(255,255,255,.92) !important;
}
body.theme-dark .premier-offers-cards .mod-card__action--compare
.item-action--compare a:hover,
body.theme-dark .premier-offers-cards .mod-card__action--compare
.item-action--compare .item-action__inner:hover{
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* Стрелки слайдера */
body.theme-dark .premier-offers-cards .premier-slider__arrow{
  background: rgba(17,24,39,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.85) !important; /* currentColor для svg stroke */
  box-shadow: 0 10px 22px rgba(0,0,0,.55) !important;
}
body.theme-dark .premier-offers-cards .premier-slider__arrow:hover{
  box-shadow: 0 14px 30px rgba(0,0,0,.65) !important;
}

/* Кнопка-слайд "Все модификации" (mods-link внутри трека) */
body.theme-dark .premier-offers-cards.premier-offers-cards--slider
#table-scroller-wrapper .mods-link{
  background: rgba(17,24,39,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.90) !important;
}


/* ============================================================
   DARK THEME — ВСТАВЛЕННЫЙ ТИЗЕР .sl-benefits (если он на этой стороне)
   ============================================================ */
body.theme-dark .sl-benefits{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;

  /* переопределяем “светлые” переменные на темные */
  --text:  rgba(255,255,255,.92) !important;
  --muted: rgba(255,255,255,.68) !important;
  --card-br: rgba(255,255,255,.12) !important;
}

/* Карточки тизера */
body.theme-dark .sl-benefits__item{
  background:
    radial-gradient(120px 60px at 32px 24px, rgba(0,178,169,.10), rgba(0,178,169,0) 60%),
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
}

/* Тексты тизера */
body.theme-dark .sl-benefits__title{ color: rgba(255,255,255,.92) !important; }
body.theme-dark .sl-benefits__desc{  color: rgba(255,255,255,.68) !important; }

/* Иконки тизера */
body.theme-dark .sl-benefits__icon{ color: var(--theme-more-color, #00aea0) !important; }

/* ============================
   DARK: Configurator sheet (colors only)
   scope: body.theme-dark
   ============================ */

body.theme-dark .cfg-sheet__panel{
  background: rgba(17,24,39,.96) !important;
  border-color: rgba(255,255,255,.14) !important;   /* если есть border */
  color: rgba(255,255,255,.90) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.70) !important;
}

/* “хваталка” */
body.theme-dark .cfg-sheet__grab{
  background: rgba(255,255,255,.22) !important;
}

/* header */
body.theme-dark .cfg-sheet__header{
  border-bottom-color: rgba(255,255,255,.12) !important;
}
body.theme-dark .cfg-sheet__title{
  color: rgba(255,255,255,.92) !important;
}

/* close */
body.theme-dark .cfg-sheet__close{
  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}
body.theme-dark .cfg-sheet__close:hover{
  background: rgba(255,255,255,.10) !important;
}

/* контент/разделители */
body.theme-dark .cfg-sheet__content{
  color: rgba(255,255,255,.88) !important;
}

/* ТЕГИ (sku-props--diff-tags внутри шторки) */
body.theme-dark .cfg-sheet__panel .sku-props__title{
  color: rgba(255,255,255,.70) !important;
}

/* кнопки-теги */
body.theme-dark .cfg-sheet__panel .sku-props-tags__value{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
}
body.theme-dark .cfg-sheet__panel .sku-props-tags__value:hover{
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.22) !important;
}
body.theme-dark .cfg-sheet__panel .sku-props-tags__value--active{
  background: rgba(0,178,169,.18) !important;       /* фирменный акцент */
  border-color: rgba(0,178,169,.55) !important;
  color: rgba(255,255,255,.92) !important;
}

/* “Все модификации” + бейдж */
body.theme-dark #cfg-mods-link a{
  color: rgba(255,255,255,.86) !important;
}
body.theme-dark #cfg-mods-link a:hover{
  color: rgba(255,255,255,.96) !important;
}
body.theme-dark #cfg-mods-link .cfg-mods-count{
  background: rgba(0,178,169,.18) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(0,178,169,.35) !important;     /* если у бейджа есть border */
}

/* footer */
body.theme-dark .cfg-sheet__footer{
  border-top-color: rgba(255,255,255,.12) !important;
  background: rgba(17,24,39,.96) !important; /* если футер отделён */
}

/* цена */
body.theme-dark .cfg-sheet__panel .cfg-price,
body.theme-dark .cfg-sheet__panel .cfg-price .price__new-val{
  color: rgba(255,255,255,.92) !important;
}

/* статус/ссылки в статусе */


/* блок корзины/карточка товара внизу */
body.theme-dark .cfg-cart-block,
body.theme-dark .cfg-cart-widget,
body.theme-dark .cdek-widget-cart{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.90) !important;
}
body.theme-dark .cdek-widget-cart__title{
  color: rgba(255,255,255,.92) !important;
}

/* кнопка “Готово” (если это кастомная кнопка, не тема) */
body.theme-dark .cfg-sheet__action{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
body.theme-dark .cfg-sheet__action:hover{
  background: rgba(255,255,255,.10) !important;
}
/* ==========================================
   DARK: premier offers cards — borders states
   ========================================== */

/* базовая рамка у карточки */
body.theme-dark .premier-offers-cards .mod-card{
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(17,24,39,.55) !important; /* если фон нужен темнее, иначе убери строку */
}

/* наведение */
body.theme-dark .premier-offers-cards .mod-card:hover{
  border-color: rgba(255,255,255,.22) !important;
}

/* выбранная модификация (у тебя selctedassku висит на wrapper) */
body.theme-dark .premier-offers-cards .catalog-table__wrapper.selctedassku .mod-card{
  border-color: rgba(0,178,169,.70) !important; /* активная рамка */
}

/* чтобы на hover выбранной было чуть “жирнее” по ощущению */
body.theme-dark .premier-offers-cards .catalog-table__wrapper.selctedassku .mod-card:hover{
  border-color: rgba(0,178,169,.90) !important;
}

/* если где-то рамка рисуется не на .mod-card, а на wrapper — подстрахуем */
body.theme-dark .premier-offers-cards .catalog-table__wrapper{
  border-color: transparent !important;
}
body.theme-dark .premier-offers-cards .catalog-table__wrapper:hover .mod-card{
  border-color: rgba(255,255,255,.22) !important;
}
/* ============================================================
   SKU PROPS (this exact block) — DARK THEME (colors + borders)
   ============================================================ */

body.theme-dark .sku-props.sku-props--detail{
  color:#fff !important;
}

/* Заголовки "Модификации", "Аккумулятор", "Тип соединения" */
body.theme-dark .sku-props.sku-props--detail .sku-props__title{
  color: rgba(255,255,255,.86) !important;
}

/* Текущая модификация внутри заголовка */
body.theme-dark .sku-props.sku-props--detail .sku-props__js-size{
  color:#fff !important;
}

/* ---------- Кнопки модификаций (sku-props__value) ---------- */
body.theme-dark .sku-props.sku-props--detail .sku-props__value{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* hover */
body.theme-dark .sku-props.sku-props--detail .sku-props__value:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(64,208,160,.55) !important;
}

/* active */
body.theme-dark .sku-props.sku-props--detail .sku-props__value--active{
  background: rgba(64,208,160,.14) !important;
  color:#fff !important;
  border-color: rgba(64,208,160,.85) !important;
  box-shadow: 0 0 0 3px rgba(64,208,160,.18) !important;
}

/* ---------- Кнопки тегов (sku-props-tags__value) ---------- */
body.theme-dark .sku-props.sku-props--detail .sku-props-tags__value{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* hover */
body.theme-dark .sku-props.sku-props--detail .sku-props-tags__value:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(64,208,160,.55) !important;
}

/* active */
body.theme-dark .sku-props.sku-props--detail .sku-props-tags__value--active{
  background: rgba(64,208,160,.14) !important;
  color:#fff !important;
  border-color: rgba(64,208,160,.85) !important;
  box-shadow: 0 0 0 3px rgba(64,208,160,.18) !important;
}

/* ---------- "Показать ещё" (configuratorBtn) ---------- */
body.theme-dark .sku-props.sku-props--detail #configuratorBtn.btn-as-link{
  color: rgba(255,255,255,.92) !important;
}

body.theme-dark .sku-props.sku-props--detail #configuratorBtn.btn-as-link:hover{
  color:#fff !important;
}

/* счётчик */
body.theme-dark .sku-props.sku-props--detail #configuratorBtn .cfg-mods-count{
  background: rgba(255,255,255,.10) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* ---------- Подстраховка от color_222/secondary-color ---------- */
body.theme-dark .sku-props.sku-props--detail .color_222,
body.theme-dark .sku-props.sku-props--detail .color_dark,
body.theme-dark .sku-props.sku-props--detail .secondary-color{
  color: rgba(255,255,255,.86) !important;
}
/* ===== DARK THEME: only colors ===== */
.theme-dark{
  --acc-bg: #0f1216;              /* общий фон секции/табов */
  --acc-card-bg: #141a20;         /* фон карточки */
  --acc-card-border: #232c36;     /* граница карточки */
  --acc-text: #e7edf3;            /* основной текст */
  --acc-muted: #a7b1bc;           /* вторичный текст (мета/арт/остаток) */
  --acc-link: #e7edf3;            /* ссылка-заголовок */
  --acc-link-hover: #ffffff;      /* hover для ссылки */
  --acc-price: #ffffff;           /* цена */
  --acc-icon: #a7b1bc;            /* иконки (серые) */
  --acc-icon-hover: #ffffff;      /* hover иконок */
  --acc-nav-bg: rgba(20,26,32,.9);/* фон стрелок/навигации */
  --acc-nav-border: #232c36;      /* бордер у навигации */
  --acc-shadow: rgba(0,0,0,.35);  /* тень */
}

/* секция/область табов */
.theme-dark .wrapper_tabs,
.theme-dark .tab-content-block,
.theme-dark .acc{
  background: var(--acc-bg);
  color: var(--acc-text);
}

/* карточка */
.theme-dark .acc-card{
  background: var(--acc-card-bg);
  border-color: var(--acc-card-border);
  color: var(--acc-text);
}

/* заголовок-ссылка */
.theme-dark .acc-card__title-link{
  color: var(--acc-link);
}
.theme-dark .acc-card__title-link:hover{
  color: var(--acc-link-hover);
}

/* цена */
.theme-dark .price__new,
.theme-dark .price__new-val,
.theme-dark .acc-card__price-current{
  color: var(--acc-price);
}

/* мета/вторичные подписи */
.theme-dark .acc-card__meta,
.theme-dark .acc-card__article,
.theme-dark .js-replace-status,
.theme-dark .rate__value{
  color: var(--acc-muted);
}

/* иконки (svg и "серые" stroke/fill)
   НЕ трогаем системные action-иконки избранного/сравнения */
.theme-dark .side-icons .svg:not(.item-action__wrapper):not(.item-action__normal):not(.item-action__active),
.theme-dark .stroke-use-svg-grey,
.theme-dark .stroke-dark-light,
.theme-dark .fill-dark-light{
  color: var(--acc-icon);
  fill: var(--acc-icon);
  stroke: var(--acc-icon);
}

.theme-dark .side-icons button:hover .svg:not(.item-action__wrapper):not(.item-action__normal):not(.item-action__active){
  color: var(--acc-icon-hover);
  fill: var(--acc-icon-hover);
  stroke: var(--acc-icon-hover);
}

/* кнопки навигации слайдера */
.theme-dark .acc__nav-btn{
  background: var(--acc-nav-bg);
  border-color: var(--acc-nav-border);
  box-shadow: 0 8px 20px var(--acc-shadow);
}
.theme-dark .acc__nav-btn.is-disabled{
  opacity: .45; /* только визуально, без размеров */
}

/* ТЁМНАЯ ТЕМА: общий фон блока .catalog-detail__forms (без изменения внутренних элементов) */
html[data-theme="dark"] .catalog-detail__forms.grid-list.grid-list--items,
body[data-theme="dark"] .catalog-detail__forms.grid-list.grid-list--items,
body.theme-dark .catalog-detail__forms.grid-list.grid-list--items,
body.dark-theme .catalog-detail__forms.grid-list.grid-list--items,
html.dark .catalog-detail__forms.grid-list.grid-list--items {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px; /* можно убрать, если не хочешь менять отступы */
}
/* ТЁМНАЯ ТЕМА: общий фон блока "Характеристики" (с !important) */
html[data-theme="dark"] .properties-wrapper.grid-list__item,
body[data-theme="dark"] .properties-wrapper.grid-list__item,
body.theme-dark .properties-wrapper.grid-list__item,
body.dark-theme .properties-wrapper.grid-list__item,
html.dark .properties-wrapper.grid-list__item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}
/* ТЁМНАЯ ТЕМА: общий фон блока "Описание" (с !important) */
html[data-theme="dark"] .grid-list__item.catalog-detail__previewtext,
body[data-theme="dark"] .grid-list__item.catalog-detail__previewtext,
body.theme-dark .grid-list__item.catalog-detail__previewtext,
body.dark-theme .grid-list__item.catalog-detail__previewtext,
html.dark .grid-list__item.catalog-detail__previewtext {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

html[data-theme="dark"] .sku-configurator-wrapper,
body[data-theme="dark"] .sku-configurator-wrapper,
body.theme-dark .sku-configurator-wrapper,
body.dark-theme .sku-configurator-wrapper,
html.dark .sku-configurator-wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

/* скрыть расчитать доставку */
#main > div.layout.layout--left-column-.flex-1 > div > div.body.relative.hover_ > div.main.banner-auto > div.container > div > div > div > div > div > div > div.product-container.detail.element_1.gallery-size-normal.gallery-type-normal.clearfix > div > div > div.catalog-detail__top-info.flexbox.flexbox--direction-row.flexbox--wrap-nowrap.gap.gap--40 > div.catalog-detail__main > div > div.catalog-detail__main-part.catalog-detail__main-part--right.sticky-block.flex-1.line-block__item.grid-list--fill-bg > div > div > div > div > div.grid-list__item > div > div:nth-child(3) {
  display: none !important;
}
#main > div.layout.layout--left-column-.flex-1 > div > div.body.relative.hover_ > div.main.banner-auto > div.container > div > div > div > div > div > div > div.product-container.detail.element_1.gallery-size-normal.gallery-type-normal.clearfix > div > div > div.catalog-detail__top-info.flexbox.flexbox--direction-row.flexbox--wrap-nowrap.gap.gap--40 > div.catalog-detail__main > div > div.catalog-detail__main-part.catalog-detail__main-part--left.flex-1.width-100.line-block__item > div > div:nth-child(6) > div > div > div:nth-child(3) {
  display: none !important;
}

.filter-panel__part-right.hide-600 .toggle-panel > .toggle-panel__item:nth-child(3),
.filter-panel__part-right.hide-600 .toggle-panel > .toggle-panel__item:nth-child(4){
    display: none !important;
}


/* === POPUP "Выберите город": вместо старого списка — 30 популярных городов === */

/* старый блок городов скрываем только в popup выбора региона */
.form.popup.popup--regions .popup_regions .items.only_city{
    display: none !important;
}

/* наш новый блок */
.form.popup.popup--regions .popup_regions .popular-cities-block--custom{
    margin-top: 18px;
}

.form.popup.popup--regions .popup_regions .popular-cities-block__title{
    margin: 0 0 12px;
    color: #666;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
}

.form.popup.popup--regions .popup_regions .popular-cities-block__list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.form.popup.popup--regions .popup_regions .popular-city-chip{
    appearance: none;
    border: 1px solid #e5e5e5;
    background: #f7f7f8;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    margin: 0;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    user-select: none;
    text-align: center;
    box-shadow: none;
}

.form.popup.popup--regions .popup_regions .popular-city-chip:hover{
    background: #efefef;
    border-color: #d8d8d8;
    transform: translateY(-1px);
}

.form.popup.popup--regions .popup_regions .popular-city-chip:active{
    transform: translateY(0);
}

.form.popup.popup--regions .popup_regions .popular-city-chip:focus{
    outline: none;
    border-color: #bdbdbd;
}

/* dark theme */
html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-block__title,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-block__title,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-cities-block__title,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-cities-block__title,
html.dark .form.popup.popup--regions .popup_regions .popular-cities-block__title{
    color: rgba(255,255,255,.72);
}

html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-city-chip,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-city-chip,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-city-chip,
body.dark-theme .form.popup.popup--regions .popular-city-chip,
html.dark .form.popup.popup--regions .popup_regions .popular-city-chip{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: #fff;
}

html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-city-chip:hover,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-city-chip:hover,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-city-chip:hover,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-city-chip:hover,
html.dark .form.popup.popup--regions .popup_regions .popular-city-chip:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
}

@media (max-width: 600px){
    .form.popup.popup--regions .popup_regions .popular-cities-block--custom{
        margin-top: 14px;
    }

    .form.popup.popup--regions .popup_regions .popular-cities-block__list{
        gap: 8px;
    }

    .form.popup.popup--regions .popup_regions .popular-city-chip{
        min-height: 34px;
        padding: 7px 12px;
        font-size: 13px;
    }
}


/* интерактивная подсказка под популярными городами */
.form.popup.popup--regions .popup_regions .popular-cities-hint-cta{
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px dashed #d8dde6;
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: none;
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta:hover{
    background: #f2f6fb;
    border-color: #c5cfdb;
    transform: translateY(-1px);
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta:active{
    transform: translateY(0);
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta:focus{
    outline: none;
    border-color: #b8c4d1;
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon{
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #5b6573;
    font-size: 18px;
    line-height: 1;
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta__content{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title{
    color: #2f3743;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}

.form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text{
    margin-top: 2px;
    color: #7a8492;
    font-size: 13px;
    line-height: 1.35;
}

/* лёгкая подсветка поля после клика */
.form.popup.popup--regions .popup_regions .autocomplete.popular-cities-input-accent{
    border-color: #9bb7d3 !important;
    box-shadow: 0 0 0 3px rgba(155, 183, 211, .18) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* dark */
html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-cities-hint-cta,
html.dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta{
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
}

html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta:hover,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta:hover,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta:hover,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-cities-hint-cta:hover,
html.dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}

html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon,
html.dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.86);
}

html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title,
html.dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title{
    color: #fff;
}

html[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text,
body[data-theme="dark"] .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text,
body.theme-dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text,
body.dark-theme .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text,
html.dark .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text{
    color: rgba(255,255,255,.64);
}

@media (max-width: 600px){
    .form.popup.popup--regions .popup_regions .popular-cities-hint-cta{
        margin-top: 10px;
        padding: 11px 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__icon{
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 17px;
    }

    .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__title{
        font-size: 13px;
    }

    .form.popup.popup--regions .popup_regions .popular-cities-hint-cta__text{
        font-size: 12px;
    }
}

/* Категории каталога: делаем подпись читаемой на светлых картинках */
.ui-card.grid-list__item .cover{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.ui-card.grid-list__item .ui-card__image{
  position: relative;
  z-index: 1;
}

.ui-card.grid-list__item .ui-card__info--absolute{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 18px 16px;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0.18) 30%,
    rgba(15, 23, 42, 0.78) 100%
  );
}

.ui-card.grid-list__item .ui-card__title,
.ui-card.grid-list__item .ui-card__info--absolute .font_13,
.ui-card.grid-list__item .ui-card__info--absolute .svg svg{
  color: #fff !important;
  fill: #fff;
  stroke: #fff;
}

.ui-card.grid-list__item .ui-card__title{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.ui-card.grid-list__item .ui-card__info--absolute .font_13{
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  opacity: .92;
}