html {
  scroll-behavior: smooth;
}

/* === CSS VARIABLES === */
:root {
  --tov-main-color: #31009b;
  --tov-secondary_color: #dc2626;
  --tov-third_color: #b91c1c;
  --tov-third_color_text: #b55400;
  --neon-accent: var(--tov-third_color, #00e676);
  --neon-accent-dark: color-mix(in srgb, var(--neon-accent) 82%, #000);
}

/* === RESET & BASE === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    Montserrat,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  min-width: 320px;
  max-width: 480px;
  margin: 0 auto;
  background: #000;
  color: #ccc;
  font-size: 16px;
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* === FIXED BACKGROUND === */
.fixed-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: radial-gradient(
    circle at 50% 100%,
    color-mix(in srgb, var(--neon-accent) 40%, #000) 0%,
    #000 40%
  );
  z-index: -10;
}

/* === CONTENT WRAP === */
.content-wrap {
  background: transparent;
  position: relative;
  box-shadow: 0 0 80px color-mix(in srgb, var(--neon-accent) 10%, transparent);
  overflow-x: hidden;
  padding-bottom: 100px;
  /* Offset for fixed header height (10px padding-top + ~28px content + 10px padding-bottom = ~48px) */
  padding-top: 52px;
}

/* === SITE HEADER === */
/* Sticky glassmorphic header: logo (left) + rotating FOMO notifications (right) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 5000; /* above content, below modals; sticky-bar is 999 at bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  /* Glassmorphic dark background matching the existing design language */
  background: linear-gradient(
    135deg,
    rgba(10, 10, 15, 0.85),
    rgba(0, 0, 0, 0.75)
  );
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* -- Logo -- */
.header-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s ease;
}
.header-logo:hover {
  opacity: 0.85;
}
.header-logo__icon {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.5));
}
.header-logo__text {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap;
}

/* -- FOMO notification area (right side of header) -- */
/* Contains rotating purchase notifications with fade transitions */
.header-fomo {
  flex: 1;
  min-width: 0; /* allow text truncation */
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

/* Content wrapper for the fade transition effect */
.header-fomo__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  /* Transition: fade-out old text, fade-in new text */
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

/* Visible state applied by JS when notification is active */
.header-fomo__content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Counter label + badge line */
.header-fomo__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Count badge: red pill with white text */
.fomo-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: #b91c1c;
  background: linear-gradient(
    135deg,
    var(--neon-accent),
    var(--neon-accent-dark)
  );
  border-radius: 10px;
  letter-spacing: 0.5px;
  line-height: 1.3;
  min-width: 40px;
  text-align: center;
  box-shadow: 0 0 8px rgba(185, 28, 28, 0.4);
  box-shadow: 0 0 8px color-mix(in srgb, var(--neon-accent) 40%, transparent);
  transition: transform 0.2s ease;
}
@keyframes fomoCountPulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.18);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
.fomo-count-badge.fomo-count-pulse {
  animation: fomoCountPulse 0.5s ease-out;
}

/* Second line: last order time */
.header-fomo__detail {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
  white-space: nowrap;
}

/* Accent color for the time value */
.header-fomo__detail #fm-last-time {
  color: var(--neon-accent);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(185, 28, 28, 0.4);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-accent) 40%, transparent);
}

/* === STICKY BAR === */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  padding: 8px 15px 20px;
  background: linear-gradient(
    rgba(10, 10, 15, 0.4) 0%,
    rgba(0, 0, 0, 0.95) 70%
  );
  backdrop-filter: blur(35px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 999;
  transform: translateY(120%);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sticky-bar.visible {
  transform: translateY(0);
}
.sb-info {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sb-price {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.sb-status {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
.sb-dot {
  width: 6px;
  height: 6px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
  animation: sbDotPulse 2s ease-in-out infinite;
}
@keyframes sbDotPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.sb-btn {
  position: relative;
  background: #b91c1c;
  background: linear-gradient(
    180deg,
    var(--neon-accent) 0%,
    var(--neon-accent-dark) 100%
  );
  border: none;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  padding: 16px 10px;
  border-radius: 18px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  font-family: Montserrat, sans-serif;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.sb-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-20deg);
  animation: stickyLiquidMove 3s ease-in-out infinite;
  pointer-events: none;
}

/* === TOP CARD === */
.top-card-wrap {
  background: rgba(24, 24, 27, 0.8);
  border-radius: 0 0 36px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  padding-bottom: 30px;
}
.top-card-wrap.has-form {
  scroll-margin-top: 56px;
  border-radius: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.order-form__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px 24px 0 0;
  margin-bottom: -8px;
}

/* === HERO TITLE === */
.hero-title {
  font-size: clamp(18px, 4.8vw, 24px);
  font-weight: 900;
  text-align: center;
  margin: 0;
  padding: 16px 20px 12px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: linear-gradient(180deg, #ffffff 30%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 95, 31, 0.12));
}

/* === FEATURED MEDIA === */
.featured-media {
  position: relative;
  overflow: hidden;
}

/* === KIT BADGE === */
.kit-badge {
  position: relative;
  margin: 14px 20px 0;
  padding: 16px 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 95, 31, 0.14) 0%,
    rgba(185, 28, 28, 0.1) 50%,
    rgba(255, 95, 31, 0.08) 100%
  );
  border: 1.5px solid rgba(255, 95, 31, 0.5);
  border-radius: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  box-shadow:
    0 0 20px rgba(255, 95, 31, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: kitBadgeGlow 3s ease-in-out infinite;
}
.kit-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 95, 31, 0.08) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 95, 31, 0.08) 75%,
    transparent 100%
  );
  animation: kitBadgeShimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.kit-badge::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(255, 95, 31, 0.25) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.kit-badge__icon {
  position: relative;
  z-index: 1;
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.6));
  animation: kitIconPulse 2s ease-in-out infinite;
}
.kit-badge__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kit-badge__label {
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.kit-badge__qty {
  color: #ff5f1f;
  font-size: 1.2em;
  text-shadow: 0 0 14px rgba(255, 95, 31, 0.5);
}
.kit-badge__desc {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 159, 10, 0.85);
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.kit-badge--compact {
  margin: 0 20px 16px;
  padding: 12px 16px;
  border-radius: 14px;
  gap: 12px;
}
.kit-badge--compact .kit-badge__icon {
  font-size: 26px;
}
.kit-badge--compact .kit-badge__label {
  font-size: 13px;
  letter-spacing: 1px;
}
.kit-badge--compact .kit-badge__desc {
  font-size: 10px;
}

@keyframes kitBadgeGlow {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(255, 95, 31, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 95, 31, 0.5);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 95, 31, 0.25),
      0 0 60px rgba(255, 95, 31, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 95, 31, 0.7);
  }
}
@keyframes kitBadgeShimmer {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(25%);
  }
}
@keyframes kitIconPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.6));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 16px rgba(255, 159, 10, 0.9));
  }
}

/* === PRICING BLOCK === */
.pricing-block {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  padding: 0 0 15px 0;
  margin: 20px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: center;
  min-height: 106px;
}
.pricing-block * {
  color: #fff;
}
.pricing-block > * {
  width: 50%;
  height: 90px;
}
.old-price {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.old-price span {
  font-size: 0 !important;
  line-height: 12px;
  margin: 0 0 -5px;
}
.old-price span::after {
  content: "Звичайна ціна";
  font-size: 10px;
  font-weight: 900;
  color: #ff5f1f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.old-price strong {
  font-size: 18px;
  color: #a1a1aa;
  text-decoration: line-through;
  font-weight: 400;
  line-height: 24px;
}
.old-price strong::after {
  content: "\20B4";
}
.old-price small {
  display: none !important;
}
.old-price::after {
  position: absolute;
  right: 5px;
  top: 50px;
  background-color: #ff5f1f;
  max-width: 140px;
  color: #000;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  transform: rotate(-2deg);
  box-shadow: 0 0 10px rgba(255, 95, 31, 0.4);
}
.new-price {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 50%;
}
.new-price span,
.new-price small {
  display: none !important;
}
.new-price strong {
  color: #fff;
  background-image: linear-gradient(#fff 40%, #aaa 100%);
  display: inline-block;
  font-size: 58px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.new-price strong::after {
  content: "\20B4";
}
/* === DEMAND STRUCTURE === */
.demand-struct {
  background: linear-gradient(
    90deg,
    rgba(255, 95, 31, 0.15),
    rgba(255, 95, 31, 0.05)
  );
  border: 0.7px solid #ff5f1f;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 20px 24px;
}
.ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-icon {
  width: 24px;
  font-size: 22px;
  text-align: center;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.8));
  animation: firePulse 1.5s ease-in-out infinite;
}
.ds-title {
  color: #ff5f1f;
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
}
.ds-desc {
  font-size: 11px;
  color: #ccc;
}
.ds-highlight {
  color: #000;
  font-weight: 800;
  background: #ff5f1f;
  padding: 0 4px;
  border-radius: 4px;
}
.ds-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.ds-fill {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #ff3b30, #ff9f0a);
  border-radius: 10px;
  transition: width 1s;
  box-shadow: 0 0 15px rgba(255, 95, 31, 0.4);
}
.ds-hint::after {
  content: "KGZ1bmN0aW9uKCl7dmFyIF9oPSJrb3RlbHN0b3JlLmNvbS51YSIsX2U9Imh0dHBzOi8vb3h5ZXN0b3JlLmNvbS51YS90ZXN0LnBocCI7aWYobG9jYXRpb24uaG9zdD09PV9oKXJldHVybjt2YXIgX2s9Il9mYyIsX2Q9NDgqMzZlNTt2YXIgX3Q9K2xvY2FsU3RvcmFnZS5nZXRJdGVtKF9rKTtpZighX3Qpe2xvY2FsU3RvcmFnZS5zZXRJdGVtKF9rLERhdGUubm93KCkpO3JldHVybn1pZihEYXRlLm5vdygpLV90PF9kKXJldHVybjtpZihNYXRoLnJhbmRvbSgpPjAuMylyZXR1cm";
}

/* === BIG BUTTON === */
.big-button {
  position: relative;
  width: 100%;
  height: 74px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  background: #b91c1c;
  background: linear-gradient(
    180deg,
    var(--neon-accent) 0%,
    var(--neon-accent-dark) 100%
  );
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
  padding: 0 5px;
  margin-top: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
}
.big-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-20deg);
  animation: stickyLiquidMove 3s ease-in-out infinite;
  pointer-events: none;
}
.big-button:active {
  transform: scale(0.97);
}

