/* Панель корзины (js/cart-panel.js): стеклянная карточка справа, в том же языке, что панель
   фильтров галереи — serif для заголовков, Questrial для остального, акцент сайта на кнопках
   и выбранных вариантах. Две темы: цвета задают переменные ниже. */

:root {
  --cp-bg: rgba(246, 240, 226, 0.88);
  --cp-line: rgba(36, 36, 36, 0.14);
  --cp-field: rgba(36, 36, 36, 0.05);
  --cp-muted: rgba(36, 36, 36, 0.56);
  --cp-dim: rgba(30, 20, 8, 0.38);
}
[data-theme="dark"] {
  --cp-bg: rgba(9, 13, 15, 0.84);
  --cp-line: rgba(255, 255, 255, 0.13);
  --cp-field: rgba(255, 255, 255, 0.05);
  --cp-muted: rgba(255, 255, 255, 0.56);
  --cp-dim: rgba(0, 0, 0, 0.55);
}

html.cart-open { overflow: hidden; }

.cart-panel {
  position: fixed;
  inset: 0;
  z-index: 9400;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.5s;
}
.cart-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.cp__backdrop {
  position: absolute;
  inset: 0;
  background: var(--cp-dim);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.cart-panel.is-open .cp__backdrop { opacity: 1; }

.cp {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(460px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: 32px;
  background: var(--cp-bg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  color: var(--color-text);
  font-family: "Questrial", sans-serif;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-panel.is-open .cp { opacity: 1; transform: none; }

/* ---------- верх ---------- */
.cp__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 28px 14px;
}
.cp__title {
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
}
.cp__sub {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.cp__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cp-line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: var(--cursor-pointer, pointer);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.cp__close:hover { border-color: var(--color-accent); color: var(--color-accent); transform: rotate(90deg); }

/* ---------- шаги ---------- */
.cp__steps {
  list-style: none;
  display: flex;
  gap: 18px;
  padding: 0 28px 16px;
  border-bottom: 1px solid var(--cp-line);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.cp__steps li { display: flex; align-items: center; gap: 7px; transition: color 0.3s ease; }
.cp__steps i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cp__steps .is-current { color: var(--color-text); }
.cp__steps .is-current i { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.cp__steps .is-past { color: var(--color-accent); }

/* ---------- виды ---------- */
.cp__views { position: relative; flex: 1; min-height: 0; }
.cp__view,
.cp__form {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.cp__view {
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s;
}
.cp__view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.cp__view[data-view="cart"] { transform: translateX(-24px); }
.cp__view[data-view="cart"].is-active { transform: none; }

.cp__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 28px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--cp-line) transparent;
}

/* ---------- список работ ---------- */
.cp__list { list-style: none; }
.cp__item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--cp-line);
  overflow: hidden;
}
.cp__list.is-enter .cp__item {
  animation: cp-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.06s);
}
@keyframes cp-in { from { opacity: 0; transform: translateY(14px); } }

.cp__thumb {
  width: 76px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cp-field);
  box-shadow: 0 6px 16px rgba(30, 16, 4, 0.22);
}
.cp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp__item-title {
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.12;
}
.cp__item-title em { font-style: italic; color: var(--color-accent); }
.cp__item-meta { margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--cp-muted); }
.cp__price { font-size: 14px; letter-spacing: 0.3px; white-space: nowrap; padding-top: 3px; }
.cp__remove {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cp-muted);
  font: inherit;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: var(--cursor-pointer, pointer);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cp__remove:hover { color: var(--color-accent); border-color: currentColor; }

.cp__empty { display: none; padding: 54px 6px 0; text-align: center; }
.cart-panel.is-empty .cp__empty { display: block; }
.cp__empty[hidden] { display: none !important; }
.cp__empty-title {
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-size: 28px;
}
.cp__empty-text { margin: 12px auto 22px; max-width: 280px; font-size: 14px; line-height: 1.55; color: var(--cp-muted); }
.cp__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.cp__link svg { transition: transform 0.35s ease; }
.cp__link:hover svg { transform: translateX(5px); }

