/* ==========================================================================
   Hookah-Baza 2026 — Корзина + модальные окна
   Источник: Figma node 105:201 (полная корзина) и 913:6782 (модальная часть)

   Состояния cart-item:
   • default    — товар в наличии, можно изменить количество
   • out        — нет на складе, счётчик скрыт, бейдж красный
   ========================================================================== */

.cart-page { gap: 32px; }
.cart-page__alert {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--red);
  border-radius: 12px;
  color: var(--red);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* ==========================================================================
   Empty cart state (Figma 379:1553)
   - icon 219×219 (#605e7b)
   - title "Ваша корзина пуста" 36/110% Bold center
   - text 18/150% Medium center
   - container 550×318 centered vertically in available page space
   ========================================================================== */
/* Empty cart: fill space between header and footer, center block vertically */
.page:has(.cart-page[data-empty="true"]) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page:has(.cart-page[data-empty="true"]) > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.cart-page[data-empty="true"] {
  flex: 1 1 auto;
  justify-content: center;
  gap: 0;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 550px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.cart-empty__icon {
  width: 219px;
  height: 219px;
  color: var(--text-muted);  /* #605E7B — drives currentColor in the inline SVG */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-empty__icon svg {
  width: 219px;
  height: 219px;
  display: block;
}
.cart-empty__title {
  margin: 16px 0 0;
  font-family: var(--font-main);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
.cart-empty__text {
  margin: 16px 0 0;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}
.cart-empty__btn {
  margin-top: 24px;
  min-width: 200px;
  padding: 16px 32px;
  border-radius: 12px;
  color: #fff;
}
.cart-empty__btn span {
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
[data-theme="light"] .cart-empty__btn {
  background: linear-gradient(116deg, #F9CADB 18%, #B2ECCC 65%);
  color: var(--text);
}
[data-theme="light"] .cart-empty__btn::before {
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
}

/* When empty cart is shown — hide the title (per Figma: empty state has no H1 visible block, but we keep for a11y) */
.cart-page[data-empty="true"] .cart-title { position: absolute; left: -9999px; }

/* Cart layout: items column (809) + summary (392), gap 24px via space-between */
.cart-layout {
  display: grid;
  grid-template-columns: 809px 392px;
  gap: 24px;
  align-items: start;
}
.cart-layout::after { content: ""; } /* no-op trick; not needed */

.cart-title {
  font-size: 36px; font-weight: 700;
  line-height: var(--lh-1);
  color: var(--text);
  margin: 0;
}

/* Items list */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   Cart item — 148 photo | info | meta
   Layout: padding 24px, gap implicit via flex grow
   ========================================================================== */
.cart-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 8px;
}

/* Photo: 148×182 (16/30 padding inside → image 116×121) */
.cart-item__photo {
  flex: 0 0 148px;
  width: 148px;
  height: 182px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.cart-item__photo img {
  width: 116px;
  height: 121px;
  object-fit: contain;
  transition: transform var(--tr);
}
.cart-item__photo:hover img { transform: scale(1.05); }

/* Info block: 367px wide, vertical: name + meta (price/stock) */
.cart-item__info {
  flex: 0 0 367px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-item__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item__name {
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
  text-decoration: none;
  transition: color var(--tr);
}
.cart-item__name:hover { color: var(--green); }
.cart-item__sku {
  font-size: 14px; font-weight: 400;
  line-height: var(--lh-2);
  color: var(--text);
}
.cart-item__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-item__stock {
  font-size: 14px; font-weight: 400;
  line-height: var(--lh-2);
  color: var(--green);
}
.cart-item__stock--out { color: var(--red); }
.cart-item__price {
  font-size: 22px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
}

/* Meta column (right): trash + qty controls + "left in stock" hint */
.cart-item__controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 134px;
}
.cart-item__remove {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--text);
  opacity: 0.7;
  transition: opacity var(--tr), color var(--tr);
}
.cart-item__remove:hover { opacity: 1; }
.cart-item__remove svg {
  width: 32px;
  height: 32px;
  display: block;
  color: inherit;
}
.cart-item__remove svg path { stroke: currentColor; }
[data-theme="light"] .cart-item__remove { color: var(--text); }

.cart-item__qty-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cart-item__qty-hint {
  font-size: 14px; font-weight: 400;
  line-height: var(--lh-2);
  color: var(--text-muted);
}

/* Quantity stepper: [−] 123 [+] */
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  padding: 0;
}
.cart-qty__btn {
  width: 50px;
  height: 50px;
  background: var(--bg);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 20px;
  color: var(--text);
  transition: background var(--tr), opacity var(--tr);
}
.cart-qty__btn:hover:not(:disabled) { background: var(--stroke); }
.cart-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.cart-qty__value {
  min-width: 24px;
  text-align: center;
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
}

  /* Out-of-stock variant: hide qty controls, dim price area */
.cart-item--out .cart-qty,
.cart-item--out .cart-item__qty-hint { display: none; }
/* Mobile: out-of-stock row2 keeps only the price */
@media (max-width: 767px) {
  .cart-item--out .cart-item__row2 .cart-item__qty-info { display: none; }
}

/* Mobile-only row 2 (price + qty). Hidden on desktop/tablet. */
.cart-item__row2 { display: none; }

/* ==========================================================================
   Summary block — 392px sidebar
   ========================================================================== */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Position managed by JS — see data-cart-sticky.
     По умолчанию ведёт себя как static, чтобы при отсутствии JS остаться в потоке. */
}

.cart-summary__card {
  background: var(--bg-cart-card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
}
.cart-summary__rows {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart-summary__branch {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-summary__branch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.cart-summary__branch-label {
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
}
.cart-summary__branch-value {
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
}
.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-summary__label {
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
}
.cart-summary__value {
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
}

/* "Use points" button — gradient stroke (active=No)
   Кнопка лежит внутри card и отделена от rows/total горизонтальными padding 24px. */
.cart-summary__points-wrap {
  padding: 0 24px;
  margin-bottom: 16px;
}
.cart-summary__points {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  background: var(--bg);
  border-radius: 8px;
  color: var(--text);
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  text-align: center;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}
.cart-summary__points::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: background 0.2s;
}
.cart-summary__points:hover::before {
  background: conic-gradient(from var(--grad-angle),
    #8F1743 0%, #0F9C4D 25%, #8F1743 50%, #0F9C4D 75%, #8F1743 100%);
  animation: flow-along-border var(--spin-duration) linear infinite;
}

/* Total row — bottom stripe with top divider */
.cart-summary__total {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  box-shadow: inset 0 1px 0 0 var(--stroke);
}
.cart-summary__total-label,
.cart-summary__total-value {
  font-size: 20px; font-weight: 500;
  line-height: var(--lh-1);
  color: var(--text);
}

/* "Confirm reserve" button — gradient fill (active=Yes) */
.cart-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(116deg, #4D1C2F 18%, #0A5630 65%);
  color: var(--text);
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background var(--tr);
}
.cart-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: background 0.2s;
}
.cart-submit:hover::before {
  background: conic-gradient(from var(--grad-angle),
    #8F1743 0%, #0F9C4D 25%, #8F1743 50%, #0F9C4D 75%, #8F1743 100%);
  animation: flow-along-border var(--spin-duration) linear infinite;
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal[aria-hidden="false"] { display: flex; }

.modal__dialog {
  width: 100%;
  max-width: 633px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-4);
  padding: 32px 80px 50px 80px;
  position: relative;
  animation: modal-in 200ms ease-out;
}
@keyframes modal-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal__close {
  position: absolute;
  top: 36px;
  right: 36px;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--tr);
}
.modal__close img { width: 28px; height: 28px; display: block; }
.modal__close:hover { opacity: 0.7; }

.modal__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.modal__logo img { display: none; }
[data-theme="light"] .modal__logo .logo-light,
:not([data-theme="light"]) .modal__logo .logo-dark { display: block; }

.modal__title {
  font-size: 36px; font-weight: 700;
  line-height: var(--lh-1);
  color: var(--text);
  text-align: center;
  margin: 0 0 16px;
  padding-right: 32px;
}
.modal__subtitle {
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
  text-align: center;
  margin: 0 0 32px;
}

/* ==========================================================================
   Order success modal (Figma 382:5840 desktop / 920:8394 mobile fullscreen)
   ========================================================================== */
.modal--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 633px;
  padding: 32px 80px 64px;
  border-radius: 24px;
  box-sizing: border-box;
  text-align: center;
}
.modal--success .modal__logo {
  margin-bottom: 0;
}
.modal--success .modal__title,
.modal--success .modal__subtitle {
  margin: 0;
  padding-right: 0;
  width: 100%;
}
.success-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.success-modal__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.modal--success .modal__actions {
  margin: 0;
  width: 100%;
}
.modal--success .modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 16px 24px;
  border-radius: 12px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  line-height: 1.1;
}

/* Form fields */
.modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.modal__label {
  font-size: 14px; font-weight: 400;
  line-height: var(--lh-2);
  color: var(--text-muted);
}
.modal__input {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: var(--text);
  font-size: 16px; font-weight: 500;
  line-height: var(--lh-2);
  font-family: inherit;
  transition: border-color var(--tr);
}
.modal__input:focus {
  outline: none;
  border-color: var(--red);
}
.modal__input::placeholder { color: var(--text-muted); }

.modal__row {
  display: flex;
  gap: 16px;
}
.modal__row > .modal__field { flex: 1; }

/* ==========================================================================
   Bonus modal (Figma 726:8740, 913:6128 success, 913:6209 error)
   809×458, 2 columns (left 448 / right 361), radius 24
   ========================================================================== */
.modal--bonus .modal__dialog {
  max-width: 809px;
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
}
.bonus-modal {
  display: grid;
  grid-template-columns: 448px 1fr;
  min-height: 458px;
}

/* ----- LEFT column ----- */
.bonus-modal__left {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bonus-modal__title {
  padding: 0 20px;
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.bonus-modal__actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  padding: 16px 20px;
}
.bonus-modal__action {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bonus-modal__btn {
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.bonus-modal__btn:disabled,
.bonus-modal__btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.bonus-modal__hint {
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-2);
  color: var(--text);
}
.bonus-modal__hint--disabled { color: var(--text-muted); }
.bonus-modal__error-msg {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-2);
  color: var(--text);
}

/* ----- RIGHT column ----- */
.bonus-modal__right {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bonus-modal__balance {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bonus-modal__balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bonus-modal__balance-label {
  font-size: 18px;
  font-weight: 500;
  line-height: var(--lh-2);
  color: var(--text);
}
.bonus-modal__balance-values {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
}
.bonus-modal__balance-spent {
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-2);
  color: var(--red);
}
.bonus-modal__balance-current {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.bonus-modal__legal {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-2);
  color: var(--text);
}

.bonus-modal__footer {
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bonus-modal__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-top: 1px solid var(--stroke);
}
.bonus-modal__total-label {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.bonus-modal__total-values {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
}
.bonus-modal__total-discount {
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-2);
  color: var(--green);
}
.bonus-modal__total-value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.bonus-modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
}
.bonus-modal__confirm {
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.bonus-modal__cancel {
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--text-muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--tr);
}
.bonus-modal__cancel:hover { border-color: var(--text); }

@media (max-width: 768px) {
  .bonus-modal { grid-template-columns: 1fr; }
  .modal--bonus .modal__dialog { max-width: 100%; }
}

/* Order form (382:5618): gap 16 between fields, gap 32 to consent block */
[data-order-form] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-order-form] .consent {
  margin-top: 16px; /* adds up to 32px gap from previous field */
}
[data-order-form] .btn-grad {
  margin-top: 16px;
  width: 100%;
  background: linear-gradient(98.14deg, #4D1C2F 38.27%, #0A5630 98.78%);
}
[data-order-form] .btn-grad::before {
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
}

/* Modal actions container */
.modal__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.modal__actions--block {
  width: 100%;
}
.modal__actions--block .modal__btn {
  flex: 1;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.modal__btn {
  flex: 1;
  padding: 16px 24px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px; font-weight: 500;
  line-height: var(--lh-1);
  font-family: inherit;
  transition: background var(--tr);
}
.modal__btn--ghost {
  background: var(--bg);
  border: 1px solid var(--stroke);
  color: var(--text);
}
.modal__btn--ghost:hover { border-color: var(--red); }
.modal__btn--primary {
  background: linear-gradient(116deg, #4D1C2F 18%, #0A5630 65%);
  color: var(--text);
  position: relative;
  isolation: isolate;
}
.modal__btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(116deg, #8F1743 38%, #0F9C4D 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Demo helper — floating panel (collapsible + draggable) */
.demo-panel {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font);
  max-width: 280px;
  max-height: calc(100vh - 32px);
  box-sizing: border-box;
}
.demo-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  margin: -4px -2px 0;
  padding: 4px 2px;
  touch-action: none;
  user-select: none;
}
.demo-panel--dragging .demo-panel__head { cursor: grabbing; }
.demo-panel__title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  pointer-events: none;
}
.demo-panel__toggle {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  touch-action: manipulation;
}
.demo-panel__toggle:hover { border-color: var(--red); }
.demo-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}
.demo-panel--collapsed {
  gap: 0;
  max-height: none;
}
.demo-panel--collapsed .demo-panel__body { display: none; }
.demo-panel__btn {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--tr);
  font-family: inherit;
  user-select: none;
}
.demo-panel__btn:hover { border-color: var(--red); }

/* ==========================================================================
   Age 18+ confirmation modal (Figma 372:1255)
   Container 600×506, padding 32 64 64 64, radius 24, bg var(--bg)
   ========================================================================== */
/* Age gate overlay: blur site behind (modal lives inside .page — no filter on .page) */
.modal[data-age-gate] {
  z-index: 1100;
  background: rgba(6, 8, 20, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal--age {
  max-width: 600px;
  background: var(--bg);
  padding: 32px 64px 64px 64px;
  border-radius: 24px;
}

/* No close button in age modal — clear extra right padding from base .modal__title */
.modal--age .modal__title {
  padding-right: 0;
}

/* Two full-width gradient buttons stacked, 334px wide, centered */
.age-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 0;
}

.age-modal__btn {
  width: 334px;
  max-width: 100%;
  height: 52px;
  padding: 16px 24px;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.age-modal__btn::before {
  border-radius: 12px;
}
.age-modal__btn span {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}

/* ==========================================================================
   Logout confirmation modal (Figma 399:4378)
   Container 600×auto, padding 32 64 64 64, no close cross.
   Layout: logo (86×89) → title → subtitle → 2 stacked buttons.
   ========================================================================== */
.modal--logout {
  max-width: 600px;
  padding: 32px 64px 64px 64px;
}

/* Title/subtitle stay centered; subtitle margin controlled by .modal__subtitle (32) */
.modal--logout .modal__logo { margin-bottom: 32px; }
.modal--logout .modal__title { padding-right: 0; margin: 0 0 16px; }
.modal--logout .modal__subtitle { margin: 0 0 32px; }

/* Two stacked buttons 334×52, gap 16, centered */
.logout-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.logout-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 334px;
  height: 52px;
  padding: 16px 24px;
  border-radius: 12px;
  text-align: center;
  box-sizing: border-box;
}
.logout-modal__btn span {
  display: block;
  width: 100%;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  text-align: center;
}

/* ==========================================================================
   Login modal (Figma 380:1831 + 5 states)
   Container max 633×auto
   Welcome + phone states: padding 32 32 64 32 (welcome left=80)
   Code states (4,5,6): padding 16 32 32 32 (smaller top/bottom)
   ========================================================================== */
.modal--login {
  max-width: 633px;
  background: var(--bg);
  padding: 32px 32px 64px 32px;
}

/* Code-entry states: smaller top/bottom padding */
#login-code .modal__dialog,
#login-resend .modal__dialog,
#login-code-error .modal__dialog {
  padding: 16px 32px 32px 32px;
}

/* Welcome variant: extra left padding (Figma 380:1831) */
#login-welcome .modal__dialog {
  padding-left: 80px;
}

/* No extra padding-right for title since close button is on the right */
.modal--login .modal__title {
  padding-right: 0;
}

/* Back arrow (top-left, 49×49 hit area, 32×32 icon) */
.modal__back {
  position: absolute;
  top: 32px;
  left: 32px;
  width: 49px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
  transition: opacity var(--tr);
}
.modal__back img { width: 32px; height: 32px; display: block; }
.modal__back:hover { opacity: 0.7; }

/* Code states: back/close shifted up (padding-top is 16) */
#login-code .modal__back, #login-code .modal__close,
#login-resend .modal__back, #login-resend .modal__close,
#login-code-error .modal__back, #login-code-error .modal__close {
  top: 16px;
}