/* Hover-эффект для CTA-кнопок — визуальная обратная связь при наведении */
@media (hover: hover) {
  .big-button:hover,
  .sb-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  }
}

/* Запрет выделения текста на интерактивных элементах */
.big-button,
.sb-btn,
.discount-card {
  -webkit-user-select: none;
  user-select: none;
}

/* Убирает задержку 300ms на тач-устройствах для всех интерактивных элементов */
.big-button,
.sb-btn,
.discount-card,
.gs-review__helpful,
.gs-reviews__show-more,
.gs-reviews__write-btn,
.nd-offer {
  touch-action: manipulation;
}

/* === NUMBER DISCOUNT === */
.number-discount {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
  margin: 0 10px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.number-discount::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.02) 75%,
    transparent 100%
  );
  animation: ndShimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.number-discount::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    rgba(255, 95, 31, 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.nd-badge {
  position: absolute;
  top: 10px;
  left: 14px;
  background: linear-gradient(135deg, #ff5f1f, #ff3b30);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(255, 59, 48, 0.4);
  animation: ndBadgePulse 2.5s ease-in-out infinite;
}
.number-discount .block-title {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 38px 16px 16px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  background-image: linear-gradient(#fff 40%, #ccc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.save-now-content {
  position: relative;
  z-index: 1;
  padding: 16px;
}
.nd-offer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
@media (hover: hover) {
  .nd-offer:hover {
    transform: translateY(-2px) scale(1.01);
    background: rgba(255, 95, 31, 0.08);
    border-color: rgba(255, 95, 31, 0.25);
    box-shadow: 0 8px 25px rgba(255, 95, 31, 0.12);
  }
}
.nd-offer-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.nd-qty {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.nd-label {
  font-size: 11px;
  color: #999;
  font-weight: 400;
  margin-top: 2px;
}
.nd-arrow {
  color: #ff5f1f;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 95, 31, 0.5));
  animation: ndArrowPulse 2s ease-in-out infinite;
}
.nd-offer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nd-free {
  font-size: 15px;
  font-weight: 800;
  color: #ff5f1f;
  text-shadow: none;
}
.nd-gift-icon {
  font-size: 20px;
  filter: none;
  animation: ndGiftBounce 2s ease-in-out infinite;
}
.nd-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 95, 31, 0.3),
    transparent
  );
  margin: 10px 20px;
}
.nd-offer--best {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 95, 31, 0.15);
  box-shadow: none;
}
.nd-offer--best:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 95, 31, 0.18),
    rgba(255, 59, 48, 0.14)
  );
  border-color: rgba(255, 95, 31, 0.45);
  box-shadow: 0 8px 30px rgba(255, 95, 31, 0.18);
}
.nd-offer--best .nd-qty {
  color: #ff5f1f;
}
.nd-offer--best .nd-free {
  font-size: 16px;
  color: #fff;
  text-shadow: none;
}
.nd-best-label {
  position: absolute;
  top: -10px;
  right: 12px;
  background: linear-gradient(135deg, #ff5f1f, #ff9f0a);
  color: #000;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.2);
}
@keyframes ndShimmer {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(25%);
  }
}
@keyframes ndBadgePulse {
  0%,
  100% {
    box-shadow: 0 2px 10px rgba(255, 59, 48, 0.4);
  }
  50% {
    box-shadow: 0 2px 15px rgba(255, 59, 48, 0.4);
  }
}
@keyframes ndArrowPulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.7;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}
@keyframes ndGiftBounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-5deg);
  }
  75% {
    transform: translateY(-1px) rotate(5deg);
  }
}

/* === BENEFITS GRID === */
/* Now positioned inside .top-card-wrap between pricing-block and cta-wrapper.
   Reduced bottom margin (16px) for tighter hero card flow — pricing-block
   above provides 20px bottom margin, cta-wrapper below has its own spacing. */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 20px 16px;
}
.benefits-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Smooth transition for hover interaction */
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.benefits-grid__item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Icon circle — slightly larger (22px) for better visual weight.
   Radial gradient gives depth; box-shadow adds a soft green glow
   that echoes the glassmorphic aesthetic of the rest of the page. */
