/* ============================================================
   Bandal Tires — Design System V2.1 (polish pass)
   ============================================================ */

html { scroll-behavior: smooth; }

/* Body typography — better legibility & ligatures */
body {
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

/* Tighter, punchier headings — commercial rhythm */
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { letter-spacing: -0.03em; }

/* ============================================================
   BUTTON SYSTEM — unified primary / secondary / tertiary
   ============================================================ */

/* Base — all interactive elements share the same transition curve */
a, button {
  transition-property: color, background-color, border-color, transform, box-shadow, opacity, filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 180ms;
}

/* ==== .btn-primary — red brand ==== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  background-color: #dc2626;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.55), 0 0 0 1px rgba(220, 38, 38, 0.1);
  min-height: 48px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: #b91c1c;
  box-shadow: 0 12px 28px -10px rgba(220, 38, 38, 0.7), 0 0 0 1px rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 10px -4px rgba(220, 38, 38, 0.5);
}

/* ==== .btn-wa — WhatsApp green ==== */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  background-color: #16a34a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  box-shadow: 0 8px 20px -8px rgba(22, 163, 74, 0.55);
  min-height: 48px;
  text-decoration: none;
}
.btn-wa:hover {
  background-color: #15803d;
  box-shadow: 0 12px 28px -10px rgba(22, 163, 74, 0.7);
  transform: translateY(-1px);
}
.btn-wa:active {
  transform: translateY(0) scale(0.98);
}

/* ==== .btn-secondary — outlined/subtle ==== */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  min-height: 48px;
  text-decoration: none;
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0) scale(0.98); }

/* Light variant of secondary — for use on light backgrounds */
.btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  background-color: #0f172a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  min-height: 48px;
  text-decoration: none;
}
.btn-secondary-dark:hover { background-color: #1e293b; transform: translateY(-1px); }
.btn-secondary-dark:active { transform: translateY(0) scale(0.98); }
.dark .btn-secondary-dark { background-color: #ffffff; color: #0f172a; }
.dark .btn-secondary-dark:hover { background-color: #f1f5f9; }

/* ==== .btn-tertiary — text-link with underline ==== */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #dc2626;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}
.btn-tertiary:hover { gap: 0.625rem; color: #b91c1c; }
.dark .btn-tertiary { color: #f87171; }
.dark .btn-tertiary:hover { color: #fca5a5; }

/* Size modifiers */
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; min-height: 56px; border-radius: 0.875rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; min-height: 36px; }

/* Loading state — spinner-ready */
.btn-loading {
  cursor: wait;
  opacity: 0.75;
  pointer-events: none;
}
.btn-loading .btn-icon {
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   FORM SYSTEM — inputs, labels, states
   ============================================================ */

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.dark .form-label { color: #94a3b8; }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  border: 1.5px solid #cbd5e1;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 48px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.dark .form-input, .dark .form-select, .dark .form-textarea {
  border-color: #334155;
  background-color: #0f172a;
  color: #f1f5f9;
}
.form-input::placeholder, .form-textarea::placeholder { color: #94a3b8; }
.dark .form-input::placeholder, .dark .form-textarea::placeholder { color: #64748b; }

.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: #94a3b8;
}
.dark .form-input:hover, .dark .form-select:hover, .dark .form-textarea:hover {
  border-color: #475569;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}

.form-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.02em; }

/* Dark inputs (used inside dark hero blocks) */
.form-input-dark {
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1rem;
  min-height: 48px;
  backdrop-filter: blur(4px);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.form-input-dark::placeholder { color: rgba(255, 255, 255, 0.5); }
.form-input-dark:hover { background-color: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.30); }
.form-input-dark:focus {
  outline: none;
  border-color: #dc2626;
  background-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.20);
}

/* Custom select arrow */
.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

/* Dark-context select (used inside dark hero sections) */
.form-select-dark {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23cbd5e1'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 16px;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}

/* ============================================================
   CHIPS (size selector) — better mobile UX
   ============================================================ */

.size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  border: 1.5px solid #cbd5e1;
  background-color: #ffffff;
  color: #0f172a;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  min-height: 42px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 160ms ease;
}
.dark .size-chip {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}
.size-chip:hover {
  border-color: #dc2626;
  color: #dc2626;
  background-color: #fef2f2;
  transform: translateY(-1px);
}
.dark .size-chip:hover {
  background-color: rgba(220, 38, 38, 0.12);
  color: #f87171;
}
.size-chip:active { transform: translateY(0) scale(0.97); }

.size-chip.is-active,
.size-chip[data-active="true"] {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 6px 14px -4px rgba(220, 38, 38, 0.4);
}

/* ============================================================
   CARD SYSTEM — unified radius/shadow/hover
   ============================================================ */

.card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  transition: border-color 200ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.dark .card { background-color: #0f172a; border-color: #1e293b; }

.card-hover:hover {
  transform: translateY(-4px);
  border-color: #dc2626;
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.20), 0 10px 20px -10px rgba(220, 38, 38, 0.15);
}
.dark .card-hover:hover {
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6), 0 10px 20px -10px rgba(220, 38, 38, 0.25);
}

/* Tire card — inherits .card-hover feel */
.tire-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}
.tire-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.18),
              0 10px 20px -10px rgba(220, 38, 38, 0.15);
}

/* ============================================================
   SECTION RHYTHM — vertical breathing
   ============================================================ */

.section-y { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 640px) {
  .section-y { padding-top: 3rem; padding-bottom: 3rem; }
}

/* Subtle section divider dots — for eyebrow labels */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background-color: #fee2e2;
  color: #b91c1c;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.dark .eyebrow { background-color: rgba(220, 38, 38, 0.15); color: #fca5a5; }

.eyebrow-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background-color: rgba(220, 38, 38, 0.20);
  color: #fecaca;
  border: 1px solid rgba(220, 38, 38, 0.35);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  backdrop-filter: blur(6px);
}

/* ============================================================
   HERO VIDEO overlay — clearer focal point
   ============================================================ */

.hero-video-wrapper video {
  filter: brightness(0.75) contrast(1.05) saturate(1.05);
}

/* ============================================================
   MARQUEE (brands strip)
   ============================================================ */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 30s linear infinite; }

