/* =====================================================================
   Account Center - SHARED layer (order + message + future account pages)
   ---------------------------------------------------------------------
   Common code maintained in ONE place for every account-center page.
   Page-specific styles (order-list.css / order-detail.css / order-review.css
   / account-message.css) load AFTER this file.

   Extracted here (serves .ol-page / .od-page / .msg-page / .wl-page / .ad-page):
     - Google Fonts import (was duplicated across files)
     - Design tokens - unified under --o-*; one definition now serves all
       account-center scopes (the old --ol-* / --od-* were byte-identical
       values behind different prefixes)
     - Base reset / a11y focus ring / button & textarea & input reset
     - Page layout  (.layout / .main)
     - Order card base (.card + entrance animation)
     - Product row (.item - shared by order list & detail; detail reuses
       the list's .ol-item markup so the two are identical)
   Each page keeps its own scope class so the redesign never leaks to the
   rest of the site; the message list reuses this file instead of
   redefining tokens / layout / reset.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

.ol-page,
.od-page,
.msg-page,
.wl-page,
.ad-page {
  /* tokens now from base-tokens.css (:root) — do not redefine */
  font-family: var(--o-font-body);
  color: var(--o-ink);
  background: var(--o-bg);            /* page bg = --o-bg; unify all account-center pages with cart-page */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* ---------- a11y focus visibility ---------- */
