/* Оформление заказа. Токены — из main.css (:root). Сетка полей на 6 колонок:
   vk-col-2 = треть, vk-col-3 = половина, vk-col-6 = вся ширина. */

/* Чекауту нужна бОльшая ширина, чем обычной странице: слева форма, справа сводка.
   Родительский .vk-page__wrap ограничен 1100px, плюс мой padding 64px съедали поля
   до ~170px — они выглядели куцыми. Расширяем именно на чекауте. */
/* Контейнер темы .vk-woo ограничен 1240px и центрируется, а шапка идёт во всю
   ширину с padding var(--pad). Из-за этого чекаут был уже логотипа ровно на 60px.
   На чекауте снимаем ограничение — края совпадают с логотипом и корзиной. */
body.woocommerce-checkout .vk-woo { max-width: none; }
body.woocommerce-checkout .vk-woo .vk-page__wrap { max-width: none; }

/* Один шрифт на весь интерфейс формы: на экране соседствовали Golos, Onest и Arial. */
.vk-ck, .vk-ck input, .vk-ck select, .vk-ck textarea, .vk-ck button,
.vk-ck .woocommerce-notices-wrapper { font-family: var(--ff-golos); }
/* Отступ тот же, что у шапки (--pad), иначе чекаут визуально уже сайта. */
/* Боковой отступ уже даёт .vk-woo (padding: 44px var(--pad) 80px). Свой добавлять
   нельзя — получалось 128px с каждой стороны, и чекаут выходил уже логотипа. */
.vk-ck { max-width: none; margin: 0; padding: 0 0 40px; }

.vk-ck-crumb { display: flex; gap: 8px; align-items: center; font: 400 13px/1 var(--ff-golos); color: var(--ink-5); padding: 24px 0 16px; }
.vk-ck-crumb a { color: var(--ink-6); text-decoration: none; }
.vk-ck-crumb a:hover { color: var(--terracotta); }
.vk-ck-crumb .cur { color: var(--graphite); }

.vk-ck-h1 { font: 500 40px/1.1 var(--ff-serif); color: var(--graphite); margin: 0 0 24px; letter-spacing: -.01em; }

