/* Shop3 — стили страницы «checkout»: подключается только на её маршрутах (event.php headerAssets(), ADR 0016). Правила — как в shop3.css:
   только роли и шкалы var(--s3-*), canon.md 6.2. Общие компоненты — в shop3.css, он загружен раньше. */
.s3-notice--info { border-color: var(--s3-border-subtle); background: var(--s3-surface-alt); }

/* ---------- корзина ---------- */
.s3-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) var(--s3-layout-summary); gap: var(--s3-cart-gap); align-items: start; }
.s3-cartpage__weight { margin: 0 0 var(--s3-space-4); font-size: var(--s3-font-size-sm); }
.s3-line__warn { color: var(--s3-danger); font-weight: var(--s3-font-weight-bold); }
.s3-line__total { text-align: end; font-weight: var(--s3-font-weight-bold); }
.s3-qty--sm { height: var(--s3-size-control-md); }
.s3-qty--sm button { width: var(--s3-size-control-sm); }

.s3-summary { position: sticky; top: calc(var(--s3-header-height) + var(--s3-space-5)); display: flex; flex-direction: column; gap: var(--s3-space-3); padding: var(--s3-cart-summary-padding); border-radius: var(--s3-cart-summary-radius); background: var(--s3-surface-alt); }
/* зазора между колонками нет: линия над «Итого» — у dt и dd, она идёт через строку одной (VD #8); расстояние до суммы — отступом у dd (shop3.css) */
.s3-summary__totals { display: grid; grid-template-columns: 1fr auto; gap: var(--s3-space-2) 0; margin: 0 0 var(--s3-space-2); font-size: var(--s3-font-size-sm); }
.s3-summary__go { min-height: var(--s3-cart-summary-button-height); font-size: var(--s3-font-size-md); }

.s3-cartpage__extras { margin-top: var(--s3-space-6); }
/* блоки купона, сертификата, доставки — штатная разметка Bootstrap panel/collapse */
.s3-accordion .panel { margin: 0 0 var(--s3-space-2); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-cart-panel-radius); box-shadow: none; overflow: hidden; }
.s3-accordion .panel + .panel { margin-top: 0; }
.s3-accordion .panel-heading { padding: 0; background: var(--s3-surface); border: 0; }
.s3-accordion .panel-title { font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); }
/* заголовок — панель, а не выпадающий список: вся строка кликабельна, значок поворачивается по aria-expanded (его ставит collapse Bootstrap) */
.s3-accordion .panel-title > a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3-space-3); padding: var(--s3-accordion-padding-block) var(--s3-accordion-padding-inline); color: var(--s3-text); text-decoration: none; }
.s3-accordion .panel-title > a:hover, .s3-accordion .panel-title > a:focus { background: var(--s3-surface-alt); color: var(--s3-text); text-decoration: none; }
.s3-accordion .panel-title > a .fa { transition: rotate var(--s3-duration-fast); }
.s3-accordion .panel-title > a .fa-caret-down::before { content: "\f105"; }
.s3-accordion .panel-title > a[aria-expanded="true"] .fa { rotate: 90deg; }
.s3-accordion .panel-body { border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle) !important; background: var(--s3-surface); }
.s3-accordion .panel-body label.col-sm-2 { float: none; width: auto; padding: 0 0 var(--s3-space-2); }
.s3-accordion .input-group .form-control, .s3-accordion .input-group-btn .btn { height: var(--s3-size-control-lg); }


/* ---------- оформление заказа ---------- */
.s3-co { display: grid; grid-template-columns: minmax(0, 1fr) var(--s3-layout-summary); gap: var(--s3-checkout-gap); align-items: start; }
.s3-co__main { display: flex; flex-direction: column; gap: var(--s3-space-4); }
.s3-co__step { padding: var(--s3-checkout-step-padding); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-checkout-step-radius); background: var(--s3-surface); }
.s3-co__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3-space-2); margin-bottom: var(--s3-space-4); }
.s3-co__head h2 { display: flex; align-items: center; gap: var(--s3-space-3); margin: 0; font-size: var(--s3-font-size-lg); font-weight: var(--s3-font-weight-bold); }
.s3-co__num { display: grid; place-items: center; width: var(--s3-size-icon-lg); height: var(--s3-size-icon-lg); border-radius: var(--s3-checkout-number-radius); background: var(--s3-primary); color: var(--s3-on-primary); font-size: var(--s3-font-size-sm); }
.s3-co__grid { display: grid; grid-template-columns: repeat(var(--s3-checkout-columns), minmax(0, 1fr)); gap: var(--s3-space-3) var(--s3-space-4); }
.s3-co__wide { grid-column: 1 / -1; }
.s3-co__login { display: grid; grid-template-columns: repeat(var(--s3-checkout-columns), minmax(0, 1fr)); gap: var(--s3-space-3) var(--s3-space-4); margin-bottom: var(--s3-space-4); padding: var(--s3-space-4); border-radius: var(--s3-radius-md); background: var(--s3-surface-alt); }
.s3-co__login-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3-space-4); font-size: var(--s3-font-size-sm); }
.s3-co__register { margin-top: var(--s3-space-4); }
.s3-co__register + .s3-co__grid { margin-top: var(--s3-space-3); }
.s3-co__comment { margin-top: var(--s3-space-4); }
.s3-co__agree { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; font-size: var(--s3-font-size-sm); }
.s3-co__agree .s3-err { grid-column: 2; }
.s3-co__step.has-error { border-color: var(--s3-danger); }

