/* ================================================================
   Resayil — Webshop cart + checkout overlay (rs-webshop-cart.css)
   Phase 24.9, Plan 24.9-03
   ----------------------------------------------------------------
   Scope: Webshop transactional routes ONLY
     Portal: /cart, /checkout, /orders, /order/*
   Sibling of rs-webshop.css (Plan 24.9-02 = storefront + product-detail);
   no CSS selector overlap. 24.9-02 owns listing + product-detail;
   THIS file owns cart + checkout + orders + order-detail.
   Status tokens used: --rs-success, --rs-warning, --rs-danger, --rs-info
     Path chosen: BARE (tokens verified present in resayil-brand.css
     lines 45-48; fallback syntax would have been `var(--rs-success,#1DB954)`
     but is not needed). Fallback hex kept inline as belt+braces for
     color-mix() arguments where browsers may reject a missing token.
   Consumes --rs-* tokens from resayil-brand.css. No new custom properties.
   Activation of cart card layout requires rs-webshop-checkout.js to tag
   cart-container with data-rs-webshop-cart-bento="true" (defensive —
   most rules key off data-path alone and work without the attribute).
   Depends on: resayil-brand.css (tokens), rs-webshop.css (shared page
   chrome for the site frame around cart/checkout), tabler-sprite.svg
   (Phase 24-01). PCI-DSS consideration: CSS contains no selectors that
   target payment-card input values, CVV, or any card-bearing form field
   by name; all rules operate on container chrome / label / validation
   layers only.
   ================================================================ */

/* -----------------------------------------------------------------
   S1 — Typography + baseline inheritance
   All 8 transactional scope roots (4 data-path + 4 data-route) pick
   up brand sans stack, foreground token, subtle bg, and brand line-
   height so every cart/checkout/order surface reads as "Resayil"
   regardless of where Frappe portal defaults try to apply.
   ----------------------------------------------------------------- */
body[data-path="cart"],
body[data-path="checkout"],
body[data-path="orders"],
body[data-path^="order/"],
body[data-route^="/cart"],
body[data-route^="/checkout"],
body[data-route^="/orders"],
body[data-route^="/order"] {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  background: var(--rs-bg);
  line-height: var(--rs-leading-normal);
}

body[data-path="cart"] h1,
body[data-path="checkout"] h1,
body[data-path="orders"] h1,
body[data-path^="order/"] h1,
body[data-route^="/cart"] h1,
body[data-route^="/checkout"] h1,
body[data-route^="/orders"] h1,
body[data-route^="/order"] h1 {
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  font-weight: 700;
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-4);
}

body[data-path="cart"] h2,
body[data-path="checkout"] h2,
body[data-path="orders"] h2,
body[data-path^="order/"] h2,
body[data-route^="/cart"] h2,
body[data-route^="/checkout"] h2 {
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
}

/* Portal container chrome for the 4 transactional routes. */
body[data-path="cart"] .cart-container,
body[data-path="cart"] .cart-page,
body[data-route^="/cart"] .cart-container,
body[data-path="checkout"] .checkout-container,
body[data-path="checkout"] .checkout-form,
body[data-route^="/checkout"] .checkout-container,
body[data-path="orders"] .orders-list,
body[data-path="orders"] .my-orders,
body[data-route^="/orders"] .orders-list,
body[data-path^="order/"] .order-details,
body[data-path^="order/"] .order-container,
body[data-route^="/order"] .order-view {
  background: var(--rs-bg);
  padding: var(--rs-space-5);
  max-width: 1280px;
  margin: 0 auto;
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S2 — Cart page: item row cards + cart summary sidebar + coupon
   Cart items render as card rows with image left, info middle,
   quantity + remove right. Cart summary sidebar sticks on desktop,
   stacks on mobile.
   ----------------------------------------------------------------- */
body[data-path="cart"] .cart-item,
body[data-path="cart"] .cart-item-row,
body[data-path="cart"] .cart-product,
body[data-path="cart"] tr.cart-row,
body[data-route^="/cart"] .cart-item,
body[data-route^="/cart"] tr.cart-row {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  margin-bottom: var(--rs-space-3);
  display: flex;
  align-items: center;
  gap: var(--rs-space-4);
  transition: border-color var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="cart"] .cart-item:hover,
body[data-route^="/cart"] .cart-item:hover {
  border-color: var(--rs-accent);
}

/* Cart item image (square crop, brand radius) */
body[data-path="cart"] .cart-item-image,
body[data-path="cart"] .cart-product-image,
body[data-route^="/cart"] .cart-item-image,
body[data-route^="/cart"] .cart-product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--rs-radius-sm);
  flex-shrink: 0;
}

