/* ==========================================================================
   ЛУЧ ШОП — pages/cart.css
   Page styles for /cart.html: row collapse, checkout reveal panels, promo states,
   success screen. The foundation classes (.steps, .cart-layout, .cart-row, .summary,
   .sum-row, .radio-card, .field, .form-grid) come from main.css and are not redefined.
   ========================================================================== */

/* only vertical padding — the horizontal gutters come from .container */
.cart-page { padding-top: 32px; padding-bottom: 72px; }
.cart-page [data-icon] { display: inline-flex; align-items: center; }

/* Scroll targets sit under the sticky header */
#cart-items, #checkout { scroll-margin-top: 136px; }

/* --------------------------------------------------------------------------
   Steps (buttons that scroll to the cart / the form)
   -------------------------------------------------------------------------- */
.cart-page .steps button.step { cursor: pointer; }
.cart-page .steps button.step:not(.is-active):not(.is-done):hover { color: var(--navy); }
.cart-page .steps button.step:not(.is-active):not(.is-done):hover .step__n { background: var(--line); }
.cart-page .steps .step__n.is-pop { animation: cart-pop 320ms var(--ease); }

/* --------------------------------------------------------------------------
   Cart rows: wrapper that collapses on removal
   -------------------------------------------------------------------------- */
.cart-line { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease); }
.cart-line__inner { min-height: 0; }
.cart-line.is-collapsing { grid-template-rows: 0fr; }
.cart-line.is-collapsing .cart-line__inner { overflow: hidden; }
.cart-row.is-new { animation: fade-up 360ms var(--ease); }
.cart-row__name:hover { color: var(--red); }
.cart-row .qty { justify-self: stretch; }
.cart-row .qty__val { flex-grow: 1; font-variant-numeric: tabular-nums; }
.cart-row .qty__btn:disabled { opacity: .35; }
.cart-row__sum { font-variant-numeric: tabular-nums; }
.cart-row__sum.is-tick, .cart-row .qty__val.is-tick { animation: cart-tick 320ms var(--ease); }

/* List footer: back link (chevron points left) and inline clear confirmation */
.cart-list__back svg { transition: transform var(--t-hover) var(--ease); }
.cart-list__back:hover svg { transform: translateX(-3px); }
.cart-clear { display: flex; align-items: center; min-height: 40px; }
.cart-clear__btn { font-size: 13px; color: var(--soft); transition: color var(--t-hover) var(--ease); }
.cart-clear__btn:hover { color: var(--red); }
.cart-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); animation: cart-fade-in 220ms var(--ease); }

/* --------------------------------------------------------------------------
   Checkout panel and form
   -------------------------------------------------------------------------- */
.cart-checkout { display: flex; flex-direction: column; gap: 24px; padding: 28px 24px 32px; }
.cart-form { display: flex; flex-direction: column; gap: 24px; transition: opacity 200ms var(--ease); }
.cart-form.is-busy { pointer-events: none; opacity: .65; }
.cart-fieldset legend { margin-bottom: 12px; }
.cart-form .field__hint { line-height: 1.5; }
.cart-form .field__hint a { font-weight: 500; }
.cart-form .field.is-invalid .field__error { animation: cart-err-in 220ms var(--ease); }
.cart-form .radio-card input:checked ~ .radio-card__dot { animation: cart-pop 260ms var(--ease); }

/* Height-animated panels under the delivery / payment choices.
   The inner box keeps a 6px clip margin so focus rings are not cut off. */