/* ── степпер ── */
.vk-ck-steps { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 32px; padding: 0; }
.vk-ck-step { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-right: 28px; position: relative; }
.vk-ck-step + .vk-ck-step { padding-left: 28px; }
.vk-ck-step + .vk-ck-step::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--line-2); }
.vk-ck-step__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--ff-golos); border: 1px solid var(--line-25); color: var(--ink-5); background: var(--surface); flex: none; }
.vk-ck-step__label { font: 500 14px/1 var(--ff-golos); color: var(--ink-5); }
.vk-ck-step[data-state="active"] .vk-ck-step__dot { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.vk-ck-step[data-state="active"] .vk-ck-step__label { color: var(--graphite); }
.vk-ck-step[data-state="done"] .vk-ck-step__dot { background: var(--terracotta-tint); border-color: var(--terracotta); color: var(--terracotta-ink); }

/* ── раскладка ── */
.vk-ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.vk-ck-main { min-width: 0; }

.vk-ck-sec { background: var(--surface); border: 1px solid var(--line-1); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.vk-ck-sec__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vk-ck-sec__num { width: 24px; height: 24px; border-radius: 50%; background: var(--graphite); color: var(--surface);
  display: grid; place-items: center; font: 600 12px/1 var(--ff-golos); flex: none; }
.vk-ck-sec__title { font: 500 20px/1.2 var(--ff-serif); color: var(--graphite); margin: 0; }
.vk-ck-sec__edit { margin-left: auto; background: none; border: 0; color: var(--terracotta); font: 500 13px var(--ff-golos); cursor: pointer; }

.vk-ck-auth { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-2);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font: 400 13.5px/1.4 var(--ff-golos); color: var(--ink-65); }
.vk-ck-auth a { color: var(--terracotta); font-weight: 600; text-decoration: none; }

/* ── поля: сетка на 6 колонок ── */
.vk-ck-form .woocommerce-billing-fields__field-wrapper,
.vk-ck-form .woocommerce-shipping-fields__field-wrapper,
.vk-ck-form .woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
.vk-ck-form .form-row { margin: 0; padding: 0; min-width: 0; grid-column: span 6; }
.vk-ck-form .vk-col-2 { grid-column: span 2; }
.vk-ck-form .vk-col-3 { grid-column: span 3; }
.vk-ck-form .vk-col-4 { grid-column: span 4; }
.vk-ck-form .vk-col-6 { grid-column: span 6; }

.vk-ck-form .form-row label { display: block; font: 500 12.5px/16px var(--ff-golos); color: var(--ink-6);
  margin-bottom: 6px; letter-spacing: .01em; height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-ck-form .form-row .required { color: var(--terracotta); text-decoration: none; }
.vk-ck-form .form-row .optional { color: var(--ink-4); font-weight: 400; }

.vk-ck-form input[type="text"], .vk-ck-form input[type="tel"], .vk-ck-form input[type="email"],
.vk-ck-form input[type="password"], .vk-ck-form textarea, .vk-ck-form .select2-selection,
.vk-ck-form select {
  width: 100%; box-sizing: border-box; height: 46px; min-height: 46px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line-12); border-radius: 10px;
  font: 400 14.5px/1.2 var(--ff-golos); color: var(--graphite);
  transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.vk-ck-form textarea { height: auto; min-height: 84px; padding: 11px 12px; line-height: 1.45; resize: vertical; }
.vk-ck-form input:focus, .vk-ck-form textarea:focus, .vk-ck-form select:focus {
  outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-tint);
}
/* Свой шатрон у select: нативная стрелка исчезла вместе с appearance */
.vk-ck-form select { padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232E3438' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.vk-ck-form .select2-container .select2-selection--single { height: 44px; display: flex; align-items: center; }
.vk-ck-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

/* intl-tel-input: поле телефона с выпадающим кодом страны */
.vk-ck-form .iti { width: 100%; display: block; }
.vk-ck-form .iti__country-container { z-index: 3; }

/* ── способы доставки ── */
.vk-ck-ships { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.vk-ck-ship { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper-72); transition: border-color .15s, background .15s; }
.vk-ck-ship:hover { border-color: var(--line-35); }
.vk-ck-ship input { accent-color: var(--terracotta); flex: none; }
.vk-ck-ship__body { display: flex; align-items: baseline; gap: 10px; width: 100%; min-width: 0; }
.vk-ck-ship__name { font: 400 14px/1.35 var(--ff-golos); color: var(--graphite); min-width: 0; }
.vk-ck-ship__price { margin-left: auto; font: 600 14px/1 var(--ff-golos); color: var(--graphite); white-space: nowrap; }
.vk-ck-free { color: var(--terracotta-ink); font-weight: 600; }
.vk-ck-ships li:has(input:checked) .vk-ck-ship { border-color: var(--terracotta); background: var(--terracotta-tint); }

.vk-ck-note { font: 400 13.5px/1.5 var(--ff-golos); color: var(--ink-6); margin: 14px 0 0; }

/* ── карта СДЭК ── */
.vk-ck-map { margin-top: 14px; height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); }
.vk-ck-map:empty::after { content: "Загружаем карту пунктов выдачи…"; display: grid; place-items: center;
  height: 100%; font: 400 13.5px var(--ff-golos); color: var(--ink-5); }

/* ── оплата ──
   Разметка WooCommerce: <li><input radio><label>Название</label><div class=payment_box>.
   Рамку вешаем на li: раньше она была на label, и радиокнопка оказывалась снаружи
   «коробки», а название читалось как пустое поле ввода. */
.vk-ck-form .woocommerce-checkout-payment { background: none; border-radius: 0; }
.vk-ck-form .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.vk-ck-form li.wc_payment_method { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper-72);
  transition: border-color .15s, background .15s; }
.vk-ck-form li.wc_payment_method:has(input:checked) { border-color: var(--terracotta); background: var(--terracotta-tint); }
.vk-ck-form li.wc_payment_method > label { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 0; border: 0; background: none; cursor: pointer; flex: 1; min-width: 0;
  font: 400 14.5px/1.3 var(--ff-golos) !important; color: var(--graphite); }
.vk-ck-form li.wc_payment_method > label img { max-height: 24px; width: auto; display: inline-block; }
.vk-ck-form .wc_payment_method input[type="radio"] { accent-color: var(--terracotta); flex: none; margin: 0; }
.vk-ck-form .wc_payment_method .payment_box { flex-basis: 100%; background: var(--surface); border: 1px solid var(--line-1);
  border-radius: 8px; padding: 10px 12px; font: 400 13px/1.5 var(--ff-golos); color: var(--ink-65); margin: 2px 0 0; }
