/* ============================================================
   KOKA PEARLS — Admin & visual-editor styling
   Uses the storefront's design tokens (tokens.css).
   ============================================================ */

/* ---------- out-of-stock product card (storefront) ---------- */
.pcard--off { position: relative; }
.pcard--off .pcard__media img { filter: grayscale(1) opacity(.55); }
.pcard--off .pcard__title, .pcard--off .pcard__price, .pcard--off .pcard__cat { opacity: .6; }
.badge--off { background: #4A5070; color: #fff; }
.badge--off::before { content: ""; }

/* centered, balanced product rows (bestsellers / new arrivals / collections) */
.prow { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2vw, 28px); }
.prow > * { flex: 1 1 230px; max-width: 300px; }
@media (max-width: 540px){ .prow > * { flex-basis: 150px; } }

/* ============================================================
   EDIT MODE — launcher + toolbar
   ============================================================ */
.admin-launch {
  /* bottom-LEFT, clear of the Instagram/WhatsApp floats on the bottom-right */
  position: fixed; left: 18px; bottom: 22px; z-index: 95;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--ink-900); color: #fff; font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  box-shadow: var(--sh-3); border: 1px solid rgba(255,255,255,.12);
}
.admin-launch svg { width: 16px; height: 16px; }
.admin-launch:hover { background: var(--sapphire-800); }

.edit-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(14px, 3vw, 28px);
  background: var(--ink-900); color: #fff;
  font-family: var(--font-sans); box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.edit-bar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; font-size: 13px; text-transform: uppercase; }
.edit-bar__brand .dot { width: 9px; height: 9px; border-radius: 50%; background: #36D399; box-shadow: 0 0 0 4px rgba(54,211,153,.2); }
.edit-bar__hint { font-size: 12.5px; color: #AEB6D6; }
.edit-bar__spacer { flex: 1; }
.edit-bar .ebtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.2); color: #fff; background: transparent;
}
.edit-bar .ebtn svg { width: 15px; height: 15px; }
.edit-bar .ebtn:hover { background: rgba(255,255,255,.1); }
.edit-bar .ebtn--go { background: #36D399; color: #08231a; border-color: transparent; }
.edit-bar .ebtn--go:hover { background: #2fc28d; }
body.koka-edit { padding-top: 52px; }
body.koka-edit .site-header { top: 52px; }

/* editable affordances */
body.koka-edit [data-editable]:hover,
body.koka-edit .ed-text:hover {
  outline: 2px dashed var(--sapphire-500); outline-offset: 3px;
  cursor: text; border-radius: 3px;
}
body.koka-edit .ed-img { position: relative; cursor: pointer; }
body.koka-edit .ed-img::after {
  content: "Change photo"; position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,22,44,.45); color: #fff; font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s; border-radius: inherit;
}
body.koka-edit .ed-img:hover::after { opacity: 1; }

/* card remove / toggle controls injected in edit mode */
.ed-card { position: relative; }
.ed-card__ctrl { position: absolute; z-index: 6; display: flex; gap: 6px; top: 8px; right: 8px; }
.ed-chip {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: var(--sh-2); cursor: pointer; color: var(--ink-700);
  border: 1px solid var(--pearl-200);
}
.ed-chip svg { width: 15px; height: 15px; }
.ed-chip--x:hover { background: #C0392B; color: #fff; border-color: transparent; }
.ed-chip--on { color: #1B5E4A; }
.ed-chip--off { color: #B0455B; }
.ed-chip:hover { transform: translateY(-1px); }

/* "+" add card */
.add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 220px; border: 2px dashed var(--sapphire-200); border-radius: var(--r-md);
  background: var(--sapphire-050); color: var(--sapphire-700); cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; text-align: center; padding: 20px;
}
.add-card:hover { border-color: var(--sapphire-500); background: #e7ecfa; }
.add-card .plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-1); }
.add-card .plus svg { width: 22px; height: 22px; }
.add-card--row { flex: 1 1 230px; max-width: 300px; }
.add-card--faq { min-height: 64px; flex-direction: row; }

/* ============================================================
   MODAL + SHARED FORMS
   ============================================================ */
.amodal-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(17,22,44,.5);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vh, 56px) 16px; overflow-y: auto;
  opacity: 0; transition: opacity .2s; font-family: var(--font-sans);
}
.amodal-scrim.is-open { opacity: 1; }
.amodal {
  width: 100%; max-width: 620px; background: var(--pearl-000); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden; transform: translateY(8px); transition: transform .2s;
  margin: auto;
}
.amodal--wide { max-width: 760px; }
.amodal-scrim.is-open .amodal { transform: none; }
.amodal__head {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--pearl-150); position: sticky; top: 0; background: var(--pearl-000); z-index: 2;
}
.amodal__head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.amodal__head .x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-500); cursor: pointer; }
.amodal__head .x:hover { background: var(--pearl-100); }
.amodal__head .x svg { width: 18px; height: 18px; }
.amodal__body { padding: 22px; }
.amodal__foot {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  border-top: 1px solid var(--pearl-150); position: sticky; bottom: 0; background: var(--pearl-000);
}
.amodal__foot .spacer { flex: 1; }
@media (max-width: 560px){
  .amodal__foot { flex-wrap: wrap; }
  .amodal__foot .spacer { display: none; }
  .amodal__foot .abtn { flex: 1 1 auto; }
}

