/* ==========================================================================
   Meeow commerce pages (/checkout/, /orders/) on MDS v2 «Pro».
   Same tokens and components as the app shell, so the purchase path looks
   like the rest of the site in light and dark. Markup comes from
   commerce-v1.js and is unchanged; only its classes are styled here.
   Design: docs/design/mds-v2 (artboards Cart, Orders, M-Checkout).
   ========================================================================== */
@layer ds, components, commerce;
@import url("/ds-v1.css?v=2026102949") layer(ds);
@import url("/ds-v2.css?v=2026102949") layer(ds);
@import url("/ds-components-v1.css?v=2026102949") layer(components);

@font-face { font-family: Vazirmatn; src: url('/assets/fonts/Vazirmatn-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Estedad; src: url('/assets/fonts/Estedad-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

@layer commerce {
  :root { font-family: var(--ds-font-sans); color: var(--ds-ink-1); background: var(--ds-bg); font-synthesis: none; line-height: var(--ds-leading-body); }
  * { box-sizing: border-box; }
  body { margin: 0; min-height: 100vh; background: var(--ds-bg-tint), var(--ds-bg); background-attachment: fixed; }
  a { color: var(--ds-action-ink); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: .24em; }
  button, input, textarea, select { font: inherit; }
  button, a, input, textarea { touch-action: manipulation; }
  :focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

  /* buttons — primary = coral action, secondary = tonal (ds-btn) */
  button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
    min-height: 48px; max-width: 100%; padding: 10px var(--ds-space-5);
    border: 1px solid transparent; border-radius: var(--ds-radius-control);
    background: var(--ds-action); color: var(--ds-on-action);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 22px -8px rgba(210, 64, 47, .48);
    font-weight: var(--ds-weight-bold); line-height: 1.6; text-decoration: none; white-space: normal; cursor: pointer;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out);
  }
  button:hover, .button:hover { background: var(--ds-action-hover); text-decoration: none; }
  button:active, .button:active { transform: scale(.98); }
  button.secondary, .button.secondary { background: var(--ds-surface-2); color: var(--ds-ink-1); box-shadow: none; }
  button.secondary:hover, .button.secondary:hover { background: var(--ds-surface-3); }
  button:disabled { opacity: .55; cursor: wait; transform: none; }
  button:focus-visible, .button:focus-visible { box-shadow: var(--ds-focus-ring); }

  .skip { position: absolute; inset-inline-start: 8px; top: -120px; z-index: 10; padding: var(--ds-space-3); border-radius: var(--ds-radius-sm); background: var(--ds-surface-1); }
  .skip:focus { top: 8px; }

  /* header — same brand and rhythm as the site header */
  .top {
    position: sticky; top: 0; z-index: var(--ds-z-header);
    display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4);
    min-height: 68px; padding: 10px max(var(--ds-gutter), calc((100% - var(--ds-container)) / 2));
    border-bottom: 1px solid var(--ds-line); background: var(--ds-surface-glass);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--ds-ink-1); font: var(--ds-weight-display) 22px/1.1 var(--ds-font-display); }
  .brand:hover { text-decoration: none; }
  .brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--ds-elev-1); }
  .brand small { display: block; margin-top: 2px; color: var(--ds-ink-3); font: var(--ds-weight-medium) 11px/1 var(--ds-font-sans); letter-spacing: .02em; }
  .top nav { display: flex; gap: var(--ds-space-1); flex-wrap: wrap; font-size: var(--ds-text-sm); }
  .top nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-pill); color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); }
  .top nav a:hover { background: var(--ds-surface-2); color: var(--ds-ink-1); text-decoration: none; }
  .top nav a[aria-current="page"] { background: var(--ds-action-soft); color: var(--ds-action-ink); }

  main { max-width: var(--ds-container); margin: auto; padding: var(--ds-space-6) var(--ds-gutter) var(--ds-space-16); }

  /* intro — soft joy card with the Mio scene */
  .intro {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-5);
    margin-bottom: var(--ds-space-6); padding: var(--ds-space-6) var(--ds-space-8);
    border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sheet); background: var(--ds-joy-grad);
  }
  :root[data-theme="dark"] .intro { background: var(--ds-surface-1); }
  .intro p { color: var(--ds-ink-2); }
  .intro p.eyebrow { color: var(--ds-action-ink); }
  .intro img { flex-shrink: 0; width: 112px; height: 112px; object-fit: cover; border-radius: var(--ds-radius-xl); box-shadow: var(--ds-elev-2); }
  .eyebrow { margin: 0 0 var(--ds-space-1); color: var(--ds-success); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-bold); letter-spacing: .01em; }

  h1, h2, h3 { margin: 0 0 var(--ds-space-3); color: var(--ds-ink-1); font-family: var(--ds-font-display); line-height: 1.5; letter-spacing: -.01em; }
  h1 { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-display); }
  h2 { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); }
  h3 { font-size: var(--ds-text-md); font-weight: var(--ds-weight-bold); }
  p { margin: var(--ds-space-2) 0 var(--ds-space-4); }
  small, .muted { color: var(--ds-ink-3); }
  p.muted { font-size: var(--ds-text-sm); }

  .grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ds-space-6); align-items: start; }
  .grid .summary { position: sticky; top: 88px; }

  .card {
    min-width: 0; margin-bottom: var(--ds-space-5); padding: var(--ds-space-6);
    border: 1px solid var(--ds-line); border-radius: var(--ds-radius-panel);
    background: var(--ds-surface-1); box-shadow: var(--ds-elev-1); overflow-wrap: anywhere;
  }
  .soft { background: var(--ds-surface-1); }
  .card-top, .row, .account { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; }
  .card-top { margin-bottom: var(--ds-space-4); }
  .card-top p { margin: 0; color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); }

  /* totals — ds-sum */
  .row { padding: var(--ds-space-3) 0; border-bottom: 1px solid var(--ds-line); font-size: var(--ds-text-sm); }
  .row span { color: var(--ds-ink-2); }
  .row b { font-variant-numeric: tabular-nums; }
  .row:last-child { border: 0; }
  .total { font-weight: var(--ds-weight-bold); font-size: var(--ds-text-lg); }
  .total span { color: var(--ds-ink-1); }
  .total b { color: var(--ds-ink-1); }

  .items { list-style: none; padding: 0; margin: 0 0 var(--ds-space-4); }
  .items li { padding: var(--ds-space-4) 0; border-bottom: 1px solid var(--ds-line); }
  .item-name { font-weight: var(--ds-weight-bold); line-height: 1.7; }
  .item-meta { display: flex; gap: var(--ds-space-3); justify-content: space-between; margin-top: var(--ds-space-1); color: var(--ds-ink-3); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; }
  .item-meta strong { color: var(--ds-ink-1); }

  /* steps — ds-steps; the first step is where the buyer is */
  .steps { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); padding: 0; margin: 0 0 var(--ds-space-5); list-style: none; }
  .steps li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface-1); border: 1px solid var(--ds-line); color: var(--ds-ink-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); }
  .steps li:first-child { border-color: transparent; background: var(--ds-action-soft); color: var(--ds-action-ink); }

  /* status — ds-chip */
  .badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--ds-space-3); 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-bold); }
  .badge.warn { background: var(--ds-warning-soft); color: var(--ds-warning); }
  .badge.success { background: var(--ds-success-soft); color: var(--ds-success); }

  .actions { display: flex; gap: var(--ds-space-3); flex-wrap: wrap; margin-top: var(--ds-space-5); }
  .actions > * { flex-grow: 1; }
  .account { margin-bottom: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-surface-1); color: var(--ds-ink-2); font-size: var(--ds-text-xs); }
  .account button { min-height: 36px; padding: 4px var(--ds-space-3); font-size: var(--ds-text-xs); }

  /* fields — ds-field / ds-input */
  .fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-4); }
  label { display: block; color: var(--ds-ink-1); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-bold); }
  input, textarea, select {
    display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 6px; padding: 10px 14px;
    border: 1px solid var(--ds-line-2); border-radius: var(--ds-radius-control);
    background: var(--ds-surface-1); color: var(--ds-ink-1); font-weight: var(--ds-weight-regular);
    transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out);
  }
  input::placeholder, textarea::placeholder { color: var(--ds-ink-3); }
  input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ds-focus); box-shadow: var(--ds-focus-ring); }
  input:user-invalid, textarea:user-invalid { border-color: var(--ds-danger); }
  textarea { resize: vertical; min-height: 104px; }
  .wide { grid-column: 1 / -1; }
  .check { display: flex; align-items: flex-start; gap: var(--ds-space-3); margin-top: var(--ds-space-5); font-weight: var(--ds-weight-regular); }
  .check input { width: 20px; min-height: 20px; height: 20px; flex-shrink: 0; margin-top: 4px; padding: 0; accent-color: var(--ds-action); box-shadow: none; }

  /* notices — ds-alert */
  .notice { margin: var(--ds-space-4) 0; padding: var(--ds-space-3) var(--ds-space-4); border: 0; border-radius: var(--ds-radius-md); background: var(--ds-success-soft); color: var(--ds-ink-1); font-size: var(--ds-text-sm); overflow-wrap: anywhere; }
  .notice.error { background: var(--ds-danger-soft); color: var(--ds-danger); }
  .notice button { margin-top: var(--ds-space-2); margin-inline-end: var(--ds-space-2); }

  .login { max-width: 540px; margin-inline: auto; }
  .login button[type=submit] { width: 100%; margin-top: var(--ds-space-5); }
  .receipt { max-width: 760px; margin: auto; }
  .receipt h2 { margin-top: var(--ds-space-2); }
  .big-status { padding-bottom: var(--ds-space-4); margin-bottom: var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
  .money { white-space: nowrap; }
  bdi { font-variant-numeric: tabular-nums; }
  .order-code { display: inline-block; max-width: 100%; direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; overflow-wrap: anywhere; }
  h2.order-code { font-size: var(--ds-text-md); }
  .address { white-space: pre-line; }
  .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-5); }
  .list .card { margin: 0; }
  .admin-info { margin-top: var(--ds-space-4); padding-top: var(--ds-space-3); border-top: 1px solid var(--ds-line); }
  .empty { padding: var(--ds-space-10) var(--ds-space-6); text-align: center; }
  .empty img { width: 112px; height: 112px; object-fit: contain; }

  /* delivery — ds-radio-card */
  .delivery-methods { min-width: 0; margin: 0 0 var(--ds-space-5); padding: 0; border: 0; }
  .delivery-methods legend { margin-bottom: var(--ds-space-3); font-weight: var(--ds-weight-bold); }
  .delivery-choice { display: flex; align-items: flex-start; gap: var(--ds-space-3); margin-bottom: var(--ds-space-3); padding: var(--ds-space-4); border: 1px solid var(--ds-line-2); border-radius: var(--ds-radius-md); background: var(--ds-surface-1); font-weight: var(--ds-weight-regular); cursor: pointer; transition: border-color var(--ds-dur-2) var(--ds-ease-out), background-color var(--ds-dur-2) var(--ds-ease-out); }
  .delivery-choice:hover { border-color: var(--ds-ink-3); }
  .delivery-choice:has(input:checked) { border-color: var(--ds-action); background: var(--ds-action-soft); box-shadow: 0 0 0 1px var(--ds-action) inset; }
  .delivery-choice:has(input:focus-visible) { box-shadow: var(--ds-focus-ring); }
  .delivery-choice input { width: 20px; height: 20px; min-height: 20px; margin: 3px 0 0; padding: 0; flex-shrink: 0; accent-color: var(--ds-action); box-shadow: none; }
  .delivery-choice b { font-weight: var(--ds-weight-bold); }
  .delivery-choice small { display: block; margin-top: 2px; color: var(--ds-ink-2); font-size: var(--ds-text-xs); }
  .postpaid-note { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-warning-soft); color: var(--ds-ink-1); font-size: var(--ds-text-xs); }
  .card form > button { width: 100%; margin-top: var(--ds-space-3); }

  footer { margin: var(--ds-space-10) 0 0; padding-top: var(--ds-space-5); border-top: 1px solid var(--ds-line); color: var(--ds-ink-3); font-size: var(--ds-text-xs); }
  footer a { display: inline-block; margin-inline-end: var(--ds-space-5); margin-bottom: var(--ds-space-2); font-weight: var(--ds-weight-medium); }

  @media (max-width: 760px) {
    .top { min-height: 60px; padding-block: 8px; gap: var(--ds-space-3); }
    .top nav a { min-height: 36px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-xs); }
    .brand { font-size: 19px; }
    .brand img { width: 38px; height: 38px; }
    .brand small { display: none; }
    main { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-12); }
    .intro { gap: var(--ds-space-3); align-items: center; padding: var(--ds-space-5); border-radius: var(--ds-radius-xl); }
    .intro img { width: 76px; height: 76px; border-radius: var(--ds-radius-lg); }
    .intro h1 { font-size: 24px; margin-bottom: var(--ds-space-1); }
    .intro p { margin-bottom: 0; font-size: var(--ds-text-xs); }
    .grid, .list { grid-template-columns: 1fr; }
    .grid .summary { position: static; order: -1; }
    .card { padding: var(--ds-space-5); border-radius: var(--ds-radius-lg); }
    .fields { grid-template-columns: 1fr; }
    .actions { flex-direction: column; }
    .money { white-space: normal; }
    .total { font-size: var(--ds-text-md); }
  }
  @media (max-width: 360px) {
    .intro img { display: none; }
    .card { padding: var(--ds-space-4); }
  }
  @media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto; animation: none; transition: none; }
  }
}

/* Unlayered on purpose: it beats every layered display rule above. */
[hidden] { display: none; }