/* ============================================================
   TALIO SQUARE — BRAND DESIGN SYSTEM
   Phase 1: Design Tokens, Component Library, Motion System
   Every phase inherits from this file.
   No page-level overrides. No approximate values.
   ============================================================ */

/* --- 1. DESIGN TOKENS (CSS Custom Properties) --- */

:root {
  /* Brand Colours — LOCKED (see docs/north-star-ux-ui.md).
     Four intentional colours: white is the dominant field, neutral is
     the secondary field / chrome / divider, navy is an accent + text
     anchor (NOT a background workhorse), gold is a sparing accent. */
  --color-navy:       #0D1B2A;
  --color-gold:       #E8A020;
  --color-soft-gold:  #F5C842;  /* derived: gold lightened for hover / dark-bg contrast */
  --color-gold-dark:  #855a10;  /* derived: contrast-safe gold on white AND on --color-neutral — not a brand colour */
  --color-neutral:    #D9D9D9;
  --color-white:      #FFFFFF;

  --color-bg-grey:    var(--color-neutral);  /* deprecated alias — migrate refs, then remove */

  /* Functional Colours */
  --color-success:    #25D366;
  --color-success-dark: #178a48;  /* derived: contrast-safe success text on white (AA) */
  --color-error:      #E74C3C;
  --color-warning:    #F39C12;

  /* Navy Opacity Variants (for overlays, borders, subtle elements) */
  --navy-90: rgba(13, 27, 42, 0.90);
  --navy-70: rgba(13, 27, 42, 0.70);
  --navy-50: rgba(13, 27, 42, 0.62);  /* muted body text — was .50, too light on white/neutral for AA */
  --navy-30: rgba(13, 27, 42, 0.30);
  --navy-10: rgba(13, 27, 42, 0.10);
  --navy-05: rgba(13, 27, 42, 0.05);

  /* Gold Opacity Variants */
  --gold-30: rgba(232, 160, 32, 0.30);
  --gold-20: rgba(232, 160, 32, 0.20);
  --gold-15: rgba(232, 160, 32, 0.15);
  --gold-08: rgba(232, 160, 32, 0.08);

  /* White Opacity Variants */
  --white-85: rgba(255, 255, 255, 0.85);
  --white-70: rgba(255, 255, 255, 0.70);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-35: rgba(255, 255, 255, 0.35);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-03: rgba(255, 255, 255, 0.03);

  /* Typography — LOCKED */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   2rem;      /* 32px */
  --text-4xl:   2.5rem;    /* 40px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   4rem;      /* 64px */

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* Spacing — 8px Grid System */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-14:  3.5rem;   /* 56px */
  --space-16:  4rem;     /* 64px */
  --space-18:  4.5rem;   /* 72px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-28:  7rem;     /* 112px */
  --space-30:  7.5rem;   /* 120px */

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-full: 100px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.20);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.25);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 4px 20px rgba(232, 160, 32, 0.25);
  --shadow-card: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--gold-20);

  /* Transitions — Motion System */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-reveal: 0.75s ease;

  /* Z-Index Scale */
  --z-base:     1;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    1500;

  /* Layout */
  --max-width: 1240px;
  --section-padding-desktop: var(--space-30);
  --section-padding-mobile: var(--space-16);
}


/* --- 2. RESET & BASE --- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-white);
  background-color: var(--color-navy);
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}


/* --- 3. TYPOGRAPHY --- */

h1, .h1 {
  font-family: var(--font-primary);
  font-weight: var(--weight-black);
  font-size: var(--text-6xl);
  line-height: 1.07;
  letter-spacing: -2.5px;
  color: var(--color-white);
}

h2, .h2 {
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-4xl);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--color-white);
}

h3, .h3 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-white);
}

.text-body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--white-55);
}

.text-small {
  font-size: var(--text-sm);
  color: var(--white-35);
}

.text-gold {
  color: var(--color-gold);
}

.text-navy {
  color: var(--color-navy);
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 3px;
  color: var(--color-gold);
  text-transform: uppercase;
}


/* --- 4. LAYOUT UTILITIES --- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

.section {
  padding-top: var(--section-padding-desktop);
  padding-bottom: var(--section-padding-desktop);
}

.section-alt {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid var(--white-05);
  border-bottom: 1px solid var(--white-05);
}

.divider {
  border: none;
  border-top: 1px solid var(--white-05);
  margin: 0;
}

/* 4-column grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* 3-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* 2-column grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}


/* --- 5. BUTTONS --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-7);
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — Gold */
.btn-primary {
  background: var(--color-gold);
  color: var(--color-navy);
}

.btn-primary:hover {
  background: var(--color-soft-gold);
  box-shadow: var(--shadow-gold);
}

/* Solid navy — secondary action on a light field */
.btn-navy {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn-navy:hover {
  box-shadow: var(--shadow-md);
}

/* Outline — Gold border on dark backgrounds */
.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--gold-30);
}

.btn-outline:hover {
  background: var(--gold-08);
  border-color: var(--color-gold);
}

/* Outline — Gold border on light backgrounds */
.btn-outline-dark {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
}

.btn-outline-dark:hover {
  background: var(--gold-15);
}

/* Ghost — subtle */
.btn-ghost {
  background: transparent;
  color: var(--white-55);
}

.btn-ghost:hover {
  color: var(--color-white);
  background: var(--white-05);
}

/* Small */
.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
}

/* Large */
.btn-lg {
  padding: var(--space-5) var(--space-8);
  font-size: var(--text-base);
}


/* --- 6. CARDS --- */

.card {
  background: var(--white-05);
  border: 1px solid var(--white-07);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-base);
  transform-style: preserve-3d;
}

.card-hover:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-2deg);
  box-shadow: var(--shadow-card);
  border-color: var(--gold-20);
}

.card-gold {
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
}

/* Card icon box */
.card-icon {
  width: 52px;
  height: 52px;
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: var(--space-7);
  transition: background var(--transition-base);
}

.card-hover:hover .card-icon {
  background: var(--gold-15);
}

/* Card badge */
.card-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* --- 7. FORMS --- */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--white-55);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--white-05);
  border: 1px solid var(--white-07);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-base);
}

.form-input::placeholder {
  color: var(--white-35);
}

.form-input:focus {
  border-color: var(--color-gold);
}

.form-input-light {
  background: var(--white-05);
  border-color: var(--navy-10);
  color: var(--color-navy);
}

.form-input-light::placeholder {
  color: var(--navy-30);
}

.form-input-light:focus {
  border-color: var(--color-gold);
}

.form-row {
  display: flex;
  gap: var(--space-3);
}

/* Success message */
.form-success {
  padding: var(--space-4);
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-lg);
  color: var(--color-gold);
  font-weight: var(--weight-semibold);
  text-align: center;
}

/* Note text below forms */
.form-note {
  font-size: var(--text-sm);
  color: var(--white-35);
  margin-top: var(--space-3);
}


/* --- 8. NAVIGATION --- */

.nav-premium {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-neutral);
  border-bottom: 1px solid var(--navy-05);
}

.nav-premium-dark {
  background: var(--navy-90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--white-05);
}


/* --- 9. BADGES --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.badge-gold {
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  color: var(--color-gold);
}

.badge-navy {
  background: var(--navy-10);
  border: 1px solid var(--navy-30);
  color: var(--color-navy);
}

.badge-dot {
  width: 7px;
  height: 7px;
  background: var(--color-gold);
  border-radius: var(--radius-round);
  animation: pulse 2s infinite;
}


/* --- 10. COUNTDOWN --- */

.countdown {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: flex-start;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
}

.countdown-number {
  font-size: 52px;
  font-weight: var(--weight-extrabold);
  color: var(--color-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform 0.1s ease;
}

.countdown-number.tick {
  transform: scale(1.08);
}

.countdown-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  color: var(--white-35);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

.countdown-separator {
  font-size: 44px;
  font-weight: var(--weight-light);
  color: var(--white-15);
  padding-top: 6px;
}


/* --- 11. PARTNER BADGES --- */

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--navy-05);
  border: 1px solid var(--navy-10);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--navy-50);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.partner-badge strong {
  color: var(--color-navy);
  font-size: var(--text-sm);
}


/* --- 12. SOCIAL ICONS --- */

.social-icon {
  width: 40px;
  height: 40px;
  background: var(--navy-05);
  border: 1px solid var(--navy-10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--navy-50);
  transition: fill var(--transition-base);
}

.social-icon:hover {
  background: var(--gold-15);
  border-color: var(--color-gold);
}

.social-icon:hover svg {
  fill: var(--color-navy);
}


/* --- 13. WHATSAPP FLOATING BUTTON --- */

.whatsapp-float {
  position: fixed;
  bottom: var(--space-7);
  right: var(--space-7);
  width: 54px;
  height: 54px;
  background: var(--color-success);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  z-index: var(--z-sticky);
  transition: transform var(--transition-base);
}

.whatsapp-float:hover {
  transform: scale(1.1);
}


/* --- 14. MOTION SYSTEM --- */

/* Fade up on scroll */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Fade in */
.fade-in {
  animation: fadeIn 0.8s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.8); }
}

/* Breathe (for background gradients) */
@keyframes breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* --- 15. HERO --- */
/* The old single-column, full-viewport-centered `.hero` that used to live
   here (min-height:100vh + flex column + align-items/justify-content/
   text-align: center) is gone — `class="hero"` is only ever used by
   templates/landing.html, and that section has its own, more specific
   two-column `.hero` rule further down (§ HERO, "HOMEPAGE" block). Because
   that later rule never redeclared display/align-items/justify-content/
   text-align, the properties here were silently cascading through:
   text-align:center was center-aligning the intentionally left-aligned
   hero copy (most visible on the h1's short last line), and
   align-items:center stopped `.hero-inner` stretching to its intended
   width, leaving its fr-unit grid columns to size off their own content
   instead. Root cause of the "hero renders broken on mobile" report.
   Removed rather than merged forward — nothing else consumes it. */


/* --- 16. FOOTER --- */

.footer-premium {
  background: var(--color-neutral);
  border-top: 1px solid var(--navy-05);
  padding: var(--space-18) var(--space-12) var(--space-7);
  color: var(--color-navy);
}

.footer-premium-dark {
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid var(--white-05);
  color: var(--color-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--navy-10);
  margin-bottom: var(--space-7);
}

.footer-tagline {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--navy-50);
  margin-top: var(--space-3);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--navy-30);
  margin-top: var(--space-4);
  line-height: 1.9;
}

.footer-heading {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 2.5px;
  color: var(--color-navy);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  font-size: var(--text-sm);
  color: var(--navy-50);
  transition: color var(--transition-base);
}

.footer-links a:hover {
  color: var(--color-gold);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--navy-30);
}

.footer-bottom a {
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
}


/* --- 17. RESPONSIVE --- */

@media (max-width: 860px) {
  :root {
    --text-6xl: 2rem;   /* 32px */
    --text-4xl: 1.625rem; /* 26px */
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }

  .grid-4, .grid-3, .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .countdown-number {
    font-size: 28px;
  }

  .countdown-unit {
    min-width: 48px;
  }

  .countdown-separator {
    font-size: 28px;
    padding-top: 2px;
  }

  .countdown-label {
    font-size: 8px;
    margin-top: var(--space-1);
  }

  .form-row {
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .social-icon {
    width: 36px;
    height: 36px;
  }

  .social-icon svg {
    width: 16px;
    height: 16px;
  }

  .nav-premium {
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================================
   PHASE 16 — PLATFORM POLISH
   Enhanced motion, 3D effects, performance optimizations
   ============================================================ */

/* Smooth page transitions */
@view-transition {
  navigation: auto;
}

/* Enhanced 3D card effects */
.card-premium {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.3s ease;
}

.card-premium:hover {
  transform: translateY(-12px) rotateX(5deg) rotateY(-3deg) scale(1.02);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4),
              0 0 0 2px rgba(232, 160, 32, 0.25);
}

/* Glass morphism for overlays */
.glass {
  background: rgba(13, 27, 42, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Smooth scroll reveal with stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-stagger > *.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.4s; }

/* Parallax tilt effect */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

/* Loading skeleton animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Performance: GPU acceleration for animated elements */
.gpu {
  transform: translateZ(0);
  will-change: transform;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  nav, footer, .wa, .no-print {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .container, .sec, .section, .pg-body, .legal-body, .resources { padding: 40px 16px !important; }
  h1, .pg-title { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  body { font-size: 16px; }
  .grid-4, .grid-3, .grid-2, .g4, .cat-grid, .trust-grid, .stats-strip, .fg { grid-template-columns: 1fr !important; }
  nav { padding: 12px 16px; }
  .nav-links { display: none; }
  button, .btn, a.btn, .nav-cta, input, select, textarea { min-height: 44px; min-width: 44px; }
  .carousel-card, .store-card { min-width: 220px; max-width: 220px; }
  footer { padding: 48px 16px 20px; }
  .fg { grid-template-columns: 1fr; gap: 32px; }
  .fb { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============================================================
   STOREFRONT / STORE COMPONENTS (Step 1 foundation)
   Brand identity is injected per-store via --brand custom props;
   stores are instances of one system, never special-cased.
   ============================================================ */
.store {
  --brand:#E8A020; --brand-dark:var(--color-gold-dark); --brand-light:var(--color-soft-gold);
  --brand-soft:#fdf3df; --on-brand:var(--color-navy);
  /* Light surface (docs/north-star-ux-ui.md). --card-* mirror .theme-light
     so the shared .product-card / .store-card / .empty-state render on
     white; the per-store hero keeps the brand colour (see .store-hero). */
  --card-bg:#fff; --card-border:var(--navy-10); --card-hover-border:var(--brand,#E8A020);
  --card-text:var(--color-navy); --card-muted:var(--navy-50);
  --card-accent:var(--brand-dark,var(--color-gold-dark));
  --card-surface:var(--color-white); --card-shadow:0 18px 40px rgba(13,27,42,.12);
  background:var(--color-white); color:var(--color-navy);
}
.store *{box-sizing:border-box}
.store img{max-width:100%;display:block}

/* Top bar */
/* Header: solid --color-neutral, navy text, every scroll state — no
   transparency / blur (docs/north-star-ux-ui.md). */
.store-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:var(--color-neutral);border-bottom:1px solid var(--navy-10);position:relative;z-index:5}
.store-brandlink{color:var(--color-navy);font-size:13px;font-weight:600;text-decoration:none;letter-spacing:.2px}
.store-nav{display:flex;gap:22px}
.store-nav a{color:var(--navy-70);font-size:13px;font-weight:500;text-decoration:none;transition:color .2s}
.store-nav a:hover{color:var(--brand-dark,var(--color-gold-dark))}

/* Hero */
.store-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:clamp(48px,8vw,120px) 28px;text-align:center}
.store-hero--image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.55),rgba(13,27,42,.84));z-index:1}
.store-hero--plain{background:linear-gradient(135deg,var(--brand-dark),var(--brand) 60%,var(--brand-light))}
.store-hero--plain::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px;z-index:1}
.store-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.store-hero-inner{position:relative;z-index:2;max-width:820px;display:flex;flex-direction:column;align-items:center;gap:14px}
/* Fixed 104x104 box reserved up front (no CLS once the TSM logo loads);
   .skeleton (see "Skeleton / empty states" below) shimmers underneath
   until the media-fade img fades in over it. */
.store-logo-wrap{position:relative;width:104px;height:104px;border-radius:24px;overflow:hidden;flex-shrink:0}
.store-logo{width:104px;height:104px;border-radius:24px;object-fit:cover;border:3px solid rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(13,27,42,.35);background:#fff}
.store-logo-fallback{width:104px;height:104px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:38px;font-weight:800;letter-spacing:1px;backdrop-filter:blur(4px)}
.store-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.store-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand-light)}
.store-hero h1{font-size:clamp(32px,6vw,60px);font-weight:900;letter-spacing:-1.5px;color:#fff;margin:0;line-height:1.05}
.store-tagline{color:#fff;font-weight:700;font-size:16px}
.store-lede{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;max-width:600px}
.store-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:12px;background:var(--brand);color:var(--on-brand);font-weight:700;font-size:15px;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.store-cta:hover{transform:translateY(-2px)}

/* Per-store social links — sit in the branded hero, so light icons
   (distinct from the site-wide footer .socials / .soc). */
.store-socials{display:flex;gap:10px;margin-top:2px}
.store-social{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .2s,transform .2s}
.store-social:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.store-social:focus-visible{outline:2px solid #fff;outline-offset:2px}
.store-social svg{width:17px;height:17px}

/* Trust strip */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 32px;padding:20px 28px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font-size:12.5px;font-weight:600}
.trust-item::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand)}

