/* ═══════════════════════════════════════════════════════════════════════
   БИОЗАРЯД · покупка в «Формуляре»: корзина, оформление, оплата,
   «заказ принят».

   Раскладку собственной вёрстки корзины по-прежнему держат cart-page.css
   и checkout-page.css из старой темы — этот файл ложится поверх и
   переводит её в фирменный стиль. Основа (палитра, шапка, шапка страницы,
   кнопки) приходит из page.css и shell.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Имена переменных старой темы: их ждут cart-page.css и checkout-page.css.
   Здесь они получают фирменные значения — и половина оформления
   переезжает в «Формуляр» без единого нового селектора. */
:root{
  --font-family:'Evolventa',system-ui,sans-serif;
  --second-family:'Martian Mono',ui-monospace,monospace;
  --black-exclusive-watch:#4A4A4A;
  --beige-exclusive-watch:#F4F4F4;
  --gray-price-exclusive-watch:#9C9C9C;
  --color-primary:#F28B0C;
  --color-secondary:#6DA52F;
  --green-biozaryad:#6DA52F;
  --dark-grey-biozaryad:#4A4A4A;
  --medium-grey-biozaryad:#6E6E6E;
  --light-grey-biozaryad:#9C9C9C;
  --orange-biozaryad:#F28B0C;
  --white-biozaryad:#FFFFFF;
}

.shop{padding-top:clamp(18px,2.2vw,30px); padding-bottom:clamp(56px,6vw,104px)}
.shop .woocommerce{max-width:none}

/* ── Корзина: список товаров ───────────────────────────────────────── */
.cart-grid{display:grid; gap:clamp(24px,3vw,48px)}
@media (min-width:1080px){
  .cart-grid{grid-template-columns:minmax(0,1fr) clamp(330px,27vw,410px);
    align-items:start}
  .cart-grid .cart-collaterals{position:sticky; top:96px}
}

.cart-items{gap:clamp(12px,1.4vw,18px)}
.cart-item{background:#FFFFFF; border:0; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line); padding:clamp(16px,1.8vw,24px);
  animation:none; transition:box-shadow .2s var(--e)}
.cart-item:hover{transform:none; box-shadow:inset 0 0 0 1px var(--leaf)}
.cart-item__image{background:var(--field); border-radius:var(--r-sm)}
.cart-item__title{font-size:19px; font-weight:700; line-height:1.22;
  letter-spacing:-.016em; color:var(--g900)}
.cart-item__title a:hover{color:var(--ink); opacity:1}
.cart-item__flavor{font-size:13.5px; font-weight:700}
.cart-item__flavor--apple{color:var(--acc)}
.cart-item__flavor--citrus{color:var(--com)}
.cart-item__sku{font-size:13px; color:var(--g500)}
.cart-item__price .price-final,
.cart-item__subtotal .cart-item__subtotal-group{font-family:'Martian Mono',ui-monospace,monospace;
  font-weight:500; font-size:19px; letter-spacing:-.05em; word-spacing:-.34em;
  color:var(--g900)}
.cart-item__price .price-old{font-size:14px; color:var(--g500)}

.cart-quantity-btn{width:32px; height:32px; border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--g700); font-size:16px}
.cart-quantity-btn:hover:not(:disabled){border-color:var(--leaf); color:var(--ink);
  background:var(--leaf-tint)}
.cart-quantity__value{font-family:'Martian Mono',ui-monospace,monospace; font-size:15px;
  letter-spacing:-.05em}
.cart-item__remove .remove-item{border-radius:var(--r-sm); color:var(--g300)}
.cart-item__remove .remove-item:hover{color:var(--com); background:var(--tint-2)}

/* ── Корзина: итог ─────────────────────────────────────────────────── */
.cart-totals{background:var(--tint); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px); max-width:none}
.cart-totals__title{font-size:clamp(21px,2vw,26px); font-weight:700;
  letter-spacing:-.022em; color:var(--g900)}
.cart-totals__label{font-size:15.5px; color:var(--g700); font-weight:400}
.cart-totals__value{font-family:'Martian Mono',ui-monospace,monospace; font-size:15px;
  letter-spacing:-.05em; word-spacing:-.34em; color:var(--g900)}
.cart-totals__row{padding:7px 0}
.cart-totals__total{border-top:1px solid rgba(74,74,74,.16)}
.cart-totals__total .cart-totals__label{font-weight:700; font-size:17px; color:var(--g900)}
.cart-totals__total-price{font-family:'Martian Mono',ui-monospace,monospace;
  font-weight:600; font-size:clamp(22px,2.2vw,28px); letter-spacing:-.05em;
  word-spacing:-.34em; color:var(--g900)}

.cart-coupon__input,
input[type="text"].cart-coupon__input{height:48px; padding:0 16px; background:#FFFFFF;
  border:1px solid var(--line); border-radius:var(--r-sm); font-family:inherit;
  font-size:15.5px; color:var(--g900)}
.cart-coupon__input:focus{outline:none; border-color:var(--leaf)}
/* Кнопка промокода второстепенная: у неё же есть класс .button,
   поэтому вес правила поднят выше общего правила кнопок ниже. */
