/* Корзина-панель и всплывашка «Товар добавлен в корзину» — вид 1:1 с боевым vitastandart.com
   (панель shadcn Sheet + доработки боевого cart-experience/ozon-pay). Все правила — под .vs-cd / .vs-cd-toast,
   чтобы не задеть остальную тему. Разметку строит assets/cart-drawer.js. */

.vs-cd[hidden], .vs-cd [hidden], .vs-cd-toast[hidden] { display: none !important; }
/* Слои: ниже окна-задания капчи Яндекса (z-index 9999999), иначе задание «я не робот» спряталось бы под панелью */

/* затемнение и сама панель */
.vs-cd-overlay {
  position: fixed; inset: 0; z-index: 9999990; background: rgba(0, 0, 0, .8);
  opacity: 0; transition: opacity .3s ease;
}
.vs-cd.is-open .vs-cd-overlay { opacity: 1; }
.vs-cd-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999991;
  width: 100%; height: 100dvh; max-height: 100dvh; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 24px max(28px, env(safe-area-inset-bottom));
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border-left: 1px solid hsl(var(--border));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  font-family: Inter, system-ui, sans-serif;
  transform: translateX(100%); transition: transform .3s ease-in-out;
}
.vs-cd.is-open .vs-cd-panel { transform: translateX(0); transition-duration: .5s; }
.vs-cd-panel:focus { outline: none; }
@media (min-width: 640px) { .vs-cd-panel { max-width: 32rem; } }

.vs-cd-close {
  position: absolute; right: 16px; top: 16px; padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; opacity: .7; border-radius: 2px; line-height: 0; transition: opacity .15s;
}
.vs-cd-close:hover { opacity: 1; }
.vs-cd-close:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.vs-cd-close svg { width: 16px; height: 16px; }
.vs-cd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.vs-cd-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 18px; line-height: 28px; font-weight: 600; color: hsl(var(--foreground));
}
.vs-cd-title svg { width: 20px; height: 20px; flex: none; }

.vs-cd-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); font-size: 16px; }

/* позиции */
.vs-cd-items {
  display: flex; flex-direction: column; gap: 12px; padding-right: 4px;
  min-height: 78px; max-height: min(30dvh, 260px); overflow-y: auto; overscroll-behavior: contain; flex: none;
}
.vs-cd-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card));
}
.vs-cd-item-info { flex: 1; min-width: 0; }
.vs-cd-item-name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-cd-item-price { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: hsl(var(--primary)); }
.vs-cd-qty { display: flex; align-items: center; gap: 4px; }
.vs-cd-qty span { width: 32px; text-align: center; font-size: 14px; font-weight: 500; }
.vs-cd-ibtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0; border-radius: 10px; cursor: pointer;
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  transition: background-color .15s, color .15s;
}
.vs-cd-ibtn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.vs-cd-ibtn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px hsl(var(--ring)); }
.vs-cd-ibtn svg { width: 12px; height: 12px; }
.vs-cd-ibtn.is-ghost { border-color: transparent; background: transparent; color: hsl(var(--destructive)); }
.vs-cd-ibtn.is-ghost svg { width: 14px; height: 14px; }
.vs-cd-ibtn.is-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.vs-cd-ibtn[disabled] { opacity: .5; pointer-events: none; }

