:root {
  color-scheme: light;
  /* Editorial blush palette — white-dominant with logo-pink as the singular
     accent. Token names are kept stable so the broader stylesheet (which
     references --ink, --muted, --pink, etc.) flips theme without renames. */
  --bg: #fdfafb;                 /* page background — warm off-white */
  --surface: #ffffff;            /* card / panel surface */
  --surface-2: #fff7f8;          /* faintly pink-tinted surface */
  --ink: #1a0e14;                /* primary text — warm near-black */
  --ink-soft: #4a2f39;           /* secondary heading text */
  --muted: #7a5a64;              /* body / meta text */
  --line: rgba(216, 142, 155, 0.22);
  --line-strong: rgba(216, 142, 155, 0.42);
  --black: #1a0e14;              /* retained: dark accent for text-on-pink */
  --black-2: #2b1a22;
  --cream: #ffffff;              /* retained: was light surface — still light */
  --rose: #fbe6ea;               /* soft pink wash */
  --pink: #e8a6b0;               /* primary logo pink */
  --pink-2: #d88e9b;             /* deeper pink for hover / accents */
  --pink-3: #c97582;             /* deepest, for active text on pink */
  --pink-glow: rgba(232, 166, 176, 0.42);
  --green: #5db389;
  --amber: #d39a35;
  --red: #c4506a;
  --shadow: 0 18px 60px rgba(216, 142, 155, 0.16),
            0 2px 10px rgba(26, 14, 20, 0.04);
  --shadow-soft: 0 8px 28px rgba(216, 142, 155, 0.12);
  --radius: 10px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.2, 0.75, 0.18, 1);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1180px, calc(100vw - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-size: 15px;
  /* Clean cream/white base — no atmospheric pink wash. Earlier versions
     layered two giant radial-gradient ellipses for "ambient blush" but
     they read as half-page shading on most viewport widths. The palette
     accents and the logo carry the brand colour; the page itself stays
     a quiet warm-off-white. */
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hairline grain overlay — subtle neutral noise so the white surfaces
   don't feel sterile. The later grain rule lower in the file already
   handles texture at 0.032 opacity; this one stays as a redundant
   no-op fixed layer so we don't break the cascade for anything that
   relies on body::before. Opacity 0 = invisible. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

/* The body-level ambient orb that used to live here covered ~half the
   viewport in soft pink — too much. The grain-overlay rule lower in the
   file owns body::after now; this comment is the only thing that remains
   of the old orb. Ambient motion is preserved as a much smaller, scoped
   accent on the hero itself (see .hero-shell::before below). */

@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  50%  { transform: translate3d(-3vw, 2vh, 0) scale(1.04); opacity: 0.65; }
  100% { transform: translate3d(1vw, -2vh, 0) scale(0.98); opacity: 0.5; }
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 50;
  transform: translateY(-160%);
  background: var(--cream);
  color: var(--black);
  padding: 10px 14px;
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.scroll-meter {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 40;
  width: var(--scroll-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--pink-2), var(--pink), var(--rose));
  box-shadow: 0 0 12px var(--pink-glow);
  transition: width 80ms linear;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 14px max(18px, calc((100vw - 1180px) / 2));
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}

.site-header[data-elevated="true"] {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--line);
  box-shadow: 0 8px 28px rgba(216, 142, 155, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: 1.16rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(216, 142, 155, 0.18);
  transition: transform 360ms var(--ease-cinema), box-shadow 360ms var(--ease-cinema);
}

.brand:hover .brand-mark {
  transform: scale(1.04) rotate(-3deg);
  box-shadow: 0 12px 28px rgba(216, 142, 155, 0.28);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
}

.brand small {
  color: var(--muted);
  font-size: 0.74rem;
}

.main-nav {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 247, 248, 0.7);
  backdrop-filter: blur(8px);
}

.main-nav a,
.admin-tab {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  transition: color 220ms var(--ease), background 220ms var(--ease);
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[data-current],
.admin-tab:hover,
.admin-tab:focus-visible,
.admin-tab.active {
  color: var(--ink);
  background: var(--surface);
  outline: none;
  box-shadow: 0 4px 14px rgba(216, 142, 155, 0.18);
}

.main-nav a[data-current] {
  color: var(--ink);
  background: linear-gradient(135deg, var(--rose), var(--surface));
}

.icon-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.icon-button:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 8px 20px rgba(216, 142, 155, 0.18);
}

.icon-button strong {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 999px;
  font-size: 0.72rem;
}

.icon-button.plain {
  justify-self: auto;
  background: transparent;
  border-color: transparent;
}

.icon-button.plain:hover {
  background: var(--surface);
  border-color: var(--line);
}

.view {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  animation: view-in 500ms var(--ease);
}

.view.active {
  display: block;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  width: var(--page);
  min-height: clamp(580px, calc(100vh - 80px), 740px);
  margin: 0 auto;
  padding: 56px 0 80px;
}

/* Editorial hairline divider — fades to nothing at the edges so it never
   crashes into the hero text or cards above. */
.hero-shell::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent);
  pointer-events: none;
}

.kicker {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pink-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--pink-2);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.35rem, 5.3vw, 4.85rem);
  max-width: 640px;
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 3.45rem);
}

h3 {
  margin: 0;
  font-size: 1.05rem;
}

.hero-copy p:not(.kicker),
.page-intro p,
.section-heading p:not(.kicker) {
  max-width: 680px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.62;
}

.hero-actions,
.drawer-header,
.admin-heading,
.product-actions,
.mini-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bulk-select-all {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  margin-right: auto;
  user-select: none;
}

/* Pill that shows the total count in scope — never empty, never a literal "0"
   next to a verb. */
.bulk-count-chip {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.16);
  color: var(--pink-2);
  font-size: 0.72rem;
  font-weight: 800;
}

.import-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 79, 154, 0.065);
}

.import-bar strong,
.import-bar span {
  display: block;
}

.import-bar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 216, 232, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: var(--cream);
  cursor: pointer;
}

.file-button input {
  display: none;
}

.bulk-select-all input[type="checkbox"],
.card-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--pink-2);
  cursor: pointer;
}

.card-select-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  line-height: 1;
}

.trend-card,
.admin-product-wrap {
  position: relative;
}

.trend-card.selected,
.admin-product-wrap.selected {
  outline: 2px solid var(--pink-2);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.admin-product-wrap {
  position: relative;
}

.admin-product-wrap .card-select-wrap {
  top: 12px;
  left: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.button.primary {
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 14px 36px rgba(26, 14, 20, 0.22);
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
  opacity: 0;
  transition: opacity 320ms var(--ease-cinema);
  z-index: -1;
}

.button.primary:hover {
  color: var(--ink);
  box-shadow: 0 20px 44px rgba(216, 142, 155, 0.36);
}

.button.primary:hover::after {
  opacity: 1;
}

.button.secondary,
.button.ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 14, 20, 0.04);
}

.button.secondary:hover,
.button.ghost:hover {
  border-color: var(--pink-2);
  background: var(--rose);
}

.button.wide {
  width: 100%;
}

.hero-stage {
  position: relative;
  min-height: clamp(460px, 56vh, 580px);
  isolation: isolate;
}

.hero-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  /* Composed transform: --enter-y handles the cinematic entrance, --par-y
     handles scroll parallax. JS toggles --enter-y/scale via .is-visible
     and writes --par-y on scroll. Both ride the same transform so they
     never fight. */
  --enter-y: 40px;
  --enter-scale: 0.96;
  --par-y: 0px;
  opacity: 0;
  transform: translate3d(0, calc(var(--enter-y) + var(--par-y)), 0) scale(var(--enter-scale));
  transition:
    opacity 1100ms var(--ease-cinema),
    transform 450ms var(--ease-cinema);
  will-change: transform, opacity;
}

.hero-card.is-visible {
  opacity: 1;
  --enter-y: 0px;
  --enter-scale: 1;
}

.hero-card-large.is-visible { transition-delay: 80ms; }
.hero-card-small.top.is-visible { transition-delay: 280ms; }
.hero-card-small.bottom.is-visible { transition-delay: 460ms; }

.hero-card img {
  transition: transform 1.4s var(--ease-cinema);
}

.hero-card:hover img {
  transform: scale(1.06);
}

.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-card figcaption {
  position: absolute;
  inset: auto 12px 12px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 6px;
  color: var(--ink);
}

.hero-card figcaption strong {
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
}

.hero-card span,
.status-pill,
.price-chip {
  color: var(--pink-2);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-card-large {
  left: 8%;
  top: 8%;
  width: 56%;
  height: 70%;
}

.hero-card-small {
  right: 0;
  width: 36%;
  height: 34%;
}

.hero-card-small.top {
  top: 0;
}

.hero-card-small.bottom {
  bottom: 4%;
}

.editorial-band,
.collection-strip,
.product-showcase,
.page-intro,
.shop-layout,
.checkout-layout,
.track-shell,
.faq-hero,
.faq-shell,
.admin-shell {
  width: var(--page);
  margin: 0 auto;
}

.editorial-band {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  gap: 32px;
  padding: 58px 0;
}

.process-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 1px;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.process-rail article {
  min-width: 190px;
  padding: 24px 22px;
  background: var(--surface);
  transition: background 280ms var(--ease-cinema);
}

.process-rail article:hover {
  background: var(--surface-2);
}

.process-rail span {
  display: block;
  margin-bottom: 30px;
  color: var(--pink);
  font-weight: 800;
}

.process-rail p,
.timeline-panel span,
.product-card p,
.ops-panel,
.tracking-result {
  color: var(--muted);
  line-height: 1.58;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.collection-strip,
.product-showcase {
  padding: 28px 0 62px;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.collection-tile {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.collection-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.collection-tile:hover img,
.collection-tile:focus-visible img {
  transform: scale(1.05);
}

.collection-tile span {
  position: absolute;
  inset: auto 18px 18px 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: 1.16rem;
  z-index: 1;
  transition: transform 480ms var(--ease-cinema), color 320ms var(--ease);
}

.collection-tile:hover span {
  transform: translateY(-3px);
  color: var(--pink-3);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(255, 216, 232, 0.34);
  background: rgba(255, 255, 255, 0.06);
}

.product-media {
  position: relative;
  aspect-ratio: 1;
  background: #1b1419;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-media.media-missing,
.media-placeholder,
.trend-image-placeholder {
  display: grid;
  place-items: center;
  min-height: 100%;
  color: var(--muted);
  border: 1px dashed rgba(255, 216, 232, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 79, 154, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
}

.media-placeholder span,
.trend-image-placeholder {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-badges {
  position: absolute;
  inset: 10px 10px auto 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-pill,
.price-chip {
  padding: 6px 8px;
  border: 1px solid rgba(255, 216, 232, 0.24);
  background: rgba(7, 5, 7, 0.8);
}

.status-pill.in_stock {
  color: var(--green);
}

.status-pill.preorder {
  color: var(--amber);
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
}

.product-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.product-title-row strong {
  font-family: "Playfair Display", serif;
  font-size: 1.04rem;
  line-height: 1.12;
}

.price {
  white-space: nowrap;
  color: var(--rose);
  font-size: 0.92rem;
  font-weight: 800;
}

.product-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.product-meta.compact {
  grid-template-columns: 1fr;
}

.product-meta.public-listing {
  grid-template-columns: repeat(2, 1fr);
}

.product-payment-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.product-payment-chips span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 216, 232, 0.18);
  background: rgba(255, 79, 154, 0.07);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-payment-chips small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-meta span,
.metric-card,
.order-line,
.trend-card,
.tracking-step {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.product-meta span {
  padding: 8px;
  color: var(--muted);
  font-size: 0.72rem;
}

.product-actions {
  margin-top: auto;
}

.product-actions .button {
  flex: 1;
}

.page-intro {
  padding: 42px 0 18px;
}

.page-intro.compact {
  width: auto;
  margin: 0;
  padding: 0 0 20px;
}

.shop-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 62px;
}

.filter-panel,
.checkout-form,
.order-summary,
.track-card,
.tracking-result,
.admin-sidebar,
.admin-login,
.admin-panel,
.ops-panel,
.timeline-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.filter-panel {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--rose);
  font-size: 0.8rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 216, 232, 0.22);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  padding: 10px 11px;
}

textarea {
  resize: vertical;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: flex-start;
  gap: 10px;
  color: var(--cream);
  line-height: 1.5;
}

.check-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--pink);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--pink-2);
  outline-offset: 2px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 20px;
  padding: 46px 0 64px;
}

.checkout-form,
.order-summary,
.track-card,
.tracking-result {
  padding: 18px;
}

.payment-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

fieldset {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

legend {
  padding: 0 8px;
  color: var(--pink-2);
  font-weight: 800;
}

.form-grid,
.product-editor,
.settings-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.bank-box dl,
.cart-totals,
.order-summary dl {
  display: grid;
  gap: 10px;
}

dl div,
.order-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.order-line {
  margin-bottom: 10px;
  padding: 12px;
}

.order-line strong {
  display: block;
}

.order-line small {
  color: var(--muted);
}

.line-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 6px 0 4px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 154, 0.28);
  background: rgba(255, 79, 154, 0.1);
  color: var(--pink-2);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-quote-note {
  display: block;
  max-width: 42ch;
  margin-top: 4px;
  line-height: 1.45;
}

.track-shell {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 20px;
  padding: 54px 0 70px;
}

.faq-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 48px 0 42px;
  text-align: center;
}

.faq-hero::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 79, 154, 0.16), transparent 28rem),
    linear-gradient(180deg, rgba(35, 20, 27, 0.92), rgba(11, 7, 10, 0.98));
  border-bottom: 1px solid var(--line);
}

.faq-hero h1,
.faq-hero h2 {
  max-width: 620px;
  color: #fff7f9;
  text-shadow: 0 10px 34px rgba(26, 14, 20, 0.38);
}

.faq-hero h1 {
  font-size: clamp(2.35rem, 5vw, 4.3rem);
}

.faq-hero h2 {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
}

.preorder-faq-hero {
  margin-top: clamp(30px, 5vw, 58px);
}

.faq-hero p:not(.kicker) {
  max-width: 620px;
  margin: 12px auto 0;
  color: rgba(255, 247, 249, 0.78);
  line-height: 1.7;
}

.faq-hero .kicker {
  color: var(--pink);
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.breadcrumb a {
  color: var(--rose);
}

.faq-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  padding: 54px 0 74px;
}

.faq-column {
  min-width: 0;
}

.faq-column-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.faq-column-heading h2 {
  margin: 0;
  color: var(--pink-2);
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.faq-list {
  display: grid;
}

/* FAQ now uses native <details>/<summary> for free keyboard support and
   exposes the question/answer relationship to assistive tech. */
.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 56px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  color: var(--cream);
  font-weight: 700;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 216, 232, 0.18);
  color: var(--pink-2);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.faq-toggle::before {
  content: "+";
}

.faq-item[open] .faq-toggle::before {
  content: "−";
}

.faq-item > summary:hover .faq-toggle,
.faq-item > summary:focus-visible .faq-toggle {
  background: rgba(255, 79, 154, 0.14);
  transform: translateX(2px);
}

.faq-answer {
  border-left: 2px solid var(--pink);
  color: var(--muted);
  padding: 0 0 18px 14px;
}

.faq-answer p {
  margin: 0;
  line-height: 1.75;
}

.faq-item[open] > summary {
  color: var(--pink-2);
}

.tracking-result:empty {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 280px;
  padding: 32px 18px;
  text-align: center;
  color: var(--muted);
}

.tracking-result:empty::before {
  content: "";
  width: 78px;
  height: 78px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 79, 154, 0.22), transparent 70%),
    conic-gradient(from 220deg, transparent 0deg, rgba(255, 156, 199, 0.4) 70deg, transparent 140deg);
  border: 1px solid rgba(255, 156, 199, 0.34);
  border-radius: 50%;
  animation: track-pulse 2.4s var(--ease) infinite;
}

.tracking-result:empty::after {
  content: "Enter an order number or your WhatsApp phone above to see the latest USA-to-Pakistan status.";
  max-width: 360px;
  font-size: 0.92rem;
  line-height: 1.55;
}

@keyframes track-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.07); opacity: 1; }
}

/* Generic empty-state illustration (cart) */
.empty-illustration {
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  color: var(--pink-2);
  opacity: 0.85;
}

/* ───── Order confirmation modal ───── */
.order-confirmation {
  display: grid;
  gap: 22px;
  padding: 12px 6px 6px;
}

.confirmation-headline {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.confirmation-check {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  color: var(--pink-2);
}

.confirmation-headline h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.confirmation-sub {
  max-width: 480px;
  color: var(--muted);
  line-height: 1.55;
}

.confirmation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.confirmation-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.confirmation-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.confirmation-grid strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--cream);
  font-size: 1.05rem;
}

.confirmation-grid small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.confirmation-items {
  margin: 0;
  padding: 14px 18px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 79, 154, 0.04);
}

.confirmation-items li {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 216, 232, 0.12);
  color: var(--cream);
}

.confirmation-items li:last-child { border-bottom: 0; }

.confirmation-items small {
  color: var(--muted);
  margin-left: 6px;
}

.confirmation-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.confirmation-helper {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* ───── Submit failure fallback ───── */
.submit-failure {
  display: grid;
  gap: 14px;
  padding: 14px 6px;
  text-align: center;
}

.submit-failure .kicker {
  color: var(--red);
}

/* ───── Phone validation hint ───── */
.phone-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.phone-hint.ok { color: var(--green); }
.phone-hint.warn { color: var(--amber); }

/* ───── Upload hint (transfer screenshot) ───── */
.upload-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.upload-hint.ok { color: var(--green); }
.upload-hint.warn { color: var(--amber); }

/* ───── Checkout trust strip (above Place Order) ───── */
.checkout-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 12px 0 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(232, 166, 176, 0.08);
  border: 1px solid rgba(232, 166, 176, 0.4);
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.checkout-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ───── Sticky Place Order CTA (mobile only) ───── */
@media (max-width: 720px) {
  .checkout-place-order {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    box-shadow: 0 6px 24px rgba(232, 166, 176, 0.32);
  }
}

/* ───── Static content pages (about / contact / returns / size guide) ───── */
.content-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 54px 20px 80px;
}

.content-shell .content-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 6px 0 18px;
}

.content-shell h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  margin: 6px 0 16px;
  color: var(--ink);
}

.content-shell h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 28px 0 10px;
  color: var(--ink);
}

.content-shell p {
  line-height: 1.6;
  color: var(--ink-soft);
}

.content-list {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0 14px;
}

.content-list li {
  margin-bottom: 8px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.content-cta-block {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.contact-card {
  background: rgba(232, 166, 176, 0.08);
  border: 1px solid rgba(232, 166, 176, 0.3);
  padding: 18px 20px;
  border-radius: 14px;
}

.contact-card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.contact-link {
  font-weight: 700;
  color: var(--pink-3);
  text-decoration: none;
}

.contact-link:hover { text-decoration: underline; }

.size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 22px;
  font-size: 0.92rem;
}

.size-table th,
.size-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(232, 166, 176, 0.28);
}

.size-table th {
  background: rgba(232, 166, 176, 0.08);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.size-table tbody tr:hover {
  background: rgba(232, 166, 176, 0.05);
}

/* ───── Wishlist filter chip (shop sidebar) ───── */
.wishlist-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid var(--pink);
  border-radius: 999px;
  background: rgba(232, 166, 176, 0.12);
  color: var(--pink-3);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.wishlist-chip strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 0.74rem;
}

.wishlist-chip.is-active {
  background: var(--pink);
  color: #fff;
}

.wishlist-chip.is-active strong {
  background: #fff;
  color: var(--pink-3);
}

.wishlist-chip:hover,
.wishlist-chip:focus-visible {
  outline: none;
  filter: brightness(0.97);
}

/* ───── Multi-order tracking list ───── */
.order-list-shell {
  display: grid;
  gap: 14px;
}

.order-list-helper {
  margin: 0;
  color: var(--muted);
}

.order-list {
  display: grid;
  gap: 10px;
}

.order-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.order-list-row:hover,
.order-list-row:focus-visible {
  border-color: rgba(255, 79, 154, 0.38);
  background: rgba(255, 79, 154, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.order-list-row strong { display: block; }

.order-list-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.order-list-row-totals {
  text-align: right;
}

.order-list-row-totals small {
  color: var(--amber);
  font-weight: 700;
}

/* ───── Portal repeat-customer banner ───── */
.repeat-customer-banner {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0 0 14px;
  border: 1px solid rgba(255, 156, 199, 0.4);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.14), rgba(255, 156, 199, 0.06));
}

.repeat-customer-banner strong {
  color: var(--rose);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.repeat-customer-banner span {
  color: var(--cream);
  font-size: 0.82rem;
}


button.repeat-customer-banner {
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}

button.repeat-customer-banner:hover,
button.repeat-customer-banner:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 154, 0.58);
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.22), rgba(255, 156, 199, 0.1));
  outline: none;
}

.repeat-arrow {
  color: var(--pink-2);
  font-size: 1.1rem;
  font-weight: 800;
  padding-left: 6px;
}

/* ───── Customer detail modal ───── */
.customer-detail-modal {
  display: grid;
  gap: 16px;
}

.customer-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.customer-stat-grid article {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.customer-stat-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-stat-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--cream);
  font-size: 1rem;
}

@media (max-width: 880px) {
  .customer-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.customer-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.customer-tags span {
  padding: 3px 10px;
  border: 1px solid rgba(255, 156, 199, 0.4);
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.1);
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-notes {
  padding: 12px 14px;
  border-left: 3px solid var(--pink);
  background: rgba(255, 79, 154, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.customer-notes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--rose);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-notes p {
  margin: 0;
  color: var(--cream);
  line-height: 1.55;
}

.customer-orders h3 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
}

.customer-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.customer-order-row:hover,
.customer-order-row:focus-visible {
  border-color: rgba(255, 79, 154, 0.42);
  background: rgba(255, 79, 154, 0.08);
  outline: none;
}

.customer-order-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.customer-order-row-totals {
  text-align: right;
}

.customer-order-row-totals .balance-due {
  display: block;
  color: var(--amber);
  font-weight: 700;
}

/* ───── Inline tag editor ───── */
.customer-tags-editor {
  display: grid;
  gap: 8px;
}

.customer-tags-label {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.customer-tags-empty {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
  border: 0 !important;
  background: transparent !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  border: 1px solid rgba(255, 156, 199, 0.4);
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.1);
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.6);
  color: var(--cream);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms var(--ease);
}

.tag-chip button:hover { background: var(--red); color: var(--cream); }

.tag-add-input {
  flex: 1;
  min-width: 140px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px dashed rgba(255, 156, 199, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cream);
  font-size: 0.78rem;
}