.shop .woocommerce button.cart-coupon__button{background:#FFFFFF; border:0; border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 2px var(--leaf); color:var(--ink); font-family:inherit;
  font-size:15px; font-weight:700; padding:13px 18px; transition:.2s var(--e)}
.shop .woocommerce button.cart-coupon__button:hover{background:var(--leaf); color:#FFFFFF;
  box-shadow:none}

.cart-checkout-button a.checkout-button,
.shop .woocommerce a.button, .shop .woocommerce button.button:not(.cart-coupon__button),
.shop .woocommerce input.button, .shop .woocommerce .button.alt,
.shop #place_order{display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:auto; min-height:54px; padding:15px 28px; background:#F28B0C;
  color:#FFFFFF; border:0; border-radius:8px; font-family:inherit; font-size:16.5px;
  font-weight:700; line-height:1.1; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 22px rgba(242,139,12,.38); transition:.2s var(--e)}
.cart-checkout-button a.checkout-button:hover,
.shop .woocommerce a.button:hover,
.shop .woocommerce button.button:not(.cart-coupon__button):hover,
.shop .woocommerce input.button:hover, .shop .woocommerce .button.alt:hover,
.shop #place_order:hover{background:#FF9E28; color:#FFFFFF; transform:translateY(-2px)}
.cart-checkout-button a.checkout-button{width:100%}

.change-cart{font-size:15.5px; color:var(--ink); text-decoration:underline;
  text-underline-offset:3px}

/* Пустая корзина */
.cart-empty{text-align:left; max-width:60ch}
.cart-empty__title{font-size:clamp(22px,2.2vw,30px); font-weight:700;
  letter-spacing:-.022em; color:var(--g900); margin-bottom:12px}

/* ── Оформление ────────────────────────────────────────────────────── */
@media (min-width:1080px){
  .checkout-grid{gap:clamp(28px,3.2vw,56px)}
  .checkout-order-summary{position:sticky; top:96px}
}
/* Правая колонка — две панели: заказ и оплата. Обе на фирменной подложке,
   иначе одна зелёная, другая серая, и это читается как недоделка. */
.checkout-order-totals, .checkout-payment-wrapper{background:var(--tint);
  border-radius:var(--r-lg)}
.checkout-form-wrapper{background:#FFFFFF; border:0; border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line)}
.checkout-order-totals__title{font-size:clamp(20px,1.9vw,25px); font-weight:700;
  letter-spacing:-.022em; color:var(--g900)}
.checkout-order-totals__title{display:block; margin-bottom:18px}

/* Карточка товара в «Вашем заказе». Старая сетка ставила цену третьей
   колонкой без зазора и обрезала «Количество» по нижнему краю: здесь
   у карточки есть воздух, цена стоит отдельно и не наезжает на название. */
.checkout-order-item{border-radius:var(--r); background:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--line); padding:16px 18px 16px 16px;
  grid-template-columns:64px minmax(0,1fr) auto; column-gap:16px; align-items:start}
.checkout-order-item__image{width:64px; aspect-ratio:1; background:var(--field);
  border-radius:var(--r-sm)}
.checkout-order-item__image img{padding:6px}
.checkout-order-item__info{gap:6px; height:auto; min-width:0}
.checkout-order-item__brand{display:none}
.checkout-order-item__title{font-size:16px; font-weight:700; line-height:1.3;
  letter-spacing:-.012em; color:var(--g900)}
.checkout-order-item__flavor{display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700}
.checkout-order-item__flavor--apple{color:var(--acc)}
.checkout-order-item__flavor--citrus{color:var(--com)}
.checkout-order-item__flavor-icon{width:16px; height:16px}
.checkout-order-item__quantity{padding-top:0; flex:none; font-size:13.5px;
  line-height:1.4; color:var(--g500)}
.checkout-order-item__sku{font-size:12.5px; color:var(--g500)}
.checkout-order-item__price{padding-left:4px; white-space:nowrap; text-align:right}
.checkout-order-item__price .price-final,
.checkout-totals__value, .checkout-totals__total-price{
  font-family:'Martian Mono',ui-monospace,monospace; letter-spacing:-.05em;
  word-spacing:-.34em; color:var(--g900)}
.checkout-order-item__price .price-final{font-size:17px; font-weight:500; line-height:1.3}
.checkout-totals__total-price{font-weight:600; font-size:clamp(21px,2vw,26px)}
.checkout-order-totals__content:empty{display:none}
.checkout-order-totals .change-cart{display:inline-block; margin-top:16px}

/* Блок итога: таблица WooCommerce оставляла пустоту над чертой —
   отступы таблицы и подвала здесь обнулены, черта стоит там, где
   начинается итог, без воздуха над ней. */
.checkout-payment-wrapper{padding-top:clamp(20px,2vw,26px)}
#order_review table.shop_table{width:100%; margin:0; border:0; border-collapse:collapse}
#order_review table.shop_table tfoot,
#order_review table.shop_table tfoot tr,
#order_review table.shop_table tfoot td{padding:0; border:0; background:transparent}
#order_review .cart-totals__total{border-top:0; padding:0 0 6px}
#order_review .checkout-totals__row{display:flex; align-items:baseline;
  justify-content:space-between; gap:16px; padding:0}
