/* =========================================================================
   TD-FIXES — правки для techno-dom.by
   Отдельный файл с новым именем: подключается из header.twig и не подпадает
   под старый кэш app.min.css.
   ========================================================================= */

/* ---------- КАТАЛОГ: товары по 3 в ряд на десктопе ---------------------- */
@media (min-width:1200px){
  .products__list--grid-4,
  .products__list--grid-5,
  .products__list--responsive,
  .products__list[class*="products__list--grid-"]{
      grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* ---------- КАТАЛОГ: фильтр — ОДИН сплошной список ---------------------- */
.filter-aside__group-body,
.filter-aside__group-body.js-readmore{
    max-height:none !important; height:auto !important;
    overflow:visible !important; overflow-y:visible !important;
}
.filter-aside__group-body.js-readmore + a,
.filter-aside__group .ui-link--blue,
.filter-aside__more,
.readmore-js-toggle{ display:none !important; }
@media (min-width:1200px){
  .header__catalog-aside{ max-height:none !important; overflow:visible !important; }
  .filter-aside__body{ max-height:none !important; overflow:visible !important; }
}

/* ---------- КАТАЛОГ: ФИЛЬТР ocFilter — оформление под тему -------------
   Причина «фильтры без стилей»: боковой фильтр рисуется плагином ocFilter,
   у которого свой СТОКОВЫЙ css (ocf.cache.*.css) — синий ползунок цены,
   бирюзовые чекбоксы, острые углы 4px, кнопка "Показать" красная. Эти
   классы (.ocf-*) никогда не были переоформлены под тему сайта. Плагинный
   css подключается ПОСЛЕ темы, поэтому переопределения — с !important. */
.ocf-container, .ocf-container *{ font-family:inherit !important; }
.ocf-selected .ocf-value-input::before{ border-color:var(--accent) !important; background-color:var(--accent) !important; }
.ocf-value:active .ocf-value-input-checkbox::before{ border-color:var(--accent-600) !important; background-color:var(--accent-600) !important; }
.ocf-value-input-checkbox::before{ border-radius:5px !important; }
.ocf-noUi-connect:before,.ocf-noUi-handle{ background-color:var(--accent) !important; }
.ocf-noUi-active{ box-shadow:0 0 0 6px var(--accent-tint) !important; }
.ocf-noUi-base:before{ background-color:var(--surface-2) !important; }
.ocf-btn{ border-radius:var(--r-pill) !important; font-family:inherit; }
.ocf-btn-default{ background-color:var(--surface-2) !important; color:var(--text) !important; }
.ocf-btn-default:hover{ background-color:var(--accent-tint) !important; color:var(--accent-600) !important; }
button.ocf-btn:not(.ocf-btn-default):not(.ocf-btn-link){ background-color:var(--accent) !important; color:#fff !important; }
button.ocf-btn:not(.ocf-btn-default):not(.ocf-btn-link):hover{ background-color:var(--accent-600) !important; }
.ocf-btn-link{ color:var(--accent) !important; }
.ocf-btn-link:hover{ color:var(--accent-600) !important; }
.ocf-active-label{ color:var(--accent) !important; }
.ocf-filter-header,.ocf-header{ font-weight:800 !important; }
.ocf-container.ocf-theme-light{
  background:#fff !important; border:1.5px solid var(--border) !important;
  border-radius:var(--r-lg) !important; padding:6px !important; overflow:visible !important;
}
.ocf-content{ padding:10px 8px !important; }
.ocf-header{
  display:flex !important; align-items:center; gap:10px; font-size:1.05rem !important;
  padding:8px 8px 14px !important; margin:0 !important; border-bottom:1px solid var(--border) !important;
}
.ocf-body{ padding-top:6px !important; }
.ocf-filter{ border-bottom:1px solid var(--border) !important; padding:6px 0 !important; }
.ocf-filter:last-child{ border-bottom:0 !important; }
.ocf-filter-header{
  display:flex !important; align-items:center; cursor:pointer; padding:12px 8px !important;
  border-radius:var(--r-md) !important; font-size:.82rem !important; letter-spacing:.02em;
  text-transform:uppercase !important; color:var(--ink) !important;
}
.ocf-filter-header:hover{ background:var(--surface-2) !important; }
.ocf-filter-name{ flex:1; }
.ocf-value-list-body{
  max-height:260px !important; overflow-y:auto !important; padding:2px 8px 8px !important;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.ocf-value-list-body::-webkit-scrollbar{ width:8px; }
.ocf-value-list-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.ocf-value-list-body::-webkit-scrollbar-track{ background:transparent; }
.ocf-value{
  display:flex !important; align-items:center; gap:10px; width:100% !important;
  padding:8px 6px !important; border-radius:var(--r-md) !important; text-align:left !important;
  background:none !important; border:0 !important; font-size:.9rem !important; color:var(--text) !important;
}
.ocf-value:hover{ background:var(--surface-2) !important; }
.ocf-value-count{ margin-left:auto !important; color:var(--text-soft) !important; font-size:.8rem !important; }
.ocf-selected.ocf-value,
.ocf-value.ocf-selected{ color:var(--ink) !important; font-weight:700 !important; }
.ocf-toggle,.ocf-more,.ocf-less{ color:var(--accent) !important; font-weight:700 !important; font-size:.85rem !important; }
.ocf-buttons,.ocf-footer{ display:flex !important; gap:10px !important; padding:14px 8px 8px !important; }
.ocf-buttons .ocf-btn,.ocf-footer .ocf-btn{ flex:1 !important; height:46px !important; }
/* мобильный оффканвас фильтра — скролл внутри панели должен работать */
@media (max-width:1199px){
  .filter-aside__offcanvas .filter-aside__body{ overflow-y:auto !important; }
}

/* ---------- КАТАЛОГ: кнопка-тоггл «Фильтр» и чекбоксы-теги --------------
   Блок .filter-aside был вообще без стилей — кнопка "Фильтр" без ширины
   и white-space схлопывалась в вертикальную ленту из букв (то самое
   "Ф и л ь т р" вдоль левого края на мобильном), а чекбоксы значений
   рендерились обычными системными квадратиками браузера. */
.filter-aside__toggle{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:none;
  padding:12px 20px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:700;
}
.filter-aside__toggle:hover{ background:var(--accent); }
.filter-aside__toggle svg{ width:16px; height:16px; flex:none; }
.filter-aside__counter{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 5px; border-radius:50%; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800;
}
.filter-aside__toggle .filter-aside__counter{ background:rgba(255,255,255,.25); }
.filter-aside__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.filter-aside__title{ font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:8px; }
.filter-aside__close{ display:none; }
.filter-aside__reset{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.filter-aside__reset:hover{ color:var(--accent); }
.filter-aside__reset svg{ width:15px; height:15px; }
.filter-aside__group{ padding:16px 0; border-bottom:1px solid var(--border); }
.filter-aside__group.hide{ display:none; }
.filter-aside__group:last-child{ border-bottom:0; }
.filter-aside__group-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.filter-aside__group-title{ font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.02em; color:var(--text-soft); }
.filter-aside__group-checklist{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-aside__foot{ margin-top:18px; }
.ui-range{ padding:6px 2px 0; }
.ui-range__field{ display:flex; align-items:center; gap:4px; }
.ui-range__append{ color:var(--text-soft); }
.ui-range__input{ width:100%; border:0; font-weight:700; color:var(--ink); background:none; padding:0; }
@media (min-width:1200px){
  .filter-aside{ width:264px; margin-right:24px; float:left; clear:left; }
  .filter-aside__toggle{ display:none; }
  .filter-aside__offcanvas{
    position:static; transform:none; width:100%; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--r-lg); padding:22px;
  }
  .filter-aside__head{ display:none; }
}
@media (max-width:1199px){
  .filter-aside{ width:0; }
  .filter-aside__offcanvas{
    position:fixed; top:0; bottom:0; left:0; width:min(360px,88vw); background:#fff;
    box-shadow:var(--shadow-lg); transform:translateX(-105%); transition:transform .35s var(--ease);
    z-index:230; overflow-y:auto; padding:20px; box-sizing:border-box; display:flex; flex-direction:column;
  }
  html.is-filter-open .filter-aside__offcanvas{ transform:translateX(0); }
  .filter-aside__offcanvas form{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .filter-aside__close{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:50%; background:var(--surface-2); flex:none;
  }
  .filter-aside__body{ flex:1; overflow-y:auto; }
  .filter-aside__foot{ padding-top:14px; border-top:1px solid var(--border); }
}
/* Чекбоксы-теги значений фильтра (не ocFilter — свой .ui-check компонент) */
.ui-check{ position:relative; display:inline-flex; cursor:pointer; }
.ui-check__input{ position:absolute; opacity:0; width:1px; height:1px; }
.ui-check__tag{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-pill);
  border:1.5px solid var(--border); font-size:.88rem; font-weight:600; color:var(--text-muted);
}
.ui-check__input:checked ~ .ui-check__tag{ border-color:var(--ink); background:var(--ink); color:#fff; }
.ui-check__tag-cancel{ display:none; width:13px; height:13px; }
.ui-check__input:checked ~ .ui-check__tag .ui-check__tag-cancel{ display:inline-flex; }
.ui-check__checkbox{
  flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center;
}
.ui-check__input:checked ~ .ui-check__checkbox{ background:var(--ink); border-color:var(--ink); }
.ui-check__input:checked ~ .ui-check__checkbox::after{
  content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px);
}
li.filter-disabled .ui-check{ opacity:.4; pointer-events:none; }

/* ---------- СТРАНИЦЫ-СТАТЬИ (Доставка и оплата, О компании и т.п.) -----
   .ui-wysiwyg.editor — контейнер контента из редактора админки, у него
   вообще не было стилей: заголовки h1/h4 рендерились дефолтным браузерным
   размером вперемешку, hr без отступов, картинки-образцы документов —
   мелкие подряд идущие превью без рамок и подписей. */
.ui-wysiwyg{ font-size:1rem; line-height:1.7; color:var(--text); }
.ui-wysiwyg > h1{ font-size:1.6rem; font-weight:800; margin:0 0 20px; }
.ui-wysiwyg > h2{ font-size:1.3rem; font-weight:800; margin:36px 0 18px; }
.ui-wysiwyg > h3{ font-size:1.1rem; font-weight:800; margin:28px 0 14px; }
/* В этой статье h4 использовались вместо обычных абзацев (жирный текст) —
   не даём им выглядеть как гигантские заголовки. */
.ui-wysiwyg > h4{ font-size:1rem; font-weight:600; line-height:1.7; margin:0 0 16px; color:var(--text); }
.ui-wysiwyg > p{ margin:0 0 14px; color:var(--text-soft); }
.ui-wysiwyg > p b, .ui-wysiwyg > p strong{ color:var(--text); font-weight:700; }
.ui-wysiwyg > hr{ border:0; border-top:1px solid var(--border); margin:28px 0; }
.ui-wysiwyg > ul, .ui-wysiwyg > ol{ margin:0 0 14px; padding-left:22px; color:var(--text-soft); }
.ui-wysiwyg > ul li, .ui-wysiwyg > ol li{ margin-bottom:6px; }
/* Блок картинок-образцов (чек/гарантийный талон): было — мелкие превью
   вперемешку без рамок; делаем аккуратные карточки в ряд. */
.ui-wysiwyg > p:has(> a > img){
    display:flex; flex-wrap:wrap; gap:20px; margin-top:8px;
}
.ui-wysiwyg > p:has(> a > img) > a{
    display:block; border:1px solid var(--border); border-radius:var(--r-lg);
    overflow:hidden; background:var(--surface-2); transition:box-shadow .2s ease, transform .2s ease;
}
.ui-wysiwyg > p:has(> a > img) > a:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ui-wysiwyg > p:has(> a > img) img{
    display:block; width:auto !important; height:220px !important; max-width:260px; object-fit:cover;
}
@media (max-width:575px){
  .ui-wysiwyg > p:has(> a > img) img{ height:180px !important; }
}
/* ---------- КАТАЛОГ: кнопки фильтра ------------------------------------ */
.filter-aside__foot #button-filter,
.filter-aside__foot .ui-btn--primary{
    opacity:1 !important; background:var(--accent) !important; color:#fff !important;
    font-weight:700; height:42px; padding:0 22px;
}
.filter-aside__foot #button-filter:hover{ background:#e04a26 !important; }
.filter-aside__reset{ color:var(--text) !important; font-weight:700; }
.filter-aside__reset:hover{ color:var(--accent) !important; }

/* ---------- КАТАЛОГ: плитки подкатегорий (Apple/ASUS/…) ----------------
   Были белым текстом с чёрной тенью на белом фоне — нечитаемо.            */
.products-categories__item-title,
.products-categories__grid .products-categories__item-title{
    color:var(--text) !important; text-shadow:none !important; font-weight:700;
}

/* ---------- КАТАЛОГ: убрать переключатели вида -------------------------- */
.ui-display{ display:none !important; }

/* ---------- ГЛАВНАЯ: единая ширина блоков ------------------------------ */
.container-fluid .container-fluid{ max-width:none !important; padding-inline:0 !important; }

/* ---------- ГЛАВНАЯ: категории и товары по 3 в ряд --------------------- */
@media (min-width:1200px){
  .categories__swiper .swiper-wrapper{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (min-width:768px) and (max-width:1199px){
  .categories__swiper .swiper-wrapper{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
/* плитки категорий главной — белый текст на цветном фоне (читаемо) */
.categories__item-title{ color:#fff !important; text-shadow:0 1px 8px rgba(0,0,0,.55) !important; }
@media (max-width:767px){
  .categories__item-title{ font-size:.82rem !important; line-height:1.12 !important;
      word-break:normal !important; overflow-wrap:break-word !important; }
  .products__list[class*="products__list--grid-"],
  .products__list--responsive{ grid-template-columns:1fr !important; }
  .split-promo{ margin-left:16px !important; margin-right:16px !important; padding:24px 20px !important; }
}

/* ---------- ГЛАВНАЯ: карточки товара в каруселях — по 4 в ряд -----------
   Это не CSS-грид, а карусель Swiper (.products-featured / .swiper-products,
   используется в блоках «Хиты продаж», «Новинки» и т.п. на главной).
   Ширина слайда раньше была фиксированной (260px), из-за чего в контейнер
   помещалось только 3 карточки. Пересчитываем ширину под ровно 4 карточки
   с учётом отступа между ними (20px). Каталог (.products__list--grid-4)
   это НЕ затрагивает — там по-прежнему 3 в ряд, как просили раньше. */
@media (min-width:1200px){
  .swiper-products .swiper-slide{ width:calc((100% - 60px)/4) !important; }
}

/* ---------- ОБЩЕЕ ------------------------------------------------------ */
/* ВАЖНО: overflow-x:hidden на html/body — причина №1, почему липкая шапка
   не работала. Правило: если у ЛЮБОГО предка position:sticky-элемента
   overflow отличен от visible (по любой оси), sticky полностью отключается
   браузером — шапка просто едет вместе со страницей. Переносим защиту от
   горизонтального скролла на .main/.footer — это СОСЕДИ шапки в разметке
   (открываются уже после закрытия </header>), а не предки, поэтому
   sticky продолжает работать. */
html, body{ overflow-x:visible !important; }
body{ max-width:100%; }
.main, .footer, .site-footer{ overflow-x:hidden !important; max-width:100%; }
.ok-banner-top{ display:none !important; }
.scroll-to-top .icon-arrow-toggle{ transform:rotate(180deg); }

/* ---------- QUICKORDER: своя простая форма оформления заказа ----------- */
/* Кнопка "На главную" на странице благодарности — текст стал тёмным из-за
   общего сброса a{color:inherit} в этом же файле (см. начало файла), который
   при равной специфичности перебивает белый цвет .ui-btn--primary. Правим
   только эту кнопку, остальные .ui-btn--primary на сайте не трогаем. */
.quickorder--success .ui-btn--primary{ color:#fff !important; }
.quickorder{
    max-width:1000px; margin:32px auto; background:#fff; border:1px solid var(--border);
    border-radius:var(--r-lg); padding:32px;
}
.quickorder__title{ font-size:1.5rem; font-weight:800; margin:0 0 24px; }
.quickorder__empty{ text-align:center; padding:40px 0; }
.quickorder__empty p{ margin-bottom:18px; color:var(--text-soft); }
.quickorder__table-wrap{ overflow-x:auto; margin-bottom:8px; }
.quickorder__table{ width:100%; border-collapse:collapse; }
.quickorder__table th{
    text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em;
    color:var(--text-soft); font-weight:700; padding:0 10px 10px; white-space:nowrap;
}
.quickorder__table td{ padding:12px 10px; border-top:1px solid var(--border); vertical-align:middle; font-size:.92rem; }
.quickorder__table a{ font-weight:600; color:var(--text); }
.quickorder__col-image img{ width:52px; height:52px; object-fit:cover; border-radius:var(--r-md); }
.quickorder__option{ font-size:.8rem; color:var(--text-soft); }
.quickorder__col-qty, .quickorder__col-price, .quickorder__col-total{ text-align:right; white-space:nowrap; }
.quickorder__totals{ max-width:320px; margin:16px 0 28px auto; }
.quickorder__totals-row{ display:flex; justify-content:space-between; padding:6px 10px; font-size:.92rem; color:var(--text-soft); }
.quickorder__totals-row--grand{ font-weight:800; font-size:1.1rem; color:var(--text); border-top:1px solid var(--border); margin-top:4px; padding-top:14px; }
.quickorder__fields{ display:flex; flex-wrap:wrap; gap:16px 20px; margin-bottom:24px; }
.quickorder__field{ flex:1 1 260px; }
.quickorder__field--wide{ flex-basis:100%; }
.quickorder__field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; }
.quickorder__field .ui-input{ width:100%; box-sizing:border-box; }
.quickorder__field textarea.ui-input{ min-height:90px; border-radius:var(--r-lg); padding:14px 18px; resize:vertical; }
.quickorder__field-error{ display:block; color:#C0392B; font-size:.8rem; margin-top:4px; min-height:1em; }
.quickorder__submit{ width:100%; max-width:320px; }
#quickorder-alert:empty{ display:none; }
@media (max-width:767px){
  .quickorder{ padding:20px; margin:16px auto; }
  .quickorder__col-model{ display:none; }
}

/* ---------- SIMPLECHECKOUT: переодеваем стандартный bootstrap ----------
   Расширение SimpleCheckout собирает поля в PHP-библиотеке (её нет в
   архиве темы — она в system/library), но использует стандартные bootstrap-
   классы (form-control, btn btn-primary и т.п.), которые мы точно видим
   в скопированных шаблонах simplecheckout_*.twig. Правим только внешний
   вид, логику/JS этого расширения не трогаем.                            */
.simplecheckout{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
    padding:28px; max-width:900px; margin:0 auto;
}
.simplecheckout .checkout-heading{
    font-weight:800; font-size:1.05rem; margin:0 0 16px; padding:0;
    display:flex; align-items:center; justify-content:space-between;
}
.simplecheckout .checkout-heading-button a{ font-weight:600; font-size:.85rem; color:var(--accent); }
.simplecheckout-block{ margin-bottom:24px; }
.simplecheckout-block:last-child{ margin-bottom:0; }
.simplecheckout-block-content{ display:flex; flex-wrap:wrap; gap:16px; }
.simplecheckout-block-content > div{ flex:1 1 240px; }
.simplecheckout .form-control{
    width:100%; height:52px; padding:0 18px; border:1.5px solid var(--border);
    border-radius:var(--r-pill); background:var(--surface-2); font-size:.95rem;
    color:var(--text); font-family:inherit; box-sizing:border-box;
}
.simplecheckout .form-control:focus{ outline:none; border-color:var(--ink); background:#fff; }
.simplecheckout textarea.form-control{ height:auto; min-height:90px; border-radius:var(--r-lg); padding:14px 18px; }
.simplecheckout label{ font-weight:700; font-size:.85rem; margin-bottom:6px; display:block; }
.simplecheckout .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:52px; padding:0 26px; border-radius:var(--r-pill); font-weight:700;
    font-size:.95rem; border:0; cursor:pointer;
}
.simplecheckout .btn-primary, .simplecheckout .button_oc{ background:var(--ink); color:#fff; }
.simplecheckout .btn-primary:hover{ background:var(--accent); }
.simplecheckout .btn-danger{ background:var(--surface-2); color:var(--text-soft); height:38px; width:38px; padding:0; border-radius:50%; }
.simplecheckout .btn-danger:hover{ background:var(--danger,#F45656); color:#fff; }
.simplecheckout-button-block{ display:flex; justify-content:flex-end; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.simplecheckout .alert-danger{
    background:#FDECEC; color:#C0392B; border-radius:var(--r-md); padding:12px 16px;
    margin-bottom:16px; font-size:.9rem;
}
/* Таблица корзины — компактно, как на референсе */
.simplecheckout-cart{ width:100%; border-collapse:collapse; margin-bottom:20px; }
.simplecheckout-cart th{
    text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em;
    color:var(--text-soft); font-weight:700; padding:0 10px 10px;
}
.simplecheckout-cart td{ padding:10px; border-top:1px solid var(--border); vertical-align:middle; font-size:.9rem; }
.simplecheckout-cart .image img{ width:52px; height:52px; object-fit:cover; border-radius:var(--r-md); }
.simplecheckout-cart .name a{ font-weight:600; color:var(--text); }
.simplecheckout-cart .quantity .input-group{ display:flex; align-items:center; gap:6px; max-width:none !important; }
.simplecheckout-cart .quantity .form-control{ height:38px; width:48px; padding:0; text-align:center; }
.simplecheckout-cart .quantity .btn{ height:38px; width:38px; padding:0; border-radius:50%; background:var(--surface-2); color:var(--text); }
.simplecheckout-cart-total{
    display:flex; justify-content:space-between; padding:8px 10px; font-size:.92rem;
}
.simplecheckout-cart-total:last-of-type{ font-weight:800; font-size:1.05rem; border-top:1px solid var(--border); margin-top:6px; padding-top:14px; }
.simplecheckout-customer-same-address{ margin-top:6px; font-size:.9rem; color:var(--text-soft); }
#simplecheckout_step_menu{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
#simplecheckout_step_menu .simple-step{
    padding:8px 16px; border-radius:var(--r-pill); background:var(--surface-2);
    font-weight:700; font-size:.85rem; color:var(--text-soft); cursor:pointer;
}
#simplecheckout_step_menu .simple-step.active{ background:var(--ink); color:#fff; }
.simplecheckout-step-delimiter{ display:none; }
@media (max-width:575px){
  .simplecheckout{ padding:18px; }
  .simplecheckout-cart .model{ display:none; }
}

/* ---------- ШАПКА: счётчик избранного улетал не туда -------------------
   .header__action-btn — родитель бейджа-счётчика (.header__action-counter,
   position:absolute) — сам не был position:relative, поэтому бейдж
   позиционировался от дальнего предка и улетал в угол страницы. */
.header__acc-btn, .header__action-btn, .header__phone-btn{ position:relative !important; }

/* ---------- КАРТОЧКА: пилюли памяти/цвета (sku__pill) — активная всегда
   читаема. Стиль для .is-active был только в неиспользуемом app.css,
   поэтому на проде активная пилюля была тёмный фон + тёмный текст. -------- */
.sku__pill.is-active{ background:var(--ink) !important; color:#fff !important; border-color:transparent !important; }

/* ---------- КОРЗИНА ---------------------------------------------------- */
.cart__code, .cart__code--voucher, .cart__code--coupon{ display:none !important; }
.cart__quick{ display:none !important; }
.cart__item-price-piece{ display:none !important; }
/* Упрощение (25.07): вместо скрытого меню "..." с пунктами "В избранное" /
   "Удалить" — сразу видимая кнопка-крестик рядом со счётчиком количества. */
.cart__item-action{ position:static !important; display:flex; align-items:center; }
.cart__item-remove{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:32px; height:32px; border-radius:50%; color:var(--text-soft);
    background:var(--surface-2); transition:background .15s ease, color .15s ease;
}
.cart__item-remove:hover{ background:var(--danger,#F45656); color:#fff; }
.cart__item-remove svg{ width:12px; height:12px; }
.cart__action .ui-btn--primary,
.cart__action .ui-btn--primary *,
.cart__checkout-btn, .cart__checkout-btn *,
.header__cart-data-action .ui-btn--primary,
.header__cart-data-action .ui-btn--primary *{ color:#fff !important; }
.header__cart-data-quick,
.header__cart-data-quick-action,
.header__cart-data-quick-action .row,
.header__cart-data-quick-action .col-12{ width:100% !important; max-width:100% !important; }
.header__cart-data-quick-action .row{ margin:0 !important; }
.header__cart-data-quick-action .col-12{ padding:0 !important; }
.header__cart-data-quick-action .ui-btn{ width:100% !important; display:flex !important; }
.header__cart-item-title{
    display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; overflow-wrap:anywhere;
}
@media (max-width:767px){
  .cart__item{
    grid-template-columns:72px 1fr !important;
    grid-template-areas:"image desc" "image price" "image number" !important;
  }
  .cart__item-image{ width:72px !important; height:72px !important; }
  .cart__item-price{ text-align:left !important; margin-top:4px; }
}

/* ---------- СРАВНЕНИЕ -------------------------------------------------- */
.compare__sticky{ background:transparent !important; }
.compare__item{ background:#fff; }

/* ---------- ЮР./РЕГУЛЯТОРНЫЙ ТЕКСТ ------------------------------------- */
p.font-claude-response-body{ color:var(--text-soft) !important; font-size:.92rem; line-height:1.65; margin:0 0 12px; }
div:has(> p.font-claude-response-body){
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
    padding:22px 26px; margin:8px 0;
}
/* хардкод-версия в footer.twig — своя разметка, свой класс */
.legal-block{
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
    padding:22px 26px; color:var(--text-soft); font-size:.85rem; line-height:1.6;
    margin:20px 0 0;
}
.legal-block p{ margin:0 0 10px; color:inherit; }
.legal-block p:last-child{ margin-bottom:0; }

/* ---------- ПОДПИСКА / ТАБЫ -------------------------------------------- */
.subsc__form .ui-group{ display:flex !important; gap:10px; flex-wrap:wrap; max-width:100% !important; align-items:stretch; }
.subsc__form .ui-group .ui-input{ flex:1 1 220px; min-width:0; margin-bottom:0; }
.subsc__form .ui-group .ui-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:767px){
  .subsc__form .ui-group{ flex-direction:column; }
  .subsc__form .ui-group .ui-input,
  .subsc__form .ui-group .ui-btn{ width:100%; flex:1 1 auto; }
}
.products-featured__filter{ margin-bottom:18px; }

/* ---------- КАРТОЧКА ТОВАРА -------------------------------------------- */
/* «Все характеристики» — читаемый текст, в т.ч. при наведении */
.sku__desc .sku__details-action .ui-link,
.sku__desc .sku__details-action .ui-link *{ color:var(--text) !important; }
.sku__desc .sku__details-action .ui-link:hover,
.sku__desc .sku__details-action .ui-link:hover *,
.sku__desc .sku__details-action .ui-link:focus,
.sku__desc .sku__details-action .ui-link:focus *{
    background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;
}
.sku__desc .sku__details-action .ui-link:hover::after{ border-color:#fff !important; }
/* кнопки — по одной в строку на всю ширину */
.sku__action .row{ display:block !important; }
.sku__action .ui-add-to-cart, .sku__action .ui-btn{ width:100% !important; min-width:0 !important; }
.sku__addto{ display:flex !important; flex-direction:column !important; gap:10px !important; }
.sku__addto > li{ width:100%; }
.sku__addto-btn{ width:100% !important; justify-content:center; }
.sku__action .js-button-fast-cart{ display:none !important; }

/* ---------- ГЛАВНАЯ: плитки категорий — без «подъёма», тень не режется --- */
.categories,
.categories__swiper,
.categories__swiper .swiper-wrapper,
.categories__item{ overflow:visible !important; }
.categories__item-in{ transition:box-shadow .2s ease !important; }
.categories__item-in:hover{ transform:none !important; box-shadow:0 10px 26px rgba(0,0,0,.14) !important; }

/* ---------- КАРТОЧКА: тень стрелок галереи не обрезается на мобильном --- */
@media (max-width:1199px){
  .sku__view,
  .sku__view-body,
  .sku__thumbs,
  .sku__thumbs .swiper-container,
  .swiper-vertical,
  .swiper-horizontal{ overflow:visible !important; }
  .sku__view .swiper-prev,
  .sku__view .swiper-next{ box-shadow:0 4px 14px rgba(0,0,0,.16); }
}


/* =========================================================================
   ДОБАВЛЕНО: то, что раньше лежало в pr_view.css (он не доезжает)
   ========================================================================= */

/* --- 1. КАТАЛОГ: 3 карточки в ряд (широкое правило, без привязки к классу) */
@media (min-width:1200px){
  .products .products__list,
  .products__list{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (min-width:768px) and (max-width:1199px){
  .products .products__list,
  .products__list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:767px){
  .products .products__list,
  .products__list{ grid-template-columns:1fr !important; }
}

/* --- 2. ФИЛЬТР: один сплошной список, без внутренних скроллов ------------ */
[class*="filter"] [class*="group-body"],
[class*="filter"] [class*="readmore"],
[class*="filter"] [class*="scroll"],
[class*="filter"] [class*="values"],
[class*="filter"] [class*="options"],
.filter-aside__group-body,
.filter-aside__body,
.ocf-scroll-y{
    max-height:none !important; height:auto !important;
    overflow:visible !important; overflow-y:visible !important;
}
@media (min-width:1200px){
  .header__catalog-aside,
  [class*="filter-aside"]{ max-height:none !important; overflow:visible !important; }
}
/* «Показать еще / Скрыть» — убрать */
[class*="filter"] .ui-link--blue,
[class*="filter"] [class*="more"] > a[href="#"],
.filter-aside__more,
.readmore-js-toggle{ display:none !important; }

/* --- 3. «Все характеристики»: белый текст при наведении ------------------ */
.sku__desc .sku__details-action a.ui-link:hover,
.sku__desc .sku__details-action a.ui-link:hover *,
.sku__desc .sku__details-action a.ui-link--blue:hover,
.sku__details-action a.ui-link:hover,
.sku__details-action a.ui-link:hover *{
    background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;
}
.sku__details-action a.ui-link:hover::after{ border-color:#fff !important; }

/* --- 4. МОДАЛКИ «Оставить отзыв» / «Задать вопрос» ----------------------- */
.details__comments-form.is-form-open .details__comments-form-offcanvas{
    display:flex !important;
    position:fixed !important; inset:0 !important;
    align-items:flex-start; justify-content:center;
    background:rgba(0,0,0,.55) !important;
    z-index:9999 !important; overflow:auto; padding:5vh 16px !important;
}
@media (max-width:1199px){
  .details__comments-form.is-open .details__comments-form-offcanvas{
      display:flex !important; position:fixed !important; inset:0 !important;
      align-items:flex-start; justify-content:center;
      background:rgba(0,0,0,.55) !important; z-index:9999 !important;
      overflow:auto; padding:5vh 16px !important;
  }
}
.details__comments-form-offcanvas-in{
    position:relative; background:#fff; width:100%; max-width:560px; margin:0 auto;
    border-radius:20px; padding:44px 26px 28px !important;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}
/* «Закрыть» — крестиком в углу окна */
.details__comments-form-close{
    position:absolute !important; top:12px !important; right:14px !important;
    margin:0 !important; width:34px !important; height:34px !important; padding:0 !important;
    font-size:0 !important; color:transparent !important;
    background:var(--surface-2) !important; border:0 !important; border-radius:50% !important;
    cursor:pointer; z-index:2;
}
.details__comments-form-close::before{
    content:"×"; font-size:24px; line-height:34px; color:var(--text) !important;
    display:block; text-align:center;
}
/* звёзды рейтинга — заполняются при выборе */
.ui-rating__input:checked ~ .ui-rating__star .icon-star{ color:var(--accent) !important; }
.ui-rating:hover .ui-rating__star .icon-star{ color:var(--border) !important; }
.ui-rating__star:hover .icon-star,
.ui-rating__star:hover ~ .ui-rating__star .icon-star{ color:var(--accent) !important; }

/* --- 5. ШАПКА: всегда липкая, всегда на экране --------------------------- */
.header{ position:sticky !important; top:0 !important; z-index:200; }
@media (max-width:1199px){
  .header{ position:sticky !important; top:0 !important; }
}

/* --- 6. ГАЛЕРЕЯ ТОВАРА: стрелки влево/вправо, тень не режется ------------ */
.sku__view,
.sku__view-body,
.sku__vertical,
.sku__horizontal,
.sku__vertical .swiper-container,
.sku__horizontal .swiper-container{ overflow:visible !important; }
.sku__view .swiper-prev,
.sku__view .swiper-next{ box-shadow:0 4px 14px rgba(0,0,0,.16); }

/* --- 7. ПЛИТКИ КАТЕГОРИЙ: эффект наведения без «подъёма» ----------------- */
.categories__item-in{ transition:box-shadow .25s ease !important; }
.categories__item-in:hover{ transform:none !important; box-shadow:0 12px 30px rgba(0,0,0,.22) !important; }
.categories__item-image img{ transition:transform .3s ease; }
.categories__item-in:hover .categories__item-image img{ transform:scale(1.06); }
.categories__item-in::after{
    content:""; position:absolute; inset:0; background:rgba(255,255,255,0);
    transition:background .25s ease; pointer-events:none; border-radius:inherit;
}
.categories__item-in:hover::after{ background:rgba(255,255,255,.07); }

/* --- КНОПКИ КАРТОЧКИ (перенесено из pr_view) ---------------------------- */
.sku__action .row{ display:block !important; }
.sku__action .ui-add-to-cart, .sku__action .ui-btn{ width:100% !important; min-width:0 !important; }
.sku__addto{ display:flex !important; flex-direction:column !important; gap:10px !important; }
.sku__addto > li{ width:100%; }
.sku__addto-btn{ width:100% !important; justify-content:center; }
.sku__action .js-button-fast-cart{ display:none !important; }

/* =========================================================================
   ПРАВКИ (оформление заказа, избранное, галерея, «Все характеристики»)
   ========================================================================= */

/* --- 1. ОФОРМЛЕНИЕ ЗАКАЗА: правая колонка читаемо -------------------- */
.checkout__sidebar{
    background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
    padding:20px 22px; position:sticky; top:96px;
}
.checkout__sidebar .checkout__group{ padding:0; border:0; background:transparent; }
.checkout__sidebar table{ width:100%; border-collapse:collapse; }
.checkout__sidebar table td{ padding:6px 0; font-size:.95rem; }
.checkout__sidebar table td:last-child{ text-align:right; white-space:nowrap; font-weight:700; }
.checkout__sidebar tr:last-child td{ border-top:1px solid var(--border); padding-top:12px; font-size:1.05rem; }
.checkout__sidebar a{ display:inline-block; margin:2px 0; }
/* «Быстрый заказ» убираем и здесь */
.checkout__sidebar .popup--buy-click,
.checkout__sidebar .js-fancy-popup-cart,
.checkout__sidebar [class*="buy-click"]{ display:none !important; }

/* --- 3. ИЗБРАННОЕ: аккуратная кнопка «Продолжить» --------------------- */
.wishlist .ui-btn,
.wishlist-page .ui-btn,
#content .buttons .ui-btn{ min-width:200px; }
#content .buttons{ margin-top:24px; display:flex; justify-content:flex-start; }

/* --- 5. «Все характеристики»: тёмная кнопка, белый текст всегда ---------
   Реальный класс кнопки — a.ui-btn--grey.sku__all-attrs (проверено через
   DevTools 22.07). ИСПРАВЛЕНО 23.07: раньше здесь стояла светло-серая
   заливка для состояния покоя — по фидбэку клиента это регресс, кнопка
   должна быть тёмной с белым текстом ВСЕГДА (как остальные тёмные
   кнопки сайта), а не только при наведении. Базовое app.min.css правило
   `a.ui-btn--grey{ color:var(--text) !important; }` перебивает даже :hover,
   поэтому наш цвет тоже идёт с !important. */
a.ui-btn--grey.sku__all-attrs,
.sku__all-attrs.ui-btn--grey{
    background:var(--ink) !important;
    color:#fff !important;
    border:1.5px solid var(--ink) !important;
}
a.ui-btn--grey.sku__all-attrs svg,
.sku__all-attrs.ui-btn--grey svg{ color:#fff !important; fill:#fff !important; }
a.ui-btn--grey.sku__all-attrs:hover,
a.ui-btn--grey.sku__all-attrs:focus,
.sku__all-attrs.ui-btn--grey:hover,
.sku__all-attrs.ui-btn--grey:focus{
    background:var(--accent) !important;
    color:#fff !important;
    border-color:var(--accent) !important;
}
a.ui-btn--grey.sku__all-attrs:hover svg,
a.ui-btn--grey.sku__all-attrs:focus svg,
.sku__all-attrs.ui-btn--grey:hover svg,
.sku__all-attrs.ui-btn--grey:focus svg{ color:#fff !important; fill:#fff !important; }

/* --- 6. ГАЛЕРЕЯ НА МОБИЛЬНОМ: стрелки влево/вправо, миниатюры видны ------
   Реальные иконки на кнопках — svg.icon-up (prev) и svg.icon-down (next),
   проверено по разметке product.twig (сайт всегда в режиме product_thumbs=
   vertical, шаблон для мобильного «horizontal»-варианта не используется).
   ВАЖНО: в разметке кнопка NEXT идёт в DOM раньше кнопки PREV — визуально
   next оказывается слева, а prev справа. Из-за этого предыдущая правка
   поворота стрелок (без учёта DOM-порядка) давала зеркальный результат:
   слева стрелка "вперёд" смотрела вправо, справа "назад" смотрела влево —
   именно это и выглядело как "перепутанное" листание. Явно переставляем
   кнопки через order, чтобы prev был слева и next справа, как ожидается. */
@media (max-width:1199px){
  .sku, .sku__view, .sku__view-body,
  .sku [class*="swiper"]{ overflow:visible !important; }

  .sku__vertical-nav{
      position:absolute !important; top:50% !important; left:0; right:0;
      transform:translateY(-50%); display:flex !important;
      justify-content:space-between !important; padding:0 6px;
      margin:0 !important; pointer-events:none; z-index:5;
  }
  .sku__vertical-nav button{ pointer-events:auto; }
  .sku__vertical-nav .js-swiper-vertical-prev{ order:1; }
  .sku__vertical-nav .js-swiper-vertical-next{ order:2; }
  .sku__vertical-slides{ position:relative; }

  .js-swiper-vertical-prev .icon-up{ transform:rotate(-90deg); }
  .js-swiper-vertical-next .icon-down{ transform:rotate(-90deg); }

  .sku__vertical-thumbs{ display:block !important; min-height:76px; }
  .sku__vertical-thumbs .swiper-container{ overflow:visible !important; }
  .sku__vertical-thumbs .swiper-wrapper{ display:flex !important; }
  .sku__vertical-thumbs .swiper-slide{ width:62px !important; height:62px !important; flex:none !important; }
}

/* --- 7. КАТАЛОГ: товар в избранном/сравнении — ровные кнопки ---------- */
.products__item-buttons{ display:flex; flex-direction:column; gap:8px; }
.products__item-buttons > *,
.products__item-buttons .ui-btn,
.products__item-buttons a{
    width:40px !important; height:40px !important;
    border-radius:50% !important;
    background:#fff !important; border:1px solid var(--border) !important;
    display:flex !important; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.products__item-buttons .is-active,
.products__item-buttons [class*="is-active"]{
    background:#fff !important; border-color:var(--accent) !important;
}
.products__item-buttons svg{ width:18px; height:18px; }