.tag-add-input:focus {
  border-style: solid;
  border-color: var(--pink-2);
  outline: none;
}

/* ───── Notes editor ───── */
.customer-notes.editable {
  display: grid;
  gap: 6px;
}

.customer-notes.editable strong small {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.7rem;
  margin-left: 6px;
}

.customer-notes textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  font-family: "Archivo", sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  resize: vertical;
}

.customer-notes textarea:focus {
  border-color: var(--pink-2);
  outline: none;
}

.notes-status {
  display: inline-block;
  height: 1.1em;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: italic;
}

.notes-status.ok { color: var(--green); }

/* ───── Order timeline ───── */
.order-timeline {
  display: grid;
  gap: 10px;
}

.timeline-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.16);
  color: var(--pink-2);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.timeline-event {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.timeline-glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font-size: 0.92rem;
  font-weight: 700;
}

.timeline-event.tone-ok { border-color: rgba(152, 240, 195, 0.36); }
.timeline-event.tone-ok .timeline-glyph { background: rgba(152, 240, 195, 0.18); color: var(--green); }

.timeline-event.tone-warn { border-color: rgba(255, 208, 122, 0.38); }
.timeline-event.tone-warn .timeline-glyph { background: rgba(255, 208, 122, 0.18); color: var(--amber); }

.timeline-event.tone-danger { border-color: rgba(255, 119, 119, 0.4); }
.timeline-event.tone-danger .timeline-glyph { background: rgba(255, 119, 119, 0.18); color: var(--red); }

.timeline-event.tone-info { border-color: rgba(255, 156, 199, 0.32); }
.timeline-event.tone-info .timeline-glyph { background: rgba(255, 79, 154, 0.16); color: var(--pink-2); }

.timeline-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.timeline-headline strong {
  color: var(--cream);
  font-size: 0.92rem;
}

.timeline-time {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.timeline-body p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* ───── Broadcast panel ───── */
.broadcast-panel { display: grid; gap: 10px; }

.broadcast-helper {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.broadcast-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.broadcast-form .span-2 { grid-column: span 2; }

.broadcast-form textarea[readonly] {
  background: rgba(0, 0, 0, 0.32);
  color: var(--cream);
  font-family: "Archivo", sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

.broadcast-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.broadcast-count {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 156, 199, 0.32);
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.08);
  color: var(--pink-2);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.broadcast-count.over-cap {
  border-color: rgba(251, 113, 133, 0.5);
  background: rgba(251, 113, 133, 0.12);
  color: #fb7185;
}

/* ───── SLA chip on orders table ───── */
.sla-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.sla-chip.sla-ok { background: rgba(152, 240, 195, 0.18); color: var(--green); border: 1px solid rgba(152, 240, 195, 0.34); }
.sla-chip.sla-warn { background: rgba(255, 208, 122, 0.18); color: var(--amber); border: 1px solid rgba(255, 208, 122, 0.4); }
.sla-chip.sla-danger { background: rgba(251, 113, 133, 0.18); color: #fb7185; border: 1px solid rgba(251, 113, 133, 0.46); animation: sla-pulse 2.4s ease-in-out infinite; }

@keyframes sla-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
  50% { box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.18); }
}

.order-row.sla-warn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.order-row.sla-danger td:first-child { box-shadow: inset 3px 0 0 #fb7185; }

/* ───── Reorder button on customer modal ───── */
.customer-order-row-shell {
  position: relative;
}

.reorder-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 11px;
  border: 1px solid rgba(255, 156, 199, 0.4);
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.74);
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms var(--ease), background 160ms var(--ease);
}

.customer-order-row-shell:hover .reorder-btn,
.customer-order-row-shell:focus-within .reorder-btn {
  opacity: 1;
}

.reorder-btn:hover { background: rgba(255, 79, 154, 0.22); color: var(--cream); }

/* ───── Customer avatar monogram ───── */
.customer-avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.customer-avatar.avatar-sm { width: 28px; height: 28px; font-size: 0.78rem; }
.customer-avatar.avatar-lg { width: 64px; height: 64px; font-size: 1.55rem; }

.customer-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* cmd-K rows pick up the avatar in column 1 when present */
.cmd-palette-row.has-avatar {
  grid-template-columns: 32px 60px 1fr auto;
}

.cmd-palette-type.subtle {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* ───── Broadcast results modal ───── */
.broadcast-results { display: grid; gap: 18px; }

.broadcast-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.broadcast-stats article {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.broadcast-stats article.stat-ok { border-color: rgba(152, 240, 195, 0.36); background: rgba(152, 240, 195, 0.06); }
.broadcast-stats article.stat-warn { border-color: rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.06); }
.broadcast-stats article.stat-info { border-color: rgba(255, 156, 199, 0.32); background: rgba(255, 79, 154, 0.04); }

.broadcast-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.broadcast-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--cream);
  font-size: 1.5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
}

.broadcast-list {
  display: grid;
  gap: 8px;
}

.broadcast-list h3 {
  margin: 0;
  color: var(--rose);
  font-family: "Archivo", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.broadcast-list.muted h3 { color: var(--muted); }

.broadcast-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
}

.broadcast-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  align-items: baseline;
  padding: 8px 12px;
  border-bottom: 1px dashed rgba(255, 216, 232, 0.1);
  font-size: 0.84rem;
}

.broadcast-list li:last-child { border-bottom: 0; }

.broadcast-list li strong { color: var(--cream); }
.broadcast-list li span { color: var(--muted); margin-left: 6px; }
.broadcast-list li small { color: var(--amber); font-style: italic; }
.broadcast-list.muted li small { color: var(--muted); }

/* ───── Customer-modal WhatsApp history ───── */
.customer-messages {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.customer-messages.tone-warn { border-color: rgba(255, 208, 122, 0.42); background: rgba(255, 208, 122, 0.06); }

.customer-messages h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
}

.msg-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  color: var(--muted);
  font-size: 0.8rem;
}

.msg-counts strong { color: var(--cream); margin-right: 4px; }

.msg-last { margin-left: auto; font-style: italic; }

.msg-warn {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 208, 122, 0.08);
  color: var(--amber);
  font-size: 0.86rem;
}

.msg-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.msg-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.msg-row.outbound { border-left: 2px solid var(--pink); }
.msg-row.inbound { border-left: 2px solid var(--green); }

.msg-arrow {
  color: var(--pink-2);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}

.msg-row.inbound .msg-arrow { color: var(--green); }

.msg-body strong {
  display: block;
  color: var(--cream);
  font-size: 0.8rem;
}

.msg-body p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.msg-when {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* ───── SLA filter banner ───── */
.sla-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(251, 113, 133, 0.42);
  border-radius: var(--radius);
  background: rgba(251, 113, 133, 0.1);
  color: #fb7185;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sla-filter-banner button { padding: 6px 12px; min-height: 34px; }

.sla-chip { cursor: pointer; transition: transform 140ms var(--ease), filter 140ms var(--ease); }
.sla-chip:hover { transform: translateY(-1px); filter: brightness(1.12); }

/* ═══════════════════════ OVERVIEW — KPI HERO ═══════════════════════ */
.kpi-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-card {
  display: grid;
  gap: 6px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 79, 154, 0.04), rgba(255, 255, 255, 0.025) 60%);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}

.kpi-card.kpi-action {
  cursor: pointer;
  border: 0;
}
.kpi-card.kpi-action:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 79, 154, 0.4);
  background: rgba(255, 79, 154, 0.08);
}

.kpi-card.tone-warn {
  border-color: rgba(251, 113, 133, 0.42);
  background: linear-gradient(160deg, rgba(251, 113, 133, 0.12), rgba(255, 255, 255, 0.02) 60%);
}
.kpi-card.tone-ok {
  border-color: rgba(152, 240, 195, 0.32);
}

.kpi-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kpi-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cream);
  letter-spacing: 0;
}

.kpi-sub {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}

@media (max-width: 880px) { .kpi-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══════════════════════ ATTENTION QUEUE ═══════════════════════ */
.attention-panel { margin-bottom: 18px; }

.attention-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.attention-row:hover { transform: translateY(-1px); border-color: rgba(255, 79, 154, 0.4); background: rgba(255, 79, 154, 0.08); }
.attention-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.78rem; }
.attention-tone { font-size: 1.1rem; line-height: 1; }
.attention-row.tone-warn .attention-tone { color: var(--amber); }
.attention-row.tone-danger .attention-tone { color: #fb7185; }
.attention-row.tone-warn { border-left: 3px solid var(--amber); }
.attention-row.tone-danger { border-left: 3px solid #fb7185; }

.attention-label {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.attention-row.tone-warn .attention-label { background: rgba(255, 208, 122, 0.18); color: var(--amber); }
.attention-row.tone-danger .attention-label { background: rgba(251, 113, 133, 0.18); color: #fb7185; }

/* ═══════════════════════ SNAPSHOT CARDS ═══════════════════════ */
.snapshot-panel h2 { margin-bottom: 12px; }

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.snapshot-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}

.snapshot-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 156, 199, 0.4);
  background: rgba(255, 79, 154, 0.06);
}

.snapshot-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.76rem; }

.snapshot-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.12);
  color: var(--pink-2);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
}

/* ═══════════════════════ CUSTOMERS TAB ═══════════════════════ */
.customer-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.customer-filter-bar input[type="search"] {
  flex: 2;
  min-width: 220px;
  min-height: 38px;
}

.customer-filter-bar select {
  flex: 1;
  min-width: 150px;
  min-height: 38px;
}

.customer-count-chip {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.12);
  color: var(--pink-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.customer-table .customer-row { cursor: pointer; }
.customer-table .customer-row:hover td { background: rgba(255, 79, 154, 0.06); }
.customer-table .customer-row:focus-visible td { outline: 1px solid var(--pink-2); }

.customer-cell-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.customer-cell-name strong { color: var(--cream); }
.customer-cell-name small { color: var(--muted); font-size: 0.72rem; }

.phone-display {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: "Archivo", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.customer-row-actions { text-align: right; }

/* ═══════════════════════ SPARKLINE ═══════════════════════ */
.customer-sparkline-card {
  position: relative;
  overflow: hidden;
}

.sparkline-headline {
  display: block;
  margin: 6px 0 6px;
  color: var(--rose);
  font-size: 1.05rem;
  font-family: "Cormorant Garamond", Georgia, serif;
}

.customer-sparkline {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 2px;
}

.sparkline-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══════════════════════ MESSAGE FILTER CHIPS ═══════════════════════ */
.msg-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.msg-filter-chips button {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}

.msg-filter-chips button:hover,
.msg-filter-chips button.active {
  border-color: rgba(255, 79, 154, 0.42);
  background: rgba(255, 79, 154, 0.12);
  color: var(--cream);
}

.msg-row.is-broadcast { background: rgba(255, 79, 154, 0.06); border-left: 2px solid var(--rose); }
.msg-reply-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(152, 240, 195, 0.16);
  color: var(--green);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msg-empty {
  list-style: none;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* ═══════════════════════ SCHEDULED BROADCASTS LIST ═══════════════════════ */
.broadcast-sub {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.broadcast-sub:empty { display: none; }

.broadcast-sub-title {
  margin: 0 0 10px;
  color: var(--rose);
  font-family: "Archivo", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scheduled-list,
.campaign-rates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.scheduled-list li,
.campaign-rates li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.scheduled-list small,
.campaign-rates small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.rate-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.rate-badge.tone-ok { background: rgba(152, 240, 195, 0.22); color: var(--green); }
.rate-badge.tone-warn { background: rgba(255, 208, 122, 0.22); color: var(--amber); }
.rate-badge.tone-info { background: rgba(255, 79, 154, 0.18); color: var(--rose); }

/* ═══════════════════ DECLUTTER + BREATHING ═══════════════════ */
.admin-panel {
  padding: 22px 24px 28px;
}

.admin-heading {
  margin-bottom: 22px;
}

.orders-heading-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ops-grid {
  gap: 20px;
}

.ops-panel {
  padding: 18px 20px 20px;
}

.kpi-hero {
  margin-bottom: 22px;
}

/* KPI trend chip + tightened top row */
.kpi-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.kpi-trend.tone-ok { background: rgba(152, 240, 195, 0.18); color: var(--green); }
.kpi-trend.tone-warn { background: rgba(251, 113, 133, 0.16); color: #fb7185; }
.kpi-trend.tone-info { background: rgba(255, 255, 255, 0.08); color: var(--muted); }

/* ═══════════════════ ORDERS TAB FILTER BAR ═══════════════════ */
.orders-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.orders-filter-bar select,
.orders-filter-bar input[type="search"],
.orders-filter-bar input[type="date"] {
  min-height: 36px;
  min-width: 140px;
}

.orders-filter-bar input[type="search"] {
  flex: 1;
  min-width: 220px;
}

.orders-custom-range {
  display: flex;
  gap: 6px;
}

.orders-count-chip {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.12);
  color: var(--pink-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ═══════════════════ DISPATCH MODAL ═══════════════════ */
.dispatch-modal { display: grid; gap: 14px; }

.dispatch-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.dispatch-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 1fr) minmax(140px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.dispatch-row-id strong { color: var(--cream); }
.dispatch-row-id small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 2px; }

.dispatch-field {
  display: grid;
  gap: 4px;
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dispatch-field input {
  min-height: 36px;
  padding: 6px 10px;
}

@media (max-width: 720px) {
  .dispatch-row { grid-template-columns: 1fr; }
}

/* ═══════════════════ PRODUCT AFFINITY ═══════════════════ */
.customer-affinity {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.customer-affinity header {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.customer-affinity h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
}

.customer-affinity header small { color: var(--muted); font-size: 0.78rem; }

.affinity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.affinity-grid h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-family: "Archivo", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affinity-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.affinity-pill {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.affinity-pill strong { color: var(--cream); font-size: 0.86rem; }

.affinity-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.affinity-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--rose));
}

.affinity-pill small { color: var(--muted); font-size: 0.74rem; }

@media (max-width: 720px) {
  .affinity-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════ RISK INDICATOR ═══════════════════ */
.risk-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(251, 113, 133, 0.18);
  color: #fb7185;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-reason {
  display: block;
  margin-top: 4px;
  color: #fb7185;
  font-size: 0.78rem;
  font-style: italic;
}

.risk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fb7185;
  vertical-align: middle;
  margin-right: 6px;
}

.customer-row.is-risky td:first-child {
  box-shadow: inset 3px 0 0 #fb7185;
}

/* ═══════════════════ CUSTOMERS ROW SPARKLINE ═══════════════════ */
.row-sparkline {
  width: 60px;
  height: 18px;
  vertical-align: middle;
}

/* ═══════════════════ SMART SEGMENTS BAR ═══════════════════ */
.segment-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0 50%, rgba(255, 79, 154, 0.08), transparent 14rem),
    rgba(255, 255, 255, 0.025);
}

.segment-bar-label {
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.segment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.segment-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 156, 199, 0.36);
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.08);
  overflow: hidden;
  transition: background 160ms var(--ease);
}

.segment-chip:hover { background: rgba(255, 79, 154, 0.18); }

.segment-chip button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  color: var(--rose);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.segment-chip.pinned button { color: var(--cream); }

.segment-chip-delete {
  padding: 5px 8px !important;
  color: var(--muted) !important;
  font-size: 0.95rem !important;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}

.segment-chip:hover .segment-chip-delete { opacity: 1; }
.segment-chip-delete:hover { color: var(--red) !important; }

.segment-empty {
  color: var(--muted);
  font-size: 0.84rem;
  font-style: italic;
}

/* Segment-save modal */
.segment-save-modal { display: grid; gap: 14px; }
.segment-save-modal label.span-2 { display: grid; gap: 6px; }
.segment-save-modal label.span-2 input { min-height: 40px; padding: 10px 12px; }

/* ═══════════════════ RISK AUDIT BANNER ═══════════════════ */
.risk-audit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(251, 113, 133, 0.42);
  border-radius: var(--radius);
  background: rgba(251, 113, 133, 0.08);
  color: #fb7185;
}

.risk-audit-banner strong {
  color: #fb7185;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  margin-right: 4px;
}

.risk-audit-banner button { padding: 6px 12px; min-height: 32px; }

/* Segment chip count badge */
.segment-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.42);
  color: var(--rose);
  font-size: 0.66rem;
  font-weight: 800;
}

/* ═══════════════════ NEXT-BEST SUGGESTION ═══════════════════ */
.nbb-suggestion {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  margin: 10px 0;
  border: 1px solid rgba(255, 79, 154, 0.32);
  border-left: 3px solid var(--pink);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.12), rgba(255, 156, 199, 0.04));
}

.nbb-suggestion strong:first-child {
  color: var(--rose);
  font-family: "Archivo", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nbb-suggestion p {
  margin: 0;
  color: var(--cream);
  line-height: 1.55;
}

.nbb-suggestion p strong { color: var(--rose); }

/* ═══════════════════ RISK BADGE — CLICKABLE ═══════════════════ */
button.risk-badge {
  border: 1px solid rgba(251, 113, 133, 0.5) !important;
  cursor: pointer;
  transition: background 140ms var(--ease);
}

button.risk-badge:hover {
  background: rgba(251, 113, 133, 0.32) !important;
}

.risk-reason-details {
  margin-top: 4px;
}

.risk-reason-details summary {
  cursor: pointer;
  list-style: none;
}

.risk-reason-details summary::-webkit-details-marker { display: none; }

.risk-reason-details p {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-left: 2px solid #fb7185;
  background: rgba(251, 113, 133, 0.08);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ═══════════════════ BATCH FINANCIALS ═══════════════════ */
.batch-financials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.batch-financials article {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.batch-financials article.tone-ok { border-color: rgba(152, 240, 195, 0.32); }
.batch-financials article.tone-warn { border-color: rgba(251, 113, 133, 0.42); }

.batch-financials span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.batch-financials strong {
  display: block;
  margin-top: 4px;
  color: var(--cream);
  font-size: 1.05rem;
}

.batch-financials article.tone-warn strong { color: #fb7185; }
.batch-financials article.tone-ok strong { color: var(--green); }

.batch-financials small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: italic;
}

@media (max-width: 720px) {
  .batch-financials { grid-template-columns: 1fr; }
}

/* ═══════════════════ LOW STOCK CHIP ═══════════════════ */
.low-stock-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 208, 122, 0.22);
  color: var(--amber);
  border: 1px solid rgba(255, 208, 122, 0.42);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════ ORDERS POLISH: BULK + STICKY + VIP ═══════════════════ */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 79, 154, 0.42);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.14), rgba(255, 156, 199, 0.04));
  color: var(--cream);
  font-size: 0.86rem;
}

.bulk-action-bar strong { color: var(--rose); font-size: 1rem; }
.bulk-action-bar button { padding: 6px 14px; min-height: 32px; }

th.bulk-col, td.bulk-col {
  width: 28px;
  padding-right: 4px !important;
}

td.bulk-col input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--pink-2); }

.order-row.is-selected td { background: rgba(255, 79, 154, 0.1); }

/* Sticky filter bar on Orders + Customers tabs */
.orders-filter-bar,
.customer-filter-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(11, 7, 10, 0.94);
  backdrop-filter: blur(12px);
}

/* ═══════════════════ CMD-K ACTION-MODE STYLING ═══════════════════ */
.cmd-palette-type.tone-action {
  background: rgba(255, 79, 154, 0.18);
  color: var(--rose);
  padding: 2px 9px;
  border-radius: 999px;
}

.cmd-palette-empty code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 79, 154, 0.12);
  color: var(--rose);
  font-family: "Archivo", monospace;
  font-size: 0.78rem;
}

/* ═══════════════════ CUSTOMER AUDIT TIMELINE ═══════════════════ */
.customer-audit h3 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
}

.audit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.audit-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.audit-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pink-2);
  box-shadow: 0 0 0 2px rgba(255, 79, 154, 0.18);
}

.audit-row strong {
  display: block;
  color: var(--cream);
  font-size: 0.84rem;
  text-transform: capitalize;
}

.audit-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
}

.audit-when {
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.audit-loading {
  list-style: none;
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* ═══════════════════ BULK PROGRESS BAR ═══════════════════ */
.bulk-progress {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  min-width: 120px;
}

.bulk-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--rose));
  transition: width 220ms var(--ease);
  width: 0%;
}

[data-bulk-batch-select] { min-height: 32px; padding: 4px 10px; }

/* ═══════════════════ TEMPLATE EDITOR ═══════════════════ */
.template-editor-panel { margin-top: 20px; }

.template-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.template-row.is-inactive { opacity: 0.55; }

.template-meta strong {
  color: var(--cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
}

.template-meta small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.template-body-preview {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
  grid-column: 1 / -1;
}

.template-row-actions {
  display: flex;
  gap: 6px;
  align-items: start;
}

.template-row-actions .button { padding: 6px 12px; min-height: 30px; }

.template-editor-modal {
  display: grid;
  gap: 12px;
}

.template-editor-modal label {
  display: grid;
  gap: 6px;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.template-editor-modal label.check-row {
  flex-direction: row;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
}

.template-editor-modal input,
.template-editor-modal select,
.template-editor-modal textarea {
  min-height: 38px;
  padding: 8px 12px;
  font-family: "Archivo", sans-serif;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
}

.template-editor-modal textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}

.broadcast-helper code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 79, 154, 0.12);
  color: var(--rose);
  font-family: "Archivo", monospace;
  font-size: 0.78rem;
  margin-right: 3px;
}

/* ═══════════════════ RISK BREAKDOWN ═══════════════════ */
.risk-breakdown {
  color: var(--muted);
  font-size: 0.78rem;
  margin-right: auto;
}

