/* VisionWear light theme. Tailwind (built to css/tailwind.css by `npm run build`) handles most styling; these are shared pieces. */
:root {
  --vw-bg: #ffffff;
  --vw-surface: #f8fafc;
  --vw-border: #e2e8f0;
  --vw-text: #0f172a;
  --vw-muted: #64748b;
  --vw-accent: #2563eb;
  /* Warm neutrals taken from the campaign photos. Every section starts and ends on
     --vw-page, so colour changes fade in and out instead of switching at an edge. */
  --vw-page: #faf7f2;
  --vw-sand: #f3ece3;
  --vw-sand-2: #e9dfd2;
  --vw-tint: #eef2fb;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--vw-page); color: var(--vw-text); }

/* Section backgrounds that blend into the page colour at both edges */
.blend-hero { background: linear-gradient(180deg, var(--vw-sand) 0%, var(--vw-page) 100%); }
.blend-sand { background: linear-gradient(180deg, var(--vw-page) 0%, var(--vw-sand) 50%, var(--vw-page) 100%); }
.blend-tint { background: linear-gradient(180deg, var(--vw-page) 0%, var(--vw-tint) 50%, var(--vw-page) 100%); }
.blend-footer { background: linear-gradient(180deg, var(--vw-page) 0%, var(--vw-sand) 100%); }
.hero-halo { background: radial-gradient(closest-side, rgba(219, 187, 162, 0.55), rgba(219, 187, 162, 0)); }

/* Text wordmark shown until /images/logo.png is available */
.wordmark { font-family: 'Orbitron', 'Inter', sans-serif; font-weight: 500; letter-spacing: 0.08em; color: #000; }

.glass-effect { background: rgba(250, 247, 242, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(120, 90, 60, 0.10); }
.card { background: #fff; border: 1px solid rgba(120, 90, 60, 0.12); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 10px 28px -14px rgba(60, 40, 20, 0.16); }

.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -20px rgba(37, 99, 235, 0.35); }

.swatch { width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--vw-border); transition: box-shadow .15s; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--vw-accent); }
.swatch:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 3px; }

.drawer { transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.drawer.open { transform: translateX(0); }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.35); border-radius: 10px; }