/* Cart item info block */
body[data-path="cart"] .cart-item-details,
body[data-route^="/cart"] .cart-item-details {
  flex: 1;
  color: var(--rs-fg);
}

body[data-path="cart"] .cart-product-name,
body[data-path="cart"] .cart-item-name,
body[data-route^="/cart"] .cart-product-name {
  font-weight: 600;
  color: var(--rs-fg);
  font-size: var(--rs-text-base);
  margin-bottom: var(--rs-space-1);
}

body[data-path="cart"] .cart-product-price,
body[data-path="cart"] .cart-item-price,
body[data-route^="/cart"] .cart-product-price {
  color: var(--rs-accent);
  font-weight: 700;
  font-size: var(--rs-text-lg);
}

/* Quantity spinner (mirrors 24.9-02 product-detail pattern) */
body[data-path="cart"] .number-spinner,
body[data-path="cart"] .cart-qty,
body[data-route^="/cart"] .number-spinner {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  overflow: hidden;
  background: var(--rs-surface);
}

body[data-path="cart"] .number-spinner button,
body[data-path="cart"] .number-spinner .btn-number,
body[data-route^="/cart"] .number-spinner button {
  background: var(--rs-surface);
  color: var(--rs-fg);
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  transition: background var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="cart"] .number-spinner button:hover,
body[data-route^="/cart"] .number-spinner button:hover {
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
}

body[data-path="cart"] .number-spinner input,
body[data-path="cart"] .cart-qty input,
body[data-route^="/cart"] .number-spinner input {
  width: 48px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
  padding: var(--rs-space-1);
}

/* Remove button */
body[data-path="cart"] .cart-remove,
body[data-path="cart"] .btn-remove,
body[data-path="cart"] [data-action="remove-from-cart"],
body[data-route^="/cart"] .cart-remove,
body[data-route^="/cart"] .btn-remove {
  color: var(--rs-fg-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--rs-space-2);
  border-radius: var(--rs-radius-sm);
  transition: color var(--rs-duration-fast) var(--rs-ease),
              background var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="cart"] .cart-remove:hover,
body[data-path="cart"] .btn-remove:hover,
body[data-route^="/cart"] .cart-remove:hover {
  color: var(--rs-danger);
  background: color-mix(in oklab, var(--rs-danger) 8%, transparent);
}

/* Cart summary sidebar */
body[data-path="cart"] .cart-summary,
body[data-path="cart"] .order-summary,
body[data-path="cart"] .cart-totals,
body[data-path="cart"] .summary-totals,
body[data-route^="/cart"] .cart-summary,
body[data-route^="/cart"] .cart-totals {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  position: sticky;
  top: var(--rs-space-4);
  color: var(--rs-fg);
  box-shadow: var(--rs-shadow-sm);
}

body[data-path="cart"] .cart-subtotal,
body[data-path="cart"] .cart-tax,
body[data-route^="/cart"] .cart-subtotal,
body[data-route^="/cart"] .cart-tax {
  display: flex;
  justify-content: space-between;
  padding: var(--rs-space-2) 0;
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-sm);
}

body[data-path="cart"] .cart-total,
body[data-path="cart"] .grand-total,
body[data-route^="/cart"] .cart-total,
body[data-route^="/cart"] .grand-total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--rs-space-3);
  margin-top: var(--rs-space-2);
  border-top: 1px solid var(--rs-border);
  font-weight: 700;
  font-size: var(--rs-text-lg);
  color: var(--rs-fg);
}