/* ═══════════════════ MOBILE CUSTOMER CARDS ═══════════════════ */
@media (max-width: 720px) {
  /* Stack the customer table as cards */
  .customer-table thead { display: none; }
  .customer-table,
  .customer-table tbody,
  .customer-table tr,
  .customer-table td {
    display: block;
    width: 100%;
  }
  .customer-table tr.customer-row {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
    padding: 12px 14px;
  }
  .customer-table tr.customer-row.is-risky { border-left: 3px solid #fb7185; }
  .customer-table tr.customer-row td {
    padding: 4px 0;
    border: 0;
    position: relative;
    padding-left: 110px;
    min-height: 22px;
  }
  .customer-table tr.customer-row td:first-child {
    padding-left: 0;
    margin-bottom: 6px;
  }
  .customer-table tr.customer-row td:nth-child(2)::before { content: "Phone"; }
  .customer-table tr.customer-row td:nth-child(3)::before { content: "City"; }
  .customer-table tr.customer-row td:nth-child(4)::before { content: "Orders"; }
  .customer-table tr.customer-row td:nth-child(5)::before { content: "Spend"; }
  .customer-table tr.customer-row td:nth-child(6)::before { content: "Last seen"; }
  .customer-table tr.customer-row td::before {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .customer-row-actions { text-align: left !important; padding-left: 0 !important; }
  .customer-row-actions::before { display: none; }

  /* Filter bar wraps better on phones */
  .customer-filter-bar,
  .orders-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .customer-filter-bar select,
  .customer-filter-bar input,
  .orders-filter-bar select,
  .orders-filter-bar input {
    width: 100%;
    min-width: 0;
  }

  /* Bulk action bar wraps onto its own row */
  .bulk-action-bar { flex-direction: column; align-items: stretch; }
  .bulk-action-bar button { width: 100%; }

  /* Orders list collapses to a card-per-order layout on small screens.
     Each row becomes a self-contained card with implicit field labels
     surfaced via td::before. Sticky thead is hidden. */
  [data-admin-panel="orders"] .admin-table thead { display: none; }
  [data-admin-panel="orders"] .admin-table,
  [data-admin-panel="orders"] .admin-table tbody,
  [data-admin-panel="orders"] .admin-table tr,
  [data-admin-panel="orders"] .admin-table td {
    display: block;
    width: 100%;
  }
  [data-admin-panel="orders"] .admin-table tr.order-row {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
  }
  [data-admin-panel="orders"] .admin-table tr.order-row.sla-warn { border-left: 3px solid var(--amber); }
  [data-admin-panel="orders"] .admin-table tr.order-row.sla-danger { border-left: 3px solid #fb7185; }
  [data-admin-panel="orders"] .admin-table tr.order-row td {
    padding: 4px 0;
    border: 0;
    position: relative;
    padding-left: 120px;
    min-height: 22px;
  }
  [data-admin-panel="orders"] .admin-table tr.order-row td.bulk-col { padding-left: 0; margin-bottom: 6px; }
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(2) { padding-left: 0; font-size: 1rem; margin-bottom: 4px; }
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(3)::before { content: "Customer"; }
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(4)::before { content: "Status"; }
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(5)::before { content: "Payment"; }
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(6)::before { content: "Status"; }
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(3)::before,
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(4)::before,
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(5)::before,
  [data-admin-panel="orders"] .admin-table tr.order-row td:nth-child(6)::before {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  [data-admin-panel="orders"] .admin-table tr.order-row td.table-actions { padding-left: 0; }
}

/* ═══════════════════ RISK CITY CHIPS ═══════════════════ */
.risk-city-chip {
  padding: 3px 11px;
  margin-right: 4px;
  border: 1px solid rgba(251, 113, 133, 0.4);
  border-radius: 999px;
  background: rgba(251, 113, 133, 0.08);
  color: #fb7185;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms var(--ease);
}

.risk-city-chip:hover { background: rgba(251, 113, 133, 0.2); }

/* ═══════════════════ TEMPLATE LIVE PREVIEW ═══════════════════ */
.template-preview-pane {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 156, 199, 0.34);
  border-radius: var(--radius);
  background: rgba(7, 5, 7, 0.42);
}

.template-preview-pane strong {
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.template-preview-pane p {
  margin: 0;
  color: var(--cream);
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ═══════════════════ SHIPMENT CARD ACTIONS ═══════════════════ */
.shipment-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.shipment-card-actions .button {
  padding: 6px 12px;
  min-height: 30px;
}

/* ═══════════════════════════════════ TODAY RIBBON ═══════════════════════════════════ */
.today-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 9;
  padding: 14px 0;
  margin-bottom: 18px;
  background: rgba(11, 7, 10, 0.92);
  backdrop-filter: blur(14px);
}

.today-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}

.today-stat:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 154, 0.4);
  background: rgba(255, 79, 154, 0.06);
}

.today-stat.tone-warn { border-color: rgba(255, 208, 122, 0.36); background: rgba(255, 208, 122, 0.07); }
.today-stat.tone-ok { border-color: rgba(152, 240, 195, 0.28); }
.today-stat.tone-info { border-color: rgba(255, 156, 199, 0.28); }

.today-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.today-stat strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  color: var(--cream);
  line-height: 1.1;
}

.today-stat small {
  color: var(--muted);
  font-size: 0.74rem;
}

.today-trend.tone-ok { color: var(--green); }
.today-trend.tone-warn { color: #fb7185; }
.today-trend.tone-info { color: var(--muted); }

@media (max-width: 880px) {
  .today-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════ ORDERS VIEW TOGGLE ═══════════════════════════════════ */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  gap: 2px;
}

.view-toggle button {
  border: 0;
  background: transparent;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.view-toggle button.active {
  background: rgba(255, 79, 154, 0.18);
  color: var(--rose);
}

/* ═══════════════════════════════════ KANBAN BOARD ═══════════════════════════════════ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.kanban-col.tone-warn { border-top: 3px solid var(--amber); }
.kanban-col.tone-ok { border-top: 3px solid var(--green); }
.kanban-col.tone-info { border-top: 3px solid var(--pink); }

.kanban-col header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--line);
}

.kanban-col header strong {
  color: var(--cream);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.kanban-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.18);
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
}

.kanban-cards {
  display: grid;
  gap: 6px;
}

.kanban-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}

.kanban-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 154, 0.4);
  background: rgba(255, 79, 154, 0.06);
}

.kanban-card.sla-warn { border-left: 3px solid var(--amber); }
.kanban-card.sla-danger { border-left: 3px solid #fb7185; }
.kanban-card.is-watched { border-color: rgba(255, 208, 122, 0.42); }

.kanban-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-card strong {
  color: var(--cream);
  font-size: 0.82rem;
}

.kanban-card small {
  color: var(--muted);
  font-size: 0.74rem;
}

.kanban-card-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 0.74rem;
}

.kanban-amount { color: var(--rose); font-weight: 800; }
.kanban-age { color: var(--muted); }

.kanban-sla {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kanban-sla.sla-warn { background: rgba(255, 208, 122, 0.18); color: var(--amber); }
.kanban-sla.sla-danger { background: rgba(251, 113, 133, 0.18); color: #fb7185; }

.kanban-balance {
  display: inline-block;
  margin-top: 3px;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 700;
}

.kanban-star { color: var(--amber); font-size: 0.95rem; }

.kanban-empty {
  margin: 0;
  padding: 8px 4px;
  color: rgba(191, 174, 183, 0.4);
  font-size: 0.7rem;
  text-align: center;
}

.kanban-show-all {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 156, 199, 0.36);
  border-radius: var(--radius);
  background: transparent;
  color: var(--rose);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.kanban-show-all:hover { background: rgba(255, 79, 154, 0.1); border-style: solid; }

@media (max-width: 1200px) {
  .kanban-board { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 720px) {
  .kanban-board { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════ ORDER FULL-SCREEN VIEW ═══════════════════════════════════ */
.order-detail-fullscreen.admin-panel.active {
  display: block;
}

.order-fs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.order-fs-toolbar .button { padding: 7px 14px; min-height: 34px; }
.order-fs-spacer { flex: 1; }

.order-fs-grid {
  display: grid;
  gap: 18px;
}

.order-fs-hero { /* container that wraps the old modal HTML */ }

/* Horizontal stage tracker */
.order-stage-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}

.stage-dot {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  position: relative;
}

.stage-dot::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}

.stage-dot:last-child::after { display: none; }

.stage-dot-circle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
  position: relative;
  z-index: 1;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.stage-dot-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.stage-dot.done .stage-dot-circle {
  background: rgba(152, 240, 195, 0.22);
  color: var(--green);
}
.stage-dot.done::after { background: rgba(152, 240, 195, 0.3); }

.stage-dot.current .stage-dot-circle {
  background: linear-gradient(135deg, var(--pink), var(--rose));
  color: var(--black);
  animation: stage-pulse 1.8s ease-in-out infinite;
}

.stage-dot.current .stage-dot-label { color: var(--rose); }

@keyframes stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 154, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255, 79, 154, 0.0); }
}

.order-stage-bar.is-cancelled {
  opacity: 0.5;
}

.stage-cancelled-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(251, 113, 133, 0.22);
  color: #fb7185;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ═══════════════════════ ACTION ITEMS (Cashflow) ═══════════════════════ */
.action-items-panel .panel-title-row {
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.action-tone-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.action-tone-chips button {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}

.action-tone-chips button.active,
.action-tone-chips button:hover {
  background: rgba(255, 79, 154, 0.16);
  color: var(--cream);
  border-color: rgba(255, 79, 154, 0.42);
}

.action-tone-chips span {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--rose);
  font-size: 0.66rem;
}

/* ═══════════════════════ SLA DASHBOARD ═══════════════════════ */
.sla-dashboard {
  display: grid;
  gap: 8px;
}

.sla-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.sla-row.tone-ok { border-left: 3px solid var(--green); }
.sla-row.tone-warn { border-left: 3px solid var(--amber); }
.sla-row.tone-info { border-left: 3px solid var(--pink-2); }

.sla-row .sla-label { color: var(--cream); font-size: 0.86rem; }
.sla-row .sla-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rose);
}
.sla-row.tone-warn .sla-value { color: var(--amber); }
.sla-row.tone-ok .sla-value { color: var(--green); }
.sla-row .sla-target { color: var(--muted); font-size: 0.74rem; }
.sla-row .sla-samples { color: var(--muted); font-size: 0.74rem; font-style: italic; }

@media (max-width: 720px) {
  .sla-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .sla-target, .sla-samples { grid-column: 1 / -1; }
}

/* ═══════════════════════ STOREFRONT SHOP UX ═══════════════════════ */
.product-media { position: relative; }

/* Quick-add overlay button — appears on the image, visible always on
   touch devices, fade-in on hover for desktop */
.quick-add-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 79, 154, 0.36);
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.78);
  backdrop-filter: blur(8px);
  color: var(--rose);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
  opacity: 0.92;
}
.quick-add-btn:hover,
.quick-add-btn:focus-visible {
  background: var(--pink);
  color: var(--black);
  transform: scale(1.08);
  outline: none;
}

/* Wishlist heart */
.wishlist-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.72);
  backdrop-filter: blur(6px);
  color: var(--rose);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.wishlist-heart:hover { transform: scale(1.12); background: rgba(7, 5, 7, 0.92); }
.wishlist-heart.is-wished { color: var(--pink); }
.wishlist-heart.is-wished::before { content: ""; }

/* New-arrival badge */
.new-arrival-badge {
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--rose));
  color: var(--black);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sold-out treatment */
.product-card.is-soldout .product-media img { filter: grayscale(0.7) brightness(0.7); }
.soldout-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.88);
  border: 1px solid rgba(255, 216, 232, 0.36);
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Skeleton placeholder card */
.product-card.skeleton { border: 1px solid var(--line); pointer-events: none; }
.skeleton-block { aspect-ratio: 1; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: skeleton-shimmer 1.6s linear infinite; }
.skeleton-line { height: 12px; margin: 8px 0; background: rgba(255,255,255,0.06); border-radius: 4px; }
.skeleton-line-1 { width: 70%; }
.skeleton-line-2 { width: 40%; }
.skeleton-line-3 { width: 90%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile filter trigger */
.mobile-filter-trigger {
  display: none;
}

.active-filter-count {
  margin-left: 4px;
  color: var(--rose);
  font-weight: 800;
}

@media (max-width: 720px) {
  .mobile-filter-trigger {
    display: block;
    position: sticky;
    top: 56px;
    z-index: 8;
    margin: 6px 0 12px;
    padding: 6px 0;
    background: rgba(7, 5, 7, 0.92);
    backdrop-filter: blur(12px);
  }
  .mobile-filter-trigger .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  /* Hide the inline filter panel by default on mobile; reveal as a slide-up sheet */
  .shop-layout { grid-template-columns: 1fr; }
  .filter-panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 80;
    transform: translateY(100%);
    transition: transform 240ms var(--ease);
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255, 79, 154, 0.36);
    padding: 18px;
    background: #0b070a;
    box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.55);
  }
  .filter-panel.is-open { transform: translateY(0); }
  body.filter-drawer-open { overflow: hidden; }
  body.filter-drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(7, 5, 7, 0.55);
    backdrop-filter: blur(4px);
    z-index: 79;
  }
  .filter-drawer-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: transparent;
    color: var(--cream);
    font-size: 1.6rem;
    cursor: pointer;
  }
}

@media (min-width: 721px) {
  .filter-drawer-close { display: none; }
}

/* Recently viewed strip on PDP */
.recently-viewed-strip {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.recently-viewed-strip h3 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  color: var(--cream);
}
.recently-viewed-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.recently-viewed-tile {
  flex: 0 0 110px;
  scroll-snap-align: start;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}
.recently-viewed-tile img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}
.recently-viewed-tile strong {
  font-size: 0.74rem;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recent-price { color: var(--rose); font-size: 0.78rem; font-weight: 800; }
.recent-placeholder {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
}

/* Recent orders rail on /track */
.recent-orders-rail {
  margin-top: 18px;
}
.recent-orders-rail:empty { display: none; }
.recent-orders-rail h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: "Archivo", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.recent-orders-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.recent-order-tile {
  flex: 0 0 200px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease);
}
.recent-order-tile:hover { transform: translateY(-2px); border-color: rgba(255, 79, 154, 0.42); }
.recent-order-tile strong { color: var(--cream); font-size: 0.92rem; }
.recent-order-tile small { color: var(--muted); font-size: 0.72rem; }
.recent-order-tile span { color: var(--rose); font-weight: 800; font-size: 0.86rem; }

/* ═══════════════════════ PORTAL — KANBAN DnD ═══════════════════════ */
.kanban-card { cursor: grab; }
.kanban-card-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.kanban-cards.is-over {
  background: rgba(255, 79, 154, 0.1);
  border-radius: var(--radius);
  outline: 2px dashed rgba(255, 79, 154, 0.42);
  outline-offset: -2px;
}

/* ═══════════════════════ INBOX ROWS ═══════════════════════ */
.inbox-row {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}
.inbox-row.is-reply { border-left: 2px solid var(--green); }
.inbox-row header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.inbox-row strong { color: var(--cream); }
.inbox-row small { color: var(--muted); font-size: 0.74rem; }
.inbox-row p { margin: 0; color: var(--cream); font-size: 0.88rem; line-height: 1.5; }
.inbox-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-row-actions .button { padding: 6px 12px; min-height: 32px; }

/* ═══════════════════════ CHURN BANNER ═══════════════════════ */
.churn-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 208, 122, 0.42);
  border-radius: var(--radius);
  background: rgba(255, 208, 122, 0.08);
}
.churn-alert-banner strong {
  color: var(--amber);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
}
.churn-alert-banner span { color: var(--cream); font-size: 0.86rem; }
.churn-alert-banner button { margin-left: auto; padding: 6px 12px; min-height: 32px; }

/* ═══════════════════════ CONVERSION FUNNEL ═══════════════════════ */
.funnel-strip { display: grid; gap: 10px; }
.funnel-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.funnel-stage {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}
.funnel-stage.tone-ok { border-color: rgba(152, 240, 195, 0.34); }
.funnel-bar { height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 999px; overflow: hidden; }
.funnel-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--rose)); transition: width 320ms var(--ease); }
.funnel-stage strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  color: var(--cream);
}
.funnel-stage small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}
.funnel-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}
.funnel-summary strong { color: var(--rose); font-size: 1rem; }
.funnel-summary .trend { padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }
.funnel-summary .trend.tone-ok { background: rgba(152, 240, 195, 0.18); color: var(--green); }
.funnel-summary .trend.tone-warn { background: rgba(251, 113, 133, 0.18); color: #fb7185; }
@media (max-width: 720px) {
  .funnel-stages { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop sticky filter sidebar — already sticky on tablets+, but make
   the sort dropdown reachable without a full scroll-to-top by giving the
   left column a max-height + internal scroll when it exceeds the viewport. */
@media (min-width: 721px) {
  .filter-panel {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

/* ═══════════════════════ AUTH MODAL ═══════════════════════ */
.auth-modal {
  display: grid;
  gap: 16px;
  padding: 14px 6px;
  max-width: 440px;
  margin: 0 auto;
}
.auth-modal h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.8rem;
}
.auth-label {
  display: grid;
  gap: 6px;
  color: var(--rose);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auth-label input {
  min-height: 50px;
  padding: 12px 16px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  font-family: "Archivo", sans-serif;
  text-transform: none;
  color: var(--cream);
}
.auth-dev-code {
  padding: 10px 14px;
  border: 1px dashed var(--amber);
  border-radius: var(--radius);
  background: rgba(255, 208, 122, 0.08);
  color: var(--amber);
  font-size: 0.84rem;
}
.auth-dev-code code { font-size: 1.1rem; font-weight: 800; }

.account-modal .account-orders { display: grid; gap: 8px; }
.account-modal h3 {
  margin: 0;
  color: var(--muted);
  font-family: "Archivo", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-order-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.account-order-list button {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.account-order-list button:hover {
  border-color: rgba(255, 79, 154, 0.42);
  background: rgba(255, 79, 154, 0.08);
}
.account-order-list strong { color: var(--cream); }
.account-order-list small { color: var(--muted); font-size: 0.78rem; }
.account-order-amount { color: var(--rose); font-weight: 800; font-size: 0.86rem; }

.header-actions { display: inline-flex; gap: 10px; align-items: center; }

/* ═══════════════════════ LAST CONTACT PILL ═══════════════════════ */
.last-contact-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.last-contact-pill.tone-ok { background: rgba(152, 240, 195, 0.18); color: var(--green); }
.last-contact-pill.tone-info { background: rgba(255, 156, 199, 0.18); color: var(--rose); }

/* ═══════════════════════ AUTO-WA FAILED BANNER ═══════════════════════ */
.wa-failed-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 208, 122, 0.42);
  border-radius: var(--radius);
  background: rgba(255, 208, 122, 0.08);
}
.wa-failed-banner strong { color: var(--amber); font-size: 0.9rem; }
.wa-failed-banner span { color: var(--cream); font-size: 0.84rem; flex: 1; }
.wa-failed-banner button { padding: 6px 12px; min-height: 32px; }

/* ═══════════════════════ KANBAN SAVING PULSE ═══════════════════════ */
.kanban-card-saving {
  animation: kanban-saving 1.2s ease-in-out infinite;
}
@keyframes kanban-saving {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 154, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 79, 154, 0.32); }
}

/* ═══════════════════════ TOAST WITH UNDO ═══════════════════════ */
.toast-undo {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.toast-undo-btn {
  padding: 4px 12px;
  border: 1px solid var(--pink);
  border-radius: 999px;
  background: var(--pink);
  color: var(--black);
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.toast-undo-btn:hover { background: var(--rose); }

/* Per-product 8-week sales sparkline (admin product card) */
.product-sparkline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 79, 154, 0.04);
}
.product-sparkline svg { width: 96px; height: 18px; }
.product-sparkline small { color: var(--muted); font-size: 0.7rem; }

/* ═══════════════════════ SUBMIT-BUTTON BUSY STATE ═══════════════════════ */
button[type="submit"][data-busy] {
  opacity: 0.7;
  cursor: progress;
  position: relative;
  padding-right: 38px;
}
button[type="submit"][data-busy]::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════ MANUAL ORDER MODAL ═══════════════════════ */
.manual-order-modal {
  display: grid;
  gap: 14px;
}

.manual-customer-grid {
  gap: 10px;
}

.manual-customer-grid label {
  display: grid;
  gap: 4px;
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manual-customer-grid input,
.manual-customer-grid select,
.manual-customer-grid textarea {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
}

.manual-lines {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.manual-lines-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manual-line {
  display: grid;
  grid-template-columns: 1.6fr 60px 1fr auto 32px;
  gap: 8px;
  align-items: center;
}

.manual-line select,
.manual-line input {
  min-height: 36px;
  padding: 6px 10px;
}

.manual-line-subtotal {
  color: var(--rose);
  font-weight: 800;
  font-size: 0.86rem;
  text-align: right;
}

.manual-line .button {
  padding: 6px 10px;
  min-height: 32px;
  min-width: 32px;
}

.manual-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.manual-total span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manual-total strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  color: var(--rose);
}

@media (max-width: 720px) {
  .manual-line {
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
  }
  .manual-line .button { justify-self: end; }
}

/* ═══════════════════════ POLISH PASS — breathing + zebra ═══════════════════════ */
.admin-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.012);
}

.ops-panel + .ops-panel,
.ops-panel + .admin-table-wrap,
.admin-table-wrap + .ops-panel {
  margin-top: 16px;
}

.admin-heading + .ops-panel,
.admin-heading + .kpi-hero {
  margin-top: 4px;
}

/* ═══════════════════════════════════ ACTIVITY RAIL ═══════════════════════════════════ */
.activity-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.activity-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.activity-glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font-size: 0.92rem;
}

.activity-row.tone-ok .activity-glyph { background: rgba(152, 240, 195, 0.18); color: var(--green); }
.activity-row.tone-warn .activity-glyph { background: rgba(255, 208, 122, 0.18); color: var(--amber); }
.activity-row.tone-danger .activity-glyph { background: rgba(251, 113, 133, 0.18); color: #fb7185; }
.activity-row.tone-info .activity-glyph { background: rgba(255, 79, 154, 0.16); color: var(--pink-2); }

.activity-row strong {
  display: block;
  color: var(--cream);
  font-size: 0.86rem;
}

.activity-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

/* ───── WhatsApp template modal ───── */
.wa-template-modal {
  display: grid;
  gap: 14px;
}

.wa-template-sub {
  margin: 0;
  color: var(--muted);
}

.wa-template-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
}

.wa-template-list {
  display: grid;
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
}

.wa-template-row {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.wa-template-row:hover,
.wa-template-row.active {
  border-color: rgba(37, 211, 102, 0.46);
  background: rgba(37, 211, 102, 0.1);
}

.wa-template-row small {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wa-template-preview {
  display: grid;
  gap: 10px;
}

.wa-template-preview textarea {
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.32);
  color: var(--cream);
  font-family: "Archivo", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
}

.wa-template-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .wa-template-grid { grid-template-columns: 1fr; }
  .wa-template-list { max-height: 200px; }
}

/* WhatsApp tab in mobile action bar */
.mobile-wa-tab {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(37, 211, 102, 0.14) !important;
  color: #4ade80 !important;
  font-weight: 800 !important;
}

.mobile-wa-tab svg { flex-shrink: 0; }

.payment-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.payment-ledger article {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
}

.payment-ledger span,
.detail-list dt {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.payment-ledger strong,
.detail-list dd {
  display: block;
  margin: 6px 0 0;
  color: var(--cream);
  font-weight: 800;
}

.tracking-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}

.tracking-dot {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.tracking-step.done .tracking-dot {
  background: var(--pink);
  box-shadow: 0 0 0 5px rgba(255, 79, 154, 0.12);
}

.timeline-panel {
  padding: 22px;
  margin-bottom: 64px;
}

.timeline-panel ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline-panel li {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
}

.policy-section {
  max-width: 860px;
  margin: 0 auto 64px;
  padding: 0 22px;
}

.policy-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.policy-list li {
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  border-left: 3px solid var(--pink-2);
  background: rgba(255, 255, 255, 0.045);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.policy-list li strong {
  font-size: 0.95rem;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.policy-list li span {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}

.order-clarity-band {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1fr);
  gap: 24px;
  width: var(--page);
  margin: 0 auto;
  padding: 44px 0 58px;
  border-top: 1px solid var(--line);
}

.order-clarity-band h2 {
  max-width: 620px;
}

.clarity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.clarity-grid article,
.next-action-card,
.checkout-progress li,
.today-card,
.checklist-row {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.clarity-grid article {
  display: grid;
  gap: 10px;
  padding: 15px;
}

.clarity-grid strong {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 79, 154, 0.36);
  color: var(--pink-2);
}

.clarity-grid span,
.next-action-card strong {
  color: var(--cream);
  font-weight: 800;
}

.clarity-grid p,
.next-action-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.checkout-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}

.checkout-progress li {
  display: grid;
  gap: 4px;
  padding: 10px;
  min-height: 74px;
}

.checkout-progress li.active {
  border-color: rgba(255, 79, 154, 0.36);
  background: rgba(255, 79, 154, 0.09);
}

.checkout-progress strong {
  color: var(--cream);
  font-size: 0.84rem;
}

.checkout-progress span {
  color: var(--muted);
  font-size: 0.74rem;
}

.next-action-card {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 14px;
  border-left: 3px solid var(--pink);
}

.next-action-card span {
  color: var(--pink-2);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tracking-proof-form {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid rgba(255, 79, 154, 0.34);
  border-radius: var(--radius);
  background: rgba(255, 79, 154, 0.08);
}

.tracking-proof-form h3,
.tracking-proof-form p {
  margin: 0;
}

.form-grid.compact {
  gap: 10px;
}

.cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(390px, 100vw);
  padding: 16px;
  background: #0b070a;
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(105%);
  transition: transform 260ms var(--ease);
}

.cart-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  justify-content: space-between;
  margin-bottom: 18px;
}

.drawer-header h2,
.order-summary h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
}

