/* ==========================================================================
   SmartKids — колірна система
   Підключати після стилів теми.

   Головний принцип: у кожного кольору одна робота.
   Було — один блідий блакитний робив усе: бігучу стрічку, кнопку покупки,
   бейджі й виділення варіанта. Кнопка не виділялася, бо мала той самий колір,
   що й декор, а білий текст на ній давав контраст 2.61:1 при нормі 4.5:1.
   ========================================================================== */

:root {
  /* --- основа ---------------------------------------------------------- */
  --nk-ink:        #1B2A4A;   /* Atrament   — заголовки, текст, знак        */
  --nk-blue:       #2A5CB8;   /* Kobalt     — бренд, посилання, виділення   */
  --nk-cta:        #CC431C;   /* Mandarynka — ТІЛЬКИ кнопка покупки         */
  --nk-berry:      #C42A62;   /* Malina     — терміновість, «Najczęściej»   */
  --nk-green:      #0F7A4E;   /* Szmaragd   — довіра, доступ, гарантія      */
  --nk-paper:      #FBF8F3;   /* Papier     — тло сторінки                  */

  /* --- відтінки --------------------------------------------------------- */
  --nk-blue-soft:  #E8EFFB;   /* тло вибраного варіанта                     */
  --nk-blue-line:  #B9CDEE;   /* рамки                                      */
  --nk-cta-dark:   #A8340F;   /* натиснута кнопка                           */
  --nk-ink-60:     #5B6784;   /* другорядний текст                          */
  --nk-paper-2:    #F2EDE4;   /* підкладка секцій                           */

  /* --- підміна змінних теми (Dawn тримає їх як «R, G, B») --------------- */
  --color-button: 204, 67, 28;
  --color-base-accent-1: 42, 92, 184;
  --color-base-accent-2: 42, 92, 184;
  --color-base-solid-button-labels: 255, 255, 255;
}

/* --------------------------------------------------------------------------
   1. Кнопка покупки — єдиний елемент кольору Mandarynka на сторінці
   -------------------------------------------------------------------------- */
.product-form__submit,
.product-form__submit.button--primary {
  background: var(--nk-cta) !important;
  color: #fff !important;
  border-color: var(--nk-cta) !important;
  box-shadow: 0 2px 0 var(--nk-cta-dark);
}
.product-form__submit:hover { background: var(--nk-cta-dark) !important; }
.product-form__submit:active { transform: translateY(1px); box-shadow: none; }

.nk-sticky-atc__btn {
  background: var(--nk-cta) !important;
  color: #fff !important;
  border-color: var(--nk-cta) !important;
}

/* --------------------------------------------------------------------------
   2. Бігуча стрічка — глибокий атрамент, щоб не сперечалася з кнопкою
   -------------------------------------------------------------------------- */
.horizontal-ticker,
.horizontal-ticker.color-custom {
  background: var(--nk-ink) !important;
  --gradient-background: var(--nk-ink) !important;
  color: var(--nk-paper) !important;
}
.horizontal-ticker__item { color: var(--nk-paper) !important; }

/* --------------------------------------------------------------------------
   3. Блок вибору комплекту
   -------------------------------------------------------------------------- */
quantity-breaks input:checked + .quantity-break {
  background: var(--nk-blue-soft) !important;
  border-color: var(--nk-blue) !important;
}
.quantity-break { border-color: var(--nk-blue-line) !important; }
.quantity-break__badge {
  background: var(--nk-berry) !important;
  color: #fff !important;
}
.quantity-break__price { color: var(--nk-blue) !important; }
.quantity-break__compare-price { color: var(--nk-ink-60) !important; }

/* --------------------------------------------------------------------------
   4. Довіра й доступ
   -------------------------------------------------------------------------- */
.stock-badge {
  --fg: var(--nk-green);
  --text: var(--nk-green);
  color: var(--nk-green) !important;
  border-color: rgba(15, 122, 78, .28) !important;
}
.stock-badge__dot { background: var(--nk-green) !important; }
.customer-love-badge { background: var(--nk-blue) !important; color: #fff !important; }
.benefit-icon { background: var(--nk-blue) !important; }

/* --------------------------------------------------------------------------
   5. Текст і тло
   -------------------------------------------------------------------------- */
/* тема фарбує тло через .gradient — потрібен рівний за вагою селектор */
body, body.gradient, .color-background-1, .color-scheme-1 {
  background: var(--nk-paper) !important;
  --gradient-background: var(--nk-paper) !important;
}
.product__title h1,
.rich-text__heading,
h1, h2, h3 { color: var(--nk-ink) !important; }
.price-item--sale, .price-item--regular { color: var(--nk-ink) !important; }
.comparison-table__logo { color: var(--nk-blue) !important; }

/* --------------------------------------------------------------------------
   6. Лого в шапці
   «SmartKids» довше за «NeuroKids» і на вузькій шапці рветься навпіл —
   кегль прив'язаний до ширини екрана, перенесення заборонене
   -------------------------------------------------------------------------- */
.nk-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 700 clamp(15px, 4.4vw, 22px)/1 var(--font-heading-family, ui-sans-serif), system-ui;
  letter-spacing: -0.025em;
  color: var(--nk-ink);
  white-space: nowrap;
}
.nk-logo-mark { width: clamp(30px, 8vw, 44px); height: clamp(30px, 8vw, 44px); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   7. Таблиця порівняння
   Тема фарбує ліву колонку в акцент теми. Після заміни акценту на Kobalt
   вона перетворилася на важку суцільну плиту, яка перетягувала увагу
   з кнопки покупки. Робимо її спокійною підкладкою: світлий кобальт
   і атраментовий текст — 12:1, читається краще за білий на синьому.
   -------------------------------------------------------------------------- */
.comparison-table .color-accent-2,
.comparison-table__row-name.color-accent-2 {
  background: var(--nk-blue-soft) !important;
  --gradient-background: var(--nk-blue-soft) !important;
  color: var(--nk-ink) !important;
}
.comparison-table__row-name.color-accent-2 * { color: var(--nk-ink) !important; }