/* Shop / grid */
.store-section{padding:clamp(48px,7vw,90px) 28px}
.store-section--neutral{background:var(--color-neutral)}
.store-section-inner{max-width:1200px;margin:0 auto}
.store-section h2{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.8px;color:#fff;margin:0 0 8px}
.store-section .sec-sub{color:rgba(255,255,255,.6);margin:0 0 34px;font-size:15px}
.product-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.product-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff;transition:transform .25s,border-color .25s,box-shadow .25s}
.product-card:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:0 18px 40px rgba(13,27,42,.5)}
.product-media{position:relative;aspect-ratio:1/1;background:rgba(255,255,255,.05);overflow:hidden}
.product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-media .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;background:rgba(255,255,255,.04)}
.product-badge{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700}
.product-body{padding:16px;display:flex;flex-direction:column;gap:6px}
.product-store{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--brand-light);font-weight:600}
.product-name{font-size:16px;font-weight:700;line-height:1.35;color:#fff;margin:0}
.product-price-row{display:flex;align-items:baseline;gap:10px}
.product-price{font-size:18px;font-weight:800;color:var(--brand-light)}
.product-compare{font-size:13px;color:rgba(255,255,255,.45);text-decoration:line-through}

/* Skeleton / empty states */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.07)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:rgba(255,255,255,.6)}
.empty-state .icon{font-size:52px;margin-bottom:16px}

/* About / story */
.story{max-width:760px;margin:0 auto;text-align:center}
.story p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.85}
.story .contact{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;margin-top:28px;color:rgba(255,255,255,.6);font-size:13.5px}

/* Store footer */
/* Footer: solid --color-neutral, navy text, every state (docs/north-star-ux-ui.md). */
.store-footer{background:var(--color-neutral);border-top:1px solid var(--navy-10);padding:28px;text-align:center;color:var(--navy-70);font-size:12.5px}

/* Responsive from the start */
@media(max-width:640px){
  .store-topbar{flex-direction:column;gap:10px;padding:12px 16px}
  .store-nav{gap:18px}
  .store-hero{padding:44px 18px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .product-body{padding:12px}
  .product-name{font-size:14px}
  .trust-strip{gap:12px 18px;padding:16px}
}
@media(max-width:400px){.product-grid{grid-template-columns:1fr}}

/* ============================================================
   STOREFRONT NAVIGATION + STORE INFO + POLICIES (Step 2)
   Data-driven; surfaces the structured Vendor address/contact
   model and platform trust claims. Graceful when fields are empty.
   ============================================================ */
.store-topbar{position:sticky;top:0}
.store-topbar.is-stuck{box-shadow:0 12px 30px rgba(13,27,42,.14)}
.store-nav a.active{color:var(--brand-dark,var(--color-gold-dark))}
html{scroll-behavior:smooth}
.store-section{scroll-margin-top:74px}

/* Policies ("Buy with confidence") */
.policies{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:900px;margin:18px auto 0}
.policy{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;text-align:left}
.policy .p-icon{font-size:22px;line-height:1}
.policy h4{font-size:14px;color:#fff;margin:10px 0 4px;font-weight:700}
.policy p{font-size:12.5px;color:rgba(255,255,255,.6);margin:0;line-height:1.6}

/* Store info (address + contact) */
.store-info{max-width:900px;margin:0 auto}
.store-info h2{text-align:center}
.store-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px}
.store-info-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;text-align:left}
.store-info-card h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--brand-light);margin:0 0 14px;font-weight:700}
.store-info-card .addr-line{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.75);font-size:14px;line-height:1.6;margin-bottom:4px}
.store-info-card .addr-line.is-empty{opacity:.6}
.store-info-card a{color:var(--brand-light);text-decoration:none}
.store-info-card a:hover{text-decoration:underline}

@media(max-width:640px){
  .store-info-grid,.policies{grid-template-columns:1fr}
}

/* ============================================================
   PRODUCT GALLERY + MEDIA LOADING STATES (Step 3)
   Multi-image gallery consumes all ProductImages (not just
   images.first); TSM derivatives via ?w=. Graceful for
   single-image and no-image. Loading shimmer + fade-in.
   ============================================================ */
.product-gallery{display:flex;flex-direction:column;gap:12px}
.gallery-main{position:relative;aspect-ratio:1/1;border-radius:var(--radius-2xl,20px);overflow:hidden;background:var(--white-05,rgba(255,255,255,.05))}
.gallery-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .3s}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.gallery-thumb{width:74px;height:74px;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.6;transition:opacity .2s,border-color .2s;background:var(--white-05,rgba(255,255,255,.05));padding:0}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb:hover{opacity:.9}
.gallery-thumb.active{border-color:var(--brand,#E8A020);opacity:1}

/* media loading skeleton (behind image) + fade-in on load */
.media-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06)}
.media-skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.4s infinite}
.media-skeleton img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.media-fade{opacity:0;transition:opacity .35s ease}
.media-fade.loaded{opacity:1}

@media(max-width:640px){.gallery-thumb{width:60px;height:60px}}

/* ============================================================
   STORE REVIEWS + TRUST + STORY STATS (Step 4)
   Data-driven social proof from SellerReview + real accountability
   score. Honest empty state when there are no reviews.
   ============================================================ */
