/* WooCommerce в тёмной теме сайта.
 *
 * Страницы корзины, оформления и аккаунта оставались на штатной светлой
 * раскраске WooCommerce: подписи полей шли цветом #1E293B по фону #0B0E13
 * (контраст 1.32 — текст практически невидим), а уведомления — белыми
 * плашками с лаймовой ссылкой (1.62).
 */

/* --- подписи и текст -------------------------------------------------- */
.woocommerce form label,
.woocommerce-page form label,
.woocommerce .woocommerce-form__label,
.woocommerce-checkout label,
.woocommerce-cart label,
.woocommerce-account label{
  color:var(--e-global-color-text,#EDF2F8);
  font:600 15px/1.4 Onest,sans-serif}

.woocommerce form .form-row .required{color:#FF8A5B;text-decoration:none}
.woocommerce form .form-row .optional{color:var(--e-global-color-muted,#93A0B2)}

.woocommerce-checkout p,
.woocommerce-cart p,
.woocommerce-account p,
.woocommerce .woocommerce-terms-and-conditions-wrapper p{
  color:var(--e-global-color-muted,#93A0B2);font-size:15px}

.woocommerce h2,.woocommerce h3,
.woocommerce-checkout h2,.woocommerce-checkout h3,
.woocommerce-billing-fields h3,#order_review_heading{
  color:var(--e-global-color-text,#EDF2F8)}

/* --- поля ввода ------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce #coupon_code{
  background-color:var(--e-global-color-surf1,#141922);
  color:var(--e-global-color-text,#EDF2F8);
  border:1px solid var(--e-global-color-bordr,#232B38);
  border-radius:10px;
  padding:14px 16px;
  font:400 16px/1.4 Onest,sans-serif;
  color-scheme:dark}

.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder{color:var(--e-global-color-dimtx,#8A94A6)}

.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus{
  outline:3px solid var(--e-global-color-primary,#A5D400);
  outline-offset:2px;
  border-color:var(--e-global-color-primary,#A5D400)}

/* раскрытый список рисует браузер: без явного фона он белый */
.woocommerce select option{
  background-color:var(--e-global-color-surf1,#141922);
  color:var(--e-global-color-text,#EDF2F8)}

/* --- уведомления и переключатели ------------------------------------ */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error{
  background-color:var(--e-global-color-surf1,#141922);
  color:var(--e-global-color-text,#EDF2F8);
  border-top:none;
  border-left:3px solid var(--e-global-color-primary,#A5D400);
  border-radius:12px;
  padding:16px 18px 16px 52px;
  font:400 15px/1.5 Onest,sans-serif;
  list-style:none}

.woocommerce .woocommerce-error{border-left-color:#FF8A5B}

.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-error a{
  color:var(--e-global-color-primary,#A5D400);font-weight:700;text-decoration:none}
.woocommerce .woocommerce-info a:hover,
.woocommerce .woocommerce-message a:hover{text-decoration:underline}

/* Значок. Шрифт WooCommerce загружен, но content был перебит пустой строкой,
   поэтому символ возвращается явно. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-error::before{
  font-family:WooCommerce;
  content:"\e028";
  color:var(--e-global-color-primary,#A5D400);
  font-size:18px;
  line-height:1;
  position:absolute;
  top:18px;left:18px;
  display:block}
.woocommerce .woocommerce-message::before{content:"\e015"}
.woocommerce .woocommerce-error::before{content:"\e016";color:#FF8A5B}

/* --- сводка заказа --------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-checkout-review-order table.shop_table{
  border:1px solid var(--e-global-color-bordr,#232B38);
  border-radius:14px;
  color:var(--e-global-color-text,#EDF2F8)}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color:var(--e-global-color-bordr,#232B38);
  color:var(--e-global-color-text,#EDF2F8);
  font-size:15px}
.woocommerce table.shop_table .product-name .variation,
.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd,
.woocommerce table.shop_table dl.variation p{
  color:var(--e-global-color-muted,#93A0B2);font-size:15px}

.woocommerce ul.wc_payment_methods li,
.woocommerce ul.wc_payment_methods label{color:var(--e-global-color-text,#EDF2F8)}
/* Панель способа оплаты. Стили WooCommerce от темы заливают её
   светло-серым селектором весом 1-3-1, и одиночный класс его не брал:
   на тёмной странице оставалась светлая плашка, описание на ней шло
   в 2.3 при норме 4.5, а выбранная строка способа — почти белый текст
   на почти белом фоне, 1.55. Берём вес 1-3-2 через body — тот же
   приём, что уже применён к подписям полей ниже. */
body.woocommerce-page.woocommerce-checkout #payment div.payment_box,
body.woocommerce-page #payment div.payment_box,
.woocommerce .payment_box{
  background-color:var(--e-global-color-surf1,#141922);
  color:var(--e-global-color-muted,#93A0B2);
  border:1px solid var(--e-global-color-bordr,#232B38);
  border-radius:10px}
.woocommerce .payment_box::before{display:none}

/* Мелкие кнопки оформления («Вход», «Применить купон»). Астра
   задаёт их в em, и от тела в 17px получается дробные 14.59px — ниже
   нашего предела в 15px и с нецелым кеглем, который рыхло рисуется. */
body.woocommerce-page .woocommerce-form-login-toggle button,
body.woocommerce-page .woocommerce-form-coupon button,
body.woocommerce-page .checkout_coupon button,
body.woocommerce-page .showlogin,
body.woocommerce-page .showcoupon{font-size:15px}

/* --- кнопка заказа — единый стандарт сайта --------------------- */
.woocommerce #place_order,
.woocommerce button.button.alt{
  background-color:var(--e-global-color-primary,#A5D400);
  color:var(--e-global-color-ongrn,#0B1400);
  border-radius:100px;
  font:700 16px/1.25 Onest,sans-serif;
  transition:none}

@media(max-width:767px){
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-message,
  .woocommerce .woocommerce-error{padding:14px 16px 14px 46px}
  .woocommerce .woocommerce-info::before,
  .woocommerce .woocommerce-message::before,
  .woocommerce .woocommerce-error::before{top:16px;left:16px}
}

/* Astra задаёт .woocommerce-js form .form-row label{font-size:.9rem} — (0,2,2),
   поэтому обычного .woocommerce form label не хватало. Здесь (0,2,3).
   Нижняя граница кегля на сайте — 15px, дробные размеры запрещены. */
body.woocommerce-js form .form-row label,
body.woocommerce-page .woocommerce form label,
body.woocommerce-page .woocommerce label,
body.woocommerce-checkout .woocommerce label{
  font-size:15px;font-weight:600;line-height:1.4;
  color:var(--e-global-color-text,#EDF2F8)}

/* Значок уведомлений (iv-notice-icon).
   Штатный глиф из шрифта WooCommerce отрисовывался пустым прямоугольником,
   поэтому значок собран средствами CSS — он не зависит от загрузки иконочного
   шрифта и одинаков во всех браузерах. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-error::before{
  font-family:Onest,sans-serif;font-weight:700;font-size:12px;
  content:'i';
  width:20px;height:20px;line-height:16px;text-align:center;
  border:2px solid currentColor;border-radius:50%;
  color:var(--e-global-color-primary,#A5D400);
  position:absolute;top:16px;left:16px;display:block;box-sizing:border-box}
.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before{content:'+'}
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-error::before{content:'!';color:#FF8A5B}

/* iv-notice-gap: WooCommerce выводит текст и ссылку вплотную — «Уже покупали?Нажмите». */
.woocommerce .woocommerce-info a,
.woocommerce-page .woocommerce-info a{margin-left:5px}

/* ——————————————— высота полей формы ———————————————
 * Тема задаёт select и input жёсткую высоту 40px, а отступы здесь — 14px
 * сверху и снизу. Вместе с рамками тексту оставалось 10 пикселей при
 * необходимых 22, и строка в выпадающем списке резалась пополам.
 *
 * Высоту задаём содержимым, а не числом. Нижняя граница 48px заодно
 * делает поле нормальной целью для пальца и совпадает с высотой кнопок.
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select{
  height:auto;
  min-height:48px;
  line-height:1.4;
}
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea{min-height:96px}

/* ————————————— Выбор способа оплаты Unitpay —————————————
   Список показывается, только когда включено больше одного способа.

   Подсветка держится на соседнем селекторе input:checked + span,
   а не на :has(). С :has() браузер не пересчитывал оформление при смене
   выбора и подсвечивал предыдущую строку — то есть врал покупателю
   о том, что тот выбрал. Проверено на живой странице.

   Радиокнопка не скрыта, а растянута прозрачным слоем на всю строку:
   принимает нажатие где угодно и остаётся доступной с клавиатуры,
   а видимый кружок рисует псевдоэлемент. */
.iv-up-methods{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.iv-up-method{position:relative;display:block;cursor:pointer}
.iv-up-method input[type="radio"]{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.iv-up-method > span{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;
  border:1px solid var(--e-global-color-bordr,#232B38);border-radius:12px;
  background:var(--e-global-color-surf1,#141922);
  color:var(--e-global-color-text,#EDF2F8);
  font:600 15px/1.35 Onest,system-ui,sans-serif;
  transition:border-color .18s ease,background-color .18s ease}
.iv-up-method > span::before{
  content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--e-global-color-muted,#93A0B2);
  transition:border-color .18s ease,box-shadow .18s ease}
.iv-up-method:hover > span{border-color:var(--e-global-color-muted,#93A0B2)}
.iv-up-method input:checked + span{
  border-color:var(--e-global-color-primary,#A5D400);
  background:rgba(165,212,0,.08)}
.iv-up-method input:checked + span::before{
  border-color:var(--e-global-color-primary,#A5D400);
  box-shadow:inset 0 0 0 4px var(--e-global-color-primary,#A5D400)}
.iv-up-method input:focus-visible + span{
  outline:2px solid var(--e-global-color-primary,#A5D400);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .iv-up-method > span,.iv-up-method > span::before{transition:none}}

/* ——— поля блока заказа на телефоне ———
   На экране 375 пикселей вложенные отступы съедали 133 из них,
   и всё содержимое — итоги, способы оплаты — жалось в 238.
   Ужимаем только на узких экранах. */
@media(max-width:600px){
  /* Имя повторено трижды не ради красоты: тема задаёт это поле
     прямо в странице селектором весом в два идентификатора,
     и обычным классом его не перебить. Три идентификатора берут
     верх без !important, который потом нечем было бы перекрыть. */
  #order_review#order_review#order_review{padding-left:14px;padding-right:14px}
  .woocommerce .payment_box{padding-left:12px;padding-right:12px}
}