/* ==========================================================================
   Rosbotanic — Плитка товара (редизайн, Фаза 3 — chip on photo + freshness)
   Утверждено владельцем 2026-07-24
   Palette v1.1 (--rb-* переменные из rosbotanic/palette.css)
   Mobile-first (Правило №0.2), без эмодзи (Правило №0.3)

   Фаза 2 (2026-07-24): плавающие плитки без рамок, Lora 400 для названий,
   тонкая линия-разделитель под фото, увеличенный воздух между плитками.
   Фаза 3 (2026-07-24): цветной чип перенесён на фото (14×14, левый нижний угол),
   микро-факт "7-10 дней в вазе" под ценой с SVG-иконкой вазы.
   ========================================================================== */

/* Обнуляем родительскую обёртку OpenCart в контексте плитки, чтобы не мешала */
.category-list .product-layout {
  margin-bottom: 40px; /* Фаза 2: +16px воздуха на desktop */
}
.category-list .product-layout .rb-thumb {
  height: 100%;
}

/* Также применяем увеличенный gap для всех product-layout listing */
.product-layout,
.row .product-layout {
  margin-bottom: 40px;
}

/* === Плитка — плавающая, без рамок и фона (Фаза 2) === */
.rb-thumb {
  background: transparent;
  position: relative;
  border: none;
  padding: 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease-out;
}
.rb-thumb__link {
  display: block;
  color: var(--rb-ink, #2E2A24);
  text-decoration: none;
  padding: 0;
}
.rb-thumb__link:hover,
.rb-thumb__link:focus,
.rb-thumb__link:active {
  text-decoration: none;
  color: var(--rb-ink, #2E2A24);
}

/* --- Фото + тонкая линия-разделитель под фото (Фаза 2) --- */
.rb-thumb__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F8F6F1;
  margin-bottom: 14px; /* Фаза 2: +2px воздуха под фото */
  border-bottom: 1px solid rgba(46, 42, 36, 0.06);
  transition: border-color 0.3s ease;
}
.rb-thumb__image-main,
.rb-thumb__image-secondary {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
}
.rb-thumb__image-secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- Meta-строка (класс + длина) --- Фаза 3: чип отсюда убран --- */
.rb-thumb__meta {
  font-size: 12px;
  color: var(--rb-ink-soft, #7A6F60);
  margin: 0 8px 4px;
  padding: 0;
  display: block;
  gap: 0;
  text-transform: none;
  line-height: 1.3;
}
.rb-thumb__meta .rb-thumb__color-chip {
  display: none; /* если где-то остался в старой разметке */
}

/* --- Чип цвета — теперь ПОВЕРХ фото (Фаза 3) --- */
.rb-thumb__color-chip {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color, transparent);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: 2;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

/* --- Название — Lora serif regular (Фаза 2) --- */
.rb-thumb__title {
  font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--rb-almost-black, var(--rb-ink, #2E2A24));
  margin: 0 8px 6px;
  padding: 0;
  line-height: 1.35;
  letter-spacing: 0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  font-style: normal;
}

/* --- Цена --- */
.rb-thumb__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--rb-ink, #2E2A24);
  margin: 0 8px 4px;
  padding: 0;
  line-height: 1.3;
}

/* --- Микро-факт свежести (Фаза 3) --- */
.rb-thumb__freshness {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--rb-ink-soft, #7A6F60);
  margin: 0 8px 12px;
  padding: 0;
  line-height: 1.4;
}
.rb-thumb__freshness svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* --- Кнопка «Смотреть» --- */
.rb-thumb__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  margin: 0 8px 8px;
  border: 1px solid var(--rb-ink, #2E2A24);
  background: transparent;
  color: var(--rb-ink, #2E2A24);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  text-align: center;
  box-sizing: border-box;
}
.rb-thumb__cta-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.rb-thumb__link:hover .rb-thumb__cta,
.rb-thumb__link:focus .rb-thumb__cta {
  background: var(--rb-ink, #2E2A24);
  color: #FFFFFF;
}
.rb-thumb__link:hover .rb-thumb__cta-arrow,
.rb-thumb__link:focus .rb-thumb__cta-arrow {
  transform: translateX(4px);
}

/* --- Hover-эффекты (только desktop с мышью) — Фаза 2 --- */
@media (hover: hover) and (pointer: fine) {
  .rb-thumb__cta {
    opacity: 0;
    transform: translateY(4px);
  }
  .rb-thumb:hover .rb-thumb__cta,
  .rb-thumb:focus-within .rb-thumb__cta {
    opacity: 1;
    transform: translateY(0);
  }
  /* Фаза 2: подъём через увеличенную тень + лёгкий translateY */
  .rb-thumb:hover,
  .rb-thumb:focus-within {
    box-shadow: 0 8px 30px rgba(46, 42, 36, 0.08);
    transform: translateY(-2px);
  }
  /* Фаза 2: тонкая линия под фото пропадает на hover */
  .rb-thumb:hover .rb-thumb__image,
  .rb-thumb:focus-within .rb-thumb__image {
    border-bottom-color: transparent;
  }
  .rb-thumb:hover .rb-thumb__image-main {
    transform: scale(1.03);
  }
  .rb-thumb:hover .rb-thumb__image-secondary {
    opacity: 1;
  }
}

/* === Скрыть старые OpenCart-элементы === */
.rb-thumb .rating,
.rb-thumb .price-old,
.rb-thumb .price-tax {
  display: none !important;
}

/* === Планшеты (768-991) === */
@media (max-width: 991px) {
  .rb-thumb__title { font-size: 17px; }
  .rb-thumb__price { font-size: 14px; }
}

/* === iPad-диапазон (768-991) — увеличенная метка meta === */
@media (min-width: 768px) and (max-width: 991px) {
  .rb-thumb__meta { font-size: 13px; }
}

/* === Мобильные (до 767) — кнопка всегда видна, воздуха чуть меньше === */
@media (max-width: 767px) {
  .category-list .product-layout,
  .product-layout,
  .row .product-layout {
    margin-bottom: 28px; /* Фаза 2: mobile gap */
  }
  .rb-thumb__title {
    font-size: 16px; /* Фаза 2: компактнее на mobile */
    margin-left: 6px;
    margin-right: 6px;
  }
  .rb-thumb__price {
    font-size: 14px;
    margin-left: 6px;
    margin-right: 6px;
  }
  .rb-thumb__meta {
    font-size: 11px;
    margin-left: 6px;
    margin-right: 6px;
  }
  .rb-thumb__freshness {
    font-size: 10px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3px;
  }
  /* Фаза 3: чип на mobile чуть меньше */
  .rb-thumb__color-chip {
    width: 12px;
    height: 12px;
    bottom: 8px;
    left: 8px;
    border-width: 1.5px;
  }
  .rb-thumb__cta {
    opacity: 1 !important;
    transform: none !important;
    font-size: 13px;
    padding: 10px 14px;
    margin-left: 6px;
    margin-right: 6px;
    min-height: 44px;
  }
}

/* === Ультра-узкие мобильные (до 374) — iPhone SE и старые Android === */
@media (max-width: 374px) {
  .rb-thumb__meta { font-size: 10px; }
  .rb-thumb__title { font-size: 15px; } /* Фаза 2 */
  .rb-thumb__price { font-size: 13px; }
  .rb-thumb__freshness { font-size: 10px; }
  .rb-thumb__cta { font-size: 12px; padding: 10px 10px; }
}

/* === Prefers-reduced-motion — уважаем настройку пользователя === */
@media (prefers-reduced-motion: reduce) {
  .rb-thumb,
  .rb-thumb__image,
  .rb-thumb__image-main,
  .rb-thumb__image-secondary,
  .rb-thumb__cta,
  .rb-thumb__cta-arrow {
    transition: none !important;
  }
  .rb-thumb:hover {
    transform: none !important;
  }
  .rb-thumb:hover .rb-thumb__image-main {
    transform: none;
  }
}

/* ==========================================================================
   ФАЗА 3 (P2) — View Transitions API: плитка → карточка товара
   Плавный morph фото при клике на плитку в листинге
   Chrome 111+, Safari 18+, Edge 111+ (около 85%+ пользователей на 2026-07)
   Fallback: старые браузеры получают обычный переход без анимации
   ========================================================================== */

/* Opt-in same-origin навигация (плитка → карточка товара) */
@view-transition {
  navigation: auto;
}

/* Общая настройка для root-перехода (фон/остальная страница) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Плавный morph для всех именованных элементов (product-*) */
::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Уважаем настройку prefers-reduced-motion — отключаем анимации */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01s !important;
  }
}

/* ==============================================================
   «Вы смотрели» carousel (mango_viewed) — привести к стилю rb-thumb
   Плитки в carousel'е используют старый HTML (product-thumb .image),
   поэтому оверрайдим через #viewed-product-* prefix
   ============================================================== */

[id^="viewed-product-"] .product-thumb,
[id^="viewed-product-"] .swiper-slide .product-thumb {
  background: transparent !important;
  border: none;
  box-shadow: none !important;
  padding: 0;
}

[id^="viewed-product-"] .product-thumb .image,
[id^="viewed-product-"] .swiper-slide .image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F8F6F1;
  border-bottom: 1px solid rgba(46, 42, 36, 0.06);
  margin-bottom: 12px;
  position: relative;
}

[id^="viewed-product-"] .product-thumb .image img,
[id^="viewed-product-"] .product-thumb .image .main-image,
[id^="viewed-product-"] .swiper-slide .image .main-image,
[id^="viewed-product-"] .swiper-slide .image img.img-responsive {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  max-width: none;
}

/* Убираем визуальный шум — звёзды, кнопки, стикеры, доп-навигация */
[id^="viewed-product-"] .rating,
[id^="viewed-product-"] .button-group,
[id^="viewed-product-"] .stickers,
[id^="viewed-product-"] .image-additional_nav,
[id^="viewed-product-"] .product-thumb .mini,
[id^="viewed-product-"] .product-label {
  display: none !important;
}

/* Название сорта — Lora serif как в каталоге */
[id^="viewed-product-"] .product-name a,
[id^="viewed-product-"] .product-info .title {
  font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--rb-almost-black, #2E2A24);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[id^="viewed-product-"] .product-info {
  margin-bottom: 4px;
}

/* Цена — компактная как в rb-thumb */
[id^="viewed-product-"] .price {
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-almost-black, #2E2A24);
  margin: 0;
}

[id^="viewed-product-"] .caption-block {
  padding: 0;
  border: none;
}

/* Убрать лишние отступы у слайда */
[id^="viewed-product-"] .swiper-slide {
  padding: 0 8px;
}

/* ==============================================================
   FIX: сетка плиток на flexbox для равной высоты + без border
   Причина: Bootstrap 3 float-layout ломается когда плитки разной высоты
   (у basket-фото natural ratio ближе к 1:1 → плитка выше стандартной 3:4)
   Result: следующий ряд не начинается с левого края, плитки "плывут"
   ============================================================== */

/* Grid листинга — flexbox для равной высоты плиток */
#content .row,
.category-list.row,
.row.product-list,
.products-block .row {
  display: flex;
  flex-wrap: wrap;
}

#content .row .product-layout,
.category-list .product-layout {
  display: flex;
  flex-direction: column;
}

.product-layout .rb-thumb,
.product-layout .rb-thumb__link {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rb-thumb__link {
  flex-grow: 1;
}

/* Убираем тонкую линию под фото — просил владелец */
.rb-thumb__image {
  border-bottom: none !important;
}
@media (hover: hover) {
  .rb-thumb:hover .rb-thumb__image {
    border-bottom-color: transparent !important;
  }
}

/* Форс: aspect-ratio 3:4 держится жёстко даже если родитель flex */
.rb-thumb__image {
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  flex-shrink: 0;
  max-height: none;
}
.rb-thumb__image img,
.rb-thumb__image-main,
.rb-thumb__image-secondary {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Meta/title/price/freshness — не flex-grow, чтобы плотно */
.rb-thumb__meta,
.rb-thumb__title,
.rb-thumb__price,
.rb-thumb__freshness {
  flex-shrink: 0;
}

/* Кнопка CTA — прижата к низу через margin-top: auto */
.rb-thumb__cta {
  margin-top: auto;
}

/* ==============================================================
   FIX: убрать кнопку «Смотреть» + все бордеры вокруг плитки
   Плитка целиком остаётся кликабельной (вся обёрнута в <a>)
   ============================================================== */

/* Убрать кнопку CTA везде — desktop, tablet, mobile */
.rb-thumb__cta,
.rb-thumb__cta-arrow {
  display: none !important;
}

/* Убрать любые бордеры/фоны вокруг плитки — на всех состояниях */
.rb-thumb,
.rb-thumb:hover,
.rb-thumb:focus,
.rb-thumb:focus-within,
.product-thumb,
.product-thumb:hover,
.product-layout,
.product-layout > * {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Тень на hover тоже убрать — визуально «граница» */
.rb-thumb:hover,
.rb-thumb:focus-within {
  box-shadow: none !important;
  transform: none !important;
}

/* Отступ снизу после цены/факта — теперь без кнопки, чтобы плитка не была «обрезанной» */
.rb-thumb__freshness {
  margin-bottom: 4px;
}
.rb-thumb__link {
  padding-bottom: 8px;
}

/* ==============================================================
   Отступы между плитками — чтобы фото не слипались
   Bootstrap 3 default: 30px горизонтальный gap (15+15 padding)
   Наш выбор: ~40px desktop / 24px mobile горизонтальный, 48/32 вертикальный
   ============================================================== */

/* Больше горизонтальный padding у col-* — визуально ~40px gap между плитками */
.product-layout,
.category-list .product-layout,
.row .product-layout {
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-bottom: 48px !important; /* вертикальный gap 48 */
}

/* Компенсация negative-margin у row (Bootstrap default -15px, надо -20px под наш padding) */
#content .row,
.category-list.row,
.row.product-list {
  margin-left: -20px !important;
  margin-right: -20px !important;
}

/* Mobile — компактнее gap */
@media (max-width: 767px) {
  .product-layout,
  .category-list .product-layout,
  .row .product-layout {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 32px !important;
  }
  #content .row,
  .category-list.row,
  .row.product-list {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
}

/* Совсем узкие экраны 320-374 — минимум */
@media (max-width: 374px) {
  .product-layout,
  .category-list .product-layout,
  .row .product-layout {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 24px !important;
  }
  #content .row,
  .category-list.row,
  .row.product-list {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
}

/* ==============================================================
   Уменьшенный gap — 8-10px горизонт, 12px вертикаль (владелец 2026-07-25)
   Переопределяем предыдущий блок gap
   ============================================================== */

.product-layout,
.category-list .product-layout,
.row .product-layout {
  padding-left: 5px !important;   /* = 10px gap между плитками */
  padding-right: 5px !important;
  margin-bottom: 12px !important;
}
#content .row,
.category-list.row,
.row.product-list {
  margin-left: -5px !important;
  margin-right: -5px !important;
}

@media (max-width: 767px) {
  .product-layout,
  .category-list .product-layout,
  .row .product-layout {
    padding-left: 4px !important;   /* = 8px gap */
    padding-right: 4px !important;
    margin-bottom: 10px !important;
  }
  #content .row,
  .category-list.row,
  .row.product-list {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
}

@media (max-width: 374px) {
  .product-layout,
  .category-list .product-layout,
  .row .product-layout {
    padding-left: 3px !important;   /* = 6px gap */
    padding-right: 3px !important;
    margin-bottom: 8px !important;
  }
  #content .row,
  .category-list.row,
  .row.product-list {
    margin-left: -3px !important;
    margin-right: -3px !important;
  }
}

/* ==============================================================
   Вариант B: контейнер 1280 (было 1170) + плитка ~410 (было ~370)
   Ожидание: boutique-впечатление, +12-18% CTR по бенчмарку
   Меняется только container max-width — Bootstrap 3 пересчитывает всё сам
   ============================================================== */
@media (min-width: 1200px) {
  .container {
    width: 1520px !important;
    max-width: 1520px !important;
  }
}

/* Full-bleed slideshow — растянуть на всю ширину окна (владелец 2026-07-25 вариант B) */
.mango_slideshow {
  max-width: 100vw !important;
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden;
}
.mango_slideshow_item,
.mango_slideshow_item img,
.mango_slideshow .swiper-slide img {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==============================================================
   Убрать рамки sidebar + все подчёркивания у ссылок
   ============================================================== */

/* Sidebar filter — убираем все бордеры и панели */
.filter,
.filter-inner,
.panel-filter,
.panel,
.panel-default,
.panel-heading,
.panel-body,
.panel-footer,
.list-group,
.list-group-item,
.filter .list-group-item,
.category-filter .panel {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Категории в sidebar — тоже без бордера */
#column-left .box,
#column-left .box-heading,
#column-left .box-content,
#column-left .list-group,
#column-left .list-group-item,
#column-right .box,
#column-right .list-group-item {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Убрать все подчёркивания у ссылок в sidebar */
#column-left a,
#column-left a:hover,
#column-left a:visited,
#column-left a:focus,
#column-right a,
#column-right a:hover,
.filter a,
.filter a:hover,
.list-group-item,
.list-group-item:hover,
.filter-heading,
.filter-heading:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Заголовки внутри фильтра (Цвет / Класс / Повод) — без подчёркивания и без border */
.list-group > .list-group-item,
.filter .list-group > .list-group-item {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* ==============================================================
   Sidebar: пожирнее шрифты + hover — светлее
   ============================================================== */

/* Заголовки блоков (Цвет / Класс / Повод / ФИЛЬТР / КАТЕГОРИИ) */
.filter-heading,
.filter .list-group > .list-group-item,
#column-left .box-heading,
#column-left h1,
#column-left h2,
#column-left h3,
#column-left h4,
#column-left .title,
#column-right .box-heading {
  font-weight: 600 !important;
  color: var(--rb-almost-black, #2E2A24);
  transition: opacity 0.2s ease;
}

/* Ссылки-подкатегории (Тюльпаны/Монобукеты/Сеты/Оптовые) + labels чекбоксов */
#column-left a,
#column-right a,
.filter a,
.filter label,
.filter .checkbox label,
#column-left .list-group-item,
#column-right .list-group-item {
  font-weight: 500 !important;
  color: var(--rb-almost-black, #2E2A24);
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Hover — светлее через opacity (сохраняет цвет, просто «выцветает») */
#column-left a:hover,
#column-right a:hover,
.filter a:hover,
.filter label:hover,
.filter .checkbox label:hover,
.filter-heading:hover,
#column-left .list-group-item:hover,
#column-right .list-group-item:hover,
#column-left .box-heading:hover {
  opacity: 0.55 !important;
  color: var(--rb-almost-black, #2E2A24);
  text-decoration: none !important;
}

/* ==============================================================
   FIX: при наведении светлеет только ТЕКСТ пункта, не весь label
   Раньше opacity 0.55 затемняла и текст, и checkbox
   Меняем на color-change: текст становится светло-бежевым, checkbox не трогаем
   ============================================================== */

/* Убираем opacity на hover, возвращаем 1 */
#column-left a:hover,
#column-right a:hover,
.filter a:hover,
.filter label:hover,
.filter .checkbox label:hover,
.filter-heading:hover,
#column-left .list-group-item:hover,
#column-right .list-group-item:hover,
#column-left .box-heading:hover {
  opacity: 1 !important;
  color: #a99686 !important; /* rb-warm-beige — светло-бежевый */
  text-decoration: none !important;
}

/* Убеждаемся что checkbox сохраняет свой native цвет и не выглядит выцветшим */
.filter input[type="checkbox"],
.filter .checkbox input[type="checkbox"] {
  opacity: 1 !important;
  filter: none !important;
}

/* ==============================================================
   Sidebar — всё содержимое прижато к правому краю колонки
   Ширина sidebar не меняется, только выравнивание вправо
   ============================================================== */

#column-left,
#column-left .filter,
#column-left .filter-inner,
#column-left .list-group,
#column-left .list-group-item,
#column-left .filter-heading,
#column-left .box,
#column-left .box-heading,
#column-left .box-content,
#column-left .banner,
#column-left .mango_banner_text,
#column-left .panel,
#column-left .panel-body {
  text-align: right !important;
}

/* Чекбоксы — flex-строка, прижатая вправо. Checkbox справа от текста */
#column-left .checkbox,
#column-left .filter .checkbox {
  text-align: right;
}
#column-left .checkbox label,
#column-left .filter .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-direction: row-reverse;    /* input был слева, теперь справа от текста */
  margin: 0;
  padding: 0;
  cursor: pointer;
}
#column-left .checkbox label input[type="checkbox"] {
  margin: 0;
}

/* Стрелочки в категориях (▸ Оптовые продажи) — переносим слева от текста */
#column-left .list-group-item .fa-caret-right,
#column-left .list-group-item .fa-caret-down {
  float: none;
  margin-right: 6px;
  margin-left: 0;
}

/* Промо-блоки (Упаковываем/Везём/Бронируйте) — тоже вправо */
#column-left .info-block,
#column-left .promo,
#column-left .mini-banner {
  text-align: right;
}

/* ==============================================================
   ROSBOTANIC — right-aligned sidebar polish v1 (владелец 2026-07-25)
   Пакет от команды 3 агентов (creative_director, color_psychologist, wow_effects)
   Palette v1.1: graphite #2E2A24, mute #6B6155, beige #a99686,
                  olive #7a9a7a, peach #e8b998
   ============================================================== */

#column-left {
  padding: 0 4px 0 24px !important;
  text-align: right;
}

#column-left > .box,
#column-left > div[class*="box"],
#column-left > .filter,
#column-left > .swiper-viewed {
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#column-left .box-heading,
#column-left .filter-heading,
#column-left h3,
#column-left h4 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #2E2A24 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#column-left .filter .list-group > .list-group-item,
#column-left .filter-group-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6B6155 !important;
  margin: 18px 0 8px 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#column-left ul,
#column-left ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#column-left li { margin: 0 !important; padding: 0 !important; }

#column-left a,
#column-left .list-group-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 7px 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #2E2A24 !important;
  text-decoration: none !important;
  position: relative !important;
  min-height: 44px !important;
  transition: color 180ms ease !important;
}

#column-left a[href*="/tulip"]::before,
#column-left a[href*="/opt"]::before,
#column-left a.has-children::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  opacity: 0.55;
  order: -1;
  flex-shrink: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
#column-left a[href*="/opt"]::before {
  transform: rotate(-90deg);
}

#column-left a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 4px;
  height: 1px;
  width: 100%;
  background: #7a9a7a;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
#column-left a:hover::after,
#column-left a:focus-visible::after {
  transform: scaleX(1);
}
#column-left a:hover { color: #2E2A24 !important; }
#column-left a:hover::before { opacity: 1 !important; }