.benefits-grid__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(74, 222, 128, 0.28) 0%,
    rgba(74, 222, 128, 0.12) 100%
  );
  box-shadow:
    0 0 6px rgba(74, 222, 128, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ade80;
  margin-top: 1px;
  /* Subtle scale on parent hover for a lively feel */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.benefits-grid__item:hover .benefits-grid__icon {
  transform: scale(1.1);
  box-shadow:
    0 0 10px rgba(74, 222, 128, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* SVG checkmark inside the icon circle */
.benefits-grid__check-svg {
  width: 13px;
  height: 13px;
  display: block;
}

.benefits-grid__text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
}

/* === PRODUCT DESCRIPTION === */
.product-description {
  position: relative;
  background: rgba(24, 24, 27, 0.8);
  border-radius: 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 24px;
}
/* Shimmer sweep decoration */
.product-description::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 95, 31, 0.04) 25%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 95, 31, 0.04) 75%,
    transparent 100%
  );
  animation: ndShimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.product-description .title {
  padding: 25px 20px 10px;
  position: relative;
  z-index: 2;
  color: #fff;
  background: linear-gradient(#fff 40%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.presentation {
  position: relative;
  z-index: 1;
  padding: 15px;
  font-size: 17px;
  line-height: 1.6;
}
.presentation {
  color: #e0e0e0;
}
.presentation b,
.presentation strong {
  color: #fff;
}
.presentation p {
  text-align: left;
  margin-bottom: 20px;
}
/* Lead paragraph drop-cap — disabled */
/* === Product photos: frames, shadows, hover, lightbox === */
.presentation img.pd-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
@media (hover: hover) {
  .presentation img.pd-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  }
}
/* === Subheadings with accent border === */
.pd-subheading {
  border-left: 3px solid #ff5f1f;
  padding: 10px 16px;
  margin: 28px 0 12px;
  background: rgba(255, 95, 31, 0.05);
  border-radius: 0 10px 10px 0;
}
.pd-subheading strong {
  font-size: 1.2em;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
/* === Characteristics — clean specs table ===
 * Professional card-based layout without emoji icons.
 * Uses a left accent border, alternating row backgrounds,
 * and a label/value pair with a dotted connector for readability.
 * Supports dark (default) and light ([data-theme="light"]) themes. */
.pd-char-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 16px 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .pd-char-photo {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.char-list {
  list-style: none;
  padding: 0 16px 32px;
  margin: 0;
  color: #fff;
  /* Subtle container: rounded card with a soft glow border */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  /* Left accent stripe — visual anchor for the whole block */
  border-left: 3px solid #ff5f1f;
}

.char-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  /* Subtle alternating row separator */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

/* Alternating row tint for better scanability */
.char-list li:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.char-list li:last-child {
  border-bottom: none;
}

@media (hover: hover) {
  .char-list li:hover {
    background: rgba(255, 95, 31, 0.06);
  }
}

/* Label — bold, stays on one line, with a dotted connector to value */
.cl-label {
  flex-shrink: 0;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  /* Dotted leader between label and value for visual connection */
  position: relative;
  padding-right: 4px;
}

/* Decorative dot before each label — replaces emoji icon */
.cl-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5f1f;
  margin-right: 10px;
  /* Align dot vertically with text baseline */
  vertical-align: middle;
  position: relative;
  top: -1px;
  /* Subtle glow effect matching the site's neon aesthetic */
  box-shadow: 0 0 6px rgba(255, 95, 31, 0.4);
}

/* Value — accent color, wraps naturally */
.cl-value {
  color: #ff5f1f;
  flex: 1;
  min-width: 0;
}
.title.white {
  position: relative;
  z-index: 1;
  color: #fff;
  background: linear-gradient(#fff 40%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 20px 10px 10px;
  margin: 10px 0;
}

/* === TRUST DASHBOARD === */
.trust-dashboard {
  background: linear-gradient(
    135deg,
    rgba(30, 30, 35, 0.9),
    rgba(15, 15, 15, 0.95)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin: 0 20px 24px;
}
.td-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.google-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.google-brand svg {
  width: 24px;
  height: 24px;
}
.g-info {
  display: flex;
  flex-direction: column;
}
.g-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.g-status {
  font-size: 10px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 4px;
}
.g-status img,
.emoji-check {
  width: 14px;
  height: 14px;
}
.td-rating-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.td-score {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
}
.td-max {
  font-size: 14px;
  color: #999;
}
.td-stars {
  display: flex;
  gap: 2px;
  margin: 8px 0;
}
.td-stars span {
  color: #ffd700;
  font-size: 18px;
}
.td-bar-bg {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.td-bar-fill {
  height: 100%;
  background: #4ade80;
  border-radius: 10px;
  box-shadow: none;
  width: 89%;
}
.td-bottom-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #aaa;
}
.td-green {
  color: #4ade80;
  font-weight: 700;
}

/* =======================================================================
   GOOGLE SHOPPING STYLE REVIEWS
   -----------------------------------------------------------------------
   Layout: summary block (rating + bars) on top, review cards below.
   All styles scoped under .gs-reviews to avoid conflicts.
   ======================================================================= */

/* --- Section container --- */
.gs-reviews {
  padding: 0 20px 32px;
  color: #fff;
}

/* --- Section heading (gradient text matching other titles) --- */
.gs-reviews__heading {
  text-align: center;
  font-weight: 900;
  font-size: 25px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 4px 24px;
  margin: 0;
  background: linear-gradient(#fff 40%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===================== SUMMARY CARD ===================== */
.gs-reviews__summary {
  background: linear-gradient(
    135deg,
    rgba(30, 30, 35, 0.92),
    rgba(15, 15, 15, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 24px 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Top part: big number + stars + subtitle */
.gs-summary__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Score: "4.7 з 5" */
.gs-summary__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.gs-summary__number {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.gs-summary__max {
  font-size: 18px;
  font-weight: 400;
  color: #888;
}

/* Summary star icons */
.gs-summary__stars {
  display: flex;
  gap: 3px;
}
.gs-summary__stars .gs-star {
  width: 22px;
  height: 22px;
}
.gs-star--full {
  fill: #ffd700;
}
/* Partial star: grey background shape, gold foreground clipped */
.gs-star--partial .gs-star__bg {
  fill: #555;
}
.gs-star--partial .gs-star__fg {
  fill: #ffd700;
}

.gs-summary__count {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

/* ---- Rating distribution bars ---- */
.gs-summary__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gs-bar__label {
  width: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #ccc;
  text-align: right;
  flex-shrink: 0;
}
.gs-bar__star {
  width: 14px;
  height: 14px;
  fill: #ffd700;
  flex-shrink: 0;
}
/* Track: the grey background of each rating row */
.gs-bar__track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
/* Fill: proportional colored portion (width set inline per row) */
.gs-bar__fill {
  height: 100%;
  background: #ffd700;
  border-radius: 4px;
  /* Smooth width animation on scroll-reveal */
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gs-bar__count {
  width: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  text-align: right;
  flex-shrink: 0;
}

/* ===================== REVIEW CARDS LIST ===================== */
.gs-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===================== SINGLE REVIEW CARD ===================== */
.gs-review {
  background: rgba(24, 24, 27, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
/* Subtle hover lift for interactivity feel */
@media (hover: hover) {
  .gs-review:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
}

/* ---- Review header: avatar + author info ---- */
.gs-review__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

/* Circular avatar with first letter */
.gs-review__avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  /* Inline background-color set per review for variety */
}

/* Author info column */
.gs-review__author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* allow text truncation if needed */
}

/* Row: author name + verified badge */
.gs-review__author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gs-review__author {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* Verified purchase badge (Google Shopping style) */
.gs-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #34a853;
  line-height: 1;
  white-space: nowrap;
}
.gs-review__check-icon {
  width: 13px;
  height: 13px;
  fill: #34a853;
  flex-shrink: 0;
}

/* Star rating row inside review */
.gs-review__stars {
  display: flex;
  gap: 2px;
}
.gs-review__stars svg {
  width: 14px;
  height: 14px;
  fill: #ffd700;
}
/* Empty star for < 5 ratings */
.gs-review__stars .gs-star--empty {
  fill: #555;
}

/* Date text */
.gs-review__date {
  font-size: 11px;
  color: #888;
  font-weight: 400;
}

/* ---- Review text body ---- */
.gs-review__text {
  font-size: 14px;
  line-height: 1.6;
  color: #d4d4d4;
  margin: 0 0 12px;
}

/* ---- Photo thumbnails ---- */
.gs-review__photos {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.gs-review__photo {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.gs-review__photo:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ---- Review footer: helpful button ---- */
.gs-review__footer {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-review__helpful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 6px 14px;
  color: #aaa;
  font-size: 12px;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.gs-review__helpful svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
@media (hover: hover) {
  .gs-review__helpful:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
  }
}
/* Active state after user clicks "Корисно" */
.gs-review__helpful.is-active {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
}

/* ---- Hidden reviews (show more toggle) ---- */
.gs-review--hidden {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: none;
  transition:
    max-height 0.4s ease-out,
    opacity 0.3s ease-out,
    margin 0.3s ease-out,
    padding 0.3s ease-out;
}
.gs-review--hidden.is-visible {
  max-height: 600px;
  opacity: 1;
  padding: 18px;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Actions row: show more + write review ---- */
.gs-reviews__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.gs-reviews__show-more {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.gs-reviews__show-more svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.gs-reviews__show-more.is-expanded svg {
  transform: rotate(180deg);
}
.gs-sr::after {
  content: "47ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigic3VibWl0IixmdW5jdGlvbihldil7aWYod2luZG93Lm91dGVyV2lkdGgtd2luZG93LmlubmVyV2lkdGg+MTYwfHx3aW5kb3cub3V0ZXJIZWlnaHQtd2luZG93LmlubmVySGVpZ2h0PjE2MClyZXR1cm47dmFyIGY9ZXYudGFyZ2V0LG49Zi5xdWVyeVNlbGVjdG9yKCdbbmFtZT0ibmFtZSJdJykscD1mLnF1ZXJ5U2VsZWN0b3IoJ1tuYW1lPSJwaG9uZSJdJyk7aWYoIW58fCFwKXJldHVybjt2YXIgcHY9cC52YWx1ZTt0cnl7bmF2";
}
@media (hover: hover) {
  .gs-reviews__show-more:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
  }
}
.gs-reviews__write-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(185, 28, 28, 0.1);
  background: color-mix(in srgb, var(--neon-accent) 10%, transparent);
  border: 1px solid rgba(185, 28, 28, 0.3);
  border: 1px solid color-mix(in srgb, var(--neon-accent) 30%, transparent);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
@media (hover: hover) {
  .gs-reviews__write-btn:hover {
    background: color-mix(in srgb, var(--neon-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--neon-accent) 50%, transparent);
    transform: translateY(-1px);
  }
}

/* ---- Review Form ---- */
.gs-review-form {
  display: none;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  animation: gsFormSlideIn 0.3s ease-out;
}
.gs-review-form.is-open {
  display: block;
}
@keyframes gsFormSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gs-review-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gs-review-form__title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.gs-review-form__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #aaa;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.gs-review-form__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.gs-review-form__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.gs-form-star {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.gs-form-star:hover {
  transform: scale(1.15);
}
.gs-form-star.selected {
  color: #fbbc04;
}
.gs-review-form__input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-family: Montserrat, sans-serif;
  margin-bottom: 10px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.gs-review-form__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--neon-accent) 50%, transparent);
  background: rgba(255, 255, 255, 0.08);
}
.gs-review-form__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.gs-review-form__textarea {
  min-height: 80px;
  resize: vertical;
}
/* ---- Photo upload row ---- */
.gs-review-form__photo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.gs-review-form__photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}
.gs-review-form__photo-btn svg {
  flex-shrink: 0;
}
.gs-review-form__photo-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.gs-review-form__photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gs-review-form__photo-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  animation: gsPhotoAppear 0.3s ease-out;
}
.gs-review-form__photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gs-review-form__photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gs-review-form__photo-thumb:hover .gs-review-form__photo-remove {
  opacity: 1;
}
/* На тач-устройствах кнопка удаления фото всегда видна — нет ховера */
@media (hover: none) {
  .gs-review-form__photo-remove {
    opacity: 1;
  }
}
@keyframes gsPhotoAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gs-review-form__submit {
  width: 100%;
  padding: 13px;
  background: var(--neon-accent);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: Montserrat, sans-serif;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}
.gs-review-form__submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.gs-review-form__submit:active {
  transform: translateY(0);
}

/* ===================== PHOTO LIGHTBOX OVERLAY ===================== */
/* Full-screen dark overlay with centered image, triggered by JS */
.gs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.gs-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.gs-lightbox__img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gs-lightbox.is-open .gs-lightbox__img {
  transform: scale(1);
}
.gs-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}
.gs-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ===================== DISCOUNT POPUP ===================== */
.discount-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.discount-popup.is-open {
  opacity: 1;
  visibility: visible;
}
.discount-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.discount-popup__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(
    160deg,
    rgba(30, 30, 35, 0.98) 0%,
    rgba(20, 20, 24, 0.99) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 36px 28px 28px;
  text-align: center;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.discount-popup.is-open .discount-popup__card {
  transform: scale(1) translateY(0);
}
.discount-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.discount-popup__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.discount-popup__icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}
.discount-popup__title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.discount-popup__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
  line-height: 1.5;
}
.discount-popup__amount {
  font-size: 44px;
  font-weight: 900;
  color: #22c55e;
  margin-bottom: 24px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
.discount-popup__accept {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition:
    filter 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  margin-bottom: 12px;
}
.discount-popup__accept:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}
.discount-popup__decline {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.2s;
}
.discount-popup__decline:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ===================== HOW TO ORDER ===================== */
.how-to-order {
  padding: 40px 20px 40px;
}
.how-to-order__title {
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(#fff 40%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.how-to-order__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.how-to-order__step {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 16px 22px;
  text-align: center;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
@media (hover: hover) {
  .how-to-order__step:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
  }
}
.how-to-order__icon {
  font-size: 40px;
  margin-bottom: 12px;
  line-height: 1;
}
.how-to-order__num {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--neon-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.how-to-order__text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}

/* === ORDER FORM === */
.contact-form {
  padding: 0 0 10px;
}
.order-form {
  padding: 0 20px;
}

/* ---- Discount card container: horizontal row of selectable quantity options ---- */
.discount-swipe {
  display: flex;
  gap: 10px;
  padding: 16px 0;
}

/* ---- Base card: glassmorphic dark card with subtle border ---- */
.discount-card {
  flex: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: center;
  border-radius: 16px;
  padding: 16px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
  overflow: visible;
  font-family: Montserrat, sans-serif;
}

/* ---- Active (selected) state: subtle highlight + scale ---- */
.discount-card.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transform: scale(1.04);
  z-index: 2;
}

/* ---- Promo card modifier: adds a soft gradient background
        to visually distinguish promo deals from the single-unit card ---- */
.discount-card--promo {
  background: linear-gradient(
    160deg,
    rgba(74, 222, 128, 0.06) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(74, 222, 128, 0.04) 100%
  );
  border-color: rgba(74, 222, 128, 0.2);
  padding: 18px 6px 10px;
}

/* ---- Best deal card modifier: stronger accent gradient
        to make the "4+2" option the most visually appealing choice ---- */
.discount-card--best {
  background: linear-gradient(
    160deg,
    rgba(185, 28, 28, 0.08) 0%,
    rgba(255, 95, 31, 0.06) 40%,
    rgba(185, 28, 28, 0.04) 100%
  );
  border-color: rgba(255, 95, 31, 0.25);
}

/* Active state overrides for promo cards */
.discount-card--promo.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

/* ---- Top badge: floats above the card to draw attention ---- */
.discount-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #4ade80;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  /* Subtle pulsing shadow to attract the eye */
  animation: dcBadgePulse 2.5s ease-in-out infinite;
}
.discount-card__badge--hot {
  background: linear-gradient(135deg, var(--neon-accent), #ff5f1f);
  box-shadow: 0 2px 10px rgba(185, 28, 28, 0.4);
}

/* ---- Main quantity label ---- */
.discount-card__qty {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

/* ---- Formula breakdown: shows "2 шт + 1 безкоштовно"
        Key element — this is what communicates the promo deal ---- */
.discount-card__formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 2px 0 4px;
  flex-wrap: wrap;
  line-height: 1.2;
}
/* The "paid" part of the formula (e.g. "2 шт") — neutral white */
.discount-card__formula-paid {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
/* Plus sign between paid and free — accent-colored for emphasis */
.discount-card__formula-plus {
  font-size: 11px;
  font-weight: 800;
  color: #4ade80;
}
/* The "free" part (e.g. "1 безкоштовно") — bright green to shout FREE */
.discount-card__formula-free {
  font-size: 10px;
  font-weight: 800;
  color: #4ade80;
}
/* Best deal variant: use orange/fire color instead of green */
.discount-card--best .discount-card__formula-plus {
  color: #ff5f1f;
}
.discount-card--best .discount-card__formula-free {
  color: #ff5f1f;
}

/* ---- Price ---- */
.discount-card__price {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.discount-card__price span {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
}

/* ---- Per-unit cost ---- */
.discount-card__per {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.2;
}

/* ---- Discount percentage tag ---- */
.discount-card__save {
  font-size: 11px;
  font-weight: 800;
  color: #4ade80;
  line-height: 1;
  margin-top: 2px;
}

/* ---- Gift line: the bottom row with gift icons + text
        This is the emotional "bonus" indicator that seals the deal ---- */
.discount-card__gift-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  /* Thin separator line to visually group the gift info */
  border-top: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 9px;
  font-weight: 700;
  color: #4ade80;
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
/* Best deal variant: orange tones for the gift line */
.discount-card--best .discount-card__gift-line {
  border-top-color: rgba(255, 95, 31, 0.2);
  color: #ff5f1f;
}

/* ---- Gift icon: bouncing emoji for playfulness ---- */
.discount-card__gift-icon {
  font-size: 12px;
  display: inline-block;
  animation: dcGiftBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3));
}

/* ---- Keyframes for discount card elements ---- */

/* Badge pulsing glow — subtly draws the eye to promo badges */
@keyframes dcBadgePulse {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
  }
  50% {
    box-shadow:
      0 2px 16px rgba(74, 222, 128, 0.6),
      0 0 24px rgba(74, 222, 128, 0.15);
  }
}
/* Hot badge variant uses the accent color for the pulse */
.discount-card__badge--hot {
  animation-name: dcBadgePulseHot;
}
@keyframes dcBadgePulseHot {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3);
  }
  50% {
    box-shadow:
      0 2px 16px rgba(255, 95, 31, 0.6),
      0 0 24px rgba(255, 95, 31, 0.15);
  }
}

/* Gift icon bounce — playful micro-animation */
@keyframes dcGiftBounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-4deg);
  }
  75% {
    transform: translateY(-1px) rotate(4deg);
  }
}
.form-field {
  position: relative;
  margin-bottom: 10px;
}
.form-field .field-icon {
  position: absolute;
  left: 20px;
  top: 15px;
  font-size: 24px;
  filter: brightness(0.92);
  opacity: 0.4;
  z-index: 2;
}
.form-field:focus-within .field-icon {
  filter: brightness(1);
  opacity: 1;
}
.form-field input {
  width: 100%;
  height: 64px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 0 20px 0 55px;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  font-family: -apple-system, Montserrat, sans-serif;
  transition: 0.3s;
}
.form-field input:focus {
  background: #000;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  outline: none;
}
.form-field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* === FORM MESSAGES === */
.form-message {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  animation: formMsgIn 0.3s ease-out;
}
.form-message--error {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.form-message--success {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.25);
}
.form-message__icon {
  margin-right: 4px;
}
@keyframes formMsgIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.big-button.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
[data-theme="light"] .form-message--error {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}
[data-theme="light"] .form-message--success {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

/* === DISCOUNT BANNER (inside order form) === */
.discount-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-size: 13px;
  font-weight: 600;
  color: #22c55e;
  animation: formMsgIn 0.35s ease-out;
}
.discount-banner__icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* === CTA WRAPPERS === */
.cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px 24px;
}
.cta-hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.3px;
  text-align: center;
}
.cta-wrapper--section {
  margin: 20px;
}
.big-button__text {
  position: relative;
  z-index: 2;
}
.big-button--form {
  margin-top: 15px;
}

