/* pages/gift-box — /gifts/box, /en/gifts/box (план DEV0315, задача 2, спека
   §3): 4 шага одной формы (Alpine step), панель бокса — липкая нижняя панель
   шага 2 на < 1024 (DEV0494 §3, правило ДС «итог/кнопка в липкой нижней
   панели»), сбоку на 1024+. Только токены ДС, ни одного цвета/шрифта/радиуса
   литералом. */

.gift-box-page { display: flex; flex-direction: column; gap: var(--space-6); padding-block: 32px 64px; }
.gift-box-page h1 { margin: 0; font-size: 40px; }

.giftbox-step-hidden { display: none; }

/* — прогресс шагов — */
.giftbox-stepper { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.giftbox-stepper__step {
  font-size: 13px; font-weight: 600; color: var(--color-neutral-700);
  padding-bottom: var(--space-1); border-bottom: 2px solid transparent;
}
.giftbox-stepper__step[data-active] { color: var(--color-text); border-bottom-color: var(--color-accent-700); }

.giftbox-alert {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-accent-2-200); color: var(--color-accent-2-800); font-size: 14px;
}

/* — шаг 1: карточки коробок — */
.giftbox-lead { margin: 0; font-size: 15px; color: var(--color-neutral-700); }
.giftbox-boxes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-4); }

.box-choice-card {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider);
  color: inherit; text-decoration: none; min-height: 44px;
}
.box-choice-card:hover { border-color: var(--color-accent-700); }
.box-choice-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.box-choice-card__name { font-family: var(--font-heading); font-size: 20px; }
.box-choice-card__volume { font-size: 13px; color: var(--color-neutral-700); }
.box-choice-card__price { font-size: 16px; font-weight: 700; }

/* — шаг 2: чипы + сетка + панель — */
.giftbox-fill { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-4); }
.giftbox-fill__main { min-width: 0; }

.giftbox-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.giftbox-candidates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

/* карточка товара с кнопкой «+» соседним элементом (план DEV0315: не внутри
   <a>, зона ≥44px). */
.product-card-wrap { position: relative; }
.product-card-add-btn {
  position: absolute; top: var(--space-3); right: var(--space-3);
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border-radius: 999px; border: 0; background: var(--color-surface); color: var(--color-text);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
}
.product-card-add-btn:hover { background: var(--color-accent-2-200); }
.product-card-add-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.product-card-add-btn[disabled] {
  background: var(--color-neutral-200); color: var(--color-neutral-600); cursor: not-allowed; box-shadow: none;
}
.product-card-add-error {
  display: block; margin-top: var(--space-1); font-size: 12px; color: var(--color-accent-2-800);
}
.product-card-add-error:empty { display: none; }

/* блок действия карточки-кандидата (DEV0494 §1-2): объём, причина «не
   влезает», выбор варианта нативным <details> — список раскрывается под
   телом карточки (order), «+» в summary стоит на месте обычного «+». */
.product-card-box { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); padding-inline: var(--space-1); }
.product-card-box__volume { order: 0; font-size: 13px; color: var(--color-neutral-700); }
.product-card-box__reason { order: 1; font-size: 12px; color: var(--color-accent-2-800); }
.product-card-variants { order: 2; }
.product-card-box .product-card-add-error { order: 3; margin-top: 0; }
.product-card-variants > summary { list-style: none; }
.product-card-variants > summary::-webkit-details-marker { display: none; }
.product-card-variants > summary span { transition: transform 0.15s ease; }
.product-card-variants[open] > summary span { transform: rotate(45deg); }
.product-card-variants__list {
  list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1);
}
.product-card-variant {
  width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.product-card-variant:hover { border-color: var(--color-accent-700); }
.product-card-variant:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.product-card-variant[disabled] { background: var(--color-neutral-100); color: var(--color-neutral-700); cursor: not-allowed; }
.product-card-variant[disabled]:hover { border-color: var(--color-divider); }
.product-card-variant__label { font-weight: 600; }
.product-card-variant__meta { color: var(--color-neutral-700); }
.product-card-variant__reason { font-size: 12px; color: var(--color-accent-2-800); }

/* — панель — */
.giftbox-panel {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider);
}
.giftbox-panel:focus { outline: none; }
.giftbox-panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.giftbox-panel__box-title { margin: 0; font-family: var(--font-heading); font-size: 18px; }
.giftbox-panel__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 44px;
  padding: 0; border: 0; background: transparent; color: var(--color-text);
  font-family: var(--font-heading); font-size: 16px; text-align: left; cursor: pointer;
}
.giftbox-panel__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.giftbox-panel__chevron {
  flex: none; width: 10px; height: 10px; margin-inline: var(--space-2);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.giftbox-panel--collapsed .giftbox-panel__chevron { transform: rotate(-135deg); }
.giftbox-panel__body { display: flex; flex-direction: column; gap: var(--space-4); }

.giftbox-panel__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.giftbox-panel__item {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.giftbox-panel__item-title { font-size: 14px; }
.giftbox-panel__item-qty { display: inline-flex; align-items: center; gap: var(--space-2); }
.giftbox-panel__step {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-surface);
  font-size: 16px; cursor: pointer;
}
.giftbox-panel__step[disabled] { background: var(--color-neutral-100); color: var(--color-neutral-600); cursor: not-allowed; }
.giftbox-panel__step:focus-visible, .giftbox-panel__remove:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.giftbox-panel__item-qty-value { min-width: 1.5ch; text-align: center; font-size: 14px; }
.giftbox-panel__item-total { font-size: 14px; font-weight: 600; }
.giftbox-panel__remove {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--color-neutral-700); font-size: 18px; cursor: pointer;
}
.giftbox-panel__remove:hover { color: var(--color-accent-700); }
.giftbox-panel__item--box { grid-template-columns: 1fr auto; min-height: 44px; }
.giftbox-panel__item-error { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--color-accent-2-800); }