.s3-co__bar { display: none; }

.s3-co__methods { display: flex; flex-direction: column; gap: var(--s3-space-2); }
.s3-co__group { margin: var(--s3-space-2) 0 0; color: var(--s3-text-muted); font-size: var(--s3-font-size-xs); text-transform: uppercase; letter-spacing: var(--s3-font-tracking-wider); }
.s3-method { position: relative; display: flex; align-items: center; gap: var(--s3-space-3); margin: 0; padding: var(--s3-checkout-method-padding-block) var(--s3-checkout-method-padding-inline); border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-checkout-method-radius); font-weight: var(--s3-font-weight-regular); cursor: pointer; transition: border-color var(--s3-duration-fast); }
.s3-method:hover { border-color: var(--s3-text-muted); }
.s3-method:has(input:checked) { border-color: var(--s3-primary); box-shadow: inset 0 0 0 var(--s3-border-width-thin) var(--s3-primary); }
.s3-method__title { flex: 1; }
.s3-method__price { font-weight: var(--s3-font-weight-bold); white-space: nowrap; }

.s3-co__summary { gap: var(--s3-space-3); }
.s3-co__sumhead { display: flex; align-items: baseline; justify-content: space-between; }
.s3-co__items { display: flex; flex-direction: column; gap: var(--s3-space-3); max-height: calc(var(--s3-layout-dropdown) + var(--s3-size-control-xl) + var(--s3-space-5)); overflow: auto; margin: 0; padding: 0 0 var(--s3-space-3); list-style: none; border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-co__items li { display: grid; grid-template-columns: var(--s3-size-thumb-sm) minmax(0, 1fr) auto; gap: var(--s3-space-3); align-items: center; font-size: var(--s3-font-size-sm); }
.s3-co__thumb { position: relative; }
.s3-co__thumb b { position: absolute; top: calc(-1 * var(--s3-space-1)); inset-inline-end: calc(-1 * var(--s3-space-1)); min-width: var(--s3-size-badge); height: var(--s3-size-badge); padding: 0 var(--s3-space-1); border-radius: var(--s3-radius-pill); background: var(--s3-text-muted); color: var(--s3-bg); font-size: var(--s3-font-size-2xs); line-height: var(--s3-size-badge); text-align: center; }
.s3-co__iname small { display: block; color: var(--s3-text-muted); font-size: var(--s3-font-size-xs); }
.s3-co__itotal { font-weight: var(--s3-font-weight-medium); white-space: nowrap; }
.s3-co__pay { padding-top: var(--s3-space-3); border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-co__pay .buttons, .s3-co__pay .pull-right { float: none !important; }
.s3-co__pay .btn { width: 100%; min-height: var(--s3-size-control-xl); }

/* ---------- адаптив: точки — токены breakpoint.*, в @media — именованные условия (--s3-up|down-<шаг>), числа шкалы подставляет тема (tokens.md §3.5) ---------- */
@media (max-width: 991.98px) {
  .s3-cartpage { grid-template-columns: minmax(0, 1fr); }
  .s3-co { grid-template-columns: minmax(0, 1fr); }
  .s3-summary { position: static; }
  /* строка итога: прилипает к низу, пока идут шаги, и встаёт на место перед блоком заказа; поле с фокусом браузер не прячет под ней */
  html:has(#checkout-checkout) { scroll-padding-block-end: calc(var(--s3-size-control-xl) + 2 * var(--s3-checkout-bar-padding-block)); }
  .s3-co__bar { position: sticky; bottom: 0; z-index: var(--s3-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s3-checkout-bar-gap); padding-block: var(--s3-checkout-bar-padding-block); border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle); background: var(--s3-surface); }
  .s3-co__bar-total { display: flex; flex-direction: column; font-size: var(--s3-font-size-xs); color: var(--s3-text-muted); }
  .s3-co__bar-total b { color: var(--s3-text); font-size: var(--s3-font-size-md); }
}
@media (max-width: 600.98px) {
  .s3-line__total { grid-area: total; }
  .s3-co__grid, .s3-co__login { grid-template-columns: minmax(0, 1fr); }
  .s3-co__step { padding: var(--s3-space-4); }
}