/* Coupon input pill */
body[data-path="cart"] .coupon-code,
body[data-path="cart"] #coupon-code,
body[data-route^="/cart"] .coupon-code {
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-full);
  padding: var(--rs-space-2) var(--rs-space-4);
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
  width: 100%;
  margin-top: var(--rs-space-3);
  transition: border-color var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="cart"] .coupon-code:focus,
body[data-route^="/cart"] .coupon-code:focus {
  outline: none;
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px var(--rs-accent-soft);
}

body[data-path="cart"] .apply-coupon,
body[data-route^="/cart"] .apply-coupon {
  background: transparent;
  color: var(--rs-accent);
  border: 1px solid var(--rs-accent);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-2) var(--rs-space-3);
  font-weight: 500;
  cursor: pointer;
  margin-top: var(--rs-space-2);
  transition: background var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="cart"] .apply-coupon:hover,
body[data-route^="/cart"] .apply-coupon:hover {
  background: var(--rs-accent-soft);
}

/* Proceed-to-checkout CTA */
body[data-path="cart"] .btn-checkout,
body[data-path="cart"] #btn-proceed-checkout,
body[data-path="cart"] [data-action="checkout"],
body[data-route^="/cart"] .btn-checkout {
  background: var(--rs-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-5);
  font-weight: 600;
  font-size: var(--rs-text-base);
  display: block;
  width: 100%;
  margin-top: var(--rs-space-4);
  cursor: pointer;
  transition: background var(--rs-duration-fast) var(--rs-ease),
              transform var(--rs-duration-fast) var(--rs-ease),
              box-shadow var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="cart"] .btn-checkout:hover,
body[data-route^="/cart"] .btn-checkout:hover {
  background: var(--rs-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--rs-shadow-md);
}

body[data-path="cart"] .btn-checkout:disabled,
body[data-route^="/cart"] .btn-checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Cart-item bento activation (defensive — most rules above work
   without the attribute; when the rs-webshop-checkout.js tagger fires,
   a tagged container can use the grid layout). */
body[data-path="cart"] [data-rs-webshop-cart-bento="true"],
body[data-route^="/cart"] [data-rs-webshop-cart-bento="true"] {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S3 — Checkout form: fields + labels + validation state
   Form fields adopt Resayil pill-ish rectangular shape, focus lift,
   validation error state. invalid-feedback text renders in danger
   color so vendor errors look native.
   ----------------------------------------------------------------- */
body[data-path="checkout"] .form-control,
body[data-path="checkout"] input[type="text"],
body[data-path="checkout"] input[type="email"],
body[data-path="checkout"] input[type="tel"],
body[data-path="checkout"] input[type="number"],
body[data-path="checkout"] textarea,
body[data-path="checkout"] select,
body[data-route^="/checkout"] .form-control,
body[data-route^="/checkout"] input[type="text"],
body[data-route^="/checkout"] input[type="email"] {
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-4);
  color: var(--rs-fg);
  font-size: var(--rs-text-base);
  font-family: var(--rs-font-sans);
  width: 100%;
  transition: border-color var(--rs-duration-fast) var(--rs-ease),
              box-shadow var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="checkout"] .form-control:focus,
body[data-path="checkout"] input:focus,
body[data-path="checkout"] textarea:focus,
body[data-path="checkout"] select:focus,
body[data-route^="/checkout"] .form-control:focus {
  border-color: var(--rs-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--rs-accent-soft);
}

/* Validation error state — input */
body[data-path="checkout"] .form-control.is-invalid,
body[data-path="checkout"] .has-error .form-control,
body[data-path="checkout"] .has-error input,
body[data-route^="/checkout"] .form-control.is-invalid {
  border-color: var(--rs-danger);
  background: color-mix(in oklab, var(--rs-danger) 5%, var(--rs-bg));
}