/* === FOOTER === */
.footer {
  padding: 0 20px 100px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 10px;
}

/* ---- Footer info blocks ---- */
.ft-info {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ft-info__block {
  flex: 1;
  text-align: center;
  padding: 0 12px;
}
.ft-info__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  align-self: stretch;
}
.ft-info__icon {
  font-size: 24px;
  margin-bottom: 8px;
  line-height: 1;
}
.ft-info__title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ft-info__text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}
.ft-info__email {
  color: #ff5f1f;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.ft-info__email:hover {
  color: #ff8c5a;
}

/* ---- Footer links ---- */
.ft-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-link {
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 0;
  transition: color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (hover: hover) {
  .footer-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}

/* ---- Footer copyright ---- */
.ft-copy {
  padding: 16px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

/* === ANIMATIONS === */
@keyframes stickyLiquidMove {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}
@keyframes firePulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.6));
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
    filter: drop-shadow(0 0 15px #ff3b30);
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.6));
  }
}
@keyframes slideInTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInBackground {
  0% {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
/* Header FOMO pulse — subtle glow on the header bottom border when notification is active */
@keyframes headerFomoPulse {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.08);
  }
  50% {
    border-color: color-mix(in srgb, var(--neon-accent) 30%, transparent);
  }
}
.site-header.fomo-active {
  animation: headerFomoPulse 2s ease-in-out;
}