.vk-ck-form .wc_payment_method .payment_box::before { display: none; }
.vk-ck-form .wc_payment_method .payment_box p { margin: 0; }

.vk-ck-form #place_order { width: 100%; height: 52px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--terracotta); color: #fff; font: 600 16px/1 var(--ff-golos); transition: background .15s; }
.vk-ck-form #place_order:hover { background: var(--terracotta-ink); }

.vk-ck-form .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; font: 400 12.5px/1.5 var(--ff-golos); color: var(--ink-6); }

/* ── сводка ── */
.vk-ck-aside { position: sticky; top: 88px; min-width: 0; }
.vk-ck-summary { background: var(--surface); border: 1px solid var(--line-1); border-radius: 14px; padding: 20px; }
.vk-ck-summary table { width: 100%; border-collapse: collapse; }
.vk-ck-summary th, .vk-ck-summary td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line-1);
  font: 400 14px/1.4 var(--ff-golos); color: var(--ink-72); vertical-align: top; }
.vk-ck-summary td { text-align: right; white-space: normal; }
.vk-ck-summary .cart-subtotal td, .vk-ck-summary .order-total td,
.vk-ck-summary .fee td, .vk-ck-summary .tax-rate td { white-space: nowrap; }
.vk-ck-summary .product-name { white-space: normal; }
.vk-ck-summary .order-total th, .vk-ck-summary .order-total td { border-bottom: 0; padding-top: 14px;
  font: 600 17px/1 var(--ff-golos); color: var(--graphite); }
.vk-ck-summary .variation { margin: 4px 0 0; font: 400 12.5px/1.4 var(--ff-golos); color: var(--ink-5); }
.vk-ck-summary .variation dt, .vk-ck-summary .variation dd { display: inline; margin: 0; }

/* ── адаптив: на мобильном сводка уходит вниз, поля становятся в одну колонку ── */
@media (max-width: 1024px) {
  .vk-ck-grid { grid-template-columns: minmax(0, 1fr); }
  .vk-ck-aside { position: static; }
}
@media (max-width: 640px) {
  .vk-ck-h1 { font-size: 30px; }
  .vk-ck-sec { padding: 18px 16px; border-radius: 12px; }
  /* Треть и половина схлопываются в половину и полную: три поля в ряд на телефоне нечитаемы */
  .vk-ck-form .vk-col-2 { grid-column: span 3; }
  .vk-ck-form .vk-col-3 { grid-column: span 6; }
  .vk-ck-steps { gap: 0; }
  .vk-ck-step { padding-right: 12px; }
  .vk-ck-step + .vk-ck-step { padding-left: 12px; }
  .vk-ck-step + .vk-ck-step::before { width: 8px; }
  .vk-ck-step__label { display: none; }
  .vk-ck-step[data-state="active"] .vk-ck-step__label { display: block; }
  .vk-ck-map { height: 320px; }
}

/* ── правки сводки и оплаты по факту рендера ──
   WooCommerce отдаёт сводку как shop_table со своими рамками, а название товара —
   обычной td, поэтому оно ловило общее выравнивание вправо и сплющивалось. */
.vk-ck-summary table.shop_table { border: 0; }
.vk-ck-summary th, .vk-ck-summary td { border-left: 0; border-right: 0; }
.vk-ck-summary th.product-name, .vk-ck-summary td.product-name { text-align: left; width: auto; white-space: normal; }
.vk-ck-summary th.product-total, .vk-ck-summary td.product-total { text-align: right; width: 1%; white-space: nowrap; }
.vk-ck-summary .product-name .product-quantity { color: var(--ink-5); font-weight: 400; }
.vk-ck-summary tfoot th { text-align: left; white-space: normal; font-weight: 500; }
.vk-ck-summary tfoot td { text-align: right; }

/* Блок оплаты приходит в сером боксе темы WooCommerce — гасим, у нас своя карточка. */
.vk-ck-form #payment,
.vk-ck-form .woocommerce-checkout-payment { background: transparent !important; border-radius: 0; }
.vk-ck-form #payment .place-order { padding: 0; margin-top: 4px; }
.vk-ck-form .woocommerce-privacy-policy-text p { font: 400 12.5px/1.5 var(--ff-golos); color: var(--ink-6); margin: 0 0 12px; }

