/* Перемикач ставки, інформаційне вікно та підписи ставки. */

.gevat-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 12px;
}

/* На картці перемикач стоїть у самому вузлі ціни — даємо йому повітря,
   щоб кнопки не липли до цифри. */
.product-prices > .gevat-selector {
  margin-bottom: 20px;
}

/* Пояснення § 6a у кошику й оформленні: статус перевірки номера у VIES. */
.gevat-ics-note {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #c8d6c9;
  border-left-width: 4px;
  background: #f4f9f4;
  font-size: 14px;
  line-height: 1.5;
}
.gevat-ics-note__text { margin: 0; }
.gevat-ics-note__zero { margin: 6px 0 0; font-weight: 700; }
.gevat-ics-note--valid { border-color: #2e7d32; background: #eef7ee; }
.gevat-ics-note--invalid { border-color: #c62828; background: #fdf1f0; }
.gevat-ics-note--unavailable,
.gevat-ics-note--unchecked { border-color: #b26a00; background: #fdf6ea; }

/* Доріжка перемикача. Розміри взяті з референсу: 38 px на десктопі,
   14 px текст. На телефоні збільшуємо до 44 px — референс цього не робить,
   але 38 px менше за мінімальну зону дотику, і в нього це вада, а не стиль. */
.gevat-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: #ececec;
  box-sizing: border-box;
}

.gevat-switch__slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #f5a623;
  pointer-events: none;
  transition: transform .25s ease, width .25s ease;
}

.gevat-switch__slider.is-instant { transition: none; }

.gevat-btn {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease, background-color .15s ease;
}

.gevat-btn:hover { color: #1a1a1a; }
.gevat-btn:focus-visible { outline: 2px solid #177a38; outline-offset: 2px; }

/* Поки скрипт не поставив плашку, активний стан тримає сама кнопка —
   інакше без JS не було б видно, що обрано. */
.gevat-btn.is-active { background: #f5a623; color: #fff; }
.gevat-switch.has-slider .gevat-btn.is-active { background: transparent; color: #fff; }

.gevat-selector.is-unavailable .gevat-switch { opacity: .7; }

/* Ціна і підпис ставки — в одному рядку, підпис у дужках (рішення від
   04.09.2026; раніше підпис стояв окремим рядком під ціною). */
.gevat-selector ~ .product-prices .product-price,
.product-prices:has(> .gevat-selector) .product-price,
.product-prices.gevat-tax-line .product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}

.gevat-selector ~ .product-prices .product-price > .current-price,
.product-prices:has(> .gevat-selector) .product-price > .current-price,
.product-prices.gevat-tax-line .product-price > .current-price {
  flex: 0 0 auto;
}

.gevat-selector ~ .product-prices .tvproduct-tax-label,
.product-prices:has(> .gevat-selector) .tvproduct-tax-label,
.product-prices.gevat-tax-line .tvproduct-tax-label {
  flex: 0 1 auto;
  margin: 0;
  /* Ціле речення капслоком читається гірше за ту саму фразу звичайним
     регістром — тема ставить uppercase для двох слів «з ПДВ». */
  text-transform: none;
  line-height: 1.45;
}

.gevat-selector ~ .product-prices .tvproduct-tax-label::before,
.product-prices:has(> .gevat-selector) .tvproduct-tax-label::before,
.product-prices.gevat-tax-line .tvproduct-tax-label::before {
  content: "(";
}

.gevat-selector ~ .product-prices .tvproduct-tax-label::after,
.product-prices:has(> .gevat-selector) .tvproduct-tax-label::after,
.product-prices.gevat-tax-line .tvproduct-tax-label::after {
  content: ")";
}

/* Поки згоди немає, оплати на сторінці не видно взагалі — причина має
   впадати в око, а не ховатися серед абзаців декларації. */
.gevat-declaration__blocked {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #9a6100;
  background: #fbf0dc;
  color: #7a4d00;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

/* Кнопка замовлення, поки згоди немає. Тема не завжди відрізняє
   вимкнену кнопку, тому робимо це самі — інакше вигляд каже «тисни», а
   поведінка каже «ні». */
.gevat-blocked,
.gevat-blocked:hover {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(35%);
}

/* Рядок згоди підсвічується разом із написом: покупець дивиться на
   кнопку, а причина — унизу сторінки, тож саму згоду теж треба знайти. */
.gevat-declaration__condition.is-error .gevat-declaration__label {
  color: #a32219;
  font-weight: 600;
}

.gevat-declaration__condition.is-error .ets_checkbox {
  outline: 2px solid #a32219;
  outline-offset: 2px;
}

/* Кнопку Amazon Pay малює чужий скрипт, іноді в iframe: вимкнути її ми
   не можемо, а клік усередині iframe до нас не доходить. Тому накриваємо
   її своїм шаром — він ловить клік і показує ту саму помилку. */
/* Блок згоди на кроці оплати. Постійно видно рівно те, що потрібно для
   рішення: про що йдеться, галочка й кнопки. Повна заява — за одним
   кліком, бо на цьому кроці кожен зайвий абзац коштує замовлення. */
/* Галочка стоїть у списку згод оформлення й повторює розмітку сусідньої
   згоди з умовами продажу, тому вирівнює її той самий стиль оформлення.
   Своїм лишається тільки повідомлення про помилку. */
.gevat-declaration__condition {
  list-style: none;
  /* Дві згоди підряд без проміжку зливаються в один абзац, і покупець
     не бачить, що підтверджує двічі. Відступ ставимо своєму пункту, а не
     всьому списку: чужі пункти лишаються такими, як їх задала тема. */
  margin-top: 14px;
}

.gevat-declaration__condition [data-gevat-error] {
  margin: 6px 0 0;
}

/* Блок повторює шапку звичайного блока оформлення — рамку, колір і
   відступи бере його ж стиль. Своїм лишається розкладка шапки: іконка
   ліворуч, шеврон праворуч, підпис між ними. */
.gevat-declaration.block-onepagecheckout { margin-bottom: 20px; }

.gevat-declaration__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  /* Шапка вже має власний відступ знизу від стилю оформлення; поки блок
     закритий, він створював би порожній прямокутник. */
  margin-bottom: 0;
}

/* Тема нав'язує шапці `.block-onepagecheckout .title-heading { margin-bottom:20px }`
   зі специфічністю (0,2,0) і перекриває правило вище. Дублюємо занулення з вищою
   специфічністю (0,3,0), інакше під закритим підписом лишається порожній відступ. */
.gevat-declaration.block-onepagecheckout .gevat-declaration__heading { margin-bottom: 0; }

.gevat-declaration__heading::-webkit-details-marker { display: none; }

.gevat-declaration__heading-text { flex: 1; min-width: 0; }

.gevat-declaration__icon { flex: 0 0 auto; }

.gevat-declaration__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 8px;
  color: currentColor;
  transition: transform .18s ease;
}

.gevat-declaration__chevron svg { display: block; width: 100%; height: 100%; }

.gevat-declaration[open] .gevat-declaration__chevron { transform: rotate(180deg); }

.gevat-declaration__heading:focus-visible {
  outline: 2px solid var(--gevat-opc-accent, #0cb7e2);
  outline-offset: -2px;
}

.gevat-declaration[open] .gevat-declaration__body { padding: 16px 15px 4px; }

/* Пояснення й заява розгортаються під згодами. Читати їх доводиться на
   кроці оплати, тому набір спокійний: більший кегль, ширший інтерліньяж
   і обмежена довжина рядка — рядок на пів екрана око губить. */
.gevat-declaration__info,
.gevat-declaration__text {
  font-size: 14px;
  line-height: 1.62;
  color: #3c4a43;
  /* «Marktstammdatenregister» та подібні німецькі слова інакше вилазять
     за край на вузькому екрані. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.gevat-declaration__info h2,
.gevat-declaration__info h3 {
  color: #15201a;
  font-weight: 600;
  line-height: 1.3;
}

.gevat-declaration__info h2 { font-size: 17px; margin: 0 0 12px; }
.gevat-declaration__info h3 { font-size: 15px; margin: 22px 0 8px; }
.gevat-declaration__info p { margin: 0 0 12px; }
.gevat-declaration__info p:last-child { margin-bottom: 0; }
.gevat-declaration__info b,
.gevat-declaration__info strong { color: #15201a; font-weight: 600; }

.gevat-declaration__info ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.gevat-declaration__info li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
}

.gevat-declaration__info li:last-child { margin-bottom: 0; }

.gevat-declaration__info li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e73e24;
}

.gevat-declaration__info a {
  color: #e73e24;
  text-underline-offset: 2px;
}

.gevat-declaration__info a:hover { color: #c22f18; }

.gevat-declaration__info a:focus-visible {
  outline: 2px solid #e73e24;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Заява — інший за призначенням текст, тому відокремлена й підписана. */
.gevat-declaration__statement {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gevat-opc-border, #dfe6e0);
}

.gevat-declaration__statement-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #65756c;
}

.gevat-declaration__statement .gevat-declaration__text { margin: 0; }
.gevat-declaration__text p { margin: 0 0 10px; }
.gevat-declaration__text p:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
  .gevat-declaration__info,
  .gevat-declaration__text { font-size: 13px; }
  .gevat-declaration__info h2 { font-size: 16px; }
  .gevat-declaration__info h3 { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .gevat-declaration__chevron { transition: none; }
}

.gevat-guard { position: relative; display: inline-block; }
.gevat-guard__veil { display: none; }

.gevat-guard.is-blocked > .gevat-guard__veil {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: not-allowed;
}

.gevat-guard.is-blocked > *:not(.gevat-guard__veil) {
  opacity: .55;
  filter: grayscale(35%);
}

.gevat-country-note {
  flex: 1 0 100%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fbf0dc;
  color: #7a4d00;
  font-size: 13px;
  line-height: 1.45;
}

.gevat-country-note__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Натиснуто 0 %, а ціна не змінилася: пояснення має спіймати погляд,
   інакше перемикач здається зламаним. */
.gevat-country-note.is-flash {
  animation: gevat-flash .9s ease-out 1;
}

@keyframes gevat-flash {
  0%   { background: #f6c15a; box-shadow: 0 0 0 3px rgba(246, 193, 90, .55); }
  100% { background: #fbf0dc; box-shadow: 0 0 0 0 rgba(246, 193, 90, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gevat-country-note.is-flash { animation: none; outline: 2px solid #d79b1f; }
}

.gevat-selector.is-unavailable .gevat-btn[aria-disabled="true"] {
  cursor: not-allowed;
}

.gevat-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: #555;
  font-size: 14px;
  cursor: pointer;
}

.gevat-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
}

/* Підкреслення, що втягується під курсором — деталь із референсу. */
.gevat-info-text {
  position: relative;
  white-space: nowrap;
}

.gevat-info-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: width .2s ease;
}

.gevat-info:hover .gevat-info-text::after { width: 0; }
.gevat-info:focus-visible { outline: 2px solid #177a38; outline-offset: 3px; border-radius: 3px; }

.gevat-price-note {
  flex: 1 0 100%;
  margin: 0;
  color: #5a6b62;
  font-size: 14px;
  line-height: 1.45;
}

.gevat-cart-state {
  flex: 1 0 100%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f2f5f1;
  color: #3c4a43;
  font-size: 13px;
  line-height: 1.45;
}

.gevat-cart-state.is-warning { background: #fbf0dc; color: #7a4d00; }

/* Телефон: доріжка на всю ширину, половина екрана на кнопку, 44 px висоти —
   палець потрапляє без прицілювання, підписи не переносяться. */
@media (max-width: 575px) {
  .gevat-selector { gap: 10px; }
  .gevat-switch { width: 100%; height: 44px; }
  .gevat-btn { flex: 1 1 0; height: 36px; line-height: 36px; padding: 0 10px; font-size: 14px; }
  .gevat-info { flex: 1 0 100%; min-height: 44px; }
  .gevat-price-note { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .gevat-switch__slider { transition: none; }
}

/* Інформаційне вікно */

.gevat-modal[hidden] { display: none; }

/* На сторінці живе чат HelpCrunch, і він друкується в кінці body з
   майже граничним z-index. Сусідній модуль ge_interactive_power_calculator
   уже впирався в те саме й піднявся до 2147483005 — стаємо над ним.
   Самого числа мало: вікно лежить усередині картки товару, тому воно ще й
   переноситься скриптом у body, інакше предок замикає його в собі. */
.gevat-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.gevat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 26, .55);
}

.gevat-modal__box {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5);
}

.gevat-modal__box:focus { outline: none; }

.gevat-modal__head {
  position: sticky;
  top: 0;
  /* Без z-index абсолютно позиційовані елементи тіла (маркери списку,
     цитати норм) промальовуються над липкою шапкою при скролі, і крізь
     її фон видно текст. Піднімаємо шапку над вмістом. */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  /* Непрозорий фон обов'язковий: він і перекриває текст, що проїжджає під
     шапкою. Дублюємо явним background-color на випадок, якщо тема колись
     перебила скорочену властивість. */
  background: #ffffff;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e8e4;
}

.gevat-modal__head h2 { margin: 0; font-size: 20px; }

.gevat-modal__close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #5a6b62;
  cursor: pointer;
}

.gevat-modal__body {
  padding: 18px 22px 26px;
  font-size: 15px;
  line-height: 1.62;
  color: #3c4a43;
  /* «Marktstammdatenregister» та подібні німецькі слова інакше вилазять
     за край на вузькому екрані. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.gevat-modal__body h2,
.gevat-modal__body h3 {
  color: #15201a;
  font-weight: 600;
  line-height: 1.3;
}

.gevat-modal__body h2 { font-size: 19px; margin: 0 0 12px; }
.gevat-modal__body h3 { font-size: 16px; margin: 24px 0 8px; }
.gevat-modal__body b,
.gevat-modal__body strong { color: #15201a; font-weight: 600; }
.gevat-modal__body p:last-child { margin-bottom: 0; }

/* Умови подані списком: три пункти, які покупець звіряє зі своїм
   випадком, читаються як перелік, а не як суцільний абзац.

   Маркер малюємо самі. Тема глушить списки глобально (ul{list-style:none}),
   і повертати їй стандартний вигляд означало б покластися на те, що вона
   не передумає. Власна позначка ще й вирівнюється з текстом рівно так, як
   треба при переносі рядка. */
.gevat-modal__body ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.gevat-modal__body li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
}

.gevat-modal__body li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e73e24;
}

.gevat-modal__body li:last-child { margin-bottom: 0; }

.gevat-modal__body a {
  color: #e73e24;
  text-underline-offset: 2px;
}

.gevat-modal__body a:hover { color: #c22f18; }

.gevat-modal__body a:focus-visible {
  outline: 2px solid #e73e24;
  outline-offset: 2px;
  border-radius: 2px;
}
.gevat-modal__body p { margin: 0 0 12px; line-height: 1.6; }

body.gevat-modal-open { overflow: hidden; }

/* Дві ціни в списку категорії.

   Головна ціна лишається тією, яку покупець реально заплатить зараз.
   Друга — можлива альтернатива, приглушена й клікабельна: натискання
   відкриває пояснення, звідки вона береться. Так покупець дізнається про
   вибір ставки ще до входу в картку товару. */

.gevat-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 4px 0 0;
  line-height: 1.35;
}

.gevat-prices__current {
  color: #5a6b62;
  font-size: 12px;
}

/* Подвійна ціна в лістингу: підпис ставки стоїть одразу за ціною теми, а
   друга ціна переносить себе на власний рядок. Раніше на весь контейнер
   був white-space:nowrap — довгий рядок (ціна + знижка + стара ціна + наш
   підпис) не переносився й обрізався на вузькій картці. Тепер рядок вільно
   переноситься (normal), а кожен окремий атом — ціна, підпис, друга ціна —
   лишається нерозривним завдяки власним nowrap нижче, тому числа й підписи
   не ламаються всередині. */

.gevat-prices--dual {
  display: inline;
  margin: 0;
  line-height: 1.35;
}

.product-price-and-shipping:has(.gevat-prices--dual) {
  white-space: normal;
}

/* Головна ціна мініатюри з подвійною виводкою — фірмовий акцент,
   той самий червоний, що в посиланнях і маркерах вікна. */
.product-price-and-shipping:has(.gevat-prices--dual) span.price,
.product-price-and-shipping:has(.gevat-prices--dual) .price {
  font-weight: 900;
  color: #e73e24;
}

/* Клікабельний нульовий підпис: текст та іконка — одна кнопка. */
.gevat-prices__open {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.gevat-prices__open:hover,
.gevat-prices__open:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gevat-prices__info {
  width: 15px;
  height: 15px;
  min-width: 15px;
  padding: 0;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  color: #177a38;
  background: none;
  cursor: pointer;
  vertical-align: text-bottom;
}

.gevat-prices__note {
  font-size: 12px;
  white-space: nowrap;
  margin-left: 4px;
}

.gevat-prices__note--zero { color: #177a38; font-weight: 600; }
.gevat-prices__note--std { color: #5a6b62; font-weight: 400; }

/* Селектори з контейнером теми: її власні правила на span усередині
   блока ціни інакше перебивають наші розміри. Друга ціна — це ціна,
   вона має читатися, а не губитися дрібним шрифтом. */

.gevat-prices__alt,
.product-price-and-shipping span.gevat-prices__alt {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.gevat-prices__alt-price,
.product-price-and-shipping span.gevat-prices__alt-price {
  font-size: 12px;
  font-weight: 700;
  color: #3c4a43;
}

.gevat-prices__alt-note,
.product-price-and-shipping span.gevat-prices__alt-note {
  font-size: 12px;
}

/* Рядок повної ціни на картці товару — під нульовою ціною.
   Тут ціна більша, ніж у мініатюрах: картка просторіша. */
.gevat-prices--card {
  display: block;
  margin: 2px 0 0;
  flex: 1 0 100%;
}

.gevat-prices--card .gevat-prices__alt-price {
  font-size: 16px;
}

.gevat-prices--card[hidden] {
  display: none !important;
}


/* Підпис ставки в кошику */

.gevat-line-tax {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.gevat-line-tax__text { color: #3c4a43; }
.gevat-line-tax--zero .gevat-line-tax__text { color: #177a38; font-weight: 600; }

.gevat-line-tax__change {
  padding: 0;
  border: 0;
  background: none;
  color: #177a38;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Підтвердження в чекауті */

.gevat-declaration {
  margin: 0 0 24px;
  padding: 20px 22px;
  border: 1px solid #177a38;
  border-radius: 10px;
  background: #f4f9f5;
}

.gevat-declaration__title { margin: 0 0 12px; font-size: 18px; color: #14603a; }
.gevat-declaration__text p { margin: 0 0 12px; line-height: 1.6; }

.gevat-declaration__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-weight: 600;
  cursor: pointer;
}

.gevat-declaration__check input { margin-top: 4px; width: 18px; height: 18px; }

.gevat-declaration__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 16px 0 0;
}

.gevat-declaration__optout {
  padding: 0;
  border: 0;
  background: none;
  color: #5a6b62;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gevat-declaration__hint {
  margin: 14px 0 0;
  color: #65756c;
  font-size: 13px;
  line-height: 1.5;
}

.gevat-declaration.is-accepted { border-color: #c6d1c8; background: #f7f9f7; }

.gevat-declaration__badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #177a38;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

.gevat-declaration__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
}

.gevat-declaration__box { flex: 0 0 auto; padding-top: 2px; }
.gevat-declaration__label { margin: 0; font-weight: 600; cursor: pointer; line-height: 1.45; }

/* Обов'язкове поле: помилка з'являється там, де на неї дивляться —
   під самою галочкою, а не вгорі сторінки. */

.gevat-declaration__error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fbe9e7;
  color: #a32219;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.gevat-declaration__check.is-error {
  border-color: #f13340 !important;
  background: #fdf3f2 !important;
}

.gevat-declaration__label.required::after {
  content: " *";
  color: #a32219;
  font-weight: 700;
}

.gevat-declaration__form.is-busy { opacity: .6; pointer-events: none; }

/* Місце в підвалі оформлення: під згодою з AGB, над кнопкою замовлення.
   Тут блок уже не потребує власного заголовка-панелі — він читається як
   продовження блоку згод, тому відступи мінімальні. */

.gevat-declaration--footer {
  margin: 0 0 16px;
}

.gevat-declaration--footer .gevat-declaration__body { padding: 14px 15px; }

.gevat-declaration--footer .gevat-declaration__heading {
  font-size: 15px;
  padding: 9px 15px;
}

.gevat-declaration--footer .gevat-declaration__text p {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.gevat-declaration--footer .gevat-declaration__actions { margin-top: 10px; }

/* --- варіант для сторінки One Page Checkout ------------------------------
   Блок переймає палітру самого модуля оформлення: акцент, колір заголовка
   й рамок беруться з його налаштувань, тому змінюються разом із дизайном
   магазину, а не лишаються зашитими тут. */

.gevat-declaration--opc {
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--gevat-opc-border, #b2ced2);
  border-top: 0;
  border-radius: 4px;
  background: #fff;
  font-family: "Open sans", Arial, sans-serif;
}

.gevat-declaration--opc .gevat-declaration__heading {
  margin: 0;
  padding: 10px 15px;
  border-top: 3px solid var(--gevat-opc-accent, #0cb7e2);
  border-bottom: 1px solid var(--gevat-opc-border, #b2ced2);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: var(--gevat-opc-soft, #ecfbff);
  color: var(--gevat-opc-heading, #427e8d);
  font-size: 16px;
  font-weight: 600;
}

.gevat-declaration--opc .gevat-declaration__body { padding: 15px; }

.gevat-declaration--opc .gevat-declaration__text p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #2f3d43;
}

.gevat-declaration--opc .gevat-declaration__check {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gevat-opc-border, #b2ced2);
  border-radius: 4px;
  background: var(--gevat-opc-soft, #ecfbff);
}

.gevat-declaration--opc .gevat-declaration__label {
  font-size: 14px;
  color: var(--gevat-opc-strong, #2592a9);
}

.gevat-declaration--opc.is-accepted .gevat-declaration__check {
  border-color: #177a38;
  background: #f2f9f4;
}

.gevat-declaration--opc .gevat-declaration__actions { margin-top: 14px; }

.gevat-declaration--opc .gevat-declaration__submit {
  background: var(--gevat-opc-accent, #0cb7e2);
  border-color: var(--gevat-opc-accent, #0cb7e2);
  color: #fff;
}

.gevat-declaration--opc .gevat-declaration__hint,
.gevat-declaration--opc .gevat-info { font-size: 13px; }

/* У трьохколонкових макетах блок стоїть у вузькій колонці, тому
   типографіку й відступи стискаємо за фактичною шириною самого блока,
   а не за шириною екрана: та сама сторінка на планшеті може дати
   широку колонку, а на моніторі — вузьку. */
.gevat-declaration--opc { container-type: inline-size; }

@container (max-width: 460px) {
  .gevat-declaration--opc .gevat-declaration__heading { padding: 8px 12px; font-size: 15px; }
  .gevat-declaration--opc .gevat-declaration__body { padding: 12px; }
  .gevat-declaration--opc .gevat-declaration__text p { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
  .gevat-declaration--opc .gevat-declaration__check { padding: 10px 12px; margin-top: 12px; }
  .gevat-declaration--opc .gevat-declaration__label { font-size: 13px; }
  .gevat-declaration--opc .gevat-declaration__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .gevat-declaration--opc .gevat-declaration__submit { width: 100%; }
  .gevat-declaration--opc .gevat-declaration__optout { text-align: left; }
  .gevat-declaration--opc .gevat-declaration__hint,
  .gevat-declaration--opc .gevat-info { font-size: 12px; }
}

/* Запасний варіант для браузерів без контейнерних запитів: у трьох
   колонках макета сторінка все одно вузька від 1200 px і нижче. */
@supports not (container-type: inline-size) {
  @media (max-width: 1400px) {
    .onepagecheckout-center .gevat-declaration--opc .gevat-declaration__text p { font-size: 13px; line-height: 1.5; }
    .onepagecheckout-center .gevat-declaration--opc .gevat-declaration__actions { flex-direction: column; align-items: stretch; }
    .onepagecheckout-center .gevat-declaration--opc .gevat-declaration__submit { width: 100%; }
  }
}

/* Поза сторінкою OPC його власний квадратик не потрібен —
   показуємо звичайний чекбокс браузера. */
.gevat-declaration:not(.gevat-declaration--opc) .ets_checkbox { display: none; }
.gevat-declaration:not(.gevat-declaration--opc) .gevat-declaration__box input { width: 18px; height: 18px; }

/* Пояснення на кроці оплати */

.gevat-payment-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fbf0dc;
  border: 1px solid #9a6100;
  color: #5c3a00;
  font-size: 15px;
  line-height: 1.5;
}

/* Підтвердження замовлення та особистий кабінет */

.gevat-order-note,
.gevat-order-detail {
  margin: 16px 0;
  padding: 14px 18px;
  border-left: 3px solid #177a38;
  background: #f2f7f3;
  line-height: 1.55;
}

.gevat-order-detail h4 { margin: 0 0 10px; font-size: 16px; }
.gevat-order-detail__meta { margin: 10px 0 0; color: #65756c; font-size: 13px; }

.gevat-live {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  /* Те саме, що й у вікна: чат друкується поверх усього. */
  z-index: 2147483008;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 8px;
  background: #14201a;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.45;
}

.gevat-live:empty { display: none; }

/* --- Телефон: решта поверхонь модуля -------------------------------------
   Перемикач має власні правила вище. Тут — вікно, підтвердження, кошик. */

@media (max-width: 575px) {
  /* Інформаційне вікно стає нижньою шторкою: так його зручніше закрити
     великим пальцем, і воно не бореться з висотою екрана. */
  .gevat-modal { align-items: flex-end; padding: 0; }

  .gevat-modal__box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }

  .gevat-modal__head { padding: 14px 18px; }
  .gevat-modal__head h2 { font-size: 18px; }
  .gevat-modal__body { padding: 16px 18px 28px; }
  .gevat-modal__body p { font-size: 15px; }

  /* Підтвердження: менші відступи, дії стовпчиком на всю ширину. */
  .gevat-declaration { padding: 16px; border-radius: 8px; }
  .gevat-declaration__title { font-size: 17px; }
  .gevat-declaration__text p { font-size: 14px; line-height: 1.55; }
  .gevat-declaration__check { padding: 12px; }
  .gevat-declaration__label { font-size: 14px; }

  .gevat-declaration__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .gevat-declaration__submit { width: 100%; min-height: 44px; }
  .gevat-declaration__optout { min-height: 44px; text-align: left; }

  /* Посилання зміни ставки в кошику — дрібна ціль, тому розширюємо
     зону дотику відступами, не збільшуючи сам рядок. */
  .gevat-line-tax { gap: 2px 8px; }
  .gevat-line-tax__change { padding: 6px 0; min-height: 24px; }

  .gevat-live { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
}

/* Зона дотику галочки підтвердження — не менша за рекомендовану,
   незалежно від розміру екрана. */
.gevat-declaration__box input {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* ---------------- Підказка про B2B-акаунт на оформленні ---------------- */

.gevat-b2b-hint {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #b2ced2;
  border-left: 3px solid #0cb7e2;
  border-radius: 4px;
  background: #f4fcff;
}

.gevat-b2b-hint__mark {
  flex: 0 0 auto;
  color: #427e8d;
  line-height: 0;
  margin-top: 2px;
}

.gevat-b2b-hint__body { flex: 1 1 auto; min-width: 0; }

.gevat-b2b-hint__text {
  margin: 0 0 10px;
  color: #2f3d44;
  line-height: 1.5;
}

.gevat-b2b-hint__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

.gevat-b2b-hint__cta {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 3px;
  background: #0cb7e2;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}

.gevat-b2b-hint__cta:hover,
.gevat-b2b-hint__cta:focus {
  background: #2592a9;
  color: #fff;
  text-decoration: none;
}

.gevat-b2b-hint__info { flex: 0 0 auto; }

@media (max-width: 575px) {
  .gevat-b2b-hint { padding: 14px; gap: 10px; }
  .gevat-b2b-hint__cta { width: 100%; text-align: center; }
}

/* ------------- Підпис § 6a під ціною та штатна мітка теми ------------- */

/* Опція «прибрати напис ставки» лишає порожній контейнер теми —
   прибираємо його зі сторінки, щоб не тримав відступ. */
.tvproduct-tax-label:empty { display: none; }

.gevat-b2b-note { margin: 4px 0 0; }

.gevat-b2b-note__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #177a38;
  font-size: .92em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.gevat-b2b-note__open:hover .gevat-b2b-note__text,
.gevat-b2b-note__open:focus .gevat-b2b-note__text { text-decoration: underline; }

.gevat-b2b-note__open:focus-visible {
  outline: 2px solid #177a38;
  outline-offset: 2px;
  border-radius: 3px;
}

.gevat-b2b-note__info {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  line-height: 13px;
  text-align: center;
}