.ops-panel .panel-title-row h2,
.ops-panel > h2 {
  margin: 0;
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-2);
}

.admin-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 18px;
  padding: 26px 0 64px;
}

.admin-sidebar {
  position: sticky;
  top: 78px;
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.admin-brand {
  padding: 8px 4px 18px;
}

.admin-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
}

.admin-tab [data-tab-badge] {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--black);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-tab [data-tab-badge]:empty,
.admin-tab [data-tab-badge][hidden] {
  display: none;
}

.admin-login {
  max-width: 460px;
  padding: 20px;
}

.portal-login-note {
  max-width: 390px;
  color: var(--muted);
  line-height: 1.65;
}

.hidden {
  display: none !important;
}

.admin-content {
  min-width: 0;
}

.admin-panel {
  display: none;
  padding: 16px;
}

.admin-panel.active {
  display: block;
}

.admin-heading {
  justify-content: space-between;
  margin-bottom: 18px;
}

.admin-heading h1 {
  font-size: clamp(1.55rem, 3vw, 2.9rem);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.metric-card {
  position: relative;
  padding: 16px 14px 14px;
  overflow: hidden;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}

.metric-card:hover {
  border-color: rgba(255, 216, 232, 0.28);
  transform: translateY(-2px);
}

.metric-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), transparent);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.metric-card:hover::after {
  opacity: 0.5;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 10px;
  color: var(--cream);
  font-size: 1.32rem;
  font-weight: 800;
}

.metric-card em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.4;
}

.today-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.today-card {
  display: grid;
  gap: 6px;
  padding: 13px;
  color: inherit;
  text-align: left;
  border-radius: var(--radius);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.today-card:hover,
.today-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 79, 154, 0.38);
  background: rgba(255, 79, 154, 0.08);
  outline: none;
}

.today-card strong {
  color: var(--rose);
  font-size: 1.35rem;
}

.today-card span {
  color: var(--cream);
  font-weight: 800;
}

.today-card small {
  color: var(--muted);
  line-height: 1.45;
}

.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ops-panel {
  padding: 16px;
}

.ops-panel > h2 {
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-2);
  margin-bottom: 14px;
}

.pipeline {
  display: grid;
  gap: 10px;
}

.pipeline-row {
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  gap: 10px;
  align-items: center;
}

.pipeline-bar {
  height: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.pipeline-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--rose));
}

.admin-table-wrap {
  overflow-x: auto;
  max-height: 580px;
  overflow-y: auto;
}

.admin-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-order-cards {
  display: none;
  gap: 12px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--pink-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 79, 154, 0.05);
  white-space: nowrap;
}

.admin-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}

.table-actions {
  display: grid;
  gap: 8px;
  min-width: 136px;
}

.order-row {
  cursor: pointer;
}

.order-row:hover td,
.order-row:focus-visible td {
  background: rgba(255, 79, 154, 0.08);
}

.admin-table select {
  min-width: 170px;
}

.quick-filter-row,
.subnav-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.quick-filter-row button,
.subnav-tabs button {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.quick-filter-row button.active,
.quick-filter-row button:hover,
.quick-filter-row button:focus-visible,
.subnav-tabs button.active,
.subnav-tabs button:hover,
.subnav-tabs button:focus-visible {
  border-color: rgba(255, 79, 154, 0.38);
  background: rgba(255, 79, 154, 0.12);
  color: var(--cream);
  outline: none;
}

.product-editor,
.settings-form,
.creative-brief,
.campaign-form,
.shipment-form {
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}

.shipment-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.span-2 {
  grid-column: span 2;
}

output {
  color: var(--green);
  font-weight: 800;
}

.form-section-title {
  margin: 4px 0 -2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--pink-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-editor .form-section-title:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.admin-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.shipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.shipment-card,
.admin-order-card,
.empty-checkout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.shipment-card,
.admin-order-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.shipment-card p,
.admin-order-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.shipment-card h3 {
  margin-top: 8px;
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.automation-grid article,
.automation-flow article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.automation-grid strong {
  color: var(--rose);
  font-size: 1.25rem;
}

.automation-grid span,
.automation-flow span,
.handoff-note {
  color: var(--muted);
}

.automation-flow {
  display: grid;
  gap: 8px;
}

.shipment-capacity {
  grid-template-columns: 86px 1fr 54px;
}

.batch-orders {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.order-mini {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 216, 232, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  color: var(--cream);
  text-align: left;
}

.order-mini span,
.order-card-grid small {
  color: var(--muted);
  font-size: 0.74rem;
}

.order-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.order-card-grid span {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.trend-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.trend-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.trend-image-placeholder {
  aspect-ratio: 1;
  border-radius: var(--radius);
}

.trend-card small {
  color: var(--muted);
  line-height: 1.55;
}

.growth-command {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 14px;
  margin-bottom: 16px;
}

.growth-hero-panel,
.growth-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.growth-hero-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 79, 154, 0.17), transparent 22rem),
    rgba(255, 255, 255, 0.045);
}

.growth-hero-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.9rem);
}

.growth-hero-panel p:not(.kicker),
.growth-side span,
.creative-job small,
.campaign-row small,
.lead-card span,
.lead-card p,
.calendar-row small,
.integration-list span {
  color: var(--muted);
  line-height: 1.58;
}

.creative-brief,
.campaign-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
  background: rgba(0, 0, 0, 0.16);
}

.growth-side {
  padding: 18px;
}

.growth-side h2 {
  margin-bottom: 14px;
}

.growth-play,
.integration-list article {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.growth-play:last-child,
.integration-list article:last-child {
  border-bottom: 0;
}

.growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.panel-title-row,
.lead-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.creative-job {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  margin-bottom: 10px;
}

.creative-job img {
  width: 86px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.creative-job h3,
.campaign-row strong,
.lead-card strong,
.calendar-row strong {
  display: block;
  margin-top: 6px;
}

.campaign-row,
.calendar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.calendar-row {
  grid-template-columns: 116px minmax(0, 1fr);
}

.campaign-row:last-child,
.calendar-row:last-child {
  border-bottom: 0;
}

.lead-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  margin-bottom: 10px;
}

.lead-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lead-card p {
  margin: 0;
}

.lead-footer {
  margin-bottom: 0;
}

.integration-list {
  display: grid;
}

.launch-checklist {
  margin-top: 18px;
}

.checklist-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-top: 8px;
}

.checklist-row span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-weight: 900;
}

.checklist-row.done span {
  background: rgba(152, 240, 195, 0.16);
  color: var(--green);
}

.checklist-row.todo span {
  background: rgba(255, 208, 122, 0.14);
  color: var(--amber);
}

.checklist-row small {
  color: var(--muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 5, 7, 0.76);
  backdrop-filter: blur(14px);
}

.detail-modal {
  position: relative;
  width: min(1020px, 100%);
  max-height: min(90vh, 820px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 216, 232, 0.22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0 0, rgba(255, 79, 154, 0.12), transparent 22rem),
    #0b070a;
  box-shadow: var(--shadow);
}

.modal-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  margin-left: 12px;
}

.modal-grid,
.detail-columns {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
  gap: 18px;
}

.detail-columns.tri {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-gallery > img {
  width: 100%;
  aspect-ratio: 0.86;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.gallery-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.detail-modal h2 {
  font-size: clamp(1.75rem, 3vw, 3.1rem);
}

.product-detail-modal {
  align-items: start;
}

.product-ledger {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-modal-actions {
  position: sticky;
  bottom: -24px;
  z-index: 3;
  margin: 16px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: rgba(11, 7, 10, 0.94);
  backdrop-filter: blur(14px);
}

@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-modal {
  animation: modal-scale-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gallery-main {
  width: 100%;
  aspect-ratio: 0.86;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: opacity 220ms ease;
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.gallery-thumb {
  all: unset;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 160ms ease;
}

.gallery-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.gallery-thumb.active,
.gallery-thumb:hover {
  border-color: var(--pink-2);
}

.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.product-price-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}

.price-large {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0;
}

.product-modal-cta {
  position: sticky;
  bottom: -20px;
  z-index: 3;
  margin: 12px -20px -20px;
  padding: 12px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  background: rgba(11, 7, 10, 0.96);
  backdrop-filter: blur(16px);
}

.product-modal-cta .button.wide {
  flex: 1;
  min-width: 200px;
}

.image-preview-wrap {
  display: contents;
}

[data-image-preview] {
  display: none;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  margin-top: 8px;
}

.trend-edit-modal {
  align-items: start;
}

.trend-edit-media {
  position: sticky;
  top: 0;
}

.trend-edit-media img {
  width: 100%;
  aspect-ratio: 0.86;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: opacity 220ms ease;
}

.trend-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.trend-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.trend-edit-form .span-2 {
  grid-column: span 2;
}

.trend-edit-form input,
.trend-edit-form select,
.trend-edit-form textarea {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--cream);
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.product-media[role="button"] {
  cursor: pointer;
}

.product-title-row[role="button"] {
  cursor: pointer;
}

.product-title-row[role="button"]:hover strong {
  color: var(--pink-2);
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.detail-list dd {
  overflow-wrap: anywhere;
}

.detail-lines {
  display: grid;
  gap: 10px;
}

.drawer-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.drawer-hero p:not(.kicker) {
  color: var(--muted);
  line-height: 1.6;
}

.drawer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.detail-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
}

.payment-review-panel {
  margin: 14px 0;
  border-color: rgba(255, 79, 154, 0.26);
  background: rgba(255, 79, 154, 0.055);
}

.verification-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.verification-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.verification-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.verification-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.lead-reply-modal {
  display: grid;
  gap: 14px;
}

.lead-reply-form {
  display: grid;
  gap: 14px;
}

.order-detail-modal .payment-ledger {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.trust-strip {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.trust-strip span {
  padding: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
}

.order-item-line {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.order-item-line img {
  width: 60px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.order-item-line small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.message-thread {
  display: grid;
  gap: 10px;
}

.message-thread article {
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.message-thread article.outbound {
  border-color: rgba(255, 79, 154, 0.36);
  background: rgba(255, 79, 154, 0.08);
}

.message-thread p {
  margin: 6px 0;
  color: var(--cream);
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 36px));
}

.toast {
  padding: 14px 16px;
  border: 1px solid rgba(255, 216, 232, 0.24);
  background: var(--cream);
  color: var(--black);
  box-shadow: var(--shadow);
}

.empty-checkout {
  grid-column: 1 / -1;
  padding: clamp(22px, 4vw, 36px);
}

.empty-checkout h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}

.empty-checkout p {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.7;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════ ANNOUNCE BAR */
.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 9px 24px;
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.12), rgba(17, 13, 16, 0.5) 50%, rgba(255, 79, 154, 0.12));
  border-bottom: 1px solid rgba(255, 79, 154, 0.18);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.announce-bar strong {
  color: var(--pink-2);
}

.announce-bar .ribbon-fx {
  padding: 2px 8px;
  border: 1px solid rgba(255, 156, 199, 0.35);
  border-radius: 999px;
  color: var(--rose);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.announce-sep {
  color: rgba(255, 79, 154, 0.3);
}

/* ═══════════════════════════════════════ BRAND MARQUEE */
.brand-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 18px;
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface));
  /* Fade edges so the strip feels infinite, not abruptly clipped. */
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 44s linear infinite;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-dot {
  color: var(--pink);
  font-size: 0.45rem;
  line-height: 1;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════ HERO CARD FLOAT */
@keyframes float-a {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  38% { transform: translateY(-9px) rotate(0.4deg); }
  72% { transform: translateY(-3px) rotate(-0.15deg); }
}

@keyframes float-b {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  44% { transform: translateY(-7px) rotate(-0.45deg); }
  78% { transform: translateY(-2px) rotate(0.25deg); }
}

/* float-a / float-b idle animations intentionally NOT applied here.
   The parallax + entrance + ambient orb provide the cinematic motion. */

/* ═══════════════════════════════════════ ENHANCED PROCESS RAIL */
.process-rail article {
  position: relative;
}

.process-rail article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), rgba(255, 79, 154, 0));
  opacity: 0;
  transition: opacity 280ms var(--ease);
}

.process-rail article:hover::before {
  opacity: 1;
}

.process-rail span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--rose);
  color: var(--pink-3);
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 16px;
  font-family: "Playfair Display", serif;
  font-style: italic;
}

/* ═══════════════════════════════════════ ENHANCED BUTTON */
.button.primary:hover,
.button.primary:focus-visible {
  box-shadow: 0 22px 52px rgba(255, 79, 154, 0.42), 0 4px 16px rgba(255, 79, 154, 0.22);
}

/* ═══════════════════════════════════════ COLLECTION TILE OVERLAY */
.collection-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(26, 14, 20, 0.42));
  opacity: 0;
  transition: opacity 480ms var(--ease-cinema);
  z-index: 0;
}

.collection-tile:hover::after,
.collection-tile:focus-visible::after {
  opacity: 1;
}

.collection-tile span {
  z-index: 1;
}

/* ═══════════════════════════════════════ WHATSAPP FAB */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.38), 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), max-width 260ms var(--ease), padding 260ms var(--ease);
  overflow: hidden;
  max-width: 52px;
  white-space: nowrap;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(37, 211, 102, 0.54), 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 200px;
  padding: 13px 18px 13px 13px;
  outline: none;
}

.whatsapp-fab svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.whatsapp-fab-label {
  opacity: 0;
  transition: opacity 140ms 80ms var(--ease);
}

.whatsapp-fab:hover .whatsapp-fab-label,
.whatsapp-fab:focus-visible .whatsapp-fab-label {
  opacity: 1;
}

.mobile-action-bar {
  display: none;
}

/* ═══════════════════════════════════════ FOOTER */
.site-footer {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 0%, rgba(232, 166, 176, 0.14), transparent 28rem),
    var(--surface-2);
  color: var(--ink);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 30px 48px;
  width: var(--page);
  margin: 0 auto;
  padding: 54px 0 46px;
}

.footer-brand-col {
  display: grid;
  gap: 18px;
  align-content: start;
}

.footer-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.68;
  max-width: 280px;
}

.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-col-title {
  margin: 0 0 4px;
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-3);
}

.footer-col a {
  color: var(--muted);
  font-size: 0.87rem;
  transition: color 150ms var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--pink-3);
  outline: none;
}

.footer-wa-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #4ade80 !important;
  font-weight: 700;
}

.footer-wa-link:hover {
  color: #86efac !important;
}

.footer-hours {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  width: var(--page);
  margin: 0 auto;
  padding: 18px 0 30px;
  border-top: 1px solid var(--line);
}

.footer-base small {
  color: var(--muted);
  font-size: 0.75rem;
}

.footer-trust-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-trust-chips span {
  padding: 5px 10px;
  border: 1px solid rgba(255, 216, 232, 0.12);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════ LUXURY TYPOGRAPHY UPGRADE */
h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0;
}

.brand strong,
.product-title-row strong,
.collection-tile span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
}

.kicker {
  font-family: "Archivo", sans-serif;
  font-style: italic;
  letter-spacing: 0.06em;
}

h1 {
  font-size: clamp(2.6rem, 5.8vw, 5.4rem);
  font-weight: 600;
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.95rem, 3.8vw, 3.75rem);
  font-weight: 500;
}

/* ═══════════════════════════════════════ GRAIN OVERLAY */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ═══════════════════════════════════════ PAGE CURTAIN */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(135deg, #0d0810 0%, #1d0e19 50%, #070507 100%);
  transform: translateX(-101%);
  will-change: transform;
}


/* ═══════════════════════════════════════ HERO ENTRY ANIMATIONS */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes word-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-copy .kicker {
  animation: hero-enter 0.55s var(--ease) 0.05s both;
}

/* Mask-reveal — each word lives inside .hero-word-mask (overflow clip) and
   .hero-word rises from below for a film title-card stamp. */
.hero-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Generous bottom pad so descenders (g, p, y, "guesswork") don't clip
     against the mask edge. */
  padding-bottom: 0.22em;
  line-height: 1.04;
}

.hero-word {
  display: inline-block;
  transform: translateY(110%);
  animation: word-mask-rise 1.1s var(--ease-cinema) calc(0.18s + var(--wi) * 0.07s) both;
}

@keyframes word-mask-rise {
  0%   { transform: translateY(110%); }
  100% { transform: translateY(0); }
}

.hero-copy p:not(.kicker) {
  animation: hero-enter 0.6s var(--ease) 0.68s both;
}

.hero-actions {
  animation: hero-enter 0.6s var(--ease) 0.85s both;
}

.hero-stage {
  animation: hero-enter 0.9s var(--ease) 0.18s both;
}

/* ═══════════════════════════════════════ NAV LINK UNDERLINE */
.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--pink);
  transition: left 260ms var(--ease), right 260ms var(--ease);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  left: 13px;
  right: 13px;
}

/* ═══════════════════════════════════════ BUTTON SHIMMER */
.button.primary {
  position: relative;
  overflow: hidden;
}

.button.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  transform: skewX(-18deg);
  transition: left 700ms ease;
  pointer-events: none;
}

.button.primary:hover::before {
  left: 165%;
}

/* ═══════════════════════════════════════ PRODUCT CARD HOVER BLOOM */
.product-media img {
  transition: transform 640ms var(--ease), filter 640ms ease;
}

.product-card:hover .product-media img,
.product-card:focus-within .product-media img {
  transform: scale(1.06);
  filter: brightness(1.07) saturate(1.12);
}

.product-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 79, 154, 0.24) 0%, transparent 52%);
  opacity: 0;
  transition: opacity 440ms ease;
  pointer-events: none;
  z-index: 1;
}

.product-card:hover .product-media::after,
.product-card:focus-within .product-media::after {
  opacity: 1;
}

.product-badges {
  z-index: 2;
}

/* ═══════════════════════════════════════ COLLECTION TILE LABEL */
.collection-tile span {
  transform: translateY(5px);
  transition: transform 400ms var(--ease), background 300ms ease, box-shadow 400ms ease;
}

.collection-tile:hover span,
.collection-tile:focus-visible span {
  transform: translateY(0);
  background: rgba(13, 8, 16, 0.92);
  box-shadow: 0 -8px 28px rgba(255, 79, 154, 0.15);
}

/* ═══════════════════════════════════════ ANNOUNCE BAR GLEAM */
.announce-bar {
  position: relative;
  overflow: hidden;
}

@keyframes bar-gleam {
  0% { transform: translateX(-120%) skewX(-14deg); }
  100% { transform: translateX(700%) skewX(-14deg); }
}

.announce-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 156, 199, 0.14), transparent);
  animation: bar-gleam 5s ease 1.5s infinite;
  pointer-events: none;
}