.reviews{max-width:900px;margin:0 auto}
.reviews-summary{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:24px 0 30px;padding:16px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.stars{display:inline-flex;gap:2px;font-size:16px;line-height:1;color:rgba(255,255,255,.25)}
.stars .star.on{color:var(--brand-light)}
.summary-text{color:rgba(255,255,255,.75);font-size:14.5px}
.summary-text b{color:#fff}
.summary-link{margin-left:auto;color:var(--brand-light);font-size:13.5px;text-decoration:none;font-weight:600}
.summary-link:hover{text-decoration:underline}
.review-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:18px 20px;margin-bottom:12px;text-align:left}
.review-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.review-meta{color:rgba(255,255,255,.45);font-size:12px}
.review-card strong{color:#fff;font-size:14.5px;display:block;margin-bottom:4px}
.review-card p{color:rgba(255,255,255,.62);font-size:14px;line-height:1.65;margin:0}
.review-empty{text-align:center;padding:36px 20px;color:rgba(255,255,255,.55)}
.review-empty .icon{font-size:34px;display:block;margin-bottom:10px}
.review-empty p{margin:0;font-size:14.5px}

/* story stats */
.story-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;margin-top:30px}
.story-stats .stat{display:flex;flex-direction:column;gap:2px}
.story-stats .stat b{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.45);font-weight:600}
.story-stats .stat span{font-size:16px;font-weight:700;color:#fff}
.story-stats .stat span[style]{font-weight:800}

@media(max-width:640px){.reviews-summary{flex-direction:column;align-items:flex-start}.summary-link{margin-left:0}}

/* ============================================================
   REVIEWS 2.0 — shared review components (product + store).
   Gold-scoped stars for pages without a store brand theme,
   summary panel with distribution bars, verified badge and
   the write-a-review form. Responsive 320-1920px.
   ============================================================ */
.stars.gold .star.on,.stars.gold.on{color:var(--color-soft-gold)}
.rv-lede{color:rgba(255,255,255,.6);font-size:14.5px;margin:0 0 22px}
.rv-panel{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;padding:22px 24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;margin-bottom:26px}
.rv-score{display:flex;align-items:center;gap:14px}
.rv-avg{font-size:42px;font-weight:900;color:#fff;line-height:1}
.rv-score-meta{display:flex;flex-direction:column;gap:5px}
.rv-count{color:rgba(255,255,255,.55);font-size:13px}
.rv-dist{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.rv-dist-row{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.55)}
.rv-dist-star{width:36px;text-align:right;color:rgba(255,255,255,.7);font-weight:600;flex-shrink:0}
.rv-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.rv-bar span{display:block;height:100%;border-radius:99px;background:var(--brand,#E8A020)}
.rv-dist-n{width:26px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.rv-verified{display:inline-flex;align-items:center;gap:5px;color:var(--color-success);font-size:11.5px;font-weight:700;background:rgba(37,211,102,.1);border-radius:99px;padding:3px 9px;margin-left:8px}
.rv-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:20px;margin-bottom:26px}
.rv-form-title{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--brand-light,#F5C842);margin:0 0 14px}
.rv-picker{display:inline-flex;gap:4px;margin-bottom:14px}
.rv-picker button{background:none;border:none;font-size:28px;line-height:1;padding:2px 3px;cursor:pointer;color:rgba(255,255,255,.22);transition:color .15s,transform .15s}
.rv-picker button.on{color:var(--brand-light,#F5C842)}
.rv-picker button:hover{transform:scale(1.12)}
.rv-input,.rv-textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:14px;margin-bottom:12px;outline:none;transition:border-color .2s;box-sizing:border-box}
.rv-input:focus,.rv-textarea:focus{border-color:var(--brand,#E8A020)}
.rv-textarea{min-height:96px;resize:vertical}
.rv-submit{padding:12px 26px;border:none;border-radius:10px;background:var(--brand,#E8A020);color:var(--color-navy);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s}
.rv-submit:hover{background:var(--brand-light,#F5C842)}
.rv-submit[disabled]{opacity:.6;cursor:wait}
.rv-msg{margin:10px 0 0;font-size:13px;color:var(--color-success);min-height:1em}
.rv-msg.err{color:#FF6B6B}
.rv-login{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;border:1px solid var(--gold-20);color:var(--brand-light,#F5C842);font-size:13.5px;font-weight:700;margin-bottom:26px;transition:background .2s,color .2s;text-decoration:none}
.rv-login:hover{background:var(--brand,#E8A020);color:var(--color-navy)}
@media(max-width:640px){.rv-panel{gap:18px;padding:18px}.rv-avg{font-size:34px}.rv-form{padding:16px}}

/* ============================================================
   STOREFRONT ACCESSIBILITY (Step 5): skip link + focus states
   Reduced-motion is handled globally in prefers-reduced-motion.
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand,#E8A020);color:var(--on-brand,var(--color-navy));padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;font-size:13px;text-decoration:none}
.skip-link:focus{left:0}
.store-nav a:focus-visible,.store-brandlink:focus-visible,.store-cta:focus-visible,
.product-card:focus-visible,.gallery-thumb:focus-visible,.summary-link:focus-visible,
.store-info-card a:focus-visible{outline:2px solid var(--brand-light,var(--color-soft-gold));outline-offset:2px;border-radius:6px}
@media(max-width:640px){.skip-link{font-size:12px;padding:10px 14px}}

/* ============================================================
   STOREFRONT — LIGHT SURFACE (docs/north-star-ux-ui.md)
   The storefront body is now white; the Step 1-6 blocks above are
   dark-field defaults. Everything here is scoped to `.store` so it
   overrides only the storefront, never product-detail /
   reviews/seller_trust / base-footer, which share these class names
   and are still dark. Brand accents use --brand-dark (contrast-safe on
   white; falls back to --color-gold-dark). The hero + trust strip keep
   the per-store brand colour — that is the store's one brand surface.
   ============================================================ */

/* Trust strip (directly under the branded hero) */
.store .trust-strip{background:var(--color-neutral);border-bottom:1px solid var(--navy-10)}
.store .trust-item{color:var(--navy-70)}
.store .trust-item::before{background:var(--brand-dark,var(--color-gold-dark))}

/* Section headings + subtext */
.store .store-section h2{color:var(--color-navy)}
.store .store-section .sec-sub{color:var(--navy-50)}

/* About / story */
.store .story p{color:var(--navy-70)}
.store .story .contact{color:var(--navy-50)}
.store .story-stats .stat b{color:var(--navy-50)}
.store .story-stats .stat span{color:var(--color-navy)}

/* Search / chips / sort toolbar */
.store .store-search-input{background:var(--color-white);color:var(--color-navy);border-color:var(--navy-15)}
.store .store-search-input::placeholder{color:var(--navy-30)}
.store .store-chip{background:var(--color-white);color:var(--navy-70);border-color:var(--navy-15)}
.store .store-chip:hover{border-color:var(--brand-dark,var(--color-gold-dark));color:var(--brand-dark,var(--color-gold-dark))}
.store .store-sort-label{color:var(--navy-50)}
.store .store-sort-select{background:var(--color-white);color:var(--color-navy);border-color:var(--navy-15)}

/* Featured flag + stock note */
.store .stock-note.digital{color:var(--navy-50)}

/* Policies */
.store .policy{background:var(--color-neutral);border-color:var(--navy-10)}
.store .policy h4{color:var(--color-navy)}
.store .policy p{color:var(--navy-50)}
.store .policy-cta{color:var(--brand-dark,var(--color-gold-dark))}
.store .policy-foot{color:var(--navy-50)}
.store .policy-foot a{color:var(--brand-dark,var(--color-gold-dark))}
.store .policy-link:hover{border-color:var(--brand-dark,var(--color-gold-dark))}
.store .policy-link:focus-visible{outline-color:var(--brand-dark,var(--color-gold-dark))}

/* Store info (address + contact) */
.store .store-info-card{background:var(--color-neutral);border-color:var(--navy-10)}
.store .store-info-card h4{color:var(--brand-dark,var(--color-gold-dark))}
.store .store-info-card .addr-line{color:var(--navy-70)}
.store .store-info-card a{color:var(--brand-dark,var(--color-gold-dark))}

/* Store reviews (Step 4 + Reviews 2.0), storefront scope only */
.store .reviews-summary{background:var(--color-neutral);border-color:var(--navy-10)}
.store .stars{color:rgba(13,27,42,.5)}
.store .stars .star.on{color:var(--brand-dark,var(--color-gold-dark))}
.store .summary-text{color:var(--navy-70)}
.store .summary-text b{color:var(--color-navy)}
.store .summary-link{color:var(--brand-dark,var(--color-gold-dark))}
.store .review-card{background:var(--color-neutral);border-color:var(--navy-10)}
.store .review-meta{color:var(--navy-50)}
.store .review-card strong{color:var(--color-navy)}
.store .review-card p{color:var(--navy-70)}
.store .review-empty{color:var(--navy-50)}
.store .rv-lede{color:var(--navy-50)}
.store .rv-panel{background:var(--color-neutral);border-color:var(--navy-10)}
.store .rv-avg{color:var(--color-navy)}
.store .rv-count{color:var(--navy-50)}
.store .rv-dist-row{color:var(--navy-50)}
.store .rv-dist-star{color:var(--navy-70)}
.store .rv-bar{background:var(--navy-10)}
.store .rv-form{background:var(--color-neutral);border-color:var(--navy-10)}
.store .rv-form-title{color:var(--brand-dark,var(--color-gold-dark))}
.store .rv-picker button{color:rgba(13,27,42,.5)}
.store .rv-picker button.on{color:var(--brand-dark,var(--color-gold-dark))}
.store .rv-input,.store .rv-textarea{background:var(--color-white);color:var(--color-navy);border-color:var(--navy-15)}
.store .rv-login{color:var(--brand-dark,var(--color-gold-dark))}
.store .rv-msg.err{color:var(--color-error)}
.store .rv-msg{color:var(--color-success-dark)}
.store .rv-verified{color:var(--color-success-dark)}
/* Brand-fill buttons: text follows the per-store --on-brand (white or
   dark), not a hardcoded navy that vanishes on a dark brand colour. */
.store .rv-submit{color:var(--on-brand,var(--color-navy))}
.store .rv-login:hover{color:var(--on-brand,var(--color-navy))}

/* CTA drop shadow: lighter on a white field */
.store .store-cta{box-shadow:0 12px 30px rgba(13,27,42,.16)}

/* ============================================================
   PRODUCT DETAIL — REVIEW COMPONENTS ON A LIGHT SURFACE
   detail.html's body is white (Phase F). Its reviews use the shared
   Reviews-2.0 components, which are dark-field defaults. Scoped to
   `.rv-scope` (used only by products/detail.html — reviews/seller_trust.html
   carries its own <style> and does not use this wrapper), so this
   overrides the product-detail reviews only.
   ============================================================ */
.rv-scope .rv-lede{color:var(--navy-50)}
.rv-scope .rv-panel{background:var(--color-neutral);border-color:var(--navy-10)}
.rv-scope .rv-avg{color:var(--color-navy)}
.rv-scope .rv-count{color:var(--navy-50)}
.rv-scope .rv-dist-row{color:var(--navy-50)}
.rv-scope .rv-dist-star{color:var(--navy-70)}
.rv-scope .rv-bar{background:var(--navy-10)}
.rv-scope .rv-form{background:var(--color-neutral);border-color:var(--navy-10)}
.rv-scope .rv-form-title{color:var(--color-gold-dark)}
.rv-scope .rv-picker button{color:rgba(13,27,42,.5)}
.rv-scope .rv-picker button.on{color:var(--color-gold-dark)}
.rv-scope .rv-input,.rv-scope .rv-textarea{background:var(--color-white);color:var(--color-navy);border-color:var(--navy-15)}
.rv-scope .rv-submit{color:var(--color-navy)}
.rv-scope .rv-login{color:var(--color-gold-dark)}
.rv-scope .rv-login:hover{color:var(--color-navy)}
.rv-scope .rv-msg{color:var(--color-success-dark)}
.rv-scope .rv-verified{color:var(--color-success-dark)}
.rv-scope .stars{color:rgba(13,27,42,.5)}
.rv-scope .stars.gold .star.on,.rv-scope .stars.gold.on{color:var(--color-gold-dark)}
.rv-scope .review-card{background:var(--color-neutral);border-color:var(--navy-10)}
.rv-scope .review-meta{color:var(--navy-50)}
.rv-scope .review-card strong{color:var(--color-navy)}
.rv-scope .review-card p{color:var(--navy-70)}
.rv-scope .review-empty{color:var(--navy-50)}

/* ============================================================
   PRODUCT DETAIL — PAGE LAYOUT
   templates/products/detail.html (extends base.html, page-light).
   Folded out of that template's standalone <style>. Scoped to
   `.detail-page` on <body> so its light gallery rules don't collide
   with the dark-field `.gallery-*` defaults used elsewhere. Review
   components are handled separately under `.rv-scope` above. Buttons
   reuse the shared .btn / .btn-primary / .btn-outline.
   ============================================================ */
.detail-page .d-breadcrumb{max-width:1240px;margin:0 auto;width:100%;padding:22px 32px 0;font-size:12.5px;color:var(--navy-50)}
.detail-page .d-breadcrumb a{color:var(--navy-70);transition:color .2s}
.detail-page .d-breadcrumb a:hover{color:var(--color-gold-dark)}
.detail-page .d-wrap{max-width:1240px;margin:0 auto;width:100%;padding:24px 32px 64px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:48px;align-items:start}
.detail-page .d-wrap.flush{padding-top:0}
.detail-page .d-wrap-full{grid-column:1/-1}
.detail-page .gallery-sticky{position:sticky;top:86px}
.detail-page .product-gallery{display:flex;flex-direction:column;gap:14px}
.detail-page .gallery-main{position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--color-neutral);border:1px solid var(--navy-10);cursor:zoom-in}
.detail-page .gallery-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .3s}
.detail-page .gallery-main .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:90px}
.detail-page .gallery-main .zoom-hint{position:absolute;right:14px;bottom:14px;z-index:3;padding:7px 12px;border-radius:8px;background:var(--navy-70);font-size:11px;font-weight:600;color:var(--color-white);letter-spacing:.5px}
.detail-page .gallery-thumbs{display:flex;gap:12px;flex-wrap:wrap}
.detail-page .gallery-thumb{width:76px;height:76px;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.55;transition:opacity .2s,border-color .2s;background:var(--color-neutral);padding:0}
.detail-page .gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.detail-page .gallery-thumb:hover{opacity:.9}
.detail-page .gallery-thumb.active{border-color:var(--color-gold-dark);opacity:1}
.detail-page .d-buy-panel{position:sticky;top:86px}
.detail-page .d-type{display:inline-block;padding:5px 12px;border-radius:100px;background:var(--gold-08);border:1px solid var(--gold-20);color:var(--color-gold-dark);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.detail-page .d-store-line{display:flex;align-items:center;gap:10px;margin-bottom:12px;width:max-content}
.detail-page .d-store-logo{width:34px;height:34px;border-radius:10px;object-fit:cover;background:var(--navy-10)}
.detail-page .d-store-name{font-size:13px;font-weight:700;color:var(--navy-70)}
.detail-page .d-verified{font-size:11px;font-weight:700;color:var(--color-success-dark);display:inline-flex;align-items:center;gap:5px}
.detail-page h1.d-title{font-size:34px;font-weight:900;letter-spacing:-1px;line-height:1.15;color:var(--color-navy);margin-bottom:14px}
.detail-page .d-price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap;row-gap:6px}
.detail-page .d-price{font-size:34px;font-weight:900;color:var(--color-gold-dark)}
.detail-page .d-compare{font-size:19px;color:var(--navy-50);text-decoration:line-through}
.detail-page .d-save{font-size:12px;font-weight:700;color:var(--color-success-dark);background:rgba(37,211,102,.12);padding:4px 10px;border-radius:100px}
.detail-page .d-commission{font-size:12.5px;color:var(--navy-50);margin-bottom:22px}
.detail-page .rv-inline{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:13px;color:var(--navy-50)}
.detail-page .rv-inline:hover .rv-inline-text{color:var(--color-gold-dark)}
.detail-page .rv-inline-text{font-weight:600;transition:color .2s}
.detail-page .rv-inline .stars{color:var(--navy-50)}
.detail-page .rv-inline .stars.gold .star.on{color:var(--color-gold-dark)}
.detail-page .d-trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0;padding:16px 0;border-top:1px solid var(--navy-10);border-bottom:1px solid var(--navy-10)}
.detail-page .d-trust-item{text-align:center;padding:8px 4px}
.detail-page .d-trust-item .ti{font-size:20px;margin-bottom:6px}
.detail-page .d-trust-item .tl{font-size:10.5px;font-weight:600;color:var(--navy-70);line-height:1.4}
.detail-page .qty-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.detail-page .d-stock{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-success-dark);margin:0 0 14px}
.detail-page .d-stock::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.detail-page .d-stock.low{color:var(--color-gold-dark)}
.detail-page .qty-label{font-size:13px;font-weight:600;color:var(--navy-70)}
.detail-page .qty-select{display:flex;align-items:center;border:1px solid var(--navy-15);border-radius:10px;overflow:hidden;background:var(--color-white)}
.detail-page .qty-select button{width:44px;height:46px;border:none;background:transparent;color:var(--color-navy);font-size:20px;font-weight:700;cursor:pointer;transition:background .15s}
.detail-page .qty-select button:hover{background:var(--navy-05)}
.detail-page .qty-select input{width:52px;height:46px;border:none;background:transparent;color:var(--color-navy);font-size:16px;font-weight:700;text-align:center;outline:none}
.detail-page #buy-btn{width:100%;padding:17px;border:none;border-radius:12px;background:var(--color-gold);color:var(--color-navy);font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s;box-shadow:0 10px 30px rgba(232,160,32,.25)}
.detail-page #buy-btn:hover{background:var(--color-soft-gold);transform:translateY(-1px)}
.detail-page #buy-btn:disabled{opacity:.6;cursor:wait;transform:none}
.detail-page #add-cart-btn{width:100%;margin-top:10px}
.detail-page #buy-error{display:none;color:var(--color-error);font-size:13px;margin-top:10px;line-height:1.5}
.detail-page .d-guest-email{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--navy-15);background:var(--color-white);color:var(--color-navy);margin-bottom:12px;font-size:15px;outline:none;transition:border-color .2s}
.detail-page .d-guest-email:focus{border-color:var(--color-gold)}
.detail-page .d-secure-note{font-size:12px;color:var(--navy-50);text-align:center;margin-top:12px}
.detail-page .ship-block{background:var(--color-neutral);border:1px solid var(--navy-10);border-radius:16px;padding:20px;margin-top:22px}
.detail-page .ship-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:13.5px;color:var(--navy-70);line-height:1.5}
.detail-page .ship-row strong{color:var(--color-navy)}
.detail-page .ship-row .si{font-size:16px;flex-shrink:0}
.detail-page .ship-row a{color:var(--color-gold-dark);font-weight:600}
.detail-page .ship-row a:hover{text-decoration:underline}
.detail-page .d-store-card{display:flex;gap:16px;align-items:center;background:var(--color-neutral);border:1px solid var(--navy-10);border-radius:16px;padding:20px;margin-top:16px;transition:border-color .2s}
.detail-page .d-store-card:hover{border-color:var(--gold-20)}
.detail-page .d-store-card .sc-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--navy-10);flex-shrink:0}
.detail-page .d-store-card .sc-name{font-size:16px;font-weight:800;color:var(--color-navy);margin-bottom:3px}
.detail-page .d-store-card .sc-meta{font-size:12.5px;color:var(--navy-50)}
.detail-page .d-store-card .stars{color:var(--color-gold-dark);font-size:13px;letter-spacing:2px}
.detail-page .d-store-card .sc-go{margin-left:auto;flex-shrink:0;padding:9px 18px;border-radius:9px;border:1px solid var(--gold-20);color:var(--color-gold-dark);font-size:13px;font-weight:700;transition:background .2s,color .2s}
.detail-page .d-store-card .sc-go:hover{background:var(--color-gold);color:var(--color-navy)}
.detail-page .d-store-card .sc-msg{flex-shrink:0;font-size:13px;font-weight:700;color:var(--color-gold-dark);white-space:nowrap}
.detail-page .d-store-card .sc-msg:hover{text-decoration:underline}
.detail-page .d-section{margin-top:36px}
.detail-page .d-section h2{font-size:15px;font-weight:800;color:var(--color-navy);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.detail-page .d-desc{color:var(--navy-70);line-height:1.8;font-size:15px;white-space:pre-line}
.detail-page .d-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-page .d-spec{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--color-neutral);border:1px solid var(--navy-10);border-radius:12px;font-size:13.5px}
.detail-page .d-spec .k{color:var(--navy-50)}
.detail-page .d-spec .v{color:var(--color-navy);font-weight:600;text-align:right}
.detail-page .related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.detail-page .related-empty{color:var(--navy-50);font-size:14px}
.detail-page .mobile-buy-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--color-neutral);border-top:1px solid var(--navy-10);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;gap:14px}
.detail-page .mobile-buy-bar .mb-price{font-size:20px;font-weight:900;color:var(--color-gold-dark)}
.detail-page .mobile-buy-bar .mb-btn{flex:1;padding:14px;border:none;border-radius:12px;background:var(--color-gold);color:var(--color-navy);font-family:inherit;font-size:15px;font-weight:800;cursor:pointer}
.detail-page .mb-cart{padding:14px 18px;border-radius:12px;border:1px solid var(--gold-20);background:transparent;color:var(--color-gold-dark);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.detail-page .mb-cart:hover{background:var(--gold-08)}
.detail-page .mobile-buy-bar .mb-oos{flex:1;text-align:center;font-size:14px;font-weight:800;color:#c0392b}
.detail-page #buy-btn[disabled]{opacity:.5;cursor:not-allowed}
.detail-page .gallery-thumb:focus-visible,.detail-page .qty-select button:focus-visible,.detail-page #buy-btn:focus-visible,.detail-page #add-cart-btn:focus-visible,.detail-page .mb-btn:focus-visible,.detail-page .mb-cart:focus-visible,.detail-page #lb-close:focus-visible,.detail-page .d-guest-email:focus-visible,.detail-page .sc-go:focus-visible,.detail-page .sc-msg:focus-visible,.detail-page .d-store-line:focus-visible,.detail-page .rv-inline:focus-visible{outline:2px solid var(--color-gold-dark);outline-offset:2px;border-radius:8px}
.detail-page .gallery-thumb:focus-visible{border-color:var(--color-gold-dark);outline-offset:3px}
.detail-page .lightbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);align-items:center;justify-content:center;cursor:zoom-out}
.detail-page .lightbox.open{display:flex}
.detail-page .lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;object-fit:contain}
.detail-page .lightbox .lb-close{position:absolute;top:20px;right:24px;font-size:30px;color:var(--color-white);background:none;border:none;cursor:pointer}
@media(max-width:960px){
  .detail-page .d-wrap{grid-template-columns:1fr;gap:28px;padding:20px 16px 96px}
  .detail-page .gallery-sticky,.detail-page .d-buy-panel{position:static}
  .detail-page .d-breadcrumb{padding:16px 16px 0}
  .detail-page .d-trust-strip{grid-template-columns:repeat(2,1fr)}
  .detail-page h1.d-title{font-size:26px}
  .detail-page .mobile-buy-bar{display:flex}
}
@media(max-width:640px){.detail-page .d-specs{grid-template-columns:1fr}}

/* ============================================================
   COMMERCE THEME RECONCILIATION (Step 6)
   One product-card / store-card component set, dark by default,
   .theme-light override for light pages (browse / stores / landing).
   ============================================================ */
:root{
  --card-bg: rgba(255,255,255,.05);
  --card-border: rgba(255,255,255,.08);
  --card-hover-border: var(--brand,#E8A020);
  --card-text: #fff;
  --card-muted: rgba(255,255,255,.6);
  --card-accent: var(--brand-light,var(--color-soft-gold));
  --card-surface: rgba(255,255,255,.05);
  --card-shadow: 0 18px 40px rgba(13,27,42,.5);
}
.theme-light{
  --card-bg:#fff;
  --card-border:rgba(13,27,42,.12);
  --card-hover-border:var(--brand,#E8A020);
  --card-text:#0D1B2A;
  --card-muted:rgba(13,27,42,.55);
  --card-accent:var(--color-gold-dark);
  --card-surface:var(--color-white);
  --card-shadow:0 18px 40px rgba(13,27,42,.12);
}
.product-card{background:var(--card-bg);border-color:var(--card-border);color:var(--card-text)}
.product-card:hover{border-color:var(--card-hover-border);box-shadow:var(--card-shadow)}
.product-media{background:var(--card-surface)}
.product-media .placeholder{background:var(--card-surface)}
.product-store{color:var(--card-accent)}
.product-name{color:var(--card-text)}
.product-price{color:var(--card-accent)}
.product-compare{color:var(--card-muted)}
.product-badge{background:var(--badge-bg,var(--brand,#E8A020));color:var(--badge-text,var(--on-brand,var(--color-navy)))}
.empty-state{color:var(--card-muted)}
.empty-state h3{color:var(--card-text)}

/* shared store-card component (theme-aware; unique class names) */
.store-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);text-decoration:none;color:var(--card-text);transition:transform .25s,border-color .25s,box-shadow .25s}
.store-card:hover{transform:translateY(-5px);border-color:var(--card-hover-border);box-shadow:var(--card-shadow)}
.store-card-banner{position:relative;height:120px;overflow:hidden;background:linear-gradient(135deg,var(--brand-dark,var(--color-gold-dark)),var(--brand,#E8A020))}
.store-card-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.store-card-verified{position:absolute;top:12px;right:12px;z-index:2;padding:4px 10px;border-radius:100px;background:rgba(13,27,42,.55);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;backdrop-filter:blur(4px)}
.store-card-body{padding:20px;display:flex;flex-direction:column;gap:6px;text-align:left}
.store-card-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;border:2px solid var(--card-bg);box-shadow:0 6px 18px rgba(13,27,42,.18);background:#fff;margin-bottom:4px}
.store-card-type{font-size:10.5px;font-weight:700;color:var(--card-accent);letter-spacing:1.5px;text-transform:uppercase}
.store-card-name{font-size:18px;font-weight:800;color:var(--card-text);margin:0}
.store-card-desc{font-size:13px;color:var(--card-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.store-card-link{font-size:13px;font-weight:700;color:var(--card-accent);display:flex;align-items:center;gap:6px}

/* commerce grids usable on any page */
.commerce-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
@media(max-width:640px){.commerce-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:400px){.commerce-grid{grid-template-columns:1fr}}

/* ============================================================
   PREMIUM HOMEPAGE (Talio Square)
   Editorial commerce hero, horizontal motion carousels, curated
   discovery sections, trust + partners. Reuses product-card /
   store-card component set. Reduced motion handled globally.
   ============================================================ */

/* Scroll-reveal convention (unified): markup uses `.reveal`, home.js
   toggles `.visible`. Canonical rule lives in § "14. MOTION SYSTEM"
   (`.reveal` / `.reveal.visible` + `.reveal-delay-*`). No `.rv`/`.in`
   or `[data-reveal]`/`.in-view` variants — those have been retired. */

/* --- Homepage page shell (folded from templates/landing.html) --- */
body.page-home{background:#fff;color:#0D1B2A;overflow-x:hidden}

/* --- Fixed marketplace nav (homepage) --- */
/* Header: solid --color-neutral in every scroll state, no transparency,
   no backdrop blur (docs/north-star-ux-ui.md). A scrolled state may add a
   drop shadow only — it must not change the fill. */
/* padding:0 is explicit, not incidental — the legacy `nav{padding:12px
   16px}` mobile rule (COMPREHENSIVE MOBILE RESPONSIVE, ≤768px) otherwise
   leaks onto this element (bare-type selector still wins any property a
   class selector never declares) and silently adds ~24px to the fixed
   header's real height on mobile — taller than the hero's own mobile
   top-padding assumed, which pushed the hero eyebrow line up underneath
   the header. All spacing here is intentionally owned by `.home-nav .ni`. */
.home-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky,200);padding:0;background:var(--color-neutral);border-bottom:1px solid var(--navy-10);transition:box-shadow .3s}
.home-nav .ni{max-width:1360px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:22px}
.home-nav .nlogo img{height:36px;display:block}
.home-nav .nsearch{flex:1;max-width:560px;display:flex;background:#fff;border:1px solid rgba(13,27,42,.12);border-radius:var(--radius-lg,10px);overflow:hidden;transition:box-shadow .2s}
.home-nav .nsearch:focus-within{box-shadow:0 0 0 3px var(--gold-30,rgba(232,160,32,.3))}
.home-nav .nsearch input{flex:1;padding:11px 16px;border:none;outline:none;font-family:inherit;font-size:14px;color:var(--color-navy,#0D1B2A)}
.home-nav .nsearch input::placeholder{color:rgba(13,27,42,.32)}
.home-nav .nsearch button{padding:0 15px;background:none;border:none;cursor:pointer;color:rgba(13,27,42,.4);display:flex;align-items:center}
.home-nav .nsearch button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.home-nav .nright{display:flex;align-items:center;gap:18px;margin-left:auto}
.home-nav .nl{font-size:13px;font-weight:500;color:rgba(13,27,42,.55);transition:color .2s}
.home-nav .nl:hover{color:var(--color-navy,#0D1B2A)}
.home-nav .nb{padding:9px 20px;background:var(--color-navy,#0D1B2A);color:#fff;border-radius:var(--radius-md,8px);font-size:13px;font-weight:600;transition:background .2s,transform .2s}
.home-nav .nb:hover{background:#1a2e42}
.home-nav .nb-gold{background:var(--color-gold,#E8A020);color:var(--color-navy,#0D1B2A)}
.home-nav .nb-gold:hover{background:var(--color-soft-gold,#F5C842);color:var(--color-navy,#0D1B2A)}
nav.home-nav.is-scrolled{box-shadow:0 10px 30px rgba(13,27,42,.10)}
/* legacy hook kept for any other consumer */
nav.is-scrolled{box-shadow:0 10px 30px rgba(13,27,42,.10)}

/* Focus states on light homepage sections */
.sec-light a:focus-visible,.trust-sec a:focus-visible,.partners-sec a:focus-visible,
.home-foot a:focus-visible,.home-nav .nl:focus-visible{outline:2px solid var(--color-gold,#E8A020);outline-offset:2px;border-radius:6px}

/* --- Homepage footer (folded from templates/landing.html) --- */
.home-foot{background:var(--color-neutral)}
.home-foot .fi{max-width:1360px;margin:0 auto;padding:64px 24px 28px}
.home-foot .fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(13,27,42,.1);margin-bottom:24px}
.home-foot .flogo{height:36px;margin-bottom:12px;display:block}  /* match header logo (.home-nav .nlogo img) */
.home-foot .ftag{font-size:11.5px;font-style:italic;color:rgba(13,27,42,.38);margin-bottom:12px}
.home-foot .fcopy{font-size:11px;color:rgba(13,27,42,.28);line-height:1.9}
.home-foot .fh{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--color-gold,#E8A020);text-transform:uppercase;margin-bottom:16px}
.home-foot .fl{list-style:none;display:flex;flex-direction:column;gap:10px}
.home-foot .fl a{font-size:13px;color:rgba(13,27,42,.62);transition:color .2s}
.home-foot .fl a:hover{color:var(--color-navy,#0D1B2A)}
.home-foot .socials{display:flex;gap:8px;margin-top:4px}
.home-foot .soc{width:38px;height:38px;background:rgba(13,27,42,.06);border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(13,27,42,.38);transition:all .2s}
.home-foot .soc:hover{background:var(--color-navy,#0D1B2A);color:#fff}
.home-foot .soc svg{width:16px;height:16px}
.home-foot .fbot{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(13,27,42,.27)}
.home-foot .fbot a{color:var(--color-gold,#E8A020)}

/* Floating WhatsApp button (homepage) */
.wa{position:fixed;bottom:24px;right:24px;width:52px;height:52px;background:var(--color-success);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.35);z-index:var(--z-modal,1000);transition:transform .2s}
.wa:hover{transform:scale(1.1)}

/* --- Shared section rhythm (tightened to North Star cadence) --- */
.sec-pad{padding:clamp(60px,8vw,84px) 24px}
/* Hairline divider between stacked dark discovery sections (mockup `.row`) */
.sec-dark + .sec-dark{border-top:1px solid rgba(255,255,255,.08)}
.sec-outer{max-width:1360px;margin:0 auto}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
/* Default to navy (light sections are the dominant case per
   docs/north-star-ux-ui.md); dark surfaces re-flip it white below.
   Without this the global `h2{color:white}` rule renders section
   titles invisible on `.sec-light` / `.trust-sec` / `.partners-sec`. */
.sec-title{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-1px;line-height:1.05;margin:0;color:var(--color-navy)}
.sec-sub{font-size:16px;line-height:1.7;max-width:600px;margin:10px 0 0}
.sec-link{font-size:13px;font-weight:700;letter-spacing:.2px;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}

/* Light & dark sections */
.sec-light{background:#fff;color:#0D1B2A}
.sec-neutral{background:var(--color-neutral)}  /* light-section rhythm band; pair with .sec-light — declared after .sec-light so it wins the background */
.sec-light .sec-eyebrow{color:var(--color-gold-dark)}  /* AA on white; raw gold #E8A020 is ~2.6:1 */
.sec-light .sec-sub{color:rgba(13,27,42,.55)}
.sec-light .sec-link{color:#0D1B2A}
.sec-dark{background:#0D1B2A;color:#fff}
.sec-dark .sec-title{color:#fff}
.sec-dark .sec-eyebrow{color:var(--brand-light,var(--color-soft-gold))}
.sec-dark .sec-sub{color:rgba(255,255,255,.6)}
.sec-dark .sec-link{color:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 18% 0%,rgba(13,27,42,1) 0%,rgba(9,18,30,1) 100%);
  padding:150px 24px 90px;color:#fff;isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.hero::after{content:'';position:absolute;top:-220px;right:-160px;width:640px;height:640px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at center,rgba(232,160,32,.28),rgba(232,160,32,0) 68%);
  animation:heroLight 9s ease-in-out infinite}
@keyframes heroLight{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-28px)}}

.hero-inner{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
/* left grid cell — min-width:0 so a long unbreakable heading can't blow
   the 2-col grid out past the viewport before it collapses at 1080px */
.hero-copy{min-width:0}

.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--color-soft-gold);margin-bottom:22px}
.hero-eyebrow::before{content:'';width:34px;height:1px;background:#E8A020}
.hero h1{font-size:clamp(38px,5.6vw,72px);font-weight:900;letter-spacing:-2.5px;line-height:1.02;margin:0 0 22px}
.hero h1 em{font-style:normal;color:#E8A020}
.hero-lede{font-size:clamp(16px,1.4vw,19px);line-height:1.75;color:rgba(255,255,255,.68);max-width:560px;margin:0 0 34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;border-radius:12px;font-family:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.hero-actions .btn-primary{background:linear-gradient(135deg,#E8A020,var(--color-soft-gold));color:var(--color-navy);box-shadow:0 14px 34px rgba(232,160,32,.3)}
.hero-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(232,160,32,.42)}
.hero-actions .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.hero-actions .btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.hero-actions .btn-navy-solid{background:#0D1B2A;color:#fff;box-shadow:0 14px 34px rgba(13,27,42,.18)}
.hero-actions .btn-navy-solid:hover{transform:translateY(-2px)}

/* Hero visual: layered editorial cards with parallax depth */
.hero-visual{position:relative;perspective:1400px}
.hv-stack{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;transform:rotateX(4deg) rotateY(-3deg);transform-style:preserve-3d}
.hv-card{border-radius:22px;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);aspect-ratio:3/4;position:relative;box-shadow:0 34px 70px rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.hv-card:nth-child(2){transform:translateY(34px)}
.hv-card:nth-child(3){transform:translateY(-8px)}
.hv-card .hv-shade{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;background:linear-gradient(to top,rgba(13,27,42,.82),transparent 62%)}
.hv-card .hv-shade--fallback{background:linear-gradient(150deg,rgba(26,38,54,.4),rgba(13,27,42,.9))}
.hv-card .hv-tag{font-size:9.5px;font-weight:700;letter-spacing:2px;color:var(--color-soft-gold);text-transform:uppercase;margin-bottom:6px}
.hv-card .hv-name{font-size:15px;font-weight:700;line-height:1.2}
.hv-card .hv-price{font-size:16px;font-weight:800;color:var(--color-soft-gold);margin-top:8px}
.hv-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.35);font-size:12.5px;font-weight:600;animation:floatY 6s ease-in-out infinite}
.hv-float svg{width:18px;height:18px;color:#E8A020}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hv-float--tl{top:6%;left:-18px}
.hv-float--br{bottom:4%;right:-14px;animation-delay:1.6s}
.hero-trust{max-width:1360px;margin:78px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:center}
.hero-trust span{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:rgba(255,255,255,.62)}
.hero-trust span::before{content:'';width:6px;height:6px;border-radius:50%;background:#E8A020}

/* ============================================================
   HORIZONTAL CAROUSEL (Hot / New / Stores)
   ============================================================ */
.h-carousel{position:relative}
.hc-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.hc-viewport::-webkit-scrollbar{display:none}
.hc-track{display:flex;gap:22px;padding:6px 2px 18px}  /* viewport scrolls; the track itself is never transformed */
.hc-slide{scroll-snap-align:start;flex:0 0 auto}
.hc-slide .product-card,.hc-slide .store-card{width:min(78vw,300px)}
.hc-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px}
.hc-btn{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:inherit;font-size:20px;line-height:1;transition:background .2s,transform .2s,border-color .2s}
.hc-btn:hover{background:rgba(255,255,255,.14);border-color:var(--color-gold);transform:translateY(-2px)}
.hc-btn:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}
.hc-dots{display:flex;gap:7px;margin-right:auto}
.hc-dot{width:7px;height:7px;border-radius:100px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.22);transition:width .25s,background .25s}
.hc-dot.active{width:22px;background:var(--color-gold)}
.hc-dot:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}

/* Carousel controls on a light section (docs/north-star-ux-ui.md moves
   the motion carousels onto white). Ready for Phase B's section flip. */
.sec-light .hc-btn{border-color:var(--navy-10);background:var(--color-white);color:var(--color-navy)}
.sec-light .hc-btn:hover{background:var(--color-neutral);border-color:var(--color-gold)}
.sec-light .hc-dot{background:rgba(13,27,42,.5)}  /* carousel position dot — --navy-30 was <3:1 on white */
.sec-light .hc-dot.active{background:var(--color-gold)}

/* Product/store card elevation for carousel depth */
.hc-slide .product-card,.hc-slide .store-card{transform-style:preserve-3d;will-change:transform}
.sec-dark .hc-slide .product-card,.sec-dark .hc-slide .store-card{box-shadow:0 22px 46px rgba(0,0,0,.28)}
.hc-slide .product-card:hover,.hc-slide .store-card:hover{box-shadow:0 24px 48px -20px rgba(13,27,42,0.28)}
.sec-dark .hc-slide .product-card:hover,.sec-dark .hc-slide .store-card:hover{transform:translateY(-10px) scale(1.02)}
.hc-slide .product-card .product-media img,.hc-slide .store-card-banner img{transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.hc-slide .product-card:hover .product-media img,.hc-slide .store-card:hover .store-card-banner img{transform:scale(1.06)}

/* Store card type label as a badge */
.store-card-type{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;background:var(--card-surface);border:1px solid var(--card-border);align-self:flex-start}

/* Empty state panel */
.empty-panel{grid-column:1/-1;text-align:center;padding:70px 24px;border:1px dashed rgba(13,27,42,.5);border-radius:22px}
.empty-panel .ep-icon{font-size:44px;margin-bottom:14px}
.empty-panel h3{font-size:22px;font-weight:800;margin:0 0 8px;color:var(--color-navy)}
.empty-panel p{color:var(--navy-50);margin:0;font-size:15px}

/* ============================================================
   EDITORIAL BUYER SECTION
   ============================================================ */
.editorial{position:relative;overflow:hidden;background:var(--color-white);color:var(--color-navy)}
.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ed-copy .sec-title{margin-bottom:18px}
.ed-copy .sec-title em{font-style:normal;color:var(--color-gold-dark)}
.ed-copy>p{color:var(--navy-70);font-size:16.5px;line-height:1.8;margin:0 0 34px;max-width:520px}
.ed-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ed-item{display:flex;gap:14px;padding:18px;border-radius:16px;background:var(--color-neutral);border:1px solid var(--navy-10);transition:transform .25s,border-color .25s}
.ed-item:hover{transform:translateY(-4px);border-color:var(--color-gold)}
.ed-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E8A020,var(--color-soft-gold));color:var(--color-navy)}
.ed-icon svg{width:22px;height:22px}
.ed-item h4{font-size:15px;font-weight:700;margin:0 0 5px;color:var(--color-navy)}
.ed-item p{font-size:13px;line-height:1.6;color:var(--navy-50);margin:0}

/* ============================================================
   SHOP BY CATEGORY (editorial bento)
   ============================================================ */
/* Category tiles ride the same shared h-carousel/data-carousel component
   as Hot This Week / New This Week / Featured Stores (static/js/home.js)
   rather than a static bento grid — autoplay, pause-on-hover/focus/touch
   and prefers-reduced-motion come from that one component instead of a
   bespoke implementation. `.hc-slide .cat-tile` sizing mirrors the
   `.hc-slide .product-card,.hc-slide .store-card` rule below. */
.hc-slide .cat-tile{width:min(80vw,320px)}
.cat-tile{position:relative;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;padding:26px;min-height:340px;text-decoration:none;color:#fff;isolation:isolate;transition:transform .35s cubic-bezier(.175,.885,.32,1.275),box-shadow .35s}
.cat-tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(13,27,42,.18)}
.cat-bg{position:absolute;inset:-6px;z-index:-1;transition:transform .7s cubic-bezier(.25,.46,.45,.94)}
.cat-tile:hover .cat-bg{transform:scale(1.06)}
.cat-ov{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(13,27,42,.9) 0%,rgba(13,27,42,.1) 60%)}
.cat-body{position:relative;z-index:1}
.cat-tag{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--color-soft-gold);margin-bottom:10px}
.cat-name{font-size:clamp(18px,2vw,26px);font-weight:800;letter-spacing:-.5px;line-height:1.1;margin-bottom:8px}
.cat-note{font-size:13px;color:rgba(255,255,255,.7);max-width:300px;margin:0 0 16px;line-height:1.55}
.cat-link{font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;color:var(--color-gold)}
.cat-tile:hover .cat-link{gap:12px}
/* Category tile field: solid navy (was five off-brand multi-hue
   gradients). Navy used as discrete "punctuation" per
   docs/north-star-ux-ui.md; the .cat-ov scrim + white .cat-body text
   are unchanged. */
.cg-phy,.cg-dig,.cg-svc,.cg-sto,.cg-fash{background:var(--color-navy)}

/* ============================================================
   TRUST & SECURITY
   ============================================================ */
.trust-sec{background:var(--color-neutral);color:var(--color-navy)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-card{background:#fff;border:1px solid rgba(13,27,42,.08);border-radius:18px;padding:24px;transition:transform .28s,box-shadow .28s,border-color .28s}
.trust-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(13,27,42,.08);border-color:rgba(232,160,32,.3)}
.trust-card .t-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0D1B2A,#1a2e42);color:var(--color-soft-gold);margin-bottom:16px}
.trust-card .t-icon svg{width:22px;height:22px}
.trust-card h4{font-size:15.5px;font-weight:700;margin:0 0 6px;color:#0D1B2A}
.trust-card p{font-size:13px;line-height:1.6;color:rgba(13,27,42,.55);margin:0}

/* ============================================================
   PARTNERS & ASSOCIATIONS
   ============================================================ */
.partners-sec{background:#fff;color:#0D1B2A;border-top:1px solid rgba(13,27,42,.06)}
.part-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.part-group{background:var(--color-neutral);border:1px solid var(--navy-10);border-radius:18px;padding:24px}
.part-label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--brand,var(--color-gold-dark));margin-bottom:16px}
.part-chips{display:flex;flex-wrap:wrap;gap:9px}
.part-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:100px;background:#fff;border:1px solid rgba(13,27,42,.12);font-size:12.5px;font-weight:600;color:#0D1B2A}
.part-chip .dot{width:6px;height:6px;border-radius:50%;background:#E8A020}

/* ============================================================
   HOMEPAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .hero-inner{grid-template-columns:1fr;gap:56px}
  .hero-visual{max-width:560px;margin:0 auto}
  .hv-float--tl{left:0}
  .hv-float--br{right:0}
  .ed-grid{grid-template-columns:1fr;gap:40px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .part-groups{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .sec-head{flex-direction:column;align-items:flex-start}
  /* 152px clears the fixed .home-nav's real mobile height (~118px, two
     wrapped rows: logo+login row, then full-width search row) with a
     deliberate margin, not a bare minimum — see the .home-nav padding:0
     comment above for the root cause this compensates for. */
  .hero{padding:152px 18px 64px}
  .hero-trust{justify-content:flex-start;margin-top:56px}
  .ed-list{grid-template-columns:1fr}
  .cat-tile{min-height:220px}
  .trust-grid{grid-template-columns:1fr}
  .hc-slide .product-card,.hc-slide .store-card{width:min(70vw,260px)}
  .hc-slide .cat-tile{width:min(78vw,300px)}
}
@media (max-width: 420px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .hv-stack{grid-template-columns:1fr}
  .hv-card:nth-child(n){transform:none}
}

/* ===== Homepage fixes: hero mobile overlap, white product media, partner marquee ===== */
@media (max-width: 900px) {
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{margin-top:32px}
  .hv-float--tl{left:8px;top:-14px}
  .hv-float--br{right:8px;bottom:-14px}
}
@media (max-width: 480px) {
  .hv-float{display:none}
}

/* Homepage nav + footer responsive (folded from templates/landing.html) */
@media (max-width: 900px) {
  .home-nav .ni{flex-wrap:wrap;gap:10px;padding:11px 16px}
  .home-nav .nsearch{order:3;flex:0 0 100%}
  .home-nav .nright{margin-left:auto;gap:14px}
  .home-nav .nl:not(.nb){display:none}
  .home-foot .fg{grid-template-columns:1fr 1fr;gap:32px}
  .home-foot .fi{padding:48px 16px 24px}
  .home-foot .fbot{flex-direction:column;gap:8px;text-align:center}
}
@media (max-width: 560px) {
  .home-foot .fg{grid-template-columns:1fr}
}

.product-card.theme-light .product-media{background:#fff}
.product-card.theme-light .product-media img{object-fit:contain;background:#fff}
.store-card.theme-light .store-card-banner{background:#fff}

.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 28s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

/* ============================================================
   BROWSE / PRODUCT LISTING
   The marketplace browse page (templates/products/browse.html).
   Extends base.html (grey nav/footer chrome via partials), so it
   opts into a light body with `.page-light`. Reuses the shared
   commerce component set (.product-card / .commerce-grid /
   .empty-state / .media-*) and the `.reveal` motion convention —
   this block only carries the page-specific toolbar + filter
   sidebar + pagination layout. Token-driven, no hardcoded scale.
   ============================================================ */

/* Light body for base.html-extending pages (design-system's bare
   `body` default is dark; base.html's inline `body{background:#fff}`
   loads before this file so it would otherwise be overridden). */
body.page-light{background:var(--color-white);color:var(--color-navy)}

/* Page header band: neutral field + navy text, not a navy slab
   (docs/north-star-ux-ui.md — navy is punctuation, not background). */
.browse-head{background:var(--color-neutral);padding:var(--space-14) var(--space-10) var(--space-10)}
.browse-head-inner{max-width:1200px;margin:0 auto}
.browse-head .pg-lbl{color:var(--color-gold-dark)}
.browse-head .pg-title{font-size:var(--text-4xl);letter-spacing:-1.5px;color:var(--color-navy)}
.browse-sub{font-size:var(--text-lg);color:var(--navy-50);line-height:1.65;max-width:620px;margin-top:var(--space-3)}

.browse-body{max-width:1200px;margin:0 auto;padding:var(--space-16) var(--space-10)}

.toolbar{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}
.toolbar-count{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--navy-50)}
.toolbar-spacer{flex:1}
.search-form{display:flex;align-items:center;background:var(--color-white);border:1px solid var(--navy-10);border-radius:var(--radius-xl);padding:var(--space-1);box-shadow:0 4px 18px var(--navy-05);transition:box-shadow var(--transition-base),border-color var(--transition-base)}
.search-form:focus-within{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--gold-15)}
.search-form input{border:none;outline:none;font-family:inherit;font-size:var(--text-sm);color:var(--color-navy);padding:var(--space-2) var(--space-4);width:260px}
.search-form button{border:none;background:var(--color-navy);color:var(--color-white);border-radius:var(--radius-md);padding:var(--space-2) var(--space-5);font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:background var(--transition-base)}
.search-form button:hover{background:#1a2e42}
.sort-form select{padding:var(--space-3) var(--space-8) var(--space-3) var(--space-4);border:1px solid var(--navy-10);border-radius:var(--radius-xl);font-family:inherit;font-size:var(--text-sm);color:var(--color-navy);background:var(--color-white);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center}

.browse-wrap{display:grid;grid-template-columns:250px 1fr;gap:var(--space-8);align-items:start}
.filters{background:var(--color-neutral);border-radius:var(--radius-2xl);padding:var(--space-6);position:sticky;top:88px}
.filter-title{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-navy);letter-spacing:1px;text-transform:uppercase;margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--navy-10)}
.filter-group{margin-bottom:var(--space-5)}
.filter-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--navy-50);margin-bottom:var(--space-2);display:block}
.filter-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-2) var(--space-4);border:1px solid var(--navy-10);border-radius:var(--radius-md);background:var(--color-white);font-family:inherit;font-size:var(--text-sm);color:var(--color-navy);cursor:pointer;text-align:left;margin-bottom:var(--space-2);transition:border-color var(--transition-base),background var(--transition-base),color var(--transition-base)}
.filter-btn:hover{border-color:var(--color-gold)}
.filter-btn.active{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}
.filter-btn.active-gold{background:var(--color-gold);color:var(--color-navy);border-color:var(--color-gold);font-weight:var(--weight-bold)}
.filter-count{font-size:var(--text-xs);opacity:.6}
.clear-filters{display:block;width:100%;text-align:center;padding:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--navy-50);border-radius:var(--radius-md);transition:color var(--transition-base)}
.clear-filters:hover{color:var(--color-navy)}

.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-12);flex-wrap:wrap}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-3);border:1px solid var(--navy-10);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-navy);background:var(--color-white);transition:border-color var(--transition-base),background var(--transition-base),color var(--transition-base)}
.page-link:hover{border-color:var(--color-gold)}
.page-link.current{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}
.page-link.disabled{opacity:.4;pointer-events:none}

@media (max-width:768px){
  .browse-wrap{grid-template-columns:1fr}
  .filters{position:static;margin-bottom:var(--space-6)}
  .browse-head{padding:var(--space-10) var(--space-4) var(--space-7)}
  .browse-body{padding:var(--space-6) var(--space-4)}
  .search-form input{width:100%}
}

/* ============================================================
   STOREFRONT — SEARCH / FILTER TOOLBAR + LISTING EXTRAS
   Page-specific chrome for templates/vendors/storefront.html
   (search box, category chips, sort select, store-fact meta row,
   featured flag, stock note, policy hover). Brand-themed via the
   per-store `--brand` / `--on-brand` custom props already set on
   `body.store`. Folded out of the template's inline <style>.
   ============================================================ */
.store-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin:0 0 var(--space-8)}
.store-search{display:flex;align-items:center;gap:var(--space-2);flex:1 1 280px;max-width:100%;min-width:0}
.store-search-input{flex:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--white-15);background:var(--white-07);color:var(--color-white);font-size:var(--text-sm);font-family:inherit;outline:none;transition:border-color var(--transition-base),box-shadow var(--transition-base);min-width:0}
.store-search-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.store-search-input::placeholder{color:var(--white-45)}
.store-search-btn{padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);border:none;background:var(--brand);color:var(--on-brand);font-weight:var(--weight-bold);font-size:var(--text-sm);cursor:pointer;transition:transform var(--transition-base),box-shadow var(--transition-base)}
.store-search-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.store-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.store-chip{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--white-15);color:var(--white-70);font-size:var(--text-sm);font-weight:var(--weight-semibold);text-decoration:none;transition:border-color var(--transition-base),color var(--transition-base),background var(--transition-base);background:var(--white-03)}
.store-chip:hover{border-color:var(--brand);color:var(--brand)}
.store-chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.store-sort{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.store-sort-label{color:var(--white-55);font-size:var(--text-sm);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.5px}
.store-sort-select{padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--white-15);background:var(--color-navy);color:var(--color-white);font-size:var(--text-sm);font-family:inherit;cursor:pointer;outline:none}
.store-sort-select:focus{border-color:var(--brand)}
@media(max-width:640px){.store-search{flex:1 1 100%}.store-sort{margin-left:0;width:100%}.store-sort-select{flex:1}}
.store-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 0;color:var(--white-85);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.store-meta span{display:inline-flex;align-items:center;gap:6px;padding:0 var(--space-4)}
.store-meta span + span::before{content:'';width:4px;height:4px;border-radius:var(--radius-round);background:var(--white-45);margin-right:var(--space-4)}
.store-meta .m-ic{font-size:12px}
.store-meta a{color:var(--color-white);text-decoration:none;border-bottom:1px solid var(--white-35)}
.store-meta a:hover{border-color:var(--color-white)}
@media(max-width:520px){.store-meta{flex-direction:column;gap:var(--space-2)}.store-meta span{padding:0}.store-meta span + span::before{display:none}}
#featured .product-grid{grid-template-columns:repeat(auto-fill,minmax(264px,1fr))}
#featured .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.product-flag{position:absolute;top:12px;right:12px;z-index:2;padding:4px 11px;border-radius:var(--radius-full);background:var(--navy-70);border:1px solid var(--white-15);color:var(--color-white);font-size:11px;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;backdrop-filter:blur(4px)}
.stock-note{font-size:12px;font-weight:var(--weight-bold);letter-spacing:.2px}
.stock-note.low{color:var(--color-gold-dark)}  /* --color-warning #F39C12 is ~2.3:1 on white */
.stock-note.out{color:var(--color-error)}
.stock-note.digital{color:var(--white-55);font-weight:var(--weight-semibold)}
.policy-link{transition:border-color var(--transition-base),transform var(--transition-base)}
.policy-link:hover{border-color:var(--brand);transform:translateY(-2px)}
.policy-link:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
.policy-cta{display:inline-flex;align-items:center;gap:5px;margin-top:var(--space-3);font-size:12px;font-weight:var(--weight-bold);color:var(--brand-light)}
.policy-foot{max-width:900px;margin:var(--space-6) auto 0;text-align:center;font-size:12.5px;color:var(--white-55)}
.policy-foot a{color:var(--brand-light);text-decoration:none;border-bottom:1px solid transparent}
.policy-foot a:hover{border-bottom-color:var(--brand-light)}
.policy-foot a:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px;border-radius:4px}

/* ============================================================
   SELLER ORDERS — FULFILMENT QUEUE
   templates/orders/seller_orders.html (extends base.html, page-light).
   Folded out of that template's inline <style>; the old .ful-* badge
   palette was dark backgrounds that rendered as dark pills on the white
   page. Token-driven, light. Buttons use the shared .btn / .btn-primary
   / .btn-navy.
   ============================================================ */
.ful-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-6)}
.ful-tab{padding:7px 14px;border:1px solid var(--navy-15);border-radius:var(--radius-full);font-size:13px;font-weight:var(--weight-semibold);color:var(--navy-70);background:var(--color-white);transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base)}
.ful-tab.active,.ful-tab:hover{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}
.ful-card{background:var(--color-white);border:1px solid var(--navy-10);border-radius:var(--radius-xl);padding:22px 24px;margin-bottom:16px}
.ful-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ful-num{font-size:16px;font-weight:var(--weight-extrabold);color:var(--color-navy)}
.ful-meta{font-size:12px;color:var(--navy-50);margin-top:3px}
.ful-meta .ful-msg{font-weight:var(--weight-bold);color:var(--color-gold-dark)}
.ful-meta .ful-msg:hover{text-decoration:underline}
.ful-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:var(--weight-bold);letter-spacing:.3px;white-space:nowrap;border:1px solid transparent}
.ful-amber{background:var(--gold-08);color:var(--color-gold-dark);border-color:var(--gold-20)}
.ful-blue{background:var(--navy-05);color:var(--color-navy);border-color:var(--navy-10)}
.ful-green{background:rgba(37,211,102,.12);color:var(--color-success-dark);border-color:rgba(37,211,102,.28)}
.ful-red{background:rgba(231,76,60,.10);color:var(--color-error);border-color:rgba(231,76,60,.28)}
.ful-grey{background:var(--color-neutral);color:var(--navy-70)}
.ful-item{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--navy-05);font-size:14px}
.ful-item-title{font-weight:var(--weight-semibold);color:var(--color-navy)}
.ful-payout{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--navy-10);font-size:13.5px;color:var(--navy-70)}
.ful-payout strong{color:var(--color-navy);font-weight:var(--weight-extrabold)}
.ful-payout em{font-style:normal;color:var(--navy-50)}
.ful-ship{background:var(--color-neutral);border-radius:var(--radius-md);padding:12px 14px;margin-top:12px;font-size:13px;color:var(--color-navy)}
.ful-ship span{font-weight:var(--weight-semibold);color:var(--navy-70)}
.ful-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ful-disclaimer{font-size:12px;color:var(--navy-50);line-height:1.6;margin-top:8px}

/* ============================================================
   SELLER PRODUCTS — LISTING MANAGEMENT
   templates/products/seller_products.html + seller_product_form.html
   (extend base.html, page-light). Folded out of both templates' inline
   <style>; the old .pm-b-* status pills and the form error box used dark
   backgrounds (#1e3a2e / #3a2e1e / #3a1e1e) that rendered as dark blocks
   on the white page. Token-driven, light. Buttons use the shared
   .btn / .btn-primary / .btn-navy.
   ============================================================ */
.pm-head-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}
.pm-count{font-size:var(--text-xl);font-weight:var(--weight-extrabold);color:var(--color-navy);margin:0}
.pm-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--space-5)}
.pm-toolbar input[type=text]{flex:1;min-width:200px;padding:10px 14px;border:1px solid var(--navy-15);border-radius:var(--radius-md);font-family:inherit;font-size:14px;color:var(--color-navy);background:var(--color-white);outline:none;transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.pm-toolbar input[type=text]:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--gold-15)}
.pm-toolbar select{padding:10px 14px;border:1px solid var(--navy-15);border-radius:var(--radius-md);font-family:inherit;font-size:14px;color:var(--color-navy);background:var(--color-white);outline:none;cursor:pointer}
.pm-toolbar select:focus{border-color:var(--color-gold)}
.pm-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-6)}
.pm-chip{padding:7px 14px;border:1px solid var(--navy-15);border-radius:var(--radius-full);font-size:13px;font-weight:var(--weight-semibold);color:var(--navy-70);background:var(--color-white);transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base)}
.pm-chip.active,.pm-chip:hover{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}
.pm-table{width:100%;border-collapse:collapse;background:var(--color-white);border:1px solid var(--navy-10);border-radius:var(--radius-xl);overflow:hidden}
.pm-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--navy-50);padding:13px 16px;border-bottom:1px solid var(--navy-10);background:var(--color-neutral)}
.pm-table td{padding:14px 16px;font-size:14px;color:var(--color-navy);border-bottom:1px solid var(--navy-05);vertical-align:middle}
.pm-table tr:last-child td{border-bottom:none}
.pm-title{font-weight:var(--weight-bold);color:var(--color-navy)}
.pm-title-cell{display:inline-block;vertical-align:middle}
.pm-thumb{width:44px;height:44px;border-radius:var(--radius-md);object-fit:cover;background:var(--color-neutral);display:inline-block;vertical-align:middle;margin-right:12px}
.pm-sub{font-size:12px;color:var(--navy-50);margin-top:3px}
.pm-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:var(--weight-bold);letter-spacing:.4px;border:1px solid transparent}
.pm-b-approve{background:rgba(37,211,102,.12);color:var(--color-success-dark);border-color:rgba(37,211,102,.28)}
.pm-b-pending{background:var(--gold-08);color:var(--color-gold-dark);border-color:var(--gold-20)}
.pm-b-reject{background:rgba(231,76,60,.10);color:var(--color-error);border-color:rgba(231,76,60,.28)}
.pm-b-neutral{background:var(--color-neutral);color:var(--navy-70)}
.pm-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pm-actions form{display:inline}
.pm-btn{padding:7px 14px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:12px;font-weight:var(--weight-bold);cursor:pointer;transition:background var(--transition-base),border-color var(--transition-base)}
.pm-edit{background:var(--color-navy);color:var(--color-white)}
.pm-edit:hover{background:#1a2e42}
.pm-outline{background:var(--color-white);border:1px solid var(--navy-30);color:var(--color-navy)}
.pm-outline:hover{border-color:var(--color-navy)}
.pm-danger{background:rgba(231,76,60,.08);color:var(--color-error);border:1px solid rgba(231,76,60,.28)}
.pm-danger:hover{background:rgba(231,76,60,.16)}
.pm-empty{text-align:center;padding:var(--space-12) var(--space-6);background:var(--color-white);border:1px solid var(--navy-10);border-radius:var(--radius-xl)}
.pm-empty p{color:var(--navy-50);margin-bottom:var(--space-4)}

/* Add / edit form — widget base styling comes from base.html's
   .form-group input/select/textarea (already light, gold focus). */
.pm-form{max-width:640px}
.pm-form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pm-form-hint{color:var(--navy-50);font-weight:var(--weight-regular)}
.pm-form-note{font-size:12px;color:var(--navy-50);margin-top:12px;line-height:1.6}
.pm-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.pm-sep{border:none;border-top:1px solid var(--navy-10);margin:var(--space-6) 0}
.pm-form-actions{display:flex;gap:12px;flex-wrap:wrap}
.img-manager{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:12px}
.img-manager label{font-size:11px;color:var(--navy-50);padding:6px 8px;display:block}
.img-item{position:relative;border:1px solid var(--navy-15);border-radius:var(--radius-md);overflow:hidden;background:var(--color-neutral)}
.img-item img{width:100%;height:96px;object-fit:cover;display:block}
.img-item .order{width:100%;border:none;border-top:1px solid var(--navy-15);padding:8px;font-size:12px;text-align:center;color:var(--color-navy);outline:none}
.img-item .rm{position:absolute;top:6px;right:6px;background:var(--navy-70);color:var(--color-white);border:none;border-radius:var(--radius-sm);font-size:11px;font-weight:var(--weight-bold);padding:4px 8px;cursor:pointer}
.img-item .rm input{margin-right:4px}
@media(max-width:640px){.pm-form-grid-2{grid-template-columns:1fr}.pm-table{display:block;overflow-x:auto;white-space:nowrap}}

/* ============================================================
   CHECKOUT FLOW — CART / CHECKOUT / PAYMENT / CONFIRMATION
   templates/orders/{cart,checkout,payment,confirmation}.html
   (all extend base.html, page-light). Folded out of four
   standalone navy documents with their own <style> blocks and
   topbars. One light, token-driven set scoped to `.checkout-page`
   on <body>. Page-specific chrome only.
   ============================================================ */
.checkout-page .ck-steps{display:flex;align-items:center;gap:8px;color:var(--navy-50);font-size:12px;font-weight:var(--weight-semibold);flex-wrap:wrap;margin-bottom:var(--space-6)}
.checkout-page .ck-step{display:inline-flex;align-items:center;gap:6px}
.checkout-page .ck-dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--navy-30);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.checkout-page .ck-step.on .ck-dot{background:var(--color-gold);border-color:var(--color-gold);color:var(--color-navy)}
.checkout-page .ck-step.done .ck-dot{background:var(--gold-20);border-color:var(--color-gold);color:var(--color-gold-dark)}
.checkout-page .ck-sep{opacity:.4}