/* «Платёжные реквизиты» дублирует заголовок секции «Контакты получателя» — прячем. */
.vk-ck-form .woocommerce-billing-fields > h3,
.vk-ck-form .woocommerce-additional-fields > h3 { display: none; }
.vk-ck-form .woocommerce-shipping-fields > h3 { font: 500 15px/1.3 var(--ff-golos); color: var(--graphite); margin: 0 0 14px; }
.vk-ck-hint { color: var(--ink-5); font-style: normal; }

/* Строка доставки: название и цена в две строки. Одной строкой длинное название
   («Самовывоз со склада (Репищева 14, СПб)») распирало узкую колонку сводки. */
.vk-ck-summary th { width: 46%; }
.vk-ck-ship-sum { display: block; }
.vk-ck-ship-sum b { display: block; font-weight: 400; color: var(--ink-72); }
.vk-ck-ship-sum i { display: block; margin-top: 2px; font-style: normal; font-weight: 600; color: var(--graphite); }

/* WooCommerce задаёт #payment div.payment_box серо-лиловый фон — специфичность выше
   моего .wc_payment_method .payment_box, поэтому повторяем с тем же весом селектора. */
.vk-ck-form #payment div.payment_box { background: var(--surface); border: 1px solid var(--line-1);
  color: var(--ink-65); border-radius: 8px; padding: 10px 12px; margin: 2px 0 0; }
.vk-ck-form #payment div.payment_box::before,
.vk-ck-form #payment div.payment_box::after { display: none; }
.vk-ck-form #payment ul.payment_methods { border-bottom: 0; padding: 0; }

/* Уведомления WooCommerce приходили с псевдо-иконкой из шрифта, которого в теме нет,
   и рисовались как обломки глифов. Иконку гасим, блок оформляем в стилистике витрины. */
.vk-woo .woocommerce-info, .vk-woo .woocommerce-message, .vk-woo .woocommerce-error,
.vk-woo .woocommerce-notice { position: relative; list-style: none;
  background: var(--surface); border: 1px solid var(--line-12); border-left: 3px solid var(--terracotta);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 10px;
  font: 400 14px/1.45 var(--ff-golos); color: var(--ink-72); }
.vk-woo .woocommerce-info::before, .vk-woo .woocommerce-message::before,
.vk-woo .woocommerce-error::before, .vk-woo .woocommerce-notice::before { content: none !important; display: none !important; }
.vk-woo .woocommerce-error { border-left-color: #C0392B; }
.vk-woo .woocommerce-info a, .vk-woo .woocommerce-message a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.vk-woo .woocommerce-notices-wrapper { max-width: none; margin: 0; padding: 0; }

/* Заголовок «Доставка по другому адресу?» — крупноват для чекбокса */
.vk-ck-form #ship-to-different-address { margin: 0 0 14px; }
.vk-ck-form #ship-to-different-address { margin: 0 0 16px; }
.vk-ck-form #ship-to-different-address span,
.vk-ck-form #ship-to-different-address label { display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/18px var(--ff-golos) !important; color: var(--ink-6); height: auto;
  white-space: normal; letter-spacing: .01em; margin: 0; }
.vk-ck-form #ship-to-different-address input { accent-color: var(--terracotta); }

/* ═══ Перебиваем стили WooCommerce ═══
   Он задаёт .woocommerce form .form-row input.input-text — специфичность выше моей,
   поэтому и тёмная рамка, и чужой радиус у select держались вопреки правкам. */
.vk-ck-form .form-row input.input-text,
.vk-ck-form .form-row textarea,
.vk-ck-form .form-row select,
.vk-ck-form .form-row .select2-selection {
  box-sizing: border-box; width: 100%; height: 46px; min-height: 46px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-12) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font: 400 14.5px/1.2 var(--ff-golos); color: var(--graphite);
  appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.vk-ck-form .form-row textarea { height: auto; min-height: 92px; padding: 12px; line-height: 1.5; }