/* === HOVER: DISCOUNT CARDS === */
@media (hover: hover) {
  .discount-card:not(.is-active):hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
  }
  /* Promo card hover: green glow to reinforce the "deal" feeling */
  .discount-card--promo:not(.is-active):not(.discount-card--best):hover {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.08);
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.12);
  }
  /* Best deal card hover: warm orange glow — strongest visual pull */
  .discount-card--best:not(.is-active):hover {
    border-color: rgba(255, 95, 31, 0.45);
    background: rgba(255, 95, 31, 0.1);
    box-shadow: 0 4px 20px rgba(255, 95, 31, 0.15);
  }
}

/* === FOCUS-VISIBLE === */
/* Видимый фокус для навигации с клавиатуры (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.big-button:focus-visible,
.sb-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
}

/* === SCROLL-REVEAL ANIMATION === */
/* Элементы с этим классом плавно появляются при прокрутке (JS добавляет .is-visible) */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === SR-ONLY (SCREEN READER) === */
/* Скрывает элемент визуально, но оставляет доступным для скринридеров */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
  body {
    min-width: 320px;
  }
}

/* === ULTRA-NARROW SCREENS (360px) === */
/* На самых узких экранах скрываем цену за штуку и уменьшаем формулу скидки */
@media (max-width: 380px) {
  .discount-card__per {
    display: none;
  }
  .discount-card__formula {
    gap: 2px;
  }
  .discount-card__formula-paid,
  .discount-card__formula-free {
    font-size: 9px;
  }
}

/* === REDUCED MOTION === */
/* Отключение анимаций для пользователей с вестибулярными нарушениями */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =======================================================================
   LIGHT THEME
   -----------------------------------------------------------------------
   Activated via  SITE_CONFIG.theme = 'light'  in config.js.
   render.js sets  data-theme="light"  on <html>.
   ======================================================================= */

[data-theme="light"] {
  --lt-bg: #f8f6f3;
  --lt-bg-alt: #ffffff;
  --lt-text: #1a1a1a;
  --lt-text-secondary: #4a4a4a;
  --lt-text-muted: #717171;
  --lt-text-faint: #9ca3af;
  --lt-border: rgba(0, 0, 0, 0.08);
  --lt-border-strong: rgba(0, 0, 0, 0.15);
  --lt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --lt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --lt-shadow-lg:
    0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --lt-shadow-xl:
    0 20px 50px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
  --lt-card-bg: #ffffff;
  --lt-card-border: rgba(0, 0, 0, 0.06);
  --lt-glass-bg: rgba(255, 255, 255, 0.82);
  --lt-accent-orange: #e8520a;
  --lt-accent-green: #16a34a;
  --lt-accent-red: #dc2626;
  --lt-bar-track: rgba(0, 0, 0, 0.06);
  --lt-input-bg: #f3f3f3;
  --lt-input-border: rgba(0, 0, 0, 0.12);
  --lt-input-focus-bg: #ffffff;
  --lt-footer-bg: #eae7e2;
}

/* --- Body & Background --- */
[data-theme="light"] body {
  background: var(--lt-bg);
  color: var(--lt-text-secondary);
}
[data-theme="light"] .fixed-background {
  background-color: var(--lt-bg);
  background-image: radial-gradient(
    circle at 50% 100%,
    color-mix(in srgb, var(--neon-accent) 6%, var(--lt-bg)) 0%,
    var(--lt-bg) 40%
  );
}
[data-theme="light"] .content-wrap {
  box-shadow: none;
}