.checkout-page .ck-wrap{max-width:1180px;margin:0 auto;padding:var(--space-10) var(--space-7) 96px}
.checkout-page .ck-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.checkout-page .ck-head h1{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.8px;margin:0;color:var(--color-navy)}
.checkout-page .ck-count{color:var(--navy-50);font-size:14px}
.checkout-page .ck-back{color:var(--navy-50);font-size:13px;font-weight:var(--weight-semibold);transition:color .2s}
.checkout-page .ck-back:hover{color:var(--color-gold-dark)}
.checkout-page .ck-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}

/* Cart lines */
.checkout-page .c-lines{display:flex;flex-direction:column;gap:16px}
.checkout-page .c-line{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:18px;border:1px solid var(--navy-10);border-radius:20px;background:var(--color-white);transition:border-color .2s}
.checkout-page .c-line:hover{border-color:var(--navy-30)}
.checkout-page .c-line-img{width:96px;height:96px;border-radius:14px;object-fit:cover;background:var(--color-neutral)}
.checkout-page .c-line-img.placeholder{display:flex;align-items:center;justify-content:center;font-size:32px}
.checkout-page .c-line-info{min-width:0}
.checkout-page .c-line-store{font-size:12px;font-weight:var(--weight-semibold);color:var(--color-gold-dark);text-transform:uppercase;letter-spacing:.5px}
.checkout-page .c-line-name{font-size:16px;font-weight:var(--weight-bold);margin:4px 0 6px;color:var(--color-navy);display:block}
.checkout-page .c-line-name:hover{color:var(--color-gold-dark)}
.checkout-page .c-line-price{font-size:14px;color:var(--navy-50)}
.checkout-page .c-line-compare{text-decoration:line-through;opacity:.6;margin-left:8px}
.checkout-page .c-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.checkout-page .c-line-total{font-size:17px;font-weight:var(--weight-extrabold);white-space:nowrap;color:var(--color-navy)}
.checkout-page .c-qty{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--navy-15);border-radius:10px;padding:4px;background:var(--color-white)}
.checkout-page .c-qty .qty-minus,.checkout-page .c-qty .qty-plus{width:30px;height:30px;border:none;background:transparent;color:var(--color-navy);font-size:16px;font-weight:var(--weight-bold);cursor:pointer;border-radius:8px;transition:background .2s}
.checkout-page .c-qty .qty-minus:hover,.checkout-page .c-qty .qty-plus:hover{background:var(--navy-05)}
.checkout-page .c-qty .qty-val{width:40px;text-align:center;background:transparent;border:none;color:var(--color-navy);font-weight:var(--weight-bold);font-size:14px;font-family:inherit}
.checkout-page .c-remove{background:none;border:none;color:var(--navy-50);font-size:12px;font-weight:var(--weight-semibold);cursor:pointer;text-decoration:underline;transition:color .2s}
.checkout-page .c-remove:hover{color:var(--color-error)}

