/* КАПРИН decor-20261019-2: лёгкие украшения без картинок (только CSS/SVG) */

/* 1. Меню категорий: подчёркивание-«провод» */
.navbar .nav-link { position: relative; }
.navbar .nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--accent, #5ba4e0); transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
@media (hover: hover) { .navbar .nav-link:hover::after { transform: scaleX(1); } }
.navbar .nav-link:focus-visible::after { transform: scaleX(1); }

/* 2. Счётчики в стат-полосе */
.dc-count { font-variant-numeric: tabular-nums; }

/* 3. Разделители-hairline между секциями главной */
.dc-hairline { max-width: 1260px; margin: 2px auto; padding: 0 20px; display: flex; align-items: center; gap: 14px; }
.dc-hairline::before, .dc-hairline::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, #d9d9d5 18%, #d9d9d5 82%, transparent);
}
.dc-hairline i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #5ba4e0); box-shadow: 0 0 0 4px rgba(91,164,224,.16); flex: none; }

/* 4. Шаги заказа: «провод» с бегущим импульсом и подсветкой цифр */
.steps-grid { position: relative; }
.dc-wire {
  position: absolute; top: 37px; left: 36px; right: calc(25% - 45px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #e2e2de, #cfcfc9, #e2e2de); z-index: 1; pointer-events: none;
}
.dc-wire i {
  position: absolute; top: 0; left: -54px; width: 54px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #5ba4e0)); opacity: 0;
}
.dc-wire i::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--accent, #5ba4e0); box-shadow: 0 0 0 4px rgba(91,164,224,.20);
}
.steps-grid.dc-live .dc-wire i { opacity: 1; animation: dcTravel 5.2s linear infinite; }
@keyframes dcTravel { 0% { left: -54px; } 55% { left: 100%; } 100% { left: 100%; } }
.steps-grid .step-card > span { position: relative; z-index: 2; }
.steps-grid.dc-live .step-card > span { animation: dcGlow 5.2s linear infinite; }
.steps-grid.dc-live .step-card:nth-child(3) > span { animation-delay: .95s; }
.steps-grid.dc-live .step-card:nth-child(4) > span { animation-delay: 1.9s; }
.steps-grid.dc-live .step-card:nth-child(5) > span { animation-delay: 2.85s; }
@keyframes dcGlow {
  0% { box-shadow: 0 0 0 0 rgba(91,164,224,0); }
  8% { box-shadow: 0 0 0 5px rgba(91,164,224,.35); }
  18%, 100% { box-shadow: 0 0 0 0 rgba(91,164,224,0); }
}
@media (max-width: 1000px) { .dc-wire { display: none; } }

/* 5. Карточки: зум фото товара, подъём брендов и преимуществ (подъём карточек товаров уже есть в style.css) */
.card-img { overflow: hidden; }
.card-img img { transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-img img { transform: scale(1.05); }
  .brand-chip, .adv-item { transition: transform .22s ease, box-shadow .22s ease; }
  .brand-chip:hover, .adv-item:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,23,42,.10); }
}

/* 6. Пустые состояния: линейные SVG вместо эмодзи */
.empty-state .es-icon.dc-es { font-size: 0; line-height: 0; }
.dc-es svg { width: 104px; height: auto; display: block; margin: 0 auto; }
.dc-spark { animation: dcSpark 2.6s ease-in-out infinite; }
@keyframes dcSpark { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Пустая плашка итога в пустой корзине не показывается */
.cart-summary:empty { display: none; }

/* 7. Появление блоков при скролле (классы ставит только JS: без JS всё видно сразу) */
html.dc-js .dc-rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
html.dc-js .dc-rv.dc-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dc-wire i, .steps-grid .step-card > span, .dc-spark { animation: none !important; }
  html.dc-js .dc-rv { opacity: 1; transform: none; transition: none; }
  .card-img img, .navbar .nav-link::after, .brand-chip, .adv-item { transition: none; }
}