.vk-ck-form .form-row select { padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232E3438' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.vk-ck-form .form-row input.input-text:focus,
.vk-ck-form .form-row textarea:focus,
.vk-ck-form .form-row select:focus {
  outline: none; border-color: var(--terracotta) !important;
  box-shadow: 0 0 0 3px var(--terracotta-tint) !important;
}

/* Подписи: фиксированная высота срезала выносные элементы букв («р», «д»).
   Высота свободная, а ряды выравниваем по низу — поля всё равно стоят ровно. */
/* Строгая сетка вместо выравнивания по низу: метка ровно 18px, поле ровно 46px,
   ряд выравнивается по верху — тогда Email и список стран стоят на одной линии. */
.vk-ck-form .woocommerce-billing-fields__field-wrapper,
.vk-ck-form .woocommerce-shipping-fields__field-wrapper,
.vk-ck-form .woocommerce-additional-fields__field-wrapper { align-items: start; }
.vk-ck-form .form-row { display: block; }
.vk-ck-form .form-row .woocommerce-input-wrapper { display: block; }
.vk-ck-form .form-row label,
.vk-ck-form .form-row > label {
  display: block; overflow: hidden;
  font: 500 12.5px/18px var(--ff-golos) !important; color: var(--ink-6);
  height: 18px; margin: 0 0 6px; letter-spacing: .01em;
  white-space: nowrap; text-overflow: ellipsis;
}

/* Флаги intl-tel-input. CSS вендора ссылается на ../img/flags.webp — от папки
   intl-tel-input это даёт vendor/img/ и промахивается. Задаём абсолютный путь. */
.iti__flag { background-image: url("/wp-content/themes/vykras/assets/vendor/intl-tel-input/img/flags.webp") !important; }
.iti__flag.iti__globe { background-image: url("/wp-content/themes/vykras/assets/vendor/intl-tel-input/img/globe.webp") !important; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag { background-image: url("/wp-content/themes/vykras/assets/vendor/intl-tel-input/img/flags@2x.webp") !important; }
  .iti__flag.iti__globe { background-image: url("/wp-content/themes/vykras/assets/vendor/intl-tel-input/img/globe@2x.webp") !important; }
}

/* Заголовок блока «Доставка по другому адресу?» приходит как <h3> — WooCommerce
   рисует его крупным, из-за чего блок не совпадал с основным. Приравниваем. */
.vk-ck-form #ship-to-different-address h3,
.vk-ck-form .woocommerce-shipping-fields h3 { font: 500 13px/18px var(--ff-golos) !important;
  color: var(--ink-6); margin: 0; letter-spacing: .01em; }
.vk-ck-form .woocommerce-additional-fields h3 { display: none; }

/* ═══ Единый фон полей ═══
   Было три состояния: часть полей кремовые (сливались с карточкой секции того же
   цвета), «Страна» и «Примечание к заказу» — белые. Приводим всё к белому: на
   кремовой карточке он даёт нужный контраст и границу поля видно без обводки. */
.vk-ck-form .form-row input.input-text,
.vk-ck-form .form-row input[type="text"],
.vk-ck-form .form-row input[type="tel"],
.vk-ck-form .form-row input[type="email"],
.vk-ck-form .form-row input[type="password"],
.vk-ck-form .form-row input[type="number"],
.vk-ck-form .form-row textarea,
.vk-ck-form .form-row select,
.vk-ck-form .form-row .select2-selection,
.vk-ck-form .iti__tel-input,
.vk-ck-form #order_comments { background: #FFFFFF !important; }

/* Карточки выбора (доставка, оплата) — тот же белый, подсветка выбранного остаётся. */
.vk-ck-ship,
.vk-ck-form li.wc_payment_method { background: #FFFFFF; }
.vk-ck-ships li:has(input:checked) .vk-ck-ship,
.vk-ck-form li.wc_payment_method:has(input:checked) { background: var(--terracotta-tint); }
.vk-ck-form #payment div.payment_box { background: var(--surface-2); }

/* ═══ Выпадающий список стран (select2) ═══
   Он рендерится в конце <body>, вне формы, поэтому стили формы до него не доходили:
   оставались дефолтные острые углы, тёмная рамка и синее выделение #3875d7. */
.select2-container--default .select2-dropdown,
.select2-container .select2-dropdown {
  border: 1px solid var(--line-12); border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: var(--sh-obj); margin-top: 4px;
}
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 38px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--line-12) !important; border-radius: 8px !important;
  background: #fff; outline: none;
  font: 400 14px/1.2 var(--ff-golos); color: var(--graphite);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--terracotta) !important; box-shadow: 0 0 0 3px var(--terracotta-tint);
}
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; padding: 4px; }
.select2-container--default .select2-results__option {
  padding: 9px 12px; border-radius: 8px;
  font: 400 14px/1.3 var(--ff-golos); color: var(--graphite);
}
/* Терракота вместо синего — и на наведении, и на выбранном */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--terracotta) !important; color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--terracotta-tint); color: var(--graphite);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px; padding-left: 12px; color: var(--graphite); font: 400 14.5px var(--ff-golos);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--ink-5) transparent transparent; }