.field { width: 100%; background: #fff; border: 1px solid #cbd5e1; border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--vw-text); transition: border-color .15s, box-shadow .15s; }
.field:focus { outline: none; border-color: var(--vw-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.field[aria-invalid="true"] { border-color: #ef4444; }
.field-label { display: block; font-size: 0.75rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; }

.currency-select { background: #fff; border: 1px solid var(--vw-border); border-radius: 9999px; padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--vw-text); }
.currency-select:focus { outline: 2px solid var(--vw-accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-card, .drawer { transition: none; }
}

/* PRO vs VIP comparison table. Below md each row becomes a card with the two models side by side. */
.compare th[scope="row"] { padding: 1.25rem 1.5rem; font-weight: 600; color: var(--vw-text); vertical-align: top; white-space: nowrap; }
.compare th[scope="row"] i { color: var(--vw-accent); width: 1.25rem; margin-right: 0.375rem; }
.compare td { padding: 1.25rem 1.5rem; vertical-align: top; line-height: 1.5; }
.compare td:last-child { background: rgba(239, 246, 255, 0.6); }
.compare td ul { display: grid; gap: 0.375rem; }
.compare td li { position: relative; padding-left: 1.25rem; }
.compare td li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--vw-accent); opacity: 0.7; }
@media (max-width: 767px) {
  .compare thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare thead th:first-child { display: none; }
  .compare thead th { padding: 1rem; width: auto; }
  .compare thead th span:first-child { font-size: 1rem; }
  .compare tbody, .compare tr { display: block; }
  .compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare th[scope="row"] { grid-column: 1 / -1; padding: 1rem 1rem 0.5rem; white-space: normal; }
  .compare td { padding: 0.5rem 1rem 1rem; font-size: 0.8125rem; }
  .compare td::before { content: attr(data-label); display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vw-muted); margin-bottom: 0.375rem; }
  .compare-actions th[scope="row"] { display: none; }
  .compare-actions td a { display: block; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Pre-order: demo clip band across the top of /preorder */
.reel { position: relative; background: #0a0818; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; min-height: 220px; overflow: hidden; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 24, 0) 45%, rgba(10, 8, 24, 0.85) 100%); pointer-events: none; }
.reel-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.reel-btn { width: 44px; height: 44px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(10, 8, 24, 0.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.reel-btn:hover { background: rgba(10, 8, 24, 0.7); }
.reel-btn:focus-visible, .reel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.reel-dot { width: 40px; height: 44px; display: inline-grid; place-items: center; background: transparent; border: 0; }
.reel-dot span { display: block; width: 26px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); overflow: hidden; }
.reel-dot i { display: block; height: 100%; width: 0; background: #fff; }

/* Pre-order: campaign meter and currency pills */
.meter { height: 14px; border-radius: 9999px; background: var(--vw-border); overflow: hidden; }
.meter i { display: block; height: 100%; min-width: 6px; width: 0; background: linear-gradient(90deg, #ec4899, #2563eb, #0ea5e9); }
.cur-pill { min-height: 40px; padding: 0.375rem 0.875rem; border-radius: 9999px; border: 1px solid var(--vw-border); background: #fff; font-size: 0.8125rem; font-weight: 600; }
.cur-pill[aria-pressed="true"] { background: #0f172a; color: #fff; border-color: #0f172a; }
.cur-pill:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 2px; }

/* Homepage hero showcase (Admin > Homepage media) */
.hero-media { background: var(--vw-sand-2); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero-slide { opacity: 0; transition: opacity 1.2s ease-in-out; }
.hero-slide.is-on { opacity: 1; }
.hero-controls { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 9999px; background: rgba(28, 25, 23, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-controls button { width: 36px; height: 36px; display: inline-grid; place-items: center; color: #fff; border-radius: 9999px; }
.hero-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hero-dot span { display: block; width: 8px; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.5); transition: background .3s, width .3s; }
.hero-dot[aria-current="true"] span { width: 20px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* Admin media page */
.opt-card { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem; border-radius: 1rem; border: 1px solid var(--vw-border); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.opt-card:hover { border-color: #93c5fd; }
.opt-card:has(input:checked) { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb; }
.opt-card:has(input:focus-visible) { outline: 2px solid #2563eb; outline-offset: 2px; }
.upload-btn { display: inline-flex; align-items: center; cursor: pointer; background: #2563eb; color: #fff; font-weight: 700; font-size: .875rem; padding: .75rem 1.25rem; border-radius: .75rem; }
.upload-btn:hover { background: #3b82f6; }
.upload-btn.is-disabled { background: #cbd5e1; color: #475569; cursor: not-allowed; }
input[type="file"]:focus-visible + .upload-btn, .upload-btn:has(+ input:focus-visible) { outline: 2px solid #2563eb; outline-offset: 2px; }
.progress { height: 8px; border-radius: 9999px; background: var(--vw-border); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: #2563eb; transition: width .2s; }
.media-row { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid var(--vw-border); border-radius: 1rem; background: #fff; }
@media (min-width: 640px) { .media-row { flex-direction: row; } }
.media-tile { display: flex; flex-direction: column; gap: .75rem; padding: .75rem; border: 1px solid var(--vw-border); border-radius: 1rem; background: #fff; }
.media-row.is-active, .media-tile.is-active { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.media-tile:not(.is-active) img { opacity: .55; }
.badge-active { display: inline-flex; align-items: center; background: #2563eb; color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .6rem; border-radius: 9999px; }
.btn-primary, .btn-ghost, .btn-danger { min-height: 40px; padding: .5rem .9rem; border-radius: .75rem; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #3b82f6; }
.btn-ghost { background: #fff; border: 1px solid #cbd5e1; color: #0f172a; }
.btn-ghost:hover { border-color: #0f172a; }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.btn-danger { background: #fff; border: 1px solid #fecaca; color: #b91c1c; }
.btn-danger:hover { border-color: #b91c1c; }