/* nupshop — overrides под палитру nup.ru
   v4: refactored !important out — specificity-based cascade.
   Only 2 !important left (display:none hiding Bagisto dropdown/search),
   остальное побеждает через специфичность (удвоение классов, html body, etc). */

:root {
  /* === Brand colors === */
  --nup-primary: #177ec9;
  --nup-primary-dark: #1265a1;
  --nup-navy: #0c1f4a;
  --nup-orange: #fbbf24;
  --nup-cta: #e63946;

  /* === Text === */
  --nup-text: #353c41;
  --nup-text-muted: #64748b;
  --nup-text-light: #94a3b8;

  /* === Backgrounds === */
  --nup-bg: #edf0f4;          /* body base */
  --nup-bg-white: #ffffff;    /* primary alternating bg */
  --nup-bg-tint: #f6f8fb;     /* secondary alternating bg */
  --nup-bg-footer: #f9f9f9;   /* footer */
  --nup-card: #ffffff;

  /* === Borders === */
  --nup-border: rgba(12, 31, 74, 0.08);
  --nup-border-strong: rgba(12, 31, 74, 0.15);

  /* === Shadows === */
  --nup-shadow-sm: 0 1px 3px rgba(12, 31, 74, 0.04);
  --nup-shadow-md: 0 4px 18px rgba(12, 31, 74, 0.08);
  --nup-shadow-lg: 0 8px 24px rgba(12, 31, 74, 0.15);

  /* === Typography === */
  --nup-font: 'Inter', -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  --nup-h1-size: 48px;
  --nup-h1-size-mobile: 32px;
  --nup-h2-size: 38px;
  --nup-h2-size-mobile: 28px;

  /* === Spacing === */
  --nup-section-pad-y: 72px;
  --nup-section-pad-y-mobile: 56px;
  --nup-section-heading-gap: 50px;     /* heading bottom margin */
  --nup-section-heading-gap-mobile: 32px;
  --nup-container-max: 1340px;

  /* === Radii === */
  --nup-radius-sm: 8px;
  --nup-radius-md: 12px;
  --nup-radius-lg: 16px;
  --nup-radius-pill: 999px;

  /* === Legacy aliases (do not use in new code) === */
  --nup-nav: #1265a1;
  --nup-hero-text: #0c1f4a;
}

/* Base typography — html body побеждает любой одиночный селектор Bagisto (0,0,2 > 0,0,1). */
html body {
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--nup-text);
  background-color: var(--nup-bg);
}

/* Логотип — 80px как на nup.ru, не шринкается флексом.
   Селектор с атрибутом даёт специфичность (0,2,1), сильнее любого Tailwind max-h-*. */
header img[src*="logo"],
header a[href$="/"] img,
header .logo img {
  max-height: 80px;
  width: auto;
  height: 80px;
  flex-shrink: 0;
}
header [class*="min-h-[78px]"] > div:first-child > a:first-child {
  flex-shrink: 0;
}
/* (0,1,1) — bg-white Tailwind-класс имеет (0,1,0), моё сильнее. */
header.sticky,
header[class*="sticky"] {
  background-color: #fff;
  border-bottom: none;
}

/* === PROMO BAR (marquee) === */
.nupshop-promo-bar {
  background-color: var(--nup-primary);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  padding: 11px 0;
}
.nupshop-promo-bar__track {
  display: flex;
  width: max-content;
  gap: 200px;             /* generous spacing between USP items, matches референс */
  align-items: center;
  padding-left: 200px;    /* offset so first item is not glued to viewport edge at loop start */
  animation: nupshop-marquee 40s linear infinite;
  will-change: transform;
}
.nupshop-promo-bar:hover .nupshop-promo-bar__track {
  animation-play-state: paused;
}
.nupshop-promo-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nupshop-promo-bar__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #fff;
}
@keyframes nupshop-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 640px) {
  .nupshop-promo-bar { font-size: 12px; padding: 9px 0; }
  .nupshop-promo-bar__track { gap: 80px; padding-left: 80px; animation-duration: 28s; }
}
@media (prefers-reduced-motion: reduce) {
  .nupshop-promo-bar__track { animation: none; transform: none; }
}