/* form atoms */
.afield { margin-bottom: 16px; }
.afield > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; letter-spacing: .01em; }
.afield .req { color: #C0392B; }
.afield .hint { color: var(--greige-400); font-weight: 400; }
.ainput, .aselect, .atext {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--ink-900);
  padding: 11px 13px; border: 1.5px solid var(--pearl-200); border-radius: var(--r-sm); background: #fff;
}
.atext { min-height: 92px; resize: vertical; line-height: 1.5; }
.ainput:focus, .aselect:focus, .atext:focus { outline: none; border-color: var(--sapphire-500); box-shadow: 0 0 0 3px var(--sapphire-050); }
.arow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.arow--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 540px){ .arow, .arow--3 { grid-template-columns: 1fr; } }

/* language tabs */
.lang-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: var(--pearl-100); padding: 4px; border-radius: var(--r-pill); }
.lang-tabs button {
  flex: 1; padding: 9px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  color: var(--ink-500); cursor: pointer; position: relative;
}
.lang-tabs button.is-active { background: #fff; color: var(--sapphire-700); box-shadow: var(--sh-1); }
.lang-tabs button .tick { color: #1B5E4A; margin-left: 5px; }
.lang-tabs button .miss { color: #C9A24B; margin-left: 5px; }
.lang-pane { display: none; }
.lang-pane.is-active { display: block; }

/* chooser chips (category / colour / event select-or-add) */
.chooser { display: flex; flex-wrap: wrap; gap: 8px; }
.chooser button {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--pearl-200); background: #fff; font-size: 13.5px; cursor: pointer; color: var(--ink-700);
}
.chooser button .sw { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.chooser button.is-active { border-color: var(--sapphire-600); background: var(--sapphire-050); color: var(--sapphire-700); font-weight: 600; }
.chooser .add { border-style: dashed; color: var(--sapphire-700); border-color: var(--sapphire-300); }
.chooser .add:hover { background: var(--sapphire-050); }

/* image dropzone */
.adrop {
  display: flex; align-items: center; gap: 16px; padding: 14px; border: 1.5px dashed var(--pearl-200);
  border-radius: var(--r-md); background: var(--pearl-050); cursor: pointer;
}
.adrop:hover { border-color: var(--sapphire-400); }
.adrop__prev { width: 78px; height: 96px; border-radius: var(--r-sm); object-fit: cover; background: var(--pearl-100); flex: 0 0 auto; }
.adrop__txt { font-size: 13px; color: var(--ink-500); }
.adrop__txt b { color: var(--ink-900); display: block; font-size: 14px; margin-bottom: 3px; }

/* toggle switch */
.aswitch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.aswitch input { display: none; }
.aswitch .track { width: 46px; height: 26px; border-radius: 999px; background: var(--greige-300); position: relative; transition: background .2s; flex: 0 0 auto; }
.aswitch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .2s; }
.aswitch input:checked + .track { background: #1B5E4A; }
.aswitch input:checked + .track::after { transform: translateX(20px); }
.aswitch .lbl { font-size: 14px; font-weight: 600; color: var(--ink-700); }
/* a switch row inside a form field: ".afield > label{display:block}" above would
   collapse the track — restore flex and pin the switch at the END of the sentence */
.afield > label.aswitch { display: flex; align-items: center; gap: 14px; font-size: 14px; margin-bottom: 0; }
.afield > label.aswitch .lbl { order: -1; flex: 1 1 auto; }

/* validation banner */
.aerr { background: #FCEDEA; color: #9B2C1B; border: 1px solid #F1C9C0; border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; margin-bottom: 14px; display: none; }
.aerr.show { display: block; }

/* admin buttons */
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; text-decoration: none; }
.abtn svg { width: 16px; height: 16px; }
.abtn--primary { background: var(--sapphire-700); color: #fff; }
.abtn--primary:hover { background: var(--sapphire-800); }
.abtn--ghost { background: transparent; color: var(--ink-700); border-color: var(--pearl-200); }
.abtn--ghost:hover { background: var(--pearl-100); }
.abtn--danger { background: transparent; color: #C0392B; border-color: #E8C4BD; }
.abtn--danger:hover { background: #FCEDEA; }
.abtn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   DASHBOARD (admin.html)
   ============================================================ */
.adash { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; font-family: var(--font-sans); color: var(--ink-900); }
.adash__topbar { display: none; }   /* desktop: no mobile topbar */
.adash__scrim { display: none; }
.adash__side { background: var(--ink-900); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.adash__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.adash__brand .mark { font-size: 14px; }
.adash__nav { display: flex; flex-direction: column; gap: 2px; }
.adash__nav button { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); color: #C5CCE6; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; width: 100%; }
.adash__nav button svg { width: 18px; height: 18px; opacity: .85; }
.adash__nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.adash__nav button.is-active { background: var(--sapphire-600); color: #fff; }
.adash__nav .badge-n { margin-left: auto; background: var(--gold-500); color: #2A1E06; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.adash__side .spacer { flex: 1; }
.adash__side .side-link { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm); color: #AEB6D6; font-size: 13px; }
.adash__side .side-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.adash__side .side-link svg { width: 16px; height: 16px; }

.adash__main { background: var(--pearl-050); min-height: 100vh; }
.adash__head { display: flex; align-items: center; gap: 16px; padding: 26px clamp(20px,4vw,44px) 20px; }
.adash__head h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.adash__head p { color: var(--ink-500); font-size: 13.5px; margin-top: 2px; }
.adash__head .spacer { flex: 1; }
.adash__content { padding: 0 clamp(20px,4vw,44px) 60px; }

/* generic admin list */
.alist { display: flex; flex-direction: column; gap: 10px; }
.arow-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--pearl-200); border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--sh-1); }
.arow-card__img { width: 52px; height: 64px; border-radius: var(--r-sm); object-fit: cover; background: var(--pearl-100); flex: 0 0 auto; }
.arow-card__main { flex: 1; min-width: 0; }
.arow-card__main h4 { font-size: 15.5px; font-weight: 600; }
.arow-card__main .sub { font-size: 12.5px; color: var(--greige-500); margin-top: 2px; }
.arow-card__main .sub b { color: var(--ink-700); font-weight: 600; }
.arow-card.is-off { opacity: .62; }
.arow-card .pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.pill--off { background: #EEE; color: #555; }
.pill--sale { background: #FCE9E4; color: #B23A1B; }
.pill--new { background: var(--sapphire-050); color: var(--sapphire-700); }
.pill--best { background: #F6EFD8; color: #8A6A1E; }
.arow-card__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.iconbtn { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-500); cursor: pointer; border: 1px solid var(--pearl-200); background: #fff; }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn:hover { background: var(--pearl-100); color: var(--ink-900); }
.iconbtn--danger:hover { background: #FCEDEA; color: #C0392B; border-color: #E8C4BD; }

.adash__sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--greige-400); margin: 22px 0 10px; }
.swatch-grid, .pill-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.attr-card { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pearl-200); border-radius: var(--r-pill); padding: 8px 10px 8px 14px; box-shadow: var(--sh-1); }
.attr-card .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.attr-card span.nm { font-size: 14px; font-weight: 500; }
.attr-card .del { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--greige-400); cursor: pointer; }
.attr-card .del:hover { background: #FCEDEA; color: #C0392B; }
.attr-card .del svg { width: 14px; height: 14px; }

.adash-empty { text-align: center; padding: 60px 20px; color: var(--greige-500); }
.adash-empty svg { width: 42px; height: 42px; opacity: .4; margin-bottom: 12px; }

/* order card */
.order-card { background: #fff; border: 1px solid var(--pearl-200); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.order-card__top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.order-card__top .num { font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; }
.order-card__top .who { font-size: 13.5px; color: var(--ink-700); }
.order-card__top .tot { margin-left: auto; font-weight: 700; }
.order-card__top .st { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em; }
.st--new { background: var(--sapphire-050); color: var(--sapphire-700); }
.st--done { background: #E7F1ED; color: #1B5E4A; }
.order-card__body { padding: 0 18px 16px; border-top: 1px solid var(--pearl-150); display: none; }
.order-card.open .order-card__body { display: block; }
.order-card__body .line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px dashed var(--pearl-200); }
.order-card__meta { font-size: 13.5px; color: var(--ink-700); line-height: 1.7; margin-top: 12px; }
.order-card__meta b { color: var(--ink-900); }
/* status pills (top-row badge) */
.st--confirmed { background: var(--sapphire-050); color: var(--sapphire-600); }
.st--shipped { background: #FBF1D9; color: #A9863A; }
.st--delivered { background: #E7F1ED; color: #1B5E4A; }
.st--hold { background: #EFEDE8; color: #7C7466; }
.st--cancelled { background: var(--danger-050); color: var(--danger-600); }
/* status workflow chips inside the order panel */
.order-status { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.order-status__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--greige-500); }
.order-status__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ostat { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--pearl-200); color: var(--ink-700); background: #fff; cursor: pointer; transition: all .15s; }
.ostat:hover { border-color: var(--sapphire-400); color: var(--sapphire-700); }
.ostat.is-current { color: #fff; border-color: transparent; box-shadow: var(--sh-1); }
.ostat--new.is-current { background: var(--sapphire-700); }
.ostat--confirmed.is-current { background: var(--sapphire-600); }
.ostat--shipped.is-current { background: var(--gold-600); }
.ostat--delivered.is-current { background: var(--cod-600); }
.ostat--hold.is-current { background: var(--greige-500); }
.ostat--cancelled.is-current { background: var(--danger-600); }
.order-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.adash__sub-n { display: inline-block; margin-left: 6px; background: var(--pearl-150); color: var(--greige-500); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }

/* orders: collection-method pills (All / Delivery / Pickup) above the status tabs */
.opills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.opill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-700); background: #fff; border: 1.5px solid var(--pearl-200); border-radius: 999px; cursor: pointer; transition: all .15s; }
.opill:hover { border-color: var(--sapphire-400); color: var(--sapphire-700); }
.opill.is-active { background: var(--sapphire-700); border-color: transparent; color: #fff; box-shadow: var(--sh-1); }
.opill__ic { display: inline-flex; width: 16px; height: 16px; }
.opill__ic svg { width: 16px; height: 16px; }
.opill__n { background: var(--pearl-150); color: var(--greige-500); font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; }
.opill.is-active .opill__n { background: rgba(255,255,255,.22); color: #fff; }

/* method chip — small badge marking Delivery vs Pickup, on cards and in the modal */
.method-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--pearl-200); background: var(--pearl-050); color: var(--greige-500); }
.method-chip svg { width: 14px; height: 14px; }
.method-chip--delivery { color: var(--sapphire-700); border-color: var(--sapphire-200); background: var(--sapphire-050, var(--pearl-050)); }
.method-chip--pickup { color: var(--gold-600); border-color: var(--gold-200, var(--pearl-200)); background: var(--gold-050, var(--pearl-050)); }

/* order card: delivery region / country tag + worldwide "to arrange" flag */
.ocard__region { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-600, var(--greige-600)); margin: 2px 0 0; }
.ship-tbc { display: inline-block; background: var(--gold-050, #FBF3DF); color: var(--gold-700, #8a6d20); border: 1px solid var(--gold-200, #E7D08A); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }

/* pickup: collect-at-store block in the order modal */
.pickup-store { margin: 4px 0 6px; padding: 12px 14px; background: var(--pearl-050); border: 1px solid var(--pearl-200); border-radius: var(--r-sm); }
.pickup-store__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--greige-500); margin-bottom: 8px; }
.pickup-store p { margin-bottom: 4px; }
.pickup-store a { color: var(--sapphire-700); }

/* orders: status filter tabs */
.otabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--pearl-200); }
.otab { position: relative; padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--greige-500); cursor: pointer; display: flex; align-items: center; gap: 7px; border-radius: 8px 8px 0 0; }
.otab:hover { color: var(--ink-700); background: var(--pearl-050); }
.otab.is-active { color: var(--sapphire-700); }
.otab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px; background: var(--sapphire-700); border-radius: 2px; }
.otab__n { background: var(--pearl-150); color: var(--greige-500); font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; }
.otab.is-active .otab__n { background: var(--sapphire-700); color: #fff; }

/* orders: card grid — sharp, editorial "order slip" matching the storefront */
.ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 16px; }
.ocard {
  text-align: left; background: #fff; border: 1px solid var(--pearl-200); border-radius: var(--r-sm);
  padding: 19px 20px 17px; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
/* sharp sapphire hairline along the top edge on hover */
.ocard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--sapphire-700);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.ocard:hover { border-color: var(--sapphire-200); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ocard:hover::before { transform: scaleX(1); }
.ocard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.ocard__status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--greige-500); }
.ocard__status .dot { width: 6px; height: 6px; background: var(--greige-400); } /* sharp square marker */
.ocard__status--pending { color: var(--greige-400); } .ocard__status--pending .dot { background: var(--greige-300); }
.ocard__status--new { color: var(--sapphire-700); } .ocard__status--new .dot { background: var(--sapphire-700); }
.ocard__status--confirmed { color: var(--sapphire-500); } .ocard__status--confirmed .dot { background: var(--sapphire-500); }
.ocard__status--shipped { color: var(--gold-600); } .ocard__status--shipped .dot { background: var(--gold-500); }
.ocard__status--delivered { color: var(--cod-600); } .ocard__status--delivered .dot { background: var(--cod-600); }
.ocard__status--hold { color: var(--greige-500); } .ocard__status--hold .dot { background: var(--greige-400); }
.ocard__status--cancelled { color: var(--danger-600); } .ocard__status--cancelled .dot { background: var(--danger-600); }
.ocard__date { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--greige-400); }
.ocard__num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .005em; color: var(--ink-900); line-height: 1.05; }
.ocard__who { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink-700); }
.ocard__items { font-size: 12px; color: var(--greige-500); line-height: 1.5; }
.ocard__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 7px; padding-top: 14px; border-top: 1px solid var(--pearl-200); }
.ocard__tot { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink-900); }
.ocard__cta { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-600); position: relative; }
.ocard:hover .ocard__cta { color: var(--gold-500); }
.ocard:hover .ocard__cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold-500); }