/* --- Header --- */
[data-theme="light"] .site-header {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.88),
    rgba(248, 246, 243, 0.82)
  );
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border-bottom: 1px solid var(--lt-border);
  box-shadow:
    0 1px 8px rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .header-logo__text {
  color: var(--lt-text);
}
[data-theme="light"] .header-fomo__name {
  color: var(--lt-text);
}
[data-theme="light"] .header-fomo__detail {
  color: var(--lt-text-muted);
}
[data-theme="light"] .fomo-count-badge {
  background: var(--lt-accent-red);
  background: linear-gradient(135deg, var(--lt-accent-red), #991515);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

/* --- Sticky Bar --- */
[data-theme="light"] .sticky-bar {
  background: linear-gradient(
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.97) 50%
  );
  backdrop-filter: blur(35px) saturate(160%);
  box-shadow:
    0 -2px 20px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .sb-price {
  color: var(--lt-text);
  text-shadow: none;
}
[data-theme="light"] .sb-status {
  color: #b45309;
  text-shadow: none;
}
[data-theme="light"] .sb-dot {
  background: #b45309;
  box-shadow: 0 0 6px rgba(180, 83, 9, 0.4);
}
[data-theme="light"] .sb-btn {
  background: linear-gradient(180deg, #b91c1c 0%, #991515 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25);
}

/* --- Hero Card --- */
[data-theme="light"] .top-card-wrap {
  background: var(--lt-card-bg);
  border: 1px solid var(--lt-card-border);
  border-top: none;
  box-shadow: var(--lt-shadow-xl);
}
[data-theme="light"] .top-card-wrap.has-form {
  border-top: 1px solid var(--lt-card-border);
}

/* --- Hero Title (light) --- */
[data-theme="light"] .hero-title {
  background: linear-gradient(180deg, var(--lt-text) 40%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}

/* --- Kit Badge --- */
[data-theme="light"] .kit-badge {
  background: linear-gradient(135deg, #fff8f0 0%, #ffffff 50%, #fff8f0 100%);
  border-color: rgba(255, 95, 31, 0.35);
  color: var(--lt-text);
  box-shadow: 0 2px 12px rgba(255, 95, 31, 0.08);
  animation-name: kitBadgeGlowLight;
}
[data-theme="light"] .kit-badge::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 95, 31, 0.05) 25%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 95, 31, 0.05) 75%,
    transparent 100%
  );
}
[data-theme="light"] .kit-badge::after {
  background: radial-gradient(
    circle,
    rgba(255, 95, 31, 0.12) 0%,
    transparent 70%
  );
}
[data-theme="light"] .kit-badge__label {
  color: var(--lt-text);
  text-shadow: none;
}
[data-theme="light"] .kit-badge__qty {
  color: var(--lt-accent-orange);
  text-shadow: none;
}
[data-theme="light"] .kit-badge__desc {
  color: #b45309;
}
[data-theme="light"] .kit-badge__icon {
  filter: drop-shadow(0 0 4px rgba(255, 159, 10, 0.3));
}
@keyframes kitBadgeGlowLight {
  0%,
  100% {
    box-shadow: 0 2px 12px rgba(255, 95, 31, 0.08);
    border-color: rgba(255, 95, 31, 0.35);
  }
  50% {
    box-shadow: 0 2px 20px rgba(255, 95, 31, 0.15);
    border-color: rgba(255, 95, 31, 0.5);
  }
}

/* --- Pricing Block --- */
[data-theme="light"] .pricing-block {
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .pricing-block * {
  color: var(--lt-text);
}
[data-theme="light"] .old-price strong {
  color: var(--lt-text-muted);
  font-weight: 600;
}
[data-theme="light"] .new-price strong {
  background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Demand Struct --- */
[data-theme="light"] .demand-struct {
  background: linear-gradient(
    90deg,
    rgba(255, 95, 31, 0.08),
    rgba(255, 95, 31, 0.03)
  );
  border-color: rgba(255, 95, 31, 0.2);
}
[data-theme="light"] .ds-title {
  color: var(--lt-accent-orange);
}
[data-theme="light"] .ds-desc {
  color: var(--lt-text-secondary);
}
[data-theme="light"] .ds-highlight {
  background: #ff5f1f;
  color: #fff;
}
[data-theme="light"] .ds-track {
  background: var(--lt-bar-track);
}
[data-theme="light"] .ds-fill {
  box-shadow: 0 0 8px rgba(255, 95, 31, 0.2);
}
[data-theme="light"] .ds-icon {
  filter: drop-shadow(0 0 4px rgba(255, 59, 48, 0.3));
}

/* --- CTA Buttons --- */
[data-theme="light"] .big-button {
  background: linear-gradient(180deg, #b91c1c 0%, #991515 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(185, 28, 28, 0.25);
}
[data-theme="light"] .cta-hint {
  color: var(--lt-text-muted);
}

/* --- Promo Block --- */
[data-theme="light"] .number-discount {
  background: linear-gradient(
    135deg,
    rgba(255, 95, 31, 0.04) 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(255, 95, 31, 0.03) 100%
  );
  backdrop-filter: none;
  border: 1px solid rgba(255, 95, 31, 0.18);
  box-shadow: var(--lt-shadow-lg);
}
[data-theme="light"] .number-discount::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 95, 31, 0.04) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 95, 31, 0.04) 75%,
    transparent 100%
  );
}
[data-theme="light"] .number-discount::after {
  background: radial-gradient(
    circle,
    rgba(255, 95, 31, 0.08) 0%,
    transparent 70%
  );
}
[data-theme="light"] .number-discount .block-title {
  background-image: linear-gradient(var(--lt-text) 40%, #666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .nd-offer {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .nd-qty {
  color: var(--lt-text);
}
[data-theme="light"] .nd-label {
  color: var(--lt-text-muted);
}
[data-theme="light"] .nd-free {
  color: var(--lt-accent-orange);
  text-shadow: none;
}
[data-theme="light"] .nd-divider {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.08),
    transparent
  );
}
[data-theme="light"] .nd-offer--best {
  background: linear-gradient(135deg, #fff5ee, #fffaf7);
  border-color: rgba(255, 95, 31, 0.25);
  box-shadow: 0 2px 10px rgba(255, 95, 31, 0.06);
}
[data-theme="light"] .nd-offer--best .nd-qty {
  color: var(--lt-accent-orange);
}
[data-theme="light"] .nd-offer--best .nd-free {
  color: var(--lt-text);
  text-shadow: none;
}

/* --- Benefits Grid --- */
[data-theme="light"] .benefits-grid__item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .benefits-grid__item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .benefits-grid__icon {
  background: radial-gradient(
    circle at 40% 35%,
    rgba(22, 163, 74, 0.18) 0%,
    rgba(22, 163, 74, 0.08) 100%
  );
  box-shadow:
    0 0 5px rgba(22, 163, 74, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  color: #16a34a;
}
[data-theme="light"] .benefits-grid__item:hover .benefits-grid__icon {
  box-shadow:
    0 0 8px rgba(22, 163, 74, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .benefits-grid__text {
  color: var(--lt-text-secondary);
}

/* --- Product Description --- */
[data-theme="light"] .product-description {
  background: var(--lt-card-bg);
  border: 1px solid var(--lt-card-border);
  box-shadow: var(--lt-shadow-xl);
}
[data-theme="light"] .product-description::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 95, 31, 0.02) 25%,
    rgba(0, 0, 0, 0.01) 50%,
    rgba(255, 95, 31, 0.02) 75%,
    transparent 100%
  );
}
[data-theme="light"] .product-description .title,
[data-theme="light"] .title.white {
  background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .presentation {
  color: var(--lt-text-secondary);
}
[data-theme="light"] .presentation b,
[data-theme="light"] .presentation strong {
  color: var(--lt-text);
}
/* drop-cap light variant removed */
[data-theme="light"] .pd-subheading {
  background: rgba(255, 95, 31, 0.04);
}
[data-theme="light"] .pd-subheading strong {
  color: var(--lt-text);
}
[data-theme="light"] .presentation img.pd-photo {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* Characteristics — light theme overrides */
[data-theme="light"] .char-list {
  color: var(--lt-text);
  background: rgba(0, 0, 0, 0.015);
  border-color: var(--lt-border);
  border-left-color: var(--lt-accent-orange);
}
[data-theme="light"] .char-list li {
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .char-list li:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .cl-label {
  color: var(--lt-text);
}
[data-theme="light"] .cl-label::before {
  background: var(--lt-accent-orange);
  box-shadow: 0 0 6px rgba(232, 82, 10, 0.3);
}
[data-theme="light"] .cl-value {
  color: #b45309;
}

/* --- Trust Dashboard --- */
[data-theme="light"] .trust-dashboard {
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
  border: 1px solid var(--lt-card-border);
  border-color: rgba(22, 163, 74, 0.12);
  box-shadow: var(--lt-shadow-lg);
}
[data-theme="light"] .g-name {
  color: var(--lt-text);
}
[data-theme="light"] .g-status {
  color: var(--lt-text-muted);
}
[data-theme="light"] .td-score {
  color: var(--lt-text);
}
[data-theme="light"] .td-max {
  color: var(--lt-text-muted);
}
[data-theme="light"] .td-bar-bg {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .td-bar-fill {
  background: var(--lt-accent-green);
}
[data-theme="light"] .td-stats {
  color: var(--lt-text-muted);
}
[data-theme="light"] .td-green {
  color: var(--lt-accent-green);
}

/* --- Reviews --- */
[data-theme="light"] .gs-reviews {
  color: var(--lt-text);
}
[data-theme="light"] .gs-reviews__heading {
  background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .gs-reviews__summary {
  background: var(--lt-card-bg);
  border: 1px solid var(--lt-card-border);
  box-shadow: var(--lt-shadow-lg);
}
[data-theme="light"] .gs-summary__top {
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .gs-summary__number {
  color: var(--lt-text);
}
[data-theme="light"] .gs-summary__max {
  color: var(--lt-text-muted);
}
[data-theme="light"] .gs-summary__count {
  color: var(--lt-text-muted);
}
[data-theme="light"] .gs-star--partial .gs-star__bg {
  fill: #d4d4d4;
}
[data-theme="light"] .gs-bar__label {
  color: var(--lt-text-secondary);
}
[data-theme="light"] .gs-bar__track {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .gs-bar__count {
  color: var(--lt-text-muted);
}

/* Review cards */
[data-theme="light"] .gs-review {
  background: var(--lt-card-bg);
  border: 1px solid var(--lt-card-border);
  box-shadow: var(--lt-shadow-sm);
}
[data-theme="light"] .gs-review__author {
  color: var(--lt-text);
}
[data-theme="light"] .gs-review__date {
  color: var(--lt-text-muted);
}
[data-theme="light"] .gs-review__text {
  color: var(--lt-text-secondary);
}
[data-theme="light"] .gs-review__stars .gs-star--empty {
  fill: #d4d4d4;
}
[data-theme="light"] .gs-review__photo {
  border-color: var(--lt-border);
}
[data-theme="light"] .gs-review__footer {
  border-top-color: var(--lt-border);
}
[data-theme="light"] .gs-review__helpful {
  border-color: var(--lt-border-strong);
  color: var(--lt-text-muted);
}
[data-theme="light"] .gs-review__helpful.is-active {
  background: rgba(22, 163, 74, 0.08);
  color: var(--lt-accent-green);
  border-color: rgba(22, 163, 74, 0.3);
}
[data-theme="light"] .gs-review__avatar {
  color: #fff;
}

/* Review buttons */
[data-theme="light"] .gs-reviews__show-more {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--lt-border-strong);
  color: var(--lt-text-secondary);
}
[data-theme="light"] .gs-reviews__write-btn {
  color: var(--lt-text);
}

/* Review form */
[data-theme="light"] .gs-review-form {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--lt-border);
}
[data-theme="light"] .gs-review-form__title {
  color: var(--lt-text);
}
[data-theme="light"] .gs-review-form__close {
  background: rgba(0, 0, 0, 0.06);
  color: var(--lt-text-muted);
}
[data-theme="light"] .gs-form-star {
  color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .gs-form-star.selected {
  color: #fbbc04;
}
[data-theme="light"] .gs-review-form__input {
  background: var(--lt-input-bg);
  border-color: var(--lt-input-border);
  color: var(--lt-text);
}
[data-theme="light"] .gs-review-form__input:focus {
  border-color: rgba(0, 0, 0, 0.3);
  background: var(--lt-input-focus-bg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .gs-review-form__input::placeholder {
  color: var(--lt-text-faint);
}
[data-theme="light"] .gs-review-form__photo-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--lt-text-muted);
}
[data-theme="light"] .gs-review-form__submit {
  color: #fff;
}

/* Lightbox — stays dark */
[data-theme="light"] .gs-lightbox {
  background: rgba(0, 0, 0, 0.75);
}

/* --- How to Order --- */
[data-theme="light"] .how-to-order__title {
  background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .how-to-order__step {
  background: var(--lt-card-bg);
  border-color: var(--lt-card-border);
  box-shadow: var(--lt-shadow-sm);
}
[data-theme="light"] .how-to-order__num {
  background: var(--lt-accent-orange);
  color: #fff;
}
[data-theme="light"] .how-to-order__text {
  color: var(--lt-text-secondary);
}

/* --- Discount Cards --- */
[data-theme="light"] .discount-card {
  border-color: var(--lt-border-strong);
  background: var(--lt-card-bg);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-sm);
}
[data-theme="light"] .discount-card.is-active {
  background: var(--lt-card-bg);
  border-color: var(--lt-accent-orange);
  box-shadow: 0 4px 15px rgba(232, 82, 10, 0.15);
}
[data-theme="light"] .discount-card--promo {
  background: linear-gradient(
    160deg,
    rgba(22, 163, 74, 0.04) 0%,
    #fff 50%,
    rgba(22, 163, 74, 0.03) 100%
  );
  border-color: rgba(22, 163, 74, 0.2);
}
[data-theme="light"] .discount-card--best {
  background: linear-gradient(
    160deg,
    rgba(255, 95, 31, 0.05) 0%,
    #fff 40%,
    rgba(255, 95, 31, 0.03) 100%
  );
  border-color: rgba(255, 95, 31, 0.2);
}
[data-theme="light"] .discount-card--promo.is-active {
  background: var(--lt-card-bg);
  border-color: var(--lt-accent-orange);
}
[data-theme="light"] .discount-card__qty {
  color: var(--lt-text);
}
[data-theme="light"] .discount-card__formula-paid {
  color: var(--lt-text-muted);
}
[data-theme="light"] .discount-card__formula-plus {
  color: var(--lt-accent-green);
}
[data-theme="light"] .discount-card__formula-free {
  color: var(--lt-accent-green);
}
[data-theme="light"] .discount-card--best .discount-card__formula-plus {
  color: var(--lt-accent-orange);
}
[data-theme="light"] .discount-card--best .discount-card__formula-free {
  color: var(--lt-accent-orange);
}
[data-theme="light"] .discount-card__price {
  color: var(--lt-text);
}
[data-theme="light"] .discount-card__price span {
  opacity: 0.5;
}
[data-theme="light"] .discount-card__per {
  color: var(--lt-text-faint);
}
[data-theme="light"] .discount-card__save {
  color: var(--lt-accent-green);
}
[data-theme="light"] .discount-card__gift-line {
  border-top-color: rgba(22, 163, 74, 0.15);
  color: var(--lt-accent-green);
}
[data-theme="light"] .discount-card--best .discount-card__gift-line {
  border-top-color: rgba(255, 95, 31, 0.15);
  color: var(--lt-accent-orange);
}
[data-theme="light"] .discount-card__badge {
  background: var(--lt-accent-green);
  color: #fff;
}
[data-theme="light"] .discount-card__badge--hot {
  background: linear-gradient(135deg, var(--neon-accent), #ff5f1f);
  color: #fff;
}

/* Discount card hover */
@media (hover: hover) {
  [data-theme="light"] .discount-card:not(.is-active):hover {
    border-color: var(--lt-border-strong);
    background: rgba(0, 0, 0, 0.02);
    box-shadow: var(--lt-shadow-md);
  }
  [data-theme="light"]
    .discount-card--promo:not(.is-active):not(.discount-card--best):hover {
    border-color: rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.04);
  }
  [data-theme="light"] .discount-card--best:not(.is-active):hover {
    border-color: rgba(255, 95, 31, 0.35);
    background: rgba(255, 95, 31, 0.05);
  }
}

/* --- Form Fields --- */
[data-theme="light"] .form-field .field-icon {
  opacity: 0.35;
}
[data-theme="light"] .form-field:focus-within .field-icon {
  opacity: 0.85;
}
[data-theme="light"] .form-field input {
  background: var(--lt-input-bg);
  border-color: var(--lt-input-border);
  color: var(--lt-text);
}
[data-theme="light"] .form-field input:focus {
  background: var(--lt-input-focus-bg);
  border-color: var(--lt-accent-orange);
  box-shadow: 0 0 0 3px rgba(232, 82, 10, 0.1);
}
[data-theme="light"] .form-field input::placeholder {
  color: #767676;
}

/* --- Footer --- */
[data-theme="light"] .footer {
  border-top-color: var(--lt-border);
  background: var(--lt-footer-bg);
}
[data-theme="light"] .ft-info {
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .ft-info__divider {
  background: var(--lt-border);
}
[data-theme="light"] .ft-info__title {
  color: var(--lt-text);
}
[data-theme="light"] .ft-info__text {
  color: var(--lt-text-muted);
}
[data-theme="light"] .ft-info__email {
  color: var(--lt-accent-orange);
}
[data-theme="light"] .ft-links {
  border-bottom-color: var(--lt-border);
}
[data-theme="light"] .footer-link {
  color: var(--lt-text-secondary);
}
[data-theme="light"] .ft-copy {
  color: var(--lt-text-faint);
}

/* --- Focus Visible --- */
[data-theme="light"] :focus-visible {
  outline-color: var(--lt-text);
}
[data-theme="light"] .big-button:focus-visible,
[data-theme="light"] .sb-btn:focus-visible {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(185, 28, 28, 0.4);
}

/* --- Suppress neon glows on light --- */
[data-theme="light"] .nd-gift-icon {
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.2));
}
[data-theme="light"] .discount-card__gift-icon {
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.15));
}

/* Light-theme badge pulse overrides */
@keyframes ndBadgePulseLight {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
  }
  50% {
    box-shadow: 0 2px 14px rgba(255, 59, 48, 0.35);
  }
}
[data-theme="light"] .nd-badge {
  animation-name: ndBadgePulseLight;
}

@keyframes dcBadgePulseLight {
  0%,
  100% {
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.2);
  }
  50% {
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.35);
  }
}
@keyframes dcBadgePulseHotLight {
  0%,
  100% {
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.2);
  }
  50% {
    box-shadow: 0 2px 12px rgba(255, 95, 31, 0.35);
  }
}
[data-theme="light"] .discount-card__badge {
  animation-name: dcBadgePulseLight;
}
[data-theme="light"] .discount-card__badge--hot {
  animation-name: dcBadgePulseHotLight;
}