body[data-path="checkout"] .form-control.is-invalid:focus,
body[data-route^="/checkout"] .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rs-danger) 20%, transparent);
}

/* Inline validation messages */
body[data-path="checkout"] .invalid-feedback,
body[data-path="checkout"] .error-message,
body[data-path="checkout"] .field-error,
body[data-path="checkout"] .form-error,
body[data-route^="/checkout"] .invalid-feedback,
body[data-route^="/checkout"] .error-message {
  color: var(--rs-danger);
  font-size: var(--rs-text-sm);
  margin-top: var(--rs-space-1);
  display: block;
}

/* Top-of-form banner error */
body[data-path="checkout"] .alert-danger,
body[data-path="checkout"] .alert.alert-danger,
body[data-path="checkout"] .checkout-error-banner,
body[data-route^="/checkout"] .alert-danger,
body[data-route^="/checkout"] .checkout-error-banner {
  background: color-mix(in oklab, var(--rs-danger) 10%, var(--rs-surface));
  border: 1px solid var(--rs-danger);
  color: var(--rs-danger);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-4);
  margin-bottom: var(--rs-space-4);
  font-size: var(--rs-text-sm);
  font-weight: 500;
}

/* Labels */
body[data-path="checkout"] label,
body[data-path="checkout"] .form-label,
body[data-path="checkout"] .control-label,
body[data-route^="/checkout"] label,
body[data-route^="/checkout"] .form-label {
  font-weight: 500;
  font-size: var(--rs-text-sm);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-1);
  display: block;
}

/* Input group wrapper */
body[data-path="checkout"] .input-group,
body[data-path="checkout"] .form-group,
body[data-route^="/checkout"] .input-group {
  margin-bottom: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S4 — Checkout: address cards + payment method picker + place CTA
   Address options and payment options render as selectable cards.
   Selected state is accent-bordered with accent-soft fill; hover
   state is accent border only.
   ----------------------------------------------------------------- */
body[data-path="checkout"] .address-card,
body[data-path="checkout"] .shipping-address,
body[data-path="checkout"] .billing-address,
body[data-path="checkout"] .address-picker .address-option,
body[data-route^="/checkout"] .address-card {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  margin-bottom: var(--rs-space-3);
  cursor: pointer;
  transition: border-color var(--rs-duration-fast) var(--rs-ease),
              background var(--rs-duration-fast) var(--rs-ease);
  color: var(--rs-fg);
}

body[data-path="checkout"] .address-card:hover,
body[data-route^="/checkout"] .address-card:hover {
  border-color: var(--rs-accent);
}

body[data-path="checkout"] .address-card.selected,
body[data-path="checkout"] .address-card.active,
body[data-path="checkout"] .address-card:has(input:checked),
body[data-route^="/checkout"] .address-card.selected {
  border-color: var(--rs-accent);
  background: var(--rs-accent-soft);
}

/* Payment methods */
body[data-path="checkout"] .payment-methods,
body[data-route^="/checkout"] .payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2);
  margin-bottom: var(--rs-space-4);
}

body[data-path="checkout"] .payment-method-option,
body[data-path="checkout"] .payment-radio,
body[data-route^="/checkout"] .payment-method-option {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-4);
  display: flex;
  align-items: center;
  gap: var(--rs-space-3);
  cursor: pointer;
  color: var(--rs-fg);
  transition: border-color var(--rs-duration-fast) var(--rs-ease),
              background var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="checkout"] .payment-method-option:hover,
body[data-route^="/checkout"] .payment-method-option:hover {
  border-color: var(--rs-accent);
}

body[data-path="checkout"] .payment-method-option.active,
body[data-path="checkout"] .payment-method-option.selected,
body[data-path="checkout"] .payment-method-option:has(input:checked),
body[data-route^="/checkout"] .payment-method-option.active {
  border-color: var(--rs-accent);
  background: var(--rs-accent-soft);
}

