/* ==========================================================
   kupi-komp.ru — custom theme overrides for prostore
   Loaded via <link> after cookie-consent.css in footer.twig
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');


/* === DESIGN-01 color guard: protect against admin theme-save silent reset (incident 2026-05-09) === */
:root {
  --theme-primary-color: #0F2A52 !important;
  --theme-secondary-color: #193B6E !important;
}
/* === Logo: wordmark only, mascot hidden === */
.header__logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  text-decoration: none !important;
}

.header__logo > img {
  display: none !important; /* anime-mascot скрыт, остаётся только wordmark */
}

.header__logo::before,
.header__logo::after {
  font-family: 'Onest', sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  line-height: 1;
}

.header__logo::before {
  content: "КУПИ";
  color: #FF6B1A;
  order: 2;
}

.header__logo::after {
  content: "КОМП";
  color: #fff;
  order: 3;
  margin-left: 6px;
}

/* Adaptive sizing — теперь wordmark есть на ВСЕХ устройствах (без маскота это единственный логотип) */
@media (min-width: 768px) and (max-width: 991px) {
  .header__logo::before,
  .header__logo::after {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .header__logo::before,
  .header__logo::after {
    font-size: 22px;
  }
}

/* ==========================================================
   FOOTER: hide default prostore footer + наш kk-footer
   ========================================================== */

/* Скрываем все стандартные варианты футера темы (footer_type 1/2/3/4/5/6).
   Оставляем специальные: --checkout (страница оформления) и --maintenance (заглушка). */
.footer:not(.footer--checkout):not(.footer--maintenance) {
  display: none !important;
}

.kk-footer {
  background: #0F2A52;
  color: #cfd8e3;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.kk-footer a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.kk-footer a:hover { color: #FF6B1A; text-decoration: none; }

.kk-footer__container { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

.kk-footer__topbar {
  background: #0A1F44;
  padding: 14px 0;
  font-size: 13px;
  color: #9aa7be;
}
.kk-footer__topbar-row {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: center; justify-content: center;
}
.kk-footer__topbar svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: #FF6B1A; vertical-align: -2px; margin-right: 6px;
}
.kk-footer__topbar a { color: #fff; font-weight: 600; }

.kk-footer__main {
  padding: 56px 0 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 48px;
}
.kk-footer__col { display: flex; flex-direction: column; gap: 14px; }
.kk-footer__col-title {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: #fff;
  margin: 0 0 12px; padding: 0; line-height: 1;
}
.kk-footer__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.kk-footer__list a { display: inline-block; padding: 2px 0; }

.kk-footer__brand {
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'Onest', sans-serif; font-weight: 900;
  font-size: 30px; letter-spacing: -0.5px; line-height: 1;
  margin: 0 0 4px;
}
.kk-footer__brand b { color: #FF6B1A; font-weight: 900; }
.kk-footer__brand span { color: #fff; font-weight: 900; }
.kk-footer__about {
  margin: 0 0 8px;
  color: #9aa7be; font-size: 14px; max-width: 340px; line-height: 1.6;
}
.kk-footer__socials { display: flex; gap: 10px; margin-top: 8px; }
.kk-footer__social {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #cfd8e3; transition: all .2s;
}
.kk-footer__social:hover {
  border-color: #FF6B1A;
  color: #FF6B1A;
  transform: translateY(-2px);
}
.kk-footer__social svg { width: 20px; height: 20px; }

.kk-footer__contact {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.kk-footer__contact li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  align-items: start; font-size: 14px;
}
.kk-footer__contact svg {
  width: 18px; height: 18px;
  color: #FF6B1A; margin-top: 2px;
}
.kk-footer__contact a { color: #fff; font-weight: 600; }
.kk-footer__contact b { color: #fff; font-weight: 600; display: block; }
.kk-footer__cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 22px;
  background: #FF6B1A; color: #fff !important;
  border-radius: 8px; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .5px;
  transition: all .2s; align-self: flex-start;
}
.kk-footer__cta:hover {
  background: #ff7e36; color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,107,26,.4);
}

.kk-footer__paybar {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 14px 28px; font-size: 13px; color: #9aa7be;
}
.kk-footer__paybar span { display: inline-flex; align-items: center; gap: 8px; }
.kk-footer__paybar svg { width: 18px; height: 18px; color: #FF6B1A; flex-shrink: 0; }
.kk-footer__paybar b { color: #fff; font-weight: 600; }

.kk-footer__bottom {
  background: #0A1F44;
  padding: 18px 0;
  font-size: 12px; color: #7a8499; line-height: 1.6;
}
.kk-footer__bottom-row {
  display: flex; flex-wrap: wrap;
  gap: 8px 24px; justify-content: space-between; align-items: center;
}
.kk-footer__bottom-left { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kk-footer__bottom-left b { color: #cfd8e3; font-weight: 500; }

@media (max-width: 991px) {
  .kk-footer__main { grid-template-columns: 1fr 1fr; gap: 36px 32px; padding: 40px 0 32px; }
  .kk-footer__brand { font-size: 26px; }
  .kk-footer__topbar-row { justify-content: flex-start; gap: 8px 18px; font-size: 12px; }
}
@media (max-width: 560px) {
  .kk-footer__main { grid-template-columns: 1fr; gap: 32px; }
  .kk-footer__paybar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0; }
  .kk-footer__bottom-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kk-footer__cta { width: 100%; }
}

/* button-вариант футер-CTA (раньше был <a>) */
button.kk-footer__cta { font-family: inherit; border: 0; cursor: pointer; }

/* ==========================================================
   KK-FRESH: блок «Новинки склада» на главной (4 карточки)
   ========================================================== */
.kk-fresh {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kk-fresh__card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kk-fresh__card:hover {
  transform: translateY(-4px);
  border-color: #FF6B1A;
  box-shadow: 0 14px 32px rgba(15, 42, 82, .12);
  color: inherit;
  text-decoration: none !important;
}
.kk-fresh__img {
  position: relative;
  aspect-ratio: 4/3;
  background: #fff;
  padding: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.kk-fresh__img img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}
.kk-fresh__card:hover .kk-fresh__img img { transform: scale(1.05); }
.kk-fresh__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.kk-fresh__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.kk-fresh__brand {
  color: #5a6577; font-weight: 700;
}
.kk-fresh__stock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: 10px;
  margin-left: auto;
}
.kk-fresh__stock::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.kk-fresh__stock--in {
  background: rgba(34, 168, 95, .12); color: #208656;
}
.kk-fresh__stock--in::before { background: #22A85F; }
.kk-fresh__stock--wait {
  background: rgba(255, 107, 26, .12); color: #c25210;
}
.kk-fresh__stock--wait::before { background: #FF6B1A; }
.kk-fresh__name {
  font-family: 'Onest', sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: #0F2A52; margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.2px;
}
.kk-fresh__bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 8px;
  gap: 8px;
}
.kk-fresh__price {
  font-family: 'Onest', sans-serif;
  font-size: 18px; font-weight: 800; color: #0F2A52;
  letter-spacing: -0.3px; line-height: 1; white-space: nowrap;
}
.kk-fresh__cta {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #FF6B1A; white-space: nowrap;
  transition: transform .2s;
}
.kk-fresh__card:hover .kk-fresh__cta { transform: translateX(2px); }

@media (max-width: 991px) {
  .kk-fresh { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .kk-fresh { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kk-fresh__body { padding: 12px 12px 14px; gap: 6px; }
  .kk-fresh__name { font-size: 13px; -webkit-line-clamp: 2; }
  .kk-fresh__price { font-size: 16px; }
  .kk-fresh__cta { display: none; }
}

/* ==========================================================
   KK-LEAD popup — единая форма заявки
   ========================================================== */
.kk-lead {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  font-family: 'Onest', sans-serif;
}
.kk-lead[hidden] { display: none; }
.kk-lead__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 31, 68, .7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.kk-lead__dialog {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 440px;
  padding: 32px 32px 28px;
  box-shadow: 0 20px 60px rgba(10, 31, 68, .3);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: kkLeadIn .25s ease-out;
}
@keyframes kkLeadIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kk-lead__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #5a6577; cursor: pointer;
  transition: background .15s, color .15s;
}
.kk-lead__close:hover { background: #f1f4f9; color: #0F2A52; }
.kk-lead__close svg { width: 18px; height: 18px; }
.kk-lead__title {
  font-size: 24px; font-weight: 800; color: #0F2A52;
  margin: 0 0 6px; padding-right: 36px;
  letter-spacing: -0.4px; line-height: 1.2;
}
.kk-lead__sub {
  font-size: 14px; color: #5a6577;
  margin: 0 0 22px; line-height: 1.5;
}
.kk-lead__form { display: flex; flex-direction: column; gap: 14px; }
.kk-lead__field { display: flex; flex-direction: column; gap: 6px; }
.kk-lead__label {
  font-size: 13px; color: #0F2A52; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.kk-lead__label i { color: #FF6B1A; font-style: normal; }
.kk-lead__optional { color: #94a3b8; font-weight: 400; font-size: 12px; }
.kk-lead__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #1A1A1A;
  background: #fff;
  border: 1.5px solid #e2e8ed;
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.kk-lead__input:focus {
  outline: 0;
  border-color: #FF6B1A;
  box-shadow: 0 0 0 3px rgba(255, 107, 26, .12);
}
.kk-lead__textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.kk-lead__check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; line-height: 1.5; color: #5a6577;
  cursor: pointer; padding: 4px 0;
}
.kk-lead__check input {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: 1px 0 0 0;
  padding: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.kk-lead__check input:hover { border-color: #FF6B1A; }
.kk-lead__check input:checked {
  background-color: #FF6B1A;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/></svg>");
  background-position: center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  border-color: #FF6B1A;
}
.kk-lead__check input:focus-visible {
  outline: 2px solid rgba(255, 107, 26, .35);
  outline-offset: 2px;
}
.kk-lead__check a { color: #0F2A52; text-decoration: underline; }
.kk-lead__check a:hover { color: #FF6B1A; }

.kk-lead__submit {
  width: 100%;
  padding: 14px 22px;
  margin-top: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #fff;
  background: #FF6B1A;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.kk-lead__submit:hover {
  background: #ff7e36;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 107, 26, .35);
}
.kk-lead__submit:active { transform: translateY(0); }

.kk-lead__phone {
  font-size: 13px; color: #5a6577;
  text-align: center; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px dashed #e2e8ed;
}
.kk-lead__phone a {
  color: #0F2A52; font-weight: 700; text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.kk-lead__phone a:hover { color: #FF6B1A; }

@media (max-width: 480px) {
  .kk-lead { padding: 0; align-items: stretch; }
  .kk-lead__dialog {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    align-self: flex-end;
    padding: 24px 20px 20px;
    max-height: 92vh;
  }
  .kk-lead__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kk-lead__title { font-size: 20px; }
}

/* ==========================================================
   DESIGN-02: product page overrides
   Scope: только страница карточки товара (.sku / .sku)
   ========================================================== */

/* Цена — navy, Onest 900, крупно */
.sku .sku__price,
.sku .sku__price > * {
  font-family: 'Onest', sans-serif !important;
  font-weight: 900 !important;
  color: #0F2A52 !important;
  letter-spacing: -0.5px;
  line-height: 1.05;
}
.sku .sku__price {
  font-size: 38px;
  margin: 8px 0 18px;
}
.sku .sku__price-ins { font-size: 38px; }
.sku .sku__price-del {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-decoration: line-through;
  margin-left: 10px;
}
.sku .sku__price-economy {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FF6B1A !important;
  margin-left: 12px;
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,107,26,.1);
  border-radius: 6px;
  letter-spacing: 0;
}

/* Compact-sku price (mini-pill в верхней зоне) — оставить компактным, но Onest */
.sku .sku__compact-item-price,
.sku .sku__compact-item-price-ins {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  color: #0F2A52 !important;
}

/* CTA «Купить» — orange (primary в e-com), переопределяем navy --primary */
.sku button#button-cart.ui-btn--primary,
.sku button#button-cart-additional.ui-btn--primary,
.sku .sku__compact button[data-button-cart].ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .3px;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.sku button#button-cart.ui-btn--primary:hover,
.sku button#button-cart-additional.ui-btn--primary:hover,
.sku .sku__compact button[data-button-cart].ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,107,26,.35);
}

/* === Tabs (Описание / Характеристики / Отзывы / FAQ / Оплата / Доставка) === */
.details__control { border-bottom: 1px solid #e8edf4; margin-bottom: 8px; }
.details__control-menu {
  border-bottom: 0 !important;
  gap: 0;
  margin-bottom: -1px;
}
.details__control-btn {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #5a6577 !important;
  padding: 14px 22px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  letter-spacing: -0.2px;
  transition: color .2s, border-color .2s;
  position: relative;
}
/* Убираем любые стандартные underline-индикаторы темы prostore */
.details__control-btn::before,
.details__control-btn::after {
  display: none !important;
  content: none !important;
}
.details__control-btn:hover { color: #0F2A52 !important; }
.details__control-btn.is-active {
  color: #0F2A52 !important;
  border-bottom-color: #FF6B1A !important;
  font-weight: 800 !important;
}
.details__control-counter {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #FF6B1A;
  background: rgba(255,107,26,.1);
  border-radius: 10px;
  vertical-align: 2px;
}
.details__control-btn.is-active .details__control-counter {
  color: #fff;
  background: #FF6B1A;
}

/* === Общий заголовок «О товаре» вместо длинных дублирующих подзаголовков === */
.details__h2 {
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  color: #0F2A52;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 0 16px;
  padding: 0;
}

/* Скрываем длинные дублирующие подзаголовки в desktop tabs (mobile accordion-title остаётся) */
.details__title { display: none !important; }

/* Mobile accordion title — оставляем как заголовок свёрнутой секции */
.details__accordion-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  color: #0F2A52 !important;
  font-size: 17px !important;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

/* === kk-info-list — компактные пункты в табах Оплата/Доставка === */
.kk-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.kk-info-list li {
  position: relative;
  padding: 0 0 12px 28px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #1a1a1a;
}
.kk-info-list li:last-child { padding-bottom: 0; }
.kk-info-list li::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px;
  width: 8px; height: 8px;
  background: #FF6B1A;
  border-radius: 2px;
  transform: rotate(45deg);
}
.kk-info-list li b {
  color: #0F2A52;
  font-weight: 700;
}

/* === Accordion arrow — CSS chevron (sprite SVG не получает fill:currentColor) === */
.details__accordion-arrow {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #f0f3f7;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background .2s;
}
/* Прячем оригинальную SVG из sprite — рисуем свой chevron через ::before */
.details__accordion-arrow svg,
.details__accordion-arrow .icon-arrow-toggle {
  display: none !important;
}
.details__accordion-arrow::before {
  content: "";
  display: block;
  width: 9px; height: 9px;
  border-right: 2.5px solid #0F2A52;
  border-bottom: 2.5px solid #0F2A52;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}
.details__accordion-toggle.is-active .details__accordion-arrow {
  background: rgba(255,107,26,.12);
}
.details__accordion-toggle.is-active .details__accordion-arrow::before {
  border-color: #FF6B1A;
  transform: translateY(2px) rotate(-135deg);
}
.details__accordion-toggle:hover .details__accordion-arrow { background: #e8edf4; }
.details__accordion-toggle.is-active:hover .details__accordion-arrow { background: rgba(255,107,26,.18); }

/* === Описание: typography + bullets + read more === */
.details__txt {
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #1a1a1a;
}
.details__txt p { margin: 0 0 14px; }
.details__txt strong, .details__txt b {
  color: #0F2A52;
  font-weight: 700;
}
.details__txt h2, .details__txt h3 {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  color: #0F2A52 !important;
  margin: 28px 0 14px;
  letter-spacing: -0.3px;
}
.details__txt h3 { font-size: 17px; }
.details__txt h2 { font-size: 19px; }
.details__txt ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.details__txt ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.details__txt ul li::before {
  content: "";
  position: absolute;
  left: 6px; top: 10px;
  width: 8px; height: 8px;
  background: #FF6B1A;
  border-radius: 2px;
  transform: rotate(45deg);
}
/* "Читать дальше" / "Скрыть" / "Все характеристики" — синие ссылки темы (.ui-link--blue) внутри карточки */
.sku .ui-link.ui-link--blue,
.details .ui-link.ui-link--blue,
.details__txt-readmore .ui-link--blue,
.details__txt-readmore a {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #FF6B1A !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none !important;
  border-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.sku .ui-link.ui-link--blue:hover,
.details .ui-link.ui-link--blue:hover,
.details__txt-readmore .ui-link--blue:hover,
.details__txt-readmore a:hover {
  color: #ff7e36 !important;
  text-decoration: none !important;
}
.sku .ui-link.ui-link--blue::after,
.details .ui-link.ui-link--blue::after,
.details__txt-readmore .ui-link--blue::after,
.details__txt-readmore a::after {
  content: "→";
  display: inline-block;
  font-size: 14px;
  transition: transform .2s;
}
.sku .ui-link.ui-link--blue:hover::after,
.details .ui-link.ui-link--blue:hover::after,
.details__txt-readmore a:hover::after { transform: translateX(3px); }

/* === Таблица характеристик: убрать точки, аэрировать === */
.details__specifications-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  color: #0F2A52 !important;
  font-size: 16px !important;
  letter-spacing: -0.2px;
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #FF6B1A;
  display: inline-block;
}
.details__specifications-table { width: 100%; border-collapse: collapse; }
.details__specifications-table tr {
  border-bottom: 1px solid #f0f3f7;
}
.details__specifications-table tr:hover { background: #fafbfd; }
.details__specifications-table td,
.details__specifications-table th {
  padding: 12px 16px 12px 0 !important;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  vertical-align: top;
  background: transparent !important;
  border: 0 !important;
}
.details__specifications-table td:first-child,
.details__specifications-table th:first-child {
  width: 45%;
  color: #5a6577;
  font-weight: 500;
}
.details__specifications-table td:last-child,
.details__specifications-table th:last-child {
  color: #0F2A52;
  font-weight: 600;
  padding-left: 16px !important;
}
/* убираем dotted/leader от темы */
.details__specifications-table-line,
.details__specifications-table::before,
.details__specifications-table td::after,
.details__specifications-table th::after {
  background: none !important;
  border: 0 !important;
}
.details__specifications-table-line {
  display: inline !important;
  background: none !important;
  font-weight: inherit !important;
}

/* === «Вы смотрели» (related/recently viewed cards) === */
.products__item {
  border: 1px solid #e2e8ed !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  background: #fff;
}
.products__item:hover {
  border-color: #FF6B1A !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 42, 82, .08);
}
.products__item-price {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  color: #0F2A52 !important;
  font-size: 17px !important;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.products__item-price ins {
  text-decoration: none;
  color: #0F2A52;
  font-weight: 800;
}
.products__item-price del {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 6px;
  text-decoration: line-through;
}
.products__item-price mark {
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  background: #FF6B1A;
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 6px;
  letter-spacing: 0;
}

/* === Quantity warning sticker (Скоро закончится / Last chance) === */
.gallery__sticker,
.sku__sticker,
.product-sticker,
.sticker--info,
[class*="sticker"][class*="last"],
[class*="sticker"][class*="qty"] {
  background: #FF6B1A !important;
  color: #fff !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(255,107,26,.25);
}

/* «Поделиться» — ослабляем, не конкурирует с CTA */
.sku a.js-share.ui-btn,
.sku a.js-share.ui-btn--primary {
  background: transparent !important;
  color: #5a6577 !important;
  border: 1px solid #e2e8ed !important;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px !important;
  height: auto !important;
  min-height: 36px;
}
.sku a.js-share .icon-share {
  color: #5a6577;
  width: 14px; height: 14px;
}
.sku a.js-share:hover {
  border-color: #FF6B1A !important;
  color: #FF6B1A !important;
}
.sku a.js-share:hover .icon-share { color: #FF6B1A; }

/* ==========================================================
   PAGE BACKGROUND — depth между карточками и страницей
   Светло-серый body, белые "плёнки" вокруг карточек товара/категорий
   На главной — у hero/kk-build/kk-fresh/kk-footer свой явный bg, не повлияет
   ========================================================== */
body {
  background: #F5F7FA;
}

/* Карточка товара (правая колонка с ценой/кнопками + tab-блок снизу) */
.sku {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 42, 82, .04), 0 8px 24px rgba(15, 42, 82, .04);
  padding: 24px 28px;
}
.details {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 42, 82, .04), 0 8px 24px rgba(15, 42, 82, .04);
  padding: 24px 28px;
  margin-top: 24px;
}
@media (max-width: 767px) {
  .sku, .details { padding: 18px 16px; border-radius: 12px; }
  .details { margin-top: 16px; }
}

/* Карточки товаров в категории / "Вы смотрели" уже имеют свой bg в .products__item */

/* Хлебные крошки на сером — добавим воздуха */
.breadcrumb {
  padding: 14px 0;
  background: transparent !important;
}

/* ==========================================================
   DESIGN-03: catalog category page (/noutbuki, /monitory, etc)
   Scope: .catalog (главный контейнер category.twig)
   Базовые .products__item стили — выше в DESIGN-02 (применяются ко всем местам)
   ========================================================== */

/* === Header: breadcrumbs + H1 + counter === */
.catalog .breadcrumbs,
.breadcrumbs:has(+ .catalog) {
  padding: 28px 0 22px;
  background: transparent;
  border-bottom: 0;
}
.catalog .breadcrumbs__title,
.breadcrumbs .breadcrumbs__title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  color: #0F2A52 !important;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin: 0 14px 0 0 !important;
  display: inline-block;
  vertical-align: middle;
}
.catalog .breadcrumbs__counter,
.breadcrumbs .breadcrumbs__counter {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #FF6B1A !important;
  background: rgba(255, 107, 26, .1);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .2px;
  line-height: 1;
}
.catalog .breadcrumbs__menu,
.breadcrumbs .breadcrumbs__menu {
  margin-top: 8px;
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  color: #5a6577;
  list-style: none;
  padding: 0;
}
.breadcrumbs__menu a,
.breadcrumbs__link {
  color: #5a6577 !important;
  text-decoration: none;
  transition: color .15s;
}
.breadcrumbs__menu a:hover,
.breadcrumbs__link:hover { color: #FF6B1A !important; }

/* === Subcategory tiles === */
/* Белая обёртка вокруг плиток подкатегорий — нужна на /all-categories
   (там нет `.catalog`-обёртки и фона) и не мешает в category page. */
.products-categories {
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  padding: 20px;
  margin: 0 0 24px;
}
.products-categories__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Перебиваем prostore inline `flex: 0 0 20%; max-width: 20%` на <li> — grid сам распределяет */
.products-categories__grid > li {
  flex: unset !important;
  max-width: none !important;
  list-style: none;
}
.products-categories__item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px 16px;
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  text-decoration: none !important;
  color: #0F2A52 !important;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  height: 100%;
}
.products-categories__item:hover {
  border-color: #FF6B1A !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 42, 82, .08);
  color: #0F2A52 !important;
}
.products-categories__item-image {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.products-categories__item-image img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.products-categories__item-title,
.products-categories__item .h2 {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0F2A52 !important;
  text-align: center;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 0 !important;
}

/* === Settings bar (sort + limit + display switcher) === */
.catalog .settings {
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 18px;
}
.catalog .settings .row { align-items: center; }

.catalog .ui-select {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}
.catalog .ui-select select {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600;
  font-size: 13px;
  color: #0F2A52;
  background: #fff;
  border: 1.5px solid #e2e8ed;
  border-radius: 8px;
  padding: 9px 36px 9px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%230F2A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  transition: border-color .15s, box-shadow .15s;
}
.catalog .ui-select select:hover { border-color: #FF6B1A; }
.catalog .ui-select select:focus {
  outline: 0;
  border-color: #FF6B1A;
  box-shadow: 0 0 0 3px rgba(255, 107, 26, .12);
}

/* Display switcher (grid / line / micro) — скрыт ГЛОБАЛЬНО (category/search/special/manufacturer_info). Используем только дефолтный grid-3 (DESIGN-02 кастомная вёрстка) */
.ui-display { display: none !important; }

/* === Product cards in category — extend DESIGN-02 base === */

/* Manufacturer + status badges row */
/* Status pill + manufacturer — одна горизонтальная линия, центрированы по vertical middle */
.products__item-status,
.products__item-id {
  vertical-align: middle !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
.products__item-id {
  display: inline-block !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #5a6577;
  margin-left: 8px !important;
  margin-right: 14px !important;
  line-height: 26px; /* выравниваем с pill total height (10px text + 8px+8px padding) */
}
.products__item-status {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 5px 8px 14px !important; /* воздух вокруг точки и текста */
  border-radius: 999px;
  margin-left: 14px !important;
  margin-right: 0 !important;
  line-height: 1;
}
.products__item-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 41%;
  margin-top: 1px;
  margin-left: 4px;
}
.products__item-status--true {
  background: rgba(34, 168, 95, .12);
  color: #208656;
}
.products__item-status--true::before { background: #22A85F; }
.products__item-status--false {
  background: rgba(148, 163, 184, .15);
  color: #64748b;
}
.products__item-status--false::before { background: #94a3b8; }

/* Product title — Onest 600, navy, 2-line clamp */
.products__item-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #0F2A52 !important;
  text-decoration: none !important;
  letter-spacing: -0.2px;
  margin: 6px 14px 10px !important;
  min-height: calc(14px * 1.4 * 3);
  transition: color .15s;
}
.products__item-title:hover { color: #FF6B1A !important; }

/* Price — больше воздуха в карточке списка */
.products__item-price {
  font-size: 19px !important;
  margin: 0 14px 12px !important;
  letter-spacing: -0.4px;
}

/* === Bottom row: price (left) + CTA (right) horizontal === */
/* Карточка вертикальная (фото сверху, текст под), нижний бар — absolute row */

/* Снимаем overflow:hidden с карточки в категории (был задан в DESIGN-02 для скругления image),
   иначе absolute CTA с bottom:14 обрезается границей карточки.
   Скругление image возвращаем на сам image-контейнер. */
.products__item {
  position: relative !important;
  z-index: 10;
  overflow: visible !important;
  height: 44.1rem !important;
  width: 100%;
}
.products__item-image,
.products__item-gallery {
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.catalog .products__item-in {
  padding-bottom: 14px;
}

/* Цена + CTA в одной горизонтали через negative margin-top на action.
   Оба flex с align-items:center чтобы baseline текста цены = центр кнопки. */
.products__item .products__item-price {
  position: static !important;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  color: #0F2A52 !important;
  font-size: 19px !important;
  letter-spacing: -0.4px;
  line-height: 1;
  height: 38px;
}

/* Action wrapper — поднят негативным margin на одну линию с ценой, прижат вправо. */
.products__item .products__item-action,
.products__item:hover .products__item-action {
  position: static !important;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin: -38px 0 0 !important;
  padding: 0 !important;
  width: auto;
  height: 38px;
}
.products__item .ui-add-to-cart {
  display: inline-flex !important;
  align-items: center;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
  overflow: visible !important;
}

/* Сама CTA-кнопка — компактная orange с label + svg */
.products__item .ui-add-to-cart .ui-btn--primary,
.products__item .ui-add-to-cart > .ui-btn--primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #FF6B1A !important;
  border: 0 !important;
  color: #fff !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 10px !important;
  padding: 0 14px !important;
  height: 38px !important;
  min-height: 38px !important;
  width: auto !important;
  white-space: nowrap;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.products__item .ui-add-to-cart .ui-btn--primary:hover {
  background: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 107, 26, .35);
}
.products__item .ui-add-to-cart .ui-btn--primary:disabled {
  background: #cbd5e1 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.products__item .ui-add-to-cart .ui-btn--primary svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* Active state (товар уже в корзине) — приглушаем, но видна */
.products__item .ui-add-to-cart.is-active .ui-btn--primary {
  background: #208656 !important;
}
.products__item .ui-add-to-cart.is-active .ui-btn--primary:hover {
  background: #1a6c45 !important;
}

/* Скрываем ui-number (+/- qty) и preview-popup — kk модель «корзина = заявка» */
.products__item .ui-number,
.products__item .ui-btn--view,
.products__item .js-btn-preview {
  display: none !important;
}

/* Gallery pagination bullets — лишний шум на listing, скрываем */
.products__item-pagination {
  display: none !important;
}

/* Top-right buttons (compare, wishlist) — ослабляем, не в фокусе на pre-launch */
.products__item-buttons {
  opacity: .6;
  transition: opacity .15s;
}
.products__item:hover .products__item-buttons { opacity: 1; }
.products__item-buttons .ui-btn {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid #e2e8ed !important;
  border-radius: 8px !important;
  color: #5a6577 !important;
  box-shadow: 0 2px 6px rgba(15, 42, 82, .06);
}
.products__item-buttons .ui-btn:hover {
  border-color: #FF6B1A !important;
  color: #FF6B1A !important;
}
.products__item-buttons .ui-btn.is-active {
  border-color: #FF6B1A !important;
  color: #FF6B1A !important;
}
.products__item-buttons .ui-btn svg { width: 14px; height: 14px; }

/* Top-left: rating — ослабляем (на pre-launch отзывов нет) */
.products__item-rating {
  background: rgba(255, 255, 255, .95);
  border: 1px solid #e2e8ed;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #0F2A52;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(15, 42, 82, .06);
}
.products__item-rating svg {
  width: 12px; height: 12px;
  color: #FF6B1A;
}

/* Badges (new/sale/popular/hit) — единый kk-стиль */
.products__item-badges {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.products__item-badges .ui-badge {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  border: 0 !important;
  line-height: 1 !important;
}
.products__item .ui-badge--blue { background: rgba(15, 42, 82, .9) !important; color: #fff !important; }
.products__item .ui-badge--red { background: #e53935 !important; color: #fff !important; }
.products__item .ui-badge--orange { background: #FF6B1A !important; color: #fff !important; }
.products__item .ui-badge--purple { background: #6B46C1 !important; color: #fff !important; }
.products__item .ui-badge--transparent {
  background: rgba(255, 107, 26, .1) !important;
  color: #FF6B1A !important;
}

/* Product image — prostore default 335px высоты переопределяем на 200px (Тарас просил меньше) */
.products__item-image,
.products__item-gallery {
  background: #fff;
  padding: 12px !important;
  height: 200px !important;
  margin: 0 0 14px !important;
  overflow: hidden;
}
.products__item-image img,
.products__item-gallery img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  transition: transform .25s ease;
}

/* Уменьшаем гигантский padding 3rem (48px) у .products__item-in до 1rem (16px) */
.catalog .products__list .products__item .products__item-in {
  padding: 16px !important;
  min-height: 0 !important;
}
/* Hover-scale картинки убран — Тарас просил без сильного увеличения */
.products__item:hover .products__item-image img,
.products__item:hover .products__item-gallery img {
  transform: none;
}

/* Inline view (.products__item--line) — описание справа от картинки */
.products__item--line .products__item-desc {
  padding: 18px 22px;
}
.products__item--line .products__item-readmore {
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  color: #5a6577;
  line-height: 1.5;
}
.products__item--line .products__item-details-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
.products__item--line .products__item-details-list li {
  font-size: 12px;
  line-height: 1.4;
  color: #5a6577;
}
.products__item--line .products__item-details-list small {
  color: #94a3b8;
  font-weight: 500;
  margin-right: 4px;
}

/* === Pagination + Show more === */
.catalog .container-pagination {
  margin: 28px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.catalog .pagination,
.catalog .pagination ul {
  display: inline-flex !important;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.catalog .pagination a,
.catalog .pagination span,
.catalog .pagination li > a,
.catalog .pagination li > span {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #5a6577;
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 36px;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
  display: inline-block;
  line-height: 1.2;
}
.catalog .pagination a:hover,
.catalog .pagination li > a:hover {
  border-color: #FF6B1A;
  color: #FF6B1A;
}
.catalog .pagination .active a,
.catalog .pagination .active span,
.catalog .pagination li.active > a,
.catalog .pagination li.active > span,
.catalog .pagination strong {
  background: #FF6B1A;
  border-color: #FF6B1A;
  color: #fff;
}

.catalog .show-more-prostore.ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  color: #fff !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  height: auto !important;
  min-height: 44px;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.catalog .show-more-prostore.ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 107, 26, .35);
}

/* === SEO description block (top/bottom) === */
.catalog .seo {
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 18px;
}
.catalog .seo:not(.seo--top) { margin: 24px 0 0; }

/* prostore default ограничивает .seo__desc до 76rem (760px) — снимаем, текст на всю ширину блока */
.catalog .seo__wrapper {
  display: block !important;
}
.catalog .seo__desc,
.catalog .seo__readmore {
  max-width: none !important;
  width: 100%;
  flex: 1 1 auto !important;
}
.catalog .seo .editor {
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #1a1a1a;
}
.catalog .seo .editor h2,
.catalog .seo .editor h3 {
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  color: #0F2A52;
  letter-spacing: -0.3px;
  margin: 18px 0 10px;
}
.catalog .seo .editor h2 { font-size: 19px; }
.catalog .seo .editor h3 { font-size: 16px; }
.catalog .seo .editor p { margin: 0 0 12px; }
.catalog .seo .editor ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.catalog .seo .editor ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  line-height: 1.55;
}
.catalog .seo .editor ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 7px; height: 7px;
  background: #FF6B1A;
  border-radius: 2px;
  transform: rotate(45deg);
}
.catalog .seo__readmore .ui-link,
.catalog .seo a.js-readmore-toggle {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #FF6B1A !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 8px;
  display: inline-block;
}

/* === Sidebar (column_left) — если будет в DEV-03 фильтры === */
.catalog .col-xl-3 .module,
.catalog [class*="col-"] aside,
.catalog [class*="col-"] .panel {
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* === Mobile === */
@media (max-width: 991px) {
  .catalog .breadcrumbs__title { font-size: 26px !important; }
  .catalog .settings { padding: 10px 14px; }
  .products-categories__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .products-categories__item-image { width: 64px; height: 64px; }
}
@media (max-width: 560px) {
  .catalog .breadcrumbs { padding: 18px 0 14px; }
  .catalog .breadcrumbs__title { font-size: 22px !important; margin-right: 10px !important; }
  .catalog .breadcrumbs__counter { font-size: 12px !important; padding: 3px 8px; }
  .products__item-title { font-size: 13px !important; -webkit-line-clamp: 2; min-height: calc(13px * 1.4 * 2); }
  .products__item-price {
    font-size: 17px !important;
    padding-right: 50px; /* меньше место под иконочную кнопку на мобиле */
  }
  /* CTA на мобильном — только иконка корзины (label через font-size:0) */
  .products__item .ui-add-to-cart .ui-btn--primary {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0;
  }
  .products__item .ui-add-to-cart .ui-btn--primary svg {
    width: 16px; height: 16px;
  }
  .products-categories__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .products-categories__item { padding: 14px 10px 12px; }
  .products-categories__item-image { width: 56px; height: 56px; }
  .products-categories__item-title { font-size: 13px !important; }
  .catalog .seo { padding: 16px 18px; border-radius: 12px; }
}
/* === DESIGN-03 end === */

/* ==========================================================
   Теги товара (.tags на карточке товара) — kk-pill стиль
   Раньше: синие подчёркнутые ссылки, выглядели грязно.
   SEO: перелинковка по длинному хвосту (/search/?tag=) — ОСТАВЛЯЕМ, не скрываем.
   ========================================================== */
p.tags,
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 24px 0 16px;
  padding: 0;
  font-family: 'Onest', sans-serif;
  font-size: 0; /* убирает запятые-разделители между ссылками */
  line-height: 1.4;
}
p.tags::first-line,
.tags::first-line {
  font-size: 0;
}
/* "Теги:" — заголовок блока */
p.tags {
  position: relative;
  padding-left: 0;
}
p.tags::before {
  content: "Теги:";
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #5a6577;
  margin-right: 4px;
}
/* Скрываем оригинальный текстовый заголовок "Теги:" из HTML — он залипает в начале <p> */
p.tags { font-size: 0 !important; }
p.tags > * { font-size: 13px; }

p.tags a,
.tags a,
p.tags a.ui-link--blue,
.tags a.ui-link--blue {
  display: inline-flex !important;
  align-items: center;
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #0F2A52 !important;
  background: #f1f4f9;
  padding: 6px 12px !important;
  border: 1px solid #e2e8ed !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border-bottom: 1px solid #e2e8ed !important; /* перебиваем prostore underline */
  transition: all .15s;
  white-space: nowrap;
  letter-spacing: -0.1px;
}
p.tags a:hover,
.tags a:hover,
p.tags a.ui-link--blue:hover,
.tags a.ui-link--blue:hover {
  background: rgba(255, 107, 26, .08);
  border-color: #FF6B1A !important;
  color: #FF6B1A !important;
}

/* ==========================================================
   Filter sidebar (.filter-aside) — kk-стиль, компактный
   Sidebar в категории + offcanvas на мобильном
   ========================================================== */

/* Контейнер — белый фон + общий padding на корневом .filter-aside.
   Внутренние блоки прозрачные. */
.filter-aside {
  font-family: 'Onest', sans-serif;
  margin: 0 0 2rem;
  background: #fff;
  border-radius: 10px;
  padding: 3rem;
}
.filter-aside__offcanvas {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* Toggle (mobile-only кнопка открытия) */
.filter-aside__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #e2e8ed;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0F2A52;
  cursor: pointer;
  transition: all .15s;
}
.filter-aside__toggle:hover {
  border-color: #FF6B1A;
  color: #FF6B1A;
}
.filter-aside__toggle svg { width: 14px; height: 14px; }

.filter-aside__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  background: #FF6B1A;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
}

/* Head — close + title + reset */
.filter-aside__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid #f0f3f7;
  background: transparent;
}
.filter-aside__close {
  display: none;
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: #5a6577;
  cursor: pointer;
}
.filter-aside__close:hover { background: #f1f4f9; color: #0F2A52; }
.filter-aside__close svg { width: 18px; height: 18px; }

.filter-aside__title {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #0F2A52;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.filter-aside__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #5a6577;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: color .15s, background .15s;
}
.filter-aside__reset:hover {
  color: #FF6B1A;
  background: rgba(255, 107, 26, .08);
}
.filter-aside__reset svg { width: 12px; height: 12px; }

/* Body — список групп */
.filter-aside__body { padding: 0; }

/* Group — collapsible секция */
.filter-aside__group {
  border-bottom: 1px solid #f0f3f7;
  padding: 0;
}
.filter-aside__group:last-child { border-bottom: 0; }

.filter-aside__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  cursor: pointer;
}
.filter-aside__group-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #0F2A52 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.2;
}

.filter-aside__group-reset {
  background: transparent;
  border: 0;
  width: 24px; height: 24px;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-aside__group-reset:hover { color: #FF6B1A; background: rgba(255,107,26,.08); }
.filter-aside__group-reset svg { width: 12px; height: 12px; }

.filter-aside__group-body {
  padding: 0 0 14px;
}

/* Чеклист — pill-теги, плотно упакованы */
.filter-aside__group-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-aside__group-checklist > li { padding: 0; margin: 0; list-style: none; }

/* ui-check — обёртка чекбокса */
.filter-aside__group-checklist .ui-check {
  display: inline-block;
  cursor: pointer;
  margin: 0;
}
.filter-aside__group-checklist .ui-check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ui-check__tag — pill (длинные значения переносятся внутри pill, не обрезаются) */
.filter-aside__group-checklist .ui-check__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: #f1f4f9;
  border: 1.5px solid transparent;
  border-radius: 14px;
  font-family: 'Onest', sans-serif !important;
  font-weight: 600;
  font-size: 12px;
  color: #5a6577;
  letter-spacing: -0.1px;
  line-height: 1.3;
  transition: all .15s;
  user-select: none;
  white-space: normal !important;
  word-break: break-word;
  max-width: 100%;
  height: auto !important;
  text-align: left;
}
.filter-aside__group-checklist .ui-check__tag-text {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.filter-aside__group-checklist > li {
  min-width: 0;
  max-width: 100%;
}
.filter-aside__group-checklist .ui-check:hover .ui-check__tag {
  background: rgba(255, 107, 26, .08);
  color: #FF6B1A;
}

/* Active (checked) state */
.filter-aside__group-checklist .ui-check__input:checked + .ui-check__tag {
  background: #FF6B1A;
  border-color: #FF6B1A;
  color: #fff;
  font-weight: 700;
}
.filter-aside__group-checklist .ui-check__tag-cancel {
  display: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.filter-aside__group-checklist .ui-check__input:checked + .ui-check__tag .ui-check__tag-cancel {
  display: inline-flex;
}
.filter-aside__group-checklist .ui-check__tag-cancel svg {
  width: 9px; height: 9px;
  color: #fff;
}

/* "Показать больше" / "Скрыть" — readmore-toggle ниже группы (центрирован) */
.filter-aside .ui-link[data-readmore-toggle],
.filter-aside__group .ui-link {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 14px auto 0;
  padding: 6px 14px;
  width: fit-content;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: #FF6B1A !important;
  background: rgba(255, 107, 26, .08);
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none !important;
  border-bottom: 0 !important;
  border: 0 !important;
}
.filter-aside .ui-link[data-readmore-toggle]:hover {
  color: #ff7e36 !important;
}
.filter-aside .ui-link[data-readmore-toggle] svg {
  width: 12px; height: 12px;
}

/* Auto-apply фильтра — кнопку «Показать» скрываем (применяется автоматически по change) */
.filter-aside #button-filter,
.filter-aside .filter-aside__more,
.filter-aside .filter-aside__more button {
  display: none !important;
}

/* === Range slider (цена) === */
.filter-aside .ui-range {
  padding: 0;
}
.filter-aside .ui-range .row {
  margin: 0 -4px 14px;
  display: flex;
  gap: 8px;
}
.filter-aside .ui-range .col-6 {
  flex: 1;
  padding: 0 4px;
}
.filter-aside .ui-range__field {
  position: relative;
  background: #f1f4f9;
  border: 1.5px solid #e2e8ed;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.filter-aside .ui-range__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700;
  font-size: 12px;
  color: #0F2A52;
  width: 100%;
  padding: 0;
  outline: 0;
  text-align: left;
}
.filter-aside .ui-range__input:disabled {
  color: #0F2A52;
  -webkit-text-fill-color: #0F2A52;
  opacity: 1;
}
.filter-aside .ui-range__append {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #5a6577;
  flex-shrink: 0;
}

/* irs (range library) — kk цвета */
.filter-aside .irs--flat .irs-line { background: #e2e8ed; height: 4px; border-radius: 4px; top: 24px; }
.filter-aside .irs--flat .irs-bar { background: #FF6B1A; height: 4px; border-radius: 4px; top: 24px; }
.filter-aside .irs--flat .irs-handle {
  width: 18px; height: 18px;
  background: #fff;
  border: 2px solid #FF6B1A;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 42, 82, .12);
  top: 17px;
  cursor: pointer;
}
.filter-aside .irs--flat .irs-handle > i { display: none; }
.filter-aside .irs--flat .irs-handle:hover { transform: scale(1.1); }
.filter-aside .irs--flat .irs-handle.state_hover {
  border-color: #ff7e36;
}
.filter-aside .irs--flat .irs-from,
.filter-aside .irs--flat .irs-to,
.filter-aside .irs--flat .irs-single,
.filter-aside .irs--flat .irs-min,
.filter-aside .irs--flat .irs-max { display: none !important; }

/* Submit-кнопка фильтра «Показать» (id=button-filter) — orange kk-стиль */
.filter-aside #button-filter,
.filter-aside #button-filter.ui-btn--primary,
.filter-aside .ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  color: #fff !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 10px !important;
  padding: 11px 22px !important;
  height: auto !important;
  min-height: 42px;
  margin: 8px 18px 16px;
  width: calc(100% - 36px);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.filter-aside #button-filter:hover,
.filter-aside .ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 107, 26, .35);
}

/* Sticky sidebar в category page */
@media (min-width: 1200px) {
  .catalog .filter-aside {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  .catalog .filter-aside::-webkit-scrollbar { width: 6px; }
  .catalog .filter-aside::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }
  .filter-aside__toggle { display: none; }
  .filter-aside__close { display: none; }
}

/* Mobile offcanvas */
@media (max-width: 1199px) {
  .filter-aside {
    background: transparent;
    padding: 0;
    margin: 0 0 1rem;
  }
  .filter-aside__offcanvas {
    position: fixed;
    inset: 0 15% 0 0;
    z-index: 9999;
    background: #fff;
    padding: 1.5rem 2rem 9rem;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-radius: 0;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(15,42,82,.18);
  }
  /* JS флипает is-filter-open на <html>; селектор должен совпадать */
  html.is-filter-open .filter-aside__offcanvas {
    transform: translateX(0);
  }
  .filter-aside__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Стрелка в toggle: оригинал app.css ставит position:absolute → налазит на текст.
     Возвращаем в нормальный flow flex */
  .filter-aside__toggle svg {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;
  }
  /* Разъёмы и пр. длинные значения: pill в столбец, каждый pill полной ширины с переносом */
  .filter-aside__group-checklist {
    flex-direction: column;
  }
  .filter-aside__group-checklist > li,
  .filter-aside__group-checklist .ui-check {
    width: 100%;
  }
  .filter-aside__group-checklist .ui-check__tag {
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================
   Categories sidebar (.categories-aside) — kk-стиль
   Та же эстетика что .filter-aside: белая карточка + voздух 3rem
   ========================================================== */
.categories-aside {
  font-family: 'Onest', sans-serif;
  margin: 0 0 2rem;
  background: #fff;
  border-radius: 10px;
  padding: 3rem;
}
.categories-aside__offcanvas { background: transparent; padding: 0; border: 0; }
.categories-aside__offcanvas-in { padding: 0; }

/* Заголовок «Категории» */
.categories-aside__title,
.categories-aside .h2.categories-aside__title {
  display: block !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #0F2A52 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #f0f3f7;
}

/* Список категорий */
.categories-aside__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.categories-aside__menu > li {
  list-style: none;
  position: relative;
}

/* Ссылка верхнего уровня — перебиваем prostore default (#F7F7FB pill, padding 1rem 4rem) */
.categories-aside__link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px !important;
  min-height: 0 !important;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #0F2A52 !important;
  text-decoration: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  letter-spacing: -0.1px;
  line-height: 1.3;
  transition: background .15s, color .15s;
  border: 0 !important;
  border-bottom: 0 !important;
}
.categories-aside__link::after {
  display: none !important;
  content: none !important;
}
.categories-aside__link:hover {
  background: rgba(255, 107, 26, .08) !important;
  color: #FF6B1A !important;
}

/* Active (текущая страница) */
.categories-aside__menu > li.is-active > .categories-aside__link,
.categories-aside__menu > li.active > .categories-aside__link {
  background: #FF6B1A;
  color: #fff !important;
  font-weight: 700;
}

/* is-open — раскрытый dropdown */
.categories-aside__menu > li.is-open > .categories-aside__link {
  background: rgba(255, 107, 26, .08);
  color: #FF6B1A !important;
  font-weight: 700;
}

/* Стрелка-шеврон → */
.categories-aside__link span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.categories-aside__link span svg {
  width: 12px; height: 12px;
  color: #94a3b8;
  transition: transform .2s, color .15s;
}
.categories-aside__link:hover span svg { color: #FF6B1A; }
.categories-aside__menu > li.is-open > .categories-aside__link span svg {
  transform: rotate(90deg);
  color: #FF6B1A;
}

/* Dropdown (под пунктом, как accordion) */
.categories-aside__dropdown {
  display: none;
  padding: 4px 0 8px 12px;
  margin: 0;
}
.categories-aside__menu > li.is-open > .categories-aside__dropdown {
  display: block;
}

/* «Назад» в mobile drawer */
.categories-aside__back {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #5a6577;
  margin: 0 0 8px;
  cursor: pointer;
}
.categories-aside__back svg {
  width: 12px; height: 12px;
  transform: rotate(180deg);
}

/* Submenu (вложенные пункты) */
.categories-aside__submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 2px solid #f0f3f7;
}
.categories-aside__submenu > li { list-style: none; position: relative; }

.categories-aside__sublink {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px 7px 14px;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #5a6577 !important;
  text-decoration: none !important;
  border-radius: 6px;
  line-height: 1.35;
  letter-spacing: -0.1px;
  transition: background .15s, color .15s;
  border: 0 !important;
  border-bottom: 0 !important;
}
.categories-aside__sublink:hover {
  color: #FF6B1A !important;
  background: rgba(255, 107, 26, .06);
}
.categories-aside__sublink svg {
  width: 10px; height: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}
.categories-aside__sublink:hover svg { color: #FF6B1A; }

/* «Показать все» — отдельный стиль */
.categories-aside__sublink--show_all {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: #FF6B1A !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
  padding: 6px 10px 6px 14px !important;
}
.categories-aside__sublink--show_all:hover {
  color: #ff7e36 !important;
}
.categories-aside__sublink--show_all::after {
  content: "→";
  margin-left: auto;
  font-size: 12px;
}

/* Dropright (3-й уровень) — inline accordion без второй "рамки в рамке".
   Submenu уже имеет border-left, dropright идёт без него — только отступ. */
.categories-aside__dropright {
  position: static !important;
  display: none;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0 4px 12px !important;
  margin: 2px 0 4px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: auto !important;
}
.categories-aside__dropright .categories-aside__submenu {
  border-left: 0 !important;
}
.categories-aside__dropright::before {
  display: none !important;
  content: none !important;
}
.categories-aside__submenu > li.is-open > .categories-aside__dropright,
.categories-aside__submenu > li:hover > .categories-aside__dropright {
  display: block;
}
.categories-aside__dropright .categories-aside__back {
  display: none !important;
}

/* Кнопка «Закрыть» (mobile only) */
.categories-aside__close {
  display: none;
  width: 100%;
  margin: 16px 0 0;
  padding: 10px 14px;
  background: #f1f4f9;
  border: 0;
  border-radius: 8px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0F2A52;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
}
.categories-aside__close:hover {
  background: rgba(255, 107, 26, .12);
  color: #FF6B1A;
}

@media (min-width: 1200px) {
  .categories-aside__close { display: none; }
}
@media (max-width: 1199px) {
  .categories-aside__close { display: block; }
}

/* ==========================================================
   GLOBAL: убираем оранжевый контур при клике/тапе
   - tap-highlight на тач-устройствах
   - hover-state, который "залипает" после клика мышью на десктопе
   - outline на focused anchor/button внутри карточек
   ========================================================== */
.products__item,
.products__item a,
.products__item button,
.kk-fresh__card,
.kk-build__step,
.kk-footer a,
.kk-lead a,
.kk-lead button {
  -webkit-tap-highlight-color: transparent;
}

/* Снимаем orange focus/active состояния — клик не должен оставлять контур */
.products__item:focus,
.products__item:focus-within,
.products__item:active,
.products__item a:focus,
.products__item a:active,
.products__item button:focus,
.products__item button:active {
  outline: 0 !important;
  border-color: #e2e8ed !important;
  box-shadow: none !important;
}

/* Hover-state применяем только на устройствах с реальным hover (мышка),
   на тачскринах не "залипает" после тапа */
@media (hover: none) {
  .products__item:hover {
    border-color: #e2e8ed !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .products__item:hover .products__item-title {
    color: #0F2A52 !important;
  }
}

/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* === HOME-V2 === Главная редизайн под ноутбуки */
/* === Добавлено 2026-05-05 === */
/* ============================================ */

/* === Container / btn / hero base (восстанавливаем после переписи home.twig) === */
.kk-container{max-width:1320px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.kk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:700;text-decoration:none;border-radius:10px;transition:all .2s;border:2px solid transparent;cursor:pointer;line-height:1;letter-spacing:.02em}
.kk-btn--primary{background:#FF6B1A;color:#fff}
.kk-btn--primary:hover{background:#FF8A47;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,26,.4)}
.kk-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.kk-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none;border-color:#fff}
.kk-hero{background:linear-gradient(135deg,#0A1F44 0%,#0F2A52 20%,#193B6E 40%,#2D4A7E 55%,#193B6E 70%,#0F2A52 85%,#0A1F44 100%);background-size:300% 300%;animation:kkBlueShift 14s ease-in-out infinite;color:#fff;padding:60px 0 40px;position:relative;overflow:hidden}
@keyframes kkBlueShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){.kk-hero{animation:none;background:linear-gradient(135deg,#0A1F44,#193B6E)}}
.kk-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(255,107,26,.12) 0%,transparent 60%);pointer-events:none}
.kk-hero > .kk-container{position:relative;z-index:1}

/* === Sections === */
.kk-section{padding:64px 0}
.kk-section--gradient{background:linear-gradient(180deg,#fff 0%,#F5F7FA 100%)}
.kk-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.kk-section__head > div{min-width:0}
.kk-section__title{font-family:'Onest',system-ui,sans-serif;font-weight:900;font-size:38px;color:#0F2A52;letter-spacing:-.02em;line-height:1.1;margin:0}
.kk-section__sub{color:#94a3b8;font-size:15px;margin:8px 0 0}
.kk-section__link{color:#FF6B1A;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.kk-section__link:hover{color:#FF6B1A;text-decoration:underline}

/* === HERO V2 === */
.kk-hero--v2{padding:60px 0 70px;border-radius:0 0 32px 32px}
.kk-hero--v2 .kk-hero__grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center}
.kk-hero--v2 .kk-hero__grid > *{min-width:0}

.kk-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,107,26,.18);border:1px solid rgba(255,107,26,.35);padding:8px 16px;border-radius:99px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#FFB182;margin-bottom:24px}
.kk-hero__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e}

.kk-hero--v2 .kk-hero__title{font-family:'Onest',system-ui,sans-serif;font-weight:900;font-size:52px;line-height:1.05;letter-spacing:-.025em;margin:0 0 18px;color:#fff}
.kk-hero--v2 .kk-hero__title b{color:#FF6B1A;font-weight:900}
.kk-hero--v2 .kk-hero__subtitle{font-size:17px;color:rgba(255,255,255,.78);margin:0 0 32px;max-width:580px;line-height:1.5}

.kk-hero--v2 .kk-hero__features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;margin:0 0 32px;padding:0;list-style:none;max-width:580px}
.kk-hero--v2 .kk-hero__feature{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.85)}
.kk-hero--v2 .kk-hero__feature::before{display:none}
.kk-hero--v2 .kk-hero__feature svg{flex-shrink:0;margin-top:2px}
.kk-hero--v2 .kk-hero__feature strong{display:block;color:#fff;font-weight:700;font-size:15px;margin-bottom:2px}

.kk-hero--v2 .kk-hero__cta{margin:0 0 36px;display:flex;flex-wrap:wrap;gap:12px}
.kk-hero--v2 .kk-hero__contact{padding-top:24px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;gap:8px;font-size:14px;color:rgba(255,255,255,.85)}
.kk-hero--v2 .kk-hero__contact strong{color:#fff;font-weight:800}
.kk-hero--v2 .kk-hero__contact a{color:#fff;font-weight:700;text-decoration:none}
.kk-hero--v2 .kk-hero__contact a:hover{color:#FF6B1A}

/* === HERO Carousel === */
.kk-hero__carousel{position:relative;width:100%;min-width:0}
.kk-hero__carousel-track{display:flex;gap:0;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;border-radius:24px;width:100%;min-width:0}
.kk-hero__carousel-track::-webkit-scrollbar{display:none}
.kk-hero__product{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;position:relative;background:#fff;border-radius:24px;padding:28px 28px 50px;box-shadow:0 24px 60px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:16px;overflow:hidden;min-height:560px;color:#1A1A1A}
.kk-hero__product::before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;background:radial-gradient(circle,rgba(255,107,26,.18),transparent 70%);border-radius:50%;pointer-events:none}
.kk-hero__product-badges{display:flex;gap:8px;align-items:center;position:relative;z-index:1;flex-wrap:wrap}
.kk-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:99px;line-height:1}
.kk-badge--orange{background:#FF6B1A;color:#fff}
.kk-badge--ghost{background:#fff;color:#0F2A52;border:1px solid #e2e8ed}
.kk-badge--navy{background:#0F2A52;color:#fff}

.kk-hero__product-img{position:relative;background:linear-gradient(180deg,#fafbfd 0%,#f0f3f7 100%);border-radius:16px;padding:24px;height:220px;display:flex;align-items:center;justify-content:center;z-index:1}
.kk-hero__product-img img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(15,42,82,.18))}
.kk-hero__product-img::after{content:"";position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:60%;height:14px;background:radial-gradient(ellipse,rgba(15,42,82,.25),transparent 70%);filter:blur(4px);z-index:-1}
.kk-hero__product-info{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.kk-hero__product-brand{font-size:10px;color:#94a3b8;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.kk-hero__product-name{font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:18px;color:#0F2A52;line-height:1.25;letter-spacing:-.01em}
.kk-hero__product-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kk-hero__product-spec{background:#f0f3f7;color:#0F2A52;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px}
.kk-hero__product-price{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid #e2e8ed;position:relative;z-index:1}
.kk-hero__product-price-main{font-family:'Onest',system-ui,sans-serif;font-weight:900;font-size:32px;color:#0F2A52;letter-spacing:-.025em;line-height:1}
.kk-hero__product-price-credit{font-size:13px;color:#1A1A1A}
.kk-hero__product-price-credit strong{color:#FF6B1A;font-weight:800}
.kk-hero__product-price-credit small{display:block;color:#94a3b8;font-size:11px;margin-top:2px;font-weight:500}
.kk-hero__product-cta{display:flex;gap:10px;align-items:center;position:relative;z-index:1;margin-top:auto}
.kk-hero__product-cta .kk-btn{flex:1;padding:14px 20px;font-size:14px}
.kk-hero__product-cta-link{font-size:12px;color:#0F2A52;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;padding:8px 4px;text-decoration:none}
.kk-hero__product-cta-link:hover{color:#FF6B1A}
.kk-hero__product-tip{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(15,42,82,.04) 0%,rgba(255,107,26,.06) 100%);padding:10px 28px;font-size:11px;color:#0F2A52;font-weight:600;display:flex;align-items:center;gap:8px}
.kk-hero__product-tip::before{content:"";width:6px;height:6px;background:#22c55e;border-radius:50%;box-shadow:0 0 8px #22c55e;flex-shrink:0}

.kk-hero__carousel-controls{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}
.kk-hero__carousel-btn{pointer-events:auto;width:44px;height:44px;border-radius:50%;background:#fff;color:#0F2A52;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:all .2s;border:none;cursor:pointer;flex-shrink:0;padding:0}
.kk-hero__carousel-btn:hover{background:#FF6B1A;color:#fff;transform:scale(1.08)}
.kk-hero__carousel-btn:disabled{opacity:.35;cursor:not-allowed}
.kk-hero__carousel-btn:disabled:hover{background:#fff;color:#0F2A52;transform:none}
.kk-hero__carousel-btn--prev{margin-left:-22px}
.kk-hero__carousel-btn--next{margin-right:-22px}
.kk-hero__carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.kk-hero__carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .2s;border:none;padding:0}
.kk-hero__carousel-dot:hover{background:rgba(255,255,255,.55)}
.kk-hero__carousel-dot.is-active{background:#FF6B1A;width:28px;border-radius:99px}
.kk-hero__carousel-counter{position:absolute;top:14px;right:14px;background:rgba(15,42,82,.85);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:99px;letter-spacing:.05em;backdrop-filter:blur(6px);z-index:5}

/* === Карточки на главной (kk-card) === */
.kk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.kk-card{background:#fff;border-radius:16px;border:1px solid #e2e8ed;overflow:hidden;display:flex;flex-direction:column;transition:all .25s;position:relative;text-decoration:none;color:#1A1A1A}
.kk-card:hover{border-color:#FF6B1A;transform:translateY(-3px);box-shadow:0 12px 32px rgba(15,42,82,.08);text-decoration:none;color:#1A1A1A}
.kk-card__badge{position:absolute;top:14px;left:14px;background:#FF6B1A;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:99px;z-index:2}
.kk-card__badge--navy{background:#0F2A52}
.kk-card__img{aspect-ratio:1/1;background:#fafbfd;display:flex;align-items:center;justify-content:center;padding:24px;border-bottom:1px solid #e2e8ed}
.kk-card__img img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.kk-card__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;gap:10px}
.kk-card__brand{font-size:10px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.kk-card__title{font-weight:600;font-size:14px;color:#0F2A52;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.kk-card__specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.kk-card__spec{font-size:11px;color:#0F2A52;background:#f0f3f7;padding:4px 9px;border-radius:6px;font-weight:600}
.kk-card__bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #e2e8ed}
.kk-card__price{font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:20px;color:#0F2A52;letter-spacing:-.02em}
.kk-card__price small{display:block;font-size:11px;color:#94a3b8;font-weight:500;margin-top:-2px}
.kk-card__cta{background:#FF6B1A;color:#fff;padding:8px 14px;border-radius:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.kk-card:hover .kk-card__cta{background:#FF8A47}

/* === Use cases === */
.kk-use-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kk-use-case{background:#fff;border:2px solid #e2e8ed;border-radius:18px;padding:32px 24px;text-align:center;transition:all .25s;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;color:#1A1A1A}
.kk-use-case:hover{border-color:#FF6B1A;transform:translateY(-4px);box-shadow:0 16px 40px rgba(255,107,26,.12);text-decoration:none;color:#1A1A1A}
.kk-use-case__icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#0F2A52 0%,#193B6E 100%);display:flex;align-items:center;justify-content:center;color:#FF6B1A}
.kk-use-case:hover .kk-use-case__icon{background:linear-gradient(135deg,#FF6B1A 0%,#FF8A47 100%);color:#fff}
.kk-use-case__title{font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:18px;color:#0F2A52}
.kk-use-case__sub{font-size:13px;color:#94a3b8;line-height:1.4}
.kk-use-case__count{font-size:12px;color:#FF6B1A;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:auto}

/* === Build PC block === */
.kk-build{background:linear-gradient(135deg,#0A1F44 0%,#0F2A52 50%,#193B6E 100%);color:#fff;border-radius:24px;padding:60px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.kk-build::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,107,26,.18),transparent 70%);pointer-events:none}
.kk-build__main{position:relative;z-index:1}
.kk-build__title{font-family:'Onest',system-ui,sans-serif;font-weight:900;font-size:38px;line-height:1.1;letter-spacing:-.02em;margin:0 0 18px;color:#fff}
.kk-build__title b{color:#FF6B1A;font-weight:900}
.kk-build__sub{color:rgba(255,255,255,.78);font-size:16px;margin:0 0 28px;max-width:480px;line-height:1.5}
.kk-build__points{display:grid;gap:14px;margin-bottom:28px}
.kk-build__point{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.88)}
.kk-build__point::before{content:"";flex-shrink:0;width:8px;height:8px;background:#FF6B1A;transform:rotate(45deg);margin-top:7px}
.kk-build__pricing{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px;backdrop-filter:blur(6px);position:relative;z-index:1}
.kk-build__price-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);gap:12px}
.kk-build__price-row:last-child{border-bottom:none}
.kk-build__price-row span:first-child{color:rgba(255,255,255,.75);font-size:14px}
.kk-build__price-row span:last-child,.kk-build__price-row strong{font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:18px;color:#fff}
.kk-build__price-free{color:#FF6B1A !important}

/* === Steps "Как купить" === */
.kk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.kk-step{background:#fff;border:1px solid #e2e8ed;border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:10px;transition:all .25s}
.kk-step:hover{border-color:#FF6B1A;transform:translateY(-3px)}
.kk-step__num{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#FF6B1A,#FF8A47);color:#fff;font-family:'Onest',system-ui,sans-serif;font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.kk-step__title{font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:16px;color:#0F2A52}
.kk-step__sub{font-size:13px;color:#94a3b8;line-height:1.5}

/* === Secondary categories === */
.kk-sec-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kk-sec-cat{background:#fff;border:1px solid #e2e8ed;border-radius:14px;padding:24px;display:flex;align-items:center;gap:16px;transition:all .2s;text-decoration:none;color:#1A1A1A}
.kk-sec-cat:hover{border-color:#FF6B1A;transform:translateY(-2px);text-decoration:none;color:#1A1A1A}
.kk-sec-cat__ico{width:48px;height:48px;border-radius:12px;background:#f0f3f7;display:flex;align-items:center;justify-content:center;color:#0F2A52;flex-shrink:0}
.kk-sec-cat:hover .kk-sec-cat__ico{background:#FF6B1A;color:#fff}
.kk-sec-cat__txt strong{display:block;font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:16px;color:#0F2A52;margin-bottom:2px}
.kk-sec-cat__txt span{font-size:12px;color:#94a3b8}

/* === USP strip === */
.kk-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#0F2A52;border-radius:20px;overflow:hidden;color:#fff}
.kk-usp__item{padding:32px 24px;display:flex;gap:16px;align-items:center;border-right:1px solid rgba(255,255,255,.08)}
.kk-usp__item:last-child{border-right:none}
.kk-usp__item svg{flex-shrink:0;color:#FF6B1A}
.kk-usp__item strong{display:block;font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:16px;margin-bottom:2px;color:#fff}
.kk-usp__item span{font-size:12px;color:rgba(255,255,255,.7)}

/* === Responsive === */
@media (max-width:1080px){
  .kk-hero--v2 .kk-hero__grid{grid-template-columns:1fr}
  .kk-hero--v2 .kk-hero__title{font-size:42px}
  .kk-build{grid-template-columns:1fr;padding:40px}
  .kk-cards,.kk-steps{grid-template-columns:repeat(2,1fr)}
  .kk-use-cases,.kk-sec-cats{grid-template-columns:repeat(2,1fr)}
  .kk-section__title{font-size:30px}
}
@media (max-width:680px){
  .kk-section{padding:48px 0}
  .kk-hero--v2{padding:40px 0 50px;border-radius:0 0 20px 20px}
  .kk-hero--v2 .kk-hero__title{font-size:32px}
  .kk-hero--v2 .kk-hero__features{grid-template-columns:1fr}
  .kk-section__title{font-size:24px}

  /* === Карточки ноутбуков → горизонтальный swipe === */
  .kk-cards{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:8px 20px 16px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .kk-cards::-webkit-scrollbar{display:none}
  .kk-card{flex:0 0 75%;max-width:75%;min-width:0;scroll-snap-align:start}
  .kk-card__title{font-size:13px;-webkit-line-clamp:3;min-height:3.9em}
  .kk-card__bottom{flex-direction:column;align-items:stretch;gap:10px}
  .kk-card__price{font-size:18px;white-space:nowrap}
  .kk-card__price small{font-size:10px}
  .kk-card__cta{width:100%;justify-content:center;padding:10px 14px}

  /* === Что ещё есть — горизонтальный swipe === */
  .kk-sec-cats{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
  .kk-sec-cats::-webkit-scrollbar{display:none}
  .kk-sec-cat{flex:0 0 75%;max-width:75%;min-width:0}
  .kk-sec-cat__txt{min-width:0;flex:1}
  .kk-sec-cat__txt strong{word-wrap:break-word}

  /* === Use-cases / Steps остаются 2x2 === */
  .kk-use-cases,.kk-steps{grid-template-columns:1fr 1fr;gap:12px}
  .kk-use-case,.kk-step{padding:24px 16px}

  /* === USP полоса 1 колонка (4 строки) на mobile === */
  .kk-usp{grid-template-columns:1fr;border-radius:16px}
  .kk-usp__item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:18px 22px}
  .kk-usp__item:last-child{border-bottom:none}

  /* === Сборка ПК === */
  .kk-build{padding:32px 24px;gap:28px}
  .kk-build__title{font-size:26px}

  /* === Hero carousel === */
  .kk-hero__product{padding:24px 24px 46px;min-height:520px}
  .kk-hero__carousel-btn{width:36px;height:36px}
  .kk-hero__carousel-btn--prev{margin-left:-12px}
  .kk-hero__carousel-btn--next{margin-right:-12px}
}
/* ============================================ */
/* === DESIGN-04 === Specs chips на карточке  === */
/* === Добавлено 2026-05-05 === */
/* ============================================ */

.products__item-specs{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:8px 16px 4px;
  min-height:24px;
}
.products__item-spec{
  font-size:11px;
  font-weight:600;
  color:#0F2A52;
  background:#f0f3f7;
  padding:3px 9px;
  border-radius:6px;
  white-space:nowrap;
  letter-spacing:.01em;
  line-height:1.4;
}
.products__item:hover .products__item-spec{
  background:#fff;
  border:1px solid #FFE4D1;
}

/* На мобиле — компактнее */
@media (max-width:680px){
  .products__item-specs{margin:6px 12px 2px;gap:4px}
  .products__item-spec{font-size:10px;padding:2px 7px}
}

/* DESIGN-04 fix: hide empty specs container (when group 17 exists but no whitelisted attrs) */
.products__item-specs:empty{display:none}

/* ================================================ */
/* === DESIGN-04 v2 — hover-скачок + дивайдеры === */
/* === Добавлено 2026-05-06 === */
/* ================================================ */

/* 1. Отделение картинки от тела карточки (как kk-card__img на главной) */
.products__item-image,
.products__item-gallery {
  background: #fafbfd;
  border-bottom: 1px solid #e2e8ed;
}

/* 2. Chip — border всегда (transparent), hover меняет только цвет — нет скачка */
.products__item-spec {
  border: 1px solid transparent;
}
.products__item:hover .products__item-spec {
  background: #fff;
  border-color: #FFE4D1;
  border-width: 1px;
  border-style: solid;
}

/* 3. Полосочка под chips перед ценой */
.products__item-specs {
  margin: 10px 16px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8ed;
}
.products__item-specs:empty {
  display: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* На мобиле полоска тоньше, отступы меньше */
@media (max-width:680px){
  .products__item-specs {
    margin: 8px 12px 10px;
    padding-bottom: 10px;
  }
}

/* ================================================ */
/* === DESIGN-04 v2.1 — bottom-row фикс === */
/* === overflow + размер кнопки + выравнивание === */
/* ================================================ */

/* 1. Карточка — auto-высота вместо фикс 44.1rem (chips добавили высоту) */
.products__item {
  height: auto !important;
  min-height: 44.1rem;
}

/* 2. Кнопка — компактнее (как .kk-card__cta на главной) */
.products__item .ui-add-to-cart .ui-btn--primary,
.products__item .ui-add-to-cart > .ui-btn--primary {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  letter-spacing: .5px;
  gap: 6px;
}
.products__item .ui-add-to-cart .ui-btn--primary svg {
  width: 12px; height: 12px;
}

/* 3. Цена и action — высота 32px (была 38px), margin-top пересчитан */
.products__item .products__item-price {
  height: 32px;
}
.products__item .products__item-action,
.products__item:hover .products__item-action {
  margin: -32px 0 0 !important;
  height: 32px;
}

/* 4. Внутренний padding action чтобы кнопка не упиралась в границу карточки */
.catalog .products__item-in {
  padding-bottom: 16px;
}

/* ================================================ */
/* === DESIGN-04 v2.2 — выравнивание price/CTA === */
/* === Цена и кнопка на одну линию с chips (16px) === */
/* ================================================ */

.products__item .products__item-price {
  margin: 0 16px !important;
}
.products__item .products__item-action,
.products__item:hover .products__item-action {
  margin: -32px 16px 0 !important;
}

@media (max-width:680px){
  .products__item .products__item-price {
    margin: 0 12px !important;
  }
  .products__item .products__item-action,
  .products__item:hover .products__item-action {
    margin: -32px 12px 0 !important;
  }
}

/* === DESIGN-04 v2.3 — унификация горизонтальных отступов на 16px === */
.products__item-status {
  margin-left: 16px !important;
}
.products__item-title {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

@media (max-width:680px){
  .products__item-status {
    margin-left: 12px !important;
  }
  .products__item-title {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* === DESIGN-04 v2.4 — Код товара отступ === */
.products__item-id {
  margin-left: 37px !important;
}

/* === DESIGN-04 v2.5 — mobile: кнопка купить не вылезает === */
@media (max-width:680px){
  .products__item .products__item-action,
  .products__item:hover .products__item-action {
    position: static !important;
    margin: -32px 12px 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 24px);
    overflow: visible;
  }
  .products__item .ui-add-to-cart .ui-btn--primary {
    padding: 0 12px !important;
    max-width: 100%;
  }
}

/* === DESIGN-04 v2.6 — orange покрывает кнопку целиком === */
/* Убиваем prostore ::after overlay и space-between (текст/svg к центру) */
.products__item .ui-add-to-cart .ui-btn--primary,
.products__item .ui-add-to-cart > .ui-btn--primary {
  justify-content: center !important;
  width: auto !important;
}
.products__item .ui-add-to-cart .ui-btn--primary::after,
.products__item .ui-add-to-cart .ui-btn--primary::before {
  display: none !important;
  content: none !important;
}

/* === DESIGN-05 v2 — Mobile: характеристики в табе «О товаре» — 2 атрибута в ряд (label сверху, value снизу) === */
/* Перебиваем app.css:12643 (display:block разваливает таблицу в столбец).
   Идея: tbody → grid 2 колонки, каждый <tr> → flex column (как ячейка sku__details-table). */
@media (max-width: 767px) {
  .details__specifications-table {
    display: block !important;
    width: 100%;
    table-layout: auto;
  }
  .details__specifications-table thead { display: none !important; }
  .details__specifications-table tbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
  }
  .details__specifications-table tr {
    display: flex !important;
    flex-direction: column;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f3f7 !important;
    min-width: 0;
  }
  /* Группа с 1 атрибутом ИЛИ нечётным кол-вом — оставляем в первой колонке (50% width).
     Так single-attr group визуально гармонична с 2-col группами выше: высота row
     одинаковая, нет «ступеньки» от перехода 50/50 → 100%. Правая половина пустая. */
  .details__specifications-table tbody tr:only-child,
  .details__specifications-table tbody tr:last-child:nth-child(odd) {
    grid-column: 1 / 2;
  }
  /* Длинные значения (Разъёмы, длинные списки, и т.п.) — full-width на 2 колонки,
     иначе текст рвётся уродливо в узкой col 1.
     Twig-class работает для plain values; AttributePro перерисовывает <td> через JS
     после load → class теряется. Используем :has() (реактивный) для AttributePro <ul>. */
  .details__specifications-table tbody tr.long-value,
  .details__specifications-table tbody tr:has(.attributipro-multi-values) {
    grid-column: 1 / -1 !important;
  }
  /* AttributePro дробит длинное значение на <li>-список, что плодит лишние строки.
     Делаем inline — выглядит как непрерывный текст с пробелами.
     padding/margin с !important — theme/AttributePro CSS даёт padding-left, бьём специфичностью. */
  .attributipro-multi-values,
  .details__specifications-table td > .attributipro-multi-values {
    display: inline !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
  }
  .attributipro-multi-values li {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .attributipro-multi-values li + li::before {
    content: ' ';
  }
  /* AttributePro / theme-prostore оборачивают значение в `<i class=""></i>` —
     заглушка под иконку tooltip. Пустой <i> + пробелы вокруг создают визуальное
     смещение текста вправо. Прячем пустые <i>, видимые (с классом) оставляем. */
  .details__specifications-table th i:empty,
  .details__specifications-table td i:empty,
  .details__specifications-table-line i:empty {
    display: none !important;
  }
  /* Иконка с классом (tooltip/info) — компактный inline без распирания строки */
  .details__specifications-table th i[class]:not(:empty),
  .details__specifications-table td i[class]:not(:empty),
  .details__specifications-table-line i[class]:not(:empty) {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 4px 0 0;
    width: auto;
    height: auto;
  }
  .details__specifications-table th,
  .details__specifications-table td,
  .details__specifications-table th:first-child,
  .details__specifications-table td:first-child,
  .details__specifications-table th:last-child,
  .details__specifications-table td:last-child {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    background: transparent !important;
    word-break: break-word;
  }
  .details__specifications-table th {
    color: #5a6577 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
    letter-spacing: 0;
  }
  .details__specifications-table td {
    color: #0F2A52 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  /* span внутри <th> — отключить flex с дашед-линией (это для десктопа) */
  .details__specifications-table-line {
    display: inline !important;
    background: none !important;
    padding: 0 !important;
  }
  .details__specifications-table-line:after {
    display: none !important;
    content: none !important;
  }
  /* группа атрибутов на мобиле — full width одна за другой */
  .details__specifications .col-xl-6,
  .details__specifications .col-xl-12 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Заголовок группы атрибутов (Основные/Процессор/...) — orange underline как в десктопе */
  .details__specifications-title {
    font-family: 'Onest', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0F2A52 !important;
    margin: 18px 0 12px !important;
    padding: 0 0 6px !important;
    border-bottom: 2px solid #FF6B1A !important;
    display: inline-block;
    text-transform: none;
    letter-spacing: -0.2px;
  }
}

/* === DESIGN-06 — Mobile: «Вы смотрели» свайпер ширины слайдов === */
/* JS init (.js-swiper-products) хардкодит slidesPerView:'auto', читает CSS width.
   Тема даёт slide width: 34rem (340px) с max-width:100% → на узких 1 карта.
   Перебиваем ширину под breakpoints с пиком следующей карточки. */
@media (max-width: 560px) {
  .swiper-products > .swiper-wrapper > .swiper-slide,
  .swiper-products.swiper-container-initialized > .swiper-wrapper > .swiper-slide {
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: 84% !important;
    margin-right: 12px !important;
  }
}
@media (min-width: 561px) and (max-width: 991px) {
  .swiper-products > .swiper-wrapper > .swiper-slide,
  .swiper-products.swiper-container-initialized > .swiper-wrapper > .swiper-slide {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    margin-right: 16px !important;
  }
}
@media (min-width: 992px) and (max-width: 1198px) {
  .swiper-products > .swiper-wrapper > .swiper-slide,
  .swiper-products.swiper-container-initialized > .swiper-wrapper > .swiper-slide {
    flex: 0 0 calc(33.333% - 12px) !important;
    width: calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
    margin-right: 18px !important;
  }
}

/* === DESIGN-07 v4 — Mobile: interactive accordion (закрыто по умолчанию, click toggle) === */
/* JS в footer.twig оборачивает каждую секцию в .kk-acc-toggle (header) + .kk-acc-body.
   Section = отдельная белая карточка с shadow, click на header → expand. */
@media (max-width: 767px) {
  /* Внешний контейнер `.details` — убираем white-bg/padding/shadow/radius,
     иначе будет белая карточка-в-карточке (детали-карточки уже имеют свой white) */
  .details {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Заголовок "О товаре" сидел в белом блоке — даём ему минимальный левый отступ */
  .details__h2 {
    padding: 0 4px 4px !important;
    margin: 0 0 12px !important;
  }
  /* Скрыть tab-row кнопки — на мобиле своя accordion-логика */
  .details__control { display: none !important; }

  /* Стек секций. Перебить theme position:absolute+visibility:hidden+opacity:0 */
  .details__tabs {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
  }
  .details__tabs > .details__tabs-content {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    /* Каждая секция — отдельная белая карточка */
    background: #fff !important;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 42, 82, .06);
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
  }
  /* Порядок секций: Характеристики → Описание → Вопросы → Оплата → Доставка */
  .details__tabs-content[data-tabs-content="specifications"] { order: 1; }
  .details__tabs-content[data-tabs-content="description"]    { order: 2; }
  .details__tabs-content[data-tabs-content="faq"]            { order: 3; }
  .details__tabs-content[data-tabs-content="payment"]        { order: 4; }
  .details__tabs-content[data-tabs-content="delivery"]       { order: 5; }

  /* Header (создаётся JS) — кнопка с заголовком + стрелкой */
  .kk-acc-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 800;
    color: #0F2A52;
    font-size: 18px;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }
  .kk-acc-toggle__label {
    display: inline-block;
    border-bottom: 2px solid #FF6B1A;
    padding-bottom: 4px;
  }
  .kk-acc-toggle__arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.25s ease;
    color: #5a6577;
  }
  .details__tabs-content.kk-acc--open .kk-acc-toggle__arrow {
    transform: rotate(180deg);
  }

  /* Body — collapsed по умолчанию, expand при .kk-acc--open */
  .kk-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0 18px;
  }
  .details__tabs-content.kk-acc--open .kk-acc-body {
    max-height: 8000px;
    padding: 0 18px 18px;
    transition: max-height 0.5s ease;
  }
  /* Скрыть встроенные .details__title (длинное "Характеристики Имя") — заголовок наш в .kk-acc-toggle__label */
  .kk-acc-body > .details__title {
    display: none;
  }
}

/* === DESIGN-10 — Mobile: хлебные крошки — truncate последнего пункта === */
/* Последний li (имя продукта) длинное и вылазит за viewport. Truncate ellipsis-ом. */
@media (max-width: 767px) {
  .breadcrumbs__menu {
    overflow: hidden !important;
  }
  .breadcrumbs__menu li:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .breadcrumbs__menu li:last-child a,
  .breadcrumbs__menu li:last-child span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
  }
}

/* === DESIGN-09 — убрать sticky-compact bar (всегда) === */
/* `.sku__compact` — sticky overlay при scroll (картинка + title + цена + Купить +
   дубль таб-навигации). На мобиле бесполезен (есть accordion ниже), на десктопе
   мешает (прилипает к шапке при листинге). По решению Тараса — скрыть глобально. */
.sku__compact { display: none !important; }

/* === DESIGN-11 — Карточки products__item: status pill + id выравнивание baseline === */
/* status (pill с padding) и id (plain text) в .products__item стояли inline-block
   с разной высотой. Visually смотрелось как «не параллельно». Выравниваем middle. */
.products__item-status,
.products__item-id {
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* === DESIGN-08 v2 — «Вы смотрели» карточки — выравнивание status/id (все viewports) === */
/* На category card (width ~354) status+id влезают в одну строку.
   На viewed/swiper card (width ~290) не влезают → id wrap'ит на след. строку и
   с marginLeft 37px (рассчитано на dock-right) висит «посередине».
   Для swiper/viewed — marginLeft 12px на всех viewports (flush left под status). */
.products-featured .products__item-id,
.swiper-products .products__item-id {
  margin-left: 12px !important;
}

/* ==========================================================
   CART-01 — Cart page (/cart) + Header cart slidebar
   2026-05-06: визуал в kk-стиле (navy header, orange CTA/total, Onest, soft shadows)
   Только цвета/типографика — layout не трогаем (positioning от темы рабочий)
   ========================================================== */

/* === Header cart slidebar (выезжает справа при добавлении товара) === */

.header__cart-overlay { background: rgba(15, 42, 82, .55) !important; }

.header__cart-offcanvas {
  background: #fff !important;
  font-family: 'Onest', sans-serif;
}

.header__cart-head {
  background: linear-gradient(135deg, #0F2A52 0%, #193B6E 100%) !important;
  padding: 22px 24px !important;
  border-bottom: 0 !important;
  margin: 0 !important;
}
.header__cart-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.header__cart-clear {
  color: rgba(255,255,255,.7) !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: transparent !important;
  border: 0 !important;
  transition: color .15s;
}
.header__cart-clear:hover { color: #FF6B1A !important; }
.header__cart-clear svg { width: 12px; height: 12px; }

.header__cart-close {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  transition: background .15s, color .15s;
}
.header__cart-close:hover {
  background: rgba(255,255,255,.12) !important;
  color: #FF6B1A !important;
}

.header__cart-body { background: #f8f9fb !important; padding: 16px !important; }

.header__cart-list { margin: 0 !important; padding: 0 !important; list-style: none; }
.header__cart-list > li { margin: 0 0 10px !important; }
.header__cart-list > li:last-child { margin: 0 !important; }

.header__cart-item {
  background: #fff !important;
  border: 1px solid #f0f3f7 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  transition: border-color .15s, box-shadow .15s;
}
.header__cart-item:hover {
  border-color: #FF6B1A !important;
  box-shadow: 0 4px 14px rgba(255,107,26,.12);
}
.header__cart-item-id {
  font-family: 'Onest', sans-serif !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600 !important;
}
.header__cart-item-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0F2A52 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}
.header__cart-item-title:hover { color: #FF6B1A !important; }

.header__cart-item-price-current {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #FF6B1A !important;
}
.header__cart-item-price-piece {
  color: #94a3b8 !important;
  font-size: 11px !important;
}

.header__cart-item-action-toggle {
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.header__cart-item-action-toggle:hover {
  background: rgba(15,42,82,.06) !important;
  color: #FF6B1A !important;
}
.header__cart-item-action-link {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #0F2A52 !important;
  background: transparent !important;
  border: 0 !important;
}
.header__cart-item-action-link:hover { color: #FF6B1A !important; }

.header__cart-data {
  background: #fff !important;
  padding: 18px 20px !important;
  border-top: 1px solid #f0f3f7 !important;
  margin: 0 !important;
}
.header__cart-data-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #5a6577 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin: 0 0 12px !important;
}
.header__cart-data-table { width: 100%; border-collapse: collapse; font-family: 'Onest', sans-serif; }
.header__cart-data-table tbody td {
  font-size: 13px !important;
  color: #5a6577 !important;
  padding: 4px 0 !important;
  font-weight: 500 !important;
}
.header__cart-data-table tfoot td {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #FF6B1A !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #f0f3f7;
}

.header__cart-data-action { margin: 16px 0 0 !important; }
.header__cart-data-action .ui-btn--primary,
.header__cart-data-action .ui-btn--fullwidth.ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.header__cart-data-action .ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,107,26,.35);
}

.header__cart-data-quick { margin: 12px 0 0 !important; }
.header__cart-data-quick .ui-btn--white {
  background: #f1f4f9 !important;
  color: #0F2A52 !important;
  border: 1.5px solid #e2e8ed !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
}
.header__cart-data-quick .ui-btn--white:hover {
  border-color: #FF6B1A !important;
  color: #FF6B1A !important;
  background: #fff !important;
}
.header__cart-data-quick-text {
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-align: center;
  margin: 8px 0 0 !important;
  line-height: 1.4 !important;
}

.header__cart-sticky {
  background: #fff !important;
  border-top: 1px solid #f0f3f7 !important;
  padding: 14px 16px !important;
  box-shadow: 0 -4px 14px rgba(15,42,82,.08);
}
.header__cart-sticky .ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.header__cart-sticky .ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
}

/* === Cart page (/cart) === */
.cart { font-family: 'Onest', sans-serif; }

.cart__title,
.cart .h2.cart__title {
  display: block !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: #0F2A52 !important;
  margin: 0 0 1.5rem !important;
  letter-spacing: -.5px;
  line-height: 1.2 !important;
}

.cart__list { margin: 0; padding: 0; list-style: none; }
.cart__list > li { margin: 0 0 10px !important; }

.cart__item {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(15,42,82,.06);
  transition: box-shadow .15s;
}
.cart__item:hover { box-shadow: 0 6px 20px rgba(15,42,82,.10); }

.cart__item-image { background: #f8f9fb !important; border-color: #f0f3f7 !important; border-radius: 10px !important; }
.cart__item-image img { object-fit: contain; }

.cart__item-id {
  font-family: 'Onest', sans-serif !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600 !important;
}

.cart__item-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #0F2A52 !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}
.cart__item-title:hover { color: #FF6B1A !important; }

.cart__item-price {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #FF6B1A !important;
}
.cart__item-price small {
  font-family: 'Onest', sans-serif !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

.cart__item-action-toggle {
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
}
.cart__item-action-toggle:hover {
  background: rgba(15,42,82,.06) !important;
  color: #FF6B1A !important;
}
.cart__item-action-link {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #0F2A52 !important;
  background: transparent !important;
  border: 0 !important;
}
.cart__item-action-link:hover { color: #FF6B1A !important; }

.cart__sidebar {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(15,42,82,.06);
  overflow: hidden;
}

.cart__data {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 24px 24px 16px !important;
  margin: 0 !important;
}
.cart__data-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #0F2A52 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #f0f3f7;
}
.cart__data-table { font-family: 'Onest', sans-serif; }
.cart__data-table th, .cart__data-table td {
  font-size: 14px !important;
  color: #5a6577 !important;
  padding: 7px 0 !important;
  font-weight: 500 !important;
}
.cart__data-table tfoot tr:first-child th,
.cart__data-table tfoot tr:first-child td {
  padding-top: 14px !important;
  border-top: 1px solid #f0f3f7;
}
.cart__data-table tfoot th,
.cart__data-table tfoot td {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #FF6B1A !important;
}
.cart__data-table mark {
  background: #FF6B1A !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  letter-spacing: .3px;
  margin-left: 4px;
}

.cart__action {
  background: transparent !important;
  padding: 0 24px 24px !important;
  margin: 0 !important;
}
.cart__action .ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.cart__action .ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,107,26,.35);
}
.cart__quick-text {
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.cart > p,
#content > p:only-child {
  font-family: 'Onest', sans-serif !important;
  font-size: 16px !important;
  color: #5a6577 !important;
  text-align: center !important;
  padding: 60px 20px !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(15,42,82,.06);
}

/* ==========================================================
   AUDIT-2026-05-06 — фиксы из CSS overlap audit (top 3 HIGH+MEDIUM)
   ========================================================== */

/* H3 — .products__item-status имеет float:left от темы (app.css:7414).
   Наш display:inline-flex не отменяет float → vertical-align не работает.
   Это симптом который Тарас фиксил через DESIGN-11/DESIGN-08 v2 grep'ами. */
.products__item-status { float: none !important; }

/* H4 — .sku__price-economy в parent flex-wrap получает flex:0 0 100% (app.css:11838),
   ломает inline-block + margin-left:12px (custom.css:505).
   Бейдж экономии переносится на новую строку с лишним отступом. */
.sku .sku__price-economy {
  flex: 0 0 auto !important;
  align-self: center;
}

/* M1 — наш min-height: 44.1rem растягивает ВСЕ .products__item, включая
   --compact (343px target) и --small (auto target). В widget'ах header'а
   карточки превращаются в 441px высоты. */
.products__item--compact,
.products__item--small {
  min-height: 0 !important;
  height: auto !important;
}

/* ==========================================================
   CART-02 (fix 2026-05-06) — grid layout slidebar + popup kk-style
   ========================================================== */

/* --- Slidebar item: grid layout вместо absolute (наш padding смыл reservoir темы) --- */
.header__cart-item {
  display: grid !important;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas:
    "image desc action"
    "number price price";
  gap: 10px 12px !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #f0f3f7 !important;
  border-radius: 12px !important;
  position: relative;
  align-items: start;
}
.header__cart-item:hover {
  border-color: #FF6B1A !important;
  box-shadow: 0 4px 14px rgba(255,107,26,.12);
}

.header__cart-item-image {
  grid-area: image !important;
  position: static !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  flex: none !important;
  background: #f8f9fb !important;
  border: 1px solid #f0f3f7 !important;
  border-radius: 8px !important;
  padding: 4px !important;
}
.header__cart-item-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.header__cart-item-desc {
  grid-area: desc !important;
  flex: none !important;
  min-width: 0;
  align-self: start;
  padding-right: 4px;
}

.header__cart-item-number {
  grid-area: number !important;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin: 0 !important;
  align-self: center;
}
.header__cart-item-number .ui-number { margin: 0 !important; }
.header__cart-item-number .ui-number__input {
  height: 36px !important;
  padding: 6px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border-color: #e2e8ed !important;
  font-family: 'Onest', sans-serif;
  color: #0F2A52;
}
.header__cart-item-number .ui-number__decrease,
.header__cart-item-number .ui-number__increase {
  width: 24px !important;
  top: 4px !important;
  bottom: 4px !important;
  color: #5a6577 !important;
}
.header__cart-item-number .ui-number__decrease:hover,
.header__cart-item-number .ui-number__increase:hover {
  background: rgba(255,107,26,.08) !important;
  color: #FF6B1A !important;
}

.header__cart-item-price {
  grid-area: price !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right;
  margin: 0 !important;
}
.header__cart-item-price small {
  flex: none !important;
  display: block !important;
  text-align: right;
  margin-top: 2px;
}

.header__cart-item-action {
  grid-area: action !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  align-self: start;
}
.header__cart-item-action-toggle {
  padding: 6px !important;
}

/* Action menu offcanvas — пусть остаётся absolute сверху action */
.header__cart-item-action-offcanvas {
  background: #fff !important;
  border: 1px solid #f0f3f7 !important;
  box-shadow: 0 8px 24px rgba(15,42,82,.12) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  min-width: 160px !important;
}
.header__cart-item-action-menu > li {
  padding: 0 0 8px !important;
  margin: 0 0 8px !important;
  border-color: #f0f3f7 !important;
}
.header__cart-item-action-menu > li:last-child {
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Cart page sidebar gap (на десктопе margin-right у content больше) --- */
@media (min-width: 1199px) {
  .cart__content { margin: 0 32px 0 0 !important; }
}

/* --- Popup buyclick (form «Оставить заявку») в kk-стиле --- */
.popup.popup--buy-click,
.fancybox-content .popup--buy-click {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  max-width: 460px !important;
  font-family: 'Onest', sans-serif;
  box-shadow: 0 20px 60px rgba(15,42,82,.25);
}
.popup--buy-click .popup__title {
  display: block !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  color: #0F2A52 !important;
  text-transform: uppercase;
  letter-spacing: -.3px;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
.popup--buy-click p,
.popup--buy-click .popup__form > p {
  font-family: 'Onest', sans-serif !important;
  font-size: 13px !important;
  color: #5a6577 !important;
  line-height: 1.5;
  margin: 0 0 18px !important;
}
.popup--buy-click .popup__form { padding: 0 !important; }
.popup--buy-click .ui-input,
.popup--buy-click .ui-textarea,
.popup--buy-click input[type=text],
.popup--buy-click input[type=email],
.popup--buy-click input[type=tel],
.popup--buy-click textarea {
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1.5px solid #e2e8ed !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #f8f9fb !important;
  color: #0F2A52 !important;
  margin: 0 0 12px !important;
  width: 100% !important;
  transition: border-color .15s, background .15s;
}
.popup--buy-click .ui-input:focus,
.popup--buy-click .ui-textarea:focus,
.popup--buy-click input:focus,
.popup--buy-click textarea:focus {
  border-color: #FF6B1A !important;
  background: #fff !important;
  outline: none !important;
}
.popup--buy-click .ui-textarea,
.popup--buy-click textarea { min-height: 90px; resize: vertical; }
.popup--buy-click .ui-label,
.popup--buy-click label {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #5a6577 !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0 0 6px !important;
  display: block;
}
.popup--buy-click .quickbuy-send,
.popup--buy-click .ui-btn--primary {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  margin: 12px 0 0 !important;
  width: 100%;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.popup--buy-click .quickbuy-send:hover,
.popup--buy-click .ui-btn--primary:hover {
  background: #ff7e36 !important;
  border-color: #ff7e36 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,107,26,.35);
}
.popup--buy-click .personal-data {
  font-family: 'Onest', sans-serif !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  margin: 12px 0 0 !important;
  text-align: center;
}
.popup--buy-click .personal-data a { color: #FF6B1A !important; text-decoration: none; }

/* Fancybox контейнер — закругление + плотная белая обвёртка */
.fancybox-content:has(.popup--buy-click) {
  padding: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
}
.fancybox-button.fancybox-close-small {
  color: #5a6577 !important;
  opacity: 1 !important;
}
.fancybox-button.fancybox-close-small:hover { color: #FF6B1A !important; }

/* Cart page sidebar — overflow visible (чтобы дочерние shadow не обрезались) */
.cart__sidebar { overflow: visible !important; }

/* ==========================================================
   MOBILE-DRAWER + AUDIT H1/H2 (2026-05-06)
   Бургер-меню `.header__nav-offcanvas` (открывается по `.js-nav-trigger`)
   + фиксы H1 (accordion arrow двойной rotate) и H2 (rating overlap badges)
   ========================================================== */

/* === H1 — accordion arrow двойной rotate === */
/* В product.twig is-active стоит на ОБОИХ родителе (.details__accordion) и на toggle (.details__accordion-toggle).
   Theme крутит .details__accordion-arrow на 180deg, наш chevron идёт через ::before.
   Чтобы theme не трогал наш arrow — обнуляем transform. */
.details__accordion.is-active .details__accordion-arrow,
.details__accordion-toggle.is-active .details__accordion-arrow {
  transform: none !important;
}

/* === H2 — rating + badges на одной координате === */
/* Theme: оба absolute top:1.5rem left:1.5rem. На карточках с рейтингом и бейджами — overlap.
   Сейчас на kupi-komp рейтингов нет, но защита тривиальная. Сдвигаем rating вправо. */
.products__item-rating {
  left: auto !important;
  right: 1.5rem !important;
}

/* === Mobile burger drawer (.header__nav-offcanvas) — kk-стиль === */

/* Бургер-кнопка в шапке (на navy фоне header — белая, чтобы было видно) */
.header__nav-btn { color: #fff !important; }
.header__nav-btn:hover { color: #FF6B1A !important; }
.header__nav-btn svg { width: 22px !important; height: 22px !important; color: inherit; }

/* Drawer container */
.header__nav-offcanvas {
  background: #f8f9fb !important;
  font-family: 'Onest', sans-serif;
}

/* Шапка drawer (close + Меню) */
.header__nav-head {
  background: linear-gradient(135deg, #0F2A52 0%, #193B6E 100%) !important;
  padding: 22px 24px !important;
  margin: 0 !important;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header__nav-close {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  margin: 0 16px 0 0 !important;
  flex: 0 0 auto !important;
  transition: background .15s, color .15s;
}
.header__nav-close:hover {
  background: rgba(255,255,255,.12) !important;
  color: #FF6B1A !important;
}
.header__nav-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Body drawer */
.header__nav-body { padding: 16px !important; }

/* Группа acc/compare/wishlist/cart */
.header__nav-group--acc_action_cart {
  background: #fff !important;
  border: 1px solid #f0f3f7 !important;
  border-bottom: 1px solid #f0f3f7 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
  gap: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Acc — одиночная иконка 44×44 */
.header__nav-acc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8ed !important;
  border-radius: 10px !important;
  color: #0F2A52 !important;
  flex: 0 0 auto !important;
  transition: border-color .15s, color .15s;
}
.header__nav-acc-btn:hover {
  border-color: #FF6B1A !important;
  color: #FF6B1A !important;
}

/* Action — обёртка с двумя кнопками compare+wishlist + разделитель.
   Theme сделал её абсолютно-фиксной, мой width:50px давил две кнопки в одну ячейку. */
.header__nav-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1.5px solid #e2e8ed !important;
  border-radius: 10px !important;
  height: 44px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 4px !important;
  color: #0F2A52 !important;
  transition: border-color .15s;
}
.header__nav-action:hover { border-color: #FF6B1A !important; }
.header__nav-action-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  color: #0F2A52 !important;
  text-decoration: none !important;
}
.header__nav-action-btn:hover { color: #FF6B1A !important; }
.header__nav-action-line {
  display: block !important;
  width: 1px !important;
  height: 24px !important;
  background: #e2e8ed !important;
  flex: 0 0 1px !important;
}

/* Счётчик — orange pill в правом-верхнем углу самой кнопки (.btn relative) */
.header__nav-action-counter {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background: #FF6B1A !important;
  color: #fff !important;
  border-radius: 99px !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  padding: 0 4px !important;
  line-height: 14px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #fff !important;
  box-sizing: content-box;
}
/* Пустой счётчик (compare=0) — не показывать вообще */
.header__nav-action-counter:empty { display: none !important; }

.header__nav-cart {
  flex: 1 0 100% !important;
  margin: 4px 0 0 !important;
}
.header__nav-cart-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #FF6B1A !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none !important;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.header__nav-cart-btn:hover {
  background: #ff7e36 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,107,26,.35);
}

/* Cart-total: «Корзина 1» (mark) + «130 000 ₽» (отдельный span). Theme задаёт mark
   opacity:.4 и yellow-bg по умолчанию — оба перебиваем для читаемости на orange. */
.header__nav-cart-total {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
  text-align: left;
}
.header__nav-cart-total mark {
  background: transparent !important;
  color: #fff !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 !important;
  padding: 0 !important;
}
.header__nav-cart-total mark .cart-total-text {
  color: rgba(255,255,255,.85) !important;
}
.header__nav-cart-total mark .cart-total-counter {
  background: rgba(255,255,255,.25);
  color: #fff !important;
  border-radius: 99px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}
.header__nav-cart-total > .cart-total-text {
  color: #fff !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: -.2px;
  text-transform: none !important;
  margin-top: 2px;
}
.header__nav-cart-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
}

/* Поддержка (телефоны) */
.header__nav-support {
  background: #fff !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  margin: 0 0 12px !important;
  border: 1px solid #f0f3f7 !important;
}
.header__nav-support-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: #5a6577 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin: 0 0 12px !important;
}
.header__nav-support-phones {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.header__nav-support-phones > li { margin: 0 0 8px; }
.header__nav-support-phones > li:last-child { margin: 0; }

.header__nav-support-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #0F2A52 !important;
  text-decoration: none !important;
  letter-spacing: -.3px;
  transition: color .15s;
}
.header__nav-support-link:hover { color: #FF6B1A !important; }
.header__nav-support-link svg {
  width: 16px !important;
  height: 16px !important;
  color: #FF6B1A !important;
}
.header__nav-support-worktime {
  font-family: 'Onest', sans-serif !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin: 8px 0 0 !important;
}

/* Мессенджеры */
.header__nav-social {
  background: #fff !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  margin: 0 0 12px !important;
  border: 1px solid #f0f3f7 !important;
}
.header__nav-social-title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: #5a6577 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin: 0 0 12px !important;
}
.header__nav-social-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.header__nav-social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #f1f4f9 !important;
  color: #0F2A52 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s, transform .15s;
}
.header__nav-social-link:hover {
  background: #FF6B1A !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.header__nav-social-link svg {
  width: 18px !important;
  height: 18px !important;
}

/* Catalog menu (наполняется JS из .header__catalog-menu) */
.header__nav-menu {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  border: 1px solid #f0f3f7 !important;
  overflow: hidden;
}
.header__nav-menu > li {
  border-bottom: 1px solid #f0f3f7 !important;
}
.header__nav-menu > li:last-child { border-bottom: 0 !important; }
.header__nav-link {
  font-family: 'Onest', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #0F2A52 !important;
  padding: 14px 20px !important;
  min-height: 0 !important;
  text-decoration: none !important;
  transition: color .15s, background .15s;
}
.header__nav-link:hover {
  color: #FF6B1A !important;
  background: rgba(255,107,26,.05) !important;
}
.header__nav-link--catalog {
  background: #FF6B1A !important;
  color: #fff !important;
  border-radius: 10px !important;
  margin: 0 !important;
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  font-size: 14px !important;
}
.header__nav-link--catalog:hover {
  background: #ff7e36 !important;
  color: #fff !important;
}

/* Currency/language группа — на kupi-komp пуста, но на всякий случай */
.header__nav-group--currency_language {
  border-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* === KK-AVITO REVIEWS BLOCK (2026-05-08, rev. C+ rail) === */
.kk-avito {
  margin: 48px 0;
  padding: 0;
}
.kk-avito__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 28px 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(15, 42, 82, .06), 0 1px 3px rgba(15, 42, 82, .04);
}

/* === HEAD === */
.kk-avito__head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(15, 42, 82, .08);
}
.kk-avito__head-left {
  margin-right: auto;
  min-width: 0;
}
.kk-avito__title {
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  color: #0F2A52;
  letter-spacing: -.01em;
}
.kk-avito__source {
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #6B7280;
  margin-top: 6px;
}
.kk-avito__rating {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(15, 42, 82, .08);
  flex-shrink: 0;
}
.kk-avito__score {
  font-family: 'Onest', sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: #0F2A52;
}
.kk-avito__rating-meta { display: flex; flex-direction: column; gap: 2px; }
.kk-avito__stars-big {
  font-size: 16px;
  letter-spacing: 1px;
  color: #FF6B1A;
  line-height: 1;
}
.kk-avito__count {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #4B5563;
}

/* === NAV (стрелки в шапке) === */
.kk-avito__nav-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.kk-avito__nav {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 42, 82, .12);
  box-shadow: 0 1px 3px rgba(15, 42, 82, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  color: #0F2A52;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  user-select: none;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.kk-avito__nav:hover:not(:disabled) {
  background: #FF6B1A;
  color: #fff;
  border-color: #FF6B1A;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 107, 26, .25);
}
.kk-avito__nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* === RAIL — горизонтальная лента с scroll-snap === */
.kk-avito__grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  margin-bottom: 22px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kk-avito__grid::-webkit-scrollbar { display: none; }

.kk-avito__card {
  flex: 0 0 calc((100% - 54px) / 4);  /* 4 в ряд, 3 gap × 18 = 54 */
  min-width: 0;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 42, 82, .05), 0 4px 14px rgba(15, 42, 82, .04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kk-avito__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 42, 82, .08), 0 8px 22px rgba(15, 42, 82, .08);
}

.kk-avito__card-head { display: flex; align-items: center; }
.kk-avito__card-stars {
  font-size: 16px;
  letter-spacing: 2px;
  color: #FF6B1A;
  line-height: 1;
}
.kk-avito__card-text {
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #1F2937;
  margin: 0;
  flex: 1;
}
.kk-avito__photo {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  align-self: flex-start;
  border: 1px solid rgba(15, 42, 82, .06);
  transition: transform .18s ease;
}
.kk-avito__photo img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
}
.kk-avito__photo:hover { transform: scale(1.02); }
.kk-avito__item {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-top: 1px dashed rgba(15, 42, 82, .1);
  padding-top: 10px;
}
.kk-avito__card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  color: #6B7280;
}
.kk-avito__card-name { font-weight: 700; color: #0F2A52; }
.kk-avito__card-dot { color: #D1D5DB; }
.kk-avito__card-date { font-weight: 500; }

/* === CTA === */
.kk-avito__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #FF6B1A;
  color: #fff !important;
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  border-radius: 12px;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 26, .2);
}
.kk-avito__cta:hover {
  background: #E25A0F;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 107, 26, .3);
  color: #fff !important;
  text-decoration: none !important;
}
.kk-avito__cta-arrow {
  font-size: 18px;
  font-weight: 700;
  transition: transform .15s ease;
}
.kk-avito__cta:hover .kk-avito__cta-arrow { transform: translateX(3px); }

/* === ADAPTIVE — 3 в ряд на средних === */
@media (min-width: 769px) and (max-width: 1100px) {
  .kk-avito__card { flex-basis: calc((100% - 36px) / 3); }
}

/* === MOBILE === */
@media (max-width: 768px) {
  .kk-avito { margin: 32px 0; }
  .kk-avito__inner { padding: 24px 18px 22px; border-radius: 16px; }
  .kk-avito__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .kk-avito__head-left { margin-right: 0; }
  .kk-avito__title { font-size: 22px; }
  .kk-avito__rating { width: 100%; justify-content: center; }
  .kk-avito__score { font-size: 32px; }
  .kk-avito__nav-group { display: none; }
  .kk-avito__card {
    flex-basis: 78%;  /* peek: ~1.3 карточки в viewport */
    padding: 16px;
  }
  .kk-avito__cta {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .kk-avito__title { font-size: 19px; }
  .kk-avito__score { font-size: 28px; }
  .kk-avito__card-text { font-size: 13px; }
}

/* === END KK-AVITO === */

/* === KK-FOOTER CREDIT (7-R signature) === */
.kk-footer__credit {
  text-align: center;
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .45);
  padding: 14px 16px 0;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  letter-spacing: .01em;
}
.kk-footer__credit a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted rgba(255, 255, 255, .25);
  transition: color .15s ease, border-color .15s ease;
}
.kk-footer__credit a:hover {
  color: #FF6B1A;
  border-bottom-color: #FF6B1A;
}

/* === Top-bar custom info links (kupi-komp 2026-05-09) === */
.header__info--custom-links { display: inline-block; }
.header__info--custom-links .header__info-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.header__info--custom-links .header__info-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
    transition: opacity .15s;
}
.header__info--custom-links .header__info-link:hover {
    text-decoration: underline;
    opacity: .8;
}
@media (max-width: 991px) {
    .header__info--custom-links { display: none; }
}
/* === end top-bar custom links === */

/* === Info-pages styling — kupi-komp 2026-05-10 === */
.info-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 16px 56px;
    color: #1a1f36;
    font-size: 16px;
    line-height: 1.65;
}
.info-page > h1,
.breadcrumb + .info-page { margin-top: 8px; }

/* Лидер-абзац */
.info-page .info-lead {
    font-size: 17px;
    line-height: 1.55;
    color: #1a1f36;
    background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
    border-left: 4px solid #ff6a00;
    padding: 18px 22px;
    border-radius: 10px;
    margin: 0 0 32px;
}

/* Заголовки секций */
.info-page h2 {
    font-family: 'Onest', 'Inter', system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.25;
    color: #0f2a52;
    margin: 40px 0 16px;
    padding-left: 14px;
    border-left: 4px solid #ff6a00;
    letter-spacing: -.01em;
}
.info-page h3 {
    font-weight: 700;
    font-size: 18px;
    color: #0f2a52;
    margin: 24px 0 10px;
}

/* Параграфы и сильный текст */
.info-page p { margin: 0 0 14px; }
.info-page strong { color: #0f2a52; font-weight: 700; }
.info-page em { color: #4a5568; font-style: italic; }

/* Ссылки */
.info-page a {
    color: #ff6a00;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,106,0,.35);
    transition: border-color .15s ease;
}
.info-page a:hover { border-bottom-color: #ff6a00; }

/* Списки с оранжевыми маркерами */
.info-page ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.info-page ul li {
    position: relative;
    padding: 6px 0 6px 28px;
}
/* Перекрашиваем встроенную точку темы (.ui-wysiwyg ul:not([class]) > li::after) в orange */
.info-page ul > li::after { background: #ff6a00 !important; }

/* Таблица — поверх inline-styles из БД */
.info-page table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: none !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,42,82,.08);
    margin: 0 0 28px !important;
    background: #fff;
}
.info-page table thead tr,
.info-page table thead tr th { background: #0f2a52 !important; }
.info-page table thead th {
    color: #fff !important;
    font-weight: 600;
    border: none !important;
    padding: 14px 18px !important;
    text-align: left;
    font-size: 15px;
}
.info-page table tbody td {
    border: none !important;
    border-top: 1px solid #eef1f7 !important;
    padding: 14px 18px !important;
    background: transparent !important;
}
.info-page table tbody tr:nth-child(even) td { background: #f9fafd !important; }
.info-page table tbody tr:first-child td { border-top: none !important; }

/* Hero-карточки (можно использовать в HTML описания) */
.info-page__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 0 0 32px;
}
.info-page__fact {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(15,42,82,.06);
}
.info-page__fact-num {
    display: block;
    font-family: 'Onest', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    color: #ff6a00;
    margin-bottom: 6px;
}
.info-page__fact-label {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.4;
}

/* CTA в конце страницы */
.info-page__cta {
    margin: 36px 0 0;
    padding: 24px;
    background: linear-gradient(135deg, #0f2a52 0%, #1a3a6e 100%);
    border-radius: 14px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
}
.info-page__cta-text { flex: 1 1 240px; min-width: 240px; }
.info-page__cta-text strong { color: #fff; font-size: 18px; display: block; margin-bottom: 4px; }
.info-page__cta-text span { color: rgba(255,255,255,.78); font-size: 14px; }
.info-page__cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.info-page__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    background: #ff6a00;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    border: none !important;
    transition: background .15s;
}
.info-page__cta-btn:hover { background: #e85d00; border: none !important; }
.info-page__cta-btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
}
.info-page__cta-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff !important; }

/* Mobile */
@media (max-width: 768px) {
    .info-page { padding: 16px 12px 36px; font-size: 15px; }
    .info-page .info-lead { padding: 14px 16px; font-size: 16px; }
    .info-page h2 { font-size: 20px; margin: 32px 0 14px; }
    .info-page table { display: block; overflow-x: auto; }
    .info-page table thead th, .info-page table tbody td { padding: 12px 14px !important; font-size: 14px; }
    .info-page__cta { padding: 20px; }
}
/* === end info-pages === */

/* === Contact page styling — kupi-komp 2026-05-10 === */
.contacts { color: #1a1f36; }
.contacts__map {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15,42,82,.08);
    margin-bottom: 28px;
}
/* Заголовки секций контактов в стиле info-page */
.contacts__data-title,
.contacts__data .h2 {
    font-family: 'Onest', 'Inter', system-ui, sans-serif;
    font-weight: 900 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    color: #0f2a52 !important;
    padding-left: 14px !important;
    border-left: 4px solid #ff6a00;
    margin-bottom: 18px !important;
    display: block;
    letter-spacing: -.01em;
}
/* DL — определения */
.contacts__data-dl dt {
    color: #4a5568;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 18px 0 6px;
}
.contacts__data-dl dd { margin-left: 0; }

/* Телефоны */
.contacts__data-phones { list-style: none; padding: 0; margin: 0; }
.contacts__data-phones li { padding: 4px 0; }
.contacts__data-phones a {
    color: #ff6a00 !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,106,0,.3);
    transition: border-color .15s;
}
.contacts__data-phones a:hover { border-bottom-color: #ff6a00; }

/* Время работы — без красного, единый стиль */
.contacts__data-worktime { font-size: 14px; line-height: 1.6; margin: 10px 0 0; color: #1a1f36; }
.contacts__data-worktime span[style*="color: red"],
.contacts__data-worktime span[style*="color:red"],
.contacts__data-worktime [style*="red"] { color: #0f2a52 !important; font-weight: 600; }
.contacts__data-worktime br + span { display: inline-block; min-width: 130px; }

/* Адрес */
.contacts__data-address { font-style: normal; font-size: 16px; }
.contacts__data-address a {
    color: #0f2a52;
    text-decoration: none;
    border-bottom: 1px dashed rgba(15,42,82,.35);
}
.contacts__data-address a:hover { border-bottom-color: #ff6a00; color: #ff6a00; }
.contacts__data-address .icon-location {
    width: 18px; height: 18px;
    fill: #ff6a00;
    margin-right: 4px;
    vertical-align: -4px;
}

/* Форма «Задать вопрос» */
.contacts__data-form {
    background: #fff;
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15,42,82,.07);
    border: 1px solid #eef1f7;
}
.contacts__data-form .ui-legend {
    font-family: 'Onest', 'Inter', sans-serif;
    font-weight: 900;
    color: #0f2a52;
    font-size: 22px;
    padding-left: 14px;
    border-left: 4px solid #ff6a00;
    display: block;
    margin: 0 0 22px;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.contacts__data-form .ui-label {
    display: block;
    font-size: 13px;
    color: #4a5568;
    margin: 14px 0 6px;
    font-weight: 500;
}
.contacts__data-form .ui-input,
.contacts__data-form .ui-textarea {
    width: 100%;
    border: 1px solid #d8dde6 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #1a1f36 !important;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.contacts__data-form .ui-input:focus,
.contacts__data-form .ui-textarea:focus {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 3px rgba(255,106,0,.12);
    outline: none;
}
.contacts__data-form .ui-btn--primary {
    background: #ff6a00 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: background .15s;
    width: 100%;
}
.contacts__data-form .ui-btn--primary:hover { background: #e85d00 !important; }
.contacts__data-form .ui-check__text { font-size: 13px; color: #4a5568; line-height: 1.5; }
.contacts__data-form .personal-data { font-size: 12px; color: #6b7280; margin-top: 12px; line-height: 1.5; }

/* Отступы блока в целом */
.contacts__data { padding: 0 0 32px; }
.contacts__data-group { padding: 8px 0; }

@media (max-width: 768px) {
    .contacts__data-title, .contacts__data .h2 { font-size: 19px !important; }
    .contacts__data-form { padding: 20px; }
    .contacts__map { border-radius: 10px; }
}
/* === end contact page === */

/* === DESIGN-09 v4 — Fix price/CTA overlap in product cards (2026-05-10) ===
   Жалоба от 4 пользователей 2026-05-09: видно "13" вместо "130 000 ₽".

   Root cause: .products__item-action через margin-top:-32px накладывается на
   .products__item-price. Старая защита @media (max-width:560px) padding-right:50
   была затёрта DESIGN-04 правилами с большей специфичностью. На мобиле <560
   защиты больше не было.

   Решение по контексту:
   1) Карусели/виджеты (.products-featured — "Вы смотрели", related) — карточки
      всегда узкие (~190-280px), независимо от viewport. Принудительно icon-only
      кнопка 38×38, цена с padding-right:50px. Текст КУПИТЬ не помещается ни на
      каком вьюпорте → проще иконка везде.
   2) Listing /catalog (.catalog .products) — карточки шире (1-col mobile 330+,
      2-col tablet 370+, 3-col desktop 270+).
        - <=560px: icon-only (мобила всегда узко)
        - >=561px: text-button cap 140px, цена резерв 156px
   3) Везде: overflow:hidden + nowrap на цене. */

/* (1) Carousel widgets — always icon-only */
.products-featured .products__item .ui-add-to-cart .ui-btn--primary,
.products-featured .products__item .ui-add-to-cart > .ui-btn--primary {
  max-width: 38px !important;
  width: 38px !important;
  padding: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  white-space: nowrap;
}
.products-featured .products__item .ui-add-to-cart .ui-btn--primary svg,
.products-featured .products__item .ui-add-to-cart > .ui-btn--primary svg {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.products-featured .products__item .products__item-price {
  padding-right: 50px !important;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

/* (2a) Catalog listing — mobile <=560: icon-only */
@media (max-width: 560px) {
  .catalog .products__item .ui-add-to-cart .ui-btn--primary,
  .catalog .products__item .ui-add-to-cart > .ui-btn--primary {
    max-width: 38px !important;
    width: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    white-space: nowrap;
  }
  .catalog .products__item .ui-add-to-cart .ui-btn--primary svg,
  .catalog .products__item .ui-add-to-cart > .ui-btn--primary svg {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .catalog .products__item .products__item-price {
    padding-right: 50px !important;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* (2b) Catalog listing — >=561: text button cap 140, price reserve 156 */
@media (min-width: 561px) {
  .catalog .products__item .ui-add-to-cart .ui-btn--primary,
  .catalog .products__item .ui-add-to-cart > .ui-btn--primary {
    max-width: 140px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catalog .products__item .products__item-price {
    padding-right: 156px !important;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
  }
}
/* === DESIGN-09 v4 end === */

/* === DESIGN-09 v5 — Mobile listing: force 1-col on --responsive layout (2026-05-12) ===
   Жалоба 2026-05-12: на реальных Android Chrome видна обрезанная цена ("128 00"
   вместо "128 000 ₽"). DevTools и Playwright (desktop UA) показывали 1-col и
   проблемы не воспроизводили — потому что сервер OpenCart отдаёт РАЗНЫЙ HTML по UA:
     mobile UA  → .products__list--responsive + .products__item--responsive (2-col на 360)
     desktop UA → .products__list--grid-3      + .products__item            (1-col на 360)
   В 2-col на 360 карточка ~145px, цена-бокс 87px, текст «130 000 ₽» 93px не
   влезает в контент-зону 37px после padding-right:50.
   Фикс: на ≤560 форсируем 1-col в --responsive ветке. Карточка становится ~330px,
   и существующий DESIGN-09 v4 (padding-right:50 + icon-only) работает без изменений. */

/* Корень проблемы: app.min.css задаёт `.products__list--responsive > li { flex: 0 0 50%; max-width: 50% }`
   как БАЗОВОЕ правило (без media-query). Карточка-это <div> внутри <li>, ширина определяется
   именно <li> через flex-basis. Перебиваем именно <li>, не .products__item. */
@media (max-width: 560px) {
  .catalog .products__list--responsive > li,
  .products__list.products__list--responsive > li,
  .products__list--responsive > li {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* === DESIGN-09 v5 end === */

/* === DESIGN-12 — Mobile listing: status + id parallel on one row (2026-05-12) ===
   Жалоба 2026-05-12: на мобильной 1-col карточке «КОД ТОВАРА» идёт на отдельной
   строке ниже статуса «НА СКЛАДЕ» и визуально смещён вправо (margin-left:37px из
   theme baseline). Тарас хочет их параллельно.
   Решение: JS-wrapper KK-STATUS-ID-V1 в footer.twig оборачивает status+id в новый
   <div class="kk-status-id-row"> на ≤560. Здесь — CSS для этого wrapper'а. */

@media (max-width: 560px) {
  .products__item--responsive .kk-status-id-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-left: 12px !important;
    padding: 4px 0 !important;
  }
  .products__item--responsive .kk-status-id-row .products__item-status,
  .products__item--responsive .kk-status-id-row .products__item-id {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* === DESIGN-12 end === */

/* === ADDRESS-01: кликабельный адрес магазина (главная hero + kk-footer top/связь). 2026-05-14 === */
.kk-address-link{color:inherit;text-decoration:none;transition:opacity .2s,text-decoration-color .2s}
.kk-address-link:hover{opacity:.78;text-decoration:underline;text-underline-offset:3px}
.kk-address-link:focus-visible{outline:2px solid #FF6B1A;outline-offset:2px;border-radius:4px}
/* === ADDRESS-01 end === */

/* KK-EMPTY-SPECS-FALLBACK: whitespace-only specs div (на мониторах/категориях без RAM/SSD/GPU/Экран) — скрываем как и :empty */
.products__item-specs:not(:has(> .products__item-spec)){display:none !important}


/* KK-SKU-STICKY-V2: галерея товара sticky на десктопе. Парный JS-detach sticky_kit в product.twig (маркер KK-STICKY-FIX). */
@media (min-width: 1200px) {
  .sku__sticky {
    position: sticky !important;
    top: 90px !important;
    width: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

/* KK-SKU-STICKY-V3: bootstrap-3 row → flex чтобы левая колонка с галереей растянулась до правой. Парный CSS v2 + JS-detach KK-STICKY-FIX в product.twig. */
@media (min-width: 1200px) {
  .sku__view-body > .row {
    display: flex !important;
    align-items: stretch !important;
  }
  .sku__view-body > .row > .col-xl-6 {
    float: none !important;
  }
}

/* KK-SKU-STICKY-V4: explicit align-self:stretch on .col-xl-6 — theme sets flex-start somewhere, breaks sticky-parent height */
@media (min-width: 1200px) {
  .sku__view-body > .row > .col-xl-6 {
    align-self: stretch !important;
    height: auto !important;
  }
}

/* KK-SKU-STICKY-V5: убираем overflow:hidden на ancestor'ах — он блокирует position:sticky на галерее. Scope: только страницы с .sku__view (карточка товара). */
@media (min-width: 1200px) {
  .sku__view-body:has(.sku__sticky),
  body:has(.sku__view) .app {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}


/* KK-CHAT-FIX: prostore показывает icon-chat и icon-chat-close одновременно (наложение). Скрываем close по умолчанию, показываем только когда чат open (.is-open). */
.chat__toggle .icon-chat-close { display: none !important; }
html.is-chat-open .chat__toggle .icon-chat { display: none !important; }
html.is-chat-open .chat__toggle .icon-chat-close { display: inline-block !important; width: 22px !important; height: 22px !important; color: #fff !important; }


/* KK-CHAT-FIX-SIZE: явные размеры/цвет иконок + ровный центрирование */
.chat__toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.chat__toggle .icon-chat,
.chat__toggle .icon-chat-close { width: 22px !important; height: 22px !important; color: #fff !important; fill: currentColor !important; }
.chat__toggle .icon-chat-close { display: none !important; }

/* KK-CHIP-COMPACT: уменьшить чипы в категориях (4 чипа должны влезать в 1 ряд даже в узких карточках 3-col grid). Раньше: font-size 11px, padding 3px 9px → 4-й длинный чип (GTX 1650 ti) уезжал на 2 строку. Scope только .products__item-spec — главную (.kk-card__spec / .kk-hero__product-spec) не трогаем. */
.products__item-specs { gap: 3px !important; }
.products__item-spec {
  font-size: 10px !important;
  padding: 2px 7px !important;
  letter-spacing: 0 !important;
}

/* KK-CHIP-COMPACT-V2: уменьшить горизонтальный margin родителя чипов с 16px до 10px — на 1199px и уже 4 чипа всё равно упирались в края. */
.products__item-specs { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* KK-FILTER-BACKDROP-CSS: реальный backdrop div вместо html::before (iOS Safari bug fix). DOM-элемент в footer.twig. */
.kk-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 42, 82, .55);
  z-index: 9998;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.is-filter-open .kk-filter-backdrop { display: block; }
@media (min-width: 992px) {
  .kk-filter-backdrop { display: none !important; }
}

/* KK-FILTER-CLOSE-HIDE: скрыть кнопку .filter-aside__close (тема ставит её абсолютом поверх заголовка ФИЛЬТР). Закрытие работает через backdrop и повторный тап toggle. */
@media (max-width: 991px) {
  .filter-aside__offcanvas .filter-aside__close { display: none !important; }
}

/* === KK-404 — кастомная страница 404 ============================ */
.kk-404 {
  background: #F5F7FA;
  padding: 40px 0 64px;
}
.kk-404 .container-fluid { max-width: 1140px; }
.kk-404__box {
  background: #fff;
  border: 1px solid #e2e8ed;
  border-radius: 18px;
  padding: 48px 32px;
  box-shadow: 0 10px 40px rgba(15, 42, 82, .06);
}
.kk-404__head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.kk-404__num {
  font-family: 'Onest', sans-serif;
  font-weight: 900;
  font-size: 180px;
  line-height: .9;
  letter-spacing: -6px;
  color: #0F2A52;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #0F2A52 0%, #193B6E 55%, #FF6B1A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.kk-404__title {
  font-family: 'Onest', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  color: #0F2A52 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.5px;
}
.kk-404__lead {
  font-family: 'Onest', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 28px;
}
.kk-404__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.kk-404__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.kk-404__cta--primary {
  background: #FF6B1A;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255, 107, 26, .28);
}
.kk-404__cta--primary:hover {
  background: #FF8A47;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 107, 26, .35);
}
.kk-404__cta--secondary {
  background: #fff;
  color: #0F2A52 !important;
  border: 1.5px solid #cbd5e1;
}
.kk-404__cta--secondary:hover {
  border-color: #0F2A52;
  background: #f1f5f9;
}
.kk-404__tiles-title {
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #0F2A52;
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: -0.3px;
}
.kk-404__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kk-404__tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kk-404__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 42, 82, .18);
}
.kk-404__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.kk-404__tile:hover img { transform: scale(1.06); }
.kk-404__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 82, .30) 0%, rgba(10, 31, 68, .92) 100%);
  z-index: 1;
}
.kk-404__tile-name {
  position: absolute;
  left: 16px; right: 16px; bottom: 56px;
  z-index: 2;
  font-family: 'Onest', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.4px;
}
.kk-404__tile-go {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FF6B1A;
  color: #fff;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s, transform .15s;
}
.kk-404__tile:hover .kk-404__tile-go {
  background: #FF8A47;
  transform: translateX(2px);
}

@media (max-width: 991px) {
  .kk-404__num { font-size: 140px; letter-spacing: -4px; }
  .kk-404__title { font-size: 26px !important; }
  .kk-404__tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kk-404__tile-name { font-size: 18px; bottom: 50px; }
}
@media (max-width: 480px) {
  .kk-404 { padding: 24px 0 40px; }
  .kk-404__box { padding: 28px 16px; border-radius: 14px; }
  .kk-404__num { font-size: 110px; letter-spacing: -3px; }
  .kk-404__title { font-size: 22px !important; }
  .kk-404__lead { font-size: 14px; }
  .kk-404__cta { padding: 12px 18px; font-size: 14px; flex: 1 1 100%; }
  .kk-404__tile-name { font-size: 16px; bottom: 46px; }
  .kk-404__tile-go { font-size: 12px; padding: 6px 12px; }
}