/* In login modals close button sits at top:32, right:32 (Figma) */
.modal--login .modal__close {
  top: 32px;
  right: 32px;
}

/* Welcome state: no back arrow — shift title/logo left to keep centering */
#login-welcome .modal__back { display: none; }

/* Form: vertical stack with gap 32 (matches Figma Frame 220) */
.login-modal__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Buttons row */
.login-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 16px 24px;
  border-radius: 12px;
  box-sizing: border-box;
}
.login-modal__btn span {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
.login-modal__btn.btn-grad--fill span { color: #fff; }
[data-theme="light"] .login-modal__btn.btn-grad--fill span { color: var(--text); }

/* "Отправить повторно через N секунд" — muted text, center, above the button */
.login-modal__resend {
  margin: 0;
  text-align: center;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Two-button code state: stack resend row + buttons */
.login-modal__actions--code {
  gap: 16px;
}

/* ==========================================================================
   Register modal (Figma 1054:7903, 382:2357)
   Container 633×auto, padding 16 32 32 32 (compact top)
   Form: title (no subtitle) + fields grid + consent + submit
   ========================================================================== */
.modal--register {
  padding: 16px 32px 32px 32px;
}

/* No subtitle in register modal — adjust title margin to match Figma gap=24 */
.modal--register .modal__logo {
  margin-bottom: 24px;
}
.modal--register .modal__title {
  margin: 0 0 24px;
  padding-right: 0;
}

/* Back/close sit at padding-top=16 */
.modal--register .modal__back,
.modal--register .modal__close {
  top: 16px;
}

/* Form: gap 32 between sections (fields block, consent, button) */
.register-modal__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Fields block container — wraps multiple .field rows with gap 16 (Figma Frame 239) */
.register-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Submit button: full width, 52px, padding 16/24 */
.register-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 16px 24px;
  border-radius: 12px;
  box-sizing: border-box;
}
.register-modal__btn span {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}
[data-theme="light"] .register-modal__btn.btn-grad--fill span { color: var(--text); }

/* Disabled variant: solid bg + stroke border, muted text (no gradient) */
.register-modal__btn--disabled {
  background: var(--bg);
  border: 1px solid var(--stroke);
  cursor: not-allowed;
}
.register-modal__btn--disabled::before {
  display: none; /* kill gradient border */
}
.register-modal__btn--disabled span {
  color: var(--text-muted);
}

/* ==========================================================================
   Responsive — strictly by Figma mockups
   Tablet 720×?  (913:6250) — card 640×182, photo 148 | info 287 | ctrls 157
                                   summary stacked below items, 640px wide
   Mobile 360×?  (533:3432) — card 320×187, two rows:
                                   row1: photo 88 + info 170 + trash 22
                                   row2: price + qty stepper (right)
                                   summary: 320px wide, compact
   ========================================================================== */

/* ---------- TABLET (max-width: 1199px) ---------- */
@media (max-width: 1199px) {
  .cart-page { gap: 32px; }

  /* Title: 29px height in mockup → 24px font */
  .cart-title { font-size: 24px; line-height: 1.2; }

  /* Single column; items above, summary below */
  .cart-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
  }

  .cart-items { gap: 12px; }

  /* Cart item: 640×182. Photo 148 (no extra gap) + info+controls row.
     Per Figma item flex inside is photo | (info 287 + spacer | controls 157)
     with internal item padding 0 (info/controls are bare). */
  .cart-item {
    padding: 0;
    gap: 0;
    align-items: stretch;
  }
  /* Keep a 24px breathing gap between photo and the info+controls group */
  .cart-item__photo {
    margin: 0;
    flex: 0 0 148px;
    width: 148px;
    height: auto;       /* follow item height */
    min-height: 182px;
  }
  /* The right side (info + controls) becomes a row that fills the remaining width */
  .cart-item__info {
    flex: 1 1 auto;
    padding: 24px 0 24px 24px;
    gap: 8px;
    justify-content: space-between;
  }
  .cart-item__controls {
    flex: 0 0 157px;
    padding: 24px 24px 24px 0;
    height: auto;
    gap: 16px;
  }

  /* Summary: takes full container width, single column,
     matches Figma Frame 91: rows card → use-points → total → submit */
  .cart-summary { gap: 12px; }

  /* On tablet/mobile summary rows padding tighter */
  .cart-summary__rows { padding: 12px 16px; gap: 12px; }
  .cart-summary__branch { gap: 8px; }
  .cart-summary__branch-label,
  .cart-summary__label { font-size: 14px; }
  .cart-summary__branch-value,
  .cart-summary__value { font-size: 16px; }

  .cart-summary__points-wrap { padding: 0 16px; margin-bottom: 12px; }
  .cart-summary__points { padding: 14px 16px; font-size: 16px; }

  .cart-summary__total { padding: 12px 16px; }
  .cart-summary__total-label,
  .cart-summary__total-value { font-size: 16px; }

  .cart-submit { padding: 14px 16px; font-size: 16px; }
}

/* ---------- MOBILE (max-width: 767px) ---------- */
@media (max-width: 767px) {
  .cart-page { gap: 20px; }
  .cart-title { font-size: 22px; line-height: 1.18; }
  .cart-layout { gap: 20px; }

  .cart-items { gap: 12px; }

  /* Mobile card: 320×187, two rows:
       row1: photo 88 + info 170 + trash 22  (height 113)
       row2: price 64 + qty (right, 127 wide) */
  .cart-item {
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px;
    border-radius: 12px;
  }
  .cart-item__photo {
    flex: 0 0 88px;
    width: 88px;
    height: 113px;
    min-height: 0;
  }
  .cart-item__photo img { width: 64px; height: 67px; }

  .cart-item__info {
    flex: 1 1 calc(100% - 88px - 22px - 24px); /* photo + trash + 2×gap */
    padding: 0;
    gap: 4px;
    justify-content: flex-start;
  }
  .cart-item__name { font-size: 14px; line-height: 1.25; }
  .cart-item__sku { font-size: 12px; line-height: 1.4; }
  .cart-item__stock { font-size: 12px; line-height: 1.4; }

  /* On mobile the price+stock live in .cart-item__row2 — hide desktop meta */
  .cart-item__meta { display: none; }

  /* Trash: small 22px square, sits at the end of row 1 */
  .cart-item__controls {
    flex: 0 0 22px;
    padding: 0;
    height: auto;
    align-self: flex-start;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .cart-item__remove svg { width: 22px; height: 22px; }
  /* qty stays in .cart-item__row2 on mobile — hide its copy in .cart-item__controls */
  .cart-item__controls .cart-item__qty-info { display: none; }

  /* Mobile-only row 2: price + qty (right) */
  .cart-item__row2 {
    display: flex !important;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cart-item__row2 .cart-item__price { font-size: 16px; }
  .cart-item__row2 .cart-item__qty-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .cart-item__row2 .cart-item__qty-hint { font-size: 12px; }

  /* Compact qty stepper on mobile */
  .cart-qty { gap: 12px; border-radius: 6px; }
  .cart-qty__btn { width: 40px; height: 40px; border-radius: 4px; font-size: 18px; }
  .cart-qty__value { font-size: 14px; min-width: 20px; }

  /* Out-of-stock on mobile: hide qty row, keep price */
  .cart-item--out .cart-item__row2 .cart-item__qty-info { display: none; }

  /* Summary on mobile */
  .cart-summary { gap: 12px; }
  .cart-summary__rows { padding: 12px 16px; gap: 12px; }
  .cart-summary__branch-label,
  .cart-summary__label { font-size: 14px; }
  .cart-summary__branch-value,
  .cart-summary__value { font-size: 16px; }
  .cart-summary__points-wrap { padding: 0 16px; margin-bottom: 8px; }
  .cart-summary__points { padding: 12px 16px; font-size: 14px; }
  .cart-summary__total { padding: 12px 16px; }
  .cart-summary__total-label,
  .cart-summary__total-value { font-size: 16px; }
  .cart-submit { padding: 12px 16px; font-size: 14px; border-radius: 10px; }

  /* Empty state compact */
  .cart-empty { width: 100%; margin: 0 auto; gap: 0; }
  .cart-empty__icon { width: 140px; height: 140px; }
  .cart-empty__icon svg { width: 140px; height: 140px; }
  .cart-empty__title { font-size: 24px; }
  .cart-empty__text { font-size: 14px; }
}

/* ==========================================================================
   Modal responsive
   ========================================================================== */
@media (max-width: 1199px) {
  /* Modal: tighter horizontal padding on tablet */
  .modal { padding: 16px; }
  .modal__dialog {
    padding: 32px 48px 40px 48px;
    max-height: calc(100vh - 32px);
  }
  .modal__dialog.modal--success {
    padding: 32px 48px 56px;
    border-radius: 24px;
  }
  .modal__close { top: 24px; right: 24px; }

  /* Bonus modal: 2-col stays on tablet, but slimmer */
  .modal--bonus .modal__dialog {
    max-width: 633px;
  }
  .bonus-modal {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .bonus-modal__title { font-size: 24px; }
  .bonus-modal__actions { padding: 12px 20px; gap: 12px; }
  .bonus-modal__btn { padding: 12px 16px; font-size: 16px; }
  .bonus-modal__balance { padding: 16px; gap: 12px; }
  .bonus-modal__balance-label { font-size: 16px; }
  .bonus-modal__balance-current { font-size: 16px; }
  .bonus-modal__legal { font-size: 12px; line-height: 1.4; }
  .bonus-modal__total { padding: 16px; gap: 12px; }
  .bonus-modal__total-label { font-size: 18px; }
  .bonus-modal__total-value { font-size: 18px; }
  .bonus-modal__buttons { padding: 0 16px 16px; gap: 12px; }
  .bonus-modal__confirm,
  .bonus-modal__cancel { padding: 12px 16px; font-size: 16px; }
}
@media (max-width: 767px) {
  /* Modal: very tight padding on mobile */
  .modal { padding: 8px; }
  .modal__dialog {
    max-width: 100%;
    padding: 28px 16px 32px 16px;
    border-radius: 16px;
    max-height: calc(100vh - 16px);
  }
  .modal__close {
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
  }
  .modal__close img { width: 24px; height: 24px; }
  .modal__logo { margin-bottom: 20px; }
  .modal__logo img { width: 60px; height: 62px; }
  .modal__title {
    font-size: 24px;
    margin-bottom: 12px;
    padding-right: 24px;
  }
  .modal__subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  /* Order success: fullscreen sheet under header (like mobile menu, Figma 920:8394) */
  .modal--order-success {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    inset: var(--header-h) 0 0 0;
    background: var(--bg);
    backdrop-filter: none;
  }
  .modal--order-success .modal__dialog.modal--success {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 20px 16px;
    gap: 36px;
    justify-content: center;
    animation: none;
    background: var(--bg);
  }
  .modal--order-success .modal__logo {
    margin-bottom: 0;
  }
  .modal--order-success .modal__logo img {
    width: 86px;
    height: 89px;
  }
  .modal--order-success .modal__title {
    font-size: 36px;
    margin: 0;
    padding-right: 0;
  }
  .modal--order-success .modal__subtitle {
    font-size: 18px;
    margin: 0;
  }
  .modal--order-success .success-modal__body {
    gap: 48px;
  }
  .modal--order-success .success-modal__text {
    gap: 16px;
  }
  .modal--order-success .modal__btn {
    height: 52px;
    border-radius: 12px;
    font-size: 18px;
  }

  /* Bonus modal: stack columns on mobile */
  .modal--bonus .modal__dialog {
    max-width: 100%;
    padding: 28px 16px 32px 16px;
  }
  .bonus-modal {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .bonus-modal__title { padding: 0; font-size: 22px; }
  .bonus-modal__actions { padding: 16px 0; gap: 12px; }
  .bonus-modal__btn { padding: 14px 16px; font-size: 14px; }
  .bonus-modal__hint { font-size: 12px; }
  .bonus-modal__balance { padding: 16px 0; gap: 12px; }
  .bonus-modal__balance-label { font-size: 16px; }
  .bonus-modal__balance-current { font-size: 16px; }
  .bonus-modal__legal { font-size: 12px; line-height: 1.4; }
  .bonus-modal__total {
    padding: 16px 0;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .bonus-modal__total-label { font-size: 18px; }
  .bonus-modal__total-value { font-size: 18px; }
  .bonus-modal__buttons { padding: 0; gap: 12px; }
  .bonus-modal__confirm,
  .bonus-modal__cancel { padding: 14px 16px; font-size: 14px; }

  /* Age modal: stack buttons vertically on mobile */
  .modal--age .age-modal__actions { flex-direction: column; gap: 12px; }
  .modal--age .age-modal__btn { width: 100%; }

  /* Login/register modal: tighter */
  .modal--login .modal__dialog,
  .modal--register .modal__dialog {
    padding: 24px 16px 28px 16px;
  }
  .modal__back, .modal__close { top: 12px; }
  .modal__back { left: 12px; }
  .modal__back img,
  .modal__back svg { width: 22px; height: 22px; }

  /* Logout modal: tight */
  .modal--logout .modal__dialog { padding: 24px 16px; }
  .logout-modal__actions { gap: 12px; flex-direction: column; }
  .logout-modal__btn { width: 100%; }

  /* Order view modal: stack order items */
  .modal--order .modal__dialog { padding: 24px 16px; }

  /* Order form modal: tighter on mobile */
  [data-order-form] { gap: 12px; }
  [data-order-form] .consent { margin-top: 8px; gap: 8px; }
  [data-order-form] .btn-grad { margin-top: 8px; padding: 14px 16px; }
  [data-order-form] .field { gap: 6px; margin: 0; }
  [data-order-form] .field__label { font-size: 12px; }
  [data-order-form] .input { padding: 12px 14px; font-size: 14px; }
  .checkbox__text { font-size: 12px; line-height: 1.4; }
}

/* ----- Theme switching for modal icons ----- */
/* Logo supports both themes via dual-img pattern */
.modal__logo img.logo-dark { display: block; }
[data-theme="light"] .modal__logo img.logo-dark { display: none; }
[data-theme="light"] .modal__logo img.logo-light { display: block; }
.modal__logo img.logo-light { display: none; }

/* Cross-grey stays grey in both themes (it's intentionally neutral) */
/* trash icon already uses currentColor inline SVG */

/* Login/Register modals in light theme need transparent backdrop to be visible */
[data-theme="light"] .modal {
  background: rgba(0, 0, 0, 0.5);
}