/* ==========================================================================
   Meeow Design System v2 «Pro» — additive layer on top of ds-v1.css (v1.1).
   Source: docs/design/mds-v2 (tokens.json, README). Loaded by app-v1.css into
   @layer ds right after ds-v1.css, and by commerce-v2.css. It adds roles and
   commerce components only; no v1 token value changes here.
   ========================================================================== */

:root {
  /* MDS v2 «Pro» — additive roles only (docs/design/mds-v2/tokens.json).
     No v1 value changes; these name the roles the v2 artboards use. */
  --ds-ink-disabled: #8c94a3;
  --ds-line-strong: var(--ds-line-2);
  --ds-surface-inverse: var(--ds-navy-900);
  --ds-on-inverse: #ffffff;
  --ds-elev-overlay: var(--ds-elev-3);
  --ds-elev-dialog: var(--ds-elev-4);
  --ds-text-2xs: 12px;
  --ds-radius-control: var(--ds-radius-md);
  --ds-radius-card: var(--ds-radius-lg);
  --ds-radius-panel: var(--ds-radius-xl);
  --ds-radius-sheet: var(--ds-radius-2xl);
  --ds-container: 1180px;
  --ds-gutter: clamp(16px, 4vw, 32px);
}

:root[data-theme="dark"] {
  --ds-ink-disabled: #6f7b90;
  --ds-surface-inverse: #e8eef8;
  --ds-on-inverse: #0b1422;
}

/* ==========================================================================
   MDS v2 «Pro» — commerce components (docs/design/mds-v2, artboards Cart,
   ProductModal, Orders). Additive: nothing above changes. Tokens only.
   ========================================================================== */
.ds-btn--soft { --btn-bg: var(--ds-action-soft); --btn-ink: var(--ds-action-ink); --btn-line: transparent; --btn-shadow: none; }
.ds-btn--soft:hover { --btn-bg: var(--ds-coral-100); box-shadow: none; }
.ds-btn--block { display: flex; width: 100%; }

.ds-alert { display: flex; gap: var(--ds-space-3); align-items: flex-start; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-info-soft); color: var(--ds-ink-1); font-size: var(--ds-text-sm); line-height: var(--ds-leading-body); overflow-wrap: anywhere; }
.ds-alert--success { background: var(--ds-success-soft); }
.ds-alert--warning { background: var(--ds-warning-soft); }
.ds-alert--danger { background: var(--ds-danger-soft); color: var(--ds-danger); }

.ds-radio-card { display: flex; gap: var(--ds-space-3); align-items: flex-start; padding: var(--ds-space-4); border: 1px solid var(--ds-line-2); border-radius: var(--ds-radius-md); background: var(--ds-surface-1); cursor: pointer; transition: border-color var(--ds-dur-2) var(--ds-ease-out), background-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out); }
.ds-radio-card:hover { border-color: var(--ds-ink-3); }
.ds-radio-card:has(input:checked) { border-color: var(--ds-action); background: var(--ds-action-soft); box-shadow: 0 0 0 1px var(--ds-action) inset; }
.ds-radio-card:has(input:focus-visible) { box-shadow: var(--ds-focus-ring); }
.ds-radio-card input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--ds-action); }

.ds-sum { display: grid; gap: 0; margin: 0; }
.ds-sum > div { display: flex; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-3) 0; border-bottom: 1px solid var(--ds-line); font-size: var(--ds-text-sm); }
.ds-sum > div:last-child { border-bottom: 0; font-weight: var(--ds-weight-bold); font-size: var(--ds-text-lg); }
.ds-sum dt { color: var(--ds-ink-2); }
.ds-sum dd { margin: 0; font-variant-numeric: tabular-nums; }

.ds-steps { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); padding: 0; margin: 0; list-style: none; counter-reset: ds-step; }
.ds-step { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: 32px; padding: 0 var(--ds-space-3) 0 var(--ds-space-1); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); }
.ds-step--current { background: var(--ds-action-soft); color: var(--ds-action-ink); }
.ds-step--done { background: var(--ds-success-soft); color: var(--ds-success); }

.ds-option { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-height: 48px; padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-line-2); border-radius: var(--ds-radius-md); background: var(--ds-surface-1); color: var(--ds-ink-1); font: inherit; cursor: pointer; }
.ds-option[aria-checked="true"] { border-color: var(--ds-action); background: var(--ds-action-soft); box-shadow: 0 0 0 1px var(--ds-action) inset; }

.ds-product { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface-1); box-shadow: var(--ds-elev-1); }
.ds-product__media { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 6%; border-radius: var(--ds-radius-md); background: #fff; }
.ds-product__media img { width: 100%; height: 100%; object-fit: contain; }
.ds-product__cat { color: var(--ds-ink-3); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); }
.ds-product__en { direction: ltr; text-align: end; color: var(--ds-ink-3); font-size: var(--ds-text-2xs); }
.ds-product__perkg { color: var(--ds-ink-3); font-size: var(--ds-text-2xs); font-variant-numeric: tabular-nums; }