.ol-page a:focus-visible,
.ol-page button:focus-visible,
.ol-page input:focus-visible,
.ol-page textarea:focus-visible,
.od-page a:focus-visible,
.od-page button:focus-visible,
.od-page input:focus-visible,
.od-page textarea:focus-visible,
.msg-page a:focus-visible,
.msg-page button:focus-visible,
.msg-page input:focus-visible,
.msg-page textarea:focus-visible,
.msg-page label:focus-visible,
.wl-page a:focus-visible,
.wl-page button:focus-visible,
.wl-page input:focus-visible,
.wl-page textarea:focus-visible,
.wl-page label:focus-visible,
.ad-page a:focus-visible,
.ad-page button:focus-visible,
.ad-page input:focus-visible,
.ad-page textarea:focus-visible,
.ad-page label:focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 2px;
}
.ol-page button,
.ol-page textarea,
.od-page button,
.od-page textarea,
.msg-page button,
.msg-page textarea,
.msg-page input,
.wl-page button,
.wl-page textarea,
.wl-page input,
.ad-page button,
.ad-page textarea,
.ad-page input {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

/* ====================== PAGE LAYOUT (no Bootstrap) ======================
   Container max-width mirrors the project's .container overrides in main.css:
     >=1200px → 1180px, >=1300px → 1280px, >=1400px → 1380px */
.ol-page .ol-layout,
.od-page .od-layout,
.msg-page .msg-layout,
.wl-page .wl-layout,
.ad-page .ad-layout {
  width: 100%;
  margin: 0 auto;
  padding: 36px 10px 48px;
  display: block;
}
@media (min-width: 1200px) { .ol-page .ol-layout, .od-page .od-layout, .msg-page .msg-layout, .wl-page .wl-layout, .ad-page .ad-layout { max-width: 1180px; } }
@media (min-width: 1300px) { .ol-page .ol-layout, .od-page .od-layout, .msg-page .msg-layout, .wl-page .wl-layout, .ad-page .ad-layout { max-width: 1280px; } }
@media (min-width: 1400px) { .ol-page .ol-layout, .od-page .od-layout, .msg-page .msg-layout, .wl-page .wl-layout, .ad-page .ad-layout { max-width: 1380px; } }

.ol-page .ol-main,
.od-page .od-main,
.msg-page .msg-main,
.wl-page .wl-main,
.ad-page .ad-main {
  width: 100%;
}

/* ============================ ORDER CARD BASE ==========================
   List and detail share the same card shell + entrance animation. */
.ol-page .ol-card,
.od-page .od-card {
  background: var(--o-card);
  border-radius: var(--o-radius);
  box-shadow: var(--o-shadow);
  overflow: hidden;
  /* desktop vertical rhythm between stacked cards (mobile overrides to 12px) */
  margin-bottom: var(--o-block);
  animation: order-card-in .45s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes order-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to { opacity: 1; transform: none; }
}

/* ============================ STATUS PILL COLORS =======================
   Semantic status hues shared by BOTH pages (detail .od-status and list
   .ol-order-status). Doubled-class specificity (.x.x--mod) so these always
   beat the base pill rule regardless of file load order. The dot is
   currentColor, so it follows the text colour automatically. */
.od-page .od-status.od-status--accent,
.ol-page .ol-order-status.ol-order-status--accent { color: var(--o-accent);  background: var(--o-accent-soft); }
.od-page .od-status.od-status--success,
.ol-page .ol-order-status.ol-order-status--success { color: var(--o-success); background: var(--o-success-soft); }
.od-page .od-status.od-status--warn,
.ol-page .ol-order-status.ol-order-status--warn { color: var(--o-warn);    background: var(--o-warn-soft); }
.od-page .od-status.od-status--danger,
.ol-page .ol-order-status.ol-order-status--danger { color: var(--o-danger);  background: var(--o-danger-soft); }
.od-page .od-status.od-status--muted,
.ol-page .ol-order-status.ol-order-status--muted { color: var(--o-ink-2);   background: var(--o-muted-soft); }

/* ============================ PRODUCT ROW ==============================
   Shared by BOTH order list (.ol-item) and order detail (reuses .ol-item).
   One definition; the detail page markup uses the same .ol-item classes so
   the two pages are byte-identical here. */
.ol-page .ol-item,
.od-page .ol-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--o-line-soft);
}
.ol-page .ol-item:last-child,
.od-page .ol-item:last-child { border-bottom: none; }
.ol-page .ol-item-thumb,
.od-page .ol-item-thumb {
  flex: 0 0 64px;
  width: 64px; height: 64px;
}
.ol-page .ol-item-thumb img,
.od-page .ol-item-thumb img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--o-radius-sm);
  border: 1px solid var(--o-line);
  display: block;
  transition: transform .25s ease;
}
.ol-page .ol-item:hover .ol-item-thumb img,
.od-page .ol-item:hover .ol-item-thumb img { transform: scale(1.04); }
.ol-page .ol-item-info,
.od-page .ol-item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.ol-page .ol-item-name,
.od-page .ol-item-name {
  line-height: 1.35;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--o-ink-2);
}
.ol-page .ol-item-name a,
.od-page .ol-item-name a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.ol-page .ol-item-name a:hover,
.od-page .ol-item-name a:hover { color: var(--o-accent); }
.ol-page .ol-item-meta,
.od-page .ol-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ol-page .ol-item-meta span,
.od-page .ol-item-meta span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--o-ink-2);
}
.ol-page .ol-item-meta em,
.od-page .ol-item-meta em { font-style: normal; color: var(--o-ink-3); margin-right: 4px; }

/* price group: unit (top) + qty (bottom) */
.ol-page .ol-item-price,
.od-page .ol-item-price {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.ol-page .ol-item-price .ol-unit,
.od-page .ol-item-price .ol-unit {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--o-ink);
}
.ol-page .ol-item-price .ol-qty,
.od-page .ol-item-price .ol-qty {
  display: block;
  font-size: 12.5px;
  color: var(--o-ink-3);
  margin-top: 2px;
}

/* total group: subtotal bold (top) + weight (bottom) */
.ol-page .ol-item-total,
.od-page .ol-item-total {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  min-width: 92px;
}
.ol-page .ol-item-total .ol-subtotal,
.od-page .ol-item-total .ol-subtotal {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--o-ink);
  font-family: var(--o-font-display);
}
.ol-page .ol-item-total .ol-weight,
.od-page .ol-item-total .ol-weight {
  display: block;
  font-size: 12.5px;
  color: var(--o-ink-3);
  margin-top: 2px;
}

