/* ============================================================
   CLASSIC THEME — modern e-commerce storefront design system.
   Same class surface as editorial/theme.css (so shared header/
   footer/drawer/component classes stay styled), restyled for a
   clean modern look. Adds Classic-only --radius/--shadow tokens.
   References --theme-* (accent) from theme-generator.php.
   ============================================================ */
    /* ── Classic design system ── */
    :root {
      --font-display: 'Inter', system-ui, sans-serif;
      --paper:        #f7f8fa;
      --paper-2:      #ffffff;
      --ink:          #111827;
      --ink-2:        #374151;
      --ink-soft:     #6b7280;
      --rule:         #e5e7eb;
      --rule-soft:    #f1f3f5;
      --noise:        none;
      /* Page backdrop — flat by design. Clean/minimal IS the identity;
         no-op token keeps the contract uniform across themes. */
      --page-bg:      var(--paper);
      /* Classic-only */
      --radius:       12px;
      --radius-sm:    8px;
      --shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md:    0 4px 12px rgba(0,0,0,.10);
    }
    html.dark {
      --paper:        #0f172a;
      --paper-2:      #1e293b;
      --ink:          #f1f5f9;
      --ink-2:        #cbd5e1;
      --ink-soft:     #94a3b8;
      --rule:         #334155;
      --rule-soft:    #1e293b;
      --shadow:       0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
      --shadow-md:    0 4px 12px rgba(0,0,0,.45);
      --page-bg:      var(--paper);
    }

    body { background: var(--paper); color: var(--ink); }

    /* Display headlines — clean Inter, no tightening */
    .font-display, h1.display, h2.display, h3.display {
      font-family: 'Inter', system-ui, sans-serif;
      letter-spacing: normal;
    }
    .display-italic {
      font-style: normal;
    }
    .text-gradient-theme {
      background: none;
      -webkit-text-fill-color: currentColor;
      color: var(--theme-600);
    }

    /* Eyebrow label */
    .ed-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-soft);
    }

    /* Section eyebrow — simple label with leading line */
    .section-eyebrow {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: 'Inter', sans-serif;
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--ink-soft);
      margin-bottom: 0.7rem;
    }
    .section-eyebrow::before {
      content: ''; width: 1.75rem; height: 1px;
      background: var(--ink-soft); opacity: 0.6; flex-shrink: 0;
    }

    /* View-all arrow link */
    .btn-view-all {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem; font-weight: 600;
      letter-spacing: normal;
      white-space: nowrap; flex-shrink: 0;
      color: var(--theme-600);
      text-decoration: none;
      transition: gap 0.18s ease, color 0.18s ease;
    }
    .btn-view-all svg { transition: transform 0.2s ease; }
    .btn-view-all:hover { gap: 0.75rem; color: var(--theme-700); }
    [dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

    .ed-rule { background-color: var(--rule); }
    .ed-rule-soft { background-color: var(--rule-soft); }

    /* Grain overlay disabled in Classic (--noise: none) */
    .ed-grain::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: var(--noise);
    }

    /* Number ornament — plain muted (no italic flourish) */
    .ed-folio {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-weight: 500;
      color: var(--ink-soft);
    }

    /* Header search — soft filled field */
    .ed-search {
      background: var(--paper-2);
      border: 1px solid var(--rule);
      border-radius: var(--radius-sm);
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .ed-search:focus-within { border-color: var(--theme-500); box-shadow: 0 0 0 3px rgba(0,0,0,.03); }

    /* Text link with arrow */
    .ed-link-arrow {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem; font-weight: 600;
      color: var(--theme-600); text-decoration: none;
      transition: gap 0.18s ease, color 0.18s ease;
    }
    .ed-link-arrow:hover { gap: 0.7rem; color: var(--theme-700); }
    html.dark .ed-link-arrow:hover { color: var(--theme-300); }

    /* Primary CTA — solid accent, rounded */
    .ed-btn-primary {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 0.7rem 1.4rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem; font-weight: 600;
      letter-spacing: normal;
      color: #ffffff;
      background: var(--theme-600);
      border-radius: var(--radius-sm);
      border: 1px solid var(--theme-600);
      box-shadow: var(--shadow);
      transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .ed-btn-primary:hover {
      background: var(--theme-700); border-color: var(--theme-700);
      box-shadow: var(--shadow-md); transform: translateY(-1px);
    }
    html.dark .ed-btn-primary { color: #ffffff; }
    html.dark .ed-btn-primary:hover { color: #ffffff; }

    .ed-btn-secondary {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 0.68rem 1.35rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem; font-weight: 600;
      color: var(--ink);
      background: var(--paper-2);
      border-radius: var(--radius-sm);
      border: 1px solid var(--rule);
      transition: background 0.18s ease, border-color 0.18s ease;
    }
    .ed-btn-secondary:hover { background: var(--paper); border-color: var(--ink-soft); }

    /* Shared CTA — solid accent */
    .ed-plan-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
      padding: 0.7rem 1.4rem; border-radius: var(--radius-sm);
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem; font-weight: 600;
      background: var(--theme-600); color: #ffffff;
      border: 1px solid var(--theme-600);
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
      text-decoration: none;
    }
    .ed-plan-cta:hover { background: var(--theme-700); border-color: var(--theme-700); transform: translateY(-1px); }
    html.dark .ed-plan-cta { color: #ffffff; }
    html.dark .ed-plan-cta:hover { color: #ffffff; }

    /* Plan / dossier cards — white, rounded, elevated */
    .ed-plan {
      background: var(--paper-2);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .ed-plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

    .ed-plan-featured {
      position: relative;
      background: var(--theme-600); color: #ffffff;
      border: 1px solid var(--theme-600);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .ed-plan-featured:hover { transform: translateY(-2px); }
    html.dark .ed-plan-featured { background: var(--theme-600); color: #ffffff; border-color: var(--theme-600); }
    .ed-plan-hairline { border-color: var(--rule); }
    .ed-plan-featured .ed-plan-hairline { border-color: rgba(255,255,255,0.22); }
    html.dark .ed-plan-featured .ed-plan-hairline { border-color: rgba(255,255,255,0.22); }
    .ed-plan-featured .ed-plan-cta { background: #ffffff; color: var(--theme-700); border-color: #ffffff; }
    .ed-plan-featured .ed-plan-cta:hover { background: rgba(255,255,255,0.9); color: var(--theme-700); border-color: #ffffff; }
    html.dark .ed-plan-featured .ed-plan-cta { background: #ffffff; color: var(--theme-700); border-color: #ffffff; }
    html.dark .ed-plan-featured button.ed-plan-cta { color: var(--theme-700); }

    /* Shop card — white, rounded, elevated */
    .shop-card {
      background: var(--paper-2);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .shop-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

    /* Header status strip */
    .ed-status {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-soft);
    }

    /* Drawer typography */
    .drawer-section-label {
      display: flex; align-items: center; gap: 0.6rem;
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--ink-soft);
      padding: 1.1rem 1.5rem 0.4rem;
    }
    .drawer-section-label::after {
      content: ''; flex: 1; height: 1px; background: var(--rule);
    }
    .drawer-nav-row {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.65rem 1.5rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.92rem; font-weight: 500;
      color: var(--ink-2);
      transition: background 0.15s ease, color 0.15s ease;
      text-decoration: none;
    }
    .drawer-nav-row:hover { background: var(--paper); color: var(--ink); }
    .drawer-logout, .drawer-login {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      margin: 1rem 1.5rem 1.25rem;
      padding: 0.85rem 1rem;
      border-radius: var(--radius-sm);
      font-family: 'Inter', sans-serif;
      font-size: 0.86rem; font-weight: 600;
      text-decoration: none;
      transition: background 0.18s ease;
    }
    .drawer-logout { color: #dc2626; border: 1px solid rgba(220,38,38,0.25); }
    .drawer-logout:hover { background: rgba(220,38,38,0.06); }
    .drawer-login { color: #ffffff; background: var(--theme-600); }
    .drawer-login:hover { background: var(--theme-700); }
    html.dark .drawer-logout { color: #f87171; border-color: rgba(248,113,113,0.20); }

    /* Mobile glass header */
    .mobile-glass-header {
      background: rgba(247,248,250,0.85);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border-bottom: 1px solid var(--rule);
    }
    html.dark .mobile-glass-header {
      background: rgba(15,23,42,0.80);
    }

    /* Avatar ring */
    .ed-avatar-ring {
      box-shadow: 0 0 0 1px var(--paper-2), 0 0 0 2px rgba(var(--theme-500-rgb), 0.55);
    }

    /* Hide Alpine cloak */
    [x-cloak] { display: none !important; }

    /* Dropdown */
    .ed-dropdown {
      background: var(--paper-2);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    html.dark .ed-dropdown { background: var(--paper-2); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6); }

    .ed-dropdown-item {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.7rem 1rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem; font-weight: 500;
      color: var(--ink-2);
      text-decoration: none;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .ed-dropdown-item:hover { background: var(--paper); color: var(--ink); }
    html.dark .ed-dropdown-item:hover { background: rgba(255,255,255,0.04); color: var(--ink); }

    .ed-section-cap {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--ink-soft);
      padding: 0.9rem 1rem 0.4rem;
    }

    /* ── Classic header: clean elevated bar, white status strip ── */
    :root {
      --hdr-strip-bg: var(--paper-2);
      --hdr-strip-rule: var(--rule);
    }
    html.dark {
      --hdr-strip-bg: var(--paper-2);
    }
    #desktopHeader { box-shadow: var(--shadow); }

/* ── Auth (login/register) brand panel — classic slate & blue ── */
:root {
  --brand-gradient: linear-gradient(145deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  --brand-glow-1:   rgba(37, 99, 235, 0.30);
  --brand-glow-2:   rgba(37, 99, 235, 0.16);
}

/* ── Home: mystery-box card frame + winner-ticker accent (classic) ── */
.ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ed-card-mystery:hover { border-color: var(--theme-600, #2563eb); box-shadow: var(--shadow-md); }
body .wt-card:hover { border-color: var(--theme-600, #2563eb); }

/* ══════════════════════════════════════════════════════════════════════════
   Payment cluster (payment.php → payment/*) — classic: clean white cards,
   blue accent, subtle shadows. Scoped cls-pay-* (see docs 2026-07-19 spec).
   ══════════════════════════════════════════════════════════════════════════ */

.cls-pay-topbar {
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.cls-pay-crest {
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--theme-600, #2563eb);
}

.cls-pay-card {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius, 12px); box-shadow: var(--shadow);
}

.cls-pay-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cls-pay-collapse-btn { border-bottom: 1px solid var(--rule); background: none; }
.cls-pay-collapse-btn:hover { background: rgba(37,99,235,.03); }

.cls-pay-lineitem {
  border-radius: var(--radius-sm, 8px); background: var(--paper);
  border: 1px solid var(--rule);
}
.cls-pay-qty-hero {
  position: absolute; top: .625rem; right: .625rem;
  font-size: 12px; font-weight: 800; color: #fff;
  background: rgba(15,23,42,.62); backdrop-filter: blur(4px);
  padding: .125rem .625rem; border-radius: 999px;
}
.cls-pay-qty-badge {
  position: absolute; bottom: -.375rem; right: -.375rem;
  font-size: 10px; font-weight: 800; color: #fff;
  background: var(--theme-600, #2563eb);
  padding: .0625rem .375rem; border-radius: 999px; line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.cls-pay-countdown {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: var(--radius-sm, 8px);
  background: rgba(37,99,235,.07);
}
.cls-pay-countdown-time {
  font-size: 11px; font-weight: 700; color: var(--theme-600, #2563eb);
  background: var(--paper-2); border-radius: 999px; padding: .125rem .625rem;
}

.cls-pay-row { border-bottom: 1px solid var(--rule); }
.cls-pay-total {
  border-top: 2px solid var(--rule); font-size: 15px; font-weight: 800; color: var(--ink);
}

.cls-pay-address-inner {
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm, 8px);
  background: var(--paper);
}

.cls-pay-gw {
  border: 2px solid var(--rule); border-radius: var(--radius-sm, 8px);
  background: var(--paper-2);
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}
.cls-pay-gw:hover { border-color: var(--theme-400, #60a5fa); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cls-pay-gw-on {
  border-color: var(--theme-500, #3b82f6); background: rgba(37,99,235,.06);
  box-shadow: 0 0 0 1px var(--theme-500, #3b82f6);
}
.cls-pay-gw-radio {
  width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--rule);
  transition: border-color .14s, background .14s;
}
.cls-pay-gw-radio-on { border-color: var(--theme-600, #2563eb); background: var(--theme-600, #2563eb); }

.cls-pay-cta {
  font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--theme-600, #2563eb);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.cls-pay-cta:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.cls-pay-cta:active:not(:disabled) { transform: scale(.99); }
.cls-pay-cta-off, .cls-pay-cta:disabled {
  background: var(--rule); color: var(--ink-soft); cursor: not-allowed;
}

.cls-pay-fixed {
  background: var(--paper-2); border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 24px rgba(0,0,0,.09);
}

.cls-pay-modal {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 1.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.3);
}

/* Result / status card (payment-success · -failed · -cancelled) */
.cls-pay-result { position: relative; overflow: hidden; }
.cls-pay-result-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--theme-500, #3b82f6), var(--theme-600, #2563eb));
}
.cls-pay-result-medallion {
  width: 4rem; height: 4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 4px var(--paper), 0 6px 20px -10px rgba(0,0,0,.25);
}
.cls-pay-result-btn2 {
  font-weight: 700; font-size: 13px; letter-spacing: -.01em;
  color: var(--theme-600, #2563eb);
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper-2);
  transition: border-color .15s, background .15s, color .15s;
}
.cls-pay-result-btn2:hover { border-color: var(--theme-400, #60a5fa); background: rgba(37,99,235,.06); }