/* ══════════════════════════════════════════════
   SL Hero Slider — v1.1.9
   - МОБИЛЬНЫЙ: жёсткая высота из настроек + cqh-скейлинг контента
     (текст/кнопки/картинка ужимаются под заданную высоту).
   - desktop: equal-height measure + cqh (как было).
   ══════════════════════════════════════════════ */

.slhs {
  position: relative;
  margin: 16px auto 0;
  padding: 24px var(--gutter, 16px) 32px;
  max-width: var(--container, 1280px);
}
@media (min-width: 1024px) {
  .slhs { padding: 24px var(--gutter, 16px) 48px; }
}

.slhs__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl, 24px);
}

.slhs__track {
  display: flex;
  width: 100%;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.slhs__track.is-dragging {
  transition: none;
}

.slhs__slide {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  /* МОБИЛЬНЫЙ: жёсткая высота из настроек (а не min-height). Контент
     ужимается под неё за счёт cqh-скейлинга (см. блок ниже). Раньше тут
     был min-height — слайд рос под контент (картинка снизу раздувала до
     1000+px), и настройка высоты визуально не работала. */
  height: var(--slhs-min-height-mobile, 460px);
  container-type: size;
  container-name: slhs-slide;
}
@media (min-width: 768px) {
  .slhs__slide {
    height: auto;
    min-height: var(--slhs-min-height, 560px);
    container-type: normal;
  }
}

/* ════════════════════════════════════════════════════════
   v1.1.7 LAYOUT — выравнивание контента + сторона картинки.
   Контент делаем flex-колонкой чтобы работали order/выравнивание.
   ════════════════════════════════════════════════════════ */
.slhs-shop__content,
.slhs-promo__content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* по умолч. вертикально центр */
}

/* Горизонтальное выравнивание (align-items во flex-колонке + text-align) */
.slhs-shop.slhs-h-left   .slhs-shop__content,
.slhs-promo.slhs-h-left  .slhs-promo__content { align-items: flex-start; text-align: left; }
.slhs-shop.slhs-h-center .slhs-shop__content,
.slhs-promo.slhs-h-center .slhs-promo__content { align-items: center; text-align: center; }
.slhs-shop.slhs-h-right  .slhs-shop__content,
.slhs-promo.slhs-h-right .slhs-promo__content { align-items: flex-end; text-align: right; }

/* Вертикальное выравнивание контента */
.slhs-shop.slhs-v-top    .slhs-shop__content,
.slhs-promo.slhs-v-top   .slhs-promo__content { justify-content: flex-start; }
.slhs-shop.slhs-v-center .slhs-shop__content,
.slhs-promo.slhs-v-center .slhs-promo__content { justify-content: center; }
.slhs-shop.slhs-v-bottom .slhs-shop__content,
.slhs-promo.slhs-v-bottom .slhs-promo__content { justify-content: flex-end; }

/* Сторона картинки: меняем порядок колонок grid (только десктоп — на мобиле
   всегда текст сверху / картинка снизу) */
@media (min-width: 768px) {
  .slhs-shop.slhs-img-left .slhs-shop__content,
  .slhs-promo.slhs-img-left .slhs-promo__content { order: 2; }
  .slhs-shop.slhs-img-left .hero__visual,
  .slhs-promo.slhs-img-left .slhs-promo__visual { order: 1; }
}