/* ═══ Способ доставки: название + пояснение ═══ */
.vk-ck-ship__body { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.vk-ck-ship__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vk-ck-ship__name { font: 500 14.5px/1.3 var(--ff-golos); color: var(--graphite); }
.vk-ck-ship__note { font: 400 12.5px/1.3 var(--ff-golos); color: var(--ink-5); }
.vk-ck-ship__price { margin-left: auto; white-space: nowrap; font: 600 15px/1 var(--ff-golos); color: var(--graphite); }

/* Строка доставки в сводке: название и цена, обе в одну строку */
.vk-ck-summary .woocommerce-shipping-totals td { text-align: right; }
.vk-ck-ship-sum b { display: block; font: 400 13.5px/1.35 var(--ff-golos); color: var(--ink-72); }
.vk-ck-ship-sum i { display: block; margin-top: 3px; font: 600 14px/1 var(--ff-golos); font-style: normal; color: var(--graphite); white-space: nowrap; }

/* Текст выбранной страны уезжал на 8px правее соседних полей: select2 добавляет
   свой отступ поверх padding контейнера. Обнуляем — левый край совпадает с инпутами. */
.vk-ck-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important; padding-right: 24px;
}

/* ═══ Сводка заказа ═══
   Была типовой таблицей WooCommerce: рваные колонки, всё прижато вправо, товар и
   цена на разной высоте. Делаем читаемый список: позиция слева с мелкой метой,
   сумма справа фиксированной колонкой, итог — акцентом. */
.vk-ck-summary { padding: 4px 20px 20px; }
.vk-ck-summary table { table-layout: auto; }
.vk-ck-summary thead th { font: 500 11.5px/1 var(--ff-golos); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-45); padding: 14px 0 10px; border-bottom: 1px solid var(--line-12); }
.vk-ck-summary thead th.product-total { text-align: right; }

.vk-ck-summary tbody td { padding: 12px 0; border-bottom: 1px solid var(--line-1); vertical-align: top; }
.vk-ck-summary td.product-name { font: 500 14px/1.35 var(--ff-golos); color: var(--graphite); padding-right: 12px; }
.vk-ck-summary td.product-name .product-quantity { font-weight: 400; color: var(--ink-5); white-space: nowrap; }
.vk-ck-summary td.product-total { font: 500 14px/1.35 var(--ff-golos); color: var(--graphite);
  font-variant-numeric: tabular-nums; }
/* Мета позиции (цвет, фасовка) — мелким, не спорит с названием */
.vk-ck-summary .variation { margin: 5px 0 0; font: 400 12.5px/1.45 var(--ff-golos); color: var(--ink-5); }
.vk-ck-summary .variation dt { font-weight: 400; }
.vk-ck-summary .variation p { margin: 0; }

.vk-ck-summary tfoot th { font: 400 13.5px/1.4 var(--ff-golos); color: var(--ink-6);
  padding: 11px 0; border-bottom: 1px solid var(--line-1); width: auto; }
.vk-ck-summary tfoot td { font: 500 14px/1.4 var(--ff-golos); color: var(--graphite);
  padding: 11px 0; border-bottom: 1px solid var(--line-1); font-variant-numeric: tabular-nums; }
.vk-ck-summary .order-total th, .vk-ck-summary .order-total td {
  border-bottom: 0; padding-top: 16px;
  font: 600 18px/1.2 var(--ff-golos); color: var(--graphite);
}
.vk-ck-summary .order-total th { font-weight: 500; }

/* Строка доставки: метке хватает узкой колонки, названию способа нужна ширина —
   «СДЭК — до пункта выдачи» иначе ломается на три строки. */
.vk-ck-summary .woocommerce-shipping-totals th { width: 32%; padding-right: 8px; }
.vk-ck-summary .woocommerce-shipping-totals td { text-align: right; }
.vk-ck-ship-sum b { display: block; font: 400 13px/1.35 var(--ff-golos); color: var(--ink-72); }
.vk-ck-ship-sum i { display: block; margin-top: 4px; font: 600 14px/1 var(--ff-golos);
  font-style: normal; color: var(--graphite); white-space: nowrap; font-variant-numeric: tabular-nums; }