/* ═══════════════════════════════════════ STAGGER CHILDREN */
@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.stagger-child {
  opacity: 0;
  animation: stagger-in 0.58s var(--ease) both;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
  }

  .hero-shell,
  .editorial-band,
  .order-clarity-band,
  .shop-layout,
  .checkout-layout,
  .track-shell,
  .faq-shell,
  .admin-shell,
  .ops-grid,
  .growth-command,
  .growth-hero-panel,
  .growth-grid {
    grid-template-columns: 1fr;
  }

  .hero-shell {
    min-height: auto;
    padding: 34px 0 46px;
  }

  .hero-stage {
    min-height: 460px;
  }

  .filter-panel,
  .admin-sidebar {
    position: static;
  }

  .product-grid,
  .collection-grid,
  .clarity-grid,
  .timeline-panel ol,
  .metric-grid,
  .today-strip,
  .payment-ledger,
  .trend-grid,
  .admin-product-grid,
  .shipment-grid,
  .shipment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-table-wrap {
    display: none;
  }

  .admin-order-cards {
    display: grid;
  }

  .modal-grid,
  .detail-columns,
  .detail-columns.tri,
  .order-detail-modal .payment-ledger {
    grid-template-columns: 1fr;
  }

  .drawer-hero {
    display: grid;
  }

  .drawer-actions {
    justify-content: flex-start;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --page: min(100vw - 20px, 1180px);
  }

  .site-header {
    padding: 10px;
  }

  .brand small {
    display: none;
  }

  h1 {
    font-size: 2.35rem;
  }

  h2 {
    font-size: 1.85rem;
  }

  .hero-stage {
    min-height: 360px;
  }

  .hero-card-large {
    left: 0;
    width: 68%;
    height: 74%;
  }

  .hero-card-small {
    width: 44%;
  }

  .hero-card figcaption {
    display: grid;
    inset: auto 8px 8px 8px;
    padding: 8px;
  }

  .clarity-grid,
  .checkout-progress,
  .timeline-panel ol,
  .metric-grid,
  .today-strip,
  .automation-grid,
  .form-grid,
  .product-editor,
  .settings-form,
  .creative-brief,
  .campaign-form,
  .shipment-form,
  .growth-grid,
  .shipment-grid,
  .product-ledger {
    grid-template-columns: 1fr;
  }

  /* Product / shop grids — keep 2 columns on mobile so multiple cards are
     visible per scroll, like Zara / Sephora / ASOS. Tighter gaps + compact
     padding makes the cards feel right at this size. */
  .product-grid,
  .admin-product-grid,
  .trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Collection tiles — three top-level categories stay on one line as a
     scrollable horizontal strip so all three are reachable without losing
     scroll position. */
  .collection-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .collection-tile {
    flex: 0 0 70%;
    scroll-snap-align: start;
    min-height: 180px;
  }

  /* Compact product card — smaller body padding, tighter typography */
  .product-card { border-radius: 6px; }
  .product-body { padding: 9px 10px; gap: 6px; }
  .product-title-row strong { font-size: 0.92rem; line-height: 1.15; }
  .product-card .price { font-size: 0.84rem; }
  .product-payment-chips { grid-template-columns: 1fr 1fr; gap: 4px; }
  .product-payment-chips span { padding: 5px 6px; font-size: 0.7rem; }
  .product-payment-chips small { font-size: 0.55rem; }
  .product-meta.public-listing { grid-template-columns: 1fr; }
  .product-meta span { padding: 5px 6px; font-size: 0.66rem; }
  .product-actions .button { min-height: 36px; padding: 8px 10px; font-size: 0.82rem; }
  .card-secondary-row { gap: 6px; }
  .ask-about-link { padding: 3px 8px; font-size: 0.64rem; }
  .cta-helper { font-size: 0.62rem; }
  .product-brand { font-size: 0.66rem; }
  .product-badges { gap: 4px; inset: 6px 6px auto 6px; }
  .status-pill, .price-chip { padding: 3px 6px; font-size: 0.6rem; }

  .span-2 {
    grid-column: auto;
  }

  .collection-tile {
    min-height: 260px;
  }

  .faq-hero {
    min-height: 220px;
    padding: 38px 0 34px;
  }

  .faq-shell {
    padding: 38px 0 58px;
  }

  .product-meta {
    grid-template-columns: 1fr;
  }

  /* ── Product detail modal — mobile layout fixes ── */
  /* On phones the modal becomes a full-bleed bottom sheet with one column.
     The gallery image gets a max-height so it never eats the entire screen,
     and the CTA sticks to the bottom without overlapping the description. */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .detail-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: 14px 16px 100px;
  }

  .product-detail-modal {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-gallery {
    margin: 0 -16px;
  }

  .gallery-main-wrap {
    border-radius: 0;
    cursor: default;
  }

  .gallery-main-wrap:hover .gallery-main { transform: none; }

  .gallery-main {
    width: 100%;
    aspect-ratio: 1;
    max-height: 56vh;
    object-fit: cover;
  }

  .gallery-strip {
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 16px 0;
    margin: 0;
  }

  .sourced-badge {
    left: 16px;
    bottom: 8px;
    padding: 4px 9px;
    font-size: 0.6rem;
  }

  .product-detail-info {
    padding: 0;
    gap: 8px;
  }

  .product-detail-info h2 {
    font-size: 1.6rem;
    line-height: 1.1;
  }

  .product-price-hero {
    margin: 2px 0 4px;
    gap: 10px;
  }

  .price-large {
    font-size: 1.55rem;
  }

  .price-breakdown summary { padding: 10px 12px; }
  .price-breakdown dl { padding: 4px 12px 10px; }

  .variant-callout {
    margin: 10px 0;
    padding: 12px;
  }

  .variant-input-label input {
    min-height: 46px;
    font-size: 1rem;
  }

  .product-ledger {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Sticky bottom CTA bar with safe-area padding for iPhone home indicators */
  .product-modal-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
    border-top: 1px solid rgba(255, 79, 154, 0.42);
    background: rgba(7, 5, 7, 0.96);
    backdrop-filter: blur(18px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .product-modal-cta .button.wide {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    font-size: 0.94rem;
  }

  .product-modal-cta .button.secondary {
    flex: 0 1 auto;
    padding: 12px 14px;
  }

  /* Close button on the modal repositions to be reachable with the thumb */
  .modal-close {
    position: fixed;
    top: 10px;
    right: 10px;
    margin: 0;
    z-index: 6;
    padding: 8px 14px;
    background: rgba(7, 5, 7, 0.84);
    border: 1px solid rgba(255, 216, 232, 0.34);
  }

  .payment-ledger,
  .verification-grid,
  .detail-list div {
    grid-template-columns: 1fr;
  }

  .order-item-line {
    grid-template-columns: 1fr;
  }

  .creative-job,
  .campaign-row,
  .calendar-row {
    grid-template-columns: 1fr;
  }

  .creative-job img {
    width: 100%;
    max-height: 220px;
  }

  .announce-bar {
    gap: 8px;
  }

  .announce-sep {
    display: none;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .whatsapp-fab {
    display: none;
  }

  body:not([data-page="portal"]) {
    padding-bottom: 0;
    padding-top: 8px;
  }

  /* When any modal/sheet is open, hide fixed-position chrome that would
     otherwise overlap the modal's own sticky CTA bar. */
  body.modal-open .mobile-action-bar,
  body.modal-open .whatsapp-fab,
  body.modal-open .today-ribbon {
    display: none !important;
  }

  /* Mobile action bar — moved to the TOP, sticky under the header so
     navigation is reachable with the thumb at the top of the screen and
     doesn't compete with the safe-area / home-indicator on iPhones. */
  .mobile-action-bar {
    position: sticky;
    top: 56px;
    left: 0;
    right: 0;
    margin: 6px 10px 12px;
    z-index: 31;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 216, 232, 0.22);
    border-radius: var(--radius);
    background: rgba(7, 5, 7, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
  }

.mobile-action-bar a,
.mobile-action-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 42px;
    border: 1px solid rgba(255, 216, 232, 0.16);
    border-radius: calc(var(--radius) - 2px);
    background: rgba(255, 255, 255, 0.045);
    color: var(--cream);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .mobile-action-bar a[data-current] {
    border-color: rgba(255, 79, 154, 0.46);
    background: rgba(255, 79, 154, 0.16);
    color: var(--cream);
  }

  .mobile-action-bar strong {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--pink);
    color: var(--black);
    font-size: 0.68rem;
  }
}

/* ═══════════════════════════════════════ REDUCED MOTION
   Some of our visual effects (marquees, floats, reveal animations) are
   motion-heavy and can trigger vestibular discomfort. We honor
   prefers-reduced-motion: reduce by neutralizing animations and tossing the
   IntersectionObserver-driven reveal into its final state. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .hero-card-large,
  .hero-card-small.top,
  .hero-card-small.bottom {
    animation: none !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hide the WhatsApp FAB on the checkout view so it never overlaps the submit
   button on phones. The view is opted in via [data-page="storefront"]
   #view-checkout.active ~ .whatsapp-fab, but our markup doesn't easily allow a
   sibling selector to the FAB, so we toggle it from JS via a body data
   attribute. */
body[data-active-view="checkout"] .whatsapp-fab {
  display: none;
}

/* ═══════════════════════════════════════ TRUST BAND
   Real customer quotes near the top of the home view. Hard-coded here for the
   static preview; the user can later replace with content pulled from
   marketing_leads or Instagram UGC. */
.trust-band {
  padding: 56px 6vw;
  display: grid;
  gap: 28px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.trust-card {
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 79, 154, 0.06), rgba(17, 13, 16, 0.4));
  display: grid;
  gap: 12px;
}

.trust-quote {
  color: var(--cream);
  font-size: 0.98rem;
  line-height: 1.55;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}

.trust-meta {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trust-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

.trust-stats strong {
  color: var(--pink-2);
  font-size: 1.15rem;
  margin-right: 8px;
}

/* ═══════════════════════════════════════ CHECKOUT: BANK DISCLOSURE
   The bank box is now collapsed inside a <details> by default so customers
   submitting their first approval request don't see payment fields. */
.bank-disclosure {
  margin: 8px 0 4px;
  border: 1px dashed rgba(255, 79, 154, 0.28);
  border-radius: 16px;
  padding: 14px 18px;
  background: rgba(255, 79, 154, 0.03);
}

.bank-disclosure > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.bank-disclosure > summary::-webkit-details-marker {
  display: none;
}

.bank-disclosure > summary::after {
  content: "Show";
  margin-left: auto;
  color: var(--pink-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bank-disclosure[open] > summary::after {
  content: "Hide";
}

.bank-disclosure > summary strong {
  color: var(--cream);
}

.bank-disclosure > summary span {
  color: var(--muted);
  font-size: 0.85rem;
}

.bank-disclosure[open] .bank-box {
  margin-top: 12px;
}

.checkout-reassure {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--pink);
  background: rgba(255, 79, 154, 0.05);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.ack-box {
  display: grid;
  gap: 8px;
}

/* ═══════════════════════════════════════ TRACKING: PROGRESS BAR + FALLBACK */
.track-fallback {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.tracking-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 8px;
  counter-reset: progress;
}

.tracking-progress-step {
  position: relative;
  padding: 12px 8px 14px;
  text-align: center;
  border-top: 3px solid rgba(255, 216, 232, 0.16);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.tracking-progress-step::before {
  counter-increment: progress;
  content: counter(progress);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -22px auto 6px;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid rgba(255, 216, 232, 0.16);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.tracking-progress-step.done {
  border-top-color: var(--pink);
  color: var(--pink-2);
}

.tracking-progress-step.done::before {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.tracking-progress-step.current {
  color: var(--cream);
}

.tracking-progress-step.current::before {
  background: var(--cream);
  border-color: var(--pink);
  color: var(--ink);
}

@media (max-width: 720px) {
  .tracking-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════ CASHFLOW PANEL
   New ops surface. Top strip + money bar + sourcing queue + batch cards +
   worklists + full order ledger. */

.cashflow-heading-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
}

.cashflow-fx-note small {
  color: var(--muted);
  font-size: 0.78rem;
}

.cashflow-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.cashflow-card {
  position: relative;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 79, 154, 0.04), rgba(17, 13, 16, 0.55));
  display: grid;
  gap: 6px;
  overflow: hidden;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.cashflow-card:hover {
  border-color: rgba(255, 216, 232, 0.28);
  background: linear-gradient(180deg, rgba(255, 79, 154, 0.08), rgba(17, 13, 16, 0.65));
}

.cashflow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), transparent);
  opacity: 0.45;
}

.cashflow-card span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cashflow-card strong {
  font-size: 1.35rem;
  color: var(--cream);
  font-weight: 800;
}

.cashflow-card small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.cashflow-tone-positive strong {
  color: #6ee7b7;
}

.cashflow-tone-positive::before {
  background: linear-gradient(90deg, #6ee7b7, transparent);
}

.cashflow-tone-negative strong {
  color: #fb7185;
}

.cashflow-tone-negative::before {
  background: linear-gradient(90deg, #fb7185, transparent);
}

.cashflow-tone-attention strong {
  color: var(--pink-2);
}

.cashflow-money-bar {
  margin-bottom: 22px;
}

.money-bar-track {
  display: flex;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 216, 232, 0.08);
  border: 1px solid var(--line);
}

.money-bar-track-mini {
  height: 10px;
  margin: 8px 0;
}

.money-bar-seg {
  height: 100%;
  transition: width 220ms var(--ease);
}

.money-bar-out {
  background: #fb7185;
}

.money-bar-in {
  background: #6ee7b7;
}

.money-bar-near {
  background: var(--pink);
}

.money-bar-far {
  background: rgba(255, 216, 232, 0.32);
}

.money-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}

.money-bar-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.money-bar-key i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.money-bar-key.money-bar-out i { background: #fb7185; }
.money-bar-key.money-bar-in i { background: #6ee7b7; }
.money-bar-key.money-bar-near i { background: var(--pink); }
.money-bar-key.money-bar-far i { background: rgba(255, 216, 232, 0.32); }

.cashflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

@media (max-width: 1024px) {
  .cashflow-grid {
    grid-template-columns: 1fr;
  }
}

.cashflow-note {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.cashflow-empty {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 10px 0;
}

.sourcing-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(110px, auto) minmax(140px, auto) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.sourcing-row:last-child {
  border-bottom: 0;
}

.sourcing-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sourcing-meta strong {
  color: var(--cream);
  font-size: 0.92rem;
}

.sourcing-meta small {
  color: var(--muted);
  font-size: 0.75rem;
}

.sourcing-row label {
  display: grid;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sourcing-row input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
}

@media (max-width: 720px) {
  .sourcing-row {
    grid-template-columns: 1fr 1fr;
  }
  .sourcing-row .sourcing-meta { grid-column: 1 / -1; }
  .sourcing-row > button { grid-column: 1 / -1; }
}

.cashflow-batch {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  background: rgba(17, 13, 16, 0.45);
}

.cashflow-batch header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.cashflow-batch header strong {
  color: var(--cream);
  font-size: 1rem;
}

.cashflow-batch header small {
  color: var(--muted);
  font-size: 0.78rem;
}

.batch-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 0;
}

.batch-figures div {
  display: grid;
  gap: 2px;
}

.batch-figures dt {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.batch-figures dd {
  margin: 0;
  color: var(--cream);
  font-weight: 700;
  font-size: 0.95rem;
}

.cashflow-worklists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.worklist-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.worklist-row:last-child {
  border-bottom: 0;
}

.worklist-row strong {
  color: var(--cream);
}

.worklist-row small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
}

.ledger-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ledger-filters select,
.ledger-filters input[type="search"] {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  font-size: 0.82rem;
}

.cashflow-ledger small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

/* Ledger row colour-coding by payment status */
.cashflow-ledger tr[data-payment="paid_in_full"] td {
  background: rgba(110, 231, 183, 0.04);
}

.cashflow-ledger tr[data-payment="paid_in_full"] td:first-child {
  border-left: 2px solid #6ee7b7;
}

.cashflow-ledger tr[data-payment="balance_due"] td {
  background: rgba(251, 113, 133, 0.05);
}

.cashflow-ledger tr[data-payment="balance_due"] td:first-child {
  border-left: 2px solid #fb7185;
}

.cashflow-ledger tr[data-payment="awaiting_advance"] td {
  background: rgba(255, 208, 122, 0.04);
}

.cashflow-ledger tr[data-payment="awaiting_advance"] td:first-child {
  border-left: 2px solid var(--amber);
}

.cashflow-ledger tr[data-payment="advance_confirmed"] td {
  background: rgba(255, 79, 154, 0.04);
}

.cashflow-ledger tr[data-payment="advance_confirmed"] td:first-child {
  border-left: 2px solid var(--pink);
}

/* Profit column — positive green, negative red */
.cashflow-ledger .profit-positive {
  color: #6ee7b7;
  font-weight: 700;
}

.cashflow-ledger .profit-negative {
  color: #fb7185;
  font-weight: 700;
}

/* Batch card enhancements */
.cashflow-batch {
  transition: border-color 180ms var(--ease);
}

.cashflow-batch:hover {
  border-color: rgba(255, 216, 232, 0.28);
}

.batch-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.batch-status-chip.collecting {
  background: rgba(255, 208, 122, 0.14);
  color: var(--amber);
  border: 1px solid rgba(255, 208, 122, 0.28);
}

.batch-status-chip.sourcing {
  background: rgba(255, 79, 154, 0.12);
  color: var(--pink-2);
  border: 1px solid rgba(255, 79, 154, 0.28);
}

.batch-status-chip.shipped,
.batch-status-chip.arriving {
  background: rgba(110, 231, 183, 0.1);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.24);
}

.batch-status-chip.arrived {
  background: rgba(110, 231, 183, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.38);
}

/* Worklist row urgent state */
.worklist-row.urgent strong {
  color: #fb7185;
}

.worklist-row.urgent small {
  color: rgba(251, 113, 133, 0.7);
}

.worklist-row.urgent {
  background: linear-gradient(90deg, rgba(251, 113, 133, 0.07), transparent);
  border-left: 2px solid #fb7185;
  padding-left: 8px;
}

/* Ledger totals footer row */
.ledger-totals td {
  background: rgba(255, 79, 154, 0.08) !important;
  border-top: 2px solid var(--pink);
  border-bottom: 0;
  font-size: 0.95rem;
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--cream);
}

.ledger-totals td:first-child {
  border-left: 2px solid var(--pink);
}

/* Inline WhatsApp link inside ledger order cell */
.ledger-wa-link {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.1);
  color: #4ade80;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 160ms var(--ease);
}

.ledger-wa-link:hover {
  background: rgba(37, 211, 102, 0.2);
  color: #86efac;
}

/* PDP variant input — bold, friendly, makes the choice explicit */
.variant-callout {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255, 79, 154, 0.32);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 79, 154, 0.08), rgba(255, 255, 255, 0.02));
}

.variant-callout strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  color: var(--cream);
  text-transform: capitalize;
}

.variant-callout .variant-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.variant-input-label {
  display: grid;
  gap: 6px;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.variant-input-label input {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 156, 199, 0.36);
  background: rgba(7, 5, 7, 0.55);
  color: var(--cream);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.variant-input-label input:focus {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  background: rgba(7, 5, 7, 0.85);
}

/* Cart drawer line — small inline variant edit */
.cart-variant-edit {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.cart-variant-edit span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-variant-edit input {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.04);
}

/* PDP zoom — magnifies the main gallery image under the cursor */
.gallery-main-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
}

.gallery-main-wrap .gallery-main {
  transition: transform 220ms var(--ease);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.gallery-main-wrap:hover .gallery-main {
  transform: scale(1.65);
}

.sourced-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 216, 232, 0.34);
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.78);
  backdrop-filter: blur(8px);
  color: var(--rose);
  font-family: "Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Price breakdown reveal */
.price-breakdown {
  margin: 4px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.price-breakdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  padding: 11px 14px;
  cursor: pointer;
  color: var(--rose);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-breakdown > summary::-webkit-details-marker { display: none; }

.price-breakdown-toggle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 156, 199, 0.32);
  color: var(--pink-2);
  font-size: 0.85rem;
  transition: transform 240ms var(--ease);
}

.price-breakdown[open] .price-breakdown-toggle { transform: rotate(45deg); }

.price-breakdown dl {
  margin: 0;
  padding: 4px 14px 12px;
  display: grid;
  gap: 6px;
}

.price-breakdown dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 216, 232, 0.12);
  font-size: 0.86rem;
}

.price-breakdown dl div:last-child { border-bottom: 0; }

.price-breakdown dl dt {
  color: var(--muted);
}

.price-breakdown dl dd {
  margin: 0;
  color: var(--cream);
  font-weight: 700;
}

.price-breakdown .price-breakdown-total {
  margin-top: 4px;
  padding-top: 10px !important;
  border-bottom: 0 !important;
  border-top: 1px solid rgba(255, 79, 154, 0.36);
}

.price-breakdown .price-breakdown-total dt,
.price-breakdown .price-breakdown-total dd {
  color: var(--rose);
  font-size: 0.95rem;
  font-weight: 800;
}

.price-breakdown-note {
  margin: 0;
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
  font-style: italic;
}

/* Copy chip used on bank details */
.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 156, 199, 0.34);
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.08);
  color: var(--pink-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 160ms var(--ease), color 160ms var(--ease);
  vertical-align: middle;
}

.copy-chip:hover,
.copy-chip:focus-visible {
  background: rgba(255, 79, 154, 0.18);
  color: var(--cream);
  outline: none;
}

.copy-chip.copied {
  background: rgba(152, 240, 195, 0.18);
  border-color: rgba(152, 240, 195, 0.4);
  color: var(--green);
}

/* Ask-about row under product card */
.card-secondary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.ask-about-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(37, 211, 102, 0.36);
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.08);
  color: #4ade80;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background 160ms var(--ease);
}

.ask-about-link:hover,
.ask-about-link:focus-visible {
  background: rgba(37, 211, 102, 0.18);
  color: #86efac;
  outline: none;
}

.ask-about-link svg {
  width: 12px;
  height: 12px;
}

/* FAQ search */
.faq-search-label {
  display: block;
  width: min(560px, 100%);
  margin: 18px auto 0;
}

.faq-search-label input {
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 156, 199, 0.36);
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.62);
  color: var(--cream);
  font-size: 0.92rem;
}

.faq-empty {
  width: min(560px, 100%);
  margin: 16px auto 0;
  padding: 14px 18px;
  border: 1px dashed rgba(255, 156, 199, 0.32);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  font-size: 0.88rem;
}

.faq-empty a {
  color: var(--pink-2);
  font-weight: 800;
  text-decoration: underline;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════ QTY STEPPER (haul flow)
   Once a product is in the cart, the in-card CTA flips from "Add to bag" to
   a − N + stepper so customers can build a multi-item beauty haul without
   leaving the grid. Same component is used on shop cards and featured
   products. */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pink);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 79, 154, 0.08);
}