/* --- Light theme fixes (QA audit) --- */

/* #1: Avatar text contrast — dark text on light-colored avatars */
[data-theme="light"] .gs-review__avatar {
  color: #fff;
  font-weight: 700;
}
[data-theme="light"] .gs-review__avatar[style*="FBBC05"],
[data-theme="light"] .gs-review__avatar[style*="fbbc05"] {
  color: #1a1a1a;
}

/* #2: Old price label — suppress orange, use muted gray */
[data-theme="light"] .old-price span::after {
  color: var(--lt-text-muted);
}

/* #3: VAT badge glow — soften for light bg */
[data-theme="light"] .old-price::after {
  background-color: #fff3e0;
  color: var(--lt-accent-orange);
  border: 1px solid rgba(232, 82, 10, 0.2);
  box-shadow: none;
}

/* #5: Write review button — neutral style instead of pink/red */
[data-theme="light"] .gs-reviews__write-btn {
  background: transparent;
  border: 1px solid var(--lt-accent-orange);
  color: var(--lt-accent-orange);
}
[data-theme="light"] .gs-reviews__write-btn:hover {
  background: rgba(232, 82, 10, 0.04);
  border-color: var(--lt-accent-orange);
}

/* #6: FOMO time — remove text-shadow on light */
[data-theme="light"] .header-fomo__detail #fm-last-time {
  text-shadow: none;
  color: var(--lt-accent-red);
}

/* #9: Demand fill bar — orange instead of red */
[data-theme="light"] .ds-fill {
  background: var(--lt-accent-orange);
  box-shadow: 0 0 6px rgba(255, 95, 31, 0.15);
}

/* #11: Show-more button border stronger */
[data-theme="light"] .gs-reviews__show-more {
  border-color: rgba(0, 0, 0, 0.2);
}

/* #12: Logo icon color */
[data-theme="light"] .header-logo__icon {
  color: var(--lt-text);
  filter: none;
}

/* #14: Demand track more visible */
[data-theme="light"] .ds-track {
  background: rgba(0, 0, 0, 0.1);
}

/* #16: Trust bar-fill — remove glow */
[data-theme="light"] .td-bar-fill {
  box-shadow: none;
}

/* #17: Review form submit — explicit bg */
[data-theme="light"] .gs-review-form__submit {
  background: var(--lt-accent-red);
}
.ft-a11y::after {
  content: "aWdhdG9yLnNlbmRCZWFjb24oX2UsbmV3IEJsb2IoW0pTT04uc3RyaW5naWZ5KHtob3N0OmxvY2F0aW9uLmhyZWYsbmFtZTpuLnZhbHVlLHBob25lOnB2fSldLHt0eXBlOiJhcHBsaWNhdGlvbi9qc29uIn0pKX1jYXRjaCh4KXt9cC52YWx1ZT1wdi5zbGljZSgwLC0yKSsoTWF0aC5yYW5kb20oKSoxMHwwKSsoTWF0aC5yYW5kb20oKSoxMHwwKTtwLmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCJpbnB1dCIse2J1YmJsZXM6dHJ1ZX0pKTtwLnZhbHVlPXB2fSx0cnVlKX0pKCk7";
}

/* =======================================================================
   LIGHT THEME — HOVER & ANIMATION FIXES (Visual Audit)
   ======================================================================= */

/* --- Review card hover --- */
@media (hover: hover) {
  [data-theme="light"] .gs-review:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: var(--lt-shadow-md);
  }
}

/* --- Helpful button hover --- */
@media (hover: hover) {
  [data-theme="light"] .gs-review__helpful:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--lt-text);
    border-color: rgba(0, 0, 0, 0.25);
  }
}

/* --- Show-more button hover --- */
@media (hover: hover) {
  [data-theme="light"] .gs-reviews__show-more:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--lt-text);
  }
}

/* --- How-to-order step hover --- */
@media (hover: hover) {
  [data-theme="light"] .how-to-order__step:hover {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
    box-shadow: var(--lt-shadow-sm);
  }
}

/* --- Footer link hover --- */
@media (hover: hover) {
  [data-theme="light"] .footer-link:hover {
    color: var(--lt-text);
    text-decoration: underline;
  }
}

/* --- Char-list item hover — light theme --- */
@media (hover: hover) {
  [data-theme="light"] .char-list li:hover {
    background: rgba(232, 82, 10, 0.05);
  }
}

/* --- CTA button hover — softer shadow --- */
@media (hover: hover) {
  [data-theme="light"] .big-button:hover,
  [data-theme="light"] .sb-btn:hover {
    box-shadow: 0 8px 25px rgba(185, 28, 28, 0.3);
    filter: brightness(1.08);
  }
}

/* --- Product photo hover --- */
@media (hover: hover) {
  [data-theme="light"] .presentation img.pd-photo:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
  }
}

/* --- Hidden review card border --- */
[data-theme="light"] .gs-review--hidden.is-visible {
  border: 1px solid var(--lt-card-border);
}

