/* ============================================================
   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);
      --notify-accent: var(--theme-500);   /* unified popup engine accent — theme-generator.php's site-wide accent axis */
    }
    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);
    }

    /* Tight eyebrow — same style, letter-spacing stripped so it stays on one line
       in narrow cards. !important guards against the Tailwind CDN Preflight
       (injected after this stylesheet) winning the cascade on these props. */
    .ed-eyebrow-tight {
      font-size: 9px !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
    }

    /* 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;
      white-space: nowrap;
      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-*.
   ══════════════════════════════════════════════════════════════════════════ */

.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); }

/* ── Dark/light toggle: "vintage iris" ──
   header.js (runClassicIrisTransition) first desaturates the page to sepia
   (.cls-iris-sepia on <body>), then drives a burgundy circle purely via
   inline style + a plain `clip-path` transition (JS computes the origin
   point and max radius from the clicked toggle button, since a CSS
   @keyframes can't take per-click parameters without Houdini @property
   support). The circle expands from the button to cover the screen, the
   mode swap happens once it fully covers and the sepia lifts, then the
   circle closes back down to nothing at the same point while h1/h2 fade
   back in — a cinematic iris wipe, not a flat color snap. */
.cls-iris-sepia {
  filter: sepia(.6) saturate(1.15) contrast(1.03);
  transition: filter 300ms ease;
}
.px-fx--classic-iris {
  background: #800020;
}
.cls-iris-header-fade {
  animation: clsIrisHeaderFade 320ms ease forwards;
}
@keyframes clsIrisHeaderFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .px-fx--classic-iris { transition: none !important; }
  .cls-iris-sepia { transition: none !important; filter: none !important; }
  .cls-iris-header-fade { animation: none !important; }
}