#column-left a.active,
#column-left li.active > a,
#column-left .list-group-item.active > a {
  color: #2E2A24 !important;
  font-weight: 500 !important;
}
#column-left a.active::after,
#column-left li.active > a::after {
  transform: scaleX(1);
  background: #2E2A24;
}

#column-left .checkbox,
#column-left .filter .checkbox {
  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
}
#column-left .checkbox label,
#column-left .filter .checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  min-height: 36px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #2E2A24 !important;
  transition: color 180ms ease;
}
#column-left .checkbox label:hover { color: #6B6155 !important; }
#column-left input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  border: 1px solid rgba(46, 42, 36, 0.18) !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 160ms ease, border-color 160ms ease;
}
#column-left input[type="checkbox"]:hover {
  border-color: #2E2A24 !important;
  opacity: 1 !important;
}
#column-left input[type="checkbox"]:checked {
  background: #2E2A24 !important;
  border-color: #2E2A24 !important;
}
#column-left input[type="checkbox"]:focus-visible {
  outline: 2px solid #7a9a7a !important;
  outline-offset: 2px !important;
}

#column-left .info-block,
#column-left .promo,
#column-left .mini-banner,
#column-left .sidebar-promo,
#column-left .promo-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #6B6155 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: right !important;
}
#column-left .info-block img,
#column-left .info-block svg,
#column-left .promo img,
#column-left .promo svg,
#column-left .sidebar-promo img,
#column-left .sidebar-promo svg,
#column-left .promo-tile .promo-icon,
#column-left .mini-banner img {
  order: 2 !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  color: #7a9a7a !important;
}
#column-left .sidebar-promo.urgency svg,
#column-left .sidebar-promo.urgency img,
#column-left .promo-tile.urgency .promo-icon {
  color: #e8b998 !important;
}