/* product multi-image manager */
.imgmgr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
.imgmgr__item { position: relative; aspect-ratio: 4/5; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--pearl-200); background: var(--pearl-100); cursor: grab; }
.imgmgr__item:active { cursor: grabbing; }
.imgmgr__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.imgmgr__item.is-dragging { opacity: .4; }
.imgmgr__main { position: absolute; left: 6px; top: 6px; background: var(--sapphire-700); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.imgmgr__rm { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(17,22,44,.6); color: #fff; display: grid; place-items: center; cursor: pointer; border: none; }
.imgmgr__rm:hover { background: var(--danger-600); }
.imgmgr__rm svg { width: 13px; height: 13px; }
.imgmgr__add { aspect-ratio: 4/5; border: 1.5px dashed var(--sapphire-300); border-radius: var(--r-sm); background: var(--sapphire-050); color: var(--sapphire-700); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 600; text-align: center; padding: 6px; }
.imgmgr__add:hover { border-color: var(--sapphire-500); }
.imgmgr__add.is-busy { opacity: .55; pointer-events: none; }
.imgmgr__plus svg { width: 22px; height: 22px; }

/* orders: detail modal */
.omodal__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--pearl-150); }
.omodal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.omodal__sec h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--greige-500); margin-bottom: 10px; }
.omodal__sec .line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--pearl-200); }
.omodal__sec .line--total { font-weight: 700; border-bottom: none; border-top: 1.5px solid var(--pearl-200); margin-top: 4px; }
.omodal__sec p { font-size: 13.5px; line-height: 1.6; margin-bottom: 6px; color: var(--ink-700); }
.omodal__sec .muted2 { color: var(--greige-500); font-size: 12.5px; margin-top: 10px; }
@media (max-width: 600px){ .omodal__grid { grid-template-columns: 1fr; } }