.qty-step {
  background: transparent;
  color: var(--pink-2);
  border: 0;
  padding: 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.qty-step:hover,
.qty-step:focus-visible {
  background: var(--pink);
  color: #fff;
  outline: none;
}

.qty-value {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  color: var(--cream);
  font-weight: 700;
  font-size: 0.95rem;
  border-left: 1px solid rgba(255, 79, 154, 0.3);
  border-right: 1px solid rgba(255, 79, 154, 0.3);
  padding: 0 6px;
}

/* ═══════════════════════════════════════ DETAIL STICKY MOBILE CTA
   On phones the long product detail modal can scroll past the Add to bag
   button. This bar pins to the bottom of the modal viewport with price and
   a tap target. Hidden on desktop. */
.detail-sticky-cta {
  display: none;
}

@media (max-width: 760px) {
  .detail-sticky-cta {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    margin: 16px -16px -16px;
    background: rgba(7, 5, 7, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    z-index: 5;
  }

  .detail-sticky-cta strong {
    display: block;
    color: var(--cream);
    font-size: 1.05rem;
  }

  .detail-sticky-cta small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
  }

  .detail-sticky-cta .button {
    flex-shrink: 0;
    padding: 12px 18px;
  }
}

/* ═══════════════════════════════════════ BANK BOX (primary on checkout)
   IMPORTANT: dt/dd/code colors are explicitly --ink (dark) here — the
   light cream theme means using --cream would render the values
   invisible against the off-white page background. */
.bank-box-primary {
  background: linear-gradient(180deg, rgba(232, 166, 176, 0.16), rgba(255, 255, 255, 0.96));
  border: 1px solid var(--pink);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.bank-box-primary legend {
  color: var(--pink-3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.bank-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
  margin: 10px 0;
}

.bank-details-grid div {
  display: grid;
  gap: 2px;
}

.bank-details-grid dt {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bank-details-grid dd {
  color: var(--ink);
  font-weight: 700;
  margin: 0;
}

.bank-details-grid code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(232, 166, 176, 0.18);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════ PRODUCT CARD UPGRADES
   Brand label, variant chip, marketing badge, advance-line, CTA helper. */

.product-brand {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

.marketing-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--pink);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-advance-line {
  margin: 6px 0 4px;
  color: var(--pink-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.product-description-line {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 5px 12px;
  border: 1px solid var(--pink);
  border-radius: 999px;
  color: var(--pink-2);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.variant-chip:hover,
.variant-chip:focus-visible {
  background: var(--pink);
  color: #fff;
}

.cta-helper {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ═══════════════════════════════════════ VARIANT CALLOUT (detail modal) */
.variant-callout {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--pink);
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.1), rgba(17, 13, 16, 0.45));
}

.variant-callout strong {
  display: block;
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.variant-callout p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.button.small {
  padding: 7px 12px;
  font-size: 0.78rem;
}

/* ═══════════════════════════════════════ PRODUCT EDITOR — URL IMPORT */
.url-import {
  padding: 14px 16px;
  border: 1px dashed rgba(255, 79, 154, 0.32);
  border-radius: 14px;
  background: rgba(255, 79, 154, 0.04);
  margin-bottom: 12px;
}

.url-import-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.url-import-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
}

.url-import small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.autofill-health,
.bulk-run-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.autofill-health:empty,
.bulk-run-status:empty {
  display: none;
}

.autofill-health span {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 154, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.autofill-health span.ok {
  border-color: rgba(84, 207, 152, 0.34);
  background: rgba(84, 207, 152, 0.1);
  color: #9ff0c7;
}

.autofill-health span.missing {
  border-color: rgba(255, 190, 92, 0.34);
  background: rgba(255, 190, 92, 0.1);
  color: #ffd99b;
}

.bulk-run-status {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 79, 154, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.bulk-run-status.is-loading {
  color: #ffdbe8;
}

.bulk-run-status.is-ready {
  border-color: rgba(84, 207, 152, 0.28);
  background: rgba(84, 207, 152, 0.08);
  color: #b9f5d6;
}

/* ═══════════════════════════════════════ TREND APPROVAL MODAL */
.trend-approve-modal {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 24px;
  max-height: 80vh;
  overflow: hidden;
}

@media (max-width: 900px) {
  .trend-approve-modal {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

.trend-approve-media {
  position: sticky;
  top: 0;
  align-self: start;
}

.trend-approve-media img {
  width: 100%;
  border-radius: 14px;
  background: rgba(255, 216, 232, 0.08);
}

.approve-gallery-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.approve-gallery-thumb {
  border: 1px solid var(--line);
  background: transparent;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}

.approve-gallery-thumb.active {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(255, 79, 154, 0.35);
}

.approve-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trend-approve-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  overflow-y: auto;
  padding-right: 6px;
}

.trend-approve-form .span-2 { grid-column: span 2; }

.trend-approve-form .approve-helper {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 6px;
}

.trend-approve-form label {
  display: grid;
  gap: 4px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.trend-approve-form input,
.trend-approve-form select,
.trend-approve-form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
}

.approve-validation {
  grid-column: 1 / -1;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}

.approve-validation.is-incomplete {
  background: rgba(180, 83, 9, 0.18);
  color: #fbbf24;
}

.approve-validation.is-ready {
  background: rgba(110, 231, 183, 0.12);
  color: #6ee7b7;
}

.approve-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

button[data-approve-submit]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════ PHOTO NUDGE */
.photo-nudge {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 79, 154, 0.04);
}

.photo-nudge summary {
  cursor: pointer;
  color: var(--cream);
  font-weight: 700;
  font-size: 0.9rem;
  list-style: none;
}

.photo-nudge summary::-webkit-details-marker { display: none; }

.photo-nudge-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 8px;
}

.photo-nudge-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.photo-nudge-list span {
  color: var(--cream);
  font-size: 0.85rem;
}

.photo-nudge-list small {
  color: var(--muted);
  font-size: 0.75rem;
}

.photo-upload-trigger {
  cursor: pointer;
}

.photo-upload-trigger .button {
  pointer-events: none;
}

/* ═══════════════════════════════════════ ADMIN DEMO BANNER */
.demo-data-banner {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid #b45309;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.18), rgba(180, 83, 9, 0.04));
  color: #fde68a;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}

.demo-data-banner strong {
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.demo-data-banner a {
  color: inherit;
  text-decoration: underline;
}

.fx-stale-banner {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid rgba(251, 113, 133, 0.5);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(251, 113, 133, 0.18), rgba(251, 113, 133, 0.04));
  color: #fecaca;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}

.fx-stale-banner strong {
  color: #fb7185;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.fx-stale-banner code {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font-weight: 800;
}

.fx-stale-banner a {
  color: inherit;
  text-decoration: underline;
}

/* Portal cmd-K trigger in sidebar */
.cmd-k-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}

.cmd-k-trigger:hover,
.cmd-k-trigger:focus-visible {
  border-color: rgba(255, 79, 154, 0.38);
  background: rgba(255, 79, 154, 0.08);
  color: var(--cream);
  outline: none;
}

.cmd-k-trigger kbd {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rose);
  font-family: "Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Command palette modal */
.cmd-palette-backdrop {
  align-items: flex-start;
  padding-top: 14vh;
}

.cmd-palette {
  width: min(640px, 92vw);
  display: grid;
  gap: 0;
  border: 1px solid rgba(255, 156, 199, 0.32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 79, 154, 0.12), transparent 22rem),
    #0b070a;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cmd-palette-input {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 22px;
  font-size: 1.02rem;
  background: transparent;
  color: var(--cream);
}

.cmd-palette-input:focus {
  outline: none;
}

.cmd-palette-results {
  max-height: 56vh;
  overflow-y: auto;
  display: grid;
}

.cmd-palette-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 12px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255, 216, 232, 0.08);
  background: transparent;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease);
}

.cmd-palette-row:hover,
.cmd-palette-row.active {
  background: rgba(255, 79, 154, 0.12);
}

.cmd-palette-type {
  color: var(--pink-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-palette-label {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-palette-sub {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.cmd-palette-empty {
  padding: 28px 22px;
  color: var(--muted);
  text-align: center;
  font-size: 0.88rem;
}

.cmd-palette-hint {
  padding: 10px 22px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

/* ═══════════════════════════════════════ IMPLEMENTED REVIEW POLISH */
body[data-page="portal"] .admin-content h1,
body[data-page="portal"] .admin-content h2,
body[data-page="portal"] .admin-content .ops-panel h2,
body[data-page="portal"] .admin-content .drawer-header h2 {
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}

body[data-page="portal"] .admin-heading h1 {
  max-width: 780px;
  font-size: 2rem;
}

body[data-page="portal"] .admin-content h2,
body[data-page="portal"] .admin-content .ops-panel h2 {
  font-size: 1.25rem;
}

body[data-page="portal"] .admin-panel {
  padding: 14px;
}

body[data-page="portal"] .admin-heading {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

body[data-page="portal"] .ops-panel,
body[data-page="portal"] .metric-card,
body[data-page="portal"] .today-card {
  background: rgba(255, 255, 255, 0.032);
}

body[data-page="portal"] .admin-table {
  font-size: 0.86rem;
}

body[data-page="portal"] .admin-table th,
body[data-page="portal"] .admin-table td {
  padding: 8px;
}

body[data-page="portal"] .admin-table select,
body[data-page="portal"] .admin-table input,
body[data-page="portal"] .admin-table textarea {
  min-height: 38px;
}

body[data-page="portal"] .button {
  min-height: 38px;
  padding: 9px 13px;
}

@media (max-width: 640px) {
  .announce-bar {
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 10px;
    font-size: 0.68rem;
    line-height: 1.08;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .site-header .main-nav {
    display: none;
  }

  body:not([data-page="portal"]) .hero-shell {
    gap: 18px;
    padding: 28px 0 32px;
  }

  body:not([data-page="portal"]) .hero-copy h1 {
    max-width: 100%;
    font-size: 2.25rem;
    line-height: 1.03;
  }

  body:not([data-page="portal"]) .hero-word,
  body:not([data-page="portal"]) .hero-word-mask {
    display: inline;
    overflow: visible;
    transform: none;
    animation: none;
    opacity: 1;
    filter: none;
    padding-bottom: 0;
  }

  body:not([data-page="portal"]) .hero-actions {
    display: none;
  }

  body:not([data-page="portal"]) .hero-stage {
    min-height: 310px;
    margin-bottom: 12px;
  }

  body:not([data-page="portal"]) .hero-card-large {
    left: 0;
    top: 4%;
    width: 78%;
    height: 82%;
  }

  body:not([data-page="portal"]) .hero-card-small.top {
    display: none;
  }

  body:not([data-page="portal"]) .hero-card-small.bottom {
    right: 0;
    bottom: 0;
    width: 46%;
    height: 42%;
  }

  .shop-layout {
    gap: 14px;
  }

  .filter-panel {
    padding: 14px;
  }

  .product-payment-chips {
    grid-template-columns: 1fr;
  }

  .product-actions .button {
    min-width: 0;
    padding-inline: 10px;
  }

  .toast-region {
    right: 10px;
    bottom: 86px;
    width: calc(100vw - 20px);
  }

  body[data-page="portal"] .admin-shell {
    gap: 14px;
    padding-top: 10px;
  }

  body[data-page="portal"] .admin-heading h1 {
    font-size: 1.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT-THEME HARMONIZATION
   Final cascade pass. The base stylesheet was authored against a dark
   palette, with many translucent-white panels and pink-on-black accents.
   This block re-skins those surfaces so they read correctly on the new
   white-dominant palette without rewriting every original rule.
   ═══════════════════════════════════════════════════════════════════════ */

/* Generic surface panels that used "white on dark" translucency now use
   warm-tinted near-white on pure white. */
.product-card,
.bulk-bar,
.import-bar,
.url-import,
.editorial-band > div:first-child,
.faq-item,
.policy-list li,
.ops-panel,
.shop-layout aside,
.checkout-layout aside,
.track-shell {
  background: var(--surface);
}

.product-card {
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Product imagery sits on a soft pink wash instead of charcoal so missing
   images blend with the page tone. */
.product-media {
  background: var(--surface-2);
}

.product-media.media-missing,
.media-placeholder,
.trend-image-placeholder {
  border-color: var(--line);
  background:
    repeating-linear-gradient(45deg, var(--rose) 0 10px, var(--surface-2) 10px 20px);
  color: var(--pink-3);
}

/* Bag / cart drawer + modals were translucent black; flip to translucent
   white with the soft shadow vocabulary. */
.cart-drawer,
.modal-shell,
.drawer-shell,
.drop-card,
.tracking-result,
.faq-answer {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

/* Inputs need a visible border on white. */
input,
select,
textarea {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}

input::placeholder,
textarea::placeholder {
  color: rgba(122, 90, 100, 0.6);
}

/* The mobile action bar was dark-glass at the bottom of the viewport. */
.mobile-action-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.mobile-action-bar a,
.mobile-action-bar button {
  color: var(--ink);
}

.mobile-action-bar a[data-current] {
  color: var(--pink-3);
}

/* Editorial bands lift gently off the page. */
.editorial-band,
.collection-strip,
.order-clarity-band {
  position: relative;
}

.order-clarity-band {
  padding: 48px 32px;
  margin: 18px auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 60%);
  box-shadow: var(--shadow-soft);
}

.clarity-grid article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-soft);
}

.clarity-grid article strong {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
}

.clarity-grid article span {
  display: block;
  margin-top: 12px;
  font-family: "Playfair Display", serif;
  font-size: 1.08rem;
  color: var(--ink);
}

/* Process rail border colour visibility. */
.process-rail {
  border-color: var(--line);
  background: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Footer chips */
.footer-trust-chips span {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CINEMATIC LANDING MOTION
   The hero composition opens with a film-camera feel — large card slides
   first, smaller cards stagger in, then the marquee starts. A pointer-
   reactive spotlight (controlled by --mx/--my on .hero-stage) follows
   the cursor and an idle "breath" keeps the whole composition alive.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-shell {
  position: relative;
}

/* Soft pink halo that follows the cursor inside the hero stage only.
   Contained via inset:0 + isolation on the stage so it can never bleed
   over the headline / kicker / CTAs in the left column. */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 40%),
    rgba(232, 166, 176, 0.28) 0%,
    rgba(232, 166, 176, 0) 42%
  );
  pointer-events: none;
  z-index: 0;
  transition: background 200ms linear;
  border-radius: var(--radius-lg);
}

.hero-stage > * {
  position: absolute;
  z-index: 1;
}

/* Parallax — JS writes --parallax on .hero-shell (0..1 as scroll progresses
   past the hero). Each card consumes it through --par-y at its own rate,
   composed into the same transform as the entrance, so they never fight. */
.hero-card-large       { --par-y: calc(var(--parallax, 0) * -28px); }
.hero-card-small.top   { --par-y: calc(var(--parallax, 0) * -56px); }
.hero-card-small.bottom { --par-y: calc(var(--parallax, 0) * -14px); }

/* Once visible, transform keeps its eased transition so the parallax
   updates "chase" the scroll position with a soft inertial lag — feels
   more cinematic than frame-perfect tracking. */

/* Reveal sections — fade + rise as they enter the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 900ms var(--ease-cinema),
    transform 900ms var(--ease-cinema);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children inside revealed sections. */
.stagger-child {
  animation: stagger-rise 720ms var(--ease-cinema) both;
}

@keyframes stagger-rise {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Heading — Playfair Display italic moments for editorial bite. */
.hero-copy h1 em,
.section-heading h2 em,
.editorial-band h2 em {
  font-style: italic;
  color: var(--pink-3);
  font-weight: 500;
}

/* Subtle film-grain refresh on hero-copy and section headings — adds
   warmth to large type. */
.hero-copy h1 {
  color: var(--ink);
}

.hero-copy h1::selection,
.hero-copy p::selection,
h2::selection,
p::selection {
  background: var(--pink);
  color: var(--surface);
}

/* Brand text in header */
.brand strong { color: var(--ink); }
.brand small  { color: var(--muted); letter-spacing: 0.06em; }

/* Marquee text colour and dot brightness */
.marquee-track { color: var(--ink-soft); }
.marquee-dot   { color: var(--pink-2); }

/* Honour user preference. Cuts ambient motion to a still scene. */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .hero-card,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-card-large,
  .hero-card-small.top,
  .hero-card-small.bottom {
    animation: none !important;
  }
  .hero-word::before {
    animation: none !important;
    transform: none !important;
  }
  .marquee-track { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGO ENHANCEMENT
   The mark is the brand. Treat it like a watch dial: round, generously
   spaced, soft pink halo on hover, settled into a hairline pink ring.
   ═══════════════════════════════════════════════════════════════════════ */

.brand {
  gap: 14px;
}

.brand-mark {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 2px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.8),
    0 10px 28px rgba(216, 142, 155, 0.22);
}

/* Soft pink halo ring that pulses gently — like a watch sapphire glint.
   Sits behind the logo. */
.brand-mark::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pink-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 360ms var(--ease-cinema);
  z-index: -1;
}

.brand:hover .brand-mark::before {
  opacity: 1;
}

.brand-mark img {
  border-radius: 50%;
}

/* Lockup typography — brand name in Playfair, tagline in tracked-out
   small caps so the two read as a proper editorial masthead. */
.brand strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.05;
}

.brand small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink-3);
  margin-top: 4px;
}

/* Footer brand gets a larger, centered treatment — proper sign-off. */
.footer-brand-col .brand {
  align-items: flex-start;
}

.footer-brand-col .brand-mark {
  width: 64px;
  height: 64px;
}

.footer-brand-col .brand strong {
  font-size: 1.32rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY ENHANCEMENT
   Editorial scale + italic Playfair pulls for serif "moments". Refined
   tracking, balance, and rhythm for the storefront only — portal is
   utility and stays compact.
   ═══════════════════════════════════════════════════════════════════════ */

body:not([data-page="portal"]) h1,
body:not([data-page="portal"]) h2 {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--ink);
}

body:not([data-page="portal"]) .hero-copy h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  max-width: 14ch;
  margin: 0 0 16px;
}

body:not([data-page="portal"]) h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0 0 14px;
}

body:not([data-page="portal"]) .faq-hero h1,
body:not([data-page="portal"]) .faq-hero h2 {
  color: #fff7f9;
}

body:not([data-page="portal"]) h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Editorial body copy — slightly larger, more leading, warmer tone. */
body:not([data-page="portal"]) .hero-copy p:not(.kicker),
body:not([data-page="portal"]) .page-intro p,
body:not([data-page="portal"]) .section-heading p:not(.kicker) {
  font-size: 1.02rem;
  line-height: 1.72;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 56ch;
}

/* Process rail copy + clarity grid copy */
body:not([data-page="portal"]) .process-rail p,
body:not([data-page="portal"]) .clarity-grid article p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--muted);
}

/* Buttons — slightly larger, refined letter spacing for editorial weight */
body:not([data-page="portal"]) .button {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 14px 22px;
  border-radius: 999px;
  min-height: 48px;
}

/* ═══════════════════════════════════════ HOMEPAGE COMMENT FIXES
   Final storefront pass for the review notes: warmer contrast, calmer hero
   type, no public approval block, and process cards that do not overflow. */
body:not([data-page="portal"]) {
  --bg: #fbf6f7;
  --surface: #fffefe;
  --surface-2: #f8eef1;
  --ink: #201018;
  --ink-soft: #50323d;
  --muted: #684a56;
  --line: rgba(139, 76, 95, 0.2);
  --line-strong: rgba(139, 76, 95, 0.36);
  --pink: #d98b9a;
  --pink-2: #bd6678;
  --pink-3: #9d4559;
  background:
    radial-gradient(ellipse 760px 520px at 92% 8%, rgba(217, 139, 154, 0.16), transparent 62%),
    linear-gradient(180deg, #fbf6f7 0%, #fffefe 44%, #fbf6f7 100%);
}

body:not([data-page="portal"]) .announce-bar {
  background: #f6e4e8;
  border-bottom-color: rgba(157, 69, 89, 0.22);
  color: #5b3f4a;
}

body:not([data-page="portal"]) .announce-bar strong {
  color: #8e374c;
}

body:not([data-page="portal"]) .site-header {
  background: rgba(255, 252, 253, 0.94);
  border-bottom-color: rgba(139, 76, 95, 0.16);
}

body:not([data-page="portal"]) .brand small {
  color: #a5485c;
}

body:not([data-page="portal"]) .hero-shell {
  grid-template-columns: minmax(0, 0.78fr) minmax(430px, 1fr);
  gap: clamp(34px, 5vw, 68px);
  min-height: clamp(560px, calc(100vh - 90px), 700px);
  padding: 42px 0 62px;
}

body:not([data-page="portal"]) .hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.45rem, 5.1vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.014em;
}

body:not([data-page="portal"]) .hero-copy p:not(.kicker) {
  max-width: 48ch;
  color: #624753;
}

body:not([data-page="portal"]) .editorial-band {
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  padding: 48px 0 42px;
}

body:not([data-page="portal"]) .editorial-band > div:first-child {
  background: transparent;
}

body:not([data-page="portal"]) .process-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  background: var(--surface);
}

body:not([data-page="portal"]) .process-rail article {
  min-width: 0;
  padding: 22px 20px;
}

body:not([data-page="portal"]) .process-rail h3 {
  font-size: clamp(0.96rem, 1.35vw, 1.08rem);
}

body:not([data-page="portal"]) .process-rail p {
  color: #684a56;
  overflow-wrap: normal;
}

body:not([data-page="portal"]) .order-clarity-band {
  display: none;
}

body:not([data-page="portal"]) .trust-band {
  width: var(--page);
  margin: 0 auto;
  padding: 52px 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fbf2f4 0%, #fffefe 58%, #f6e6ea 100%);
  box-shadow: var(--shadow-soft);
}

body:not([data-page="portal"]) .trust-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(139, 76, 95, 0.18);
  box-shadow: 0 14px 34px rgba(139, 76, 95, 0.1);
}

body:not([data-page="portal"]) .trust-quote {
  color: #2a141d;
}

body:not([data-page="portal"]) .trust-meta,
body:not([data-page="portal"]) .trust-stats span {
  color: #684a56;
}

body:not([data-page="portal"]) .trust-stats strong {
  color: #a5485c;
}

body:not([data-page="portal"]) .product-showcase .section-heading {
  align-items: center;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

body:not([data-page="portal"]) .product-showcase .section-heading h2 {
  color: var(--ink);
  margin-bottom: 0;
}

body:not([data-page="portal"]) .product-showcase .section-heading .kicker {
  margin-bottom: 0;
}

/* Storefront product cards + product popup
   Keep product browsing dense enough to scan, and keep PDP surfaces in the
   same light luxury palette as the rest of the public site. */
body:not([data-page="portal"]) .product-grid {
  gap: 16px;
}

body:not([data-page="portal"]) .product-card {
  min-height: 0;
  border-color: rgba(139, 76, 95, 0.18);
  background: rgba(255, 254, 254, 0.92);
  box-shadow: 0 14px 30px rgba(139, 76, 95, 0.08);
}

body:not([data-page="portal"]) .product-card:hover,
body:not([data-page="portal"]) .product-card:focus-within {
  border-color: rgba(157, 69, 89, 0.32);
  background: #fff;
  box-shadow: 0 20px 42px rgba(139, 76, 95, 0.12);
}

body:not([data-page="portal"]) .product-empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 12px;
  min-height: 280px;
  padding: 36px;
  border: 1px solid rgba(139, 76, 95, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 245, 248, 0.86)),
    radial-gradient(circle at 92% 18%, rgba(189, 102, 120, 0.14), transparent 36%);
  box-shadow: 0 18px 44px rgba(139, 76, 95, 0.08);
}

body:not([data-page="portal"]) .product-empty-state h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 0.98;
}