/* === HERO === */
.nupshop-hero {
  background: #fff;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Soft gradient: левый край видео фейдится в белый.
   Работает одинаково и при загрузке (когда видео ещё solid yellow), и после. */
.nupshop-hero__right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 5;
  pointer-events: none;
}
.nupshop-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-items: stretch;
  min-height: 540px;
}
.nupshop-hero__left {
  padding: 50px 60px 50px max(15px, calc((100vw - 1340px) / 2 + 15px));
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nupshop-hero__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nup-hero-text);
  margin-bottom: 18px;
}
.nupshop-hero__rating .stars {
  color: var(--nup-orange);
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
}
.nupshop-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nupshop-hero__bullets li {
  position: relative;
  padding-left: 36px;
  font-size: 16px;
  font-weight: 600;
  color: var(--nup-hero-text);
  line-height: 1.4;
}
.nupshop-hero__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nup-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* === UNIFIED BUTTON SYSTEM ===
   Один источник истины для всех CTA-кнопок.
   Специфичность удвоена (.class.class) → (0,2,0), побеждает любой одиночный класс
   референс/Bagisto без использования !important. */
.nupshop-btn.nupshop-btn,
.nupshop-hero__cta.nupshop-hero__cta,
.proof-card-cta.proof-card-cta,
.proof-feed-more-link.proof-feed-more-link,
.proof-comparison-reveal.proof-comparison-reveal,
.epqv12 .epqv12__proof-comparison-reveal.epqv12__proof-comparison-reveal,
.why-ours__lower-btn.why-ours__lower-btn button,
.why-ours__lower.why-ours__lower button,
.real-customer-saying-btn.real-customer-saying-btn button,
.ready-transform-section-btn.ready-transform-section-btn button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nup-primary);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 40px;
  border: none;
  border-radius: 999px;
  letter-spacing: 0.5px;
  cursor: pointer;
  width: max-content;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 16px rgba(23, 126, 201, 0.4);
}
.nupshop-btn.nupshop-btn:hover,
.nupshop-hero__cta.nupshop-hero__cta:hover,
.proof-card-cta.proof-card-cta:hover,
.proof-feed-more-link.proof-feed-more-link:hover,
.proof-comparison-reveal.proof-comparison-reveal:hover,
.epqv12 .epqv12__proof-comparison-reveal.epqv12__proof-comparison-reveal:hover,
.why-ours__lower-btn.why-ours__lower-btn button:hover,
.why-ours__lower.why-ours__lower button:hover,
.real-customer-saying-btn.real-customer-saying-btn button:hover,
.ready-transform-section-btn.ready-transform-section-btn button:hover {
  transform: translateY(-2px);
  background: var(--nup-primary-dark);
  box-shadow: 0 10px 22px rgba(23, 126, 201, 0.5);
}

/* CTA в hero — ниже отступ */
.nupshop-hero__cta { margin-bottom: 18px; }

/* === UNIFIED BADGES (метки/тэги) ===
   Удвоение классов → специфичность (0,2,0). */
.nupshop-tag.nupshop-tag,
.proof-card-label.proof-card-label,
.proof-card-price-badge.proof-card-price-badge {
  display: inline-flex;
  align-items: center;
  background: var(--nup-primary);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.nupshop-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}
.nupshop-hero__disclaimer {
  font-style: italic;
  font-size: 13px;
  color: #6c757d;
  margin: 0;
}
.nupshop-hero__right {
  background-color: #fddc57;
  padding: 0;
  overflow: hidden;
  position: relative;
}