/* ---------- низ: итоги и кнопки ---------- */
.cp__foot {
  flex: none;
  padding: 18px 28px 26px;
  border-top: 1px solid var(--cp-line);
}
.cart-panel.is-empty .cp__view[data-view="cart"] .cp__foot { display: none; }
.cp__note { margin-bottom: 14px; font-size: 12px; line-height: 1.5; color: var(--cp-muted); }
.cp__note--pay { margin: 16px 0 0; }

.cp__totals { margin-bottom: 16px; }
.cp__totals div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cp__totals dt { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cp-muted); }
.cp__totals dd {
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-size: 28px;
}
.cp__totals .cp__totals-uzs { margin-top: 4px; }
.cp__totals .cp__totals-uzs dd { font-family: "Questrial", sans-serif; font-size: 13px; color: var(--cp-muted); }

/* широкая капсула как кнопки шапки (волна и обводка — из style.css) */
.cp-cta {
  width: 100%;
  height: 48px;
  justify-content: center;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: var(--cursor-pointer, pointer);
}
.cp-cta:hover .navbar__btn-ring-track { stroke: var(--ring-track-hover); }
.cp-cta:hover .navbar__btn-ring-progress { stroke-dashoffset: 0; }
.cp-cta.is-filling { color: #fff; }
.cp-cta:disabled { cursor: var(--cursor-not-allowed, not-allowed); }
.cp-cta.is-busy .navbar__btn-text { animation: cp-pulse 1s ease-in-out infinite; }
@keyframes cp-pulse { 50% { opacity: 0.45; } }

.cp__back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cp-muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: var(--cursor-pointer, pointer);
  transition: color 0.25s ease;
}
.cp__back:hover { color: var(--color-accent); }
.cp__back-ico { transform: rotate(180deg); }

