/* ==========================================================================
   وترین — cart.css  (cart / drawer line content / orders / order / account)
   Loads AFTER vitrin.css (tokens → vitrin → pdp → cart → ops) so the
   refinements below win ties against the globals. Consumes tokens.css only:
   zero raw colors, spacing on the 4px grid, logical properties for RTL.
   Owns: cart page depth, drawer LINE content, orders/order/account screens.
   Does NOT own: header/footer/drawer shell (vitrin.css), the ops status chip
   and pager (ops.css), .button/.panel globals (vitrin.css).
   ========================================================================== */

/* ---- shared: neutral chip (SANDBOX badges and future badges) ------------- */
.pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--surface-sunk); color: var(--ink-soft);
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
}

/* ---- readable page width: cart / orders / account / order ---------------- */
.cart-head, .checkout-layout, .cart-empty, .orders-head, .orders-list,
.orders-empty, .account-hero, .account-tiles, .account-section,
.order-head, .order-suborder {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* one focus voice for every interactive element on these screens */
.cart-line-title:focus-visible, .cart-qty-form select:focus-visible,
.checkout-form select:focus-visible, .cart-remove:focus-visible,
.cart-continue:focus-visible, .summary-address:focus-visible,
.drawer-line-title:focus-visible, .drawer-qty-input:focus-visible,
.drawer-remove:focus-visible, .account-tile:focus-visible,
.account-follow-link:focus-visible, .account-logout button:focus-visible,
.orders-row-link:focus-visible, .cart-group-shop:focus-visible,
.cart-select:focus-visible, .cart-check input:focus-visible,
.cart-bar-cta:focus-visible {
  outline: var(--focus-outline); outline-offset: 2px; border-radius: var(--radius-xs);
}

/* ============================== CART PAGE ============================== */

.cart-head h1 {
  margin-block: var(--sp-5) var(--sp-4);
  font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--ink);
}
.cart-head .muted { margin: 0 0 var(--sp-2); }

.cart-count {
  display: inline-flex; align-items: center; vertical-align: middle; white-space: nowrap;
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: var(--fs-11); font-weight: var(--fw-bold);
}

.cart-lines { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- selection bar: select-all row above the groups ----------------------- */
.cart-select-bar {
  display: flex; align-items: center;
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.cart-check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ink); font-size: var(--fs-13); font-weight: var(--fw-semibold);
  cursor: pointer; user-select: none;
}

/* accent checkboxes — with price-now the only accent on the rows */
.cart-select, .cart-check input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}

/* ---- seller group: one hairline panel per shop ---------------------------- */
.cart-group {
  background: var(--surface-alt);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden;
}
.cart-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunk); border-bottom: 1px solid var(--line);
}
.cart-group-shop {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: var(--ink); font-size: var(--fs-13); font-weight: var(--fw-bold);
  text-decoration: none;
}
.cart-group-shop svg { flex: none; color: var(--ink-faint); }
@media (hover: hover) { .cart-group-shop:hover { color: var(--ink-soft); } }
.cart-group-shipping { flex: none; font-size: var(--fs-11); color: var(--ink-soft); white-space: nowrap; }

/* ---- cart line: white row, hairline divider, square thumb ----------------- */
.cart-line {
  display: grid; grid-template-columns: auto 80px minmax(0, 1fr) auto;
  gap: var(--sp-3); padding: var(--sp-3);
  background: var(--surface-alt);
  transition: background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.cart-line + .cart-line { border-top: 1px solid var(--line); }
@media (hover: hover) { .cart-line:hover { background: var(--surface-hover); } }
.cart-line .cart-select { align-self: start; margin-top: var(--sp-1); }
.cart-line.is-unselected .cart-line-title,
.cart-line.is-unselected .cart-line-unit strong { color: var(--ink-faint); }
.cart-line.is-unselected .cart-line-media img { filter: grayscale(1); opacity: .6; }

.cart-line-media {
  display: block; width: 80px; height: 80px;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunk);
}
.cart-line-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-line-media .img-fallback { height: 100%; font-size: var(--fs-24); }
.cart-line-info { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cart-line-title {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  color: var(--ink); font-size: var(--fs-14); font-weight: var(--fw-medium);
  line-height: var(--lh-snug); text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .cart-line-title:hover { color: var(--accent); } }

.cart-line-variant {
  margin: 0; display: flex; align-items: center; gap: var(--sp-1); min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink-soft); font-size: var(--fs-12);
}
.cart-line-chip {
  flex: none; padding: 1px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--surface-sunk); color: var(--ink-soft);
  font-size: var(--fs-11); font-weight: var(--fw-medium);
}