/* Place order CTA */
body[data-path="checkout"] .btn-place-order,
body[data-path="checkout"] #btn-place-order,
body[data-path="checkout"] [data-action="place-order"],
body[data-path="checkout"] .checkout-submit,
body[data-route^="/checkout"] .btn-place-order,
body[data-route^="/checkout"] .checkout-submit {
  background: var(--rs-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-5);
  font-weight: 600;
  font-size: var(--rs-text-base);
  width: 100%;
  margin-top: var(--rs-space-5);
  cursor: pointer;
  transition: background var(--rs-duration-fast) var(--rs-ease),
              transform var(--rs-duration-fast) var(--rs-ease),
              box-shadow var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="checkout"] .btn-place-order:hover,
body[data-route^="/checkout"] .btn-place-order:hover {
  background: var(--rs-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--rs-shadow-md);
}

body[data-path="checkout"] .btn-place-order:disabled,
body[data-route^="/checkout"] .btn-place-order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Checkout progress indicator (if vendor renders one) */
body[data-path="checkout"] .checkout-progress,
body[data-path="checkout"] .progress-steps,
body[data-route^="/checkout"] .checkout-progress {
  display: flex;
  justify-content: space-between;
  gap: var(--rs-space-3);
  margin-bottom: var(--rs-space-5);
  padding: var(--rs-space-3) 0;
  border-bottom: 1px solid var(--rs-border);
}

body[data-path="checkout"] .checkout-progress .step,
body[data-path="checkout"] .progress-steps .step,
body[data-route^="/checkout"] .checkout-progress .step {
  flex: 1;
  text-align: center;
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-sm);
  font-weight: 500;
}

body[data-path="checkout"] .checkout-progress .step.active,
body[data-path="checkout"] .progress-steps .step.active,
body[data-route^="/checkout"] .checkout-progress .step.active {
  color: var(--rs-accent);
  font-weight: 600;
}

/* -----------------------------------------------------------------
   S5 — Orders list: order cards + status badges
   Orders list renders each order as a card row; status pills use
   semantic status tokens (success/warning/info/danger) with 15%
   token-tinted background + full-strength token text.
   ----------------------------------------------------------------- */
body[data-path="orders"] .order-card,
body[data-path="orders"] .order-row,
body[data-path="orders"] tr.order-row,
body[data-route^="/orders"] .order-card {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  margin-bottom: var(--rs-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2);
  color: var(--rs-fg);
  transition: border-color var(--rs-duration-fast) var(--rs-ease),
              box-shadow var(--rs-duration-fast) var(--rs-ease);
}

body[data-path="orders"] .order-card:hover,
body[data-route^="/orders"] .order-card:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-sm);
}

body[data-path="orders"] .order-card .order-number,
body[data-path="orders"] .order-row .order-number,
body[data-route^="/orders"] .order-card .order-number {
  font-weight: 600;
  color: var(--rs-fg);
  font-size: var(--rs-text-base);
}

body[data-path="orders"] .order-card .order-date,
body[data-path="orders"] .order-row .order-date,
body[data-route^="/orders"] .order-card .order-date {
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-sm);
}

/* Status badge — pill shape, semantic color */
body[data-path="orders"] .order-status,
body[data-path="orders"] .status-badge,
body[data-path^="order/"] .order-status,
body[data-path^="order/"] .status-badge,
body[data-route^="/orders"] .order-status,
body[data-route^="/order"] .order-status {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-1);
  padding: var(--rs-space-1) var(--rs-space-3);
  border-radius: var(--rs-radius-full);
  font-weight: 500;
  font-size: var(--rs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--rs-accent-soft);
  color: var(--rs-accent);
}

/* Status = Paid / Delivered (success) */
body[data-path="orders"] .order-status[data-status="Paid"],
body[data-path="orders"] .order-status[data-status="Delivered"],
body[data-path="orders"] .order-status.status-paid,
body[data-path="orders"] .order-status.status-delivered,
body[data-path^="order/"] .order-status[data-status="Paid"],
body[data-path^="order/"] .order-status[data-status="Delivered"],
body[data-route^="/orders"] .order-status[data-status="Paid"],
body[data-route^="/order"] .order-status[data-status="Paid"] {
  background: color-mix(in oklab, var(--rs-success) 15%, transparent);
  color: var(--rs-success);
}