/* messages: card body preview (clamped to 2 lines) + full body in the modal */
.ocard .msg-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.omodal__sec .msg-body { white-space: pre-wrap; word-break: break-word; }

/* settings */
.aset-card { background: #fff; border: 1px solid var(--pearl-200); border-radius: var(--r-md); padding: 22px; box-shadow: var(--sh-1); max-width: 640px; }

@media (max-width: 860px){
  .adash { grid-template-columns: 1fr; }
  /* sticky topbar with the 3-line menu — stays put as you scroll */
  .adash__topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 60;
    background: var(--ink-900); color: #fff; padding: 11px 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
  }
  .adash__burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #fff; cursor: pointer; }
  .adash__burger:hover { background: rgba(255,255,255,.1); }
  .adash__burger svg { width: 24px; height: 24px; }
  .adash__topbrand { font-weight: 600; letter-spacing: .04em; font-size: 14px; }
  /* sidebar becomes an off-canvas drawer */
  .adash__side {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; width: 252px;
    transform: translateX(-100%); transition: transform .28s var(--ease);
    z-index: 120; box-shadow: 0 0 50px rgba(0,0,0,.5); overflow-y: auto;
  }
  .adash.nav-open .adash__side { transform: none; }
  .adash__scrim {
    display: block; position: fixed; inset: 0; background: rgba(11,20,56,.5);
    opacity: 0; pointer-events: none; transition: opacity .28s; z-index: 110;
  }
  .adash.nav-open .adash__scrim { opacity: 1; pointer-events: auto; }
  .adash__head { padding-top: 20px; }
}