/* ═══════════════════════════════════════════════════════════════
   Pink Box — cart, checkout, order outcome, auth, account
   Same tokens and glass as the rest of the site; only the layouts
   and form controls these flows need.
   ═══════════════════════════════════════════════════════════════ */

/* ── two-column ledger: content + sticky summary ────────────── */

.ledger {
  display: grid;
  grid-template-columns: 1fr calc(360 * var(--pxs));
  align-items: start;
  gap: calc(34 * var(--pxs));
}
/* same reason as .acct: grid items default to min-width:auto and would
   otherwise refuse to shrink below their widest child */
.ledger > * { min-width: 0; }

.panel {
  border-radius: calc(20 * var(--pxs));
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.panel + .panel { margin-block-start: calc(18 * var(--pxs)); }
.panel__h {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pxs));
  margin: 0;
  padding: calc(17 * var(--pxs)) calc(20 * var(--pxs));
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  font-size: calc(15.5 * var(--pxs));
  font-weight: 600;
}
.panel__h svg { width: calc(18 * var(--pxs)); height: calc(18 * var(--pxs)); color: var(--accent); }
.panel__h em { font-style: normal; margin-inline-start: auto; font-size: calc(12.5 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.panel__body { padding: calc(20 * var(--pxs)); }

/* ── cart lines ─────────────────────────────────────────────── */

.line {
  display: grid;
  grid-template-columns: calc(88 * var(--pxs)) 1fr auto;
  gap: calc(16 * var(--pxs));
  align-items: center;
  padding: calc(16 * var(--pxs)) calc(20 * var(--pxs));
  border-block-end: 1px solid rgba(255, 255, 255, 0.07);
  animation: rise 420ms var(--ease-out) both;
}
.line:last-child { border-block-end: 0; }
.line.is-going { opacity: 0; transform: translateX(calc(-20 * var(--pxs))); transition: opacity 260ms, transform 260ms var(--ease); }

.line__img {
  display: block;
  overflow: hidden;
  border-radius: calc(13 * var(--pxs));
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  background: radial-gradient(60% 60% at 50% 42%, rgba(192, 120, 138, 0.28), transparent 72%);
}
.line__img img { width: 100%; height: 100%; object-fit: cover; }

.line__main { min-width: 0; display: grid; gap: calc(5 * var(--pxs)); }
.line__cat { margin: 0; font-size: calc(11.5 * var(--pxs)); color: var(--accent); }
.line__name { margin: 0; font-size: calc(14.5 * var(--pxs)); font-weight: 600; line-height: 1.5; }
.line__name a:hover { color: var(--accent-hi); }
.line__opts { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pxs)); margin-block-start: calc(2 * var(--pxs)); }
.line__opts span {
  padding: calc(3 * var(--pxs)) calc(9 * var(--pxs));
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: calc(11 * var(--pxs));
  font-weight: 300;
  color: var(--ink-dim);
}
.line__opts i { width: calc(10 * var(--pxs)); height: calc(10 * var(--pxs)); border-radius: 50%; display: inline-block; vertical-align: -1px; margin-inline-end: calc(5 * var(--pxs)); }