/* Status = Pending (warning) */
body[data-path="orders"] .order-status[data-status="Pending"],
body[data-path="orders"] .order-status.status-pending,
body[data-path^="order/"] .order-status[data-status="Pending"],
body[data-route^="/orders"] .order-status[data-status="Pending"],
body[data-route^="/order"] .order-status[data-status="Pending"] {
  background: color-mix(in oklab, var(--rs-warning) 15%, transparent);
  color: var(--rs-warning);
}

/* Status = Shipped / In Transit (info) */
body[data-path="orders"] .order-status[data-status="Shipped"],
body[data-path="orders"] .order-status[data-status="In Transit"],
body[data-path="orders"] .order-status.status-shipped,
body[data-path^="order/"] .order-status[data-status="Shipped"],
body[data-route^="/orders"] .order-status[data-status="Shipped"],
body[data-route^="/order"] .order-status[data-status="Shipped"] {
  background: color-mix(in oklab, var(--rs-info) 15%, transparent);
  color: var(--rs-info);
}

/* Status = Cancelled / Refunded (danger) */
body[data-path="orders"] .order-status[data-status="Cancelled"],
body[data-path="orders"] .order-status[data-status="Refunded"],
body[data-path="orders"] .order-status.status-cancelled,
body[data-path="orders"] .order-status.status-refunded,
body[data-path^="order/"] .order-status[data-status="Cancelled"],
body[data-route^="/orders"] .order-status[data-status="Cancelled"],
body[data-route^="/order"] .order-status[data-status="Cancelled"] {
  background: color-mix(in oklab, var(--rs-danger) 15%, transparent);
  color: var(--rs-danger);
}

/* Empty orders state */
body[data-path="orders"] .empty-state,
body[data-path="orders"] .no-orders,
body[data-route^="/orders"] .empty-state {
  text-align: center;
  padding: var(--rs-space-8) var(--rs-space-5);
  color: var(--rs-fg-muted);
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
}

/* -----------------------------------------------------------------
   S6 — Order detail: header + line-items table + totals + payment
   Order detail page splits into header (order number + date + status),
   line items table, totals block, payment/shipping info panels.
   ----------------------------------------------------------------- */
body[data-path^="order/"] .order-details,
body[data-path^="order/"] .order-view,
body[data-route^="/order"] .order-details,
body[data-route^="/order"] .order-view {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  color: var(--rs-fg);
  box-shadow: var(--rs-shadow-sm);
}

body[data-path^="order/"] .order-header,
body[data-route^="/order"] .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--rs-space-4);
  border-bottom: 1px solid var(--rs-border);
  margin-bottom: var(--rs-space-4);
  flex-wrap: wrap;
  gap: var(--rs-space-3);
}

body[data-path^="order/"] .order-number,
body[data-route^="/order"] .order-number {
  font-weight: 700;
  font-size: var(--rs-text-xl);
  color: var(--rs-fg);
}

body[data-path^="order/"] .order-date,
body[data-route^="/order"] .order-date {
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-sm);
}

/* Line-items table */
body[data-path^="order/"] .order-line-items,
body[data-path^="order/"] .order-items-table,
body[data-path^="order/"] table.order-items,
body[data-route^="/order"] .order-line-items,
body[data-route^="/order"] table.order-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--rs-space-3);
}

body[data-path^="order/"] .order-line-items th,
body[data-path^="order/"] .order-items-table th,
body[data-path^="order/"] table.order-items th,
body[data-route^="/order"] .order-line-items th {
  background: var(--rs-bg);
  color: var(--rs-fg-muted);
  font-weight: 500;
  font-size: var(--rs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--rs-space-3);
  text-align: left;
  border-bottom: 1px solid var(--rs-border);
}

