/* ======================================================================
   Rosbotanic — «Вы смотрели» (rb-viewed)
   Компактный блок недавних просмотров под контентом категории.
   Спека: карточки 120×120 (desktop), 88×88 (mobile), overlay-цена,
   без названия/бейджей/кнопок. Mobile-first.
   Создан: 2026-07-28 (viewed_compact_2026-07-28_1440)
   ====================================================================== */

/* --- 1. Обёртка блока ------------------------------------------------- */
.rb-viewed {
  margin: 32px 0 24px;
  padding: 0;
}

/* Заголовок */
.rb-viewed .rb-viewed__heading {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rb-ink, #2E2A24);
  margin: 0 0 16px 0;
  padding: 0;
  border: none;
  text-transform: none;
  letter-spacing: 0;
}

/* --- 2. Трек (grid на десктопе, scroll на мобиле) --------------------- */
.rb-viewed .rb-viewed__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* Firefox */
  padding: 4px 0 8px;                    /* воздух под hover-shift + скроллбар */
  margin: 0 -4px;                        /* чтобы edge-карточка не обрезалась hover-эффектом */
}
.rb-viewed .rb-viewed__track::-webkit-scrollbar { display: none; }  /* WebKit */

/* --- 3. Плитка -------------------------------------------------------- */
.rb-viewed .rb-viewed__item {
  flex: 0 0 auto;
  width: 88px;                           /* mobile-first */
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  transition: transform 240ms ease, box-shadow 240ms ease;
  will-change: transform;
  opacity: 0;
  animation: rb-viewed-fadein 320ms ease forwards;
  outline: none;
}

/* Focus для клавиатурной навигации */
.rb-viewed .rb-viewed__item:focus-visible {
  box-shadow: 0 0 0 2px var(--rb-lavender-glow, rgba(207, 201, 232, 0.6));
}

/* Fade-in */
@keyframes rb-viewed-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Отключаем анимацию если пользователь просил */
@media (prefers-reduced-motion: reduce) {
  .rb-viewed .rb-viewed__item {
    animation: none;
    opacity: 1;
    transition: none;
  }
}

/* --- 4. Фото + overlay-цена ------------------------------------------- */
.rb-viewed .rb-viewed__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #F8F6F1;
}

.rb-viewed .rb-viewed__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 320ms ease;
}

/* Цена — overlay в правом нижнем углу */
.rb-viewed .rb-viewed__price {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(46, 42, 36, 0.85);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;                  /* не блокирует клик по плитке */
  letter-spacing: 0;
  font-family: inherit;
}

/* --- 5. Hover (только на устройствах с курсором) ---------------------- */
@media (hover: hover) {
  .rb-viewed .rb-viewed__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(46, 42, 36, 0.08);
  }
  .rb-viewed .rb-viewed__item:hover .rb-viewed__image img {
    transform: scale(1.02);
  }
}

/* --- 6. Desktop breakpoint (≥768) — grid из 5, карточка 120×120 ------ */
@media (min-width: 768px) {
  .rb-viewed .rb-viewed__track {
    gap: 16px;
    overflow-x: visible;                 /* без горизонтального скролла */
    scroll-snap-type: none;
    padding: 4px 0 4px;
    margin: 0;
    flex-wrap: wrap;
  }
  .rb-viewed .rb-viewed__item {
    width: 120px;
  }
  .rb-viewed .rb-viewed__price {
    font-size: 12px;
    padding: 4px 8px;
    right: 8px;
    bottom: 8px;
  }
}

/* --- 7. Ограничение количества видимых плиток (desktop) --------------- */
/* На десктопе показываем ровно 5 в ряду; остальные — новый ряд если помещаются */
/* Ширина ряда: 5×120 + 4×16 = 664px — умещается в 992+ container */

/* --- 8. Скрыть старые правила из thumb-redesign.css ------------------- */
/* thumb-redesign.css содержит [id^="viewed-product-"] правила для старой
   структуры (product-thumb .image, .caption-block, .product-info).
   Новый шаблон эти классы НЕ использует, но у #viewed-product-N остался
   как id обёртки трека — правила с этим id ссылаются на .product-thumb,
   которого больше нет, поэтому они безвредны (селектор не матчится).
   На всякий случай — сброс потенциальных наследуемых свойств: */

.rb-viewed .rb-viewed__track,
.rb-viewed .rb-viewed__item {
  text-align: left !important;           /* против #column-left text-align:right */
}

/* --- 9. Нейтрализация родительских .carousel-product отступов -------- */
/* stylesheet.css задаёт .container .carousel-product { margin: 0 -15px }
   Для rb-viewed отступы контролируем сами (margin-top 32 / margin-bottom 24) */
.container .carousel-product.rb-viewed,
.container-fluid .carousel-product.rb-viewed,
#content .carousel-product.rb-viewed {
  margin: 32px 0 24px !important;
  padding: 0 !important;
}

/* --- 10. Стрелки навигации (rb-viewed__nav) — desktop only -----------
   Добавлено 2026-07-28 (viewed_arrows_2026-07-28_0500)
   Wrapper .rb-viewed__wrapper — position: relative для абс-стрелок
   На mobile (<1024px) стрелки скрыты — свайп пальцем.                */

.rb-viewed .rb-viewed__wrapper {
  position: relative;
}

.rb-viewed .rb-viewed__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(46,42,36,0.12);
  box-shadow: 0 2px 8px rgba(46,42,36,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rb-ink, #2E2A24);
  transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
  z-index: 5;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.rb-viewed .rb-viewed__nav--prev { left: -20px; }
.rb-viewed .rb-viewed__nav--next { right: -20px; }

.rb-viewed .rb-viewed__nav:hover:not(:disabled) {
  background: #FAFAF7;
  border-color: rgba(46,42,36,0.24);
}

.rb-viewed .rb-viewed__nav:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.rb-viewed .rb-viewed__nav:focus-visible {
  outline: 2px solid var(--rb-red, #C85A5A);
  outline-offset: 2px;
}

.rb-viewed .rb-viewed__nav svg {
  display: block;
}

/* Скрыть стрелки на mobile/tablet — там свайп пальцем работает */
@media (max-width: 1023px) {
  .rb-viewed .rb-viewed__nav {
    display: none;
  }
}

/* На desktop track должен скроллиться (обычный overflow-x auto),
   а не wrap: правим правило из блока 6 */
@media (min-width: 1024px) {
  .rb-viewed .rb-viewed__track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
  }
}