/* промокод, суммы, форма */
.vs-cd-bottom { border-top: 1px solid hsl(var(--border)); padding-top: 16px; margin-top: 16px; display: flex; flex-direction: column; gap: 16px; flex: none; }
.vs-cd-label { display: block; font-size: 14px; line-height: 24px; font-weight: 500; margin: 0 0 8px; }
.vs-cd-row { display: flex; gap: 8px; }
.vs-cd-input, .vs-cd-textarea {
  display: flex; width: 100%; box-sizing: border-box; margin: 0;
  border: 1px solid hsl(var(--input)); border-radius: 12px; background: hsl(var(--background));
  padding: 8px 12px; font-family: inherit; font-size: 16px; color: hsl(var(--foreground));
}
.vs-cd-input { height: 40px; }
.vs-cd-textarea { min-height: 80px; resize: none; font-size: 14px; line-height: 20px; }
.vs-cd-input::placeholder, .vs-cd-textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
.vs-cd-input:focus-visible, .vs-cd-textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px hsl(var(--ring)); }
@media (min-width: 768px) { .vs-cd-input { font-size: 14px; } }
.vs-cd-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  height: 40px; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: inherit; font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s;
}
.vs-cd-btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.vs-cd-btn-outline[disabled] { opacity: .5; pointer-events: none; }
.vs-cd-promo-err { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: hsl(var(--destructive)); }
.vs-cd-promo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px;
  border: 1px solid hsl(var(--primary) / .3); border-radius: 12px; background: hsl(var(--primary) / .05);
}
.vs-cd-promo-code { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.vs-cd-promo-code svg { width: 16px; height: 16px; color: hsl(var(--primary)); }
.vs-cd-promo-code b { font-weight: 600; }
.vs-cd-promo-code i { font-style: normal; color: hsl(var(--muted-foreground)); }
.vs-cd-promo .vs-cd-ibtn { border-color: transparent; background: transparent; }
.vs-cd-promo .vs-cd-ibtn svg { width: 16px; height: 16px; }

.vs-cd-sums { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.vs-cd-sums > div { display: flex; justify-content: space-between; }
.vs-cd-sum { color: hsl(var(--muted-foreground)); }
.vs-cd-disc { color: hsl(var(--primary)); }
.vs-cd-total { padding-top: 4px; font-size: 16px; line-height: 24px; font-weight: 700; }
.vs-cd-total span:last-child { color: hsl(var(--primary)); }

.vs-cd-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.vs-cd-hint {
  margin: 0 0 2px; border-radius: 10px; background: #f2f7ff; color: #31547d;
  padding: 8px 10px; font-size: 12px; line-height: 1.35;
}
.vs-cd-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vs-cd-note {
  display: grid; gap: 3px; margin: 2px 0 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid;
  font-size: 12px; line-height: 1.35;
  /* нейтральная плашка «Отправка со склада производителя…» (зелёная/оранжевая «Ozon Доставка» убрана 26.10) */
  background: hsl(var(--muted) / .6); color: hsl(var(--foreground)); border-color: hsl(var(--border));
}
.vs-cd-note span { color: hsl(var(--muted-foreground)); }

/* блок «Доставка» (assets/cart-delivery.js) */
.vs-cd-dlv { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vs-cd-dlv .vs-cd-label { margin: 0; }
.vs-cd-opts { display: flex; flex-direction: column; gap: 6px; }
.vs-cd-opt {
  position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; row-gap: 1px; align-items: center;
  padding: 10px 12px; border: 1px solid hsl(var(--input)); border-radius: 12px; cursor: pointer; background: hsl(var(--background));
  transition: border-color .15s, background-color .15s;
}
.vs-cd-opt input { grid-row: 1 / span 2; width: 16px; height: 16px; margin: 0; accent-color: hsl(var(--primary)); }
.vs-cd-opt-t { font-size: 14px; line-height: 20px; font-weight: 600; }
.vs-cd-opt-d { grid-column: 2; font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
.vs-cd-opt:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); }
.vs-cd-opt:has(input:focus-visible) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px hsl(var(--ring)); }
.vs-cd-dlv-where { display: flex; flex-direction: column; gap: 8px; }
.vs-cd-sgw { position: relative; }
.vs-cd-sg {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px; overflow: hidden;
  border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--background));
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.vs-cd-sg-item { padding: 9px 12px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.vs-cd-sg-item:hover, .vs-cd-sg-item.is-active { background: hsl(var(--accent)); }
.vs-cd-pvz { display: flex; flex-direction: column; gap: 8px; }
.vs-cd-pvz-choose { display: flex; flex-direction: column; gap: 8px; }
.vs-cd-map { height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
.vs-cd-pvz-list {
  display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid hsl(var(--border)); border-radius: 12px;
}
.vs-cd-pt {
  display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: inherit; font: inherit;
}
.vs-cd-pt:last-child { border-bottom: 0; }
.vs-cd-pt:hover, .vs-cd-pt.is-current { background: hsl(var(--primary) / .06); }
.vs-cd-pt b { font-size: 13px; line-height: 18px; font-weight: 600; }
.vs-cd-pt small { font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
.vs-cd-pt-more { margin: 0; padding: 8px 12px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.vs-cd-pvz-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border: 1px solid hsl(var(--primary) / .3); border-radius: 12px; background: hsl(var(--primary) / .05);
}
.vs-cd-pvz-picked div { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; line-height: 18px; }
.vs-cd-pvz-picked b { font-weight: 600; }
.vs-cd-pvz-picked small { font-size: 12px; color: hsl(var(--muted-foreground)); }
.vs-cd-pvz-picked .vs-cd-btn-outline { height: 32px; padding: 4px 12px; font-size: 13px; }
.vs-cd-dlv-msg { margin: 0; font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
.vs-cd-dlv-msg.is-error { color: hsl(var(--destructive)); }
.vs-cd-dlv-sum { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
.vs-cd-dlv-sum b { color: hsl(var(--foreground)); font-weight: 600; }
.vs-cd-grand { display: flex; justify-content: space-between; padding-top: 0; }
.vs-cd-error {
  margin: 0 0 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; font-size: 13px; line-height: 1.35;
}
.vs-cd-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; padding: 8px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: #005bff; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600;
  box-shadow: 0 10px 26px rgba(0, 91, 255, .24); transition: filter .15s, opacity .15s;
}
.vs-cd-submit:hover { filter: brightness(.94); }
.vs-cd-submit[disabled] { opacity: .6; cursor: default; }
.vs-cd-consent { margin: 0; text-align: center; font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
.vs-cd-consent a { color: inherit; text-decoration: underline; }
.vs-cd-consent a:hover { color: hsl(var(--primary)); }
.vs-cd-consent small { display: block; margin-top: 4px; font-size: 11px; color: #94a3b8; }
.vs-cd-captcha { height: 0; overflow: hidden; }

/* всплывашка «Товар добавлен в корзину» */
.vs-cd-toast {
  position: fixed; top: 20px; right: 20px; z-index: 9999992; box-sizing: border-box;
  width: min(390px, calc(100vw - 32px));
  border: 1px solid rgba(0, 91, 255, .18); border-radius: 18px; background: #fff; color: #14213d;
  box-shadow: 0 22px 70px rgba(15, 31, 61, .24); padding: 16px; font-family: Inter, system-ui, sans-serif;
  opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .18s ease, transform .18s ease;
}
.vs-cd-toast[data-open="true"] { opacity: 1; transform: translateY(0) scale(1); }
.vs-cd-toast__row { display: flex; align-items: flex-start; gap: 12px; }
.vs-cd-toast__icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 50%; background: #e8f7ee; color: #137a3d; font-size: 22px; font-weight: 800;
}
.vs-cd-toast__copy { min-width: 0; flex: 1; }
.vs-cd-toast__title { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 800; }
.vs-cd-toast__product { margin: 4px 0 0; color: #627086; font-size: 13px; line-height: 1.4; }
.vs-cd-toast__actions { display: flex; gap: 8px; margin-top: 13px; }
.vs-cd-toast__actions button {
  min-height: 40px; border-radius: 10px; padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.vs-cd-toast__open { border: 0; background: #005bff; color: #fff; }
.vs-cd-toast__continue { border: 1px solid #d9e2f0; background: #fff; color: #334155; }
@media (min-width: 900px) {
  body.vs-cd-lock .vs-cd-toast { right: calc(min(32rem, 100vw) + 20px); }
}
@media (max-width: 640px) {
  .vs-cd-toast { top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; }
  .vs-cd-items { max-height: min(24dvh, 210px); }
}
body.vs-cd-lock { overflow: hidden; }