/* ════════════════════════════════════════════════════════
   EQUAL HEIGHT — все слайды одной высоты (макс из всех).
   ВАЖНО: только на десктопе (>=768px). На мобиле слайд
   живёт в естественном потоке — текст сверху, картинка
   снизу во всю ширину, высота растёт под контент.
   JS меряет реальную высоту контента и проставляет
   --slhs-actual-h. cqh-скейлинг тоже только на десктопе.
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide {
    height: var(--slhs-actual-h, auto);
    min-height: var(--slhs-actual-h, auto);
    container-type: size;
    container-name: slhs-slide;
  }

  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide > .hero__card,
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide > .slhs-promo,
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide > .slhs-promotion {
    height: 100%;
    width: 100%;
    margin: 0;
  }

  /* ── cqh-скейлинг контента (только десктоп + measured) ── */
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__title {
    font-size: clamp(22px, 12cqh, 64px);
    line-height: 1.05;
    margin: clamp(8px, 2cqh, 16px) 0;
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__sub {
    font-size: clamp(12px, 3.5cqh, 17px);
    line-height: 1.4;
    margin: 0 0 clamp(8px, 3cqh, 24px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__tag {
    font-size: clamp(10px, 2.6cqh, 12px);
    padding: clamp(4px, 1.2cqh, 6px) clamp(8px, 2cqw, 12px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__cta {
    gap: clamp(8px, 2cqh, 12px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .btn {
    padding: clamp(8px, 2.5cqh, 14px) clamp(14px, 3cqw, 22px);
    font-size: clamp(12px, 3.2cqh, 16px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__stats {
    padding: clamp(8px, 2.5cqh, 16px) clamp(10px, 3cqw, 20px);
    gap: clamp(8px, 2cqw, 16px);
    border-radius: clamp(8px, 2cqh, 14px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__stat-n {
    font-size: clamp(14px, 4.5cqh, 24px);
    line-height: 1.1;
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide .hero__stat-l {
    font-size: clamp(9px, 2.2cqh, 12px);
  }

  /* ── promo title тоже cqh ── */
  .slhs[data-equal-height="1"][data-measured="1"] .slhs-promo__brand {
    padding: clamp(4px, 1.5cqh, 6px) clamp(10px, 2cqw, 14px);
    font-size: clamp(10px, 2.6cqh, 13px);
    margin-bottom: clamp(8px, 2.5cqh, 16px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs-promo__title {
    font-size: clamp(22px, 11cqh, 56px);
    line-height: 1.05;
    margin: 0 0 clamp(8px, 2.5cqh, 16px);
  }
  .slhs[data-equal-height="1"][data-measured="1"] .slhs-promo__sub {
    font-size: clamp(12px, 3.2cqh, 17px);
    line-height: 1.45;
    margin: 0 0 clamp(10px, 3cqh, 24px);
  }

  /* ── padding карточки тоже cqh ── */
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide > .hero__card,
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide > .slhs-promo,
  .slhs[data-equal-height="1"][data-measured="1"] .slhs__slide > .slhs-promotion {
    padding: clamp(16px, 6cqh, 56px) clamp(16px, 5cqw, 56px);
    gap: clamp(12px, 4cqh, 24px);
  }
}

/* ── Картинка в shop-slide ──
   Мобила: картинка во второй строке grid, естественная высота (aspect-ratio)
   Десктоп: картинка absolute, object-fit: contain — целиком, без обрезки,
            подстраивается под размер слайдера (масштаб до меньшего измерения)
   ──────────────────────────────────────────────────────── */
.slhs .hero__visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg, 16px);
}
.slhs .hero__visual > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: inherit;
}
@media (min-width: 768px) {
  /* Десктоп: картинка вне потока, скейлится contain в свою колонку */
  .slhs .hero__visual {
    height: 100%;
    /* min-height убран — раньше резервировал место для object-fit:cover.
       Сейчас contain не требует — высота определяется .hero__card */
  }
  .slhs .hero__visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* object-fit: contain унаследован с базового правила выше */
  }
}

/* ════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ (<768px): жёсткая высота + flex-распределение + cqh-скейлинг.
   Карточка — flex-колонка высотой = настройке. Контент (текст-блок)
   занимает верх и жмётся/растёт, картинка — нижняя зона на остаток высоты.
   Ничего не наслаивается: всё в потоке, gap честный.
   ════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .slhs__slide > .hero__card,
  .slhs__slide > .slhs-promo,
  .slhs__slide > .slhs-promotion {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }

  /* ── shop / promo карточка: вертикальная flex-колонка ──
     ВАЖНО: базовое правило .slhs-promo { display:grid; align-items:center }
     идёт ПОЗЖЕ в файле и при равной специфичности (0,1,0) перебивало мой
     display:flex — карточка оставалась grid и центрировала контент по
     вертикали (отсюда большой отступ над бейджем на promo-слайде). Поэтому
     повышаем специфичность префиксом .slhs__slide (0,2,0) — теперь flex
     гарантированно выигрывает, и контент прижимается к верху как у shop. */
  .slhs__slide .slhs-shop.hero__card,
  .slhs__slide .slhs-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    grid-template-columns: none;
    padding: clamp(16px, 5cqh, 32px) clamp(16px, 6cqw, 24px) 0;
    gap: 0;
  }

  /* Текстовый блок: по содержимому, всегда от ВЕРХА.
     ВАЖНО про специфичность: правила .slhs-v-center .slhs-*__content
     { justify-content:center } (0,2,0) перебивали бы простой селектор,
     из-за чего у одного слайда (v-center) бейдж уходил вниз/центр, а у
     другого (v-top) прижимался к верху — отсюда РАЗНЫЙ отступ сверху на
     скринах 1 и 2. На мобиле выравнивание всегда сверху, поэтому форсим
     через !important — теперь оба слайда стартуют одинаково. */
  .slhs-shop__content,
  .slhs-promo__content {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    min-height: 0;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: clamp(6px, 2cqh, 16px);
    padding-bottom: clamp(8px, 2cqh, 16px);
  }

  /* Картинка: занимает ВЕСЬ остаток высоты (flex:1), прижата к низу —
     больше не микроскопическая. Обе обёртки ведут себя одинаково. */
  .slhs .hero__visual,
  .slhs-promo__visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-self: stretch;
    border-radius: 0;
    overflow: hidden;
    z-index: 1;
  }
  /* Картинка обоих слайдов: absolute inset:0 на всю зону + contain,
     прижата к низу. У promo раньше была в потоке (flex-end + height:100%
     + drop-shadow), из-за чего не дотягивала до низа и висела с зазором.
     Теперь техника идентична shop — обе плотно к нижнему краю. */
  .slhs .hero__visual > img,
  .slhs-promo__visual .slhs-promo__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    max-width: none;
    max-height: none;
    /* убираем тень со смещением вниз — она создавала визуальный зазор */
    filter: none;
    border-radius: 0;
  }
  /* сбрасываем flex-выравнивание у promo-обёртки — картинка теперь
     позиционируется absolute, поток не нужен */
  .slhs-promo__visual { display: block; }

  /* ── cqh-скейлинг контента под заданную высоту ── */
  .slhs__slide .hero__title,
  .slhs__slide .slhs-promo__title {
    font-size: clamp(20px, 6cqh, 38px);
    line-height: 1.05;
    margin: 0;
  }
  .slhs__slide .hero__sub,
  .slhs__slide .slhs-promo__sub {
    font-size: clamp(12px, 2.5cqh, 15px);
    line-height: 1.4;
    margin: 0;
    /* до 4 строк — текст «5000+ товаров…» влезает полностью */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .slhs__slide .hero__tag,
  .slhs__slide .slhs-promo__brand {
    font-size: clamp(10px, 2.2cqh, 12px);
    padding: clamp(4px, 1cqh, 6px) clamp(8px, 2cqw, 12px);
    margin: 0;
  }
  .slhs__slide .hero__cta {
    gap: clamp(8px, 1.5cqh, 12px);
    margin: 0;
  }
  .slhs__slide .btn {
    padding: clamp(9px, 1.7cqh, 13px) clamp(14px, 3cqw, 22px);
    font-size: clamp(12px, 2.3cqh, 15px);
  }
  /* stats-блок («5000+ товаров…») лежит ВНУТРИ .hero__visual поверх
     картинки. На десктопе он absolute и читается, а на мобиле при flex
     наезжал на картинку/кнопки и был нечитаем. Прячем на мобиле —
     остаётся чистый layout: тег → заголовок → описание → кнопки → фото. */
  .slhs__slide .hero__stats { display: none; }
}

/* ============ DOTS ============ */
.slhs__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.slhs__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s, width .25s;
}
.slhs__dot:hover { background: rgba(255,255,255,0.5); }
.slhs__dot.is-active {
  background: var(--accent, #d76c9d);
  width: 22px;
  border-radius: 6px;
}
.slhs__dot:focus-visible {
  outline: 2px solid var(--accent, #d76c9d);
  outline-offset: 2px;
}

/* ============ ARROWS — внутри карточки, стеклянные, fade on hover ============
   v1.1.7: стрелки задвинуты ВНУТРЬ viewport (карточки) и не выпирают за
   скруглённые углы. Позиционируются с отступом от края карточки
   = gutter (padding .slhs) + внутренний отступ. */
.slhs__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 10, 35, 0.45);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.9);
  transition: opacity .25s, transform .25s, background .2s, visibility 0s linear .25s;
}
.slhs:hover .slhs__arrow {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  transition: opacity .25s, transform .25s, background .2s, visibility 0s linear 0s;
}
/* Клавиатурная доступность: показываем конкретную стрелку только при
   фокусе с клавиатуры (focus-visible), не при клике мышью.
   Это убирает «залипание» стрелок после клика. */
.slhs__arrow:focus-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  outline: 2px solid var(--accent, #d76c9d);
  outline-offset: 2px;
  transition: opacity .15s;
}
.slhs__arrow:hover {
  background: rgba(40, 20, 60, 0.75);
  border-color: rgba(255,255,255,0.3);
}
.slhs__arrow:active { transform: translateY(-50%) scale(0.94); }
/* Отступ = gutter контейнера + 16px внутрь карточки */
.slhs__arrow--prev { left: calc(var(--gutter, 16px) + 16px); }
.slhs__arrow--next { right: calc(var(--gutter, 16px) + 16px); }

@media (min-width: 1280px) {
  /* На широких экранах чуть крупнее и дальше от края */
  .slhs__arrow { width: 44px; height: 44px; }
  .slhs__arrow--prev { left: calc(var(--gutter, 16px) + 20px); }
  .slhs__arrow--next { right: calc(var(--gutter, 16px) + 20px); }
}

@media (hover: none), (max-width: 768px) {
  .slhs__arrow { display: none !important; }
}

/* ══════════════════════════════════════════════
   Шаблон: product_promo (статичные размеры — fallback без measured)
   ══════════════════════════════════════════════ */
.slhs-promo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px 24px;
  background:
    radial-gradient(at 0% 0%, color-mix(in oklab, var(--slhs-promo-accent, #843faf) 35%, transparent), transparent 60%),
    radial-gradient(at 100% 100%, color-mix(in oklab, var(--slhs-promo-accent, #d76c9d) 28%, transparent), transparent 60%),
    linear-gradient(135deg, #1c0a37 0%, #0a0118 100%);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: var(--r-xl, 24px);
  overflow: hidden;
}
@media (min-width: 768px) {
  .slhs-promo {
    padding: 56px;
    grid-template-columns: 1fr 1fr;
  }
}

.slhs-promo__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  background: var(--grad, linear-gradient(135deg, #d76c9d, #843faf));
  border: 0;
  box-shadow: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  width: fit-content;
}
.slhs-promo__brand .dot,
.slhs-promotion__tag .dot,
.hero__tag .dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: slhs-pulse 1.6s ease-in-out infinite;
}
@keyframes slhs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.slhs-promo__title {
  font-family: var(--f-display, 'Unbounded', system-ui, sans-serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 16px;
}
.slhs-promo__sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-sec, rgba(255,255,255,0.7));
  max-width: 480px;
  margin: 0 0 24px;
}
.slhs-promo__cta {
  align-self: flex-start;
}
.slhs-promo__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.slhs-promo__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
@media (min-width: 768px) {
  /* На десктопе ограничиваем высоту визуала чтобы он не распирал grid
     (важно когда equal-height ещё не сработал — до измерения) */
  .slhs-promo__visual {
    max-height: var(--slhs-min-height, 560px);
  }
}
.slhs[data-equal-height="1"][data-measured="1"] .slhs-promo__visual {
  height: 100%;
  max-height: 100%;
}

/* ══════════════════════════════════════════════
   Шаблон: promotion
   ══════════════════════════════════════════════ */
.slhs-promotion__tag {
  background: linear-gradient(135deg, #d76c9d, #843faf);
}

/* ══════════════════════════════════════════════
   Reduced motion
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slhs__track { transition: none; }
  .slhs__arrow { transition: opacity .15s; }
}