/* Order-summary aside (shared by cart + checkout) */
.checkout-page .ck-summary{border:1px solid var(--navy-10);border-radius:20px;padding:22px;background:var(--color-white);position:sticky;top:88px}
.checkout-page .ck-summary h2{font-size:16px;font-weight:var(--weight-extrabold);margin:0 0 16px;color:var(--color-navy)}
.checkout-page .ck-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--navy-50);padding:7px 0}
.checkout-page .ck-row.total{border-top:1px solid var(--navy-10);margin-top:8px;padding-top:16px;color:var(--color-navy);font-size:18px;font-weight:var(--weight-extrabold)}
.checkout-page .ck-row.total .val{color:var(--color-gold-dark)}
.checkout-page .ck-note{font-size:12px;color:var(--navy-50);margin:12px 0 0}
.checkout-page .ck-note a{color:var(--color-gold-dark);font-weight:var(--weight-semibold)}
.checkout-page .ck-cta{display:block;width:100%;text-align:center;margin-top:18px}
.checkout-page .ck-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center}
.checkout-page .ck-trust span{font-size:11px;font-weight:var(--weight-semibold);color:var(--navy-50);border:1px solid var(--navy-10);padding:6px 10px;border-radius:999px}

/* Empty state */
.checkout-page .ck-empty{text-align:center;padding:70px 20px;border:1px solid var(--navy-10);border-radius:24px;background:var(--color-white)}
.checkout-page .ck-empty .icon{font-size:46px;margin-bottom:14px}
.checkout-page .ck-empty h2{font-size:24px;font-weight:var(--weight-extrabold);margin:0 0 8px;color:var(--color-navy)}
.checkout-page .ck-empty p{color:var(--navy-50);margin:0 0 22px}