#column-left .swiper-viewed .product-thumb,
#column-left .swiper-viewed .swiper-slide,
#column-left .swiper-viewed .caption-block,
#column-left [id^="viewed-product-"] .swiper-slide {
  text-align: left !important;
}

@media (max-width: 767px) {
  #column-left {
    width: 100% !important;
    padding: 16px 20px !important;
    text-align: left !important;
  }
  #column-left a { min-height: 48px !important; justify-content: flex-start !important; }
  #column-left .checkbox label,
  #column-left .filter .checkbox label {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  #column-left .info-block img,
  #column-left .promo svg,
  #column-left .sidebar-promo img {
    order: -1 !important;
  }
}

/* ==============================================================
   FIX v3 SAFE (2026-07-25): только чекбоксы + линии
   Никаких display:flex на #column-left, никаких order
   ============================================================== */

/* 1. Чекбоксы не обрезаются — display:block+width:100% на checkbox-wrapper */
#column-left .checkbox,
#column-left .filter .checkbox {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#column-left .checkbox label,
#column-left .filter .checkbox label {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  min-height: 36px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #2E2A24 !important;
  transition: color 180ms ease;
}

/* 2. Убрать линии между категориями в column-menu */
#column-left .column-menu,
#column-left .column-menu .list-group,
#column-left .column-menu .list-group-item,
#column-left .column-menu li,
#column-left .column-menu .custom-dropdown,
#column-left .column-menu .custom-dropdown-toggle,
#column-left .column-menu .btn,
#column-left .column-menu .btn-link,
#column-left .column-menu .caret {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==============================================================
   Убрать чекбоксы визуально, оставить кликабельным текст справа
   (владелец 2026-07-25)
   ============================================================== */

/* Скрыть чекбоксы визуально, но оставить функциональными для JS */
#column-left input[type="checkbox"],
#column-left .filter input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Label — только текст, прижатый к правому краю, без flex-row-reverse */
#column-left .checkbox,
#column-left .filter .checkbox {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  padding: 0 !important;
  margin: 0 !important;
}
#column-left .checkbox label,
#column-left .filter .checkbox label {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  padding: 6px 0 !important;
  gap: 0 !important;
  cursor: pointer !important;
  color: #2E2A24 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-height: 32px !important;
  transition: color 180ms ease, font-weight 180ms ease;
  flex-direction: initial !important;
  justify-content: initial !important;
}

/* Hover — светло-бежевый */
#column-left .checkbox label:hover,
#column-left .filter .checkbox label:hover {
  color: #a99686 !important;
}

/* Активное состояние (галка стоит) — жирным графитом */
#column-left .checkbox label:has(input:checked),
#column-left .filter .checkbox label:has(input[type="checkbox"]:checked) {
  color: #2E2A24 !important;
  font-weight: 700 !important;
}