.cart-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease); }
.cart-reveal.is-open { grid-template-rows: 1fr; }
.cart-reveal__inner { min-height: 0; overflow: hidden; margin: 0 -6px -6px; padding: 0 6px 6px; }
.cart-reveal__body {
  display: flex; flex-direction: column; gap: 12px; padding-top: 16px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.cart-reveal.is-open .cart-reveal__body { opacity: 1; transform: none; transition-delay: 90ms; }
.cart-reveal--instant, .cart-reveal--instant .cart-reveal__body { transition: none !important; }

/* --------------------------------------------------------------------------
   Summary: promo states, animated totals, loading button
   -------------------------------------------------------------------------- */
.cart-promo { display: flex; flex-direction: column; gap: 8px; }
.cart-promo__msg { font-size: 12px; line-height: 1.4; color: var(--muted); animation: cart-fade-in 220ms var(--ease); }
.cart-promo__msg:empty { display: none; }
.cart-promo__msg.is-ok { color: var(--success); }
.cart-promo__msg.is-err { color: var(--red); }
.cart-promo .input.is-shake { animation: cart-shake 380ms var(--ease); border-color: var(--red); }
.cart-promo .input.is-ok { border-color: var(--success); box-shadow: 0 0 0 3px rgba(30, 122, 70, .12); }
.cart-promo__applied {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 8px 8px 12px;
  border-radius: var(--r-6); background: #EAF6EE; border: 1px solid #CBE8D5;
  font-size: 13px; color: var(--ink); animation: fade-up 320ms var(--ease);
}
.cart-promo__applied b { color: var(--navy); }
.cart-promo__check { display: flex; color: var(--success); flex-shrink: 0; }
.cart-promo__remove {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; flex-shrink: 0;
  border-radius: 50%; color: var(--soft);
  transition: color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.cart-promo__remove:hover { color: var(--red); background: var(--white); }
.sum-row [data-sum-total], .sum-row [data-sum-delivery], .sum-row [data-sum-discount] { display: inline-block; }
.sum-row .cart-swap { animation: cart-swap 280ms var(--ease); }
.sum-row [data-sum-total].is-bump { animation: cart-bump 480ms var(--ease); transform-origin: right center; }
.cart-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--white);
  animation: cart-spin 720ms linear infinite;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.cart-empty { display: flex; flex-direction: column; gap: 40px; }

/* --------------------------------------------------------------------------
   Success screen
   -------------------------------------------------------------------------- */
.cart-success {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 760px; margin: 0 auto; padding: 44px 32px 48px; text-align: center;
}
.cart-success__icon {
  display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%;
  background: #EAF6EE; color: var(--success); animation: cart-pop-in 640ms var(--ease) both;
}
.cart-success__num { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--red); }
.cart-success .lead { max-width: 560px; }
.cart-success .lead b { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.cart-success__nowrap { white-space: nowrap; }
.cart-success__card {
  width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 14px; margin-top: 6px; padding: 20px;
  text-align: left; background: var(--ice); border: 1px solid var(--line); border-radius: var(--r-8);
}
.cart-success__items { display: flex; flex-direction: column; gap: 10px; }
.cart-success__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.cart-success__thumb { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-4); background: var(--white); border: 1px solid var(--line); }
.cart-success__item-name { font-weight: 500; color: var(--ink); line-height: 1.3; }
.cart-success__item-name:hover { color: var(--red); }
.cart-success__item-opts { font-size: 12px; color: var(--muted); }
.cart-success__item-sum { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--navy); white-space: nowrap; }
.cart-success__specs { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cart-success__specs > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.45; }
.cart-success__specs dt { color: var(--muted); }
.cart-success__specs dd { margin: 0; color: var(--ink); }
.cart-success__card .sum-row--total span:last-child { font-size: 26px; }
.cart-success__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.cart-success__help { font-size: 13px; color: var(--muted); line-height: 1.6; }
.cart-success__help a { font-weight: 500; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Keyframes (transform / opacity only)
   -------------------------------------------------------------------------- */
@keyframes cart-pop { 0% { transform: scale(.9); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cart-pop-in { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cart-tick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cart-fade-in { from { opacity: 0; } }
@keyframes cart-swap { from { opacity: 0; transform: translateY(4px); } }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cart-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes cart-spin { to { transform: rotate(360deg); } }
@keyframes cart-err-in { from { opacity: 0; transform: translateY(-4px); } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #cart-items, #checkout { scroll-margin-top: 76px; }
  /* second row of the mobile cart line: stepper on the left, line total on the right */
  .cart-row__media { grid-row: 1 / span 2; }
  .cart-row .qty { grid-column: 2; grid-row: 2; justify-self: start; }
  .cart-row__sum { grid-column: 3; grid-row: 2; text-align: right; align-self: center; }
  .cart-row__remove { justify-self: end; }
}
@media (max-width: 640px) {
  .cart-page { padding-top: 20px; padding-bottom: 48px; }
  .cart-success .lead b { white-space: normal; }
  .cart-checkout { padding: 20px 16px 24px; gap: 20px; }
  .cart-form { gap: 20px; }
  .cart-form__choices { grid-template-columns: 1fr; }
  .cart-empty { gap: 28px; }
  .cart-success { padding: 28px 16px 32px; gap: 14px; }
  .cart-success__icon { width: 72px; height: 72px; }
  .cart-success__card { padding: 16px; }
  .cart-success__specs > div { grid-template-columns: 1fr; gap: 2px; }
  .cart-success__actions { flex-direction: column; width: 100%; }
  .cart-success__actions .btn { width: 100%; }
}
@media (max-width: 400px) {
  /* «Корзина / Оформление / Готово» do not fit with the connector lines at 360px: drop the lines, keep one row */
  .cart-page .steps { gap: 12px; }
  .cart-page .steps__line { display: none; }
}