/**
 * Versora Commerce V2 — Phase 1 Design System
 * Shared components for Shop / Cart / Checkout. Every visual rule is scoped
 * to .vsr-commerce-v2 and V2 component classes to avoid legacy regressions.
 */

/* ---------- Base contract ---------- */
.vsr-commerce-v2 {
  font-family: var(--vsr-v2-font);
  color: var(--vsr-v2-text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.vsr-commerce-v2 :where(.vsr-v2-shell, .vsr-v2-card, .vsr-v2-panel, .vsr-v2-field, .vsr-v2-btn, .vsr-v2-badge, .vsr-v2-notice) {
  box-sizing: border-box;
}

.vsr-commerce-v2 .vsr-v2-shell {
  width: min(var(--vsr-v2-shell-max), calc(100% - (var(--vsr-v2-shell-gutter) * 2)));
  margin-inline: auto;
}

.vsr-commerce-v2 .vsr-v2-section {
  position: relative;
  padding-block: var(--vsr-v2-section-gap);
}

.vsr-commerce-v2 .vsr-v2-section--light {
  background: var(--vsr-v2-bg-page);
  color: var(--vsr-v2-text-primary);
}

.vsr-commerce-v2 .vsr-v2-section--dark {
  background: var(--vsr-v2-bg-dark);
  color: var(--vsr-v2-text-on-dark);
}

/* ---------- Typography ---------- */
.vsr-commerce-v2 :where(.vsr-v2-title, .vsr-v2-heading, .vsr-v2-subheading) {
  margin: 0;
  color: inherit;
  font-family: var(--vsr-v2-font);
  font-weight: var(--vsr-v2-weight-black);
  line-height: var(--vsr-v2-leading-tight);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.vsr-commerce-v2 .vsr-v2-title { font-size: clamp(2.2rem, 5vw, 5.1rem); }
.vsr-commerce-v2 .vsr-v2-heading { font-size: clamp(1.55rem, 3vw, 2.65rem); }
.vsr-commerce-v2 .vsr-v2-subheading { font-size: clamp(1.05rem, 1.6vw, 1.35rem); }

.vsr-commerce-v2 .vsr-v2-copy {
  margin: 0;
  color: var(--vsr-v2-text-secondary);
  font-size: clamp(.92rem, 1.1vw, 1.04rem);
  line-height: var(--vsr-v2-leading-body);
}

.vsr-commerce-v2 .vsr-v2-section--dark .vsr-v2-copy,
.vsr-commerce-v2 .vsr-v2-card--dark .vsr-v2-copy,
.vsr-commerce-v2 .vsr-v2-panel--dark .vsr-v2-copy {
  color: var(--vsr-v2-text-on-dark-secondary);
}

.vsr-commerce-v2 .vsr-v2-muted { color: var(--vsr-v2-text-muted); }
.vsr-commerce-v2 :where(.vsr-v2-section--dark, .vsr-v2-card--dark, .vsr-v2-panel--dark) .vsr-v2-muted { color: var(--vsr-v2-text-on-dark-muted); }
.vsr-commerce-v2 .vsr-v2-price { color: var(--vsr-v2-text-primary); font-weight: 900; font-variant-numeric: tabular-nums; }
.vsr-commerce-v2 :where(.vsr-v2-card--dark, .vsr-v2-panel--dark) .vsr-v2-price { color: var(--vsr-v2-text-on-dark); }

/* ---------- Eyebrow / badges ---------- */
.vsr-commerce-v2 .vsr-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0;
  color: var(--vsr-v2-accent-text);
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.5;
}
.vsr-commerce-v2 .vsr-v2-eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 2px;
  border-radius: 99px;
  background: var(--vsr-v2-accent);
}
.vsr-commerce-v2 :where(.vsr-v2-section--dark, .vsr-v2-card--dark, .vsr-v2-panel--dark) .vsr-v2-eyebrow { color: #ffd77c; }

.vsr-commerce-v2 .vsr-v2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--vsr-v2-border);
  border-radius: var(--vsr-v2-pill-radius);
  background: var(--vsr-v2-bg-surface-soft);
  color: var(--vsr-v2-text-secondary);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}