.cart-line-unit {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2); font-size: var(--fs-13); color: var(--ink-soft);
}
.cart-line-unit strong { color: var(--ink); font-weight: var(--fw-semibold); }
.cart-line-unit strong.price-now { color: var(--accent); }
.cart-line-unit del.price-was { margin-inline-start: var(--sp-1); }

.cart-line-total bdi, .summary-value bdi,
.drawer-line-total, .order-total bdi { unicode-bidi: isolate; }

/* ---- cart line qty: global stepper + token-clean selects ------------------ */
.cart-qty-form {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2); margin-top: var(--sp-1);
}
/* qty selects (cart line) + address select (summary) share one voice */
.cart-qty-form select, .checkout-form select {
  min-height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--ink); font-size: var(--fs-body);
}
.cart-qty-form select { width: auto; min-width: 72px; }
.cart-update { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-13); }

/* ---- cart line remove: ghost danger, compact 32px hit area ---------------- */
.cart-remove-form { margin-top: var(--sp-1); }
.cart-remove {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 32px; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--danger); font-size: var(--fs-12); font-weight: var(--fw-medium); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .cart-remove:hover { background: var(--danger-tint); color: var(--danger); } }
.cart-remove:active, .drawer-remove:active, .checkout-form button.wide:active { transform: none; }
.cart-remove:disabled {
  color: var(--ink-disabled); background: var(--surface-sunk);
  opacity: var(--disabled-opacity); cursor: not-allowed;
}

/* ---- cart line total ------------------------------------------------------- */
.cart-line-total {
  margin: 0; align-self: start; text-align: end;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.cart-line-total-label { font-size: var(--fs-11); color: var(--ink-soft); }
.cart-line-total strong {
  color: var(--ink); font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold); white-space: nowrap;
}

/* ---- continue shopping: ghost accent link ---------------------------------- */
.cart-continue {
  display: inline-flex; align-items: center; gap: var(--sp-1); align-self: start;
  min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--radius-pill);
  color: var(--accent); font-size: var(--fs-13); font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .cart-continue:hover { background: var(--accent-tint); color: var(--accent-strong); } }

/* ========================= SUMMARY CARD + CHECKOUT ====================== */

.summary-card {
  position: static; align-self: start; padding: var(--sp-5);
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.summary-card h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--ink);
}

.summary-rows { display: flex; flex-direction: column; margin-block: var(--sp-2) var(--sp-3); }
.summary-row {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); padding-block: var(--sp-3);
  border-bottom: 1px dashed var(--line); font-size: var(--fs-body);
}
.summary-label { color: var(--ink-soft); }
.summary-value { color: var(--ink); font-weight: var(--fw-semibold); white-space: nowrap; }
.summary-row--discount .summary-label, .summary-row--discount .summary-value { color: var(--success); }
.summary-row--shipping .summary-value { font-weight: var(--fw-regular); color: var(--ink-soft); }
.summary-row--total { border-bottom: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.summary-row--total .summary-label { color: var(--ink); }
.summary-row--total .summary-value { color: var(--accent); font-size: var(--fs-20); font-weight: var(--fw-black); }

.summary-address {
  display: inline-block; margin-bottom: var(--sp-2);
  color: var(--accent); font-size: var(--fs-13); font-weight: var(--fw-semibold);
  text-decoration: none;
}
@media (hover: hover) {
  .summary-address:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }
}

.checkout-form label:not(.check) {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink);
}
.checkout-form .check { margin-block: var(--sp-3); font-size: var(--fs-11); color: var(--ink-faint); }
.checkout-form .check input[type="checkbox"] {
  flex: none; width: 16px; height: 16px; min-height: 0; accent-color: var(--accent);
}

.checkout-form button.wide {
  width: 100%; height: 52px; border-radius: var(--radius-sm);
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold);
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
  .checkout-form button.wide:hover {
    background: var(--accent-strong); border-color: var(--accent-strong);
    color: var(--accent-ink); box-shadow: var(--shadow-accent);
  }
}
.checkout-form button.wide:disabled {
  background: var(--surface-sunk); border-color: var(--line); color: var(--ink-disabled);
  opacity: var(--disabled-opacity); cursor: not-allowed; box-shadow: none;
}

/* ---- sticky summary bar: live selection total + CTA (cart.js drives it) ---- */
.cart-summary-bar {
  max-width: var(--container-narrow); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-alt); border-top: 1px solid var(--line);
}
.cart-summary-bar-label { margin: 0; font-size: var(--fs-11); color: var(--ink-soft); }
.cart-summary-bar-total {
  margin: 0; color: var(--accent); font-size: var(--fs-body-lg);
  font-weight: var(--fw-black); white-space: nowrap;
}
.cart-summary-bar-info { min-width: 0; }
.cart-bar-cta {
  flex: none; min-height: 44px; padding: 0 var(--sp-5);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
}
@media (max-width: 767px) {
  .cart-summary-bar {
    position: fixed; inset-inline: 0; bottom: var(--bottomnav-total-h); z-index: 60;
    max-width: none; margin: 0;
    padding: var(--sp-2) var(--sp-4);
    box-shadow: var(--shadow-3);
    border-top: 1px solid var(--line-strong);
  }
}
@media (min-width: 768px) {
  .cart-summary-bar {
    position: sticky; bottom: 0;
    background: var(--surface-alt);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
  }
}