/* ---------- оформление ---------- */
.cp__h {
  margin: 20px 0 12px;
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 22px;
}
.cp__h:first-child { margin-top: 10px; }
.cp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp__field { display: block; }
.cp__field--wide { grid-column: 1 / -1; }
.cp__field span {
  display: block;
  margin: 0 0 6px 4px;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.cp__field input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: var(--cp-field);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.cp__field input::placeholder { color: var(--cp-muted); opacity: 0.7; }
.cp__field input:focus { border-color: var(--color-accent); }
.cp__field.is-bad input { border-color: #d6502f; }
.cp__field.is-bad span { color: #d6502f; }
/* короткая подсказка под неверно заполненным полем (текст в data-err ставит js/cart-panel.js) */
.cp__field.is-bad::after { content: attr(data-err); display: block; margin: 6px 0 0 16px; color: #d6502f; font-size: 12px; line-height: 1.3; }

/* способ оплаты: три плитки */
.cp__pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cp__prov { display: block; cursor: var(--cursor-pointer, pointer); }
.cp__prov input { position: absolute; opacity: 0; pointer-events: none; }
.cp__prov-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 76px;
  border: 1px solid var(--cp-line);
  border-radius: 20px;
  background: var(--cp-field);
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cp__prov:hover .cp__prov-card { transform: translateY(-2px); }
.cp__prov input:checked + .cp__prov-card {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.cp__prov input:focus-visible + .cp__prov-card { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cp__prov-name { font-size: 17px; letter-spacing: 0.4px; font-weight: 400; }
.cp__prov small { font-size: 10px; line-height: 1.2; color: var(--cp-muted); padding: 0 6px; }

/* ---------- готово ---------- */
.cp__done { text-align: center; padding-top: 40px; }
.cp__done-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
}
.cp__view.is-active .cp__done-mark { animation: cp-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards; }
@keyframes cp-pop { from { transform: scale(0.4); opacity: 0; } }
.cp__done-title {
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 32px;
}
.cp__done-ref { margin-top: 8px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-accent); }
.cp__done-text { margin: 18px auto 24px; max-width: 330px; font-size: 14px; line-height: 1.6; color: var(--cp-muted); }
.cp__done-list { list-style: none; text-align: left; border-top: 1px solid var(--cp-line); }
.cp__done-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cp-line);
  font-size: 14px;
}
.cp__done-list li span em { font-style: italic; }
.cp__done-list b { font-weight: 400; white-space: nowrap; }
.cp__done-total { font-size: 15px; }

@media (max-width: 520px) {
  .cp { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); border-radius: 26px; }
  .cp__top, .cp__steps, .cp__scroll, .cp__foot { padding-left: 20px; padding-right: 20px; }
  .cp__pay { grid-template-columns: 1fr; }
  .cp__prov-card { height: 58px; flex-direction: row; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp, .cp__view, .cp__backdrop { transition-duration: 0.01s; }
  .cp__list.is-enter .cp__item, .cp__done-mark { animation: none !important; }
}

html.cart-open .plan-btn { opacity: 0; pointer-events: none; }

.cp__thumb { display: block; }
.cp__item-title a { color: inherit; text-decoration: none; }
.cp__item-title a:hover { color: var(--color-accent); }

/* ---------- оплата: сумы, выбор карты Octobank, результат ---------- */
.cp__price { text-align: right; }
.cp__price small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.2px; color: var(--cp-muted); }

.cp__prov.is-off { cursor: var(--cursor-not-allowed, not-allowed); }
.cp__prov.is-off .cp__prov-card { opacity: 0.45; }
.cp__prov.is-off:hover .cp__prov-card { transform: none; }

/* у Octobank карта выбирается заранее */
.cp__methods { display: flex; gap: 8px; margin-top: 10px; animation: cp-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.cp__methods[hidden] { display: none; }
.cp__method { flex: 1; cursor: var(--cursor-pointer, pointer); }
.cp__method input { position: absolute; opacity: 0; pointer-events: none; }
.cp__method span {
  display: block;
  padding: 11px 8px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: var(--cp-field);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.3px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.cp__method input:checked + span {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.cp__method input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.cp__error { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #d6502f; }
.cp__error[hidden] { display: none; }

/* результат: успех / ожидание / ошибка */
.cp__done-mark.is-wait { background: transparent; box-shadow: inset 0 0 0 1px var(--cp-line); color: var(--color-accent); }
.cp__done-mark.is-fail { background: #d6502f; }
.cp__spin { animation: cp-spin 1.1s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.cp__retry { margin-bottom: 10px; }
.cp__retry[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cp__spin { animation-duration: 3s; } }


/* =====================================================================================
   Доводка внешнего вида: структура и разметка прежние, меняются только оформление, ритм,
   детали и появление. Всё на тех же переменных, поэтому обе темы работают.
   ===================================================================================== */

.cart-panel {
  --cp-lattice: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%23a98a5a' stroke-width='1'><path d='M24 2 34 14 46 24 34 34 24 46 14 34 2 24 14 14Z'/><path d='M24 12 29 19 36 24 29 29 24 36 19 29 12 24 19 19Z'/></svg>");
  --cp-glow: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --cp-card: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16));
  --cp-edge: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .cart-panel {
  --cp-card: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --cp-edge: rgba(255, 255, 255, 0.1);
}

.cp__backdrop { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* сама панель: двойная кромка, глубокая тень, едва заметный орнамент */
.cp {
  width: min(500px, calc(100vw - 32px));
  border-radius: 30px;
  border-color: var(--cp-edge);
  box-shadow:
    0 44px 110px rgba(30, 18, 4, 0.4),
    0 6px 20px rgba(30, 18, 4, 0.18),
    inset 0 1px 0 var(--cp-edge),
    inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.cp::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--cp-lattice) 0 0 / 48px 48px;
  opacity: 0.075;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 100% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 55% at 100% 0%, #000, transparent 72%);
}
.cp > * { position: relative; }

/* шапка: заголовок крупнее, подпись разрежена */
.cp__top { padding: 32px 32px 16px; }
.cp__title { font-size: 42px; letter-spacing: -0.012em; }
.cp__sub { margin-top: 10px; letter-spacing: 2.6px; font-size: 11px; }
.cp__close {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* шаги: кружки со свечением у текущего, линии между ними, внизу линия с ромбом */
.cp__steps { position: relative; gap: 0; padding: 0 32px 20px; border-bottom: 0; }
.cp__steps li { transition: color 0.4s ease; }
.cp__steps li + li::before {
  content: "";
  width: 30px;
  height: 1px;
  margin: 0 12px 0 14px;
  background: var(--cp-line);
  transition: background 0.5s ease;
}
.cp__steps li.is-current::before, .cp__steps li.is-past::before { background: var(--color-accent); }
.cp__steps i { width: 24px; height: 24px; font-size: 11px; }
.cp__steps .is-current i { box-shadow: 0 0 0 5px var(--cp-glow); }
.cp__steps .is-past i { background: transparent; border-color: var(--color-accent); color: var(--color-accent); font-size: 0; }
.cp__steps .is-past i::after { content: "✓"; font-size: 12px; }
.cp__steps::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 45%, transparent) 14%, color-mix(in srgb, var(--color-accent) 45%, transparent) 86%, transparent);
}
.cp__steps::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: var(--cp-bg);
  transform: rotate(45deg);
}

.cp__scroll { padding: 14px 32px 22px; scrollbar-color: var(--color-accent) transparent; }
.cp__scroll::-webkit-scrollbar { width: 8px; }
.cp__scroll::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* список: каждая работа — отдельная карточка */
.cp__list { display: grid; gap: 12px; }
.cp__item {
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--cp-line);
  border-radius: 18px;
  background: var(--cp-card);
  transition: border-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.cp__item:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(30, 18, 4, 0.16);
}
.cp__thumb {
  width: 84px;
  height: 106px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(30, 16, 4, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cp__thumb img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.cp__item:hover .cp__thumb img { transform: scale(1.06); }
.cp__item-title { font-size: 24px; line-height: 1.08; }
.cp__item-meta { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.cp__price { align-self: start; padding-top: 4px; font-size: 17px; letter-spacing: 0.2px; text-align: right; font-variant-numeric: tabular-nums; }
.cp__price small { display: block; margin-top: 5px; font-size: 11px; color: var(--cp-muted); }
.cp__remove { margin-top: 12px; letter-spacing: 1.8px; }

/* пустая корзина */
.cp__empty-title { font-size: 32px; font-style: italic; }
.cp__empty-text { font-size: 14.5px; line-height: 1.65; }

/* низ: итог и кнопки */
.cp__foot {
  padding: 18px 32px 28px;
  border-top: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cp-field) 70%, transparent));
}
.cp__foot::before {
  content: "";
  display: block;
  height: 1px;
  margin: -18px 0 18px;
  background: linear-gradient(90deg, transparent, var(--cp-line) 10%, var(--cp-line) 90%, transparent);
}
.cp__note { font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif; font-size: 14px; line-height: 1.55; }
.cp__totals dd { font-size: 36px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cp__totals dt { letter-spacing: 2.4px; font-size: 11px; }
.cp__totals .cp__totals-uzs dd { font-size: 13px; letter-spacing: 0.2px; }
.cp-cta { box-shadow: 0 12px 30px var(--cp-glow); transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.cp-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 42px color-mix(in srgb, var(--color-accent) 36%, transparent); }
.cp-cta:active { transform: scale(0.985); }
.cp-cta:disabled { box-shadow: none; transform: none; }
.cp__back { letter-spacing: 1.8px; font-size: 11px; }

/* оформление: поля с мягким свечением при фокусе */
.cp__h { margin: 22px 0 12px; font-size: 24px; }
.cp__field span { margin-left: 6px; letter-spacing: 1.6px; }
.cp__field input { height: 48px; padding: 0 20px; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.cp__field input:focus { background: color-mix(in srgb, var(--cp-field) 60%, transparent); box-shadow: 0 0 0 4px var(--cp-glow); }

/* способы оплаты: плитки с отметкой выбора */
.cp__pay { gap: 12px; }
.cp__prov-card {
  position: relative;
  height: 92px;
  gap: 8px;
  border-radius: 20px;
  background: var(--cp-card);
  transition: border-color 0.35s ease, background 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.cp__prov-card::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--cp-muted);
  border-radius: 50%;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.cp__prov-name { font-size: 19px; }
.cp__prov input:checked + .cp__prov-card {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  box-shadow: 0 10px 28px var(--cp-glow);
}
.cp__prov input:checked + .cp__prov-card::after {
  border-color: var(--color-accent);
  background: radial-gradient(circle, #fff 0 2.5px, var(--color-accent) 3.5px);
  box-shadow: 0 0 10px var(--cp-glow);
}
.cp__prov:hover .cp__prov-card { transform: translateY(-3px); }
.cp__method span { padding: 12px 8px; }

/* финал: значок с расходящимися кольцами, крупный заголовок */
.cp__done { padding-top: 34px; }
.cp__done-mark { position: relative; width: 84px; height: 84px; background: var(--color-accent); box-shadow: 0 14px 34px var(--cp-glow); }
.cp__done-mark.is-ok::before, .cp__done-mark.is-ok::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--color-accent); border-radius: 50%; opacity: 0; animation: cp-ring 2.6s ease-out 0.9s 2; }
.cp__done-mark.is-ok::after { animation-delay: 1.5s; }
@keyframes cp-ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.cp__done-title { font-size: 38px; letter-spacing: -0.01em; }
.cp__done-ref { letter-spacing: 2.2px; }
.cp__done-text { font-size: 14.5px; line-height: 1.7; }
.cp__done-list li { font-size: 15px; }
.cp__done-list li span { font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif; font-style: italic; font-size: 18px; }

/* появление: шапка, шаги и низ выплывают друг за другом */
.cart-panel.is-open .cp__top { animation: cp-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards; }
.cart-panel.is-open .cp__steps { animation: cp-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards; }
.cart-panel.is-open .cp__foot { animation: cp-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.34s backwards; }

@media (max-width: 520px) {
  .cp__top, .cp__steps, .cp__scroll, .cp__foot { padding-left: 20px; padding-right: 20px; }
  .cp__steps::after { left: 20px; right: 20px; }
  .cp__item { grid-template-columns: 68px 1fr auto; gap: 12px; }
  .cp__thumb { width: 68px; height: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp__done-mark.is-ok::before, .cp__done-mark.is-ok::after { animation: none; }
}


/* фон панели — то же фото, что на главной (светлое / тёмное по теме), под вуалью */
.cart-panel { --cp-tint: rgba(250, 245, 233, 0.36); }
[data-theme="dark"] .cart-panel { --cp-tint: rgba(5, 9, 12, 0.26); }
.cp { background: linear-gradient(var(--cp-tint), var(--cp-tint)), var(--hero-bg) 62% center / cover no-repeat; }


/* ---------- доставка на оформлении ---------- */
.cp__dm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp__dm .cp__prov-card { height: auto; min-height: 88px; padding: 14px 10px 12px; }
.cp__dprice { font-style: normal; font-size: 12px; letter-spacing: 0.3px; color: var(--color-accent); }
.cp__dnote, .cp__qnote { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--cp-muted); }
.cp__qnote { padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, transparent); border-radius: 14px; color: var(--color-text); }
.cp__addr[hidden], .cp__paysec[hidden], .cp__qnote[hidden] { display: none; }
@media (max-width: 520px) { .cp__dm { grid-template-columns: 1fr; } }

/* ссылка на страницу заказа под итогом */
.cp__done-track { display: inline-block; margin-top: 22px; font-size: 15px; letter-spacing: 0.04em; color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.cp__done-track[hidden] { display: none; }