.giftbox-panel__hint { margin: 0; font-size: 14px; color: var(--color-neutral-700); }

.giftbox-panel__progress { display: flex; flex-direction: column; gap: var(--space-1); }
.giftbox-panel__progress .progress-bar--over { background: var(--color-accent-2-800); }
.giftbox-panel__progress-label { font-size: 13px; color: var(--color-neutral-700); }
.giftbox-panel__error { margin: 0; font-size: 13px; color: var(--color-accent-2-800); }

.giftbox-panel__total { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 18px; }
.giftbox-panel__next { min-height: 44px; }

/* — шаг 3: упаковка/открытка — */
.giftbox-wrap { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.giftbox-wrap__included { margin: 0; font-size: 14px; font-weight: 600; }
.giftbox-card-count { font-size: 12px; color: var(--color-neutral-700); }

/* — шаг 4: обзор — */
.giftbox-review { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.giftbox-review__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.giftbox-review__items li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.giftbox-review__box-row { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.giftbox-review__wrap, .giftbox-review__card { margin: 0; font-size: 13px; color: var(--color-neutral-700); }
.giftbox-review__total { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 20px; }

/* < 1024 (DEV0494 §3): панель — липкая нижняя панель шага 2, свёрнута до
   переключателя, объёма, итога и «Next»; переключатель раскрывает тело
   (строка коробки, позиции, ошибки) листом не выше 60vh. Sticky внутри
   .giftbox-fill: панель держит своё место в потоке, поэтому в конце сетки
   встаёт под неё и не прячет ни карточки, ни «Back». */
@media (max-width: 1023.98px) {
  .giftbox-fill__panel { position: sticky; bottom: 0; z-index: 10; }

  /* Баннер cookie (components.css: fixed снизу, z-index 100) до согласия
     закрыл бы свёрнутую панель целиком вместе с «Next» — поднимаем его над
     ней, пока виден шаг 2 (как body:has(#buybox) в product.css). 220px —
     свёрнутая панель на 390 (BG, замер DEV0494: 166.5) плюс «Back» под ней:
     в конце сетки sticky-панель стоит в потоке над «Back», а не у края
     экрана, и меньший подъём закрыл бы её переключатель. */
  body:has(:not(.giftbox-step-hidden) > .giftbox-fill .giftbox-fill__panel) .cookie-banner {
    bottom: calc(220px + var(--space-3));
  }
  /* Раскрытый состав — лист до 60vh, его не поднять над баннером: баннер
     закрыл бы переключатель, и свернуть лист было бы нечем. Пока лист открыт,
     баннер прячется; после сворачивания возвращается (согласие не дано —
     ничего не включено). */
  body:has(:not(.giftbox-step-hidden) > .giftbox-fill .giftbox-panel:not(.giftbox-panel--collapsed)) .cookie-banner {
    display: none;
  }
  .giftbox-panel {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-lg);
  }
  .giftbox-panel > .giftbox-panel__toggle,
  .giftbox-panel > .giftbox-panel__body,
  .giftbox-panel > .giftbox-panel__progress { grid-column: 1 / -1; }
  .giftbox-panel__box-title { display: none; }
  .giftbox-panel__body { max-height: 60vh; overflow-y: auto; }
  .giftbox-panel--collapsed .giftbox-panel__body { display: none; }
  .giftbox-panel__total { flex-direction: column; font-size: 20px; line-height: 1.2; }
  .giftbox-panel__total span:first-child { font-family: var(--font-body); font-size: 12px; color: var(--color-neutral-700); }
  .giftbox-panel__next { width: auto; margin-top: 0; padding-inline: var(--space-6); }
}

@media (min-width: 1024px) {
  .giftbox-panel__toggle { display: none; }
  .giftbox-boxes-grid { grid-template-columns: repeat(3, 1fr); }
  .giftbox-candidates-grid { grid-template-columns: repeat(3, 1fr); }
  .giftbox-fill { flex-direction: row; align-items: flex-start; }
  .giftbox-fill__main { flex: 1; }
  .giftbox-fill__panel { flex: 0 0 320px; position: sticky; top: var(--space-6); }
}