/* Checkout form cards */
.checkout-page .k-card{border:1px solid var(--navy-10);border-radius:20px;padding:22px;background:var(--color-white);margin-bottom:20px}
.checkout-page .k-card h2{font-size:16px;font-weight:var(--weight-extrabold);margin:0 0 16px;display:flex;align-items:center;gap:10px;color:var(--color-navy)}
.checkout-page .k-card p{font-size:14px;color:var(--navy-50);margin:0}
.checkout-page .k-card p strong{color:var(--color-navy)}
.checkout-page .k-num{width:24px;height:24px;border-radius:8px;background:var(--color-gold);color:var(--color-navy);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--weight-extrabold)}
.checkout-page .k-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkout-page .k-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.checkout-page .k-field.span{grid-column:1/-1}
.checkout-page .k-field label{font-size:12px;font-weight:var(--weight-semibold);color:var(--navy-50)}
.checkout-page .k-input{padding:12px 14px;border-radius:12px;border:1px solid var(--navy-15);background:var(--color-white);color:var(--color-navy);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.checkout-page .k-input:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--gold-15)}
.checkout-page .k-input::placeholder{color:var(--navy-30)}
.checkout-page .k-field.invalid .k-input{border-color:var(--color-error);box-shadow:0 0 0 3px rgba(231,76,60,.15)}
.checkout-page .k-ship{display:flex;flex-direction:column;gap:10px}
.checkout-page .k-ship-opt{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--navy-15);border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s}
.checkout-page .k-ship-opt:hover{border-color:var(--navy-30)}
.checkout-page .k-ship-opt.on{border-color:var(--color-gold);background:var(--gold-08)}
.checkout-page .k-ship-opt input{accent-color:var(--color-gold);width:16px;height:16px}
.checkout-page .k-ship-provider{flex:1;min-width:0}
.checkout-page .k-ship-name{font-weight:var(--weight-bold);font-size:14px;color:var(--color-navy)}
.checkout-page .k-ship-meta{font-size:12px;color:var(--navy-50)}
.checkout-page .k-ship-price{font-weight:var(--weight-extrabold);color:var(--color-gold-dark);white-space:nowrap}
.checkout-page .k-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.checkout-page .k-trust span{font-size:11px;font-weight:var(--weight-semibold);color:var(--navy-50);border:1px solid var(--navy-10);padding:6px 9px;border-radius:999px}