body:not([data-page="portal"]) .product-empty-state p:not(.kicker) {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body:not([data-page="portal"]) .product-card .product-media {
  height: clamp(220px, 27vw, 292px);
  aspect-ratio: auto;
  background: #f3e9ed;
}

body:not([data-page="portal"]) .shop-grid .product-media {
  height: clamp(210px, 24vw, 270px);
}

body:not([data-page="portal"]) .product-card .product-media img {
  object-position: center 58%;
}

body:not([data-page="portal"]) .product-body {
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px 14px 14px;
}

body:not([data-page="portal"]) .product-title-row strong {
  font-size: 1rem;
  line-height: 1.16;
}

body:not([data-page="portal"]) .price {
  color: var(--pink-3);
}

body:not([data-page="portal"]) .product-description-line {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body:not([data-page="portal"]) .product-payment-chips span,
body:not([data-page="portal"]) .product-meta span {
  border-color: rgba(139, 76, 95, 0.16);
  background: #fbf4f6;
  color: var(--ink-soft);
}

body:not([data-page="portal"]) .product-payment-chips small {
  color: var(--pink-3);
}

body:not([data-page="portal"]) .status-pill,
body:not([data-page="portal"]) .price-chip {
  border-color: rgba(139, 76, 95, 0.18);
  background: rgba(32, 16, 24, 0.82);
}

body:not([data-page="portal"]) .quick-add-btn,
body:not([data-page="portal"]) .wishlist-heart {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(32, 16, 24, 0.72);
  color: #fff;
}

body:not([data-page="portal"]) .modal-backdrop {
  padding: 26px;
  background: rgba(40, 23, 31, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body:not([data-page="portal"]) .detail-modal {
  width: min(980px, calc(100vw - 44px));
  max-height: min(88vh, 780px);
  padding: 18px;
  overflow: auto;
  outline: none;
  border-color: rgba(139, 76, 95, 0.2);
  border-radius: 18px;
  background: #fffdfd;
  color: var(--ink);
  box-shadow: 0 34px 90px rgba(40, 23, 31, 0.22);
}

body:not([data-page="portal"]) .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  float: none;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 76, 95, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(139, 76, 95, 0.12);
}

body:not([data-page="portal"]) .modal-close span {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
  transform: translateY(-1px);
}

body:not([data-page="portal"]) .product-detail-modal {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
  gap: 22px;
}

body:not([data-page="portal"]) .product-gallery {
  position: sticky;
  top: 0;
}

body:not([data-page="portal"]) .gallery-main-wrap {
  border: 1px solid rgba(139, 76, 95, 0.16);
  border-radius: 14px;
  background: #f7eef1;
}

body:not([data-page="portal"]) .gallery-main {
  aspect-ratio: 0.92;
  max-height: 520px;
  object-position: center 58%;
  border: 0;
  border-radius: 14px;
}

body:not([data-page="portal"]) .gallery-thumb {
  border-color: rgba(139, 76, 95, 0.12);
  background: #fbf4f6;
}

body:not([data-page="portal"]) .product-detail-info {
  gap: 12px;
  max-height: none;
  overflow: visible;
  padding: 4px 48px 0 0;
}

body:not([data-page="portal"]) .product-detail-info .kicker {
  margin-bottom: 0;
}

body:not([data-page="portal"]) .product-detail-info h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 0.98;
}

body:not([data-page="portal"]) .price-large,
body:not([data-page="portal"]) .payment-ledger strong,
body:not([data-page="portal"]) .detail-list dd,
body:not([data-page="portal"]) .variant-callout strong,
body:not([data-page="portal"]) .recently-viewed-strip h3 {
  color: var(--ink);
}

body:not([data-page="portal"]) .trust-strip span,
body:not([data-page="portal"]) .payment-ledger article,
body:not([data-page="portal"]) .detail-list div,
body:not([data-page="portal"]) .variant-callout,
body:not([data-page="portal"]) .recently-viewed-tile {
  border-color: rgba(139, 76, 95, 0.16);
  background: #fbf4f6;
  color: var(--ink-soft);
}

body:not([data-page="portal"]) .trust-strip span {
  padding: 9px 11px;
}

body:not([data-page="portal"]) .product-ledger {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body:not([data-page="portal"]) .payment-ledger article {
  padding: 10px;
  border-radius: 8px;
}

body:not([data-page="portal"]) .payment-ledger span,
body:not([data-page="portal"]) .detail-list dt {
  color: var(--pink-3);
}

body:not([data-page="portal"]) .detail-list {
  gap: 8px;
  margin: 4px 0;
}

body:not([data-page="portal"]) .detail-list div {
  grid-template-columns: 116px minmax(0, 1fr);
  padding: 9px 10px;
  border-radius: 8px;
}

body:not([data-page="portal"]) .variant-callout {
  margin: 6px 0;
  padding: 12px;
  border-radius: 10px;
}

body:not([data-page="portal"]) .variant-input-label input {
  background: #fff;
  color: var(--ink);
  border-color: rgba(139, 76, 95, 0.22);
}

body:not([data-page="portal"]) .quote-estimator-shell {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(34px, 6vw, 72px) 0 clamp(58px, 7vw, 86px);
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1fr);
  gap: clamp(24px, 5vw, 68px);
  align-items: start;
}

body:not([data-page="portal"]) .quote-estimator-hero {
  position: sticky;
  top: 98px;
  min-height: 420px;
  display: grid;
  align-content: center;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(139, 76, 95, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.86), rgba(252, 240, 244, 0.82)),
    url("https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=1100&q=82") center / cover;
  background-blend-mode: screen;
  box-shadow: 0 24px 70px rgba(139, 76, 95, 0.14);
  overflow: hidden;
}

body:not([data-page="portal"]) .quote-estimator-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(255, 253, 253, 0.96), transparent);
  pointer-events: none;
}

body:not([data-page="portal"]) .quote-estimator-hero > * {
  position: relative;
  z-index: 1;
}

body:not([data-page="portal"]) .quote-estimator-hero h1 {
  max-width: 11ch;
  font-size: clamp(2.45rem, 5.8vw, 4.8rem);
}

body:not([data-page="portal"]) .quote-estimator-hero p:not(.kicker) {
  max-width: 40ch;
}

.quote-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.quote-proof-strip span {
  padding: 8px 10px;
  border: 1px solid rgba(139, 76, 95, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
}

.quote-estimator-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(139, 76, 95, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 0%, rgba(217, 139, 154, 0.2), transparent 24rem),
    rgba(255, 254, 254, 0.96);
  box-shadow: 0 22px 58px rgba(139, 76, 95, 0.12);
}

.quote-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-estimator-card label {
  position: relative;
}

.quote-estimator-card .input-prefix {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  color: var(--pink-3);
  font-size: 0.78rem;
  font-weight: 900;
}

.quote-estimator-card .input-prefix + input {
  padding-left: 42px;
}

.quote-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(139, 76, 95, 0.16);
  border-radius: 8px;
  background: #fbf4f6;
  color: var(--ink-soft);
}

.quote-check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink-3);
}

.quote-result {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 8px;
  background: #201018;
  color: #fff7f9;
}

.quote-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.quote-total span {
  color: rgba(255, 247, 249, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-total strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
}

.quote-breakdown {
  display: grid;
  gap: 8px;
  margin: 0;
}

.quote-breakdown div {
  padding: 9px 0;
  border-top: 1px solid rgba(255, 247, 249, 0.12);
}

.quote-breakdown dt {
  color: rgba(255, 247, 249, 0.6);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-breakdown dd {
  margin: 0;
  color: #fff7f9;
  font-weight: 800;
}

.quote-note {
  margin: 0;
  color: rgba(255, 247, 249, 0.72);
  line-height: 1.55;
}

.quote-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 840px) {
  body:not([data-page="portal"]) .quote-estimator-shell {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .quote-estimator-hero {
    position: relative;
    top: auto;
    min-height: 330px;
  }

  .quote-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTAL DARK CONTROL ROOM
   The public storefront is intentionally blush-light, but the internal portal
   needs dense, high-contrast operations surfaces. This final portal-only pass
   prevents light-theme storefront overrides from leaking into admin tables,
   banners, forms, cards, and popups.
   ═══════════════════════════════════════════════════════════════════════ */
body[data-page="portal"] {
  --bg: #100b10;
  --surface: #181218;
  --surface-2: #211722;
  --ink: #fff7fa;
  --ink-soft: #ead8df;
  --muted: #bfa8b2;
  --line: rgba(245, 181, 197, 0.22);
  --line-strong: rgba(245, 181, 197, 0.42);
  --cream: #fff7fa;
  --rose: #f6c8d2;
  --pink: #f0a5b4;
  --pink-2: #e28fa1;
  --pink-3: #ffbcc9;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.26);
  background:
    radial-gradient(circle at 8% -8%, rgba(240, 165, 180, 0.18), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(111, 62, 91, 0.28), transparent 32rem),
    linear-gradient(180deg, #100b10 0%, #151016 48%, #0d090d 100%);
  color: var(--ink);
}

body[data-page="portal"]::before {
  opacity: 0.24;
}

body[data-page="portal"] .admin-shell {
  width: min(1440px, calc(100vw - 40px));
}

body[data-page="portal"] .admin-sidebar,
body[data-page="portal"] .admin-login,
body[data-page="portal"] .admin-panel,
body[data-page="portal"] .ops-panel,
body[data-page="portal"] .metric-card,
body[data-page="portal"] .today-card,
body[data-page="portal"] .growth-hero-panel,
body[data-page="portal"] .growth-side,
body[data-page="portal"] .lead-card,
body[data-page="portal"] .creative-job,
body[data-page="portal"] .campaign-row,
body[data-page="portal"] .calendar-row,
body[data-page="portal"] .shipment-card,
body[data-page="portal"] .admin-order-card,
body[data-page="portal"] .trend-card,
body[data-page="portal"] .checklist-row,
body[data-page="portal"] .automation-grid article,
body[data-page="portal"] .automation-flow article,
body[data-page="portal"] .detail-panel,
body[data-page="portal"] .verification-grid div,
body[data-page="portal"] .detail-list div,
body[data-page="portal"] .trust-strip span,
body[data-page="portal"] .order-card-grid span,
body[data-page="portal"] .message-thread article,
body[data-page="portal"] .order-item-line,
body[data-page="portal"] .payment-ledger article,
body[data-page="portal"] .product-card,
body[data-page="portal"] .admin-table-wrap,
body[data-page="portal"] .bulk-bar,
body[data-page="portal"] .import-bar,
body[data-page="portal"] .url-import {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(33, 23, 34, 0.96), rgba(20, 14, 20, 0.96));
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

body[data-page="portal"] .admin-sidebar {
  top: 20px;
}

body[data-page="portal"] .admin-brand .brand-mark {
  background: #fff;
}

body[data-page="portal"] .brand strong,
body[data-page="portal"] .admin-content h1,
body[data-page="portal"] .admin-content h2,
body[data-page="portal"] .admin-content h3,
body[data-page="portal"] .drawer-header h2,
body[data-page="portal"] .detail-modal h2,
body[data-page="portal"] .price-large,
body[data-page="portal"] .metric-card strong,
body[data-page="portal"] .today-card strong,
body[data-page="portal"] .today-card span,
body[data-page="portal"] .campaign-row strong,
body[data-page="portal"] .calendar-row strong,
body[data-page="portal"] .lead-card strong,
body[data-page="portal"] .verification-grid strong,
body[data-page="portal"] .message-thread p,
body[data-page="portal"] .order-mini,
body[data-page="portal"] .detail-list dd {
  color: var(--ink);
}

body[data-page="portal"] p,
body[data-page="portal"] small,
body[data-page="portal"] td,
body[data-page="portal"] .portal-login-note,
body[data-page="portal"] .metric-card em,
body[data-page="portal"] .today-card small,
body[data-page="portal"] .drawer-hero p:not(.kicker),
body[data-page="portal"] .lead-card p,
body[data-page="portal"] .lead-card span,
body[data-page="portal"] .campaign-row small,
body[data-page="portal"] .calendar-row small,
body[data-page="portal"] .growth-side span,
body[data-page="portal"] .creative-job small,
body[data-page="portal"] .integration-list span,
body[data-page="portal"] .trend-card small,
body[data-page="portal"] .shipment-card p,
body[data-page="portal"] .admin-order-card p,
body[data-page="portal"] .order-mini span,
body[data-page="portal"] .order-card-grid small,
body[data-page="portal"] .automation-grid span,
body[data-page="portal"] .automation-flow span,
body[data-page="portal"] .handoff-note,
body[data-page="portal"] .checklist-row small,
body[data-page="portal"] .detail-list dt,
body[data-page="portal"] .order-item-line small,
body[data-page="portal"] .cmd-palette-sub,
body[data-page="portal"] .cmd-palette-empty,
body[data-page="portal"] .cmd-palette-hint {
  color: var(--muted);
}

body[data-page="portal"] .kicker,
body[data-page="portal"] label,
body[data-page="portal"] .form-section-title,
body[data-page="portal"] .admin-table th,
body[data-page="portal"] .ops-panel .panel-title-row h2,
body[data-page="portal"] .ops-panel > h2,
body[data-page="portal"] .cmd-palette-type {
  color: var(--pink-2);
}

body[data-page="portal"] .admin-tab,
body[data-page="portal"] .cmd-k-trigger,
body[data-page="portal"] .quick-filter-row button,
body[data-page="portal"] .subnav-tabs button,
body[data-page="portal"] .action-tone-chips button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
}

body[data-page="portal"] .admin-tab:hover,
body[data-page="portal"] .admin-tab:focus-visible,
body[data-page="portal"] .admin-tab.active,
body[data-page="portal"] .cmd-k-trigger:hover,
body[data-page="portal"] .cmd-k-trigger:focus-visible,
body[data-page="portal"] .quick-filter-row button.active,
body[data-page="portal"] .quick-filter-row button:hover,
body[data-page="portal"] .subnav-tabs button.active,
body[data-page="portal"] .subnav-tabs button:hover,
body[data-page="portal"] .action-tone-chips button.active,
body[data-page="portal"] .action-tone-chips button:hover {
  border-color: var(--line-strong);
  background: rgba(240, 165, 180, 0.14);
  color: var(--ink);
  outline: none;
}

body[data-page="portal"] .admin-tab.active {
  box-shadow: inset 3px 0 0 var(--pink);
}

body[data-page="portal"] .admin-tab [data-tab-badge] {
  background: var(--pink);
  color: #160b10;
}

body[data-page="portal"] input,
body[data-page="portal"] select,
body[data-page="portal"] textarea,
body[data-page="portal"] .admin-table select,
body[data-page="portal"] .admin-table input,
body[data-page="portal"] .admin-table textarea,
body[data-page="portal"] .template-editor-modal input,
body[data-page="portal"] .template-editor-modal select,
body[data-page="portal"] .template-editor-modal textarea,
body[data-page="portal"] .trend-edit-form input,
body[data-page="portal"] .trend-edit-form select,
body[data-page="portal"] .trend-edit-form textarea,
body[data-page="portal"] .cmd-palette-input {
  border-color: var(--line);
  background: #120d12;
  color: var(--ink);
}

body[data-page="portal"] input::placeholder,
body[data-page="portal"] textarea::placeholder {
  color: rgba(191, 168, 178, 0.62);
}

body[data-page="portal"] select option {
  background: #120d12;
  color: var(--ink);
}

body[data-page="portal"] .admin-table {
  color: var(--ink-soft);
}

body[data-page="portal"] .admin-table thead {
  background: #211722;
}

body[data-page="portal"] .admin-table th {
  background: rgba(240, 165, 180, 0.08);
}

body[data-page="portal"] .admin-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.035);
}

body[data-page="portal"] .admin-table tbody tr:hover td,
body[data-page="portal"] .admin-table tbody tr:focus-visible td,
body[data-page="portal"] .order-row:hover td,
body[data-page="portal"] .order-row:focus-visible td {
  background: rgba(240, 165, 180, 0.1);
}

body[data-page="portal"] .button.secondary,
body[data-page="portal"] .button.ghost {
  border-color: var(--line);
  background: #241923;
  color: var(--ink);
}

body[data-page="portal"] .button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #f4b2bf, #e28fa1);
  color: #170b11;
}

body[data-page="portal"] .status-pill,
body[data-page="portal"] .price-chip,
body[data-page="portal"] code,
body[data-page="portal"] kbd {
  border-color: var(--line);
  background: rgba(240, 165, 180, 0.14);
  color: var(--ink);
}

body[data-page="portal"] .demo-data-banner,
body[data-page="portal"] .fx-stale-banner {
  border-radius: 12px;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

body[data-page="portal"] .demo-data-banner {
  border-color: rgba(245, 158, 11, 0.62);
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.78), rgba(33, 23, 34, 0.95));
}

body[data-page="portal"] .demo-data-banner strong {
  color: #fde68a;
}

body[data-page="portal"] .fx-stale-banner {
  border-color: rgba(251, 113, 133, 0.64);
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.74), rgba(33, 23, 34, 0.95));
}

body[data-page="portal"] .fx-stale-banner strong {
  color: #fecdd3;
}

body[data-page="portal"] .fx-stale-banner code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

body[data-page="portal"] .demo-data-banner a,
body[data-page="portal"] .fx-stale-banner a {
  color: #fff7fa;
}

body[data-page="portal"] .modal-backdrop,
body[data-page="portal"] .cmd-palette-backdrop {
  background: rgba(6, 4, 7, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-page="portal"] .detail-modal,
body[data-page="portal"] .cmd-palette,
body[data-page="portal"] .auth-modal,
body[data-page="portal"] .manual-order-modal,
body[data-page="portal"] .wa-template-modal,
body[data-page="portal"] .template-editor-modal,
body[data-page="portal"] .segment-save-modal,
body[data-page="portal"] .lead-reply-modal,
body[data-page="portal"] .trend-approve-modal,
body[data-page="portal"] .trend-edit-modal,
body[data-page="portal"] .dispatch-modal {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 0 0, rgba(240, 165, 180, 0.12), transparent 24rem),
    #151016;
  color: var(--ink);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55);
}

body[data-page="portal"] .modal-close {
  border-color: var(--line);
  background: #241923;
  color: var(--ink);
}

body[data-page="portal"] .product-modal-actions,
body[data-page="portal"] .product-modal-cta {
  border-top-color: var(--line);
  background: rgba(15, 10, 15, 0.96);
}

body[data-page="portal"] .gallery-main,
body[data-page="portal"] .gallery-thumb,
body[data-page="portal"] .product-gallery > img,
body[data-page="portal"] .gallery-strip img,
body[data-page="portal"] .trend-edit-media img,
body[data-page="portal"] [data-image-preview] {
  border-color: var(--line);
  background: #120d12;
}

body[data-page="portal"] .toast {
  border-color: var(--line-strong);
  background: #211722;
  color: var(--ink);
  box-shadow: var(--shadow);
}

body:not([data-page="portal"]) .sourced-badge {
  border-color: rgba(139, 76, 95, 0.22);
  background: rgba(255, 255, 255, 0.9);
  color: var(--pink-3);
}