/* ---- empty cart ------------------------------------------------------------- */
.cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-9); color: var(--ink-soft); text-align: center;
}
.cart-empty p { margin: 0; }
.cart-empty h2, .orders-empty h2 {
  margin: 0; color: var(--ink); font-size: var(--fs-title); font-weight: var(--fw-bold);
}
.cart-empty svg, .orders-empty svg { color: var(--ink-faint); }
.cart-empty-actions {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); margin-top: var(--sp-2);
}
/* CTA row on wider screens: the two global buttons sit side by side */
@media (min-width: 768px) { .cart-empty-actions { flex-direction: row; justify-content: center; } }

/* ============ DRAWER CART — line content only (shell: vitrin.css) ======= */

/* fragment head: "سبد خرید" + item count, above the list */
.drawer-lines-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding-block: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2);
}
.drawer-lines-title { color: var(--ink); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.drawer-lines-count { color: var(--ink-soft); font-size: var(--fs-12); }

.drawer-lines { margin: 0; padding: 0; list-style: none; }
.drawer-line {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--line);
}
.drawer-line:last-child { border-bottom: 0; }

.drawer-thumb {
  flex: none; width: 56px; height: 68px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunk);
}
.drawer-thumb.img-fallback { display: grid; place-items: center; font-size: var(--fs-18); }
.drawer-line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }

.drawer-line-title {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink); font-size: var(--fs-13); font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .drawer-line-title:hover { color: var(--accent); } }

.drawer-line-variant {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink-faint); font-size: var(--fs-11);
}
.drawer-line-meta {
  display: flex; align-items: baseline; gap: var(--sp-1);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink-soft); font-size: var(--fs-12);
}
.drawer-line-meta bdi { color: var(--ink); font-weight: var(--fw-semibold); }
.drawer-qty-form { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); }
.drawer-qty-controls { display: inline-flex; align-items: center; gap: var(--sp-1); }
.drawer-qty-input {
  width: 56px; min-height: 36px; padding: 0 var(--sp-1); text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--ink); font-size: var(--fs-body);
}
.drawer-qty-btn {
  min-height: 36px; min-width: 36px; padding: 0 var(--sp-2);
  border-radius: var(--radius-sm); font-size: var(--fs-body);
}
/* drawer footer: shipping row is secondary meta, total stays accent */
.drawer-row-shipping, .drawer-row-shipping bdi { color: var(--ink-soft); font-weight: var(--fw-regular); }

.drawer-line-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.drawer-remove-form { margin: 0; }
.drawer-remove {
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-faint);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .drawer-remove:hover { background: var(--danger-tint); color: var(--danger); } }

.drawer-line-total { color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap; }

/* ================================ ACCOUNT =============================== */

.account-hero {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6); margin-bottom: var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.account-avatar {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: var(--fs-24); font-weight: var(--fw-black);
}
.account-hero-info { min-width: 0; }
.account-hero-info h1 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--ink);
}
.account-hero-note { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }

.account-tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin-block: 0 var(--sp-4);
}
.account-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4); text-align: center; text-decoration: none;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--ink); font-size: var(--fs-13); font-weight: var(--fw-medium);
  transition: box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.account-tile svg { width: 22px; height: 22px; color: var(--accent); }
@media (hover: hover) {
  .account-tile:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); transform: translateY(-2px); }
}

.account-section { margin-bottom: var(--sp-4); }
.account-section h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-title-sm); font-weight: var(--fw-bold); color: var(--ink);
}

.account-follow-row { align-items: center; }
.account-follow-link {
  flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--accent); font-weight: var(--fw-semibold); text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
  .account-follow-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }
}
.account-follow-row form, .account-follow-row button { margin: 0; }
.account-privacy p { font-size: var(--fs-13); color: var(--ink-soft); }
.account-privacy form {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-3);
}
.account-privacy form button { margin: 0; }
.account-privacy-note { color: var(--ink-faint); font-size: var(--fs-12); }

/* logout: ghost danger — scoped over the global text-button voice */
.account-logout {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.account-logout button {
  margin: 0; min-height: 36px; padding: 0 var(--sp-3);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--danger-tint); color: var(--danger);
  font-weight: var(--fw-semibold); text-decoration: none;
}
@media (hover: hover) { .account-logout button:hover { background: var(--danger-tint); color: var(--danger); } }