.line__side { display: grid; justify-items: end; gap: calc(10 * var(--pxs)); }
.line__price { font-size: calc(15 * var(--pxs)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line__was { font-size: calc(12 * var(--pxs)); font-weight: 300; color: rgba(255, 255, 255, 0.42); }
.line__drop {
  border: 0; background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: calc(6 * var(--pxs));
  font-family: inherit; font-size: calc(12 * var(--pxs)); color: var(--ink-dim);
  transition: color 200ms;
}
.line__drop:hover { color: #f0a0b4; }
.line__drop svg { width: calc(14 * var(--pxs)); height: calc(14 * var(--pxs)); }

/* compact stepper reused by cart lines */
.stepper {
  display: inline-flex;
  align-items: center;
  border-radius: calc(11 * var(--pxs));
  border: 1px solid var(--line);
  background: rgba(27, 14, 17, 0.36);
  overflow: hidden;
}
.stepper button {
  width: calc(34 * var(--pxs)); height: calc(34 * var(--pxs));
  border: 0; background: none; color: #fff;
  font-size: calc(16 * var(--pxs)); cursor: pointer;
  transition: background-color 180ms;
}
.stepper button:hover { background: rgba(255, 255, 255, 0.08); }
.stepper button:disabled { opacity: 0.32; cursor: default; }
.stepper output { min-width: calc(30 * var(--pxs)); text-align: center; font-size: calc(14 * var(--pxs)); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── summary ────────────────────────────────────────────────── */

.summary { position: sticky; inset-block-start: calc(96 * var(--pxs)); }
.sum__rows { display: grid; gap: calc(12 * var(--pxs)); }
.sum__row { display: flex; justify-content: space-between; gap: calc(14 * var(--pxs)); font-size: calc(14 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.sum__row b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.sum__row--save b { color: #8ddcae; }
.sum__row--free b { color: #8ddcae; }
.sum__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: calc(14 * var(--pxs));
  margin-block-start: calc(16 * var(--pxs));
  padding-block-start: calc(16 * var(--pxs));
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  font-size: calc(14.5 * var(--pxs));
}
.sum__total strong { font-size: calc(21 * var(--pxs)); font-weight: 800; font-variant-numeric: tabular-nums; }
.sum__cta { width: 100%; margin-block-start: calc(18 * var(--pxs)); height: calc(54 * var(--pxs)); border-radius: calc(14 * var(--pxs)); }
.sum__note { margin: calc(12 * var(--pxs)) 0 0; font-size: calc(12 * var(--pxs)); font-weight: 300; color: var(--ink-dim); text-align: center; }

/* free-shipping progress */
.freeship { margin-block-end: calc(18 * var(--pxs)); }
.freeship p { margin: 0 0 calc(8 * var(--pxs)); font-size: calc(12.5 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.freeship b { color: #fff; font-weight: 600; }
.freeship__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.freeship__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(to left, var(--accent-hi), var(--accent)); transition: width 520ms var(--ease-out); }

/* coupon */
.coupon { display: flex; gap: calc(9 * var(--pxs)); }
.coupon input { flex: 1; min-width: 0; }
.coupon .btn--sm { flex: none; }
.coupon__msg { margin: calc(10 * var(--pxs)) 0 0; font-size: calc(12.5 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.coupon__msg.is-good { color: #8ddcae; }
.coupon__msg.is-bad { color: #f0a0b4; }

/* ── forms ──────────────────────────────────────────────────── */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--pxs)); }
.field { display: grid; gap: calc(8 * var(--pxs)); }
.field--wide { grid-column: 1 / -1; }
.field > label { font-size: calc(13 * var(--pxs)); font-weight: 500; color: var(--ink-soft); }
.field > label span { color: #f0a0b4; }

.input,
.field textarea,
.field select {
  width: 100%;
  min-height: calc(50 * var(--pxs));
  padding: calc(13 * var(--pxs)) calc(16 * var(--pxs));
  border-radius: calc(13 * var(--pxs));
  border: 1px solid var(--line);
  background: rgba(27, 14, 17, 0.36);
  color: #fff;
  font-family: inherit;
  font-size: calc(14.5 * var(--pxs));
  transition: border-color 220ms var(--ease), background-color 220ms, box-shadow 220ms;
}
.field textarea { min-height: calc(96 * var(--pxs)); resize: vertical; line-height: 1.9; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: #342126; }
.input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.input:hover, .field textarea:hover, .field select:hover { border-color: rgba(255, 255, 255, 0.22); }
.input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(36, 20, 24, 0.55);
  box-shadow: 0 0 0 calc(3 * var(--pxs)) rgba(213, 145, 162, 0.18);
}
.input[aria-invalid="true"] { border-color: #e2718f; }
.input[dir="ltr"] { text-align: right; }

.field__hint { font-size: calc(12 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.field__err { font-size: calc(12 * var(--pxs)); color: #f0a0b4; min-height: calc(15 * var(--pxs)); }

/* radio cards */
.choices { display: grid; gap: calc(11 * var(--pxs)); }
.choice {
  display: flex;
  align-items: center;
  gap: calc(13 * var(--pxs));
  padding: calc(15 * var(--pxs)) calc(17 * var(--pxs));
  border-radius: calc(14 * var(--pxs));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 220ms, background-color 220ms, transform 220ms var(--ease);
}
.choice:hover { border-color: var(--line-hi); transform: translateY(calc(-2 * var(--pxs))); }
.choice input {
  appearance: none; flex: none;
  width: calc(19 * var(--pxs)); height: calc(19 * var(--pxs));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms;
}
.choice input::after {
  content: ""; width: calc(9 * var(--pxs)); height: calc(9 * var(--pxs));
  border-radius: 50%; background: #fff; transform: scale(0);
  transition: transform 200ms var(--ease);
}
.choice input:checked { background: var(--accent); border-color: var(--accent); }
.choice input:checked::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--accent); background: rgba(213, 145, 162, 0.12); }

.choice__main { flex: 1; display: grid; gap: calc(3 * var(--pxs)); }
.choice__t { font-size: calc(14 * var(--pxs)); font-weight: 600; }
.choice__s { font-size: calc(12 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.choice__cost { font-size: calc(13.5 * var(--pxs)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.choice__cost.is-free { color: #8ddcae; }
.choice svg { flex: none; width: calc(20 * var(--pxs)); height: calc(20 * var(--pxs)); color: var(--accent); }

/* ── compact line list inside the checkout summary ──────────── */

.mini {
  display: grid;
  gap: calc(11 * var(--pxs));
  margin-block-end: calc(18 * var(--pxs));
  padding-block-end: calc(16 * var(--pxs));
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  max-height: calc(230 * var(--pxs));
  overflow-y: auto;
}
.mini__row { display: flex; align-items: center; gap: calc(10 * var(--pxs)); font-size: calc(12.5 * var(--pxs)); }
.mini__row img {
  flex: none; width: calc(38 * var(--pxs)); height: calc(46 * var(--pxs));
  object-fit: cover; border-radius: calc(9 * var(--pxs));
  border: 1px solid var(--line);
}
.mini__n { flex: 1; min-width: 0; font-weight: 500; line-height: 1.5; }
.mini__q { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mini__p { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── error summary ──────────────────────────────────────────── */

.alert {
  display: flex;
  gap: calc(12 * var(--pxs));
  margin-block-end: calc(18 * var(--pxs));
  padding: calc(16 * var(--pxs)) calc(18 * var(--pxs));
  border-radius: calc(16 * var(--pxs));
  border: 1px solid rgba(226, 113, 143, 0.42);
  background: rgba(226, 113, 143, 0.11);
  font-size: calc(13.5 * var(--pxs));
  animation: rise 380ms var(--ease-out) both;
}
.alert[hidden] { display: none; }
.alert svg { flex: none; width: calc(20 * var(--pxs)); height: calc(20 * var(--pxs)); color: #f0a0b4; margin-block-start: calc(2 * var(--pxs)); }
.alert b { display: block; margin-block-end: calc(7 * var(--pxs)); font-weight: 600; }
.alert ul { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pxs)) calc(16 * var(--pxs)); }
.alert li { list-style: none; }
.alert a { color: #f0a0b4; text-decoration: underline; text-underline-offset: 3px; }
.alert a:hover { color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── steps ──────────────────────────────────────────────────── */

.steps { display: flex; align-items: center; gap: calc(8 * var(--pxs)); margin-block-end: calc(26 * var(--pxs)); flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: calc(8 * var(--pxs)); font-size: calc(13 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.steps b {
  display: grid; place-items: center;
  width: calc(24 * var(--pxs)); height: calc(24 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: calc(12 * var(--pxs)); font-weight: 600;
}
.steps .is-now { color: #fff; }
.steps .is-now b { background: var(--accent); border-color: var(--accent); }
.steps .is-done b { background: rgba(141, 220, 174, 0.2); border-color: rgba(141, 220, 174, 0.5); color: #8ddcae; }
.steps i { width: calc(26 * var(--pxs)); height: 1px; background: rgba(255, 255, 255, 0.14); }

/* ── empty state ────────────────────────────────────────────── */

.blank {
  display: grid;
  justify-items: center;
  gap: calc(16 * var(--pxs));
  padding: calc(72 * var(--pxs)) calc(24 * var(--pxs));
  text-align: center;
}
.blank__icon {
  display: grid; place-items: center;
  width: calc(74 * var(--pxs)); height: calc(74 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
}
.blank__icon svg { width: calc(30 * var(--pxs)); height: calc(30 * var(--pxs)); }
.blank h2 { margin: 0; font-size: calc(21 * var(--pxs)); font-weight: 700; }
.blank p { margin: 0; max-width: calc(380 * var(--pxs)); font-size: calc(14.5 * var(--pxs)); font-weight: 300; line-height: 1.95; color: var(--ink-dim); }

/* ── outcome pages ──────────────────────────────────────────── */

.outcome { display: grid; justify-items: center; text-align: center; gap: calc(14 * var(--pxs)); margin-block-end: calc(40 * var(--pxs)); }
.outcome__mark {
  display: grid; place-items: center;
  width: calc(92 * var(--pxs)); height: calc(92 * var(--pxs));
  border-radius: 50%;
  border: 1px solid rgba(141, 220, 174, 0.4);
  background: rgba(141, 220, 174, 0.12);
  color: #8ddcae;
  animation: pop-in 620ms var(--ease-out) both;
}
.outcome__mark svg { width: calc(40 * var(--pxs)); height: calc(40 * var(--pxs)); stroke-width: 2; }
.outcome__mark--bad { border-color: rgba(226, 113, 143, 0.4); background: rgba(226, 113, 143, 0.12); color: #f0a0b4; }
.outcome h1 { margin: 0; font-size: calc(30 * var(--pxs)); font-weight: 800; }
.outcome p { margin: 0; max-width: calc(460 * var(--pxs)); font-size: calc(15 * var(--pxs)); font-weight: 300; line-height: 2; color: var(--ink-dim); }
.outcome__code {
  margin-block-start: calc(6 * var(--pxs));
  padding: calc(9 * var(--pxs)) calc(18 * var(--pxs));
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: calc(14 * var(--pxs));
  font-variant-numeric: tabular-nums;
}
.outcome__code b { color: var(--accent-hi); }

@keyframes pop-in {
  from { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); }
  to   { transform: scale(1); opacity: 1; }
}

/* delivery timeline */
.track { display: grid; gap: 0; }
.track li {
  display: grid;
  grid-template-columns: calc(28 * var(--pxs)) 1fr;
  gap: calc(14 * var(--pxs));
  padding-block-end: calc(22 * var(--pxs));
  position: relative;
}
.track li:last-child { padding-block-end: 0; }
.track li::before {
  content: "";
  position: absolute;
  inset-block: calc(26 * var(--pxs)) 0;
  inset-inline-start: calc(13.5 * var(--pxs));
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.track li:last-child::before { display: none; }
.track__dot {
  display: grid; place-items: center;
  width: calc(28 * var(--pxs)); height: calc(28 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  z-index: 1;
}
.track__dot svg { width: calc(14 * var(--pxs)); height: calc(14 * var(--pxs)); }
.track .is-done .track__dot { background: rgba(141, 220, 174, 0.18); border-color: rgba(141, 220, 174, 0.45); color: #8ddcae; }
.track .is-now .track__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.track__t { font-size: calc(14 * var(--pxs)); font-weight: 600; }
.track .is-idle .track__t { color: var(--ink-dim); font-weight: 400; }
.track__s { font-size: calc(12.5 * var(--pxs)); font-weight: 300; color: var(--ink-dim); margin-block-start: calc(3 * var(--pxs)); }

/* prose + reason lists inside panels */
.plain { margin: 0 0 calc(16 * var(--pxs)); font-size: calc(14 * var(--pxs)); font-weight: 300; line-height: 2; color: var(--ink-soft); }
.plain:last-child { margin-block-end: 0; }

.reasons { display: grid; gap: calc(16 * var(--pxs)); }
.reasons li {
  display: grid;
  gap: calc(4 * var(--pxs));
  padding-inline-start: calc(16 * var(--pxs));
  border-inline-start: 2px solid rgba(213, 145, 162, 0.4);
}
.reasons b { font-size: calc(14 * var(--pxs)); font-weight: 600; }
.reasons span { font-size: calc(13.5 * var(--pxs)); font-weight: 300; line-height: 1.95; color: var(--ink-dim); }

.btnrow { display: flex; flex-wrap: wrap; gap: calc(10 * var(--pxs)); }

/* key/value list used by order + address summaries */
.kv { display: grid; gap: calc(11 * var(--pxs)); }
.kv div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(4 * var(--pxs)) calc(16 * var(--pxs)); font-size: calc(13.5 * var(--pxs)); }
.kv dt { flex: none; }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv dt { font-weight: 300; color: var(--ink-dim); }
.kv dd { margin: 0; font-weight: 500; text-align: end; }

/* ── sign in ────────────────────────────────────────────────── */

.authwrap {
  display: grid;
  grid-template-columns: calc(430 * var(--pxs)) 1fr;
  gap: calc(46 * var(--pxs));
  align-items: center;
  max-width: calc(940 * var(--pxs));
  margin-inline: auto;
  padding-block: calc(30 * var(--pxs));
}
.authcard__head { display: grid; justify-items: center; gap: calc(10 * var(--pxs)); padding: calc(32 * var(--pxs)) calc(26 * var(--pxs)) calc(4 * var(--pxs)); text-align: center; }
.authcard__head .brand__mark { width: calc(58 * var(--pxs)); height: calc(58 * var(--pxs)); font-size: calc(21 * var(--pxs)); }
.authcard__head h1 { margin: calc(6 * var(--pxs)) 0 0; font-size: calc(23 * var(--pxs)); font-weight: 800; }
.authcard__head p { margin: 0; font-size: calc(13.5 * var(--pxs)); font-weight: 300; line-height: 1.9; color: var(--ink-dim); }
.authcard__head b { color: var(--accent-hi); font-variant-numeric: tabular-nums; }

.authcard__go { width: 100%; margin-block-start: calc(18 * var(--pxs)); height: calc(52 * var(--pxs)); border-radius: calc(14 * var(--pxs)); }
.authcard__fine { margin: calc(14 * var(--pxs)) 0 0; font-size: calc(12 * var(--pxs)); font-weight: 300; line-height: 1.9; color: var(--ink-dim); text-align: center; }
.authcard__fine a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.authcard__fine a:hover { color: #fff; }
.authcard__fine b { color: #fff; font-variant-numeric: tabular-nums; }
.authcard__sent { margin: 0 0 calc(18 * var(--pxs)); font-size: calc(13 * var(--pxs)); font-weight: 300; color: var(--ink-dim); text-align: center; }
.authcard__sent b { color: #fff; font-weight: 600; }

.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 200ms;
}
.linkbtn:hover { color: var(--accent-hi); }

.otp { display: flex; gap: calc(10 * var(--pxs)); }
.otp input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: calc(22 * var(--pxs));
  font-weight: 700;
  padding-inline: 0;
  font-variant-numeric: tabular-nums;
}

.authside { padding-inline-start: calc(10 * var(--pxs)); }
.authside h2 { margin: 0 0 calc(20 * var(--pxs)); font-size: calc(20 * var(--pxs)); font-weight: 700; }
.authside .perks { gap: calc(16 * var(--pxs)); }
.authside .perks li { align-items: flex-start; font-size: calc(14 * var(--pxs)); }
.authside .perks svg { margin-block-start: calc(3 * var(--pxs)); }

/* ── account ────────────────────────────────────────────────── */

.acct { display: grid; grid-template-columns: calc(240 * var(--pxs)) 1fr; gap: calc(30 * var(--pxs)); align-items: start; }
/* Without this a grid item's min-width resolves to its content's intrinsic
   width, so the stats row and wishlist grid push the column wider than the
   viewport instead of reflowing. This is what stopped the page collapsing. */
.acct__side, .acct__main { min-width: 0; }

.acct__side { position: sticky; inset-block-start: calc(96 * var(--pxs)); display: grid; gap: calc(10 * var(--pxs)); }

.acct__nav {
  min-width: 0;
  display: grid;
  gap: calc(4 * var(--pxs));
  padding: calc(12 * var(--pxs));
  border-radius: calc(18 * var(--pxs));
  border: 1px solid var(--line);
  background: var(--card);
}
.acct__nav button {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--pxs));
  padding: calc(12 * var(--pxs)) calc(14 * var(--pxs));
  border: 0;
  border-radius: calc(12 * var(--pxs));
  background: none;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: calc(14 * var(--pxs));
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: color 200ms, background-color 240ms var(--ease);
}
.acct__nav svg { flex: none; width: calc(18 * var(--pxs)); height: calc(18 * var(--pxs)); }
.acct__nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.acct__nav button.is-on {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.acct__nav em:empty { display: none; }
.acct__nav em {
  margin-inline-start: auto; font-style: normal;
  font-size: calc(11.5 * var(--pxs));
  padding: calc(2 * var(--pxs)) calc(8 * var(--pxs));
  border-radius: 999px;
  background: rgba(213, 145, 162, 0.24);
}
/* Kept out of .acct__nav on purpose: on small screens that nav is a
   horizontally scrolling strip with a hidden scrollbar, and signing out must
   never be parked off the end of it. */
.acct__out {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--pxs));
  padding: calc(13 * var(--pxs)) calc(16 * var(--pxs));
  border-radius: calc(14 * var(--pxs));
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: calc(13.5 * var(--pxs));
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: color 220ms, border-color 240ms, background-color 240ms;
}
.acct__out svg { flex: none; width: calc(17 * var(--pxs)); height: calc(17 * var(--pxs)); }
.acct__out:hover {
  color: #f0a0b4;
  border-color: rgba(226, 113, 143, 0.42);
  background: rgba(226, 113, 143, 0.1);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(150 * var(--pxs)), 1fr));
  gap: calc(14 * var(--pxs));
  margin-block-end: calc(18 * var(--pxs));
}
.stat b { overflow-wrap: anywhere; }
.stat {
  display: grid; justify-items: start; gap: calc(4 * var(--pxs));
  padding: calc(17 * var(--pxs));
  border-radius: calc(16 * var(--pxs));
  border: 1px solid var(--line);
  background: var(--card);
}
.stat__icon { display: grid; place-items: center; width: calc(32 * var(--pxs)); height: calc(32 * var(--pxs)); border-radius: calc(10 * var(--pxs)); background: rgba(213, 145, 162, 0.16); color: var(--accent-hi); margin-block-end: calc(4 * var(--pxs)); }
.stat__icon svg { width: calc(16 * var(--pxs)); height: calc(16 * var(--pxs)); }
.stat b { font-size: calc(17 * var(--pxs)); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat > span:last-child { font-size: calc(12 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }

.ords { display: grid; gap: calc(14 * var(--pxs)); }
.ord { padding: calc(16 * var(--pxs)); border-radius: calc(15 * var(--pxs)); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.ord__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: calc(10 * var(--pxs)) calc(12 * var(--pxs)); margin-block-end: calc(14 * var(--pxs)); }
.ord__code { display: block; font-size: calc(13.5 * var(--pxs)); }
.ord__code b { font-variant-numeric: tabular-nums; }
.ord__when { display: block; margin-block-start: calc(3 * var(--pxs)); font-size: calc(12 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.ord__items { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pxs)); margin-block-end: calc(14 * var(--pxs)); }
.ord__thumb { position: relative; width: calc(46 * var(--pxs)); height: calc(56 * var(--pxs)); border-radius: calc(10 * var(--pxs)); overflow: hidden; border: 1px solid var(--line); }
.ord__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ord__thumb span {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  padding: calc(1 * var(--pxs)) calc(6 * var(--pxs));
  border-start-end-radius: calc(8 * var(--pxs));
  background: rgba(27, 14, 17, 0.8);
  font-size: calc(10.5 * var(--pxs));
}
.ord__more { align-self: center; font-size: calc(12.5 * var(--pxs)); color: var(--ink-dim); }
.ord__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: calc(6 * var(--pxs)) calc(12 * var(--pxs)); padding-block-start: calc(13 * var(--pxs)); border-block-start: 1px solid rgba(255, 255, 255, 0.07); font-size: calc(12.5 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.ord__foot b { font-size: calc(15 * var(--pxs)); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.tag {
  flex: none;
  padding: calc(4 * var(--pxs)) calc(11 * var(--pxs));
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: calc(11.5 * var(--pxs));
  font-weight: 500;
  color: var(--ink-dim);
}
.tag--live { border-color: rgba(213, 145, 162, 0.45); background: rgba(213, 145, 162, 0.16); color: var(--accent-hi); }

.addrs { display: grid; gap: calc(13 * var(--pxs)); }
.addrs:empty { display: none; }

.addr {
  display: grid;
  gap: calc(13 * var(--pxs));
  padding: calc(16 * var(--pxs));
  border-radius: calc(15 * var(--pxs));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 240ms;
}
.addr:hover { border-color: var(--line-hi); }
.addr__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(9 * var(--pxs));
  font-size: calc(14 * var(--pxs));
  font-weight: 600;
}

.addr__acts { display: flex; gap: calc(6 * var(--pxs)); margin-inline-start: auto; }
.addr__acts button {
  display: grid;
  place-items: center;
  min-width: calc(32 * var(--pxs));
  height: calc(32 * var(--pxs));
  padding-inline: calc(8 * var(--pxs));
  border-radius: calc(10 * var(--pxs));
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: calc(12 * var(--pxs));
  cursor: pointer;
  transition: color 200ms, border-color 220ms, background-color 220ms;
}
.addr__acts svg { width: calc(15 * var(--pxs)); height: calc(15 * var(--pxs)); }
.addr__acts button:hover { color: #fff; border-color: var(--line-hi); background: rgba(255, 255, 255, 0.06); }
.addr__acts .is-danger:hover { color: #f0a0b4; border-color: rgba(226, 113, 143, 0.45); background: rgba(226, 113, 143, 0.12); }
.addr__acts .is-asking {
  color: #f0a0b4;
  border-color: rgba(226, 113, 143, 0.6);
  background: rgba(226, 113, 143, 0.16);
  font-weight: 600;
}

.addr__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--pxs));
  width: 100%;
  margin-block-start: calc(14 * var(--pxs));
  padding: calc(13 * var(--pxs));
  border-radius: calc(14 * var(--pxs));
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: calc(13.5 * var(--pxs));
  font-weight: 500;
  cursor: pointer;
  transition: color 220ms, border-color 240ms, background-color 240ms;
}
.addr__add:first-child { margin-block-start: 0; }
.addr__add svg { width: calc(17 * var(--pxs)); height: calc(17 * var(--pxs)); }
.addr__add:hover { color: #fff; border-color: var(--accent); background: rgba(213, 145, 162, 0.1); }

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .ledger { grid-template-columns: 1fr calc(310 * var(--pxs)); gap: calc(24 * var(--pxs)); }
}

@media (max-width: 1180px) {
  .authwrap { grid-template-columns: calc(400 * var(--pxs)) 1fr; gap: calc(30 * var(--pxs)); }
  .acct { grid-template-columns: calc(210 * var(--pxs)) 1fr; gap: calc(22 * var(--pxs)); }
}

@media (max-width: 900px) {
  .ledger { grid-template-columns: 1fr; }
  .summary { position: static; }
  .grid2 { grid-template-columns: 1fr; }
  .steps { font-size: calc(12 * var(--pxs)); }
  .steps i { width: calc(14 * var(--pxs)); }

  .authwrap { grid-template-columns: 1fr; max-width: calc(460 * var(--pxs)); }
  .authside { padding-inline-start: 0; }

  .acct { grid-template-columns: 1fr; }
  /* dissolve the sidebar so the tab strip, the panels and sign-out become
     siblings — tabs on top, sign-out where people look for it: the bottom */
  .acct__side { display: contents; }
  .acct__nav { order: 1; }
  .acct__main { order: 2; }
  .acct__nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
    /* the strip runs past the left edge in RTL — fade it so that reads as
       "there is more", since the scrollbar is hidden */
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
  }
  .acct__nav::-webkit-scrollbar { display: none; }
  .acct__nav button { white-space: nowrap; }
}

@media (max-width: 560px) {
  .acct { gap: calc(18 * var(--pxs)); }
  .acct__nav { padding: calc(8 * var(--pxs)); }
  .acct__nav button { padding: calc(10 * var(--pxs)) calc(12 * var(--pxs)); font-size: calc(13.5 * var(--pxs)); }
  .stat { padding: calc(14 * var(--pxs)); }
  .stat b { font-size: calc(15.5 * var(--pxs)); }
  .kv div { flex-direction: column; align-items: flex-start; }
  .kv dd { text-align: start; }
  .ord { padding: calc(13 * var(--pxs)); }

  .line { grid-template-columns: calc(68 * var(--pxs)) 1fr; }
  .line__side { grid-column: 1 / -1; grid-auto-flow: column; justify-items: stretch; align-items: center; justify-content: space-between; }
  .panel__body, .panel__h { padding-inline: calc(15 * var(--pxs)); }
  .line { padding-inline: calc(15 * var(--pxs)); }
}

/* ═══ باشگاه Pink Box ═══════════════════════════════════════════════
   Balance, tier meter, reward cards and the codes already redeemed.
   Reuses .panel so the club reads as part of the account, not a
   separate product bolted on.
   ═════════════════════════════════════════════════════════════ */

.club__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(280 * var(--pxs)), 1fr));
  gap: calc(16 * var(--pxs));
  margin-block-end: calc(48 * var(--pxs));
}
.club__top > * { min-width: 0; padding: calc(24 * var(--pxs)); }

.club__lab { margin: 0; font-size: calc(12.5 * var(--pxs)); color: var(--ink-dim); }
.club__sub { margin: calc(10 * var(--pxs)) 0 0; font-size: calc(12.5 * var(--pxs)); color: var(--ink-dim); }

.club__pts { display: flex; align-items: baseline; gap: calc(7 * var(--pxs)); margin: calc(6 * var(--pxs)) 0 0; }
.club__pts b { font-size: calc(40 * var(--pxs)); font-weight: 800; color: var(--accent-hi); line-height: 1; }
.club__pts span { font-size: calc(13 * var(--pxs)); color: var(--ink-dim); }

.club__tierhead { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--pxs)); }
.club__tiername { margin: calc(6 * var(--pxs)) 0 0; font-size: calc(22 * var(--pxs)); font-weight: 700; }
.club__meter {
  margin-block-start: calc(16 * var(--pxs));
  height: calc(7 * var(--pxs));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.club__meter i {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transition: width 700ms var(--ease);
}

/* ── rewards ─────────────────────────────────────────────────── */

.club__rewards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(240 * var(--pxs)), 1fr));
  gap: calc(14 * var(--pxs));
  margin-block-end: calc(48 * var(--pxs));
}
.rw {
  min-width: 0;
  display: flex; flex-direction: column; gap: calc(12 * var(--pxs));
  padding: calc(20 * var(--pxs));
  border-radius: calc(18 * var(--pxs));
  background: var(--glass);
  border: 1px solid var(--glass-line);
  transition: border-color 240ms, transform 240ms var(--ease);
}
.rw:hover { border-color: rgba(234, 180, 193, 0.4); transform: translateY(calc(-2 * var(--pxs))); }
/* A reward you cannot afford stays legible — dimming the whole card hides
   the very terms that explain what you are saving toward. */
.rw.is-locked { border-style: dashed; }
.rw.is-locked .rw__cost { color: var(--ink-dim); }

.rw__head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--pxs)); }
.rw__title { margin: 0; font-size: calc(16 * var(--pxs)); font-weight: 700; }
.rw__cost { flex: none; font-size: calc(12.5 * var(--pxs)); font-weight: 700; color: var(--accent-hi); }

.rw__terms { display: grid; gap: calc(4 * var(--pxs)); margin: 0; }
.rw__terms li { font-size: calc(12.5 * var(--pxs)); color: var(--ink-dim); }
.rw__get { margin-block-start: auto; }

/* ── redeemed codes ──────────────────────────────────────────── */

.club__count { font-size: calc(13 * var(--pxs)); color: var(--ink-dim); }
.club__coupons { display: grid; gap: calc(10 * var(--pxs)); margin-block-end: calc(48 * var(--pxs)); }
.cpn {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(16 * var(--pxs));
  padding: calc(16 * var(--pxs)) calc(20 * var(--pxs));
  border-radius: calc(16 * var(--pxs));
  background: var(--glass);
  border: 1px solid var(--glass-line);
}
.cpn__main { min-width: 0; }
.cpn__title { margin: 0; font-size: calc(15 * var(--pxs)); font-weight: 700; }
.cpn__terms { margin: calc(4 * var(--pxs)) 0 0; font-size: calc(12.5 * var(--pxs)); color: var(--ink-dim); }
.cpn__side { flex: none; text-align: center; }
.cpn__code {
  font: inherit; cursor: pointer;
  padding: calc(8 * var(--pxs)) calc(14 * var(--pxs));
  border-radius: calc(10 * var(--pxs));
  border: 1px dashed rgba(234, 180, 193, 0.55);
  background: rgba(213, 145, 162, 0.12);
  color: var(--accent-hi);
  font-weight: 700; letter-spacing: .04em;
  transition: background 200ms, border-color 200ms;
}
.cpn__code:hover { background: rgba(213, 145, 162, 0.2); }
.cpn__code.is-copied { border-style: solid; border-color: #8ddcae; color: #8ddcae; }
.cpn__exp { margin: calc(6 * var(--pxs)) 0 0; font-size: calc(11.5 * var(--pxs)); color: var(--ink-dim); }

/* ── points history ──────────────────────────────────────────── */

.club__log { display: grid; gap: calc(2 * var(--pxs)); }
.plog {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: calc(14 * var(--pxs));
  padding: calc(13 * var(--pxs)) calc(4 * var(--pxs));
  border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}
.plog__why { min-width: 0; font-size: calc(13.5 * var(--pxs)); }
.plog__when { font-size: calc(12 * var(--pxs)); color: var(--ink-dim); }
.plog__delta { font-size: calc(13.5 * var(--pxs)); font-weight: 700; min-width: calc(52 * var(--pxs)); text-align: end; }
.plog__delta.is-up { color: #8ddcae; }
.plog__delta.is-down { color: var(--accent-hi); }

/* the cart's coupon box grew a remove button and a pointer to the club */
.coupon__drop {
  margin-block-start: calc(8 * var(--pxs));
  font: inherit; font-size: calc(12.5 * var(--pxs));
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-dim); text-decoration: underline;
}
.coupon__drop:hover { color: var(--ink); }
.coupon__hint { margin: calc(10 * var(--pxs)) 0 0; font-size: calc(12.5 * var(--pxs)); color: var(--ink-dim); }
.coupon__hint a { color: var(--accent-hi); text-decoration: underline; }

@media (max-width: 560px) {
  .cpn { flex-direction: column; align-items: stretch; text-align: center; }
  .plog { grid-template-columns: 1fr auto; }
  .plog__when { grid-column: 1; font-size: calc(11.5 * var(--pxs)); }
}