/* Checkout summary items */
.checkout-page .k-items{display:flex;flex-direction:column;gap:14px;margin-bottom:6px}
.checkout-page .k-item{display:flex;gap:12px;align-items:center}
.checkout-page .k-item img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--color-neutral)}
.checkout-page .k-item-ph{width:52px;height:52px;border-radius:10px;background:var(--color-neutral);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.checkout-page .k-item-info{flex:1;min-width:0}
.checkout-page .k-item-name{font-size:13px;font-weight:var(--weight-bold);color:var(--color-navy);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checkout-page .k-item-name:hover{color:var(--color-gold-dark)}
.checkout-page .k-item-meta{font-size:12px;color:var(--navy-50)}
.checkout-page .k-item-total{font-weight:var(--weight-extrabold);font-size:14px;white-space:nowrap;color:var(--color-navy)}
.checkout-page .k-summary-count{color:var(--navy-50);font-weight:var(--weight-semibold);font-size:13px}

/* Inline error + submit */
.checkout-page .k-err{display:none;margin-top:14px;padding:12px;border-radius:12px;background:rgba(231,76,60,.10);border:1px solid rgba(231,76,60,.35);color:var(--color-error);font-size:13px;font-weight:var(--weight-semibold)}
.checkout-page .k-err.show{display:block}
.checkout-page .k-submit{display:block;width:100%;text-align:center;padding:15px;border-radius:14px;border:none;background:var(--color-gold);color:var(--color-navy);font-weight:var(--weight-extrabold);font-size:15px;cursor:pointer;margin-top:18px;font-family:inherit;transition:transform .2s,box-shadow .2s}
.checkout-page .k-submit:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.checkout-page .k-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.checkout-page .k-spin,.checkout-page .c-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--navy-15);border-top-color:var(--color-navy);border-radius:50%;animation:ckspin .6s linear infinite;vertical-align:-2px}
@keyframes ckspin{to{transform:rotate(360deg)}}

/* Sticky mobile bar */
.checkout-page .k-mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--color-neutral);border-top:1px solid var(--navy-10);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;gap:14px}
.checkout-page .k-mob-bar .km-total{font-size:17px;font-weight:var(--weight-extrabold);color:var(--color-navy);white-space:nowrap}
.checkout-page .k-mob-bar .km-total b{color:var(--color-gold-dark);font-size:19px}
.checkout-page .k-mob-bar .k-submit{flex:1;margin-top:0;padding:14px}

/* Payment + confirmation centred pages */
.checkout-page .ck-centered{max-width:560px;margin:0 auto;padding:64px 24px 96px;text-align:center}
.checkout-page .ck-centered h1{font-size:var(--text-4xl);margin:0 0 var(--space-4);color:var(--color-navy)}
.checkout-page .ck-order-num{color:var(--color-gold-dark);font-size:var(--text-2xl);font-weight:var(--weight-extrabold);margin:0 0 var(--space-6)}
.checkout-page .ck-badge{display:inline-block;padding:var(--space-3) var(--space-6);background:var(--gold-08);border:1px solid var(--gold-20);border-radius:var(--radius-full);color:var(--color-gold-dark);font-weight:var(--weight-bold);margin-bottom:var(--space-6)}
.checkout-page .ck-centered .lede{color:var(--navy-70);line-height:1.7;font-size:15px}
.checkout-page .ck-status{margin-top:var(--space-8);padding:var(--space-4);border-radius:var(--radius-lg);font-weight:var(--weight-bold)}
.checkout-page .ck-status.paying{background:var(--gold-08);border:1px solid var(--gold-20);color:var(--color-gold-dark)}
.checkout-page .ck-status.done{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);color:var(--color-success-dark)}
.checkout-page .ck-status.err{background:rgba(231,76,60,.10);border:1px solid rgba(231,76,60,.35);color:var(--color-error)}
.checkout-page .ck-centered .ck-actions{margin-top:var(--space-8)}

@media(max-width:860px){
  .checkout-page .ck-grid{grid-template-columns:minmax(0,1fr)}
  .checkout-page .ck-summary{position:static}
  .checkout-page .k-mob-bar{display:flex}
  .checkout-page .ck-wrap{padding:24px 16px 120px}
}
@media(max-width:520px){
  .checkout-page .k-grid2{grid-template-columns:1fr}
  .checkout-page .ck-steps{display:none}
  .checkout-page .c-line{grid-template-columns:72px 1fr;grid-template-areas:"img info" "img right"}
  .checkout-page .c-line-img{width:72px;height:72px}
  .checkout-page .c-line-info{grid-area:info}
  .checkout-page .c-line-right{grid-area:right;align-items:flex-start}
}

/* ============================================================
   RESOURCES + ARTICLE DETAIL
   templates/core/resources.html + templates/core/article_detail.html
   (extend base.html, page-light). Folded out of resources.html's
   <style> block and both templates' inline style= attributes.
   Scoped to `.resources-page` on <body>. Token-driven.
   ============================================================ */
