/* ═══════════════════════════════════════
   MBX Retro — Warm Retrowave Glass
   ═══════════════════════════════════════ */

html { scroll-behavior: smooth; overflow-x: hidden; }
/* iOS Safari: clip вместо hidden уменьшает глюки position:fixed у шапки при горизонтальном скролле дочерних блоков */
@supports (overflow: clip) {
  html { overflow-x: clip; }
}
body { overflow-x: hidden; }

/* Full-page retrowave background — матовое стекло */
#bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#bg-video-wrap .bg-image,
#bg-video-wrap img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(12px);
  transform: scale(1.05);
}
#bg-video-wrap .bg-frost-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 24, 0.5);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0618; }
::-webkit-scrollbar-thumb { background: #4a3c80; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6e60a0; }

/* Modal scrollbars — thin, inside rounded corners */
.modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.modal-scroll::-webkit-scrollbar { width: 4px; }
.modal-scroll::-webkit-scrollbar-track { background: transparent; margin-top: 12px; margin-bottom: 12px; }
.modal-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

::selection { background: rgba(255, 149, 72, 0.25); color: #fff; }

/* Wider content on large viewports — override Tailwind max-w-7xl (1280px) */
@media (min-width: 1400px) {
  .max-w-7xl { max-width: 88rem; }   /* 1408px */
}
@media (min-width: 1700px) {
  .max-w-7xl { max-width: 100rem; }  /* 1600px */
}
@media (min-width: 2000px) {
  .max-w-7xl { max-width: 112rem; }  /* 1792px */
}
*:focus-visible { outline: 2px solid rgba(160, 144, 208, 0.4); outline-offset: 2px; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

a, button, input, textarea, select { transition: all 0.3s ease; }
img { transition: transform 0.5s ease, opacity 0.3s ease; }

/* Поиск и сортировка — поверх категорий и карточек */
#search-dropdown.search-dropdown-z,
#sort-menu.search-dropdown-z { z-index: 200; }

/* Выпадающий поиск — непрозрачный тёмный фон как у каталога и меню */
html:not(.light-theme) #search-dropdown {
  background: rgba(12, 8, 28, 0.98) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Metallic background for product card images */
.metallic-bg {
  background: linear-gradient(145deg, #8a8a8e 0%, #b8b8bc 18%, #9a9a9e 36%, #cdcdd0 54%, #a8a8ac 72%, #bcbcc0 90%, #9e9ea2 100%);
}

/* Product grid — auto-fill keeps cards the same size at any window width */
.product-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  }
}
/* Максимум 11 колонок на широких экранах (4K, 8K) — компактные карточки как на скрине */
@media (min-width: 1500px) {
  .product-grid {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
}

/* Текст количества */
.stock-tiny {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

/* Каталог: слева цена+₽ вплотную, справа «N шт» без обрезки многоточием */
.catalog-card-price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem;
  max-width: 100%;
  min-width: 0;
  font-size: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.catalog-card-price-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04em;
  min-width: 0;
  flex-shrink: 1;
}
.catalog-card-price-num {
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-card-price-rub {
  flex-shrink: 0;
}
.catalog-card-price-stock {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.48);
}
.catalog-card-price--preorder .catalog-card-price-stock {
  color: rgba(216, 180, 254, 0.75);
}
@media (min-width: 640px) {
  .catalog-card-price-line {
    font-size: 11px;
  }
}

/* Значки форм-фактора */
.ff-badge {
  width: 9px;
  height: 9px;
  color: #ef4444;
  flex-shrink: 0;
  opacity: 0.8;
}
.ff-badge.ff-rect {
  width: 7px;
  height: 9px;
}
@media (min-width: 640px) {
  .ff-badge { width: 11px; height: 11px; }
  .ff-badge.ff-rect { width: 9px; height: 11px; }
}

/* Лайк на карточке каталога: прямой потомок .product-card (не внутри img-box — иначе карусель/z-index могут перекрыть на десктопе) */
.product-card > .product-card-fav-on-img {
  position: absolute !important;
  z-index: 25 !important;
  top: 0.35rem;
  right: 0.35rem;
  padding: 0;
  margin: 0;
  background: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  color: #ef4444 !important;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
}
.product-card > .product-card-fav-on-img .product-card-fav-on-img__svg {
  display: block;
  width: 15px;
  height: 15px;
  stroke: #ef4444;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.product-card > .product-card-fav-on-img.text-warm-400 .product-card-fav-on-img__svg {
  fill: #ef4444;
  stroke: #ef4444;
}
@media (max-width: 639px) {
  .product-card > .product-card-fav-on-img {
    top: 0.25rem;
    right: 0.25rem;
  }
  .product-card > .product-card-fav-on-img .product-card-fav-on-img__svg {
    width: 14px;
    height: 14px;
  }
}

/* Контейнер картинки карточки — ::before держит высоту в потоке, чтобы блок не схлопывался при двух absolute img */
.product-card-img-box {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
}
.product-card-img-box::before {
  content: '';
  display: block;
  padding-bottom: 100%; /* 1:1 — квадратные превью, компактные карточки */
}

/*
 * Размытый увеличенный фон за фото в каталоге (квадратные карточки и карусель).
 * ВАЖНО: базовые правила здесь; для круглого FF только clip-path ниже.
 * Не удалять и не «упрощать» без явного запроса владельца витрины.
 */
.product-card-img-box > .card-img-blur-layer,
.product-card-img-box .card-carousel .card-img-blur-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(1.2);
  -webkit-filter: blur(18px) saturate(1.2);
  transform: scale(1.12);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

/* Blurred image background — та же картинка увеличена и размыта */
.img-blur-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(20px) saturate(1.2);
  transform: scale(1.15);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Фото в карточке — абсолютное центрирование (не зависит от flex / height: 100%) */
.product-card-main-img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 1;
  pointer-events: none;
}

/* Круглый FF: к маске круга — только clip-path поверх базового .card-img-blur-layer */
.product-card-img-box--round .card-img-blur-layer {
  border-radius: 0;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.product-card-img-box--round .product-card-main-img.catalog-round-fill {
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  /* cover: металл/белый и прямоугольный композит полностью заполняют круг до clip-path */
  object-fit: cover !important;
  border-radius: 0 !important;
  -webkit-clip-path: circle(50% at 50% 50%) !important;
  clip-path: circle(50% at 50% 50%) !important;
  z-index: 1;
}

/* Админка — превью круглых материалов: только фото, без blur-слоя (каталог по-прежнему с blur) */
.admin-preview-img-box--round {
  position: relative;
  width: 7rem;
  height: 7rem;
  overflow: hidden;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.admin-preview-main-img-round {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* Админка — список товаров: круглое превью как в карточке каталога */
.admin-products-thumb-wrap--round {
  overflow: hidden;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.admin-products-thumb-img--round {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Дашборд — «Последние добавленные», круглое превью в aspect-square */
.admin-dashboard-recent-img--round {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Модалка товара: круглый ФФ — то же заполнение круга, что и в каталоге */
#pm-main-img-wrap.pm-main-img-wrap--round .img-blur-bg {
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
#pm-main-img-wrap.pm-main-img-wrap--round #pm-main-img.pm-modal-round-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: auto;
  object-fit: cover !important;
  -webkit-clip-path: circle(50% at 50% 50%) !important;
  clip-path: circle(50% at 50% 50%) !important;
  z-index: 1;
}

/* Card image carousel — внутри product-card-img-box накладывается на ::before */
.product-card-img-box .card-carousel {
  position: absolute;
  inset: 0;
}
.card-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.card-carousel > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card-carousel > div.active-slide {
  opacity: 1;
  pointer-events: auto;
}

/* Carousel indicator dots */
.card-dots {
  z-index: 10;
  pointer-events: none;
}
.card-dot {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.card-dot.active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.4);
}

/* ══════════════════════════════════
   STARFIELD
   ══════════════════════════════════ */

.stars-bg {
  background-color: #0a0618;
  background-image: none;
}

/* ══════════════════════════════════
   NAV — GLASS
   ══════════════════════════════════ */

/* Fallback for browsers without backdrop-filter (Firefox < 103, old Safari) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-glass, .glass, .modal-glass, .admin-glass, .admin-glass-solid, .login-glass,
  .catalog-dropdown-panel .glass, .toast-glass { background: rgba(12, 8, 28, 0.92) !important; }
}

/* z-index здесь: класс z-[300] из шаблона не всегда попадает в сборку tailwind.css */
.nav-glass {
  z-index: 300;
  background: rgba(40, 30, 72, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  /* iOS Safari: отдельный композитный слой — шапка остаётся прижатой к верху визуального viewport */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.nav-link { transition: color 0.3s ease; }

.nav-btn-accent {
  background: rgba(160, 144, 208, 0.15);
  border: 1px solid rgba(160, 144, 208, 0.2);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 16px; border-radius: 10px; font-weight: 500;
  transition: all 0.3s ease;
}
.nav-btn-accent:hover {
  background: rgba(160, 144, 208, 0.25);
  border-color: rgba(160, 144, 208, 0.35);
}

/* ══════════════════════════════════
   CATALOG DROPDOWN
   ══════════════════════════════════ */

.catalog-dropdown-panel {
  z-index: 200;
  transform: translateY(4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.group\/cat:hover .catalog-dropdown-panel {
  transform: translateY(0);
}

/* Dark theme — matte dropdown */
.catalog-dropdown-panel .glass {
  background: rgba(14, 10, 32, 0.92) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Light theme — matte dropdown */
html.light-theme .catalog-dropdown-panel .glass {
  background: rgba(210,202,192,0.95) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
html.light-theme .catalog-dropdown-panel .glass .text-white\/30,
html.light-theme .catalog-dropdown-panel .glass .text-white\/40 {
  color: var(--lt-muted) !important;
}
html.light-theme .catalog-dropdown-panel .glass a,
html.light-theme .catalog-dropdown-panel .glass button {
  color: var(--lt-text) !important;
}
html.light-theme .catalog-dropdown-panel .glass a:hover,
html.light-theme .catalog-dropdown-panel .glass button:hover {
  color: var(--lt-accent) !important;
}

/* Catalog dropdown UI tokens */
.nav-dropdown-shell {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}

/* style.css идёт после tailwind — иначе overflow:hidden у shell затирает overflow-y-auto на панелях */
#catalog-filters-panel.nav-dropdown-shell,
#mobile-menu.nav-dropdown-shell {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-dropdown-surface {
  background: rgba(12, 8, 28, 0.37);
  backdrop-filter: blur(30px) saturate(1.24);
  -webkit-backdrop-filter: blur(30px) saturate(1.24);
  isolation: isolate;
}
.nav-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0;
}
.nav-dropdown-list-right {
  align-items: stretch;
}
.nav-dropdown-caption {
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-dropdown-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-dropdown-link-right {
  text-align: right;
  padding-right: 0;
  padding-left: 0.65rem;
}
.nav-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
}
.nav-dropdown-link-compact {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.nav-dropdown-link-active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffb070;
  font-weight: 600;
}
.nav-dropdown-link-warm {
  color: #ffb070;
}
.nav-dropdown-link-warm:hover {
  background: rgba(255, 176, 112, 0.1);
  color: #ffc79e;
}
.nav-dropdown-link-blue {
  color: #7db2ff;
}
.nav-dropdown-link-blue:hover {
  background: rgba(125, 178, 255, 0.1);
  color: #a8cbff;
}
.nav-dropdown-count {
  margin-left: 0.75rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.34);
  font-size: 0.8rem;
}
.nav-dropdown-note {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.8125rem;
  line-height: 1.2rem;
}
html.light-theme .nav-dropdown-shell {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 36px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.35);
}
html.light-theme .nav-dropdown-surface {
  background: rgba(230, 225, 218, 0.36) !important;
  backdrop-filter: blur(28px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
}
html.light-theme .nav-dropdown-caption {
  color: rgba(26, 20, 40, 0.45);
}
html.light-theme .nav-dropdown-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}
html.light-theme .nav-dropdown-link {
  color: rgba(26, 20, 40, 0.82);
}
html.light-theme .nav-dropdown-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(26, 20, 40, 0.96);
}
html.light-theme .nav-dropdown-link-active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--lt-accent);
}
html.light-theme .nav-dropdown-link-warm {
  color: var(--lt-accent) !important;
}
html.light-theme .nav-dropdown-link-warm:hover {
  background: rgba(192, 80, 16, 0.08);
  color: var(--lt-accent2) !important;
}
html.light-theme .nav-dropdown-link-blue {
  color: #2563eb !important;
}
html.light-theme .nav-dropdown-link-blue:hover {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8 !important;
}
html.light-theme .nav-dropdown-count {
  color: rgba(26, 20, 40, 0.4);
}
html.light-theme .nav-dropdown-note {
  color: var(--lt-text3) !important;
}

/* ══════════════════════════════════
   HERO
   ══════════════════════════════════ */

.hero-banner { position: relative; overflow: hidden; }
.hero-banner img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center center;
}
.hero-banner video {
  width: 100%; display: block;
  object-fit: contain;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(10, 6, 24, 0.4) 85%,
    #0a0618 100%
  );
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }

/* Retro title glow */
.retro-glow {
  position: relative;
}
.retro-glow::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff9548, #e879a8, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(12px);
  opacity: 0.4;
  pointer-events: none;
}

/* ══════════════════════════════════
   GLASS
   ══════════════════════════════════ */

.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-hover {
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.glass-hover:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════
   PRODUCT CARD
   ══════════════════════════════════ */

.product-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 176, 112, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Каталог: карточки */
html:not(.light-theme) main .product-card.glass {
  background: rgba(35, 30, 52, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.1);
}
html:not(.light-theme) main .product-card:hover {
  background: rgba(45, 38, 68, 0.75) !important;
  border-color: rgba(255, 176, 112, 0.22);
}

/* Fav button overlay on product card image */
.product-card .fav-btn { opacity: 0.85; }
.product-card:hover .fav-btn { opacity: 1; }

/* ══════════════════════════════════
   BUTTONS
   ══════════════════════════════════ */

.btn-warm {
  background: linear-gradient(135deg, #ff9548, #d088c0);
  color: white; font-weight: 600; border: none;
  transition: all 0.3s ease;
}
.btn-warm:hover {
  box-shadow: 0 4px 24px rgba(255, 149, 72, 0.3);
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.btn-warm:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500; transition: all 0.3s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: white;
}

/* ══════════════════════════════════
   INPUTS
   ══════════════════════════════════ */

.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.input-glass:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 176, 112, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(255, 176, 112, 0.08);
}

/* ══════════════════════════════════
   TOAST
   ══════════════════════════════════ */

.toast-glass {
  background: rgba(30, 20, 72, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════
   DARK THEME — OPAQUE MODALS
   ══════════════════════════════════ */

/* Modal container glass — translucent glass with readable text */
:not(.light-theme) .modal-glass,
:not(.light-theme) #request-modal > .glass,
:not(.light-theme) #contact-modal > .glass,
:not(.light-theme) #preorder-modal .modal-glass,
:not(.light-theme) #preorder-modal > .modal-overlay + .glass {
  background: rgba(12, 8, 28, 0.82) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Request & contact modals — they use .glass directly, not .modal-glass */
:not(.light-theme) #request-modal .relative.glass,
:not(.light-theme) #contact-modal .relative.glass,
:not(.light-theme) #preorder-modal .relative.glass {
  background: rgba(12, 8, 28, 0.82) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Sticky headers inside dark modals — slightly denser so text below doesn't bleed */
:not(.light-theme) .modal-glass .modal-sticky-header,
:not(.light-theme) .modal-glass .sticky.glass {
  background: rgba(12, 8, 28, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Inner glass panels inside dark modals */
:not(.light-theme) .modal-glass .glass:not(.modal-sticky-header):not(.sticky),
:not(.light-theme) .modal-glass .input-glass {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Product cards inside modal */
:not(.light-theme) .modal-glass .product-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Favorites modal — same card style as catalog */
html:not(.light-theme) #favorites-modal .product-card.glass {
  background: rgba(35, 30, 52, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.1);
}
html:not(.light-theme) #favorites-modal .product-card:hover {
  background: rgba(45, 38, 68, 0.75) !important;
  border-color: rgba(255, 176, 112, 0.22);
}

/* Modal overlays (backdrop behind modal) — slightly darker for contrast */
:not(.light-theme) .modal-overlay,
:not(.light-theme) #request-overlay,
:not(.light-theme) #contact-overlay,
:not(.light-theme) #vsos-lb-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Cookie consent banner */
:not(.light-theme) #cookie-consent .glass {
  background: rgba(12, 8, 28, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.35) !important;
}

/* ══════════════════════════════════
   MODAL STICKY HEADER — auto-hide
   ══════════════════════════════════ */

.modal-sticky-header {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-sticky-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ══════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.6s ease forwards; }

/* /wishlist — только opacity: transform в fade-in даёт на iOS артефакты с fixed-шапкой рядом с overflow-x */
@keyframes wishlistFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.wishlist-fade {
  animation: wishlistFadeIn 0.55s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .wishlist-fade {
    animation: none !important;
    opacity: 1 !important;
  }
}

.stagger > * { opacity: 0; animation: fadeInUp 0.5s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.4s; }
.stagger > *:nth-child(n+9) { animation-delay: 0.45s; }

/* ══════════════════════════════════
   MOBILE / TOUCH OPTIMIZATION
   ══════════════════════════════════ */

/* Catalog dropdown — open state (mobile click) */
#catalog-dropdown.catalog-open .catalog-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile: ensure background covers */
@media (max-width: 640px) {
  #bg-video-wrap .bg-image { min-height: 100vh; object-fit: cover; }
}

/* Mobile nav — keep same glass as desktop */
@media (max-width: 640px) {
  .mobile-menu-bar {
    background: rgba(255, 255, 255, 0.95) !important;
  }
  #catalog-toggle {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

/* Гамбургер: z-[200] из шаблона может отсутствовать в tailwind.css */
#mobile-menu {
  z-index: 200;
}

/* Mobile and catalog dropdown menus — shared surface */
.mobile-menu-solid,
.catalog-menu-solid {
  background: transparent;
}
html:not(.light-theme) .mobile-menu-solid,
html:not(.light-theme) .catalog-menu-solid {
  background: rgba(12, 8, 28, 0.37) !important;
  backdrop-filter: blur(30px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.24) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  isolation: isolate;
}
@media (max-width: 640px) {
  html.light-theme .mobile-menu-bar { background: rgba(58, 44, 112, 0.9) !important; }
}
html.light-theme .mobile-menu-solid,
html.light-theme .catalog-menu-solid {
  background: rgba(230, 225, 218, 0.36) !important;
  backdrop-filter: blur(28px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.mobile-menu-solid {
  background: rgba(12, 8, 28, 0.68) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55) !important;
}
.mobile-menu-solid.nav-dropdown-shell {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55) !important;
}
.mobile-menu-solid .nav-dropdown-link-warm,
.mobile-menu-link.nav-dropdown-link-warm {
  color: #ffb070 !important;
}
.mobile-menu-solid .nav-dropdown-link-blue,
.mobile-menu-link.nav-dropdown-link-blue {
  color: #7db2ff !important;
}
html.light-theme .mobile-menu-solid {
  background: rgba(230, 225, 218, 0.78) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.12) !important;
}
html.light-theme .mobile-menu-solid .nav-dropdown-link-warm,
html.light-theme .mobile-menu-link.nav-dropdown-link-warm {
  color: var(--lt-accent) !important;
}
html.light-theme .mobile-menu-solid .nav-dropdown-link-blue,
html.light-theme .mobile-menu-link.nav-dropdown-link-blue {
  color: #2563eb !important;
}
@media (max-width: 640px) {
  #catalog-panel.catalog-dropdown-panel {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 1rem) !important;
    z-index: 5000 !important;
  }
  #catalog-filters-panel {
    margin-top: 0 !important;
    width: min(12.8rem, calc(100vw - 1rem)) !important;
    min-width: min(12.8rem, calc(100vw - 1rem)) !important;
    max-width: min(12.8rem, calc(100vw - 1rem)) !important;
    max-height: min(70vh, calc(100vh - 5rem)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  #mobile-menu {
    right: 0 !important;
  }
}

/* Touch targets — min 44px for interactive elements */
@media (pointer: coarse) {
  .modal-close-btn, button[type="submit"], .btn-warm, .btn-ghost {
    min-height: 44px;
    min-width: 44px;
  }
  .product-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  #cookie-consent .max-w-3xl { padding-bottom: env(safe-area-inset-bottom); }
  #back-to-top { bottom: calc(1.25rem + env(safe-area-inset-bottom)); right: calc(1.25rem + env(safe-area-inset-right)); }
  #global-toast { right: calc(1.5rem + env(safe-area-inset-right)); bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* Delivery modal — "Как заказать" 4-step grid on mobile */
@media (max-width: 480px) {
  #delivery-modal .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Modal padding on very small screens */
@media (max-width: 380px) {
  #request-modal .relative.glass, #contact-modal .relative.glass,
  #cart-modal .relative, #favorites-modal .relative { margin: 0.5rem; max-height: calc(100vh - 1rem); }
}

/* Prevent zoom on input focus (iOS) — font-size 16px minimum */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ══════════════════════════════════
   ADMIN TABLE
   ══════════════════════════════════ */
@media (max-width: 640px) {
  table { font-size: 0.75rem; }
  table th, table td { padding: 0.5rem; }
}

/* ══════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════ */

.light-theme #theme-toggle { background: #d1d5db; border-color: #9ca3af; }
.light-theme #theme-toggle .theme-dot { left: calc(100% - 1.125rem); background: #fbbf24; }
.light-theme .theme-icon-moon { display: none; }
.light-theme .theme-icon-sun { display: block !important; }
:not(.light-theme) .theme-icon-moon { display: block; }
:not(.light-theme) .theme-icon-sun { display: none; }

/* ══════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════ */

.light-theme {
  --lt-bg: #c8c0b4;
  --lt-surface: #d2ccc2;
  --lt-surface2: #c0b8a8;
  --lt-border: rgba(0,0,0,0.12);
  --lt-border2: rgba(0,0,0,0.18);
  --lt-text: #1a1428;
  --lt-text2: #2a2440;
  --lt-text3: #44405a;
  --lt-muted: #3e3858;
  --lt-accent: #c05010;
  --lt-accent2: #a04008;
}

.light-theme body,
.light-theme.stars-bg,
body.stars-bg:is(.light-theme *) {
  color: var(--lt-text) !important;
}

/* Override stars background */
html.light-theme .stars-bg,
html.light-theme body.stars-bg {
  background-color: #beb6aa !important;
  background-image: none !important;
}

/* Navigation — матовое стекло как в тёмной теме, светлая палитра */
html.light-theme .nav-glass {
  background: rgba(248, 244, 238, 0.58) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
html.light-theme .nav-glass a,
html.light-theme .nav-glass button {
  color: var(--lt-text2);
}
html.light-theme .nav-glass a:hover {
  color: var(--lt-text) !important;
}
html.light-theme .nav-glass .text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .nav-glass .text-warm-300 { color: var(--lt-accent2) !important; }
html.light-theme .nav-glass .text-blue-400 { color: #2563eb !important; }
html.light-theme .nav-glass .font-display { color: var(--lt-text) !important; }

html.light-theme .nav-btn-accent {
  background: rgba(160,144,208,0.15) !important;
  border-color: rgba(160,144,208,0.3) !important;
  color: #3a2c70 !important;
}

/* Scrollbar */
html.light-theme ::-webkit-scrollbar-track { background: #beb6aa; }
html.light-theme ::-webkit-scrollbar-thumb { background: #9888b8; }
html.light-theme ::-webkit-scrollbar-thumb:hover { background: #7868a0; }

/* Modal scrollbars — light theme */
html.light-theme .modal-scroll { scrollbar-color: rgba(0,0,0,0.12) transparent; }
html.light-theme .modal-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
html.light-theme .modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* Glass surfaces */
html.light-theme .glass {
  background: rgba(210,202,192,0.5) !important;
  border-color: rgba(0,0,0,0.07) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* Product cards */
html.light-theme .product-card {
  background: rgba(220,214,205,0.6) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
html.light-theme .product-card:hover {
  background: rgba(225,220,212,0.75) !important;
  border-color: rgba(192,80,16,0.22) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
html.light-theme .product-card h3 { color: var(--lt-text) !important; }
html.light-theme .product-card .text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .metallic-bg {
  background: linear-gradient(145deg, #e8e8ec 0%, #d4d4d8 18%, #e0e0e4 36%, #d0d0d4 54%, #e4e4e8 72%, #dcdce0 90%, #e0e0e4 100%);
}
html.light-theme .card-dot { background: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(255,255,255,0.3); }
html.light-theme .card-dot.active { background: rgba(0, 0, 0, 0.6); }

/* Text overrides — all darker for readability */
html.light-theme .text-white { color: var(--lt-text) !important; }
html.light-theme .text-white\/90 { color: var(--lt-text) !important; }
html.light-theme .text-white\/80 { color: var(--lt-text2) !important; }
html.light-theme .text-white\/70 { color: var(--lt-text2) !important; }
html.light-theme .text-white\/60 { color: var(--lt-text3) !important; }
html.light-theme .text-white\/55 { color: var(--lt-text3) !important; }
html.light-theme .text-white\/50 { color: var(--lt-muted) !important; }
html.light-theme .text-white\/45 { color: var(--lt-muted) !important; }
html.light-theme .text-white\/40 { color: #504a68 !important; }
html.light-theme .text-white\/35 { color: #585070 !important; }
html.light-theme .text-white\/30 { color: #605878 !important; }
html.light-theme .text-white\/25 { color: #706888 !important; }
html.light-theme .text-white\/20 { color: #787098 !important; }
html.light-theme .text-white\/15 { color: #8880a0 !important; }
html.light-theme .text-white\/10 { color: #9890b0 !important; }

/* Backgrounds */
html.light-theme .bg-dark-600,
html.light-theme .bg-dark-700,
html.light-theme .bg-dark-700\/40,
html.light-theme .bg-dark-700\/50,
html.light-theme .bg-dark-800 {
  background-color: var(--lt-surface2) !important;
}
html.light-theme .bg-dark-600\/30 { background-color: #ccc6ba !important; }

/* Borders */
html.light-theme .border-dark-500\/20,
html.light-theme .border-dark-500\/50,
html.light-theme .border-white\/\[0\.03\],
html.light-theme .border-white\/\[0\.04\],
html.light-theme .border-white\/\[0\.05\],
html.light-theme .border-white\/\[0\.07\] {
  border-color: var(--lt-border) !important;
}

/* Inputs */
html.light-theme .input-glass,
html.light-theme .input-retro {
  background: rgba(210,202,192,0.5) !important;
  border-color: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--lt-text) !important;
}
html.light-theme .input-glass::placeholder,
html.light-theme .input-retro::placeholder {
  color: #706888 !important;
}
html.light-theme .placeholder-white\/30::placeholder,
html.light-theme .placeholder-white\/25::placeholder {
  color: #706888 !important;
}
html.light-theme .input-glass:focus,
html.light-theme .input-retro:focus {
  background: rgba(210,202,192,0.6) !important;
  border-color: rgba(192,80,16,0.3) !important;
  box-shadow: 0 0 0 3px rgba(192,80,16,0.08) !important;
}

/* Buttons */
html.light-theme .btn-warm {
  background: linear-gradient(135deg, #e06820, #c060a0) !important;
  color: #fff !important;
}
html.light-theme .btn-ghost {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--lt-text2) !important;
}
html.light-theme .btn-ghost:hover {
  background: rgba(0,0,0,0.1) !important;
  color: var(--lt-text) !important;
}

/* Hero */
html.light-theme .hero-banner img,
html.light-theme .hero-banner video { opacity: 1; }
html.light-theme .hero-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(144,136,128,0.4) 85%,
    var(--lt-bg) 100%
  ) !important;
}
html.light-theme .hero-content h1 { color: var(--lt-text) !important; text-shadow: none !important; }
html.light-theme .hero-content p { color: var(--lt-text3) !important; }
html.light-theme .retro-glow::after { opacity: 0.2; }

/* Toast */
html.light-theme .toast-glass {
  background: rgba(210,202,192,0.95) !important;
  border-color: var(--lt-border) !important;
  color: var(--lt-text) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}

/* Sidebar active / glass tints */
html.light-theme .bg-white\/\[0\.06\] { background: rgba(0,0,0,0.06) !important; }
html.light-theme .bg-white\/\[0\.04\] { background: rgba(0,0,0,0.04) !important; }
html.light-theme .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.03) !important; }
html.light-theme .bg-white\/\[0\.02\] { background: rgba(0,0,0,0.02) !important; }
html.light-theme .bg-white\/\[0\.08\] { background: rgba(0,0,0,0.06) !important; }
html.light-theme .bg-black\/20 { background: rgba(255,255,255,0.5) !important; }

/* Badge + add-to-cart buttons */
html.light-theme .bg-warm-400 { background-color: var(--lt-accent) !important; }
html.light-theme .bg-warm-400\/80 { background-color: var(--lt-accent) !important; }
html.light-theme .bg-warm-400\/80:hover { background-color: var(--lt-accent2) !important; }

/* Fav button (карточка каталога — без фона, как в тёмной теме) */
html.light-theme .fav-btn.text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .fav-btn:hover { color: var(--lt-accent) !important; }

/* Cart qty controls */
html.light-theme .bg-white\/\[0\.06\]:is(button),
html.light-theme button.bg-white\/\[0\.06\] {
  background: rgba(0,0,0,0.06) !important;
  color: var(--lt-text2) !important;
}
html.light-theme button.bg-white\/\[0\.06\]:hover {
  background: rgba(0,0,0,0.1) !important;
  color: var(--lt-text) !important;
}

/* Select — dark theme (default) */
select option {
  background: #1a1232 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Select — light theme */
html.light-theme select {
  background: rgba(210,202,192,0.5) !important;
  color: var(--lt-text) !important;
  border-color: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.light-theme select option {
  background: #ccc6ba !important;
  color: var(--lt-text) !important;
}

/* ===== All Modals — shared glass styles ===== */
/* Light theme — semi-transparent glass for ALL modals */
html.light-theme .modal-glass,
html.light-theme #request-modal .glass,
html.light-theme #contact-modal .glass {
  background: rgba(210, 202, 192, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
html.light-theme .modal-glass .text-white,
html.light-theme #request-modal .glass .text-white,
html.light-theme #contact-modal .glass .text-white {
  color: var(--lt-text) !important;
}
html.light-theme .modal-glass .text-white\/80,
html.light-theme .modal-glass .text-white\/70 {
  color: var(--lt-text) !important;
}
html.light-theme .modal-glass .text-white\/40,
html.light-theme .modal-glass .text-white\/45,
html.light-theme .modal-glass .text-white\/50,
html.light-theme #request-modal .glass .text-white\/40,
html.light-theme #contact-modal .glass .text-white\/40,
html.light-theme #request-modal .glass .text-white\/50,
html.light-theme #contact-modal .glass .text-white\/50 {
  color: var(--lt-text3) !important;
}
html.light-theme .modal-glass .text-white\/25,
html.light-theme .modal-glass .text-white\/15,
html.light-theme .modal-glass .text-white\/30,
html.light-theme .modal-glass .text-white\/20,
html.light-theme .modal-glass .text-white\/35,
html.light-theme #request-modal .glass .text-white\/25,
html.light-theme #contact-modal .glass .text-white\/25,
html.light-theme #request-modal .glass .text-white\/15,
html.light-theme #contact-modal .glass .text-white\/15,
html.light-theme #request-modal .glass .text-white\/30,
html.light-theme #contact-modal .glass .text-white\/30,
html.light-theme #request-modal .glass .text-white\/20,
html.light-theme #contact-modal .glass .text-white\/20 {
  color: var(--lt-muted) !important;
}
html.light-theme .modal-glass .border-white\/\[0\.05\],
html.light-theme #request-modal .glass .border-white\/\[0\.05\],
html.light-theme #contact-modal .glass .border-white\/\[0\.05\] {
  border-color: rgba(0,0,0,0.06) !important;
}
html.light-theme .modal-glass .input-glass,
html.light-theme #request-modal .glass .input-glass,
html.light-theme #contact-modal .glass .input-glass {
  background: rgba(0,0,0,0.04) !important;
  color: var(--lt-text) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html.light-theme .modal-glass .input-glass::placeholder,
html.light-theme #request-modal .glass .input-glass::placeholder,
html.light-theme #contact-modal .glass .input-glass::placeholder {
  color: rgba(0,0,0,0.4) !important;
}
html.light-theme .modal-glass .bg-white\/\[0\.04\],
html.light-theme .modal-glass .bg-white\/\[0\.03\],
html.light-theme .modal-glass .bg-white\/\[0\.06\],
html.light-theme .modal-glass .bg-white\/\[0\.02\],
html.light-theme #request-modal .glass .bg-white\/\[0\.04\],
html.light-theme #contact-modal .glass .bg-white\/\[0\.04\] {
  background: rgba(0,0,0,0.04) !important;
}
html.light-theme .modal-glass .product-card {
  background: rgba(215,210,200,0.6) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
}
html.light-theme .modal-glass .font-mono.text-warm-400 {
  color: var(--lt-accent) !important;
}
/* Request dropzone light */
html.light-theme #req-dropzone {
  border-color: rgba(0,0,0,0.12) !important;
}
html.light-theme #req-dropzone:hover {
  border-color: var(--lt-accent) !important;
}
/* Overlay for all modals */
html.light-theme .modal-overlay,
html.light-theme #request-overlay,
html.light-theme #contact-overlay,
html.light-theme #vsos-lb-backdrop {
  background: rgba(0,0,0,0.25) !important;
}
/* Sticky headers inside modal in light theme */
html.light-theme .modal-glass .sticky.glass {
  background: rgba(228,222,212,0.9) !important;
  backdrop-filter: blur(20px) !important;
}
html.light-theme .modal-glass .glass:not(.sticky) {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
html.light-theme .modal-glass .text-white\/60 {
  color: var(--lt-text3) !important;
}
html.light-theme .modal-glass .text-white\/90 {
  color: var(--lt-text) !important;
}
html.light-theme .modal-glass .modal-overlay {
  background: rgba(0,0,0,0.2) !important;
}
html.light-theme .modal-glass .btn-ghost {
  color: var(--lt-text) !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* Ambient bg pages */
html.light-theme .ambient-bg {
  background: var(--lt-bg) !important;
}
html.light-theme #bg-video-wrap {
  display: none;
}

/* Neon text overrides */
html.light-theme .neon-text-pink,
html.light-theme .text-accent-400 {
  color: var(--lt-accent) !important;
  text-shadow: none !important;
}

/* Footer */
html.light-theme footer {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Stock indicator */
html.light-theme .text-muted-lavender\/60 { color: #16a34a !important; }
html.light-theme .text-muted-lavender { color: #16a34a !important; }

/* Purple text for preorder */
html.light-theme .text-purple-300 { color: #6d28d9 !important; }
html.light-theme .text-purple-400 { color: #7c3aed !important; }
html.light-theme .text-purple-400\/60 { color: #6d28d9 !important; }
html.light-theme .text-purple-400\/80 { color: #5b21b6 !important; }
html.light-theme .bg-purple-500\/20 { background: rgba(109,40,217,0.12) !important; }
html.light-theme .bg-purple-500\/30 { background: rgba(109,40,217,0.18) !important; }
html.light-theme .bg-purple-500\/80 { background: #7c3aed !important; }
html.light-theme .hover\:bg-purple-500:hover { background: #6d28d9 !important; }
html.light-theme .hover\:bg-purple-500\/30:hover { background: rgba(109,40,217,0.18) !important; }
html.light-theme .hover\:text-purple-200:hover { color: #5b21b6 !important; }

/* Warm text variants */
html.light-theme .text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .text-warm-400\/80 { color: var(--lt-accent) !important; }
html.light-theme .text-warm-300 { color: var(--lt-accent2) !important; }

/* Green text */
html.light-theme .text-green-400 { color: #16a34a !important; }

/* Blue text */
html.light-theme .text-blue-400 { color: #2563eb !important; }

/* Footer specific text */
html.light-theme footer .text-white\/70 { color: var(--lt-text2) !important; }
html.light-theme footer .text-white\/40 { color: var(--lt-text3) !important; }
html.light-theme footer .text-white\/50 { color: var(--lt-muted) !important; }
html.light-theme footer .text-white\/30 { color: #585070 !important; }
html.light-theme footer h4 { color: var(--lt-text3) !important; }

/* Material buttons on product cards — extended from .mat-btn above */
html.light-theme .mat-btn {
  border-color: rgba(0,0,0,0.10) !important;
  color: var(--lt-text3) !important;
  background: rgba(0,0,0,0.03) !important;
}
html.light-theme .mat-btn.bg-warm-400\/15,
html.light-theme .mat-btn.border-warm-400\/30 {
  background: rgba(192,80,16,0.12) !important;
  border-color: rgba(192,80,16,0.3) !important;
  color: var(--lt-accent) !important;
}

/* Cart badge */
html.light-theme #cart-badge { background-color: var(--lt-accent) !important; color: #fff !important; }

/* Selection */
html.light-theme ::selection { background: rgba(192,80,16,0.2); color: var(--lt-text); }

/* Sort dropdown — light theme */
html.light-theme #sort-menu {
  background: rgba(210,202,192,0.95) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.15) !important;
}
html.light-theme #sort-menu a {
  color: var(--lt-text3) !important;
}
html.light-theme #sort-menu a:hover {
  color: var(--lt-text) !important;
  background: rgba(0,0,0,0.05) !important;
}
html.light-theme #sort-menu a.text-warm-400 {
  color: var(--lt-accent) !important;
  background: rgba(0,0,0,0.05) !important;
}

/* Sort dropdown — dark theme */
#sort-menu {
  background: rgba(14,10,32,0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

/* Search autocomplete dropdown */
html.light-theme #search-dropdown {
  background: rgba(150,142,134,0.97) !important;
  border: 1px solid var(--lt-border);
  backdrop-filter: blur(20px);
}
html.light-theme #search-dropdown .ac-item {
  color: var(--lt-text) !important;
}
html.light-theme #search-dropdown .ac-item:hover,
html.light-theme #search-dropdown .ac-item.bg-white\/\[0\.08\] {
  background: rgba(0,0,0,0.04) !important;
}
html.light-theme #search-dropdown .text-white\/90 { color: var(--lt-text) !important; }
html.light-theme #search-dropdown .text-white\/35 { color: var(--lt-text3) !important; }
html.light-theme #search-dropdown .text-white\/40 { color: var(--lt-text3) !important; }
html.light-theme #search-dropdown .text-white\/30 { color: var(--lt-muted) !important; }
html.light-theme #search-dropdown .text-white\/20 { color: var(--lt-muted) !important; }
html.light-theme #search-dropdown .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.04) !important; }
html.light-theme #search-dropdown .bg-white\/\[0\.06\] { background: rgba(0,0,0,0.06) !important; }
html.light-theme #search-dropdown .border-white\/\[0\.05\] { border-color: var(--lt-border) !important; }

/* ── Scrollbar hide utility ── */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Advanced filter panel ── */
html.light-theme #adv-filter-panel {
  background: rgba(210,202,192,0.95) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.15) !important;
}
html.light-theme #adv-filter-panel .text-white\/60 { color: var(--lt-text3) !important; }
html.light-theme #adv-filter-panel .text-white\/30 { color: var(--lt-muted) !important; }
html.light-theme #adv-filter-panel .text-white\/25 { color: var(--lt-muted) !important; }
html.light-theme #adv-filter-panel .text-white\/20 { color: #706888 !important; }
html.light-theme #adv-filter-panel a { color: var(--lt-text2) !important; }
html.light-theme #adv-filter-panel a:hover { color: var(--lt-text) !important; background: rgba(0,0,0,0.05) !important; }
html.light-theme #adv-filter-panel a.text-warm-400 { color: var(--lt-accent) !important; background: rgba(0,0,0,0.05) !important; }
html.light-theme #adv-filter-panel .border-white\/\[0\.07\],
html.light-theme #adv-filter-panel .border-white\/\[0\.06\] { border-color: rgba(0,0,0,0.08) !important; }
html.light-theme #adv-filter-panel button { color: var(--lt-text3) !important; }
html.light-theme #adv-filter-panel button:hover { background: rgba(0,0,0,0.06) !important; color: var(--lt-text) !important; }

/* ── /vsos: плавная прокрутка, меньше лишних перерисовок ── */
.vsos-page-optimized .vsos-card.glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  contain: layout paint;
  content-visibility: visible;
}
.vsos-page-optimized .vsos-posts-grid {
  align-items: stretch;
}
.vsos-page-optimized .vsos-card.glass-hover {
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* Высота только от in-flow .vsos-carousel-aspect-sizer (padding-bottom 75%). contain убран — не резать отрисовку. */
.vsos-page-optimized .vsos-carousel-root {
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  min-height: 12rem;
}
@media (min-width: 1280px) {
  .vsos-page-optimized .vsos-posts-grid .vsos-carousel-root {
    min-height: 0;
  }
}
.vsos-page-optimized .vsos-carousel-root .vsos-carousel-aspect-sizer {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
  pointer-events: none;
}
.vsos-page-optimized .vsos-car-track {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  touch-action: pan-y pinch-zoom;
}
/* Слайд: размытый фон из того же файла + целое фото без обрезки (как карточки каталога) */
.vsos-page-optimized .vsos-slide-blur-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(22px) saturate(1.2);
  -webkit-filter: blur(22px) saturate(1.2);
  transform: scale(1.14);
  opacity: 0.52;
  z-index: 0;
  pointer-events: none;
}
.vsos-page-optimized .vsos-slide-main-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  -webkit-user-drag: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .vsos-page-optimized .vsos-car-track {
    transition: none;
  }
  .vsos-page-optimized .fade-in {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Лайтбокс /vsos — затемнение #vsos-lb-backdrop в разметке */
#vsos-lb.vsos-lb-root {
  z-index: 10050 !important;
}

/* Лайтбокс /vsos — стрелки поверх фото только от 768px; на мобильных не показываем */
#vsos-lb-nav.vsos-lb-nav {
  display: none;
}
@media (min-width: 768px) {
  #vsos-lb-nav.vsos-lb-nav.vsos-lb-nav--on {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* Лайтбокс /vsos — визуально как #product-modal: modal-glass в разметке */
/* Модалка «Накопление суммы»: одна таблица + table-layout:fixed + colgroup — подписи строго над столбцами */
#vsos-pyramid-table-wrap .vsos-pyramid-sheet {
  min-width: 100%;
}

#vsos-pyramid-dlg #vsos-pyramid-table.vsos-pyramid-grid {
  table-layout: fixed;
  width: 100%;
  min-width: 40rem;
}

#vsos-pyramid-dlg #vsos-pyramid-table col.vpc-col-num {
  width: 3rem;
}
#vsos-pyramid-dlg #vsos-pyramid-table col.vpc-col-date {
  width: 11rem;
}
#vsos-pyramid-dlg #vsos-pyramid-table col.vpc-col-sum {
  width: 4.875rem;
}
#vsos-pyramid-dlg #vsos-pyramid-table col.vpc-col-desc {
  width: auto;
}
#vsos-pyramid-dlg #vsos-pyramid-table col.vpc-col-total {
  width: 7.75rem;
}
@media (min-width: 640px) {
  #vsos-pyramid-dlg #vsos-pyramid-table col.vpc-col-total {
    width: 9rem;
  }
}

#vsos-pyramid-dlg #vsos-pyramid-table.vsos-pyramid-grid th,
#vsos-pyramid-dlg #vsos-pyramid-table.vsos-pyramid-grid td {
  box-sizing: border-box;
}

#vsos-pyramid-dlg #vsos-pyramid-table.vsos-pyramid-grid td:nth-child(4) {
  white-space: normal;
  word-break: break-word;
  vertical-align: top;
}

#vsos-pyramid-table-wrap .vsos-pyramid-scroll-xy {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* Админка /admin/wishlist — миниатюры в списке (без Tailwind w-20: большие файлы не раздувают сетку) */
.admin-wishlist-thumb {
  position: relative;
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}
.admin-wishlist-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

/* Превью выбранных/вставленных файлов: целиком в кадре (contain), +20% к бывшим 5rem */
.js-wishlist-images-preview .admin-wishlist-pick-preview {
  position: relative;
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}
.js-wishlist-images-preview .admin-wishlist-pick-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.js-wishlist-images-preview .admin-wishlist-pick-preview-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.125rem 0.25rem;
  background: rgba(0, 0, 0, 0.8);
  font-size: 9px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ─── /wishlist — превью и колонки (plain CSS: Tailwind purge не подхватывал w-[44px] и т.п.) ─── */
.wishlist-table-outer {
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
}
.wishlist-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.wishlist-table th.wishlist-col-photo,
.wishlist-table td.wishlist-col-photo {
  width: 8.75rem; /* превью ~114px + отступы (+30%) */
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .wishlist-table th.wishlist-col-photo,
  .wishlist-table td.wishlist-col-photo {
    width: 10.75rem; /* превью ~135px + отступы */
  }
}
.wishlist-table th.wishlist-col-desc {
  text-align: center;
  vertical-align: bottom;
}
.wishlist-table td.wishlist-col-desc {
  text-align: left;
  vertical-align: top;
}
/* Обёртка превью + стрелки (стрелки только по высоте квадрата) */
.wishlist-thumb-wrap {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.wishlist-thumb-stack {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
/* Мини-стрелки на превью (несколько фото) — мобильный: прежний размер 28px, прозрачность как после осветления */
.wishlist-thumb-mini {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.29);
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.wishlist-thumb-mini:hover {
  background: rgba(0, 0, 0, 0.39);
  color: #fff;
}
.wishlist-thumb-mini:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.75);
  outline-offset: 1px;
}
.wishlist-thumb-mini-prev {
  left: 3px;
}
.wishlist-thumb-mini-next {
  right: 3px;
}
.wishlist-thumb-mini-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  /* Десктоп: плотнее и темнее ореол */
  .wishlist-thumb-mini {
    background: rgba(0, 0, 0, 0.58);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  .wishlist-thumb-mini:hover {
    background: rgba(0, 0, 0, 0.78);
  }
}

/* Превью как в каталоге: размытое увеличенное то же фото + целое изображение contain по центру (+30% к 88/104) */
.wishlist-thumb-box {
  position: relative;
  display: inline-block;
  width: 114px;
  height: 114px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}
.wishlist-thumb-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(1.2);
  -webkit-filter: blur(18px) saturate(1.2);
  transform: scale(1.12);
  opacity: 0.48;
  z-index: 0;
  pointer-events: none;
}
.wishlist-thumb-main {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 1;
  pointer-events: none;
  display: block;
}
@media (min-width: 640px) {
  .wishlist-thumb-box {
    width: 135px;
    height: 135px;
  }
}

/* Позиция без фото — та же сетка, что у превью */
.wishlist-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 114px;
  height: 114px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  vertical-align: middle;
  box-sizing: border-box;
}
.wishlist-thumb-placeholder-inner {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: rgba(255, 255, 255, 0.28);
  padding: 0 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (min-width: 640px) {
  .wishlist-thumb-placeholder {
    width: 135px;
    height: 135px;
  }
  .wishlist-thumb-placeholder-inner {
    font-size: 11px;
  }
}

/* Кнопка-превью wishlist */
button.wishlist-thumb-open {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 8px;
  vertical-align: top;
}
button.wishlist-thumb-open:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.7);
  outline-offset: 2px;
}
.wishlist-mini-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.wishlist-mini-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
}
.wishlist-mini-dot.is-active {
  background: rgba(255, 180, 112, 0.95);
}

/* Лайтбокс wishlist: только стрелки; любой другой прямой дочерний button — скрыть (старый кэш с «×») */
#wishlist-lb > button:not(.wishlist-lb-arrow) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#wishlist-lb .wishlist-lb-close {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Лайтбокс: стрелки привязаны к блоку с фото, не к краю экрана */
.wishlist-lb-stage {
  position: relative;
  max-width: 100%;
  /* Горизонтальный свайп обрабатываем в JS; вертикаль — браузеру (меньше конфликтов на тач) */
  touch-action: pan-y;
}
/* Мобильный лайтбокс: кнопка 38px как раньше, прозрачность как после осветления */
.wishlist-lb-arrow.wishlist-lb-arrow--edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.225);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}
.wishlist-lb-arrow.wishlist-lb-arrow--edge:hover {
  background: rgba(0, 0, 0, 0.31);
  color: #fff;
}
.wishlist-lb-arrow.wishlist-lb-prev.wishlist-lb-arrow--edge {
  left: 2px;
}
.wishlist-lb-arrow.wishlist-lb-next.wishlist-lb-arrow--edge {
  right: 2px;
}
.wishlist-lb-arrow-icon {
  width: 20px;
  height: 20px;
  display: block;
}

@media (min-width: 640px) {
  /* Десктоп: плотнее ореол и рамка */
  .wishlist-lb-arrow.wishlist-lb-arrow--edge {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .wishlist-lb-arrow.wishlist-lb-arrow--edge:hover {
    background: rgba(0, 0, 0, 0.62);
  }
}

/* Лайтбокс wishlist — картинка (+30% к прежним лимитам) */
#wishlist-lb-img.wishlist-lb-img {
  width: auto;
  height: auto;
  object-fit: contain;
  max-width: min(92vw, 343px);
  max-height: min(65vh, 343px);
}
@media (min-width: 640px) {
  #wishlist-lb-img.wishlist-lb-img {
    max-width: 405px !important;
    max-height: 405px !important;
  }
}

/* Лайтбокс wishlist */
#wishlist-lb .wishlist-lb-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
#wishlist-lb .wishlist-lb-dot.is-active {
  background: rgba(255, 180, 112, 0.95);
  transform: scale(1.15);
}
#wishlist-lb .wishlist-lb-dot:hover {
  background: rgba(255, 255, 255, 0.45);
}