/* ============================== ORDERS LIST ============================= */

.orders-head h1 {
  margin-block: var(--sp-5) var(--sp-4);
  font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--ink);
}
.orders-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.orders-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: 0; padding: var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .orders-row:hover { background: var(--surface-hover); box-shadow: var(--shadow-1); } }

.orders-row-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  flex: 1; min-width: 0;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-xs);
}
.orders-row-title {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: var(--fw-semibold);
  transition: color var(--t-fast) var(--ease-out);
}
.orders-row-chevron { flex: none; color: var(--ink-faint); }
@media (hover: hover) {
  .orders-row-link:hover .orders-row-title,
  .orders-row-link:hover .orders-row-chevron { color: var(--accent); }
}

.orders-row-side {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-1); text-align: end;
  font-size: var(--fs-12); color: var(--ink-soft);
}
.orders-row-total {
  color: var(--ink); font-size: var(--fs-body);
  font-weight: var(--fw-bold); white-space: nowrap;
}

.orders-empty {
  padding: var(--sp-7) var(--sp-4); text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
  color: var(--ink-soft);
}
.orders-empty p { margin: 0 0 var(--sp-2); }

/* ============================== ORDER DETAIL ============================ */

.order-head {
  padding: var(--sp-5); margin-bottom: var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.order-head h1 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--ink);
}
/* scoped notice: the global accent notice is not this page's voice */
.order-head .notice {
  margin: 0 0 var(--sp-2); padding: var(--sp-3);
  border: 0; border-radius: var(--radius-sm);
  background: var(--warning-tint); color: var(--warning); font-size: var(--fs-13);
}

.order-address {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; color: var(--ink-soft); font-size: var(--fs-13);
}
.order-address svg { flex: none; color: var(--ink-faint); }

.order-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--ink);
}
.order-total strong {
  color: var(--ink); font-size: var(--fs-20);
  font-weight: var(--fw-black); white-space: nowrap;
}

.order-suborder {
  margin-block: 0 var(--sp-3); padding: var(--sp-4);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.order-suborder-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.order-suborder-shop {
  margin: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--ink);
}
/* the per-suborder status chip is owned by ops.css — intentionally not here */

.order-lines {
  margin: 0; padding: var(--sp-3) 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.order-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-body); color: var(--ink-soft);
}
.order-line-title { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: var(--fw-medium); }
.order-line-total { flex: none; color: var(--ink); font-weight: var(--fw-semibold); white-space: nowrap; }
.order-line--shipping { font-size: var(--fs-13); color: var(--ink-soft); }
.order-line--shipping .order-line-title, .order-line--shipping bdi { font-weight: var(--fw-regular); color: var(--ink-soft); }
.order-action { margin-top: var(--sp-3); }
.order-action button { margin: 0; width: 100%; }

.order-ledger {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  color: var(--ink-soft); font-size: var(--fs-13);
}

/* ========== RESPONSIVE — mobile-first: 768 / 1024 (max-767 guard) ======= */

@media (max-width: 767px) {
  /* The body keeps the exact shared tabbar reserve. Only a non-empty cart
     adds room inside main for its separate, fixed 60px summary bar. */
  .cart-page main:has(.cart-summary-bar) { padding-bottom: 64px; }
  .cart-line { grid-template-columns: auto 80px minmax(0, 1fr); }
  .cart-line-total {
    grid-column: 2 / -1; flex-direction: row; align-items: baseline;
    justify-content: space-between; padding-top: var(--sp-2);
    border-top: 1px dashed var(--line);
  }
  .cart-group-shipping { white-space: normal; }
  .orders-row { flex-wrap: wrap; }
  .orders-row-link { flex: 1 1 100%; }
  .orders-row-side {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; padding-top: var(--sp-2); border-top: 1px dashed var(--line);
  }
  .order-suborder-head { flex-wrap: wrap; }
  .account-hero { padding: var(--sp-4); gap: var(--sp-3); }
}

@media (min-width: 768px) {
  .account-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .order-action button { width: auto; }
}

@media (min-width: 1024px) {
  .summary-card { position: sticky; top: calc(var(--header-h-lg) + var(--sp-4)); }
}

/* ---- reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cart-line, .cart-line-title, .cart-remove, .cart-continue,
  .checkout-form button.wide, .summary-address, .cart-bar-cta,
  .account-tile, .account-follow-link, .account-logout button,
  .orders-row, .orders-row-title, .orders-row-link .orders-row-chevron,
  .drawer-line-title, .drawer-remove { transition: none; }
  .cart-line:hover, .account-tile:hover { transform: none; }
}