/* ===================================================================== */
/* ============================  MOBILE (shared bits)  ================== */
/* ===================================================================== */
@media (max-width: 991px) {
  .ol-page .ol-layout,
  .msg-page .msg-layout,
  .od-page .od-layout,
  .wl-page .wl-layout,
  .ad-page .ad-layout {
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
    max-width: 100%;
  }
  .ol-page .ol-main,
  .od-page .od-main,
  .msg-page .msg-main,
  .wl-page .wl-main,
  .ad-page .ad-main { width: 100%; }

  /* product rows mirror on both pages */
  .ol-page .ol-item,
  .od-page .ol-item {
    gap: 10px;
    padding: 12px 0;
  }
  .ol-page .ol-item-thumb,
  .od-page .ol-item-thumb,
  .ol-page .ol-item-thumb img,
  .od-page .ol-item-thumb img {
    width: 56px; height: 56px; flex: 0 0 56px;
  }
  .ol-page .ol-item-name a,
  .od-page .ol-item-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
  }
  .ol-page .ol-item-meta,
  .od-page .ol-item-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ol-page .ol-item-meta span,
  .od-page .ol-item-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ol-page .ol-item-price,
  .od-page .ol-item-price { flex: 0 0 72px; text-align: right; }
  .ol-page .ol-item-total,
  .od-page .ol-item-total { flex: 0 0 76px; text-align: right; min-width: 76px; }
  .ol-page .ol-item-price .ol-unit,
  .od-page .ol-item-price .ol-unit { font-size: 13.5px; }
  .ol-page .ol-item-price .ol-qty,
  .od-page .ol-item-price .ol-qty { font-size: 12px; }
  .ol-page .ol-item-total .ol-subtotal,
  .od-page .ol-item-total .ol-subtotal { font-size: 14px; }
  .ol-page .ol-item-total .ol-weight,
  .od-page .ol-item-total .ol-weight { font-size: 12px; }
}

/* ===================================================================== */
/* ============================  REDUCED MOTION (shared)  =============== */
/* ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ol-page .ol-card, .od-page .od-card,
  .ol-page .ol-item-thumb img, .od-page .ol-item-thumb img {
    animation: none !important;
    transition: none !important;
  }
  .ol-page .ol-card:hover, .od-page .od-card:hover { transform: none; }
}

/* ===================================================================== */
/* =====================  SHARED CIRCULAR CHECKBOX (spec §6.10)  ======== */
/* ===================================================================== */
/* Hand-built circular checkbox - NO .form-check-input / NO Bootstrap.
   Replicated from the cart list: 20x20, border-radius:50% (circular),
   white fill + 1px gray ring; checked -> blue --o-accent fill + white
   check SVG. This is the SINGLE source of truth so every list page
   (message / order / cart / future account pages) shares one look.
   Apply the generic class .x-check to the control; inside an
   account-center scope the scoped variants below also match it.
   IMPORTANT: must sit inside an account-center scope (--o-* tokens
   defined) for the token values to resolve. */
.x-check,
.msg-page .x-check,
.ol-page .x-check,
.od-page .x-check,
.wl-page .x-check,
.ad-page .x-check {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  position: static;
  display: block;
  border-radius: 50%;
  background-color: var(--o-card);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(13, 17, 23, .25);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.x-check:checked,
.msg-page .x-check:checked,
.ol-page .x-check:checked,
.od-page .x-check:checked,
.wl-page .x-check:checked,
.ad-page .x-check:checked {
  background-color: var(--o-accent);
  border-color: var(--o-accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.x-check:disabled,
.msg-page .x-check:disabled,
.ol-page .x-check:disabled,
.od-page .x-check:disabled,
.wl-page .x-check:disabled,
.ad-page .x-check:disabled {
  opacity: .5;
  cursor: default;
}
@media (max-width: 991px) {
  .x-check,
  .msg-page .x-check,
  .ol-page .x-check,
  .od-page .x-check,
  .wl-page .x-check,
  .ad-page .x-check { width: 22px; height: 22px; }
}