.resources-page .res-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;position:sticky;top:64px;z-index:50;background:var(--color-white);padding:12px 0}
.resources-page .res-tab{padding:10px 22px;border:1px solid var(--navy-15);border-radius:var(--radius-full);font-size:13px;font-weight:var(--weight-semibold);color:var(--navy-70);background:var(--color-white);transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base)}
.resources-page .res-tab:hover,.resources-page .res-tab.active{background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy)}
.resources-page .cat-section{margin-bottom:64px;scroll-margin-top:140px}
.resources-page .cat-header{display:flex;align-items:baseline;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--navy-10)}
.resources-page .cat-header h2{font-size:26px;font-weight:var(--weight-extrabold);color:var(--color-navy)}
.resources-page .cat-header .cat-count{font-size:13px;color:var(--navy-50);font-weight:var(--weight-semibold)}
.resources-page .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.resources-page .art-card{background:var(--color-white);border:1px solid var(--navy-10);border-left:4px solid var(--color-gold);border-radius:14px;padding:26px 22px;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.resources-page .art-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px var(--navy-10)}
.resources-page .art-card.hidden{display:none}
.resources-page .art-title{font-size:16px;font-weight:var(--weight-bold);color:var(--color-navy);margin-bottom:10px;line-height:1.35}
.resources-page .art-desc{font-size:13px;color:var(--navy-50);line-height:1.6;flex:1;margin-bottom:16px}
.resources-page .art-link{font-size:12.5px;font-weight:var(--weight-bold);color:var(--color-navy);display:flex;align-items:center;gap:5px;margin-top:auto}
.resources-page .art-link:hover{color:var(--color-gold-dark)}
.resources-page .art-soon{font-size:11px;font-weight:var(--weight-bold);letter-spacing:1px;text-transform:uppercase;color:var(--navy-50);margin-top:auto}
.resources-page .art-count{font-size:13px;color:var(--navy-50);margin-bottom:20px}
.resources-page .search-box{display:flex;background:var(--color-white);border:1px solid var(--navy-15);border-radius:10px;overflow:hidden;margin-bottom:32px;max-width:480px}
.resources-page .search-box input{flex:1;padding:12px 18px;border:none;outline:none;font-family:inherit;font-size:14px;color:var(--color-navy);background:transparent}
.resources-page .search-box button{padding:0 18px;background:var(--color-navy);color:var(--color-white);border:none;cursor:pointer;font-size:14px;font-weight:var(--weight-semibold);font-family:inherit}
.resources-page .faq-section{max-width:760px;margin:0 auto}
.resources-page .faq-item{border:1px solid var(--navy-10);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--color-white)}
.resources-page .faq-q{width:100%;padding:20px 24px;font-family:inherit;font-size:15px;font-weight:var(--weight-semibold);color:var(--color-navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;text-align:left;transition:background var(--transition-base);gap:16px}
.resources-page .faq-q:hover{background:var(--color-neutral)}
.resources-page .faq-icon{font-size:20px;color:var(--color-gold-dark);flex-shrink:0;transition:transform .25s;font-weight:300}
.resources-page .faq-icon.open{transform:rotate(45deg)}
.resources-page .faq-a{padding:0 24px 20px;font-size:14px;color:var(--navy-50);line-height:1.7;display:none}
.resources-page .faq-a.open{display:block}
.resources-page .res-divider{border:none;border-top:1px solid var(--navy-10);margin:56px 0}
.resources-page .res-center{text-align:center}
.resources-page .article-body{font-size:16px;line-height:1.8;color:var(--navy-70);max-width:760px}
.resources-page .article-body h2,.resources-page .article-body h3{color:var(--color-navy)}
.resources-page .article-crumb{max-width:760px;font-size:12.5px;color:var(--navy-50)}
.resources-page .article-crumb a{color:var(--navy-70)}
.resources-page .article-crumb a:hover{color:var(--color-gold-dark)}
.resources-page .article-related{display:grid;gap:12px;margin-top:16px}
.resources-page .article-related a{color:var(--color-navy);font-weight:var(--weight-semibold);padding:14px 0;border-bottom:1px solid var(--navy-10);display:block}
.resources-page .article-related a:hover{color:var(--color-gold-dark)}
@media(max-width:768px){.resources-page .art-grid{grid-template-columns:1fr}.resources-page .res-tabs{gap:8px;top:0}}
.resources-page h2.section-title.res-center{margin-bottom:40px}

/* ============================================================
   B2BLNGE — GATE + FEED
   templates/b2blnge.html, templates/messaging/b2blnge.html,
   templates/messaging/b2blnge_feed.html (extend base.html,
   page-light). Folded out of three standalone navy documents.
   Scoped to `.b2b-page` on <body>. Token-driven; the single
   "what awaits inside" panel keeps a navy fill as deliberate
   punctuation (docs/north-star-ux-ui.md).
   ============================================================ */
.b2b-page .b2b-gate{max-width:560px;margin:0 auto;text-align:center;padding:64px 20px}
.b2b-page .b2b-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gold-08);border:1px solid var(--gold-20);border-radius:var(--radius-full);padding:9px 22px;margin-bottom:32px;font-size:11px;font-weight:var(--weight-bold);letter-spacing:2px;color:var(--color-gold-dark);text-transform:uppercase}
.b2b-page .b2b-lock{font-size:48px;margin-bottom:24px}
.b2b-page .b2b-h2{font-size:28px;font-weight:var(--weight-extrabold);color:var(--color-navy);margin-bottom:12px}
.b2b-page .b2b-p{font-size:15px;color:var(--navy-50);line-height:1.65;margin-bottom:8px}
.b2b-page .b2b-p.tight{font-size:13px;margin-bottom:32px}
.b2b-page .b2b-form{background:var(--color-neutral);border-radius:16px;padding:32px;margin-top:32px;text-align:left}
.b2b-page .b2b-form .btn{width:100%}
.b2b-page .b2b-note{font-size:13px;color:var(--navy-50);text-align:center;margin-top:8px}
.b2b-page .b2b-note a{color:var(--color-gold-dark);font-weight:var(--weight-semibold)}

/* Locked card variant (messaging gate) */
.b2b-page .b2b-locked-card{background:var(--color-white);border:1px solid var(--navy-10);border-radius:24px;padding:56px 40px;margin:0 auto 32px;max-width:640px;text-align:center}
.b2b-page .b2b-locked-icon{font-size:60px;margin-bottom:22px}
.b2b-page .b2b-locked-card h2{font-size:24px;font-weight:var(--weight-extrabold);color:var(--color-gold-dark);margin-bottom:12px}
.b2b-page .b2b-locked-card p{color:var(--navy-50);line-height:1.8;margin-bottom:22px}
.b2b-page .b2b-member-count{font-size:14px;color:var(--navy-30)}
.b2b-page .b2b-criteria{text-align:left;max-width:500px;margin:24px auto 0}
.b2b-page .b2b-criteria h3{color:var(--color-gold-dark);font-size:14px;text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}
.b2b-page .b2b-criteria ul{list-style:none;padding:0}
.b2b-page .b2b-criteria li{color:var(--navy-70);padding:8px 0;font-size:14px}
.b2b-page .b2b-criteria li::before{content:'\2713 ';color:var(--color-success-dark);font-weight:var(--weight-bold)}

/* Benefits panel — deliberate navy punctuation */
.b2b-page .b2b-benefits{background:var(--color-navy);border-radius:20px;padding:48px;margin:48px auto 0;max-width:900px}
.b2b-page .b2b-benefits .gold-lbl{text-align:center;margin-bottom:20px}
.b2b-page .b2b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.b2b-page .b2b-benefit{background:var(--white-07);border-radius:12px;padding:24px}
.b2b-page .b2b-benefit .bi{font-size:24px;margin-bottom:12px}
.b2b-page .b2b-benefit h4{font-size:15px;font-weight:var(--weight-bold);color:var(--color-white);margin-bottom:8px}
.b2b-page .b2b-benefit p{font-size:13px;color:var(--white-55);line-height:1.55}

/* Feed */
.b2b-page .b2b-feed{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:240px 1fr;gap:0;align-items:start}
.b2b-page .b2b-sidebar{background:var(--color-neutral);border:1px solid var(--navy-10);border-radius:16px;padding:24px}
.b2b-page .b2b-sidebar h3{font-size:14px;color:var(--color-gold-dark);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}
.b2b-page .b2b-sidebar .store{color:var(--navy-50);font-size:12px;margin-bottom:24px}
.b2b-page .b2b-sidebar a{color:var(--navy-70);font-size:13px;font-weight:var(--weight-semibold)}
.b2b-page .b2b-sidebar a:hover{color:var(--color-gold-dark)}
.b2b-page .b2b-main{padding:0 0 0 40px;max-width:720px}
.b2b-page .b2b-main h1{font-size:28px;font-weight:var(--weight-extrabold);color:var(--color-navy);margin-bottom:24px}
.b2b-page .b2b-postform{margin-bottom:32px}
.b2b-page .b2b-post-card{background:var(--color-white);border:1px solid var(--navy-10);border-radius:14px;padding:20px;margin-bottom:16px}
.b2b-page .b2b-post-card .author{font-weight:var(--weight-bold);color:var(--color-gold-dark);font-size:14px;margin-bottom:8px}
.b2b-page .b2b-post-card .body{color:var(--navy-70);line-height:1.7;font-size:14px}
.b2b-page .b2b-post-card .time{color:var(--navy-30);font-size:11px;margin-top:8px}
.b2b-page .b2b-empty{color:var(--navy-50)}
.b2b-page .b2b-rules{color:var(--navy-50);font-size:11px;margin-top:40px;line-height:1.8}
@media(max-width:768px){
  .b2b-page .b2b-grid{grid-template-columns:1fr}
  .b2b-page .b2b-benefits{padding:32px 20px}
  .b2b-page .b2b-feed{grid-template-columns:1fr}
  .b2b-page .b2b-main{padding:24px 0 0}
}

/* ============================================================
   AUTH — LOGIN
   templates/accounts/login.html (extends base.html, page-light).
   Folded out of that template's inline style= attributes. Scoped
   to `.auth-page` on <body>. Reuses .form-group / .btn / .msg-error.
   ============================================================ */
.auth-page .auth-head{max-width:480px;margin:0 auto;text-align:center;padding:56px 24px 8px}
.auth-page .auth-head .pg-lbl{color:var(--color-gold-dark)}
.auth-page .auth-head h1{font-size:36px;font-weight:900;letter-spacing:-1px;color:var(--color-navy);margin-top:12px}
.auth-page .auth-shell{max-width:480px;margin:0 auto;padding:24px 24px 72px}
.auth-page .auth-card{background:var(--color-white);border:1px solid var(--navy-10);border-radius:16px;padding:32px 28px}
.auth-page .auth-sep{border:none;border-top:1px solid var(--navy-10);margin:22px 0}
.auth-page .auth-alt{text-align:center;font-size:13px;color:var(--navy-50);margin-top:10px}
.auth-page .auth-alt:first-of-type{margin-top:0}
.auth-page .auth-alt a{color:var(--color-gold-dark);font-weight:var(--weight-semibold)}
.auth-page .auth-alt a.muted{color:var(--navy-50);font-weight:var(--weight-regular)}

/* ============================================================
   MESSAGES — BUYER <-> SELLER INBOX
   templates/messaging/inbox.html, conversation.html, compose.html
   (extend base.html, page-light). Scoped to `.msg-page` on <body>.
   Distinct from the B2BLNGE `.b2b-*` feed. Reuses .btn / .btn-primary
   / .form-group typography only.
   ============================================================ */
.msg-page .msg-wrap{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.msg-page .msg-wrap-narrow{max-width:560px}
.msg-page .msg-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.msg-page .msg-head h1{font-size:28px;font-weight:var(--weight-extrabold);letter-spacing:-.5px;color:var(--color-navy);margin:0}
.msg-page .msg-back{font-size:13px;font-weight:var(--weight-semibold);color:var(--color-gold-dark)}
.msg-page .msg-back:hover{text-decoration:underline}
.msg-page .msg-unread-pill{font-size:11px;font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--color-navy);background:var(--gold-20);border:1px solid var(--gold-30);border-radius:999px;padding:4px 10px}

.msg-page .msg-list{list-style:none;margin:0;padding:0;border:1px solid var(--navy-10);border-radius:16px;overflow:hidden}
.msg-page .msg-row + .msg-row{border-top:1px solid var(--navy-10)}
.msg-page .msg-row a{display:block;padding:16px 18px;transition:background .15s}
.msg-page .msg-row a:hover{background:var(--navy-05)}
.msg-page .msg-row.is-unread a{background:var(--gold-08)}
.msg-page .msg-row-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.msg-page .msg-party{font-weight:var(--weight-bold);color:var(--color-navy);font-size:14px}
.msg-page .msg-role{font-size:10px;font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.6px;color:var(--navy-50);border:1px solid var(--navy-15);border-radius:999px;padding:2px 8px}
.msg-page .msg-dot{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--color-gold);color:var(--color-navy);font-size:11px;font-weight:var(--weight-extrabold);display:inline-flex;align-items:center;justify-content:center}
.msg-page .msg-time{margin-left:auto;font-size:11px;color:var(--navy-30)}
.msg-page .msg-subject{display:block;font-size:13px;font-weight:var(--weight-semibold);color:var(--navy-70)}
.msg-page .msg-preview{display:block;font-size:12.5px;color:var(--navy-50);margin-top:3px;line-height:1.5}

.msg-page .msg-thread-head{margin-bottom:20px}
.msg-page .msg-thread-head h1{font-size:22px;font-weight:var(--weight-extrabold);color:var(--color-navy);margin:0 0 4px}
.msg-page .msg-with{font-size:13px;color:var(--navy-50);margin:0}

.msg-page .msg-flash{margin-bottom:16px}
.msg-page .msg-flash p{font-size:13px;color:var(--navy-70);background:var(--navy-05);border:1px solid var(--navy-10);border-radius:10px;padding:10px 14px;margin:0 0 8px}
.msg-page .msg-flash p.is-error{color:#8a1c1c;background:#fdecec;border-color:#f5c6c6}

.msg-page .msg-bubbles{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.msg-page .msg-bubble{max-width:78%;background:var(--color-white);border:1px solid var(--navy-10);border-radius:14px;padding:12px 15px}
.msg-page .msg-bubble.is-mine{align-self:flex-end;background:var(--gold-08);border-color:var(--gold-20)}
.msg-page .msg-bubble-body{font-size:14px;color:var(--navy-90);line-height:1.6}
.msg-page .msg-bubble-meta{font-size:11px;color:var(--navy-30);margin-top:6px}
.msg-page .msg-bubble-empty{align-self:center;color:var(--navy-50);font-size:13px;padding:24px 0}

.msg-page .msg-reply{display:flex;flex-direction:column;gap:8px}
.msg-page .msg-reply-label{font-size:12px;font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--navy-50)}
.msg-page .msg-reply input,.msg-page .msg-reply textarea{width:100%;border:1px solid var(--navy-15);border-radius:10px;padding:11px 13px;font:inherit;font-size:14px;color:var(--color-navy);background:var(--color-white);resize:vertical}
.msg-page .msg-reply input:focus,.msg-page .msg-reply textarea:focus{outline:2px solid var(--color-gold);outline-offset:1px;border-color:var(--color-gold)}
.msg-page .msg-reply .btn{align-self:flex-start;margin-top:4px}

.msg-page .msg-empty{text-align:center;padding:56px 20px;border:1px dashed var(--navy-15);border-radius:18px}
.msg-page .msg-empty-ic{font-size:38px;margin-bottom:12px}
.msg-page .msg-empty h2{font-size:19px;font-weight:var(--weight-extrabold);color:var(--color-navy);margin:0 0 6px}
.msg-page .msg-empty p{font-size:13px;color:var(--navy-50);margin:0 0 18px}
@media(max-width:640px){
  .msg-page .msg-wrap{padding:28px 16px 64px}
  .msg-page .msg-bubble{max-width:90%}
}