body[data-path^="order/"] .order-line-items td,
body[data-path^="order/"] .order-items-table td,
body[data-path^="order/"] table.order-items td,
body[data-route^="/order"] .order-line-items td {
  padding: var(--rs-space-3);
  border-bottom: 1px solid var(--rs-border);
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
}

/* Totals block */
body[data-path^="order/"] .order-totals,
body[data-route^="/order"] .order-totals {
  margin-top: var(--rs-space-5);
  padding-top: var(--rs-space-4);
  border-top: 2px solid var(--rs-border);
}

body[data-path^="order/"] .order-subtotal,
body[data-path^="order/"] .order-tax,
body[data-route^="/order"] .order-subtotal,
body[data-route^="/order"] .order-tax {
  display: flex;
  justify-content: space-between;
  padding: var(--rs-space-2) 0;
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-sm);
}

body[data-path^="order/"] .order-grand-total,
body[data-route^="/order"] .order-grand-total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--rs-space-3);
  margin-top: var(--rs-space-2);
  border-top: 1px solid var(--rs-border);
  font-weight: 700;
  font-size: var(--rs-text-xl);
  color: var(--rs-accent);
}

/* Payment + shipping info panels */
body[data-path^="order/"] .payment-info,
body[data-path^="order/"] .shipping-info,
body[data-route^="/order"] .payment-info,
body[data-route^="/order"] .shipping-info {
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-sm);
  padding: var(--rs-space-3) var(--rs-space-4);
  margin-top: var(--rs-space-3);
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
}