/* ============================================================
   MOBILE BOTTOM BAR — safe area + tap targets
   ============================================================ */

.mobile-bar {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-height: 60px;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition: background-color 150ms ease, transform 100ms ease;
}
.mobile-bar-btn:active { transform: scale(0.96); }
.mobile-bar-btn i { font-size: 1.25rem; margin-bottom: 0.125rem; }

/* Spacer for pages that render the mobile bar */
.mobile-bar-spacer {
  height: calc(72px + env(safe-area-inset-bottom, 0));
}
@media (min-width: 1024px) {
  .mobile-bar-spacer { display: none; }
}

/* ============================================================
   POS (admin) legacy
   ============================================================ */

.pos-catalog { max-height: calc(100vh - 200px); overflow-y: auto; }
.pos-cart    { max-height: calc(100vh - 200px); overflow-y: auto; }

/* ============================================================
   Chart containers
   ============================================================ */

.chart-container { position: relative; height: 260px; }

/* ============================================================
   Animations — subtle, non-intrusive
   ============================================================ */

.fade-in { animation: fadein 0.4s ease; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeInUp 0.6s ease both; }

/* Reduce motion for users who prefer it */
@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;
  }
}

/* ============================================================
   Scrollbar — restrained
   ============================================================ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.7); }
.dark ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.5); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.8); }

/* ============================================================
   Focus ring — accessible, brand-colored, not intrusive
   ============================================================ */

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 3px;
  border-radius: 6px;
}
.btn-primary:focus-visible,
.btn-wa:focus-visible,
.btn-secondary:focus-visible,
.btn-secondary-dark:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.55);
}

/* ============================================================
   Details / FAQ
   ============================================================ */

details > summary::-webkit-details-marker { display: none; }
details[open] > summary { color: #dc2626; }

/* ============================================================
   Modal / print helpers
   ============================================================ */

.modal-open { overflow: hidden; }

@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* ============================================================
   Bandal logo — invert on light backgrounds
   ============================================================ */

.bandal-logo {
  filter: invert(1) hue-rotate(180deg);
  transition: filter 0.2s ease;
}
html.dark .bandal-logo { filter: none; }

/* ============================================================
   Image rendering
   ============================================================ */

img { image-rendering: -webkit-optimize-contrast; }

/* ============================================================
   Success card — shown after form submit
   ============================================================ */

.form-success {
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #16a34a;
  text-align: center;
}
.dark .form-success {
  background: linear-gradient(135deg, rgba(22,163,74,0.15) 0%, rgba(22,163,74,0.05) 100%);
  border-color: rgba(22,163,74,0.5);
}
.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background-color: #16a34a;
  color: #ffffff;
  font-size: 1.75rem;
  margin-bottom: 0.875rem;
  box-shadow: 0 12px 24px -8px rgba(22,163,74,0.5);
}

/* Skeleton loading for inventory placeholders */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 0px, #e2e8f0 60px, #f1f5f9 120px);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 0px, #334155 60px, #1e293b 120px);
  background-size: 400px 100%;
}