body:not([data-page="portal"]) .product-modal-cta {
  position: sticky;
  bottom: -18px;
  margin: 8px -18px -18px;
  padding: 12px 18px;
  border-top-color: rgba(139, 76, 95, 0.16);
  background: rgba(255, 253, 253, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:not([data-page="portal"]) .product-modal-cta .cta-helper {
  flex-basis: 100%;
  color: var(--muted);
}

body:not([data-page="portal"]) .auth-modal {
  max-width: 520px;
  padding: 28px 18px 18px;
  color: var(--ink);
}

body:not([data-page="portal"]) .auth-modal h2 {
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}

body:not([data-page="portal"]) .auth-modal .confirmation-sub {
  color: var(--muted);
}

body:not([data-page="portal"]) .auth-label {
  color: var(--pink-3);
}

body:not([data-page="portal"]) .auth-label input {
  border: 1px solid rgba(139, 76, 95, 0.22);
  background: #fff;
  color: var(--ink);
}

body:not([data-page="portal"]) .track-shell {
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  padding-top: 42px;
}

body:not([data-page="portal"]) .track-card,
body:not([data-page="portal"]) .tracking-result {
  border-color: rgba(139, 76, 95, 0.16);
  background: rgba(255, 254, 254, 0.9);
  box-shadow: 0 18px 44px rgba(139, 76, 95, 0.08);
}

body:not([data-page="portal"]) .track-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px 30px;
}

body:not([data-page="portal"]) .track-card h1 {
  max-width: 9ch;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
}

body:not([data-page="portal"]) .track-card p:not(.kicker) {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

body:not([data-page="portal"]) .tracking-progress {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin: 22px 0 18px;
}

body:not([data-page="portal"]) .tracking-progress-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid rgba(139, 76, 95, 0.16);
  border-radius: 8px;
  background: rgba(255, 250, 251, 0.76);
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
  letter-spacing: 0;
}

body:not([data-page="portal"]) .tracking-progress-step::before {
  width: 26px;
  height: 26px;
  margin: 0;
  background: #fff;
  border-color: rgba(139, 76, 95, 0.2);
  color: var(--pink-3);
}

body:not([data-page="portal"]) .tracking-progress-step.done {
  border-color: rgba(189, 102, 120, 0.34);
  background: #fff5f8;
  color: var(--pink-3);
}

body:not([data-page="portal"]) .tracking-progress-step.done::before {
  background: var(--pink-3);
  border-color: var(--pink-3);
  color: #fff;
}

body:not([data-page="portal"]) .tracking-progress-step.current {
  border-color: rgba(31, 9, 20, 0.22);
  background: var(--ink);
  color: #fff;
}

body:not([data-page="portal"]) .tracking-progress-step.current::before {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

body:not([data-page="portal"]) .checkout-layout {
  align-items: start;
}

body:not([data-page="portal"]) .checkout-form,
body:not([data-page="portal"]) .order-summary {
  border-color: rgba(139, 76, 95, 0.18);
  background: rgba(255, 254, 254, 0.94);
  box-shadow: 0 18px 44px rgba(139, 76, 95, 0.08);
}

body:not([data-page="portal"]) .checkout-form .page-intro p {
  color: var(--ink-soft);
}

body:not([data-page="portal"]) .checkout-progress li {
  border-color: rgba(139, 76, 95, 0.18);
  background: #fbf4f6;
  color: var(--ink-soft);
}

body:not([data-page="portal"]) .checkout-progress li.active {
  border-color: rgba(157, 69, 89, 0.34);
  background: #fff;
}

body:not([data-page="portal"]) .checkout-progress strong {
  color: var(--ink);
}

body:not([data-page="portal"]) .checkout-progress span {
  color: var(--muted);
}

body:not([data-page="portal"]) fieldset {
  border-color: rgba(139, 76, 95, 0.2);
  background: rgba(255, 255, 255, 0.78);
}

body:not([data-page="portal"]) legend,
body:not([data-page="portal"]) label {
  color: var(--pink-3);
}

body:not([data-page="portal"]) input,
body:not([data-page="portal"]) select,
body:not([data-page="portal"]) textarea {
  background: #fff;
  color: var(--ink);
  border-color: rgba(139, 76, 95, 0.24);
}

body:not([data-page="portal"]) input:focus,
body:not([data-page="portal"]) select:focus,
body:not([data-page="portal"]) textarea:focus {
  outline: 2px solid rgba(189, 102, 120, 0.35);
  outline-offset: 2px;
  border-color: rgba(157, 69, 89, 0.46);
}

body:not([data-page="portal"]) .check-row {
  color: var(--ink-soft);
}

body:not([data-page="portal"]) .track-card label {
  display: grid;
  gap: 8px;
  color: var(--pink-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not([data-page="portal"]) .tracking-result:empty {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 28px;
}

body:not([data-page="portal"]) .tracking-result:empty::before {
  display: none;
}

body:not([data-page="portal"]) .tracking-result:empty::after {
  max-width: 38ch;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  body:not([data-page="portal"]) .editorial-band {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .process-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  body:not([data-page="portal"]) .hero-shell {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .hero-copy h1 {
    max-width: 13ch;
  }
}

@media (max-width: 720px) {
  body:not([data-page="portal"]) .process-rail {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .product-grid {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .product-card .product-media {
    height: clamp(220px, 62vw, 320px);
  }

  body:not([data-page="portal"]) .modal-backdrop {
    padding: 0;
  }

  body:not([data-page="portal"]) .detail-modal {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: 14px 16px 96px;
  }

  body:not([data-page="portal"]) .product-detail-modal {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .product-detail-info {
    padding-right: 0;
  }

  body:not([data-page="portal"]) .product-gallery {
    position: static;
  }

  body:not([data-page="portal"]) .product-ledger {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .detail-list div {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .product-modal-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
  }

  body:not([data-page="portal"]) .trust-band {
    padding: 34px 20px;
  }

  body:not([data-page="portal"]) .track-shell {
    grid-template-columns: 1fr;
  }

  body:not([data-page="portal"]) .track-card h1 {
    max-width: 12ch;
  }
}

/* Footer chip + meta typography */
body:not([data-page="portal"]) .footer-col a,
body:not([data-page="portal"]) .footer-tagline,
body:not([data-page="portal"]) .footer-hours {
  font-size: 0.9rem;
  line-height: 1.7;
}

/* "By HAR" footer tag — small italic sign-off mirroring the logo's wordmark. */
.brand-signature {
  display: block;
  margin-top: 2px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--pink-3);
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════
   SOURCING TRAY (admin portal)
   Bulk URL paste + per-URL fetch result queue. Same visual language as
   the admin tables — soft white cards, pink accents, dense rows.
   ═══════════════════════════════════════════════════════════════════════ */

.sourcing-tray {
  display: grid;
  gap: 14px;
  padding: 18px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.sourcing-tray-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.sourcing-tray-head strong {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.08rem;
  color: var(--ink);
}

.sourcing-tray-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  max-width: 56ch;
}

.sourcing-tray-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sourcing-tray-input textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
  min-height: 110px;
}

.sourcing-tray-status {
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 18px;
}

.sourcing-tray-status.is-busy::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid var(--pink-2);
  border-top-color: transparent;
  animation: sourcing-spin 0.8s linear infinite;
  vertical-align: -1px;
}

@keyframes sourcing-spin {
  to { transform: rotate(360deg); }
}

.sourcing-queue {
  display: grid;
  gap: 8px;
}

.sourcing-row {
  display: grid;
  grid-template-columns: auto 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.sourcing-row:hover {
  border-color: var(--line-strong);
}

.sourcing-row.is-blocked,
.sourcing-row.is-error {
  background: rgba(196, 80, 106, 0.04);
  border-color: rgba(196, 80, 106, 0.28);
}

.sourcing-row.is-duplicate {
  background: rgba(211, 154, 53, 0.06);
  border-color: rgba(211, 154, 53, 0.36);
}

.sourcing-row.is-partial {
  background: rgba(211, 154, 53, 0.04);
}

.sourcing-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pink-2);
  cursor: pointer;
}

.sourcing-row .row-image {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  object-fit: cover;
}

.sourcing-row .row-image-fallback {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sourcing-row .row-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sourcing-row .row-title {
  font-family: "Playfair Display", serif;
  font-size: 0.98rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sourcing-row .row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.sourcing-row .row-meta strong {
  color: var(--ink);
  font-weight: 700;
}

.sourcing-row .row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sourcing-row .row-status-chip {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--pink-3);
}

.sourcing-row.is-blocked .row-status-chip,
.sourcing-row.is-error .row-status-chip {
  background: rgba(196, 80, 106, 0.14);
  color: var(--red);
}

.sourcing-row.is-duplicate .row-status-chip {
  background: rgba(211, 154, 53, 0.16);
  color: var(--amber);
}

.sourcing-row.is-partial .row-status-chip {
  background: rgba(211, 154, 53, 0.12);
  color: var(--amber);
}

.sourcing-row .row-mini {
  padding: 5px 10px;
  font-size: 0.76rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.sourcing-row .row-mini:hover {
  border-color: var(--pink-2);
  background: var(--rose);
}

.sourcing-tray-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sourcing-tray-footer .sourcing-select-all,
.sourcing-tray-footer .sourcing-publish-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--ink);
}

.sourcing-tray-footer .sourcing-selected-count {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.84rem;
}

.sourcing-tray-footer select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   "SOURCE ANY USA PRODUCT" — PUBLIC MODAL + CART CHIP
   ═══════════════════════════════════════════════════════════════════════ */

.source-cta-band {
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 24px;
  width: var(--page);
  margin: 24px auto;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--rose) 0%, var(--surface-2) 60%);
  border: 1px solid var(--line);
}

.source-cta-band .kicker {
  margin: 0;
}

.source-cta-band h3 {
  margin: 6px 0 4px;
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  color: var(--ink);
}

.source-cta-band p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.source-modal {
  display: grid;
  gap: 14px;
  padding: 4px 0;
}

.source-modal h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: var(--ink);
}

.source-modal .source-modal-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.source-modal label {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.source-modal input[type="url"],
.source-modal input[type="text"] {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.95rem;
}

.source-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.source-result {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.source-result.is-match {
  border-color: var(--pink-2);
  background: var(--rose);
}

.source-result.is-blocked {
  border-color: rgba(196, 80, 106, 0.32);
  background: rgba(196, 80, 106, 0.06);
}

.source-result-title {
  font-family: "Playfair Display", serif;
  font-size: 1.16rem;
  color: var(--ink);
  margin: 0;
}

.source-result-price {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: var(--ink);
}

.source-result-meta {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.source-result-note {
  display: block;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(211, 154, 53, 0.12);
  color: var(--amber);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Cart chip for sourcing requests — quietly different from regular lines. */
.cart-line[data-kind="sourcing_request"] {
  border-left: 3px solid var(--pink-2);
}

.cart-line .cart-estimate-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--pink-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
}

/* Sourcing-request chip on Kanban cards — pink dot so the team spots
   customer-pasted URL requests that need a quote before going through
   the normal preorder flow. */
.kanban-card.is-sourcing {
  border-left: 3px solid var(--pink-2);
}

.kanban-sourcing-chip {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--surface);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* Quote estimator: "what's included" pill list. Sits between the
   50/50 split and the team-confirmation note. Replaces the old
   FX/markup line breakdown to avoid exposing internal math. */
.quote-includes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}

.quote-includes li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--pink-3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.quote-includes li::before {
  content: "✓ ";
  margin-right: 4px;
  color: var(--pink-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   /quote PAGE — URL-paste primary path
   The URL input card sits at the top, the USD-input estimator is
   collapsed behind a <details> disclosure underneath. Result cards
   render inline (not in a modal) so the customer never leaves the page.
   ═══════════════════════════════════════════════════════════════════════ */

.quote-url-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.quote-url-label,
.quote-variant-label {
  display: grid;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.quote-url-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.quote-url-row input[type="url"] {
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.005em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.quote-url-row input[type="url"]:focus {
  outline: none;
  border-color: var(--pink-2);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(232, 166, 176, 0.16);
}

.quote-url-row .button {
  white-space: nowrap;
}

.quote-variant-label input[type="text"] {
  padding: 12px 14px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

@media (max-width: 640px) {
  .quote-url-row {
    grid-template-columns: 1fr;
  }
}

/* Result card slot — empty until the customer hits Quote it. */
.quote-url-result:empty {
  display: none;
}

.quote-url-result .source-result {
  margin-top: 4px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.quote-url-result .source-result.is-match {
  border-color: var(--pink-2);
  background: var(--rose);
}

.quote-url-result .source-result.is-blocked {
  border-color: rgba(196, 80, 106, 0.32);
  background: rgba(196, 80, 106, 0.06);
}

.quote-url-result .source-result.is-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.quote-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pink-2);
  border-top-color: transparent;
  animation: quote-spin 0.8s linear infinite;
}

@keyframes quote-spin {
  to { transform: rotate(360deg); }
}

.quote-result-card .quote-result-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.quote-result-head img,
.quote-result-img-fallback {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.quote-result-img-fallback {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quote-result-meta {
  min-width: 0;
  flex: 1;
}

.quote-result-meta .source-result-title {
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: 1.16rem;
  color: var(--ink);
}

.quote-result-meta .source-result-price {
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  font-size: 1.7rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.quote-result-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.quote-url-result .source-result-note {
  display: block;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(216, 142, 155, 0.1);
  color: var(--pink-3);
  font-size: 0.78rem;
  line-height: 1.55;
}

.quote-url-result .source-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Disclosure for the manual USD estimator — collapsed by default. */
.quote-manual-disclosure {
  margin: 8px 0 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.quote-manual-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.quote-manual-disclosure summary::-webkit-details-marker { display: none; }

.quote-manual-disclosure summary:hover {
  border-color: var(--pink-2);
  background: var(--surface-2);
}

.quote-manual-chev {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--pink-3);
  font-weight: 700;
  font-size: 1rem;
  transition: transform 240ms var(--ease-cinema);
}

.quote-manual-disclosure[open] .quote-manual-chev {
  transform: rotate(45deg);
}

.quote-manual-disclosure[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.quote-manual-disclosure .quote-estimator-card {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════
   PKR-FIRST PRODUCT UPLOAD — Customer price row + Cost breakdown drawer
   The admin's PRIMARY pricing input is the final customer PKR price.
   USD / FX / shipping live in a collapsed accordion underneath.
   ═══════════════════════════════════════════════════════════════════════ */

.customer-price-row {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--pink-2);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--rose) 0%, var(--surface) 100%);
  box-shadow: 0 4px 14px rgba(216, 142, 155, 0.12);
}

.customer-price-label {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.customer-price-input-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.customer-price-prefix {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--pink-3);
  padding: 0 4px;
}

.customer-price-input-wrap input[data-customer-price] {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.customer-price-input-wrap input[data-customer-price]:focus {
  outline: none;
  border-color: var(--pink-2);
  box-shadow: 0 0 0 4px rgba(232, 166, 176, 0.16);
}

.customer-price-reset {
  padding: 8px 12px !important;
  min-height: auto !important;
  font-size: 1rem !important;
  font-weight: 600;
  border-radius: 8px !important;
}

.customer-price-hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.customer-price-hint strong {
  color: var(--pink-3);
  font-weight: 700;
}

/* Cost breakdown drawer — collapsed by default, opens to show the
   USD / FX / shipping math behind the customer PKR figure. */
.cost-breakdown {
  margin: 4px 0;
}

.cost-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.cost-breakdown summary::-webkit-details-marker { display: none; }

.cost-breakdown summary small {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}

.cost-breakdown summary:hover {
  border-color: var(--pink-2);
  border-style: solid;
  background: var(--rose);
}

.cost-breakdown-chev {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 700;
  transition: transform 240ms var(--ease-cinema);
}

.cost-breakdown[open] .cost-breakdown-chev {
  transform: rotate(45deg);
}

.cost-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 0 4px;
}

.cost-breakdown-grid label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .cost-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD ENHANCEMENTS — Wave 1 + 2 + 3
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KPI cards ─────────────────────────────────────────────────────────── */

.kpi-card {
  position: relative;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.kpi-card.kpi-action {
  cursor: pointer;
}

.kpi-card.kpi-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(216, 142, 155, 0.18);
}

.kpi-card.kpi-action::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.kpi-card.kpi-action:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
  color: var(--pink-2);
}

.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kpi-sparkline {
  flex-shrink: 0;
  opacity: 0.9;
  animation: spark-draw 900ms var(--ease-cinema, ease-out) both;
}

@keyframes spark-draw {
  from { stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 0.9; }
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  transition: color 200ms var(--ease);
}

.kpi-card.tone-warn .kpi-value { color: var(--red); }
.kpi-card.tone-ok .kpi-value { color: var(--ink); }

/* ── Today ribbon — freshness indicator ─────────────────────────────────── */

.today-freshness {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.freshness-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 currentColor;
  animation: freshness-pulse 2s ease-in-out infinite;
}

@keyframes freshness-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93, 179, 137, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(93, 179, 137, 0); }
}

.today-freshness.is-stale .freshness-dot {
  background: var(--amber);
  animation-duration: 1s;
}

.today-freshness.is-stale {
  color: var(--amber);
}

/* ── Today ribbon — batch progress ─────────────────────────────────────── */

.today-batch-progress {
  display: grid;
  gap: 4px;
}

.batch-progress-track {
  width: 100%;
  height: 4px;
  background: var(--rose);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 2px;
}

.batch-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink-2), var(--pink-3));
  border-radius: 999px;
  transition: width 1.2s var(--ease-cinema, ease-out);
}

/* ── SVG funnel ─────────────────────────────────────────────────────────── */

.funnel-canvas {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.funnel-svg {
  width: 100%;
  max-width: 540px;
  height: auto;
  margin: 0 auto;
}

.funnel-band {
  transform-origin: 50% 50%;
  opacity: 0;
  animation: funnel-band-in 600ms var(--ease-cinema, ease-out) forwards;
  animation-delay: calc(var(--bi) * 120ms);
}

@keyframes funnel-band-in {
  0%   { opacity: 0; transform: translateY(-8px) scaleX(0.9); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

.funnel-band-label {
  fill: var(--surface);
  font-family: "Archivo", ui-sans-serif, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.funnel-dropoffs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  font-size: 0.78rem;
}

.funnel-drop {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.funnel-drop strong {
  color: var(--red);
  font-weight: 700;
}

/* ── Money bar — animated fill ─────────────────────────────────────────── */

.money-bar-seg {
  transition: width 1.1s var(--ease-cinema, ease-out);
  transition-delay: calc(var(--seg-i, 0) * 90ms);
}

/* ── Skeleton shimmer ──────────────────────────────────────────────────── */

body.admin-loading [data-overview-kpis] .kpi-card,
body.admin-loading [data-cashflow-strip] .kpi-card,
body.admin-loading [data-admin-orders] tr,
body.admin-loading [data-orders-board] .kanban-card {
  position: relative;
  overflow: hidden;
}

body.admin-loading [data-overview-kpis] .kpi-card::before,
body.admin-loading [data-cashflow-strip] .kpi-card::before,
body.admin-loading [data-admin-orders] tr::before,
body.admin-loading [data-orders-board] .kanban-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 166, 176, 0.18) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes skeleton-shimmer {
  from { background-position: -100% 0; }
  to   { background-position: 100% 0; }
}

/* ── Sliding active indicator on quick-filter chips ────────────────────── */

.quick-filter-row {
  position: relative;
}

.quick-filter-row button {
  position: relative;
  transition: color 220ms var(--ease), background 220ms var(--ease);
}

.quick-filter-row button.active {
  color: var(--pink-3);
}

.quick-filter-row button.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--pink-2);
  border-radius: 2px;
  animation: chip-underline 280ms var(--ease-cinema, ease-out);
}

@keyframes chip-underline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── Kanban card focus state (keyboard nav) ────────────────────────────── */

.kanban-card:focus-visible {
  outline: 2px solid var(--pink-2);
  outline-offset: 2px;
  z-index: 2;
}

/* ── Dark mode toggle in the portal nav ────────────────────────────────── */

.admin-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 8px 12px !important;
}

.theme-toggle-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--line);
  transition: background 280ms var(--ease);
  flex-shrink: 0;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(26, 14, 20, 0.2);
  transition: transform 280ms var(--ease-cinema, ease-out);
}

.theme-toggle-glyph {
  position: absolute;
  top: 50%;
  font-size: 10px;
  transform: translateY(-50%);
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}

.theme-toggle-sun  { left: 4px;  color: var(--amber); }
.theme-toggle-moon { right: 4px; color: var(--pink-2); opacity: 0; }

html.theme-dark .admin-theme-toggle .theme-toggle-track {
  background: var(--pink-2);
}

html.theme-dark .admin-theme-toggle .theme-toggle-thumb {
  transform: translateX(16px);
}

html.theme-dark .theme-toggle-sun  { opacity: 0; }
html.theme-dark .theme-toggle-moon { opacity: 1; }

/* ── DARK MODE — palette flip for the portal only ─────────────────────── */

html.theme-dark body[data-page="portal"] {
  --bg: #100b10;
  --surface: #1a1318;
  --surface-2: #221820;
  --ink: #f5edf0;
  --ink-soft: #d8c5cc;
  --muted: #998590;
  --line: rgba(232, 166, 176, 0.18);
  --line-strong: rgba(232, 166, 176, 0.32);
  --rose: rgba(232, 166, 176, 0.12);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

html.theme-dark body[data-page="portal"] {
  background: var(--bg);
  color: var(--ink);
}

html.theme-dark body[data-page="portal"] .site-header,
html.theme-dark body[data-page="portal"] .admin-tabs,
html.theme-dark body[data-page="portal"] .kpi-card,
html.theme-dark body[data-page="portal"] .ops-panel,
html.theme-dark body[data-page="portal"] .today-stat,
html.theme-dark body[data-page="portal"] .today-freshness,
html.theme-dark body[data-page="portal"] .cashflow-card,
html.theme-dark body[data-page="portal"] .admin-table-wrap,
html.theme-dark body[data-page="portal"] .kanban-card,
html.theme-dark body[data-page="portal"] .kanban-col {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

html.theme-dark body[data-page="portal"] input,
html.theme-dark body[data-page="portal"] select,
html.theme-dark body[data-page="portal"] textarea {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}

html.theme-dark body[data-page="portal"] .admin-table th,
html.theme-dark body[data-page="portal"] .admin-table td {
  border-color: var(--line);
  color: var(--ink);
}

html.theme-dark body[data-page="portal"] .admin-tab {
  color: var(--muted);
}

html.theme-dark body[data-page="portal"] .admin-tab.active,
html.theme-dark body[data-page="portal"] .admin-tab:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* Reduced-motion override — kill all the dashboard animations. */
@media (prefers-reduced-motion: reduce) {
  .kpi-sparkline,
  .funnel-band,
  .money-bar-seg,
  .batch-progress-fill,
  body.admin-loading .kpi-card::before,
  body.admin-loading tr::before,
  body.admin-loading .kanban-card::before,
  .freshness-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SUGGEST 10 — rich product-card grid for the bulk uploader
   Replaces the URL-paste list with a curated 10-product grid where each
   card has an image gallery, inline-editable title/brand/category/PKR,
   description preview, and source link.
   ═══════════════════════════════════════════════════════════════════════ */

.suggest-ten .sourcing-tray-head strong {
  font-size: 1.16rem;
}

.sourcing-queue.suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 14px 0;
}

.suggest-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
  animation: suggest-card-in 480ms var(--ease-cinema, ease-out) both;
}

.suggest-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(216, 142, 155, 0.16);
}

.suggest-card.is-selected {
  border-color: var(--pink-2);
  box-shadow: 0 0 0 3px rgba(232, 166, 176, 0.18), var(--shadow);
}

@keyframes suggest-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger card entrance by row position — uses the implicit grid order */
.suggest-card:nth-child(1)  { animation-delay: 0ms; }
.suggest-card:nth-child(2)  { animation-delay: 50ms; }
.suggest-card:nth-child(3)  { animation-delay: 100ms; }
.suggest-card:nth-child(4)  { animation-delay: 150ms; }
.suggest-card:nth-child(5)  { animation-delay: 200ms; }
.suggest-card:nth-child(6)  { animation-delay: 250ms; }
.suggest-card:nth-child(7)  { animation-delay: 300ms; }
.suggest-card:nth-child(8)  { animation-delay: 350ms; }
.suggest-card:nth-child(9)  { animation-delay: 400ms; }
.suggest-card:nth-child(10) { animation-delay: 450ms; }

.suggest-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.suggest-select {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.suggest-select input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pink-2);
  cursor: pointer;
}

.suggest-img-count {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-3);
  background: var(--rose);
  padding: 4px 10px;
  border-radius: 999px;
}

.suggest-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}

.suggest-remove:hover {
  color: var(--red);
  border-color: var(--red);
  background: rgba(196, 80, 106, 0.06);
}

.suggest-hero {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.suggest-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-cinema, ease-out);
}

.suggest-card:hover .suggest-hero img {
  transform: scale(1.04);
}

.suggest-hero-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 0.78rem;
}

.suggest-thumb-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.suggest-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}

.suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.suggest-thumb:hover {
  transform: translateY(-1px);
  border-color: var(--pink-2);
}

.suggest-thumb.is-active {
  border-color: var(--pink-3);
  box-shadow: 0 4px 12px rgba(216, 142, 155, 0.22);
}

.suggest-body {
  display: grid;
  gap: 10px;
}

.suggest-field {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.suggest-field input[type="text"],
.suggest-field input[type="number"],
.suggest-field select {
  padding: 8px 10px;
  font-size: 0.92rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.suggest-field input:focus,
.suggest-field select:focus {
  outline: none;
  border-color: var(--pink-2);
  background: var(--surface);
}

.suggest-field-title input {
  font-family: "Playfair Display", serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.suggest-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.suggest-field-price {
  background: linear-gradient(180deg, var(--rose) 0%, var(--surface) 100%);
  padding: 10px 12px;
  border: 1px solid var(--pink-2);
  border-radius: 10px;
}

.suggest-price-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
}

.suggest-price-prefix {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pink-3);
}

.suggest-field-price input[type="number"] {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 600;
  border-color: var(--line);
}

.suggest-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.suggest-source {
  font-size: 0.74rem;
  color: var(--pink-3);
  text-decoration: none;
}

.suggest-source:hover {
  text-decoration: underline;
}

/* URL fallback disclosure underneath the suggest grid */
.suggest-url-fallback {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.suggest-url-fallback summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink-soft);
  list-style: none;
}

.suggest-url-fallback summary::-webkit-details-marker { display: none; }

.suggest-fallback-chev {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 700;
  transition: transform 240ms var(--ease-cinema, ease-out);
}

.suggest-url-fallback[open] .suggest-fallback-chev {
  transform: rotate(45deg);
}

.suggest-url-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Reduced motion — kill the staggered entrance */
@media (prefers-reduced-motion: reduce) {
  .suggest-card { animation: none !important; }
  .suggest-hero img { transition: none !important; }
}