/* ============================================================================
   S.W.A.T. DEEJAY'S — CYBER-WASTELAND x PIONEER MASTER VU EDITION
   Ported verbatim (same class names / variables) from the approved reference
   opcion-35-cyber-wasteland-pioneer-vu.html so the real store matches it 1:1.
   ============================================================================ */
:root {
  --bg: #07080a;
  --panel-dark: #0d0f14;
  --card-bg: #12151c;
  --rust-dark: #1b1612;
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: rgba(0, 240, 255, 0.45);
  --swat-red-orange: #e42b00;
  --swat-mid-orange: #de5405;
  --swat-neon-orange: #fd6d03;
  --swat-gold-highlight: #f9a604;
  --swat-gradient-vibrant: linear-gradient(135deg, #f9a604 0%, #fd6d03 45%, #de5405 75%, #e42b00 100%);
  --swat-gradient-text: linear-gradient(180deg, #ffffff 0%, #f9a604 35%, #fd6d03 70%, #e42b00 100%);
  --neon-orange: #fd6d03;
  --neon-orange-glow: rgba(253, 109, 3, 0.55);
  --neon-lime: #00ff66;
  --neon-lime-glow: rgba(0, 255, 102, 0.4);
  --text-main: #f0f4f8;
  --text-dim: #7f8a9e;
  --text-muted: #566174;
  --panel-surface: #10131a;
  --border-mech: #262d3d;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hazard: repeating-linear-gradient(45deg, #fd6d03, #e42b00 10px, #07080a 10px, #07080a 20px);
  --font-display: 'Syne', sans-serif;
  --font-mech: 'Orbitron', sans-serif;
  --font-body: 'Chakra Petch', sans-serif;
  --chamfer: 18px;
  --hazard-yellow: repeating-linear-gradient(-45deg, #ffcc00, #ffcc00 14px, #111 14px, #111 28px);
}

body {
  background-color: var(--bg);
  color: var(--text-main);
  font-family: var(--font-body);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(253, 109, 3, 0.12), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.07), transparent 45%),
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  /* The two radial glows are sized 100%/100% of body's own box — on a long page
     that box can be several thousand px tall, so the glow (radius computed
     against that huge box) fades out within the first screen and everything
     below shows flat --bg with no visible texture: the "abrupt seam" this was
     built to avoid. Anchoring them to the viewport instead keeps the glow (and
     the grid) present and constant no matter how tall the page grows. */
  background-attachment: fixed, fixed, scroll, scroll;
  line-height: 1.4;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.container { max-width: 1600px; margin: 0 auto; padding: 0 24px; }

/* Category listing: the IQIT "wide sidebar" theme setting caps the real
   #content-wrapper at col-md-6 (50%) even though only one sidebar renders —
   too narrow for the grid below to ever fit 3 chamfer cards per row. Give the
   real sidebar/content columns their own width here instead of relying on
   the sitewide Bootstrap-column setting (which also affects CMS/search pages). */
#category #content-wrapper { width: 78% !important; max-width: 78% !important; flex: 0 0 78% !important; }
#category #left-column { width: 22% !important; max-width: 22% !important; flex: 0 0 22% !important; }
@media (max-width: 991px) {
  #category #content-wrapper, #category #left-column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* Franja hazard post-apocalíptica */
.hazard-strip { height: 6px; background: var(--border-hazard); width: 100%; }

/* ---------------------------------------------------------------------------
   HEADER — frosted glass, multi-menú, buscador cápsula, carrito/login pill
   --------------------------------------------------------------------------- */
header {
  background: rgba(7, 8, 11, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 76px; }
.brand-group { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-main); }
.brand-emblem {
  background: var(--swat-gradient-vibrant);
  color: #000;
  font-family: var(--font-mech);
  font-weight: 900;
  font-size: 1rem;
  padding: 4px 8px;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
  box-shadow: 0 0 14px var(--neon-orange-glow);
}
.brand-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: #fff !important; }
.brand-title span { color: var(--neon-cyan); }
.brand-sub { font-family: var(--font-mech); font-size: 0.65rem; color: var(--text-dim); letter-spacing: 2px; border-left: 1px solid var(--border-mech); padding-left: 10px; }

.header-nav-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1; max-width: 680px; margin: 0 24px; }
.header-nav-row { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
.nav-home-icon { display: inline-flex; align-items: center; color: var(--text-dim); text-decoration: none; margin-right: 4px; }
.nav-home-icon:hover { color: var(--neon-cyan); filter: drop-shadow(0 0 8px var(--neon-cyan)); }
.header-nav-row a:not(.nav-home-icon) {
  color: #b0b8c4 !important;
  text-decoration: none;
  font-family: var(--font-mech);
  font-size: 0.78rem;
  font-weight: 800 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-nav-row a:not(.nav-home-icon):hover { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
.header-nav-row a.active { color: var(--neon-cyan); }

.header-search-capsule {
  display: flex;
  align-items: center;
  background: rgba(24, 25, 38, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 4px 6px 4px 18px;
  transition: all 0.25s;
}
.header-search-capsule:focus-within { border-color: #c8ff00; box-shadow: 0 0 16px rgba(200, 255, 0, 0.35); background: rgba(29, 30, 46, 0.85); }
.search-input { background: transparent; border: none; outline: none; color: #fff; font-family: var(--font-mech); font-size: 0.88rem; font-weight: 600; width: 140px; letter-spacing: 0.5px; transition: width 0.3s; }
.search-input:focus { width: 190px; }
.search-input::placeholder { color: #8a91a8; }
.search-submit-btn { width: 34px; height: 34px; background: #d8ff00; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #000; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; }
.search-submit-btn:hover { transform: scale(1.08); background: #eaff4d; box-shadow: 0 0 12px rgba(216, 255, 0, 0.6); }

.header-user-actions-group { display: flex; align-items: center; gap: 16px; }
.header-user-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26, 27, 43, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 6px 16px;
  color: #d1d5db !important;
  text-decoration: none;
  font-family: var(--font-mech);
  font-size: 0.75rem;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.cart-pill-btn:hover { background: rgba(35, 37, 58, 0.85); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn-login-link { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; text-decoration: none; font-family: var(--font-mech); font-size: 0.78rem; font-weight: 800 !important; letter-spacing: 0.5px; white-space: nowrap; }
.btn-login-link:hover { color: var(--neon-cyan); text-shadow: 0 0 8px var(--neon-cyan); }

/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */
/* These sections sit inside PrestaShop's own #inner-wrapper.container (max-width:1300px,
   centered), so without this they'd be inset instead of full-bleed like the reference —
   break out to the full viewport width, then re-center the actual content with our own
   nested .container. */
.hero-sec, .cat-sec, .prod-sec {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.hero-sec { padding: 60px 0 80px; border-bottom: 2px solid var(--border-mech); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1.2fr; gap: 0px; align-items: center; position: relative; }
.hero-badge-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.badge-mech {
  position: relative;
  background: rgba(253, 109, 3, 0.12);
  border: 1px solid var(--neon-orange);
  color: var(--neon-orange);
  font-family: var(--font-mech);
  font-size: 0.7rem;
  padding: 4px 12px;
  letter-spacing: 1px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(253, 109, 3, 0.25);
  animation: badgePulseOrange 3s ease-in-out infinite;
}
.badge-mech::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  animation: badgeShimmer 4s ease-in-out infinite;
}
.badge-mech.cyan { background: rgba(0, 240, 255, 0.1); border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0, 240, 255, 0.25); animation: badgePulseCyan 3s ease-in-out infinite 1.5s; }
.badge-mech.cyan::after { animation: badgeShimmer 4s ease-in-out infinite 2s; }

@keyframes badgePulseOrange {
  0%, 100% { border-color: rgba(253, 109, 3, 0.6); box-shadow: 0 0 8px rgba(253, 109, 3, 0.25); color: #fd6d03; }
  50% { border-color: #ff8522; box-shadow: 0 0 18px rgba(253, 109, 3, 0.65), inset 0 0 10px rgba(253, 109, 3, 0.2); color: #ffad5a; }
}
@keyframes badgePulseCyan {
  0%, 100% { border-color: rgba(0, 240, 255, 0.6); box-shadow: 0 0 8px rgba(0, 240, 255, 0.25); color: #00f0ff; }
  50% { border-color: #5effff; box-shadow: 0 0 18px rgba(0, 240, 255, 0.65), inset 0 0 10px rgba(0, 240, 255, 0.2); color: #d0ffff; }
}
@keyframes badgeShimmer { 0%, 65% { left: -120%; } 100% { left: 180%; } }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.2vw, 4.8rem);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: #ffffff;
  perspective: 1000px;
}
.hero-title .title-line {
  display: block;
  opacity: 0;
  transform: translateY(30px) scale(0.92) rotateX(15deg);
  filter: blur(8px);
  animation: kineticLineEntry 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title .title-line:nth-child(1) { animation-delay: 0.1s; }
.hero-title .title-line:nth-child(2) { animation-delay: 0.22s; }
.hero-title .title-line:nth-child(3) { animation-delay: 0.34s; }
.hero-title .title-line:nth-child(4) { animation-delay: 0.46s; }
.hero-title .title-line:nth-child(5) { animation-delay: 0.58s; }
.hero-title .title-line:nth-child(6) { animation-delay: 0.70s; }
.hero-title .title-line:nth-child(7) { animation-delay: 0.82s; }

@keyframes kineticLineEntry {
  0% { opacity: 0; transform: translateY(35px) scale(0.9) rotateX(20deg); filter: blur(10px); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.02) rotateX(-3deg); filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0px); }
}

.hero-title .glow-orange {
  background: linear-gradient(180deg, #ffffff 0%, #f9a604 30%, #fd6d03 65%, #e42b00 95%, #fd6d03 100%);
  background-size: 100% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: magmaFlow 4.5s ease-in-out infinite alternate, textGlowAura 2.8s ease-in-out infinite alternate;
}
@keyframes magmaFlow { 0% { background-position: 50% 0%; } 100% { background-position: 50% 100%; } }
@keyframes textGlowAura {
  0% { filter: drop-shadow(0 0 14px rgba(253, 109, 3, 0.45)) drop-shadow(0 0 35px rgba(228, 43, 0, 0.25)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 28px rgba(253, 109, 3, 0.85)) drop-shadow(0 0 65px rgba(249, 166, 4, 0.5)); transform: scale(1.008); }
  100% { filter: drop-shadow(0 0 20px rgba(253, 109, 3, 0.6)) drop-shadow(0 0 45px rgba(228, 43, 0, 0.35)); transform: scale(1); }
}

.hero-desc { font-size: 1.1rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 24px; max-width: 560px; }
.hero-desc strong { color: #fff; }

/* VU MASTER L/R Pioneer + telemetría */
.mixer-vumeter-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  background: rgba(13, 15, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 20px;
  border-left: 4px solid var(--swat-neon-orange);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}
.vu-label { font-family: var(--font-mech); font-size: 0.75rem; color: #7b8599; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
.vu-bar { display: flex; gap: 2px; height: 18px; align-items: center; }
.vu-led { width: 6px; height: 18px; border-radius: 1px; background: #141720; transition: opacity 0.06s ease, filter 0.06s ease; }
.vu-led.g { background: #00ff66; box-shadow: 0 0 8px rgba(0, 255, 102, 0.7); }
.vu-led.y { background: #ffcc00; box-shadow: 0 0 8px rgba(255, 204, 0, 0.7); }
.vu-led.r { background: #ff2a2a; box-shadow: 0 0 10px rgba(255, 42, 42, 0.85); }
.vu-telemetry-text { font-family: var(--font-mech); font-size: 0.82rem; font-weight: 800; color: #00ff66; letter-spacing: 1.2px; text-shadow: 0 0 8px rgba(0, 255, 102, 0.4); }

.telemetry-module { margin-bottom: 32px; }
.telemetry-strip {
  display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 20px;
  background: #080a0f;
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 16px 22px;
  border-left: 4px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12), inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.telem-box span { display: block; font-family: var(--font-mech); font-size: 0.65rem; color: #6b778d; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 4px; }
.telem-box strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #00f0ff; letter-spacing: -0.01em; text-shadow: 0 0 10px rgba(0, 240, 255, 0.55); }

.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-hero-fire {
  background: var(--swat-gradient-vibrant);
  color: #000 !important;
  font-family: var(--font-mech);
  font-weight: 900 !important;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 28px;
  text-decoration: none;
  box-shadow: 0 0 20px var(--neon-orange-glow);
  transition: all 0.2s;
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
}
.btn-hero-fire:hover { background: #ff6a26; box-shadow: 0 0 35px var(--neon-orange); transform: translateY(-2px); }
.btn-hero-wa {
  background: transparent;
  color: #fff !important;
  border: 1px solid var(--border-mech);
  font-family: var(--font-mech);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 16px 24px;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.btn-hero-wa:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }

/* Logo animado SWAT — fluid sizing (percentage width + aspect-ratio, no fixed
   scale()/negative-margin) so it scales smoothly with the column's real width
   at any viewport instead of overflowing past the browser edge on wide
   screens (.hero-sec is 100vw with no upper cap). No overflow:hidden here —
   the fluid width already keeps the graphic's own box safely inside its
   column, and clipping this wrap hard-cuts the soft drop-shadow glow into a
   visible rectangle instead of letting it fade out naturally. */
.hero-standalone-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative; width: 100%; height: 100%;
  min-height: 620px;
}
.hero-standalone-logo-wrap .swat-pure-logo {
  width: 100%; max-width: 1240px; aspect-ratio: 4/3;
  border: 0; background: transparent; display: block; pointer-events: none;
  filter: drop-shadow(0 0 55px rgba(253, 109, 3, 0.65)) drop-shadow(0 0 110px rgba(228, 43, 0, 0.4));
}
/* Looping video sits stacked exactly on top of the one-shot intro iframe;
   custom.js fades from one to the other once the intro finishes (~8.4s). */
#swcwLogoLoop.swcw-logo-loop {
  position: absolute;
  top: 0; bottom: 0; left: 0; margin: auto 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#swcwLogoLoop.swcw-logo-loop.is-active { opacity: 1; }
#swcwLogoIntro.is-fading-out { opacity: 0; transition: opacity 0.6s ease; }

/* ---------------------------------------------------------------------------
   10 DISCIPLINAS
   --------------------------------------------------------------------------- */
.cat-sec { padding: 60px 0; border-bottom: 2px solid var(--border-mech); background: #090b0e; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; border-bottom: 1px solid var(--border-mech); padding-bottom: 12px; }
.sec-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.sec-title span { color: var(--neon-orange); }
.sec-sub { font-size: 0.85rem; color: var(--text-dim); margin-top: 4px; }
.sec-tag { font-family: var(--font-mech); font-size: 0.8rem; color: var(--neon-cyan); }
.cat-grid-10 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cat-card-mech {
  background: var(--card-bg);
  border: 1px solid var(--border-mech);
  padding: 16px 14px;
  text-decoration: none;
  color: var(--text-main);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 116px;
  transition: all 0.2s;
  position: relative;
}
.cat-card-mech:hover { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.25); transform: translateY(-2px); }
.cat-card-mech.outlet { border-color: var(--neon-orange); background: linear-gradient(135deg, rgba(255, 77, 0, 0.15) 0%, var(--card-bg) 80%); }
.cat-bpm-pill { font-family: var(--font-mech); font-size: 0.7rem; color: var(--neon-cyan); font-weight: 700; }
.cat-card-mech.outlet .cat-bpm-pill { color: var(--neon-orange); }
.cat-name-mech { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 8px; color: #fff; }
.cat-desc-mech { font-size: 0.72rem; color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   PRODUCTOS (home) + p-mech-card reutilizada en listado/ficha
   --------------------------------------------------------------------------- */
.prod-sec { padding: 70px 0 90px; border-bottom: 2px solid var(--border-mech); }
.prod-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Category listing / search results (real IQIT grid — restyled, not re-laid-out) */
.product-miniature {
  background: var(--card-bg);
  border: 1px solid var(--border-mech);
}
.product-miniature .product-title a { font-family: var(--font-body); color: var(--text-main); }
.product-miniature .product-title a:hover { color: var(--neon-cyan); }
.product-miniature .product-price,
.product-miniature .product-price-and-shipping .product-price { font-family: var(--font-display); font-weight: 800; color: var(--neon-orange) !important; }
.product-miniature .product-features-list { font-family: var(--font-mech); }
.product-miniature .btn-add-to-cart,
.product-miniature button[data-button-action="add-to-cart"] {
  background: var(--swat-gradient-vibrant) !important;
  border: none !important;
  color: #1a0500 !important;
  font-family: var(--font-mech);
  font-weight: 800;
  text-transform: uppercase;
}
.p-mech-card {
  background: var(--card-bg);
  border: 1px solid var(--border-mech);
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 0.2s;
}
.p-mech-card:hover { border-color: var(--neon-cyan); }
.p-mech-card.featured { border-top: 3px solid var(--neon-orange); }
.p-head { padding: 12px 16px; background: var(--panel-dark); border-bottom: 1px solid var(--border-mech); display: flex; justify-content: space-between; font-family: var(--font-mech); font-size: 0.72rem; color: var(--text-dim); }
.p-body { padding: 24px 20px; flex: 1; }
.p-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.p-title a { color: #fff !important; text-decoration: none; }
.p-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #090b0e; border: 1px solid var(--border-mech); padding: 10px 12px; margin-bottom: 16px; }
.p-spec-item span { display: block; font-family: var(--font-mech); font-size: 0.65rem; color: var(--text-dim); }
.p-spec-item strong { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--neon-cyan); }
.p-bullets { list-style: none; font-size: 0.82rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 6px; }
.p-bullets li::before { content: "■ "; color: var(--neon-orange); font-size: 0.65rem; }
.p-foot { padding: 16px 20px; border-top: 1px solid var(--border-mech); background: var(--panel-dark); display: flex; justify-content: space-between; align-items: center; }
.price-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: #fff; }
.price-num.sale { background: var(--swat-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(253, 109, 3, 0.5)); }
.price-strike { font-size: 0.85rem; text-decoration: line-through; color: #555; margin-right: 6px; }
.btn-mech-wa { background: rgba(37, 211, 102, 0.12); border: 1px solid #25D366; color: #25D366 !important; font-family: var(--font-mech); font-size: 0.78rem; font-weight: 700; padding: 8px 14px; text-decoration: none; transition: all 0.2s; }
.btn-mech-wa:hover { background: #25D366; color: #000; box-shadow: 0 0 12px #25D366; }

/* Real add-to-cart, on equal footing with the WhatsApp quick-order shortcut —
   this is a working PrestaShop store, not a WhatsApp-only catalog. */
.p-actions { display: flex; gap: 8px; padding: 0 20px 20px; }
.p-add-cart-form { flex: 1; }
.btn-mech-cart {
  width: 100%;
  background: var(--swat-gradient-vibrant);
  border: none;
  color: #000 !important;
  font-family: var(--font-mech);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-mech-cart:hover { box-shadow: 0 0 12px var(--neon-orange-glow); }
.p-actions .btn-mech-wa { flex: 0 0 auto; display: flex; align-items: center; }

.btn-iqitwishlist-add {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim) !important;
  font-size: 1.1rem;
  text-decoration: none;
}
.btn-iqitwishlist-add .added { display: none; }
.btn-iqitwishlist-add.active .not-added { display: none; }
.btn-iqitwishlist-add.active .added { display: inline; color: var(--neon-orange); }
.btn-iqitwishlist-add:hover { color: var(--neon-orange) !important; }
.p-cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-bottom: 1px solid var(--border-mech); }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
#swcw-footer { background: #050608; padding: 60px 0 30px; }
/* Empty <footer class="page-footer"><!-- Footer content --></footer> stub the
   parent theme's page.tpl/product.tpl always render — with no CSS of its own
   it'd be invisible, but it's a bare <footer> tag so it used to inherit the
   real footer's padding/background above, showing up as an empty dark box
   right before the real footer. */
.page-footer { display: none; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr; gap: 48px; margin-bottom: 48px; }
.f-h { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 18px; }
.f-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; list-style: none; font-family: var(--font-mech); font-size: 0.8rem; }
.f-cats a { color: var(--text-dim); text-decoration: none; }
.f-cats a:hover { color: var(--neon-cyan); }
.f-bot { border-top: 1px solid var(--border-mech); padding-top: 24px; display: flex; justify-content: space-between; font-family: var(--font-mech); font-size: 0.72rem; color: #555; }

/* ---------------------------------------------------------------------------
   Ficha de producto — mismo lenguaje visual, panel único
   --------------------------------------------------------------------------- */
#product .page-title, #product h1.h1 { font-family: var(--font-display); text-transform: uppercase; color: #fff; }
#product .product-prices .current-price, #product .product-price { font-family: var(--font-display); color: var(--neon-orange) !important; font-weight: 800; }
#product .add-to-cart, #product button[data-button-action="add-to-cart"] {
  background: var(--swat-gradient-vibrant) !important;
  border: none !important;
  color: #1a0500 !important;
  font-family: var(--font-mech);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.swcw-megamix-block {
  background: var(--panel-dark);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-left: 4px solid var(--neon-cyan);
  padding: 16px 20px;
  margin: 20px 0;
}
.swcw-megamix-label { font-family: var(--font-mech); font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 10px; display: block; }
.swcw-megamix-block audio { width: 100%; height: 36px; }
.swcw-wa-order-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: transparent; border: 1px solid #25D366; color: #25D366 !important; font-family: var(--font-mech); font-weight: 700; font-size: 0.8rem; padding: 10px 20px; border-radius: 4px; text-decoration: none; }
.swcw-wa-order-btn:hover { background: rgba(37, 211, 102, 0.1); }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero-grid { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .hero-standalone-logo-wrap { min-height: 480px !important; }
}

@media (max-width: 992px) {
  .header-inner { height: auto !important; flex-direction: column !important; gap: 12px !important; align-items: center !important; }
  .header-nav-wrap { order: 2 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; align-items: center !important; gap: 8px !important; overflow-x: auto !important; padding-bottom: 4px !important; }
  .header-nav-row { justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; }
  .header-user-actions-group { order: 3 !important; width: 100% !important; justify-content: center !important; gap: 16px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; padding-top: 10px !important; }
  .header-user-actions { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
  .hero-sec { padding: 16px 0 40px !important; overflow: hidden !important; }
  .hero-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .hero-standalone-logo-wrap { order: 1 !important; margin: 0 !important; min-height: auto !important; height: auto !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; padding: 0 !important; }
  .hero-standalone-logo-wrap .swat-pure-logo { width: 100% !important; max-width: 680px !important; aspect-ratio: 4/3 !important; transform: none !important; transform-origin: center center !important; margin: 0 auto !important; display: block !important; }
  .hero-text-col { order: 2 !important; width: 100% !important; margin-top: -10px !important; }
  .cat-grid-10 { grid-template-columns: repeat(2, 1fr) !important; }
  .prod-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .f-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

@media (max-width: 640px) {
  .container { padding: 0 12px !important; }
  .brand-title { font-size: 1.35rem !important; }
  .brand-sub { display: none !important; }
  .header-nav-wrap { gap: 6px !important; }
  .header-nav-row { gap: 10px !important; }
  .header-nav-row a:not(.nav-home-icon) { font-size: 0.72rem !important; letter-spacing: 0.8px !important; }
  .header-user-actions-group { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .header-search-capsule { width: 100% !important; max-width: 340px !important; justify-content: space-between !important; padding: 4px 6px 4px 16px !important; box-sizing: border-box !important; }
  .search-input { width: 100% !important; font-size: 0.82rem !important; }
  .search-input:focus { width: 100% !important; }
  .header-user-actions { width: 100% !important; justify-content: center !important; gap: 16px !important; }
  .btn-login-link, .cart-pill-btn { font-size: 0.75rem !important; }
  .hero-grid { gap: 8px !important; }
  .hero-standalone-logo-wrap { order: 1 !important; width: 100% !important; max-width: 100% !important; min-height: auto !important; height: auto !important; padding: 0 !important; margin: 0 auto !important; }
  .hero-standalone-logo-wrap .swat-pure-logo { width: 100% !important; max-width: 480px !important; aspect-ratio: 4/3 !important; transform: none !important; transform-origin: center center !important; margin: 0 auto !important; display: block !important; }
  .hero-text-col { order: 2 !important; margin-top: -10px !important; }
  .hero-badge-row { gap: 8px !important; margin-bottom: 12px !important; }
  .badge-mech { font-size: 0.65rem !important; padding: 3px 8px !important; }
  .hero-title { font-size: clamp(2rem, 8.5vw, 2.7rem) !important; line-height: 1 !important; margin-bottom: 14px !important; word-break: break-word !important; }
  .hero-desc { font-size: 0.9rem !important; line-height: 1.5 !important; margin-bottom: 20px !important; }
  .mixer-vumeter-row { flex-wrap: wrap !important; gap: 8px 12px !important; padding: 10px 12px !important; margin-bottom: 20px !important; }
  .vu-label { font-size: 0.68rem !important; }
  .vu-bar { height: 14px !important; }
  .vu-led { width: 5px !important; height: 14px !important; }
  .vu-telemetry-text { font-size: 0.72rem !important; }
  .telemetry-strip { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px 12px !important; margin-bottom: 20px !important; }
  .telem-box:last-child { grid-column: span 2 !important; }
  .telem-box strong { font-size: 1rem !important; }
  .hero-cta-row { flex-direction: column !important; gap: 10px !important; }
  .btn-hero-fire, .btn-hero-wa { width: 100% !important; text-align: center !important; justify-content: center !important; padding: 14px 16px !important; font-size: 0.85rem !important; }
  .cat-grid-10 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .prod-grid-6 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .f-cats { grid-template-columns: 1fr !important; }
  .f-bot { flex-direction: column !important; gap: 10px !important; text-align: center !important; }
}

@media (max-width: 400px) {
  .hero-standalone-logo-wrap .swat-pure-logo { max-width: 300px !important; }
  .hero-title { font-size: 1.85rem !important; }
}

/* ============================================================================
   OVERRIDE LAYER — the IQIT theme-configurator auto-generates a light-theme
   stylesheet (modules/iqitthemeeditor/.../custom_s_1.css) using ID selectors
   (#wrapper, #header, #content-wrapper .page-title, .form-control, ...) that
   otherwise beat every plain-element/class rule above regardless of source
   order. This layer matches or exceeds that specificity everywhere it bleeds
   into a dark, Cyber-Wasteland page so the whole site — not just the home —
   reads as one design, not a light IQIT skin patched with a dark hero.
   ============================================================================ */
#wrapper, #index #wrapper { color: var(--text-main); padding-bottom: 0; }
#content-wrapper .page-title,
#content-wrapper .page-title a:link,
#content-wrapper .page-title a:visited,
#content-wrapper .section-title,
#content-wrapper .section-title a:link,
#content-wrapper .section-title a:visited,
#wrapper .block-title,
#wrapper .block-title a:link,
#wrapper .block-title a:visited {
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  border-bottom-color: var(--border-mech);
}
#wrapper .breadcrumb, #wrapper .breadcrumb a { color: var(--text-dim); }
#left-column .block, #right-column .block { background: transparent; }
.form-control,
.custom-select2, .custom-select2 option,
.bootstrap-touchspin .btn-touchspin {
  background-color: var(--panel-dark) !important;
  color: var(--text-main) !important;
  border-color: var(--border-mech) !important;
}
.dropdown-menu, .autocomplete-suggestions {
  background: var(--panel-dark) !important;
  border-color: var(--border-mech) !important;
}
.dropdown-menu .dropdown-item, .autocomplete-suggestions .dropdown-item { color: var(--text-main) !important; }
.custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio {
  background: var(--panel-dark) !important;
  border-color: var(--border-mech) !important;
  color: var(--text-main) !important;
}
/* Scoped to real PS content (product descriptions, CMS text, reviews) only —
   a bare `a:link` rule here previously caught every custom component link
   sitewide (brand logo, category cards, product titles, CTA buttons, footer)
   because none of them carry a literal class="btn", graying out the whole
   design. */
#content-wrapper .rte-content a:link, #content-wrapper .rte-content a:visited,
#wrapper .comment a:link, #wrapper .comment a:visited { color: var(--text-dim); }
#content-wrapper .rte-content a:hover, #wrapper .comment a:hover { color: var(--neon-cyan); }
.product-price { color: var(--neon-orange) !important; }

/* The IQIT theme-configurator sets html{font-size:14px} (87.5% scale) sitewide.
   Every size in this file is copied verbatim from the reference, which assumes
   a 16px root — restore it so nothing renders undersized. */
html { font-size: 16px; }
@media (max-width: 767px) { html { font-size: 16px; } }

/* ============================================================================
   SITEWIDE BUTTON/CARD REskin — cart, checkout, login, account pages use plain
   Bootstrap .btn-primary/.btn-secondary/.card (black/white/gray by default via
   the IQIT theme-configurator CSS). Bring them in line with the CTA language
   used everywhere else (orange gradient primary actions, dark bordered cards)
   so the whole site reads as one design, not just the home/catalog pages.
   ============================================================================ */
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
  background: var(--swat-gradient-vibrant) !important;
  color: #1a0500 !important;
  border: none !important;
  font-family: var(--font-mech);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.1);
  box-shadow: 0 0 16px var(--neon-orange-glow);
}
.btn-outline-secondary, .btn-secondary {
  background: var(--panel-dark) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-mech) !important;
}
.btn-outline-secondary:hover, .btn-secondary:hover {
  border-color: var(--neon-cyan) !important;
  color: var(--neon-cyan) !important;
}
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-mech) !important;
  color: var(--text-main);
}
.card-body { color: var(--text-main); }
.bootstrap-touchspin .btn-touchspin {
  background: var(--panel-dark) !important;
  border-color: var(--border-mech) !important;
  color: var(--text-main) !important;
}
#wrapper .cart-summary-totals .label,
#wrapper .cart-summary-totals .value,
#wrapper .cart-summary-line { color: var(--text-main); }
#wrapper .cart-total .value, #wrapper .cart-summary-line.cart-total .value {
  color: var(--neon-orange) !important;
  font-family: var(--font-display);
  font-weight: 800;
}

/* Product page tabs (Descripción/Detalles/Reviews) — IQIT sets black tab text
   with no dark-theme counterpart, unreadable against our dark background. */
.nav-tabs .nav-link {
  color: var(--text-dim) !important;
  border: none;
  background: transparent !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  color: #fff !important;
  border-bottom: solid 3px var(--neon-cyan) !important;
}
.iqit-accordion .nav-link:not(.collapsed) { color: var(--neon-cyan) !important; }
#wrapper .block-title, #wrapper .section-title { color: #fff; }
.product-tags a, .product-tags .tag {
  background: var(--panel-dark);
  color: var(--text-dim);
  border: 1px solid var(--border-mech);
}
.iqit-review-star { color: var(--neon-orange) !important; }

/* ============================================================================
   CHAMFERED PRODUCT CARDS — category/search listing, ported from the approved
   reference catalogo-productos-cards-chamfer.html. Reuses the real IQIT
   product-miniature partial's data (add-to-cart form, wishlist hook, DEMO
   audio feature) — only the visual layer changes.
   ============================================================================ */
.products.row.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 28px;
}
/* Each grid cell still contains IQIT's original wrapper div, which carries
   Bootstrap col-X/col-md-X/... classes (a % width from the old flex/row
   layout). Those fight the CSS Grid cell sizing above — the wrapper stayed
   ~145px inside a 439px cell, squashing the chamfer card and overlapping its
   CD tag with the hover-actions icons. The grid alone must own the sizing. */
.products.row.products-grid > .js-product-miniature-wrapper {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}
.chamfer-card {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.45) 0%, rgba(253, 109, 3, 0.3) 100%);
  padding: 1.5px;
  clip-path: polygon(
    var(--chamfer) 0%,
    100% 0%,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0% 100%,
    0% var(--chamfer)
  );
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.chamfer-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--swat-neon-orange) 100%);
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(0, 240, 255, 0.35));
}
.chamfer-card-inner {
  background: var(--card-bg);
  clip-path: polygon(
    calc(var(--chamfer) - 1px) 0%,
    100% 0%,
    100% calc(100% - calc(var(--chamfer) - 1px)),
    calc(100% - calc(var(--chamfer) - 1px)) 100%,
    0% 100%,
    0% calc(var(--chamfer) - 1px)
  );
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.card-art-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #090b10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.card-art-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.chamfer-card:hover .card-art-img {
  transform: scale(1.03);
  filter: drop-shadow(0 6px 16px rgba(0, 240, 255, 0.25));
}
.card-art-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.15) 51%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.25;
}
.card-badge-new {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--neon-lime);
  color: #000;
  font-family: var(--font-mech);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
  z-index: 2;
}
.card-hover-actions {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.25s ease;
}
.chamfer-card:hover .card-hover-actions { opacity: 1; transform: translateX(0); }
/* The real iqitwishlist hook renders its own <a class="btn-iqitwishlist-add">
   heart icon (not .quick-action-btn) — give it the same square button chrome
   so it matches the ported design instead of floating as bare text. */
.card-hover-actions .btn-iqitwishlist-add {
  width: 32px; height: 32px;
  background: rgba(13, 15, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.card-hover-actions .btn-iqitwishlist-add:hover {
  background: var(--swat-neon-orange);
  border-color: var(--swat-neon-orange);
  color: #000 !important;
}
.card-hover-actions .btn-iqitwishlist-add.iqitwishlist-added {
  background: var(--swat-red-orange);
  border-color: var(--swat-red-orange);
}
.card-hover-actions .btn-iqitwishlist-add .added { display: none; }
.card-hover-actions .btn-iqitwishlist-add.iqitwishlist-added .not-added { display: none; }
.card-hover-actions .btn-iqitwishlist-add.iqitwishlist-added .added { display: inline; }
/* iqitcompare hooks into the same displayProductListFunctionalButtons point */
.card-hover-actions .btn-iqitcompare-add {
  width: 32px; height: 32px;
  background: rgba(13, 15, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.card-hover-actions .btn-iqitcompare-add:hover {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #000 !important;
}
.quick-action-btn {
  width: 32px; height: 32px;
  background: rgba(13, 15, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.quick-action-btn:hover {
  background: var(--swat-neon-orange);
  border-color: var(--swat-neon-orange);
  color: #000;
  box-shadow: 0 0 10px var(--neon-orange-glow);
  transform: scale(1.1);
}
.quick-action-btn.active-fav {
  background: var(--swat-red-orange);
  color: #fff;
  border-color: var(--swat-red-orange);
}
.card-cd-tag {
  position: absolute;
  bottom: 10px; left: 12px;
  background: rgba(7, 8, 10, 0.88);
  border: 1px solid var(--border-mech);
  border-left: 3px solid var(--neon-cyan);
  color: #fff;
  font-family: var(--font-mech);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  letter-spacing: 1px;
  z-index: 2;
}
.card-content {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--card-bg) 0%, #0d1017 100%);
}
.card-meta-row { display: flex; justify-content: space-between; align-items: center; }
.card-discipline {
  font-family: var(--font-mech);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.card-discipline span { color: var(--neon-cyan); }
.card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  color: #ffffff !important;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.card-title:hover { color: var(--neon-cyan) !important; }
.card-specs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spec-pill {
  font-family: var(--font-mech);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.spec-pill.bpm { background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.25); color: var(--neon-cyan); }
.spec-pill.time { background: rgba(0, 255, 102, 0.08); border: 1px solid rgba(0, 255, 102, 0.25); color: var(--neon-lime); }
/* Real demo-track mini player (replaces the native <audio controls> widget,
   which rendered as a plain unstyled browser control clashing with the rest
   of the card). audio element itself stays hidden — these buttons/bar drive
   real playback via JS, not a simulation. */
.dj-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(4, 5, 8, 0.6);
  border: 1px solid var(--border-mech);
  border-radius: 20px;
  padding: 5px 10px 5px 5px;
  margin: 8px 0;
}
.dj-audio-player audio { display: none; }
.dj-audio-player .btn-play {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--swat-gradient-vibrant);
  border: none;
  color: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 8px var(--neon-orange-glow);
  transition: transform 0.15s;
}
.dj-audio-player .btn-play:hover { transform: scale(1.08); }
.dj-audio-player .btn-play .icon-pause { display: none; }
.dj-audio-player.playing .btn-play .icon-play { display: none; }
.dj-audio-player.playing .btn-play .icon-pause { display: flex; }
.player-progress-wrapper {
  flex: 1;
  height: 4px;
  background: #1a1e29;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}
.player-progress-bar { height: 100%; width: 0%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan-glow); transition: width 0.1s linear; }
.player-time { flex-shrink: 0; font-family: var(--font-mech); font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.3px; white-space: nowrap; }
.player-download-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
.player-download-btn:hover { color: var(--neon-cyan); }
.card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.card-price-block { display: flex; flex-direction: column; }
.price-sub { font-size: 0.6rem; font-family: var(--font-mech); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.price-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }
.price-currency-sign { color: var(--swat-neon-orange); font-size: 1.3rem; }
.card-actions-row {
  display: grid;
  grid-template-columns: 78px 1fr 42px;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
/* The <form> wrapping qty-stepper + btn-add-cart is a real requirement (both
   fields must submit together) but as a plain block box it was swallowing
   the whole first grid track instead of letting its own two children take
   the 78px/1fr tracks — squashing "Añadir al carrito" into ~78px and
   wrapping it onto 3 lines. display:contents removes the form's own box
   from layout (its children become direct grid items) without touching
   form semantics or submission. */
.card-actions-row > form { display: contents; }
.card-actions-fav { display: flex; }
.card-actions-fav .btn-iqitwishlist-add,
.card-actions-fav .btn-iqitcompare-add {
  width: 42px; height: 38px;
  background: rgba(18, 21, 29, 0.9);
  border: 1px solid var(--border-mech);
  border-radius: 4px;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  padding: 0; margin: 0;
}
.card-actions-fav .btn-iqitwishlist-add:hover,
.card-actions-fav .btn-iqitcompare-add:hover { border-color: var(--swat-neon-orange); color: #fff; background: rgba(253, 109, 3, 0.15); transform: translateY(-2px); }
.card-actions-fav .btn-iqitwishlist-add.iqitwishlist-added { background: var(--swat-red-orange); border-color: var(--swat-red-orange); color: #fff; }
.card-actions-fav .btn-iqitwishlist-add .added { display: none; }
.card-actions-fav .btn-iqitwishlist-add.iqitwishlist-added .not-added { display: none; }
.card-actions-fav .btn-iqitwishlist-add.iqitwishlist-added .added { display: inline; }
/* Only the wishlist heart belongs in this inline slot — compare stays on the
   image-hover overlay only, so it isn't rendered twice per card. */
.card-actions-fav .btn-iqitcompare-add,
.card-actions-fav .col-add-compare { display: none; }
.btn-card-fav {
  height: 38px;
  background: rgba(18, 21, 29, 0.9);
  border: 1px solid var(--border-mech);
  border-radius: 4px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-card-fav:hover { border-color: var(--swat-neon-orange); color: #fff; background: rgba(253, 109, 3, 0.15); transform: translateY(-2px); }
.btn-card-fav.active-fav, .btn-card-fav.active {
  background: var(--swat-red-orange);
  border-color: var(--swat-red-orange);
  color: #fff;
  box-shadow: 0 0 12px var(--neon-orange-glow);
}
.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #080a0f;
  border: 1px solid var(--border-mech);
  border-radius: 4px;
  padding: 3px 6px;
  height: 38px;
}
.qty-btn { background: transparent; border: none; color: #79869a; font-size: 0.9rem; font-weight: 900; cursor: pointer; padding: 0 4px; transition: color 0.15s; }
.qty-btn:hover { color: #fff; }
.qty-input { width: 28px; text-align: center; background: transparent; border: none; color: #fff; font-family: var(--font-mech); font-size: 0.8rem; font-weight: 700; outline: none; }
.btn-add-cart {
  height: 38px;
  background: var(--swat-gradient-vibrant);
  border: none;
  color: #000 !important;
  font-family: var(--font-mech);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.btn-add-cart:hover { transform: translateY(-2px); box-shadow: 0 4px 18px var(--neon-orange-glow); filter: brightness(1.1); }
.btn-add-cart:active { transform: translateY(0); }

/* ============================================================================
   CATEGORY SIDEBAR (real ps_facetedsearch output) + TOOLBAR — reskinned to
   match the chamfer reference's "filter-card" panels instead of the generic
   IQIT/Bootstrap look, without touching the real filter markup/behaviour.
   ============================================================================ */
#left-column, #right-column { color: var(--text-main); }
#search_filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#search_filters .facet {
  background: var(--panel-surface);
  border: 1px solid var(--border-mech);
  border-left: 3px solid var(--swat-neon-orange);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
#search_filters .facet-title {
  font-family: var(--font-mech);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
#search_filters .facet-title span::before { content: '// '; color: var(--neon-cyan); font-family: monospace; }
#search_filters .facet-label {
  color: #c4ccd8;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  padding: 5px 0;
}
#search_filters .facet-label:hover { color: #fff; }
#search_filters .facet-label.active { color: var(--neon-cyan); font-weight: 700; }
#search_filters .custom-checkbox span:not(.color),
#search_filters .custom-radio span {
  background: #090a0f !important;
  border: 1px solid var(--border-mech) !important;
}
#search_filters .custom-checkbox input:checked + span:not(.color) {
  background: var(--neon-cyan) !important;
  border-color: var(--neon-cyan) !important;
}
#search_filters .custom-checkbox input:checked + span .checkbox-checked { color: #000 !important; }
#search_filters .magnitude { color: var(--text-muted); font-family: var(--font-mech); font-size: 0.68rem; }

/* This shop's real sidebar is the subcategory tree (.block-categories), not
   ps_facetedsearch — no attribute facets are indexed, so #search_filters
   above renders empty. Reskin what's actually real here. */
.block-categories {
  background: var(--panel-surface);
  border: 1px solid var(--border-mech);
  border-left: 3px solid var(--swat-neon-orange);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.block-categories .block-title {
  font-family: var(--font-mech);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.block-categories .block-title span::before { content: '// '; color: var(--neon-cyan); font-family: monospace; }
.block-categories .block-title a { color: #fff; text-decoration: none; }
.category-sub-menu { list-style: none; }
.category-sub-menu .category-sub-menu { padding-left: 14px; margin-top: 4px; }
.category-sub-menu > li > a, .category-sub-link {
  display: block;
  color: #9ba4b5 !important;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 0;
  transition: all 0.2s;
}
.category-sub-menu > li > a:hover, .category-sub-link:hover {
  color: #fff !important;
  padding-left: 4px;
}
.collapse-icons i { color: var(--text-dim); }

.products-selection {
  background: var(--panel-surface);
  border: 1px solid var(--border-mech);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.products-selection .showing {
  font-family: var(--font-mech);
  font-size: 0.75rem;
  color: var(--text-dim);
}
.view-switcher a {
  color: var(--text-dim);
  padding: 4px 8px;
}
.view-switcher a.current { color: var(--neon-cyan); }
#js-product-list-top .btn-secondary { background: var(--panel-dark) !important; }

/* ============================================================================
   CATEGORY PAGE SHELL — ported 1:1 from catalogo-productos-cards-chamfer.html:
   2-line header brand, WhatsApp/breadcrumb sub-bar, catalog title banner +
   toolbar, and the custom discipline sidebar. Product page is untouched.
   ============================================================================ */
.brand-sub {
  font-family: var(--font-mech);
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cart-count-badge {
  background: var(--swat-neon-orange);
  color: #000;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 2px;
}

/* Breadcrumb + WhatsApp contact sub-bar (category pages only) */
.top-breadcrumbs-bar {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(10, 12, 17, 0.4);
}
.top-breadcrumbs-inner { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-family: var(--font-mech);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.breadcrumb-trail a { color: var(--text-dim); text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--neon-cyan); }
.breadcrumb-sep { color: var(--border-mech); font-weight: 900; }
.breadcrumb-active { color: var(--swat-neon-orange); font-weight: 700; }
.contact-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--neon-lime);
  font-family: var(--font-mech);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}
.contact-badge-btn:hover { background: rgba(0, 255, 102, 0.2); box-shadow: 0 0 14px rgba(0, 255, 102, 0.3); }

/* Catalog title banner + toolbar */
.catalog-header-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(135deg, rgba(16, 19, 26, 0.85) 0%, rgba(8, 10, 14, 0.95) 100%);
  border: 1px solid var(--border-mech);
  border-left: 4px solid var(--neon-cyan);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.catalog-header-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.catalog-title-group h1 {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--swat-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.catalog-title-group .rte-content { color: var(--text-dim); font-size: 0.88rem; max-width: 620px; }
.catalog-counter-pill {
  font-family: var(--font-mech);
  font-size: 0.75rem;
  color: #b0bac9;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-mech);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.counter-accent { color: var(--neon-cyan); font-weight: 800; }
.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 12px;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 14px; }
.toolbar-label { font-family: var(--font-mech); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.cyber-select {
  background: #090b10;
  border: 1px solid var(--border-mech);
  color: #e2e8f0;
  font-family: var(--font-mech);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.cyber-select:focus, .cyber-select:hover { border-color: var(--neon-cyan); }

/* Sidebar: discipline list, price/duration, promo banner */
.sidebar-panel { display: flex; flex-direction: column; gap: 20px; }
.filter-card {
  background: var(--panel-surface);
  border: 1px solid var(--border-mech);
  border-left: 3px solid var(--swat-neon-orange);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.filter-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  padding-left: 0;
  padding-right: 0;
  cursor: default;
  text-align: left;
}
.swcw-filter-toggle-right { display: flex; align-items: center; gap: 14px; }
.swcw-filter-chevron { display: none; color: var(--text-dim); transition: transform 0.2s; flex-shrink: 0; }

/* Mobile: the sidebar renders before the product grid (order-first), so it
   collapses into a compact accordion by default — otherwise the full filter
   list would push every product below the fold on a small screen. */
@media (max-width: 767px) {
  .filter-card-header { cursor: pointer; margin-bottom: 0; padding-bottom: 16px; }
  .swcw-filter-chevron { display: block; }
  #swcwFilterToggle[aria-expanded="true"] .swcw-filter-chevron { transform: rotate(180deg); }
  .filter-card-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.25s ease, opacity 0.2s ease; }
  .filter-card-body-inner { min-height: 0; overflow: hidden; }
  .filter-card-body.open { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
  .sidebar-panel { gap: 14px; margin-bottom: 20px; }
  .filter-card { padding: 14px 16px; }
  .sidebar-promo-banner { padding: 12px 16px; }
}
.filter-title {
  font-family: var(--font-mech);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
}
.filter-title::before { content: '// '; color: var(--neon-cyan); font-family: monospace; }
.filter-clear { font-family: var(--font-mech); font-size: 0.65rem; color: var(--text-dim); background: transparent; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; }
.filter-clear:hover { color: var(--swat-red-orange); }
.category-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.category-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  color: #9ba4b5;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: all 0.2s;
}
.category-item a:hover { color: #fff; background: rgba(0, 240, 255, 0.06); border-left-color: var(--neon-cyan); padding-left: 14px; }
.category-item.active a { color: #fff; background: rgba(253, 109, 3, 0.12); border-left-color: var(--swat-neon-orange); font-weight: 700; }
.category-count { font-family: var(--font-mech); font-size: 0.68rem; color: var(--text-muted); background: rgba(0, 0, 0, 0.4); padding: 2px 6px; border-radius: 3px; }
.filter-group { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.filter-group-label { font-family: var(--font-mech); font-size: 0.72rem; font-weight: 700; color: #8f9bb3; text-transform: uppercase; letter-spacing: 1px; }
.filter-check-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: #c4ccd8; }
.range-filter-box { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-mech); padding: 12px; border-radius: 4px; margin-top: 8px; }
.range-values { display: flex; justify-content: space-between; font-family: var(--font-mech); font-size: 0.72rem; color: var(--neon-cyan); margin-bottom: 8px; }
.range-slider-input { width: 100%; accent-color: var(--swat-neon-orange); }
.sidebar-promo-banner { background: linear-gradient(145deg, rgba(253, 109, 3, 0.08) 0%, rgba(0, 0, 0, 0.6) 100%); border: 1px dashed rgba(253, 109, 3, 0.3); padding: 18px; }
.promo-tag { font-family: var(--font-mech); font-size: 0.65rem; font-weight: 800; color: var(--swat-neon-orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.promo-headline { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 8px; }
.promo-desc { font-size: 0.76rem; color: var(--text-dim); line-height: 1.4; }

/* ============================================================================
   PIONEER CDJ-3000 PRODUCT PAGE
   Ported from producto-pioneer-player.html. The rack UI (LCD/waveform/VU/
   transport) is pixel-identical to the mockup; the engine behind it is real
   (real <audio> playback + real tracklist), not the mockup's Web Audio synth
   — see pioneer-player.js for what's genuinely real vs. stylized chrome.
   ============================================================================ */
.prev-next-arrows { display: flex; align-items: center; gap: 6px; background: #090c12; border: 1px solid var(--border-mech); padding: 3px 6px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.pioneer-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #10141e; border: 1px solid #1f2738; border-radius: 4px; color: #9ba7ba; font-family: var(--font-mech); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.8px; text-decoration: none; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.pioneer-nav-btn:hover { background: #171d2b; border-color: var(--neon-cyan); color: #fff; box-shadow: 0 0 12px var(--neon-cyan-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.pioneer-nav-btn:active { transform: translateY(1px); box-shadow: none; }
.pioneer-nav-btn svg { transition: transform 0.2s; }
.pioneer-nav-btn.prev:hover svg { transform: translateX(-2px); }
.pioneer-nav-btn.next:hover svg { transform: translateX(2px); }
.pioneer-nav-btn .nav-dot, .prev-next-arrows > .nav-dot { width: 5px; height: 5px; background: var(--swat-neon-orange); border-radius: 50%; box-shadow: 0 0 6px var(--neon-orange-glow); }

.product-hero-grid { display: grid; grid-template-columns: 460px 1fr; gap: 40px; padding: 36px 0 60px; }
.cover-showcase-box { display: flex; flex-direction: column; gap: 20px; }
.cover-chamfer-frame { position: relative; background: linear-gradient(135deg, rgba(0, 240, 255, 0.5) 0%, rgba(253, 109, 3, 0.4) 100%); padding: 2px; clip-path: polygon(22px 0%, 100% 0%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0% 100%, 0% 22px); filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.85)); }
.cover-chamfer-inner { background: #090b10; clip-path: polygon(21px 0%, 100% 0%, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0% 100%, 0% 21px); position: relative; overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 6px; }
.cover-main-img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cover-chamfer-frame:hover .cover-main-img { transform: scale(1.03); }
.cover-badge-cd { position: absolute; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.75); border: 1px solid var(--border-mech); border-right: 4px solid var(--swat-neon-orange); color: #fff; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; padding: 6px 16px; letter-spacing: -0.02em; line-height: 1; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 6px; }
.cover-expand-btn { position: absolute; bottom: 12px; right: 12px; color: var(--neon-cyan); background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px; z-index: 2; }
.cover-lightbox { position: fixed; inset: 0; background: rgba(4,5,8,0.92); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.cover-lightbox.show { opacity: 1; pointer-events: auto; }
.cover-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.8); }

.purchase-dock-card { background: #0b0e16; border: 1px solid var(--border-mech); border-top: 2px solid var(--swat-neon-orange); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.dock-speed-price-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.purchase-top-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.product-ref-id { font-family: var(--font-mech); font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.product-price-val { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--swat-neon-orange); line-height: 1; letter-spacing: -0.02em; }
.product-price-val span { font-size: 1.6rem; color: #fff; }
.tax-subtext { font-family: var(--font-mech); font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.purchase-actions-grid { display: grid; grid-template-columns: 80px 1fr 48px 48px; gap: 10px; align-items: center; }
.qty-control-box { display: flex; align-items: center; justify-content: space-between; background: #040508; border: 1px solid var(--border-mech); border-radius: 4px; height: 48px; padding: 4px 8px; }
.qty-control-box input { width: 30px; text-align: center; background: transparent; border: none; color: #fff; font-family: var(--font-mech); font-size: 0.95rem; font-weight: 800; outline: none; }
.qty-arrows { display: flex; flex-direction: column; gap: 2px; }
.qty-arrow-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.65rem; }
.qty-arrow-btn:hover { color: #fff; }
.btn-buy-main { height: 48px; background: var(--swat-gradient-vibrant); border: none; border-radius: 4px; color: #000; font-family: var(--font-mech); font-size: 0.85rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 20px var(--neon-orange-glow); transition: transform 0.2s, box-shadow 0.2s; }
.btn-buy-main:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(253, 109, 3, 0.7); }
.btn-buy-main:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-square-action { width: 48px; height: 48px; background: #05070a; border: 1px solid var(--border-mech); border-radius: 4px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.btn-square-action:hover { border-color: var(--neon-cyan); color: #fff; transform: translateY(-2px); }
.btn-square-action.active-fav { background: var(--swat-red-orange); border-color: var(--swat-red-orange); color: #fff; box-shadow: 0 0 12px var(--neon-orange-glow); }
.btn-square-action.active-fav svg { fill: currentColor; }
.product-footer-tags { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mech); font-size: 0.72rem; color: var(--text-dim); flex-wrap: wrap; gap: 12px; }
.tags-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-item { background: #05070a; padding: 3px 7px; border-radius: 3px; border: 1px solid #161c28; }
.social-shares { display: flex; gap: 14px; color: var(--text-dim); }
.social-shares a { color: inherit; text-decoration: none; }
.social-shares a:hover { color: var(--neon-cyan); }
.dock-speed-group { display: flex; flex-direction: column; gap: 4px; }
.dock-meta-label { font-family: var(--font-mech); font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

/* Real combinations selector (core product-variants.tpl) restyled to sit as the dock's speed/BPM dropdown. */
.dock-speed-group .product-variants-item { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dock-speed-group .form-control-label { display: none; }
.dock-speed-group select.form-control-select {
  background: #040508; border: 1px solid var(--border-mech); color: #fff;
  font-family: var(--font-mech); font-size: 0.82rem; padding: 7px 12px;
  border-radius: 4px; outline: none; width: 100%; max-width: 260px;
  transition: border-color 0.2s; appearance: none;
}
.dock-speed-group select.form-control-select:focus,
.dock-speed-group select.form-control-select:hover { border-color: var(--neon-cyan); }

/* Real wishlist/compare buttons (iqitwishlist/iqitcompare's own hook markup) restyled to sit as the dock's two square-action slots. */
.dock-square-actions { display: flex; gap: 10px; justify-content: center; }
.dock-square-actions .col-add-wishlist, .dock-square-actions .col-add-compare { display: contents; }
.dock-square-actions .btn-iqitwishlist-add,
.dock-square-actions .btn-iqitcompare-add { width: 48px; height: 48px; background: #05070a; border: 1px solid var(--border-mech); border-radius: 4px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 1.1rem; padding: 0; margin: 0; }
.dock-square-actions .btn-iqitwishlist-add:hover,
.dock-square-actions .btn-iqitcompare-add:hover { border-color: var(--neon-cyan); color: #fff; transform: translateY(-2px); background: #05070a; }
.dock-square-actions .btn-iqitwishlist-add .added { display: none; }
.dock-square-actions .btn-iqitwishlist-add.iqitwishlist-added { background: var(--swat-red-orange); border-color: var(--swat-red-orange); color: #fff; }
.dock-square-actions .btn-iqitwishlist-add.iqitwishlist-added .not-added { display: none; }
.dock-square-actions .btn-iqitwishlist-add.iqitwishlist-added .added { display: inline; }
.dock-square-actions .btn-iqitcompare-add .added { display: none; }
.dock-square-actions .btn-iqitcompare-add.iqitcompare-added .not-added { display: none; }
.dock-square-actions .btn-iqitcompare-add.iqitcompare-added .added { display: inline; color: var(--neon-lime); }

.product-info-col { display: flex; flex-direction: column; gap: 24px; }
.product-title-wrap h1 { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: -0.01em; background: var(--swat-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.product-desc-box { font-size: 0.9rem; color: #b0bac9; background: rgba(13, 16, 23, 0.6); border-left: 3px solid var(--neon-cyan); padding: 12px 18px; border-radius: 0 4px 4px 0; line-height: 1.6; }

.pioneer-exclusive-unit { background: #090c12; border: 1px solid var(--border-mech); border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06); overflow: hidden; position: relative; }
.pioneer-unit-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: #0d1017; border-bottom: 1px solid var(--border-mech); font-family: var(--font-mech); font-size: 0.72rem; }
.pioneer-brand-tag { color: #fff; font-weight: 800; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.pioneer-brand-tag span { background: var(--swat-red-orange); color: #fff; padding: 2px 6px; border-radius: 2px; font-size: 0.6rem; }
.pioneer-sync-badge { color: var(--neon-lime); display: flex; align-items: center; gap: 6px; font-family: var(--font-mech); font-size: 0.68rem; }
.pioneer-sync-badge::before { content: ''; width: 7px; height: 7px; background: var(--neon-lime); border-radius: 50%; box-shadow: 0 0 8px var(--neon-lime-glow); }
.pioneer-screen-body { padding: 20px; background: radial-gradient(circle at 50% 0%, #121722 0%, #080a0f 100%); display: flex; flex-direction: column; gap: 16px; }

.pioneer-track-selector-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pioneer-line-tab { background: #06080d; border: 1px solid var(--border-mech); border-left: 3px solid #232a38; border-radius: 4px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; transition: all 0.2s; }
.pioneer-line-tab:hover { border-color: rgba(0, 240, 255, 0.4); background: #0b0e16; }
.pioneer-line-tab.active { background: linear-gradient(90deg, rgba(253, 109, 3, 0.12) 0%, rgba(11, 14, 22, 0.9) 100%); border-color: var(--border-mech); border-left: 3px solid var(--swat-neon-orange); box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 0 12px rgba(253, 109, 3, 0.08); }
.pioneer-line-tab.active .tab-indicator-dot { background: var(--swat-neon-orange); box-shadow: 0 0 8px var(--neon-orange-glow); }
.pioneer-line-tab.active .tab-title { color: #fff; }
.tab-indicator-dot { width: 10px; height: 10px; border-radius: 50%; background: #232a38; flex-shrink: 0; transition: all 0.2s; }
.tab-info { display: flex; flex-direction: column; flex: 1; }
.tab-title { font-family: var(--font-mech); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.8px; color: #9ba7ba; }
.tab-sub { font-size: 0.65rem; color: var(--text-dim); }
.tab-dur-badge { font-family: var(--font-mech); font-size: 0.72rem; font-weight: 800; color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.2); padding: 3px 8px; border-radius: 3px; }
.pioneer-tag-pill { background: var(--swat-neon-orange); color: #000; font-family: var(--font-mech); font-size: 0.62rem; font-weight: 900; padding: 2px 6px; border-radius: 2px; letter-spacing: 0.5px; }

.pioneer-wave-container { background: #040508; border: 1px solid #1a2233; border-radius: 4px; padding: 12px 14px; position: relative; overflow: hidden; }
.pioneer-wave-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mech); font-size: 0.68rem; color: var(--text-dim); margin-bottom: 8px; }
.wave-canvas-wrap { position: relative; width: 100%; height: 75px; background: #030406; border-radius: 2px; overflow: hidden; cursor: pointer; }
.wave-canvas { width: 100%; height: 100%; display: block; }
.wave-needle { position: absolute; top: 0; bottom: 0; left: 0%; width: 2px; background: var(--swat-neon-orange); box-shadow: 0 0 10px var(--neon-orange-glow); pointer-events: none; transition: left 0.1s linear; }

.pioneer-hud-metrics { display: grid; grid-template-columns: 120px repeat(4, 1fr); gap: 10px; }
.hud-metric-box { background: #06080c; border: 1px solid #161c28; border-radius: 4px; padding: 8px 12px; display: flex; flex-direction: column; }
.metric-label { font-family: var(--font-mech); font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.metric-val { font-family: var(--font-mech); font-size: 1.25rem; font-weight: 800; color: #fff; }
.metric-val.cyan { color: var(--neon-cyan); }
.metric-val.orange { color: var(--swat-neon-orange); }
.metric-val.lime { color: var(--neon-lime); }

.pioneer-controls-row { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding-top: 8px; }
.pioneer-transport-btns { display: flex; gap: 10px; align-items: center; }
.btn-pioneer-track-step { width: 44px; height: 44px; background: #11151f; border: 1px solid var(--border-mech); border-radius: 50%; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: all 0.15s; }
.btn-pioneer-track-step:hover { background: #19202e; border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 12px var(--neon-cyan-glow); transform: scale(1.08); }
.btn-pioneer-track-step:active { transform: scale(0.95); }
.btn-pioneer-cue { width: 52px; height: 52px; background: #141822; border: 2px solid var(--swat-neon-orange); color: var(--swat-neon-orange); border-radius: 50%; font-family: var(--font-mech); font-size: 0.72rem; font-weight: 900; cursor: pointer; box-shadow: 0 0 12px rgba(253, 109, 3, 0.25); transition: all 0.15s; }
.btn-pioneer-cue:hover { background: var(--swat-neon-orange); color: #000; box-shadow: 0 0 18px var(--neon-orange-glow); }
.btn-pioneer-play { width: 62px; height: 62px; background: var(--swat-gradient-vibrant); border: 2px solid #fff; color: #000; border-radius: 50%; font-family: var(--font-mech); font-size: 0.95rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--neon-orange-glow); transition: transform 0.15s, box-shadow 0.15s; }
.btn-pioneer-play:hover { transform: scale(1.06); box-shadow: 0 0 28px rgba(253, 109, 3, 0.8); }
.btn-pioneer-play.playing { background: var(--neon-cyan); box-shadow: 0 0 20px var(--neon-cyan-glow); }

.pioneer-vumeter-block { display: flex; flex-direction: column; gap: 6px; background: #040508; border: 1px solid #161c28; padding: 10px 14px; border-radius: 4px; }
.vu-channel { display: flex; align-items: center; gap: 8px; }
.vu-ch-name { font-family: var(--font-mech); font-size: 0.65rem; font-weight: 800; color: #637086; width: 12px; }
.vu-leds-bar { display: flex; gap: 3px; flex: 1; }
.vu-seg { flex: 1; height: 8px; background: #141720; border-radius: 1px; transition: background 0.05s; }
.vu-seg.lit-green { background: #00ff66; box-shadow: 0 0 6px rgba(0, 255, 102, 0.6); }
.vu-seg.lit-orange { background: #fd6d03; box-shadow: 0 0 6px rgba(253, 109, 3, 0.6); }
.vu-seg.lit-red { background: #ff1a1a; box-shadow: 0 0 8px rgba(255, 26, 26, 0.8); }
.vu-seg.peak-hold { opacity: 0.95; filter: brightness(1.3); }

.pioneer-pitch-box { display: flex; align-items: center; gap: 10px; background: #040508; border: 1px solid #161c28; padding: 8px 14px; border-radius: 4px; }
.pitch-label { font-family: var(--font-mech); font-size: 0.65rem; color: var(--text-dim); }
.pitch-slider { width: 100px; accent-color: var(--neon-cyan); cursor: pointer; }

.tracklist-box { background: #0a0d14; border: 1px solid var(--border-mech); border-radius: 6px; padding: 24px; margin-top: 40px; }
.tracklist-head { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: 0.5px; color: #fff; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.track-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); align-items: center; font-size: 0.84rem; transition: background 0.15s; cursor: pointer; }
.track-row:hover { background: rgba(0, 240, 255, 0.04); }
.track-row.active-playing { background: rgba(253, 109, 3, 0.12) !important; border-left: 3px solid var(--swat-neon-orange); padding-left: 14px; }
.track-row.active-playing .track-num { color: var(--neon-cyan); font-weight: 900; }
.track-num { font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; color: var(--swat-neon-orange); letter-spacing: 0.5px; font-variant-numeric: tabular-nums; display: inline-block; min-width: 28px; }
.track-meta { font-family: var(--font-mech); font-size: 0.72rem; color: var(--text-dim); display: flex; gap: 12px; }
.track-bpm-badge { color: var(--neon-cyan); font-weight: 700; }

/* Spinning-only "effort graph" button + modal (real per-track BPM over real elapsed time) */
.effort-chart-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(253, 109, 3, 0.08); border: 1px solid rgba(253, 109, 3, 0.4);
  color: var(--swat-neon-orange); font-family: var(--font-mech); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase; padding: 7px 14px; border-radius: 4px; cursor: pointer;
  transition: all 0.2s;
}
.effort-chart-btn:hover { background: rgba(253, 109, 3, 0.18); border-color: var(--swat-neon-orange); box-shadow: 0 0 14px rgba(253, 109, 3, 0.25); }
.effort-chart-btn svg { flex-shrink: 0; }

.effort-modal {
  position: fixed; inset: 0; z-index: 2100; background: rgba(4,5,8,0.88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.effort-modal.show { opacity: 1; pointer-events: auto; }
.effort-modal-box {
  background: #0a0d14; border: 1px solid var(--border-mech); border-top: 2px solid var(--swat-neon-orange);
  border-radius: 6px; width: 100%; max-width: 960px; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.effort-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--border-subtle);
}
.effort-modal-title { font-family: var(--font-mech); font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; color: #fff; text-transform: uppercase; }
.effort-modal-close {
  background: transparent; border: none; color: var(--text-dim); font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 4px; transition: color 0.15s;
}
.effort-modal-close:hover { color: var(--swat-red-orange); }
.effort-modal-body { position: relative; padding: 18px 22px 4px; }
.effort-modal-body svg { width: 100%; height: auto; display: block; }
.effort-modal-foot { padding: 10px 22px 18px; font-family: var(--font-mech); font-size: 0.68rem; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.effort-legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--swat-neon-orange); box-shadow: 0 0 6px var(--neon-orange-glow); display: inline-block; }
.effort-hover-dot { cursor: pointer; }
.effort-chart-tooltip {
  position: absolute; pointer-events: none; background: #0f131a; border: 1px solid var(--neon-cyan);
  color: #fff; font-family: var(--font-mech); font-size: 0.7rem; padding: 6px 10px; border-radius: 4px;
  white-space: nowrap; opacity: 0; transition: opacity 0.12s; z-index: 5; transform: translateY(-100%);
}
.effort-chart-tooltip.show { opacity: 1; }

@media (max-width: 640px) {
  .effort-modal-title { font-size: 0.68rem; }
  .effort-chart-btn { font-size: 0.62rem; padding: 6px 10px; }
}

.toast-msg { position: fixed; bottom: 24px; right: 24px; background: #0f131a; border: 1px solid var(--neon-cyan); border-left: 4px solid var(--swat-neon-orange); padding: 14px 20px; border-radius: 4px; z-index: 1000; transform: translateY(120px); opacity: 0; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.toast-msg.show { transform: translateY(0); opacity: 1; }
.toast-msg .toastTitle { font-family: var(--font-mech); font-size: 0.78rem; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.toast-msg .toastSub { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }

@media (max-width: 1024px) {
  .product-hero-grid { grid-template-columns: 1fr; }
  .cover-showcase-box { max-width: 480px; margin: 0 auto; }
  .pioneer-hud-metrics { grid-template-columns: repeat(2, 1fr); }
  .pioneer-track-selector-bar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* auto/1fr/auto doesn't shrink the two auto tracks below their natural
     content width, so the transport buttons + pitch slider overflow a phone
     viewport — stack them instead. */
  .pioneer-controls-row { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .pioneer-pitch-box { width: 100%; max-width: 280px; box-sizing: border-box; }
  .pitch-slider { flex: 1; width: auto; }
  .purchase-actions-grid { grid-template-columns: 1fr; }
  .dock-square-actions { justify-content: center; }
  .qty-control-box { width: 100%; }
  .pioneer-hud-metrics .hud-metric-box:first-child { grid-column: 1 / -1; }
}

/* ============================================================================
   LOGIN + CART — bring these transactional pages up to the same branded
   language as the rest of the site (gradient headings, chamfer-family cards,
   mech-font labels, neon focus states) instead of the generic dark-Bootstrap
   pass they had before.
   ============================================================================ */
#authentication .page-title,
#cart .page-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  background: var(--swat-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#authentication .login-form,
#authentication #customer-form {
  background: var(--card-bg);
  border: 1px solid var(--border-mech);
  border-top: 2px solid var(--swat-neon-orange);
  border-radius: 6px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
#authentication .form-group label {
  font-family: var(--font-mech);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
#authentication input.form-control {
  border-radius: 4px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#authentication input.form-control:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px var(--neon-cyan-glow);
  outline: none;
}
#authentication a { color: var(--neon-cyan); }
#authentication a:hover { color: #fff; }

#cart .cart-summary {
  border-top: 2px solid var(--swat-neon-orange) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
#cart .cart-items { list-style: none; padding: 0; margin: 0; }
#cart .cart-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 0;
  transition: background 0.15s;
}
#cart .cart-item:hover { background: rgba(0, 240, 255, 0.03); }
#cart .product-line-info a, #cart .label { color: var(--text-main) !important; }
#cart .product-price, #cart .cart-summary-line .value { color: var(--text-main); font-family: var(--font-mech); }
#cart .product-line-info.product-price, #cart .current-price { color: var(--swat-neon-orange) !important; font-weight: 700; }
#cart .promo-code-button, #cart #promo-code-alert-danger { color: var(--neon-cyan); }
#cart input.promoCode {
  background: var(--panel-dark) !important;
  border: 1px solid var(--border-mech) !important;
  color: #fff !important;
  border-radius: 4px 0 0 4px !important;
}
#cart .cart-summary-totals { padding: 20px; }
#cart .checkout.cart-detailed-actions .btn { width: 100%; }

/* Sitewide real price styling (see custom.js initSwcwPriceStyling): every
   "<amount> €" found in real page text gets split into these two spans —
   bold white amount, orange currency sign — overriding whatever color the
   surrounding page/context had set. */
.swcw-price-amount { color: #fff !important; font-weight: 800 !important; }
.swcw-price-currency { color: var(--swat-neon-orange) !important; font-weight: 700; }

/* ============================================================================
   MAINTENANCE PAGE — ported from mantenimiento-en-obras.html. The Playdeck
   widget below reuses its real sitewide CSS (.playdeck-* / .deck-*, already
   defined above); this block is only the new hero/status chrome specific to
   this page.
   ============================================================================ */
/* The IQIT theme-configurator's auto-generated stylesheet targets this exact
   real body id with a light-theme rule (#maintenance-page { background:
   #e3e3e3; color: #333333 }), an ID selector that otherwise beats every plain
   `body`/class rule above regardless of source order — same class of bug as
   the sitewide OVERRIDE LAYER further up, just for this one page's own id. */
body#maintenance-page, #maintenance-page {
  background-color: var(--bg) !important;
  color: var(--text-main) !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(253, 109, 3, 0.12), transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(0, 240, 255, 0.08), transparent 45%);
}
#maintenance-page a, #maintenance-page a:link, #maintenance-page a:visited { color: inherit; }
/* While the shop is closed, the Playdeck stays real/playable for preview but
   favorites and add-to-cart come off — cart/account checkout is down, so a
   working "add to cart" button here would just lead nowhere real. Scoped to
   this page only; the same shared Playdeck partial keeps both buttons on the
   homepage. */
#maintenance-page .deck-fav-btn, #maintenance-page .deck-add-cart-btn { display: none !important; }

.status-badge-live {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 204, 0, 0.1);
  border: 1px solid #ffcc00;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--font-mech);
  font-size: 0.75rem;
  color: #ffcc00;
  letter-spacing: 1px;
}
.status-pulse-dot {
  width: 8px; height: 8px;
  background: #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffcc00;
  animation: swcwPulseAlert 1.2s infinite ease-in-out;
}
@keyframes swcwPulseAlert {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.3); }
}
.maintenance-hero-card {
  margin: 32px 0 40px;
  background: #090c12;
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 25px rgba(255, 102, 0, 0.15);
  position: relative;
}
.maintenance-hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 440px; }
.maintenance-image-wrapper { position: relative; background: #000; overflow: hidden; display: flex; align-items: stretch; }
.maintenance-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.1) brightness(0.95); transition: transform 0.6s ease; }
.maintenance-image-wrapper:hover .maintenance-bg-img { transform: scale(1.03); }
.maintenance-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,12,18,0) 60%, rgba(9,12,18,1) 100%),
              linear-gradient(180deg, rgba(9,12,18,0.2) 0%, rgba(9,12,18,0.7) 100%);
  pointer-events: none;
}
.maintenance-img-badge {
  position: absolute; top: 18px; left: 18px;
  background: rgba(0,0,0,0.85);
  border: 1px solid #ffcc00;
  color: #ffcc00;
  font-family: var(--font-mech);
  font-size: 0.7rem; font-weight: 800;
  padding: 6px 12px;
  letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 6px;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.maintenance-content-pane {
  padding: 38px 40px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  background: radial-gradient(circle at 100% 0%, rgba(255, 85, 0, 0.08), transparent 60%);
}
.hazard-stripe-bar { height: 6px; background: var(--hazard-yellow); margin-bottom: 18px; border-radius: 2px; }
.maintenance-tag {
  font-family: var(--font-mech);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 2px;
  color: var(--neon-cyan);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.maintenance-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900; line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 30%, #ffcc00 80%, #fd6d03 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.maintenance-desc { font-size: 0.92rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 22px; max-width: 580px; }
.maintenance-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-card-box { background: #050608; border: 1px solid var(--border-mech); padding: 10px 12px; border-radius: 4px; border-left: 3px solid var(--neon-cyan); }
.stat-label { font-family: var(--font-mech); font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-val { font-family: var(--font-mech); font-size: 1.05rem; font-weight: 800; color: #fff; margin-top: 2px; }
.maintenance-direct-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-wa-direct {
  background: #25D366; color: #000;
  font-family: var(--font-mech);
  font-size: 0.82rem; font-weight: 900; letter-spacing: 1px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
  transition: all 0.2s ease;
}
.btn-wa-direct:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(37, 211, 102, 0.7); background: #2fe672; }
.notice-mini { font-family: var(--font-mech); font-size: 0.72rem; color: var(--text-dim); }

@media (max-width: 900px) {
  .maintenance-hero-grid { grid-template-columns: 1fr; }
  .maintenance-image-wrapper { min-height: 260px; }
  .maintenance-stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   BOOTSTRAP ALERTS — real, sitewide component (empty cart, form errors, GDPR
   notices, out-of-stock notices...) still rendered with Bootstrap's default
   light background, unstyled since first pass. Dark-card treatment with a
   colored left border per severity, matching the rest of the site's panels.
   ============================================================================ */
.alert {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-mech) !important;
  border-left: 3px solid var(--text-dim) !important;
  color: var(--text-main) !important;
  border-radius: 4px;
}
.alert a { color: var(--neon-cyan) !important; }
.alert-warning { border-left-color: var(--swat-neon-orange) !important; }
.alert-danger { border-left-color: var(--swat-red-orange) !important; }
.alert-success { border-left-color: var(--neon-lime) !important; }
.alert-info { border-left-color: var(--neon-cyan) !important; }

/* ============================================================================
   CATEGORY SEO/SEM BLOCK — real per-discipline copy pulled from the site's
   own CMS pages (see CategoryController::getSwatDjsSeoBlock). Sits below the
   product grid.
   ============================================================================ */
.catalog-seo-block {
  max-width: 900px;
  margin: 48px auto 0;
  padding: 32px 0 8px;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}
.catalog-seo-block h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--swat-gold-highlight, var(--swat-neon-orange));
  margin-bottom: 6px;
}
.catalog-seo-block h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--swat-gold-highlight, var(--swat-neon-orange));
  margin: 10px auto 20px;
}
.catalog-seo-img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border-mech);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}
.catalog-seo-text {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ============================================================================
   COOKIE CONSENT POPUP (iqitcookielaw) — real module, was plain grey/red
   Bootstrap defaults. Same chamfer-family dark card as the rest of the site.
   ============================================================================ */
#iqitcookielaw {
  max-width: 360px;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-mech);
  border-top: 2px solid var(--swat-neon-orange);
  border-radius: 6px;
  padding: 18px 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  color: var(--text-main) !important;
}
#iqitcookielaw p, #iqitcookielaw p span {
  font-family: var(--font-mech) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.5px;
  color: var(--text-dim) !important;
  line-height: 1.6;
  margin-bottom: 14px;
}
#iqitcookielaw .btn-primary,
#iqitcookielaw .btn-primary:hover {
  background: var(--swat-gradient-vibrant) !important;
  color: #1a0500 !important;
  border: none !important;
  font-family: var(--font-mech);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 4px;
  box-shadow: 0 0 14px var(--neon-orange-glow);
}

/* Real bug (pre-existing, not introduced tonight): the wishlist "please log
   in" modal (#iqitwishlist-modal) gets its real .show class added correctly
   by the module's own JS, and Bootstrap's real CSS correctly excludes it from
   the base ".fade:not(.show){opacity:0}" rule once shown — but it still
   computes to opacity:0 from some other real rule in the bundled theme.css
   we haven't isolated. This is a direct, guaranteed override rather than a
   root-cause fix, since the actual open/close class toggling is real and
   otherwise correct. */
#iqitwishlist-modal.show { opacity: 1 !important; }
#iqitwishlist-modal .modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-mech);
  border-top: 2px solid var(--swat-neon-orange);
  color: var(--text-main);
}
#iqitwishlist-modal .modal-title { color: #fff; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; }
#iqitwishlist-modal .close { color: var(--text-dim); opacity: 1; }
#iqitwishlist-modal .close:hover { color: #fff; }
#iqitwishlist-modal a { color: var(--neon-cyan); }
#iqitwishlist-modal .btn-primary { background: var(--swat-gradient-vibrant) !important; color: #1a0500 !important; border: none !important; }