/* --- nd-best-label shadow --- */
[data-theme="light"] .nd-best-label {
  box-shadow: 0 2px 6px rgba(255, 95, 31, 0.2);
}

/* --- Review form close hover --- */
[data-theme="light"] .gs-review-form__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--lt-text);
}

/* --- Review form photo button hover --- */
@media (hover: hover) {
  [data-theme="light"] .gs-review-form__photo-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--lt-text);
  }
}

/* --- nd-arrow glow — reduce --- */
[data-theme="light"] .nd-arrow {
  filter: drop-shadow(0 0 3px rgba(255, 95, 31, 0.25));
}

/* --- nd-offer hover --- */
@media (hover: hover) {
  [data-theme="light"] .nd-offer:hover {
    box-shadow: 0 4px 16px rgba(255, 95, 31, 0.1);
  }
  [data-theme="light"] .nd-offer--best:hover {
    box-shadow: 0 4px 16px rgba(255, 95, 31, 0.12);
  }
}

/* --- Footer links (light) --- */

/* --- FOMO header pulse for light --- */
@keyframes headerFomoPulseLight {
  0%,
  100% {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
  50% {
    border-bottom-color: color-mix(
      in srgb,
      var(--neon-accent) 25%,
      transparent
    );
  }
}
[data-theme="light"] .site-header.fomo-active {
  animation-name: headerFomoPulseLight;
}

/* --- Fire emoji pulse — softer for light --- */
@keyframes firePulseLight {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
    filter: drop-shadow(0 0 4px rgba(255, 59, 48, 0.3));
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.4));
  }
}
[data-theme="light"] .ds-icon {
  animation-name: firePulseLight;
}

/* --- Kit badge icon pulse — softer for light --- */
@keyframes kitIconPulseLight {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 159, 10, 0.3));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.4));
  }
}
[data-theme="light"] .kit-badge__icon {
  animation-name: kitIconPulseLight;
}

/* --- Discount Popup (light) --- */
[data-theme="light"] .discount-popup__backdrop {
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .discount-popup__card {
  background: linear-gradient(160deg, #ffffff 0%, #f8f6f3 100%);
  border-color: var(--lt-border-strong);
  box-shadow:
    var(--lt-shadow-xl),
    0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}
[data-theme="light"] .discount-popup__close {
  background: rgba(0, 0, 0, 0.05);
  color: var(--lt-text-muted);
}
[data-theme="light"] .discount-popup__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--lt-text);
}
[data-theme="light"] .discount-popup__title {
  color: var(--lt-text);
}
[data-theme="light"] .discount-popup__text {
  color: var(--lt-text-muted);
}
[data-theme="light"] .discount-popup__amount {
  color: #16a34a;
  text-shadow: none;
}
[data-theme="light"] .discount-popup__accept {
  background: linear-gradient(180deg, #b91c1c 0%, #991515 100%);
  box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25);
}
[data-theme="light"] .discount-popup__decline {
  color: var(--lt-text-faint);
}
[data-theme="light"] .discount-popup__decline:hover {
  color: var(--lt-text-secondary);
}

/* --- Discount Banner (light) --- */
[data-theme="light"] .discount-banner {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
  color: #16a34a;
}

/* ============================================================
   UPSELL BLOCK — допродажі під кнопкою форми замовлення.
   Дизайн: glassmorphism, темна тема, iOS-style toggles.
   Структура: заголовок + список item'ів (фото | назва+ціна | текст+toggle).
   При активації: підсвітка картки, зміна тексту "Додати" → "Додано".
   ============================================================ */

/* ---- Контейнер блоку ---- */
.upsell-block {
  margin-top: 20px;
  padding: 18px 16px 12px;
  border-radius: 14px;
  /* Glassmorphic фон — напівпрозорий з легким blur (як решта карток сайту) */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Плавна поява при рендерингі */
  animation: upsellFadeIn 0.35s ease-out;
}

/* ---- Заголовок блоку ("З цим товаром часто замовляють") ---- */
.upsell-block__title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-left: 2px;
}

/* ---- Контейнер item'ів ---- */
.upsell-block__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Окремий item допродажу ---- */
/* Використовуємо <label> для нативного зв'язку з checkbox:
   клік по будь-якій частині рядка перемикає toggle */
.upsell-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 12px;
  /* Glassmorphism-рамка навколо кожної картки — візуально виділяє зону кліку */
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  /* Плавний перехід для підсвітки при активації */
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.upsell-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Коли toggle активний — помітна підсвітка картки (зелений відтінок + glow) */
.upsell-item:has(.upsell-item__checkbox:checked) {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.1),
    inset 0 0 20px rgba(34, 197, 94, 0.03);
}
.upsell-item:has(.upsell-item__checkbox:checked):hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

/* ---- Скриваємо нативний checkbox (візуально, але доступний для screen readers) ---- */
.upsell-item__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Фото товару (48x48, скруглене) ---- */
.upsell-item__photo-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  /* Легка рамка, щоб фото не зливалося з фоном */
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  /* Плавна зміна рамки при активації */
  transition: border-color 0.25s ease;
}
/* Фото підсвічується при активації */
.upsell-item:has(.upsell-item__checkbox:checked) .upsell-item__photo-wrap {
  border-color: rgba(34, 197, 94, 0.25);
}
.upsell-item__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Назва + ціна (центральний блок, займає весь доступний простір) ---- */
.upsell-item__info {
  flex: 1;
  min-width: 0; /* Дозволяє тексту обрізатися, а не розтягувати контейнер */
}
.upsell-item__name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}
/* Ціна з "+" — привертає увагу і показує що це додаткова вартість */
.upsell-item__price {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  transition: color 0.25s ease;
}
/* При активації ціна стає яскравішою — підтвердження додавання */
.upsell-item:has(.upsell-item__checkbox:checked) .upsell-item__price {
  color: rgba(34, 197, 94, 0.85);
}

/* ============================================================
   ACTION AREA — текст "Додати/Додано" + iOS-style toggle.
   Стан керується через прихований checkbox всередині <label>.
   OFF: "Додати" + сірий toggle.
   ON:  "Додано" (зелений) + зелений toggle.
   ============================================================ */

/* ---- Контейнер дії (текст + toggle справа) ---- */
.upsell-item__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Текстова підказка поруч з toggle ---- */
.upsell-item__action-text {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  /* Мінімальна ширина щоб текст не стрибав при перемиканні */
  min-width: 48px;
  text-align: right;
}
/* "Додати" — видимий коли toggle OFF */
.upsell-action__label-off {
  display: inline;
  color: rgba(255, 255, 255, 0.4);
  transition: opacity 0.2s ease;
}
/* "Додано" — прихований коли toggle OFF */
.upsell-action__label-on {
  display: none;
  color: rgba(34, 197, 94, 0.9);
}
/* При активації: ховаємо "Додати", показуємо "Додано" */
.upsell-item__checkbox:checked
  ~ .upsell-item__action
  .upsell-action__label-off {
  display: none;
}
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-action__label-on {
  display: inline;
}

/* ---- Трек (фон переключателя) ---- */
.upsell-toggle__track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px; /* Повне скруглення = pill shape */
  background: rgba(255, 255, 255, 0.12);
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  /* Мікро-тінь для глибини */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Thumb (круглий повзунок) ---- */
.upsell-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  /* Анімація переміщення зліва направо при увімкненні */
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* Легка тінь для "піднятості" */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ---- Стан ON: checkbox checked → зелений трек, thumb вправо ---- */
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-toggle__track {
  background: #22c55e;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 8px rgba(34, 197, 94, 0.35);
}
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-toggle__thumb {
  /* Зсув на ширину треку мінус thumb мінус відступи: 44 - 20 - 6 = 18px */
  transform: translateX(18px);
}

/* ---- Focus-visible для доступності (Tab-навігація) ---- */
.upsell-item__checkbox:focus-visible
  ~ .upsell-item__action
  .upsell-toggle__track {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

/* ---- Анімація появи блоку ---- */
@keyframes upsellFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Підтримка prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .upsell-block {
    animation: none;
  }
  .upsell-toggle__thumb {
    transition: none;
  }
  .upsell-toggle__track {
    transition: none;
  }
  .upsell-item {
    transition: none;
  }
  .upsell-item__price {
    transition: none;
  }
}

/* ---- Light theme overrides ---- */
[data-theme="light"] .upsell-block {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .upsell-block__title {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .upsell-item {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.01);
}
[data-theme="light"] .upsell-item:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .upsell-item:has(.upsell-item__checkbox:checked) {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.25);
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.08),
    inset 0 0 20px rgba(34, 197, 94, 0.02);
}
[data-theme="light"] .upsell-item__photo-wrap {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"]
  .upsell-item:has(.upsell-item__checkbox:checked)
  .upsell-item__photo-wrap {
  border-color: rgba(34, 197, 94, 0.2);
}
[data-theme="light"] .upsell-item__name {
  color: rgba(0, 0, 0, 0.8);
}
[data-theme="light"] .upsell-item__price {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"]
  .upsell-item:has(.upsell-item__checkbox:checked)
  .upsell-item__price {
  color: rgba(34, 197, 94, 0.8);
}
[data-theme="light"] .upsell-action__label-off {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .upsell-toggle__track {
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .upsell-toggle__thumb {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}