.vsr-commerce-v2 .vsr-v2-badge--accent { border-color: rgba(255,177,22,.32); background: #fff7e5; color: #744800; }
.vsr-commerce-v2 .vsr-v2-badge--success { border-color: #abefc6; background: var(--vsr-v2-success-soft); color: #05603a; }
.vsr-commerce-v2 .vsr-v2-badge--danger { border-color: #fecdca; background: var(--vsr-v2-danger-soft); color: #912018; }

/* ---------- Cards / panels ---------- */
.vsr-commerce-v2 .vsr-v2-card,
.vsr-commerce-v2 .vsr-v2-panel {
  position: relative;
  border: 1px solid var(--vsr-v2-border-soft);
  background: var(--vsr-v2-bg-surface);
  color: var(--vsr-v2-text-primary);
}
.vsr-commerce-v2 .vsr-v2-card {
  border-radius: var(--vsr-v2-card-radius);
  box-shadow: var(--vsr-v2-shadow-sm);
}
.vsr-commerce-v2 .vsr-v2-panel {
  border-radius: var(--vsr-v2-radius-xl);
  box-shadow: var(--vsr-v2-shadow-md);
}
.vsr-commerce-v2 .vsr-v2-card--dark,
.vsr-commerce-v2 .vsr-v2-panel--dark {
  border-color: var(--vsr-v2-border-dark);
  background: var(--vsr-v2-bg-elevated);
  color: var(--vsr-v2-text-on-dark);
  box-shadow: var(--vsr-v2-shadow-dark);
}
.vsr-commerce-v2 .vsr-v2-card--interactive {
  transition: transform var(--vsr-v2-duration-base) var(--vsr-v2-ease), border-color var(--vsr-v2-duration-base) var(--vsr-v2-ease), box-shadow var(--vsr-v2-duration-base) var(--vsr-v2-ease);
}
@media (hover:hover) {
  .vsr-commerce-v2 .vsr-v2-card--interactive:hover {
    transform: translateY(-4px);
    border-color: var(--vsr-v2-border-strong);
    box-shadow: var(--vsr-v2-shadow-md);
  }
}

/* ---------- Buttons ---------- */
.vsr-commerce-v2 .vsr-v2-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--vsr-v2-control-height);
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--vsr-v2-control-radius);
  font-family: var(--vsr-v2-font);
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.4;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--vsr-v2-duration-fast) var(--vsr-v2-ease), background-color var(--vsr-v2-duration-fast) var(--vsr-v2-ease), border-color var(--vsr-v2-duration-fast) var(--vsr-v2-ease), color var(--vsr-v2-duration-fast) var(--vsr-v2-ease), box-shadow var(--vsr-v2-duration-fast) var(--vsr-v2-ease);
}
.vsr-commerce-v2 .vsr-v2-btn--primary { background: var(--vsr-v2-accent); color: var(--vsr-v2-accent-ink) !important; box-shadow: 0 12px 28px rgba(255,177,22,.2); }
.vsr-commerce-v2 .vsr-v2-btn--secondary { border-color: var(--vsr-v2-border-strong); background: var(--vsr-v2-bg-surface); color: var(--vsr-v2-text-primary) !important; }
.vsr-commerce-v2 .vsr-v2-btn--dark { border-color: var(--vsr-v2-border-dark); background: var(--vsr-v2-bg-elevated); color: var(--vsr-v2-text-on-dark) !important; }
.vsr-commerce-v2 .vsr-v2-btn--ghost { border-color: transparent; background: transparent; color: var(--vsr-v2-text-primary) !important; }
.vsr-commerce-v2 .vsr-v2-btn--danger { background: var(--vsr-v2-danger); color: #fff !important; }
.vsr-commerce-v2 .vsr-v2-btn--sm { min-height: var(--vsr-v2-control-height-sm); padding: 8px 14px; border-radius: var(--vsr-v2-radius-sm); font-size: .8rem; }
.vsr-commerce-v2 .vsr-v2-btn--block { width: 100%; }
.vsr-commerce-v2 .vsr-v2-btn:hover { transform: translateY(-1px); }
.vsr-commerce-v2 .vsr-v2-btn--primary:hover { background: var(--vsr-v2-accent-hover); color: var(--vsr-v2-accent-ink) !important; }
.vsr-commerce-v2 .vsr-v2-btn--secondary:hover { border-color: #9da9b8; background: var(--vsr-v2-bg-surface-soft); }
.vsr-commerce-v2 .vsr-v2-btn--dark:hover { border-color: var(--vsr-v2-border-dark-strong); background: var(--vsr-v2-bg-elevated-2); }
.vsr-commerce-v2 .vsr-v2-btn:active { transform: translateY(0) scale(.985); }
.vsr-commerce-v2 .vsr-v2-btn:focus-visible { outline: 0; box-shadow: var(--vsr-v2-focus-ring); }
.vsr-commerce-v2 .vsr-v2-btn:disabled,
.vsr-commerce-v2 .vsr-v2-btn[aria-disabled="true"] { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Form controls ---------- */
.vsr-commerce-v2 .vsr-v2-field { display: grid; gap: 8px; }
.vsr-commerce-v2 .vsr-v2-label { color: var(--vsr-v2-text-primary); font-size: .82rem; font-weight: 800; line-height: 1.6; }
.vsr-commerce-v2 .vsr-v2-required { color: var(--vsr-v2-danger); }
.vsr-commerce-v2 :where(.vsr-v2-input, .vsr-v2-select, .vsr-v2-textarea) {
  width: 100%;
  min-height: var(--vsr-v2-control-height);
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--vsr-v2-border-strong);
  border-radius: var(--vsr-v2-control-radius);
  outline: 0;
  background: var(--vsr-v2-bg-surface);
  color: var(--vsr-v2-text-primary);
  font-family: var(--vsr-v2-font);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(10,17,27,.02);
  transition: border-color var(--vsr-v2-duration-fast) var(--vsr-v2-ease), box-shadow var(--vsr-v2-duration-fast) var(--vsr-v2-ease), background-color var(--vsr-v2-duration-fast) var(--vsr-v2-ease);
}
.vsr-commerce-v2 .vsr-v2-textarea { min-height: 118px; resize: vertical; }
.vsr-commerce-v2 :where(.vsr-v2-input, .vsr-v2-textarea)::placeholder { color: #7b8796; opacity: 1; }
.vsr-commerce-v2 :where(.vsr-v2-input, .vsr-v2-select, .vsr-v2-textarea):hover { border-color: #9eabb9; }
.vsr-commerce-v2 :where(.vsr-v2-input, .vsr-v2-select, .vsr-v2-textarea):focus { border-color: var(--vsr-v2-focus); box-shadow: var(--vsr-v2-focus-ring); }
.vsr-commerce-v2 .vsr-v2-field.is-error :where(.vsr-v2-input, .vsr-v2-select, .vsr-v2-textarea) { border-color: var(--vsr-v2-danger); box-shadow: 0 0 0 4px rgba(180,35,24,.11); }
.vsr-commerce-v2 .vsr-v2-help { margin: 0; color: var(--vsr-v2-text-muted); font-size: .73rem; line-height: 1.75; }
.vsr-commerce-v2 .vsr-v2-field.is-error .vsr-v2-help { color: var(--vsr-v2-danger); }

/* ---------- Notices ---------- */
.vsr-commerce-v2 .vsr-v2-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--vsr-v2-border);
  border-radius: var(--vsr-v2-radius-md);
  background: var(--vsr-v2-bg-surface-soft);
  color: var(--vsr-v2-text-primary);
  font-size: .82rem;
  line-height: 1.85;
}
.vsr-commerce-v2 .vsr-v2-notice--success { border-color: #abefc6; background: var(--vsr-v2-success-soft); color: #05603a; }
.vsr-commerce-v2 .vsr-v2-notice--danger { border-color: #fecdca; background: var(--vsr-v2-danger-soft); color: #912018; }
.vsr-commerce-v2 .vsr-v2-notice--warning { border-color: #f5d36d; background: var(--vsr-v2-warning-soft); color: #6b4900; }
.vsr-commerce-v2 .vsr-v2-notice--info { border-color: #b2ccff; background: var(--vsr-v2-info-soft); color: #1849a9; }

/* ---------- Divider / skeleton / status ---------- */
.vsr-commerce-v2 .vsr-v2-divider { height: 1px; margin: 0; border: 0; background: var(--vsr-v2-border-soft); }
.vsr-commerce-v2 .vsr-v2-card--dark .vsr-v2-divider,
.vsr-commerce-v2 .vsr-v2-panel--dark .vsr-v2-divider { background: var(--vsr-v2-border-dark); }

.vsr-commerce-v2 .vsr-v2-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--vsr-v2-radius-sm);
  background: #e7ebf0;
  color: transparent !important;
}
.vsr-commerce-v2 .vsr-v2-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(110%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  animation: vsr-v2-shimmer 1.3s infinite;
}
@keyframes vsr-v2-shimmer { to { transform: translateX(-110%); } }

.vsr-commerce-v2 .vsr-v2-spinner {
  display: inline-block;
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: 50%;
  animation: vsr-v2-spin .65s linear infinite;
}
@keyframes vsr-v2-spin { to { transform: rotate(360deg); } }

/* ---------- Focus / selection / bidi hygiene ---------- */
.vsr-commerce-v2 :where(a, button, input, select, textarea):focus-visible { outline-offset: 2px; }
.vsr-commerce-v2 ::selection { background: rgba(255,177,22,.32); color: var(--vsr-v2-text-primary); }
.vsr-commerce-v2 :where(.price, .amount, .vsr-v2-price, input[type="number"]) { font-variant-numeric: tabular-nums; }

/* ---------- Responsive contract ---------- */
@media (max-width: 767px) {
  .vsr-commerce-v2 {
    --vsr-v2-shell-gutter: 16px;
    --vsr-v2-section-gap: 48px;
    --vsr-v2-card-radius: 18px;
    --vsr-v2-control-radius: 13px;
    --vsr-v2-control-height: 50px;
  }
  .vsr-commerce-v2 .vsr-v2-title { font-size: clamp(2rem, 11vw, 3.25rem); }
  .vsr-commerce-v2 .vsr-v2-heading { font-size: clamp(1.45rem, 7vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .vsr-commerce-v2 *,
  .vsr-commerce-v2 *::before,
  .vsr-commerce-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}