/* ============================================================
   V2.2 BRAND ALIGNMENT — flyer-inspired design tokens
   ============================================================
   Extends V2.1 without breaking anything. Adds:
   - Hexagonal SVG background pattern for dark sections
   - Metallic silver bevel borders
   - Two-tone condensed uppercase display titles (.brand-title)
   - Hexagonal icon containers (.hex-icon)
   - Brushed-red diagonal divider (.brush-divider)
   - Flyer carousel (.carousel-flyers)
   ============================================================ */

/* Hexagonal pattern background (subtle, for dark sections) */
.hex-bg {
  background-color: #050505;
  background-image:
    linear-gradient(180deg, rgba(220,38,38,0.08) 0%, transparent 30%, transparent 70%, rgba(220,38,38,0.06) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><g fill='none' stroke='%23dc2626' stroke-opacity='0.10' stroke-width='1'><polygon points='28,2 54,17 54,49 28,64 2,49 2,17'/><polygon points='28,66 54,81 54,113 28,128 2,113 2,81'/></g></svg>");
  background-repeat: repeat;
  background-size: auto, 56px 100px;
}

/* Softer variant, for hero: hexes + radial red glow behind title */
.hex-bg-hero {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(ellipse 55% 60% at 25% 40%, rgba(220,38,38,0.35), transparent 65%),
    radial-gradient(ellipse 40% 50% at 85% 80%, rgba(220,38,38,0.18), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><g fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1'><polygon points='28,2 54,17 54,49 28,64 2,49 2,17'/><polygon points='28,66 54,81 54,113 28,128 2,113 2,81'/></g></svg>");
  background-repeat: repeat;
  background-size: auto, auto, 56px 100px;
}

/* Metallic silver bevel border — for cards/badges in dark sections */
.metallic-border {
  position: relative;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 1rem;
}
.metallic-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(180deg, #d1d5db 0%, #6b7280 50%, #1f2937 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Two-tone condensed uppercase display title
   Usage: <h1 class="brand-title">TU SEGURIDAD ES <span class="brand-title-accent">NUESTRA PRIORIDAD</span></h1>
*/
.brand-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.brand-title-accent {
  color: #ef4444;
  display: inline;
}
/* Extra weight on very large hero titles */
.brand-title-xl {
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* Hexagonal icon container — flyer style */
.hex-icon {
  width: 3.5rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: #fff;
  font-size: 1.375rem;
  box-shadow: 0 6px 20px -6px rgba(220,38,38,0.7);
  flex-shrink: 0;
}
.hex-icon-lg { width: 5rem; height: 5.75rem; font-size: 1.75rem; }
.hex-icon-outline {
  background: transparent;
  border: 2px solid #dc2626;
  color: #ef4444;
  box-shadow: none;
}

/* Brushed-red diagonal divider (flyer trademark element) */
.brush-divider {
  height: 6px;
  width: 100px;
  background: linear-gradient(90deg, transparent 0%, #dc2626 15%, #ef4444 50%, #dc2626 85%, transparent 100%);
  transform: skewX(-20deg);
  border-radius: 2px;
  box-shadow: 0 0 24px rgba(220,38,38,0.5);
}
.brush-divider-lg { height: 8px; width: 160px; }

/* Chrome/silver stroke text (for section eyebrows on dark) */
.chrome-text {
  background: linear-gradient(180deg, #f9fafb 0%, #9ca3af 55%, #4b5563 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   FLYER CAROUSEL — scroll-snap horizontal gallery
   ============================================================ */
.carousel-flyers {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
  scrollbar-width: none;
}
.carousel-flyers::-webkit-scrollbar { display: none; }

.carousel-item {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(78vw, 320px);
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 300ms cubic-bezier(0.4,0,0.2,1), box-shadow 300ms;
}
@media (min-width: 768px) {
  .carousel-item { width: 340px; }
}
.carousel-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -10px rgba(220,38,38,0.35), 0 0 0 1px rgba(220,38,38,0.4);
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1a1a1a, #050505);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms;
}
.carousel-nav-btn:hover {
  background: linear-gradient(180deg, #dc2626, #991b1b);
  border-color: #ef4444;
  transform: scale(1.05);
}
.carousel-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* Dark hero video wrapper — keep in sync with .hex-bg-hero for pages without video */
.dark-hero-fallback {
  background: #050505;
}

/* Flyer-style stat box (dark bg + metallic border, big number, small label) */
.stat-metallic {
  position: relative;
  background: linear-gradient(180deg, #171717 0%, #000 100%);
  border-radius: 0.875rem;
  padding: 1rem;
  text-align: center;
  overflow: hidden;
}
.stat-metallic::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 40%, rgba(220,38,38,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}