body[data-path^="order/"] .payment-info .label,
body[data-path^="order/"] .shipping-info .label,
body[data-route^="/order"] .payment-info .label {
  color: var(--rs-fg-muted);
  font-weight: 500;
  font-size: var(--rs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* -----------------------------------------------------------------
   S7 — Dark mode — re-resolve key surfaces under the dark-theme root.
   The --rs-* tokens already re-resolve in resayil-brand.css, but we
   re-assert surface/border on the highest-value cards so any inline
   vendor style gets beaten by our scoped selector.
   ----------------------------------------------------------------- */
body[data-theme="dark"][data-path="cart"] .cart-item,
body[data-theme="dark"][data-path="cart"] .cart-summary,
body[data-theme="dark"][data-route^="/cart"] .cart-item {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-path="checkout"] .form-control,
body[data-theme="dark"][data-path="checkout"] input,
body[data-theme="dark"][data-path="checkout"] textarea,
body[data-theme="dark"][data-path="checkout"] select,
body[data-theme="dark"][data-route^="/checkout"] .form-control {
  background: var(--rs-bg);
  border-color: var(--rs-border);
  color: var(--rs-fg);
}

body[data-theme="dark"][data-path="checkout"] .address-card,
body[data-theme="dark"][data-path="checkout"] .payment-method-option,
body[data-theme="dark"][data-route^="/checkout"] .address-card {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-path="orders"] .order-card,
body[data-theme="dark"][data-route^="/orders"] .order-card {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-path^="order/"] .order-details,
body[data-theme="dark"][data-route^="/order"] .order-details {
  background: var(--rs-surface);
  border-color: var(--rs-border);
  box-shadow: var(--rs-shadow-lg);
}

body[data-theme="dark"][data-path^="order/"] .order-line-items th,
body[data-theme="dark"][data-route^="/order"] .order-line-items th {
  background: var(--rs-bg);
}

/* -----------------------------------------------------------------
   S8 — RTL (Arabic + Hebrew) — Arabic font family + right-align
   surfaces. Flex-direction reverses on cart item rows so product
   image renders right, info middle, quantity+remove left.
   ----------------------------------------------------------------- */
[dir="rtl"] body[data-path="cart"],
[dir="rtl"] body[data-path="checkout"],
[dir="rtl"] body[data-path="orders"],
[dir="rtl"] body[data-path^="order/"],
[dir="rtl"] body[data-route^="/cart"],
[dir="rtl"] body[data-route^="/checkout"],
[dir="rtl"] body[data-route^="/orders"],
[dir="rtl"] body[data-route^="/order"] {
  font-family: var(--rs-font-arabic);
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body[data-path="cart"] .cart-item,
[dir="rtl"] body[data-route^="/cart"] .cart-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] body[data-path="cart"] .cart-subtotal,
[dir="rtl"] body[data-path="cart"] .cart-tax,
[dir="rtl"] body[data-path="cart"] .cart-total,
[dir="rtl"] body[data-route^="/cart"] .cart-total {
  flex-direction: row-reverse;
}

[dir="rtl"] body[data-path="checkout"] label,
[dir="rtl"] body[data-path="checkout"] .form-label,
[dir="rtl"] body[data-path="checkout"] .address-card,
[dir="rtl"] body[data-path="checkout"] .payment-method-option,
[dir="rtl"] body[data-route^="/checkout"] label {
  text-align: right;
}

[dir="rtl"] body[data-path="orders"] .order-card,
[dir="rtl"] body[data-route^="/orders"] .order-card {
  text-align: right;
}

[dir="rtl"] body[data-path^="order/"] .order-header,
[dir="rtl"] body[data-route^="/order"] .order-header {
  flex-direction: row-reverse;
}

[dir="rtl"] body[data-path^="order/"] .order-line-items th,
[dir="rtl"] body[data-path^="order/"] .order-line-items td,
[dir="rtl"] body[data-route^="/order"] .order-line-items th,
[dir="rtl"] body[data-route^="/order"] .order-line-items td {
  text-align: right;
}

[dir="rtl"] body[data-path^="order/"] .order-subtotal,
[dir="rtl"] body[data-path^="order/"] .order-tax,
[dir="rtl"] body[data-path^="order/"] .order-grand-total,
[dir="rtl"] body[data-route^="/order"] .order-grand-total {
  flex-direction: row-reverse;
}

/* -----------------------------------------------------------------
   S9 — Reduced motion — honor user preference by removing all
   hover transforms and transitions on transactional surfaces.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-path="cart"] .cart-item,
  body[data-path="cart"] .btn-checkout,
  body[data-path="cart"] .number-spinner button,
  body[data-path="cart"] .cart-remove,
  body[data-path="checkout"] .form-control,
  body[data-path="checkout"] .address-card,
  body[data-path="checkout"] .payment-method-option,
  body[data-path="checkout"] .btn-place-order,
  body[data-path="orders"] .order-card,
  body[data-route^="/cart"] .btn-checkout,
  body[data-route^="/checkout"] .btn-place-order,
  body[data-route^="/orders"] .order-card {
    transition: none;
  }
  body[data-path="cart"] .btn-checkout:hover,
  body[data-path="checkout"] .btn-place-order:hover,
  body[data-path="orders"] .order-card:hover,
  body[data-route^="/cart"] .btn-checkout:hover,
  body[data-route^="/checkout"] .btn-place-order:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------
   SCOPE GUARDS (Plan 24.9-03)
   This file MUST NOT emit rules matching:
   - :root, html, body (unqualified)
   - body[data-route^="/app"]:not(...) anything outside cart/checkout/orders/order
   - Plan 24.9-02 scope roots: data-path^="all-products", data-path^="shop-by-category",
     data-path^="product/", data-path^="product_search", data-path^="wishlist",
     data-path^="customer_reviews" (those belong to Plan 24.9-02)
   - Cross-app routes (helpdesk, insights, builder, raven, subscribe,
     loyalty, whatsapp)
   Sibling plan scope: 24.9-02 owns storefront listing + product-detail;
   THIS plan owns cart + checkout + orders + order-detail. Non-overlap
   enforced by scripts/verify_webshop_cart_scope.py (Task 3) and by
   scripts/verify_webshop_css_scope.py (Plan 24.9-02 regression).
   PCI-DSS: No selectors target cardholder-data inputs by name; all
   styling operates on container chrome / label / validation containers.
   ----------------------------------------------------------------- */