@media (max-width: 900px) {
  .nupshop-hero__inner { grid-template-columns: 1fr; min-height: auto; }
  .nupshop-hero__left { padding: 48px 24px; }
  .nupshop-hero__right { min-height: 540px; padding: 0; }
  .nupshop-hero__right::before { display: none; }
  .nupshop-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Поиск input — селектор с атрибутом (0,1,1), побеждает Tailwind классы (0,1,0). */
header input[type="text"],
header input[type="search"] {
  background-color: #fff;
  border: 1px solid #d4dae0;
}

/* Карточки — удвоение для надёжности поверх Tailwind bg-white. */
.product-card.product-card,
[class*="ProductCard"][class*="ProductCard"],
.card.card {
  background-color: var(--nup-card);
  border-radius: 4px;
}

/* Bagisto primary buttons — удвоение классов → (0,2,0), перекрывает .primary-button. */
.primary-button.primary-button,
button.primary-button.primary-button,
a.primary-button.primary-button {
  background-color: var(--nup-primary);
  color: #fff;
  border-radius: 4px;
  border: none;
}
.primary-button.primary-button:hover { background-color: var(--nup-primary-dark); }
.secondary-button.secondary-button {
  background-color: transparent;
  color: var(--nup-primary);
  border: 1px solid var(--nup-primary);
  border-radius: 4px;
}

/* Tailwind blue/red/yellow classes → палитра nup.
   Удвоение классов гарантирует победу над Tailwind utility с той же специфичностью (0,1,0). */
.bg-blue-500.bg-blue-500,
.bg-blue-600.bg-blue-600,
.bg-blue-700.bg-blue-700,
.bg-navyBlue.bg-navyBlue,
[class*="bg-navyBlue"][class*="bg-navyBlue"] {
  background-color: var(--nup-primary);
}
.text-blue-500.text-blue-500,
.text-blue-600.text-blue-600,
.text-blue-700.text-blue-700,
.text-navyBlue.text-navyBlue {
  color: var(--nup-primary);
}
.border-blue-500.border-blue-500,
.border-blue-600.border-blue-600,
.border-navyBlue.border-navyBlue {
  border-color: var(--nup-primary);
}
.text-yellow-400.text-yellow-400,
.text-yellow-500.text-yellow-500 { color: var(--nup-orange); }
.bg-red-500.bg-red-500,
.bg-red-600.bg-red-600,
[class*="sale-badge"][class*="sale-badge"] {
  background-color: var(--nup-cta);
  color: #fff;
}
.product-price.product-price,
[class*="price"] strong,
.text-price.text-price {
  color: var(--nup-text);
  font-weight: 700;
}

/* === HEADER container constraint ===
   Bagisto inner row .min-h-[78px] → 1340px centered, чтобы лого совпадало с hero текстом.
   Селектор (0,1,2) с экранированным атрибутом — высокая специфичность, без !important. */
header > div > .min-h-\[78px\] {
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}


/* === HEADER NAV (replace ВСЕ dropdown) ===
   Скрываем bagisto categories dropdown — !important ОБОСНОВАН:
   display:none часто перебивается inline-стилями или Tailwind .flex utility. */
header [class*="min-h-[78px]"] > div:first-child > div:nth-child(2) {
  display: none !important;
}

.nupshop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  /* Центрирование между лого и правой группой через auto margins */
  margin-left: auto;
  margin-right: auto;
}
.nupshop-nav__link {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nup-hero-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
  padding: 4px 0;
}
.nupshop-nav__link:hover {
  color: var(--nup-primary);
}
@media (max-width: 1100px) {
  .nupshop-nav { gap: 18px; }
  .nupshop-nav__link { font-size: 13px; }
}


/* Hide search bar — !important ОБОСНОВАН: display:none легко перебивается. */
header [class*="min-h-[78px]"] > div:nth-child(2) > div:first-child,
header form[action*="search"] {
  display: none !important;
}


/* === NAV центрирование: левая группа растягивается на всё свободное место === */
header [class*="min-h-[78px]"] > div:first-child {
  flex: 1;
}


/* Mobile/tablet: уменьшить лого, иначе он переполняет более низкую мобильную шапку */
@media (max-width: 1023px) {
  header img[src*="logo"] {
    max-height: 60px;
    height: 60px;
  }
  header a[class*="max-h-"] {
    max-height: none;
    height: 60px;
    display: inline-flex;
    align-items: center;
  }
  .flex.flex-wrap.gap-4 .flex.items-center {
    align-items: center;
  }
  /* Burger 24px → 28px чтобы визуально весомее, line-height равен правым иконкам */
  header span.icon-hamburger {
    font-size: 28px;
    line-height: 1;
  }
}


/* SEE MORE RESULTS button — компактный pill, не на всю ширину.
   Удвоение класса → (0,2,0), побеждает proof.css от референс. */
.proof-feed-more-link.proof-feed-more-link {
  width: max-content;
  margin: 0 auto;
  padding: 18px 40px;
}

/* Order-protect block: рамка как на референс */
.order-protect.proof-feed-guarantee {
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1.5px solid var(--nup-orange);
  border-radius: 12px;
  padding: 18px 24px;
  background: #fff;
  margin-top: 28px;
}
.order-protect-icon { flex-shrink: 0; }
.order-protect-content { flex: 1; }
.order-protect-content p { margin: 0; font-size: 13px; color: #555; line-height: 1.45; }
.order-protect-content h5 {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: #0c1f4a;
  font-family: Inter, sans-serif;
  text-transform: uppercase;
}


/* Mobile/tablet: bigger burger icon to match logo height */
@media (max-width: 1023px) {
  header [class*="icon-menu"],
  header v-mobile-drawer [class*="icon-"],
  header .icon-menu {
    font-size: 32px;
    line-height: 1;
  }
}