#order_review .cart-totals__label{font-size:17px; font-weight:700; color:var(--g900)}
#order_review .checkout-consents{margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(74,74,74,.16)}
.woocommerce-checkout #payment .woocommerce-info{margin:0 0 16px; font-size:14px}

/* Поля формы */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.form-row .woocommerce-input-wrapper textarea.input-text{
  background:#FFFFFF; border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:16px; color:var(--g900); transition:border-color .18s}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus{outline:none; border-color:var(--leaf);
  box-shadow:0 0 0 3px rgba(136,191,89,.22)}
/* Подписи над полями. WooCommerce прячет их классом screen-reader-text —
   здесь они возвращаются на место: мелкая метка над полем, у обязательных
   звёздочка, пометка «(необязательно)» убрана. */
.woocommerce-checkout .form-row > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-checkout .form-row > label.screen-reader-text{position:static; clip:auto;
  clip-path:none; width:auto; height:auto; margin:0 0 7px; padding:0; overflow:visible;
  display:block; font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--g500); line-height:1.3}
.woocommerce-checkout .form-row > label .optional{display:none}
.woocommerce-checkout .checkout-consents .form-row > label{text-transform:none;
  letter-spacing:0; font-weight:400; font-size:14px; line-height:1.5}
.woocommerce-checkout .form-row > label abbr.required{color:var(--com);
  text-decoration:none; border:0; margin-left:2px; font-size:13px}
.woocommerce-checkout .form-row + .form-row{margin-top:14px}
.woocommerce form .form-row label{font-size:14px; color:var(--g500)}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:#D8542F;
  box-shadow:0 0 0 2px rgba(216,84,47,.16)}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select{border-color:var(--leaf)}
.required_field, .required{color:var(--com)}

/* Способы оплаты */
.woocommerce-checkout-payment .payment_methods li{border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line); background:#FFFFFF}
.woocommerce-checkout-payment .payment_methods li label{font-size:16px; font-weight:700;
  color:var(--g900)}
.woocommerce-checkout-payment .payment_methods li .payment_box{background:var(--field);
  border-radius:var(--r-sm); font-size:14.5px; color:var(--g700)}

/* Согласия */
.checkout-consents__label-text{font-size:14px; line-height:1.5; color:var(--g500)}
.checkout-consents__label-text a{color:var(--ink); text-decoration:underline;
  text-underline-offset:3px}

/* ── Уведомления ───────────────────────────────────────────────────── */
.woocommerce-error, .woocommerce-message, .woocommerce-info,
.woocommerce-NoticeGroup{scroll-margin-top:92px}
/* Блок ошибки на кассе заметнее и на секунду вспыхивает, чтобы его не пропустили */
.woocommerce-checkout .woocommerce-error{font-weight:500}
@keyframes bz-flash{0%,100%{box-shadow:0 0 0 0 rgba(216,84,47,0)} 30%{box-shadow:0 0 0 4px rgba(216,84,47,.32)}}
.bz-flash{animation:bz-flash 1s ease-out 2}
@media (prefers-reduced-motion:reduce){ .bz-flash{animation:none} }
/* Незаполненное обязательное согласие — красным, как и поля */
.checkout-consents__row.woocommerce-invalid .checkout-consents__label-text{color:#B23A1A}
.checkout-consents__row.woocommerce-invalid input[type=checkbox]{outline:2px solid #D8542F; outline-offset:2px}
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  border:0; border-radius:var(--r); padding:14px 18px; font-size:15.5px; line-height:1.5}
.woocommerce-message{background:var(--tint); color:var(--g900)}
.woocommerce-error{background:#FDECE7; color:#7A2E17}
.woocommerce-info{background:var(--tint-2); color:#6B3D06}

/* ── «Заказ принят» ────────────────────────────────────────────────── */
.woocommerce-order .woocommerce-thankyou-order-received{font-size:clamp(20px,2vw,26px);
  font-weight:700; letter-spacing:-.022em; color:var(--g900); margin-bottom:18px}
.woocommerce-order ul.woocommerce-order-overview{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); list-style:none;
  margin:0 0 clamp(24px,2.6vw,38px); padding:0}
.woocommerce-order ul.woocommerce-order-overview li{background:#FFFFFF;
  border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line); padding:16px 18px;
  font-size:13px; color:var(--g500); border-right:0}
.woocommerce-order ul.woocommerce-order-overview li strong{display:block; margin-top:6px;
  font-size:17px; color:var(--g900)}
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order table.shop_table{width:100%; border-collapse:collapse;
  font-size:16px; background:#FFFFFF; border-radius:var(--r); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td{padding:13px 17px; text-align:left;
  border-bottom:1px solid var(--hair)}
.woocommerce-order table.shop_table th{background:var(--tint); font-weight:700;
  color:var(--g900)}

@media (max-width:760px){
  .cart-grid .cart-collaterals, .checkout-order-summary{position:static}
}