/* Слайдер на главной: нативный scroll-snap, без Swiper. Разметка — template/main.php, логика — assets/js/home-slider.js */
.home-slider {
  --hs-ratio: 1275 / 395;
  margin-bottom: 32px;
  padding-top: 32px;
}
.home-slider .container { position: relative; }
.hs-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: relative;
}
.hs-track::-webkit-scrollbar { display: none; }
.hs-slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: var(--hs-ratio);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #f0f2f7;
}
.hs-slide a { display: block; height: 100%; }
.hs-slide picture { display: block; height: 100%; }
.hs-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-controls {
  position: absolute;
  z-index: 1;
  right: 55px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  color: #1d1d1f;
}
.hs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
@media (hover: hover) {
.hs-btn:hover { background: rgba(0, 0, 0, .06); }
}
.hs-btn:focus-visible,
.hs-slide a:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }
.hs-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 56px;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hs-current { font-size: 28px; }

/* Мобильная карточка новинки (вариант C): на телефоне вместо баннера. */
.home-novelty { display: none; }

@media (max-width: 780px) {
  /* Баннер на телефоне не показываем; картинки не качаются благодаря <source> в разметке. */
  .home-slider { display: none; }
  .home-novelty { display: block; padding-top: 12px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-track { scroll-behavior: auto; }
}

.hn-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px; /* место под тень карточки */
}
.hn-track::-webkit-scrollbar { display: none; }
.hn-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hn-card {
  display: grid;
  grid-template-columns: calc(var(--cat-card-h, 136px) - 2 * var(--sp-3, 12px)) 1fr 24px;
  align-items: center;
  gap: 12px;
  height: var(--cat-card-h, 136px); /* как у карточки категории ниже */
  padding: var(--sp-3, 12px) 14px var(--sp-3, 12px) var(--sp-3, 12px);
  border-radius: var(--radius-card, 16px);
  background: linear-gradient(135deg, #fff 0%, var(--c-brand-tint, #eef0fb) 100%);
  border: 1px solid var(--c-brand-line, rgba(56, 68, 135, .12));
  box-sizing: border-box;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(24, 30, 70, .05));
  color: var(--c-text, #1d1d28);
  text-decoration: none;
}
.hn-card:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.hn-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  height: 100%;
  border-radius: 12px;
  background: #fff;
}
.hn-thumb picture { display: contents; }
.hn-img { display: block; max-width: 88%; max-height: 88%; width: auto; height: auto; object-fit: contain; }
.hn-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-width: 0; }
.hn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 40px;
  background: var(--c-accent-soft, #fdebf2);
  color: var(--c-accent, #c32e68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hn-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hn-title { font-size: 20px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.hn-sub { font-size: 13px; color: var(--c-muted, #6b6b7b); }
.hn-arrow { color: var(--c-brand, #384487); }

.hn-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
.hn-dot {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #c9ccdc;
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}
.hn-dot::after { content: ""; position: absolute; inset: -19px -4px; } /* тап-зона 44px */
.hn-dot[aria-current="true"] { width: 16px; background: var(--c-brand, #384487); }
.hn-dot:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }