.page-head { padding-top: 24px; padding-bottom: 8px; }
.page-head h1 { font-size: 28px; font-weight: 600; }

.checkout-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; padding-top: 24px; padding-bottom: 90px; align-items: start; }
/* min-width:0 — та же история, что у .cart-item .info, но уровнем выше:
   grid-элементы тоже по умолчанию min-width:auto (не сжимаются меньше
   min-content своего поддерева), из-за чего колонка с длинным названием
   товара раздувала грид-трек шире контейнера ещё ДО того, как flex внутри
   .cart-item успевал что-то сжать. */
#cartColumn, .summary-col { min-width: 0; }

.cart-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item .thumb { width: 60px; height: 60px; background: var(--card); border: 1px solid var(--card-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; }
/* min-width:0 — без него flex-элемент не сжимается уже своего контента
   (дефолт min-width:auto), длинное название толкает всю строку .cart-item
   шире контейнера и цена справа вылезает/обрезается за край экрана. */
.cart-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cart-item .info h4 { font-size: 14.5px; font-weight: 600; }
.cart-item .right-col { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; }
.cart-item .price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.remove-btn { background: none; border: none; font-size: 11.5px; color: var(--muted); text-decoration: underline; padding: 0; align-self: flex-start; }
.cart-empty-inline { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; }

.summary-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 22px; margin-bottom: 20px; }
/* flex-wrap — без него label+value с длинным текстом (например
   #deliveryHintRow: "Доставка" + "по России, 3-5 дней — выберите зону в
   форме") не помещаются в одну строку и рендерятся впритык без отступа,
   потому что justify-content:space-between не добавляет зазор, если
   свободного места не осталось — по умолчанию flex не переносит строки. */
.summary-row { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; font-size: 13.5px; margin-bottom: 10px; }
.summary-row .muted { color: var(--muted); font-size: 12.5px; text-align: right; }
.summary-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-line); font-family: 'Unbounded', sans-serif; }
.summary-total-row b { font-size: 22px; }

.promo-row { display: flex; gap: 8px; margin: 12px 0 4px; }
.promo-row input { flex: 1; min-width: 0; padding: 9px 11px; border: 1.5px solid var(--card-line); border-radius: 8px; font-family: inherit; font-size: 13px; text-transform: uppercase; }
.promo-row input:focus { outline: none; border-color: var(--ink); }
.promo-apply { background: var(--ink); color: var(--paper); border: none; border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; }
.promo-note { font-size: 11.5px; min-height: 1em; margin-bottom: 6px; }
.promo-note.ok { color: #3f8a2b; }
.promo-note.err { color: var(--orange-dark); }
#discountRow b { color: #3f8a2b; }

.order-form { display: flex; flex-direction: column; gap: 12px; }
.order-form h3 { font-size: 15px; font-weight: 600; margin: 6px 0 2px; }
.order-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.order-form input, .order-form textarea { font-family: inherit; font-size: 14px; color: var(--ink); padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--card-line); background: var(--paper); resize: vertical; }
.order-form input:focus, .order-form textarea:focus { outline: none; border-color: var(--orange); }
/* Селект «Субъект РФ» — оформлен под остальные поля: свой шеврон (нативная
   стрелка убрана), тот же бордер/радиус/фокус, кастомная стрелка справа. */
.order-form select { font-family: inherit; font-size: 14px; color: var(--ink); padding: 11px 42px 11px 14px; border-radius: 10px; border: 1.5px solid var(--card-line); background-color: var(--paper); cursor: pointer; appearance: none; -webkit-appearance: none;
  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.5l5 5 5-5' fill='none' stroke='%2386847e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.order-form select:hover { border-color: var(--muted); }
.order-form select:focus { outline: none; border-color: var(--orange); }
.order-form select:invalid { color: var(--muted); }

.pay-methods { display: flex; gap: 10px; }
.pay-method { display: flex; align-items: center; gap: 8px; flex: 1; border: 1.5px solid var(--card-line); border-radius: 100px; padding: 10px 16px; font-size: 13px; cursor: pointer; }
.pay-method:has(input:checked) { border-color: var(--ink); background: var(--card); }
.pay-note { font-size: 11.5px; color: var(--muted); }

.consent-row { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.consent-row input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--orange); }
.consent-row a { color: var(--orange-dark); text-decoration: underline; }

.order-form .btn { width: 100%; margin-top: 6px; }

.empty-cart, .done-card { text-align: center; padding: 80px 20px; color: var(--muted); }
.done-card { max-width: 420px; margin: 0 auto; }
.done-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.done-card h2 { color: var(--ink); font-size: 24px; margin-bottom: 10px; }
.done-card p { margin-bottom: 8px; }
.done-card b { color: var(--ink); }
.done-card .btn { margin-top: 18px; display: inline-flex; }

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

.optional-mark { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 4px; }

.zone-auto-hint { font-size: 11.5px; font-weight: 500; color: var(--orange-dark); min-height: 1em; }