/* =========================================================
   VOLTICA STORE — COMPLETE PRODUCT SYSTEM
   ========================================================= */

:root {
  --bg: #050609;
  --panel: rgba(255,255,255,0.045);
  --panel-strong: rgba(255,255,255,0.075);
  --border: rgba(255,255,255,0.13);
  --border-bright: rgba(255,255,255,0.25);
  --text: #f5f7fa;
  --muted: rgba(245,247,250,0.55);
  --soft: rgba(245,247,250,0.35);
  --glow: rgba(150,175,255,0.22);
}

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(120,145,255,0.09), transparent 30%),
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.025), transparent 30%),
    #050609;
  color: var(--text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================================================
   PAGE
   ========================================================= */

.product-page {
  width: 100%;
  min-height: 100vh;
}

.product-container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */

.product-hero {
  position: relative;
  text-align: center;
  padding: 100px 20px 70px;
}

.hero-eyebrow {
  margin-bottom: 24px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;

  color: rgba(255,255,255,0.42);
}

.product-hero h1 {
  margin: 0;

  font-size: clamp(42px, 7vw, 82px);
  line-height: 0.98;
  letter-spacing: -4px;
  font-weight: 800;
}

.product-hero h1 span {
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #aebcff,
      #ffffff
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  max-width: 650px;
  margin: 28px auto 45px;

  font-size: 16px;
  line-height: 1.8;

  color: var(--muted);
}

/* =========================================================
   HERO SPECS
   ========================================================= */

.hero-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  max-width: 760px;
  margin: 0 auto 55px;
}

.hero-spec {
  padding: 20px 10px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: rgba(255,255,255,0.035);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero-spec strong {
  display: block;

  font-size: 20px;
  letter-spacing: -0.5px;
}

.hero-spec span {
  display: block;

  margin-top: 7px;

  font-size: 9px;
  letter-spacing: 1.5px;

  color: var(--soft);
}

/* =========================================================
   OFFER CARD
   ========================================================= */

.offer-card {
  position: relative;

  width: min(560px, 100%);
  margin: 0 auto;

  padding: 35px;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.025)
    );

  border: 1px solid var(--border);

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 35px 90px rgba(0,0,0,0.55);
}

.offer-badge {
  display: inline-block;

  padding: 8px 14px;

  border-radius: 100px;

  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;

  color: rgba(255,255,255,0.65);
}

.offer-price {
  display: flex;
  justify-content: center;
  align-items: baseline;

  margin: 24px 0 8px;
}

.currency {
  font-size: 25px;
}

.price {
  font-size: clamp(62px, 10vw, 90px);
  font-weight: 800;
  letter-spacing: -5px;
}

.cents {
  font-size: 30px;
  font-weight: 700;
}

.usd {
  margin-left: 10px;

  font-size: 10px;
  letter-spacing: 2px;

  color: var(--muted);
}

.offer-description {
  max-width: 400px;
  margin: 0 auto;

  font-size: 12px;
  line-height: 1.7;

  color: var(--muted);
}

.offer-divider {
  height: 1px;

  margin: 28px 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.15),
      transparent
    );
}

.offer-items {
  display: grid;
  gap: 12px;

  text-align: left;
}

.offer-items div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.offer-items div > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  background: rgba(255,255,255,0.08);

  font-size: 10px;
}

.offer-items p {
  margin: 0;

  font-size: 11px;

  color: rgba(255,255,255,0.65);
}

/* =========================================================
   PREORDER BUTTON
   ========================================================= */

.preorder-btn {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 72px;

  margin-top: 32px;

  overflow: hidden;

  border-radius: 18px;

  text-decoration: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.045)
    );

  border: 1px solid rgba(255,255,255,0.25);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 20px 55px rgba(0,0,0,0.45);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.preorder-btn:hover {
  transform: translateY(-4px);

  border-color: rgba(255,255,255,0.45);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 28px 70px rgba(0,0,0,0.6),
    0 0 35px rgba(150,175,255,0.12);
}

.preorder-content {
  display: flex;
  flex-direction: column;

  align-items: center;

  line-height: 1;
}

.preorder-content strong {
  font-size: 14px;
  letter-spacing: 3px;
}

.preorder-content small {
  margin-top: 7px;

  font-size: 8px;
  letter-spacing: 2px;

  color: var(--muted);
}

.preorder-arrow {
  position: absolute;

  right: 22px;

  font-size: 24px;

  transition: transform .3s ease;
}

.preorder-btn:hover .preorder-arrow {
  transform: translateX(7px);
}

.preorder-pulse {
  position: absolute;

  width: 7px;
  height: 7px;

  left: 22px;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 0 10px rgba(255,255,255,0.8);

  animation: pulse 1.7s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% {
    opacity: .35;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* =========================================================
   GENERIC FEATURE BUTTON
   IMPORTANT:
   TEXT IS ABSOLUTELY CENTERED
   ARROW IS INDEPENDENT
   ========================================================= */

.feature-button {
  position: relative;

  display: block;

  width: min(520px, 100%);
  height: 60px;

  margin: 42px auto 0;

  padding: 0;

  border-radius: 16px;

  text-decoration: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.11),
      rgba(255,255,255,0.035)
    );

  border: 1px solid var(--border);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 45px rgba(0,0,0,0.38);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.feature-button:hover {
  transform: translateY(-4px);

  border-color: var(--border-bright);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 25px 60px rgba(0,0,0,0.55);
}

.feature-button > span:first-child {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: max-content;
  max-width: calc(100% - 90px);

  margin: 0;
  padding: 0;

  text-align: center;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2px;

  white-space: nowrap;

  color: #fff;
}

.feature-button > strong {
  position: absolute;

  right: 22px;
  top: 50%;

  transform: translateY(-50%);

  margin: 0;
  padding: 0;

  font-size: 22px;
  font-weight: 400;

  line-height: 1;

  color: #fff;

  transition: transform .3s ease;
}

.feature-button:hover > strong {
  transform: translate(6px, -50%);
}

/* =========================================================
   120H BATTERY
   ========================================================= */

.battery-feature {
  position: relative;

  padding: 100px 45px;

  margin-top: 30px;

  text-align: center;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(150,175,255,0.09),
      transparent 35%
    ),
    rgba(255,255,255,0.025);

  border: 1px solid var(--border);
}

.battery-label {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 4px;

  color: var(--soft);
}

.battery-number {
  margin-top: 18px;

  font-size: clamp(100px, 18vw, 190px);
  line-height: .8;

  font-weight: 800;
  letter-spacing: -10px;

  background:
    linear-gradient(
      180deg,
      #fff,
      rgba(255,255,255,0.35)
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.battery-number span {
  font-size: .35em;
  letter-spacing: -2px;
}

.battery-top h2,
.spatial-content h2,
.anc-content h2,
.tech-feature h2,
.final-offer h2 {
  margin: 40px 0 0;

  font-size: clamp(38px, 6vw, 65px);

  line-height: 1;

  letter-spacing: -3px;
}

.battery-top h2 span,
.spatial-content h2 span,
.anc-content h2 span,
.tech-feature h2 span,
.final-offer h2 span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #fff,
      #aebcff,
      #fff
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.battery-top p {
  max-width: 620px;

  margin: 25px auto 45px;

  font-size: 14px;
  line-height: 1.8;

  color: var(--muted);
}

.battery-system {
  max-width: 700px;

  margin: 0 auto;

  padding: 25px;

  border-radius: 20px;

  background: rgba(0,0,0,0.25);

  border: 1px solid var(--border);
}

.battery-status {
  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 9px;
  letter-spacing: 2px;

  color: var(--soft);
}

.battery-status strong {
  margin-left: auto;

  color: #fff;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 0 12px rgba(255,255,255,0.7);
}

.battery-track {
  height: 5px;

  margin-top: 20px;

  overflow: hidden;

  border-radius: 10px;

  background: rgba(255,255,255,0.07);
}

.battery-progress {
  width: 86%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.25),
      #fff
    );

  animation: batteryMove 4s ease-in-out infinite alternate;
}

@keyframes batteryMove {
  from {
    width: 76%;
  }

  to {
    width: 92%;
  }
}

.battery-fast {
  display: flex;

  align-items: center;

  gap: 20px;

  max-width: 600px;

  margin: 30px auto 0;

  padding: 22px;

  text-align: left;

  border-radius: 18px;

  background: rgba(255,255,255,0.035);

  border: 1px solid var(--border);
}

.fast-icon {
  font-size: 30px;
}

.battery-fast strong {
  font-size: 10px;
  letter-spacing: 2px;
}

.battery-fast p,
.battery-aux p {
  margin: 7px 0 0;

  font-size: 11px;
  line-height: 1.6;

  color: var(--muted);
}

.battery-aux {
  margin-top: 25px;
}

.battery-aux > span {
  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 700;
}

/* =========================================================
   SPATIAL
   ========================================================= */

.spatial-feature {
  position: relative;

  margin-top: 35px;
  padding: 90px 45px;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(150,175,255,0.10),
      transparent 35%
    ),
    rgba(255,255,255,0.025);

  border: 1px solid var(--border);

  text-align: center;
}

.spatial-visual {
  position: relative;

  width: 350px;
  height: 350px;

  margin: 0 auto 60px;

  display: flex;

  align-items: center;
  justify-content: center;

  perspective: 900px;
}

.spatial-ring {
  position: absolute;

  border: 1px solid rgba(255,255,255,0.18);

  border-radius: 50%;

  transform-style: preserve-3d;

  animation: spatialRotate 12s linear infinite;
}

.spatial-ring-1 {
  width: 320px;
  height: 150px;

  transform: rotateX(68deg);
}

.spatial-ring-2 {
  width: 250px;
  height: 120px;

  transform: rotateX(68deg) rotateZ(35deg);

  animation-duration: 9s;
}

.spatial-ring-3 {
  width: 190px;
  height: 95px;

  transform: rotateX(68deg) rotateZ(-35deg);

  animation-duration: 7s;
}

@keyframes spatialRotate {
  to {
    rotate: 360deg;
  }
}

.spatial-node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 0 18px rgba(180,195,255,0.8);
}

.node-1 {
  top: 30px;
  left: 70px;
}

.node-2 {
  top: 75px;
  right: 45px;
}

.node-3 {
  bottom: 50px;
  left: 60px;
}

.node-4 {
  bottom: 85px;
  right: 70px;
}

.spatial-core {
  position: relative;

  width: 170px;
  height: 170px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.035) 60%,
      rgba(0,0,0,0.7)
    );

  border: 1px solid var(--border-bright);

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  box-shadow:
    inset 0 0 35px rgba(255,255,255,0.06),
    0 25px 60px rgba(0,0,0,0.55);
}

.spatial-core span {
  font-size: 7px;
  letter-spacing: 3px;

  color: var(--muted);
}

.spatial-core strong {
  margin: 8px 0;

  font-size: 58px;
  line-height: .8;
}

.spatial-core small {
  font-size: 8px;
  letter-spacing: 2px;

  color: var(--soft);
}

.spatial-content {
  max-width: 800px;

  margin: 0 auto;
}

.spatial-label,
.anc-label,
.tech-label {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 4px;

  color: var(--soft);
}

.spatial-content > p,
.anc-content > p,
.tech-feature-content > p {
  max-width: 650px;

  margin: 25px auto;

  font-size: 14px;
  line-height: 1.8;

  color: var(--muted);
}

.spatial-features {
  display: grid;
  grid-template-columns: repeat(3,1fr);

  gap: 12px;

  margin-top: 40px;
}

.spatial-features > div {
  padding: 22px;

  text-align: left;

  border-radius: 18px;

  background: rgba(255,255,255,0.035);

  border: 1px solid var(--border);
}

.spatial-features span,
.anc-specs span {
  display: block;

  margin-bottom: 14px;

  font-size: 9px;

  letter-spacing: 2px;

  color: var(--soft);
}

.spatial-features strong,
.anc-specs strong {
  font-size: 10px;

  letter-spacing: 1.5px;
}

.spatial-features p,
.anc-specs p {
  margin: 9px 0 0;

  font-size: 11px;
  line-height: 1.6;

  color: var(--muted);
}

/* =========================================================
   ANC — CLEAN 3D
   ========================================================= */

.anc-feature {
  position: relative;

  margin-top: 35px;

  padding: 95px 45px;

  text-align: center;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(150,175,255,0.11),
      transparent 35%
    ),
    rgba(255,255,255,0.025);

  border: 1px solid var(--border);

  overflow: hidden;
}


/* 3D STAGE */

.anc-3d-stage {
  position: relative;

  width: 360px;
  height: 300px;

  margin: 0 auto 60px;

  display: flex;

  align-items: center;
  justify-content: center;

  perspective: 1000px;

  transform-style: preserve-3d;

  isolation: isolate;
}


/* DISCS */

.anc-disc {
  position: absolute;

  border-radius: 50%;

  transform-style: preserve-3d;

  pointer-events: none;

  border: 1px solid rgba(255,255,255,0.15);

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.055),
      transparent 70%
    );
}

.disc-back {
  width: 330px;
  height: 120px;

  transform:
    rotateX(65deg)
    translateZ(-55px);

  opacity: .35;

  animation: ancBack 6s ease-in-out infinite;
}

.disc-mid {
  width: 275px;
  height: 105px;

  transform:
    rotateX(65deg)
    translateZ(-10px);

  opacity: .5;

  animation: ancMid 5s ease-in-out infinite;
}

.disc-front {
  width: 220px;
  height: 90px;

  transform:
    rotateX(65deg)
    translateZ(35px);

  opacity: .7;

  animation: ancFront 4s ease-in-out infinite;
}

@keyframes ancBack {
  0%,100% {
    transform:
      rotateX(65deg)
      translateZ(-55px)
      scale(.92);
  }

  50% {
    transform:
      rotateX(65deg)
      translateZ(-55px)
      scale(1.06);
  }
}

@keyframes ancMid {
  0%,100% {
    transform:
      rotateX(65deg)
      translateZ(-10px)
      scale(.9);
  }

  50% {
    transform:
      rotateX(65deg)
      translateZ(-10px)
      scale(1.07);
  }
}

@keyframes ancFront {
  0%,100% {
    transform:
      rotateX(65deg)
      translateZ(35px)
      scale(.9);
  }

  50% {
    transform:
      rotateX(65deg)
      translateZ(35px)
      scale(1.08);
  }
}


/* ENERGY RINGS */

.anc-energy {
  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(180,195,255,0.22);

  transform-style: preserve-3d;

  pointer-events: none;
}

.energy-1 {
  width: 255px;
  height: 255px;

  transform: rotateX(72deg) rotateZ(20deg);

  animation: energyRotate 10s linear infinite;
}

.energy-2 {
  width: 205px;
  height: 205px;

  transform: rotateX(72deg) rotateZ(-30deg);

  animation: energyRotate 7s linear infinite reverse;
}

.energy-3 {
  width: 155px;
  height: 155px;

  transform: rotateX(72deg);

  animation: energyRotate 5s linear infinite;
}

@keyframes energyRotate {
  to {
    rotate: 360deg;
  }
}


/* ANC CORE */

.anc-core {
  position: relative;

  z-index: 20;

  width: 170px;
  height: 170px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,0.20),
      rgba(255,255,255,0.045) 52%,
      rgba(0,0,0,0.82)
    );

  border: 1px solid rgba(255,255,255,0.27);

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  box-shadow:
    inset 8px 8px 25px rgba(255,255,255,0.06),
    inset -15px -20px 30px rgba(0,0,0,0.6),
    0 25px 70px rgba(0,0,0,0.65),
    0 0 60px rgba(150,175,255,0.13);

  transform:
    translateZ(90px);

  animation: ancCoreFloat 4s ease-in-out infinite;
}

@keyframes ancCoreFloat {
  0%,100% {
    transform:
      translateZ(90px)
      translateY(0);
  }

  50% {
    transform:
      translateZ(105px)
      translateY(-7px);
  }
}

.anc-core-glow {
  position: absolute;

  inset: -25px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(150,175,255,0.15),
      transparent 65%
    );

  filter: blur(15px);

  z-index: -1;
}

.anc-core > span {
  max-width: 120px;

  font-size: 6px;
  line-height: 1.5;

  letter-spacing: 2px;

  color: var(--soft);

  text-align: center;
}

.anc-core > strong {
  margin-top: 8px;

  font-size: 62px;
  line-height: .75;

  font-weight: 800;

  letter-spacing: -4px;

  color: #fff;

  text-shadow:
    0 0 25px rgba(180,195,255,0.2);
}

.anc-core > small {
  margin-top: 9px;

  font-size: 9px;

  letter-spacing: 3px;

  color: var(--muted);
}


/* ANC CONTENT */

.anc-content {
  max-width: 800px;

  margin: 0 auto;
}

.anc-specs {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 12px;

  max-width: 800px;

  margin: 40px auto 0;
}

.anc-specs > div {
  padding: 22px;

  text-align: left;

  border-radius: 18px;

  background: rgba(255,255,255,0.035);

  border: 1px solid var(--border);
}


/* =========================================================
   40MM TECH
   ========================================================= */

.tech-feature {
  position: relative;

  margin-top: 35px;

  padding: 100px 45px;

  text-align: center;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255,255,255,0.07),
      transparent 35%
    ),
    rgba(255,255,255,0.025);

  border: 1px solid var(--border);
}

.tech-feature-content {
  max-width: 800px;

  margin: 0 auto;
}

.tech-number {
  margin-top: 25px;

  font-size: clamp(100px, 18vw, 180px);

  line-height: .8;

  font-weight: 800;

  letter-spacing: -9px;

  background:
    linear-gradient(
      180deg,
      #fff,
      rgba(255,255,255,0.28)
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}

.tech-number span {
  font-size: .28em;

  letter-spacing: -1px;
}

.tech-tags {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 30px;
}

.tech-tags span {
  padding: 9px 13px;

  border-radius: 100px;

  background: rgba(255,255,255,0.045);

  border: 1px solid var(--border);

  font-size: 8px;

  letter-spacing: 1.5px;

  color: var(--muted);
}


/* =========================================================
   VIDEOS
   ========================================================= */

.product-video {
  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 18px;

  margin-top: 35px;
}

.product-video video {
  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  border-radius: 22px;

  border: 1px solid var(--border);

  background: #000;

  box-shadow:
    0 25px 70px rgba(0,0,0,0.45);
}


/* =========================================================
   GLASS GALLERY
   ========================================================= */

.product-gallery {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 15px;

  margin-top: 35px;
}

.glass-photo {
  position: relative;

  padding: 10px;

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.025)
    );

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 20px 55px rgba(0,0,0,0.4);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.glass-photo::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.12),
      transparent 35%
    );

  pointer-events: none;
}

.glass-photo:hover {
  transform: translateY(-6px);

  border-color: rgba(255,255,255,0.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 30px 70px rgba(0,0,0,0.55);
}

.glass-photo img {
  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 14px;
}


/* =========================================================
   FINAL OFFER
   ========================================================= */

.final-offer {
  position: relative;

  margin: 35px 0 80px;

  padding: 100px 30px;

  text-align: center;

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(150,175,255,0.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.075),
      rgba(255,255,255,0.02)
    );

  border: 1px solid var(--border);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 35px 100px rgba(0,0,0,0.55);
}

.final-offer-label {
  font-size: 9px;

  letter-spacing: 4px;

  color: var(--soft);
}

.final-offer h2 {
  max-width: 800px;

  margin-left: auto;
  margin-right: auto;
}

.final-offer > p {
  margin: 25px auto;

  color: var(--muted);
}

.final-price {
  margin-top: 35px;

  font-size: clamp(50px, 9vw, 85px);

  font-weight: 800;

  letter-spacing: -4px;
}

.final-price small {
  font-size: 10px;

  letter-spacing: 2px;

  color: var(--muted);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .product-container {
    width: min(100% - 20px, 1180px);
  }

  .product-hero {
    padding-top: 65px;
  }

  .product-hero h1 {
    font-size: 44px;

    letter-spacing: -2.5px;
  }

  .hero-specs {
    grid-template-columns: repeat(2,1fr);
  }

  .offer-card {
    padding: 25px 18px;
  }

  .battery-feature,
  .spatial-feature,
  .anc-feature,
  .tech-feature {
    padding: 70px 18px;
  }

  .battery-number,
  .tech-number {
    letter-spacing: -6px;
  }

  .spatial-visual,
  .anc-3d-stage {
    transform: scale(.82);

    margin-top: -20px;
    margin-bottom: 20px;
  }

  .spatial-features,
  .anc-specs {
    grid-template-columns: 1fr;
  }

  .product-video {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    grid-template-columns: repeat(2,1fr);
  }

  .feature-button {
    height: 58px;
  }

  .feature-button > span:first-child {
    font-size: 8px;
    letter-spacing: 1.4px;
  }

  .feature-button > strong {
    right: 17px;
  }

  .preorder-btn {
    height: 64px;
  }

  .preorder-content strong {
    font-size: 12px;
  }

  .preorder-arrow {
    right: 17px;
  }

  .preorder-pulse {
    left: 17px;
  }

}

@media (max-width: 430px) {

  .hero-spec strong {
    font-size: 17px;
  }

  .hero-spec span {
    font-size: 8px;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .spatial-visual,
  .anc-3d-stage {
    transform: scale(.72);
  }

   }
/* =========================================================
   VOLTICA STORE — GLASS / NEXT-GEN
   ========================================================= */

.store-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(90, 90, 110, 0.16), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(40, 80, 120, 0.13), transparent 28%),
        radial-gradient(circle at 50% 80%, rgba(120, 120, 140, 0.08), transparent 35%),
        #030405;
    color: #fff;
    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.store-header {
    min-height: 70vh;
    padding: 35px 6vw 80px;

    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;

    position: relative;
}

.store-header::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;

    left: 50%;
    top: 5%;

    transform: translateX(-50%);

    background: radial-gradient(
        circle,
        rgba(255,255,255,0.08),
        transparent 65%
    );

    filter: blur(30px);
    pointer-events: none;
}


.store-brand {
    color: #fff;
    text-decoration: none;

    font-size: 20px;
    font-weight: 700;
    letter-spacing: 5px;

    position: relative;
    z-index: 2;
}

.store-brand span {
    display: block;

    font-size: 8px;
    letter-spacing: 4px;

    opacity: 0.45;

    margin-top: 4px;
}


.store-header-center {
    text-align: center;

    padding-top: 15vh;

    position: relative;
    z-index: 2;
}

.store-label {
    font-size: 10px;
    letter-spacing: 5px;
    color: rgba(255,255,255,0.45);

    margin-bottom: 24px;
}


.store-header h1 {
    margin: 0;

    font-size: clamp(52px, 8vw, 110px);
    font-weight: 200;

    letter-spacing: -5px;

    line-height: 0.95;
}

.store-header h1 span {
    display: block;

    color: rgba(255,255,255,0.42);

    font-style: italic;
}


.store-header-center p {
    max-width: 500px;

    margin: 35px auto 0;

    color: rgba(255,255,255,0.5);

    line-height: 1.8;
}


.store-back {
    justify-self: end;

    color: rgba(255,255,255,0.65);
    text-decoration: none;

    font-size: 10px;
    letter-spacing: 3px;

    padding: 14px 20px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 999px;

    background: rgba(255,255,255,0.035);

    backdrop-filter: blur(18px);

    transition: 0.3s ease;
}

.store-back:hover {
    color: #fff;

    border-color: rgba(255,255,255,0.35);

    background: rgba(255,255,255,0.08);

    transform: translateY(-2px);
}


/* =========================================================
   GLASS CATEGORY MENU
   ========================================================= */

.store-categories {
    width: min(1180px, 88%);

    margin: -90px auto 120px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    position: relative;
    z-index: 5;
}


.category-glass {
    min-height: 150px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    text-decoration: none;
    color: #fff;

    border: 1px solid rgba(255,255,255,0.11);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.025)
        );

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 20px 60px rgba(0,0,0,0.35);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;

    overflow: hidden;

    position: relative;
}


.category-glass::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -60px;
    top: -60px;

    background: rgba(255,255,255,0.07);

    filter: blur(30px);

    border-radius: 50%;
}


.category-glass:hover,
.category-glass.active {

    transform: translateY(-8px);

    border-color: rgba(255,255,255,0.3);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.035)
        );
}


.category-number {
    font-size: 10px;

    color: rgba(255,255,255,0.35);

    letter-spacing: 2px;
}


.category-glass strong {
    font-size: 15px;

    letter-spacing: 3px;
}


.category-glass small {
    font-size: 8px;

    color: rgba(255,255,255,0.4);

    letter-spacing: 2px;
}


/* =========================================================
   STORE SECTION
   ========================================================= */

.store-section {
    width: min(1180px, 88%);

    margin: 0 auto;

    padding-bottom: 130px;
}


.store-section-heading {

    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-bottom: 55px;
}


.section-index {
    display: block;

    margin-bottom: 18px;

    font-size: 9px;

    letter-spacing: 4px;

    color: rgba(255,255,255,0.35);
}


.store-section-heading h2 {

    margin: 0;

    font-size: clamp(42px, 6vw, 80px);

    font-weight: 200;

    letter-spacing: -3px;
}

.store-section-heading h2 span {
    color: rgba(255,255,255,0.4);

    font-style: italic;
}


.store-section-heading > p {
    max-width: 220px;

    margin: 0;

    color: rgba(255,255,255,0.4);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.store-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


.store-product {

    position: relative;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.105),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(255,255,255,0.1);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 30px 80px rgba(0,0,0,0.4);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease;

}


.store-product:hover {

    transform: translateY(-10px);

    border-color: rgba(255,255,255,0.28);

}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-image {

    height: 380px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.1),
            rgba(0,0,0,0.3) 65%
        );
}


.product-image img {

    width: 82%;
    height: 82%;

    object-fit: contain;

    position: relative;
    z-index: 2;

    transition:
        transform 0.6s cubic-bezier(.2,.8,.2,1);
}


.store-product:hover
.product-image img {

    transform:
        scale(1.08)
        translateY(-5px);
}


.image-reflection {

    position: absolute;

    width: 70%;
    height: 35%;

    bottom: 4%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,0.18),
            transparent 70%
        );

    filter: blur(25px);

    opacity: 0.5;
}


.product-badge {

    position: absolute;

    left: 18px;
    top: 18px;

    z-index: 5;

    padding: 8px 12px;

    border-radius: 999px;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(15px);

    font-size: 8px;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.75);
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.product-info {

    padding: 28px;
}


.product-category {

    font-size: 8px;

    letter-spacing: 3px;

    color: rgba(255,255,255,0.35);

    margin-bottom: 12px;
}


.product-info h3 {

    margin: 0 0 12px;

    font-size: 25px;

    font-weight: 400;
}


.product-info > p {

    min-height: 62px;

    margin: 0;

    color: rgba(255,255,255,0.45);

    font-size: 12px;

    line-height: 1.65;
}


.product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.product-price {

    font-size: 22px;

    font-weight: 400;
}


.product-price small {

    font-size: 8px;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.35);
}


.product-button {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    color: #fff;

    text-decoration: none;

    border-radius: 999px;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.13);

    backdrop-filter: blur(15px);

    font-size: 9px;

    letter-spacing: 2px;

    transition: 0.3s ease;
}


.product-button span {

    font-size: 15px;

    transition: transform 0.3s ease;
}


.product-button:hover {

    background: rgba(255,255,255,0.16);

    border-color: rgba(255,255,255,0.3);
}


.product-button:hover span {

    transform: translateX(5px);
}


/* =========================================================
   COMING SOON
   ========================================================= */

.store-coming {

    width: min(1180px, 88%);

    min-height: 280px;

    margin: 0 auto 30px;

    padding: 45px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-radius: 28px;

    border: 1px solid rgba(255,255,255,0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.015)
        );

    backdrop-filter: blur(20px);
}


.store-coming > span {

    font-size: 8px;

    letter-spacing: 4px;

    color: rgba(255,255,255,0.3);

    margin-bottom: 20px;
}


.store-coming h2 {

    margin: 0;

    font-size: 50px;

    font-weight: 200;
}


.store-coming small {

    display: block;

    margin-top: 10px;

    font-size: 8px;

    letter-spacing: 4px;

    color: rgba(255,255,255,0.3);
}


/* =========================================================
   FOOTER
   ========================================================= */

.store-footer {

    width: min(1180px, 88%);

    margin: 100px auto 0;

    padding: 50px 0;

    border-top:
        1px solid rgba(255,255,255,0.08);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.store-footer p {

    margin: 0;

    color: rgba(255,255,255,0.35);

    font-size: 11px;
}


.store-footer small {

    color: rgba(255,255,255,0.25);

    font-size: 8px;

    letter-spacing: 2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .store-header {

        min-height: 65vh;

        grid-template-columns: 1fr;

        padding: 25px 6vw 70px;
    }

    .store-header-center {

        padding-top: 18vh;
    }

    .store-back {

        position: absolute;

        right: 6vw;
        top: 25px;
    }


    .store-categories {

        grid-template-columns:
            repeat(2, 1fr);

        margin-top: -60px;
    }


    .store-section-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }


    .store-grid {

        grid-template-columns: 1fr;
    }


    .product-image {

        height: 330px;
    }


    .store-footer {

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 520px) {

    .store-header h1 {

        font-size: 52px;

        letter-spacing: -3px;
    }


    .store-categories {

        width: 90%;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .category-glass {

        min-height: 120px;
    }


    .store-section {

        width: 90%;
    }


    .store-coming {

        width: 90%;
    }


    .store-coming h2 {

        font-size: 38px;
    }


    .product-info {

        padding: 23px;
    }

   }
/* IMAGE DEBUG */
.store-product .product-image img {
    display: block !important;
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    position: relative !important;
    z-index: 20 !important;

    filter: none !important;
}
.store-product .product-image {
    overflow: visible !important;
}
.store-menu {
    position: relative;
    z-index: 1000;
}

.store-menu-button {
    appearance: none;
    border: 1px solid rgba(255,255,255,.15);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    color: white;

    padding: 13px 20px;
    border-radius: 14px;

    cursor: pointer;

    letter-spacing: .16em;
    font-size: 11px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.store-menu-button:hover {
    transform: translateY(-2px);

    border-color: rgba(255,255,255,.35);

    box-shadow:
        0 12px 40px rgba(0,0,0,.35),
        inset 0 0 20px rgba(255,255,255,.05);
}


.store-dropdown {

    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 245px;

    padding: 10px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(30,30,35,.78),
            rgba(8,8,12,.68)
        );

    border: 1px solid rgba(255,255,255,.14);

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    box-shadow:
        0 25px 80px rgba(0,0,0,.55),
        inset 0 1px rgba(255,255,255,.08);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-12px)
        scale(.96);

    transform-origin: top right;

    transition:
        opacity .25s ease,
        transform .3s cubic-bezier(.2,.8,.2,1),
        visibility .3s;
}

.store-menu:hover .store-dropdown,
.store-menu:focus-within .store-dropdown {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.store-dropdown a {

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 15px;

    border-radius: 14px;

    color: rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 13px;
    letter-spacing: .05em;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.store-dropdown a span {

    width: 25px;

    color: rgba(255,255,255,.28);

    font-size: 9px;
    letter-spacing: .12em;
}

.store-dropdown a:hover {

    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.035)
        );

    transform: translateX(4px);
}
/* =========================================================
   VOLTICA — PRODUCT GLASS GALLERY
   ========================================================= */

.product-image {
    position: relative;
    min-height: 430px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 18px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 25px 70px rgba(0,0,0,.35);
}


/* MAIN IMAGE */

.product-main-photo {
    position: relative;

    flex: 1;

    min-height: 340px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 22px;
}


.main-product-img {

    width: 100%;
    height: 340px;

    object-fit: contain;

    display: block;

    opacity: 1;

    transition:
        opacity .16s ease,
        transform .5s cubic-bezier(.2,.8,.2,1);

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,.55));
}


.product-main-photo:hover
.main-product-img {

    transform: scale(1.055);
}


/* SCANNING TECH EFFECT */

.image-scan {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255,255,255,.08) 50%,
            transparent 100%
        );

    transform: translateY(-100%);

    animation: volticaScan 5s ease-in-out infinite;

    opacity: .35;
}


@keyframes volticaScan {

    0% {
        transform: translateY(-100%);
    }

    45%,
    100% {
        transform: translateY(100%);
    }

}


/* THUMBNAIL BAR */

.product-thumbnails {

    display: flex;

    gap: 9px;

    padding: 10px;

    margin-top: 10px;

    border-radius: 18px;

    background:
        rgba(0,0,0,.28);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow-x: auto;

    scrollbar-width: none;
}


.product-thumbnails::-webkit-scrollbar {
    display: none;
}


/* INDIVIDUAL THUMBNAIL */

.product-thumb {

    position: relative;

    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    padding: 0;

    border-radius: 13px;

    overflow: hidden;

    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    border:
        1px solid rgba(255,255,255,.10);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.product-thumb img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    opacity: .65;

    transition:
        transform .35s ease,
        opacity .35s ease;
}


.product-thumb span {

    position: absolute;

    bottom: 4px;
    right: 5px;

    font-size: 7px;

    letter-spacing: .12em;

    color: rgba(255,255,255,.65);

    text-shadow:
        0 1px 4px rgba(0,0,0,.8);
}


.product-thumb:hover {

    transform:
        translateY(-4px)
        scale(1.04);

    border-color:
        rgba(255,255,255,.30);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 20px rgba(255,255,255,.06);
}


.product-thumb:hover img {

    opacity: 1;

    transform: scale(1.08);
}


/* ACTIVE THUMBNAIL */

.product-thumb.active {

    border-color:
        rgba(255,255,255,.65);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.15),
        0 0 25px rgba(255,255,255,.12);
}


.product-thumb.active img {

    opacity: 1;
}


/* MOBILE */

@media (max-width: 600px) {

    .product-image {
        min-height: 390px;
        padding: 12px;
    }

    .product-main-photo {
        min-height: 300px;
    }

    .main-product-img {
        height: 300px;
    }

    .product-thumb {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }

}
/* =====================================================
   VOLTICA PRODUCT — THUMBNAIL GALLERY OVERRIDE
   ===================================================== */

.dynamic-gallery {
    width: 100%;
}

.dynamic-main-image {
    position: relative;
    width: 100%;
    height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    border-radius: 28px;

    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.12);
}

.dynamic-main-image > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    position: relative !important;
    z-index: 2 !important;

    transition: opacity .2s ease;
}


/* THUMBNAIL CONTAINER */

.dynamic-thumbnails {
    display: flex !important;

    width: 100% !important;

    margin-top: 14px !important;
    padding: 10px !important;

    gap: 10px !important;

    overflow-x: auto !important;

    background: rgba(255,255,255,0.045) !important;

    border: 1px solid rgba(255,255,255,0.12) !important;

    border-radius: 20px !important;

    box-sizing: border-box !important;

    scrollbar-width: none;
}

.dynamic-thumbnails::-webkit-scrollbar {
    display: none;
}


/* EACH THUMBNAIL */

.dynamic-thumb {
    position: relative !important;

    flex: 0 0 78px !important;

    width: 78px !important;
    height: 78px !important;

    min-width: 78px !important;
    min-height: 78px !important;

    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    cursor: pointer;

    border-radius: 14px !important;

    background: rgba(255,255,255,0.06) !important;

    border: 1px solid rgba(255,255,255,0.15) !important;

    box-sizing: border-box !important;
}


/* THUMBNAIL IMAGE */

.dynamic-thumb img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;

    opacity: .65 !important;

    visibility: visible !important;

    position: relative !important;
    z-index: 1 !important;
}


/* NUMBER */

.dynamic-thumb span {
    position: absolute !important;

    right: 5px !important;
    bottom: 4px !important;

    z-index: 5 !important;

    padding: 2px 4px;

    border-radius: 4px;

    background: rgba(0,0,0,.65);

    color: white;

    font-size: 8px;

    pointer-events: none;
}


/* ACTIVE */

.dynamic-thumb.active {
    border-color: rgba(255,255,255,.8) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.2),
        0 0 25px rgba(255,255,255,.12);
}

.dynamic-thumb.active img {
    opacity: 1 !important;
}


/* HOVER */

.dynamic-thumb:hover {
    transform: translateY(-3px);

    border-color: rgba(255,255,255,.45) !important;
}

.dynamic-thumb:hover img {
    opacity: 1 !important;
}
/* =========================================================
   VOLTICA PRODUCT VIEW — GALLERY
   ========================================================= */

.dynamic-gallery {
    width: 100%;
    max-width: 760px;
}

.dynamic-main-image {
    position: relative;
    width: 100%;
    height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(255,255,255,0.14);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 30px 80px rgba(0,0,0,0.45);
}

.dynamic-main-image > img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    position: relative !important;
    z-index: 2 !important;

    transition: opacity .18s ease;
}


/* =========================
   THUMBNAILS
   ========================= */

.dynamic-thumbnails {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin-top: 14px !important;
    padding: 10px !important;

    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border-radius: 20px !important;

    background: rgba(10,10,14,0.72) !important;

    border: 1px solid rgba(255,255,255,0.14) !important;

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    scrollbar-width: none;
}

.dynamic-thumbnails::-webkit-scrollbar {
    display: none;
}


/* =========================
   THUMBNAIL
   ========================= */

.dynamic-thumbnails .dynamic-thumb {

    position: relative !important;

    display: block !important;

    flex: 0 0 76px !important;

    width: 76px !important;
    min-width: 76px !important;

    height: 76px !important;
    min-height: 76px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    cursor: pointer;

    border-radius: 13px !important;

    background: rgba(255,255,255,0.06) !important;

    border: 1px solid rgba(255,255,255,0.16) !important;

    box-sizing: border-box !important;

    appearance: none !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.dynamic-thumbnails .dynamic-thumb img {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    opacity: 0.72 !important;
    visibility: visible !important;

    z-index: 1 !important;
}


.dynamic-thumbnails .dynamic-thumb span {

    position: absolute !important;

    right: 5px !important;
    bottom: 4px !important;

    z-index: 5 !important;

    padding: 3px 5px !important;

    border-radius: 5px !important;

    background: rgba(0,0,0,0.72) !important;

    color: #fff !important;

    font-size: 8px !important;

    line-height: 1 !important;

    pointer-events: none !important;
}


/* ACTIVE */

.dynamic-thumbnails .dynamic-thumb.active {

    border-color: rgba(255,255,255,0.85) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.18),
        0 0 25px rgba(255,255,255,0.12);

    transform: translateY(-2px);
}

.dynamic-thumbnails .dynamic-thumb.active img {
    opacity: 1 !important;
}


/* HOVER */

.dynamic-thumbnails .dynamic-thumb:hover {

    transform: translateY(-4px) scale(1.03);

    border-color: rgba(255,255,255,0.5) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.45);
}

.dynamic-thumbnails .dynamic-thumb:hover img {
    opacity: 1 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .dynamic-gallery {
        max-width: 100%;
    }

    .dynamic-main-image {
        height: 390px;
    }

    .dynamic-thumbnails .dynamic-thumb {
        flex-basis: 64px !important;
        width: 64px !important;
        min-width: 64px !important;

        height: 64px !important;
        min-height: 64px !important;
    }
}
/* =========================================================
   VOLTICA — GLASSMORPHIC PRODUCT GALLERY
   ========================================================= */

.voltica-glass-gallery {

    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 18px;
    padding: 14px;

    box-sizing: border-box;

    overflow-x: auto;

    border-radius: 24px;

    /* GLASS */

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.13),
            rgba(255,255,255,0.035)
        );

    border:
        1px solid rgba(255,255,255,0.20);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 20px 60px rgba(0,0,0,0.35);

    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);

    scrollbar-width: none;
}

.voltica-glass-gallery::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   GLASS THUMBNAIL
   ========================================================= */

.voltica-thumb {

    position: relative;

    flex: 0 0 82px;

    width: 82px;
    height: 82px;

    padding: 0;

    overflow: hidden;

    cursor: pointer;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.16);

    background:
        rgba(255,255,255,0.055);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 8px 25px rgba(0,0,0,0.25);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* IMAGE */

.voltica-thumb img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    opacity: .62;

    transition:
        opacity .3s ease,
        transform .45s ease;
}


/* GLASS REFLECTION */

.voltica-thumb::before {

    content: "";

    position: absolute;

    top: -50%;
    left: -80%;

    width: 70%;
    height: 200%;

    z-index: 3;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transition:
        left .6s ease;
}


/* NUMBER */

.voltica-thumb span {

    position: absolute;

    right: 6px;
    bottom: 6px;

    z-index: 5;

    padding: 4px 6px;

    border-radius: 6px;

    background:
        rgba(0,0,0,.65);

    border:
        1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.85);

    font-size: 8px;

    letter-spacing: .12em;

    pointer-events: none;
}


/* HOVER */

.voltica-thumb:hover {

    transform:
        translateY(-6px)
        scale(1.04);

    border-color:
        rgba(255,255,255,.45);

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 25px rgba(255,255,255,.06);
}

.voltica-thumb:hover img {

    opacity: 1;

    transform: scale(1.08);
}

.voltica-thumb:hover::before {

    left: 150%;
}


/* ACTIVE */

.voltica-thumb.active {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,255,255,.75);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 12px 35px rgba(0,0,0,.45),
        0 0 30px rgba(255,255,255,.08);
}

.voltica-thumb.active img {

    opacity: 1;
}


/* MOBILE */

@media (max-width: 700px) {

    .voltica-glass-gallery {

        padding: 10px;

        gap: 9px;

        border-radius: 20px;
    }

    .voltica-thumb {

        flex-basis: 68px;

        width: 68px;
        height: 68px;

        border-radius: 13px;
    }
}
/* =========================================================
   VOLTICA HEADER — STORE PORTAL
   ========================================================= */

.store-header-button {

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    min-width: 175px;
    height: 58px;

    padding: 7px 15px;

    color: #fff;
    text-decoration: none;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.13),
            rgba(255,255,255,0.035)
        );

    border: 1px solid rgba(255,255,255,0.20);

    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 10px 35px rgba(0,0,0,0.35);

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* V LOGO */

.store-logo-mark {

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.05em;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.045)
        );

    border: 1px solid rgba(255,255,255,.20);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 0 20px rgba(255,255,255,.05);
}


/* TEXT */

.store-header-text {

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    line-height: 1;
}

.store-header-text small {

    font-size: 8px;

    letter-spacing: .28em;

    opacity: .48;

    margin-bottom: 5px;
}

.store-header-text strong {

    font-size: 14px;

    letter-spacing: .18em;

    font-weight: 700;
}


/* ARROW */

.store-header-arrow {

    margin-left: auto;

    font-size: 19px;

    opacity: .55;

    transition:
        transform .35s ease,
        opacity .35s ease;
}


/* =========================================================
   PREMIUM STORE PULSE
   ========================================================= */

.store-header-button::before {

    content: "";

    position: absolute;

    top: -80%;
    left: -100%;

    width: 55%;
    height: 260%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    animation:
        storeGlassSweep 4.5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes storeGlassSweep {

    0% {
        left: -100%;
    }

    35% {
        left: 150%;
    }

    100% {
        left: 150%;
    }

}


/* SOFT ATTENTION GLOW */

.store-header-button::after {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    opacity: 0;

    box-shadow:
        0 0 30px rgba(255,255,255,.16);

    animation:
        storeGlow 3.5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes storeGlow {

    0%,
    70%,
    100% {
        opacity: 0;
    }

    78% {
        opacity: .8;
    }

    86% {
        opacity: .15;
    }

}


/* HOVER */

.store-header-button:hover {

    transform:
        translateY(-2px)
        scale(1.025);

    border-color:
        rgba(255,255,255,.42);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 16px 45px rgba(0,0,0,.45),
        0 0 35px rgba(255,255,255,.08);
}


.store-header-button:hover
.store-header-arrow {

    opacity: 1;

    transform:
        translateX(5px);
}


/* MOBILE */

@media (max-width: 600px) {

    .store-header-button {

        min-width: 145px;

        height: 50px;

        gap: 8px;

        padding: 6px 11px;

        border-radius: 15px;
    }

    .store-logo-mark {

        width: 32px;
        height: 32px;

        border-radius: 9px;
    }

    .store-header-text small {
        font-size: 7px;
    }

    .store-header-text strong {
        font-size: 11px;
    }

    .store-header-arrow {
        font-size: 16px;
    }

}
/* =========================================================
   VOLTICA — PRODUCT VIEW BUTTON
   ========================================================= */

.product-button,
a.product-button {

    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    min-width: 118px !important;
    height: 48px !important;

    padding: 0 18px !important;

    color: #fff !important;
    text-decoration: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.045)
        ) !important;

    border: 1px solid rgba(255,255,255,.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 10px 30px rgba(0,0,0,.30) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    letter-spacing: .18em !important;

    overflow: hidden !important;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease !important;
}


/* REFLECTION */

.product-button::before {

    content: "";

    position: absolute;

    top: -80%;
    left: -100%;

    width: 55%;
    height: 260%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    animation:
        viewSweep 5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes viewSweep {

    0% {
        left: -100%;
    }

    30% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


.product-button span {

    position: relative;

    z-index: 2;
}


.product-button span:last-child {

    font-size: 18px;

    letter-spacing: 0;

    opacity: .7;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.product-button:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,.45) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 16px 40px rgba(0,0,0,.45),
        0 0 28px rgba(255,255,255,.07) !important;
}


.product-button:hover span:last-child {

    transform:
        translateX(5px);

    opacity: 1;
}
/* =========================================================
   VOLTICA — PRODUCT DESCRIPTION
   ========================================================= */

.product-description {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    max-width: 390px !important;

    margin: 18px 0 26px !important;

    line-height: 1.65 !important;

    color: rgba(255,255,255,.48) !important;
}


.product-description .description-line {

    color: rgba(255,255,255,.88) !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    letter-spacing: .02em;
}


.product-description .description-detail {

    font-size: 12px !important;

    line-height: 1.8 !important;

    letter-spacing: .015em;

    color: rgba(255,255,255,.45) !important;
}
/* =========================================================
   VOLTICA — PRODUCT NEW BADGE
   ========================================================= */

.dynamic-main-image {
    position: relative !important;
    overflow: hidden !important;
}

.dynamic-badge {
    position: absolute !important;

    top: 20px !important;
    left: 20px !important;

    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 30px !important;

    padding: 0 13px !important;

    box-sizing: border-box !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.06)
        ) !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    color: rgba(255,255,255,.95) !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: .22em !important;

    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 25px rgba(0,0,0,.35) !important;

    animation: volticaNewPulse 3.5s ease-in-out infinite !important;
}


/* petit point lumineux */

.dynamic-badge::before {

    content: "";

    width: 5px;
    height: 5px;

    margin-right: 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 8px rgba(255,255,255,.8);

    animation:
        volticaNewDot 1.8s ease-in-out infinite;
}


@keyframes volticaNewPulse {

    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 8px 25px rgba(0,0,0,.35);
    }

    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22),
            0 8px 30px rgba(0,0,0,.40),
            0 0 18px rgba(255,255,255,.08);
    }
}


@keyframes volticaNewDot {

    0%,
    100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}
/* =========================================================
   VOLTICA — BOTTOM NAVIGATION
   ========================================================= */

.voltica-bottom-nav {

    position: relative;

    width: 100%;

    padding: 100px 20px 55px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.055),
            transparent 55%
        );
}


/* TOP LINE */

.voltica-nav-line {

    width: min(900px, 85%);

    height: 1px;

    margin-bottom: 55px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
}


/* BUTTON CONTAINER */

.voltica-nav-buttons {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    width: 100%;

    max-width: 650px;
}


/* =========================================================
   GLASS BUTTON
   ========================================================= */

.voltica-nav-button {

    position: relative;

    display: flex;
    align-items: center;

    width: 280px;
    height: 78px;

    padding: 0 20px;

    box-sizing: border-box;

    color: #fff;

    text-decoration: none;

    border-radius: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.18);

    backdrop-filter:
        blur(25px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(150%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(255,255,255,.03),
        0 20px 50px rgba(0,0,0,.35);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


/* =========================================================
   ICON
   ========================================================= */

.nav-icon {

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.17);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 8px 20px rgba(0,0,0,.25);

    font-size: 18px;
    font-weight: 700;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* HOME ICON */

.home-button .nav-icon {

    font-size: 25px;

    font-weight: 300;
}


/* STORE V */

.store-button .nav-icon {

    font-size: 17px;

    letter-spacing: -.08em;
}


/* =========================================================
   TEXT
   ========================================================= */

.nav-button-text {

    display: flex;

    flex-direction: column;

    margin-left: 15px;

    line-height: 1;
}


.nav-button-text small {

    margin-bottom: 7px;

    font-size: 8px;

    letter-spacing: .30em;

    color:
        rgba(255,255,255,.40);
}


.nav-button-text strong {

    font-size: 15px;

    letter-spacing: .20em;

    font-weight: 600;
}


/* =========================================================
   ARROW
   ========================================================= */

.nav-arrow {

    margin-left: auto;

    font-size: 22px;

    font-weight: 300;

    color:
        rgba(255,255,255,.45);

    transition:
        transform .4s ease,
        color .4s ease;
}


/* =========================================================
   GLASS LIGHT SWEEP
   ========================================================= */

.voltica-nav-button::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -90%;

    width: 45%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    animation:
        navGlassSweep 6s ease-in-out infinite;

    pointer-events: none;
}


@keyframes navGlassSweep {

    0% {
        left: -90%;
    }

    25% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* =========================================================
   SOFT STORE ACCENT
   ========================================================= */

.store-button::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    box-shadow:
        0 0 35px rgba(255,255,255,.055);

    opacity: .7;

    animation:
        storeNavPulse 4s ease-in-out infinite;

    pointer-events: none;
}


@keyframes storeNavPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.voltica-nav-button:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,255,255,.40);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 25px 65px rgba(0,0,0,.48),
        0 0 35px rgba(255,255,255,.06);
}


.voltica-nav-button:hover .nav-icon {

    transform:
        scale(1.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 0 25px rgba(255,255,255,.08);
}


.home-button:hover .nav-arrow {

    transform:
        translateX(-5px);

    color: #fff;
}


.store-button:hover .nav-arrow {

    transform:
        translateX(5px);

    color: #fff;
}


/* =========================================================
   BRAND
   ========================================================= */

.voltica-nav-brand {

    margin-top: 55px;

    font-size: 9px;

    letter-spacing: .55em;

    color:
        rgba(255,255,255,.20);

    padding-left: .55em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .voltica-bottom-nav {

        padding:
            75px 18px 40px;
    }

    .voltica-nav-buttons {

        flex-direction: column;

        gap: 12px;
    }

    .voltica-nav-button {

        width: min(100%, 380px);

        height: 70px;
    }

}
/* =========================================================
   VOLTICA — FINAL PRODUCT CTA
   ========================================================= */

.dynamic-final {

    position: relative;

    width: 100%;

    min-height: 620px;

    padding: 100px 20px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255,255,255,.045),
            transparent 55%
        );
}


/* =========================================================
   GLASS PANEL
   ========================================================= */

.final-glass-panel {

    position: relative;

    width: min(760px, 100%);

    padding: 65px 55px;

    box-sizing: border-box;

    text-align: center;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.115),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.18);

    backdrop-filter:
        blur(32px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(145%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(255,255,255,.035),
        0 35px 90px rgba(0,0,0,.48);

    overflow: hidden;
}


/* GLASS REFLECTION */

.final-glass-panel::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -70%;

    width: 45%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    animation:
        finalGlassSweep 7s ease-in-out infinite;

    pointer-events: none;
}


@keyframes finalGlassSweep {

    0% {
        left: -70%;
    }

    25% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* =========================================================
   LABEL
   ========================================================= */

.final-label {

    position: relative;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .45em;

    color:
        rgba(255,255,255,.48);

    padding-left: .45em;

    margin-bottom: 25px;
}


/* LINE */

.final-line {

    width: 45px;

    height: 1px;

    margin: 0 auto 32px;

    background:
        rgba(255,255,255,.30);
}


/* =========================================================
   TITLE
   ========================================================= */

.final-glass-panel h2 {

    position: relative;

    margin: 0;

    font-size:
        clamp(45px, 7vw, 82px);

    line-height: .95;

    font-weight: 300;

    letter-spacing: -.045em;

    color:
        rgba(255,255,255,.94);
}


.final-glass-panel h2 span {

    display: block;

    margin-top: 8px;

    color:
        rgba(255,255,255,.38);

    font-weight: 300;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.final-glass-panel p {

    max-width: 480px;

    margin:
        30px auto 35px;

    font-size: 13px;

    line-height: 1.8;

    letter-spacing: .015em;

    color:
        rgba(255,255,255,.48);
}


/* =========================================================
   BUY BUTTON
   ========================================================= */

.final-buy-button {

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 245px;

    height: 58px;

    padding: 0 30px;

    box-sizing: border-box;

    color: #fff;

    text-decoration: none;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.055)
        );

    border:
        1px solid rgba(255,255,255,.28);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 15px 40px rgba(0,0,0,.38);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .20em;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* BUTTON LIGHT */

.final-buy-button::before {

    content: "";

    position: absolute;

    top: -80%;
    left: -100%;

    width: 45%;
    height: 260%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    animation:
        buySweep 5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes buySweep {

    0% {
        left: -100%;
    }

    30% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


.final-buy-button:hover {

    transform:
        translateY(-4px)
        scale(1.025);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.21),
            rgba(255,255,255,.075)
        );

    border-color:
        rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 22px 55px rgba(0,0,0,.50),
        0 0 35px rgba(255,255,255,.08);
}


/* =========================================================
   META
   ========================================================= */

.final-meta {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 30px;

    color:
        rgba(255,255,255,.25);

    font-size: 7px;

    letter-spacing: .25em;
}


.final-meta span {

    white-space: nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .dynamic-final {

        min-height: 560px;

        padding: 70px 15px;
    }

    .final-glass-panel {

        padding: 50px 25px;

        border-radius: 25px;
    }

    .final-glass-panel h2 {

        font-size: 48px;
    }

    .final-buy-button {

        width: 100%;

        min-width: 0;
    }

    .final-meta {

        gap: 12px;
    }

}
/* =========================================================
   VOLTICA Q17 — DESCRIPTION GLASS CARD
   ========================================================= */

.q17-description-card {
    position: relative;

    width: 100%;
    max-width: 620px;

    margin: 28px 0 30px;
    padding: 24px 26px;

    box-sizing: border-box;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.095),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(255,255,255,0.16);

    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        inset 0 -1px 0 rgba(255,255,255,0.025),
        0 18px 45px rgba(0,0,0,0.30);

    overflow: hidden;
}


/* GLASS REFLECTION */

.q17-description-card::before {
    content: "";

    position: absolute;

    top: -120%;
    left: -80%;

    width: 35%;
    height: 340%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.09),
            transparent
        );

    animation: q17DescriptionSweep 8s ease-in-out infinite;

    pointer-events: none;
}


@keyframes q17DescriptionSweep {

    0% {
        left: -80%;
    }

    22% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* TOP */

.q17-description-top {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;
}


.q17-description-top span {
    font-size: 8px;
    font-weight: 600;

    letter-spacing: 0.30em;

    color: rgba(255,255,255,0.40);
}


.q17-description-top i {
    display: block;

    width: 34px;
    height: 1px;

    background: rgba(255,255,255,0.25);
}


/* TEXT */

.q17-description-card p {
    position: relative;

    margin: 0;

    color: rgba(255,255,255,0.68);

    font-size: 13px;
    line-height: 1.9;

    letter-spacing: 0.012em;
}


/* BOTTOM */

.q17-description-bottom {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    gap: 9px 18px;

    margin-top: 21px;
    padding-top: 17px;

    border-top: 1px solid rgba(255,255,255,0.08);
}


.q17-description-bottom span {
    font-size: 7px;

    letter-spacing: 0.22em;

    color: rgba(255,255,255,0.25);
}


/* MOBILE */

@media (max-width: 600px) {

    .q17-description-card {
        padding: 21px;
        border-radius: 19px;
    }

    .q17-description-card p {
        font-size: 12px;
        line-height: 1.8;
    }

}
/* =========================================================
   VOLTICA Q17 — TITLE / SUBTITLE GLASS
   ========================================================= */

.q17-title-tech {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    width: fit-content;
    max-width: 100%;

    margin: 22px 0 14px;
    padding: 13px 19px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    border: 1px solid rgba(255,255,255,.19);

    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 12px 35px rgba(0,0,0,.28);

    overflow: hidden;
}


/* TECH LIGHT */

.q17-title-tech::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -70%;

    width: 35%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    animation: q17TitleSweep 6s ease-in-out infinite;

    pointer-events: none;
}


@keyframes q17TitleSweep {

    0% {
        left: -70%;
    }

    25% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* STATUS DOT */

.q17-title-status {
    position: relative;

    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    box-shadow:
        0 0 10px rgba(255,255,255,.65);

    animation: q17StatusPulse 2.5s ease-in-out infinite;
}


@keyframes q17StatusPulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


/* LABEL */

.q17-title-label {

    position: relative;

    font-size: 7px;

    letter-spacing: .25em;

    color: rgba(255,255,255,.35);

    white-space: nowrap;
}


/* TITLE */

.q17-title-tech h1 {

    position: relative;

    margin: 0;

    font-size: clamp(24px, 4vw, 38px);

    line-height: 1;

    font-weight: 500;

    letter-spacing: -.025em;

    color: rgba(255,255,255,.94);

    white-space: nowrap;
}


/* =========================================================
   SUBTITLE GLASS
   ========================================================= */

.q17-subtitle-glass {

    position: relative;

    width: min(100%, 580px);

    margin-bottom: 22px;

    padding: 20px 23px;

    box-sizing: border-box;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.022)
        );

    border: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 35px rgba(0,0,0,.22);
}


/* SUBTITLE LINE */

.q17-subtitle-line {

    display: block;

    width: 28px;
    height: 1px;

    margin-bottom: 12px;

    background: rgba(255,255,255,.30);
}


/* SUBTITLE */

.q17-subtitle-glass h2 {

    margin: 0;

    font-size: clamp(19px, 3vw, 27px);

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: -.015em;

    color: rgba(255,255,255,.82);
}


.q17-subtitle-glass h2 span {

    color: rgba(255,255,255,.36);

    font-weight: 300;
}


/* MOBILE */

@media (max-width: 600px) {

    .q17-title-tech {
        padding: 12px 15px;
        gap: 9px;
    }

    .q17-title-label {
        display: none;
    }

    .q17-title-tech h1 {
        font-size: 25px;
    }

    .q17-subtitle-glass {
        padding: 18px;
    }

}
/* =========================================================
   VOLTICA Q17 — TITLE / SUBTITLE GLASS
   ========================================================= */

.q17-title-tech {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    width: fit-content;
    max-width: 100%;

    margin: 22px 0 14px;
    padding: 13px 19px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    border: 1px solid rgba(255,255,255,.19);

    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 12px 35px rgba(0,0,0,.28);

    overflow: hidden;
}


/* TECH LIGHT */

.q17-title-tech::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -70%;

    width: 35%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    animation: q17TitleSweep 6s ease-in-out infinite;

    pointer-events: none;
}


@keyframes q17TitleSweep {

    0% {
        left: -70%;
    }

    25% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* STATUS DOT */

.q17-title-status {
    position: relative;

    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    box-shadow:
        0 0 10px rgba(255,255,255,.65);

    animation: q17StatusPulse 2.5s ease-in-out infinite;
}


@keyframes q17StatusPulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


/* LABEL */

.q17-title-label {

    position: relative;

    font-size: 7px;

    letter-spacing: .25em;

    color: rgba(255,255,255,.35);

    white-space: nowrap;
}


/* TITLE */

.q17-title-tech h1 {

    position: relative;

    margin: 0;

    font-size: clamp(24px, 4vw, 38px);

    line-height: 1;

    font-weight: 500;

    letter-spacing: -.025em;

    color: rgba(255,255,255,.94);

    white-space: nowrap;
}


/* =========================================================
   SUBTITLE GLASS
   ========================================================= */

.q17-subtitle-glass {

    position: relative;

    width: min(100%, 580px);

    margin-bottom: 22px;

    padding: 20px 23px;

    box-sizing: border-box;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.022)
        );

    border: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 35px rgba(0,0,0,.22);
}


/* SUBTITLE LINE */

.q17-subtitle-line {

    display: block;

    width: 28px;
    height: 1px;

    margin-bottom: 12px;

    background: rgba(255,255,255,.30);
}


/* SUBTITLE */

.q17-subtitle-glass h2 {

    margin: 0;

    font-size: clamp(19px, 3vw, 27px);

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: -.015em;

    color: rgba(255,255,255,.82);
}


.q17-subtitle-glass h2 span {

    color: rgba(255,255,255,.36);

    font-weight: 300;
}


/* MOBILE */

@media (max-width: 600px) {

    .q17-title-tech {
        padding: 12px 15px;
        gap: 9px;
    }

    .q17-title-label {
        display: none;
    }

    .q17-title-tech h1 {
        font-size: 25px;
    }

    .q17-subtitle-glass {
        padding: 18px;
    }

}
/* =========================================================
   VOLTICA Q17 — PURCHASE ZONE
   ========================================================= */

.q17-purchase-zone {

    width: 100%;
    max-width: 620px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 25px;
}


/* =========================================================
   PRICE
   ========================================================= */

.q17-price-glass {

    display: flex;
    align-items: baseline;

    gap: 8px;

    width: fit-content;

    padding: 15px 20px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.14);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 12px 30px rgba(0,0,0,.25);
}


.q17-price-label {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.q17-price-glass strong {

    font-size: 28px;

    font-weight: 500;

    letter-spacing: -.03em;

    color: rgba(255,255,255,.94);
}


.q17-price-currency {

    font-size: 9px;

    letter-spacing: .20em;

    color: rgba(255,255,255,.35);
}


/* =========================================================
   BUY BUTTON
   ========================================================= */

.q17-buy-button {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 62px;

    box-sizing: border-box;

    border-radius: 17px;

    text-decoration: none;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.045)
        );

    border: 1px solid rgba(255,255,255,.25);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 15px 40px rgba(0,0,0,.35);

    overflow: hidden;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .20em;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.q17-buy-button::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -80%;

    width: 35%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    animation:
        q17BuySweep 5s ease-in-out infinite;
}


@keyframes q17BuySweep {

    0% {
        left: -80%;
    }

    30% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


.q17-buy-button:hover {

    transform: translateY(-4px);

    border-color:
        rgba(255,255,255,.50);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 22px 55px rgba(0,0,0,.48),
        0 0 35px rgba(255,255,255,.07);
}


/* =========================================================
   TRUST
   ========================================================= */

.q17-trust-glass {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 2px;
}


.q17-trust-glass span {

    padding: 9px 12px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.32);

    font-size: 7px;

    letter-spacing: .18em;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* =========================================================
   VOLTICA Q17 — SIGNATURE BUY BUTTON
   ========================================================= */

.q17-buy-button {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 68px;

    box-sizing: border-box;

    border-radius: 19px;

    overflow: hidden;

    text-decoration: none;

    color: #fff;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.14),
            rgba(255,255,255,.045)
        );

    border: 1px solid rgba(255,255,255,.28);

    backdrop-filter:
        blur(25px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(160%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(255,255,255,.04),
        0 18px 45px rgba(0,0,0,.40),
        0 0 0 rgba(255,255,255,0);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   MOVING GLASS REFLECTION
   ========================================================= */

.q17-buy-button::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -75%;

    width: 38%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    animation:
        q17ButtonSweep 4.5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes q17ButtonSweep {

    0% {
        left: -75%;
    }

    30% {
        left: 155%;
    }

    100% {
        left: 155%;
    }
}


/* =========================================================
   OUTER TECHNO HALO
   ========================================================= */

.q17-buy-button::after {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 22px rgba(255,255,255,.055);

    opacity: .7;

    animation:
        q17ButtonPulse 2.8s ease-in-out infinite;

    pointer-events: none;
}


@keyframes q17ButtonPulse {

    0%,
    100% {
        opacity: .35;
        box-shadow:
            0 0 15px rgba(255,255,255,.025);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 30px rgba(255,255,255,.09);
    }
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.q17-buy-button span {

    position: relative;

    z-index: 2;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .24em;

    text-shadow:
        0 1px 12px rgba(255,255,255,.15);

    transition:
        letter-spacing .35s ease,
        text-shadow .35s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.q17-buy-button:hover {

    transform:
        translateY(-5px)
        scale(1.015);

    border-color:
        rgba(255,255,255,.52);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 25px 60px rgba(0,0,0,.50),
        0 0 40px rgba(255,255,255,.10);
}


.q17-buy-button:hover span {

    letter-spacing: .29em;

    text-shadow:
        0 0 18px rgba(255,255,255,.30);
}


/* =========================================================
   ACTIVE / CLICK
   ========================================================= */

.q17-buy-button:active {

    transform:
        translateY(-1px)
        scale(.985);

    box-shadow:
        inset 0 2px 10px rgba(0,0,0,.35),
        0 8px 25px rgba(0,0,0,.35);
}
/* =========================================================
   VOLTICA Q17 — GRAPHITE GLASS TECH TABLE
   ========================================================= */

.q17-tech-section {

    position: relative;

    width: 100%;

    padding: 110px 20px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.035),
            transparent 55%
        );

    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.q17-tech-header {

    width: min(1100px, 100%);

    margin: 0 auto 55px;
}


.q17-tech-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    color:
        rgba(255,255,255,.40);

    font-size: 7px;

    letter-spacing: .28em;
}


.q17-tech-label span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.75);

    box-shadow:
        0 0 12px rgba(255,255,255,.45);

    animation:
        techStatusPulse 2.5s ease-in-out infinite;
}


@keyframes techStatusPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


.q17-tech-header h2 {

    margin: 22px 0 0;

    font-size:
        clamp(42px, 7vw, 78px);

    line-height: .95;

    font-weight: 300;

    letter-spacing: -.045em;

    color:
        rgba(255,255,255,.90);
}


.q17-tech-header h2 span {

    color:
        rgba(255,255,255,.32);
}


/* =========================================================
   GRID
   ========================================================= */

.q17-tech-grid {

    width: min(1100px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* =========================================================
   GRAPHITE GLASS CARD
   ========================================================= */

.q17-tech-card {

    position: relative;

    min-height: 145px;

    padding: 25px;

    box-sizing: border-box;

    display: flex;

    gap: 22px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(40,43,47,.72),
            rgba(15,16,18,.68)
        );

    border:
        1px solid rgba(255,255,255,.10);

    backdrop-filter:
        blur(24px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(120%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.40),
        0 20px 45px rgba(0,0,0,.28);

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


/* MOVING GLASS */

.q17-tech-card::before {

    content: "";

    position: absolute;

    top: -100%;

    left: -80%;

    width: 35%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    animation:
        graphiteSweep 9s ease-in-out infinite;

    pointer-events: none;
}


@keyframes graphiteSweep {

    0% {
        left: -80%;
    }

    20% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* =========================================================
   NUMBER
   ========================================================= */

.q17-tech-number {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.10);

    color:
        rgba(255,255,255,.28);

    font-size: 9px;

    letter-spacing: .12em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);
}


/* =========================================================
   CONTENT
   ========================================================= */

.q17-tech-content {

    position: relative;

    padding-top: 3px;
}


.q17-tech-content strong {

    display: block;

    margin-bottom: 12px;

    color:
        rgba(255,255,255,.82);

    font-size: 11px;

    letter-spacing: .20em;
}


.q17-tech-content p {

    max-width: 390px;

    margin: 0;

    color:
        rgba(255,255,255,.38);

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   HOVER
   ========================================================= */

.q17-tech-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,255,255,.23);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 28px 60px rgba(0,0,0,.40),
        0 0 35px rgba(255,255,255,.035);
}


.q17-tech-card:hover .q17-tech-number {

    color:
        rgba(255,255,255,.70);

    border-color:
        rgba(255,255,255,.22);
}


/* =========================================================
   FOOTER / TECHNICAL DATA
   ========================================================= */

.q17-tech-footer {

    width: min(1100px, 100%);

    margin: 60px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    color:
        rgba(255,255,255,.25);

    font-size: 7px;

    letter-spacing: .35em;
}


.q17-tech-footer-line {

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18)
        );
}


.q17-tech-footer-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18),
            transparent
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .q17-tech-section {

        padding: 80px 15px;
    }

    .q17-tech-grid {

        grid-template-columns: 1fr;
    }

    .q17-tech-card {

        min-height: 135px;

        padding: 21px;

        gap: 16px;
    }

    .q17-tech-number {

        width: 42px;
        height: 42px;
    }

    .q17-tech-content p {

        font-size: 11px;
    }

    .q17-tech-footer-line {

        width: 35px;
    }

}
/* =========================================================
   VOLTICA Q17 — TECHNICAL SPECIFICATIONS
   ========================================================= */

.q17-specs-section {

    position: relative;

    width: 100%;

    padding: 110px 20px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0),
            rgba(18,20,22,.35),
            rgba(0,0,0,0)
        );

    overflow: hidden;
}


/* HEADER */

.q17-specs-header {

    width: min(1000px,100%);

    margin: 0 auto 45px;
}


.q17-specs-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    color:
        rgba(255,255,255,.38);

    font-size: 7px;

    letter-spacing: .30em;
}


.q17-specs-label span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(255,255,255,.8);

    box-shadow:
        0 0 12px rgba(255,255,255,.45);

    animation:
        specsPulse 2.5s ease-in-out infinite;
}


@keyframes specsPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


.q17-specs-header h2 {

    margin: 22px 0 0;

    font-size:
        clamp(40px, 6vw, 70px);

    line-height: .95;

    font-weight: 300;

    letter-spacing: -.045em;

    color:
        rgba(255,255,255,.90);
}


.q17-specs-header h2 span {

    display: block;

    margin-top: 8px;

    color:
        rgba(255,255,255,.30);
}


/* =========================================================
   MAIN GLASS PANEL
   ========================================================= */

.q17-specs-panel {

    position: relative;

    width: min(1000px,100%);

    margin: 0 auto;

    padding: 0 28px;

    box-sizing: border-box;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(39,42,45,.72),
            rgba(13,14,16,.72)
        );

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter:
        blur(30px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(120%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 35px 80px rgba(0,0,0,.40);

    overflow: hidden;
}


/* MOVING GLASS */

.q17-specs-panel::before {

    content: "";

    position: absolute;

    top: -100%;

    left: -70%;

    width: 30%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    animation:
        specsSweep 10s ease-in-out infinite;

    pointer-events: none;
}


@keyframes specsSweep {

    0% {
        left: -70%;
    }

    18% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* TOP LINE */

.q17-specs-topline {

    display: flex;

    justify-content: space-between;

    padding: 22px 0;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.23);

    font-size: 7px;

    letter-spacing: .28em;
}


/* =========================================================
   SPEC ROW
   ========================================================= */

.q17-spec-row {

    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(180px, 1fr)
        minmax(150px, .7fr);

    align-items: center;

    min-height: 70px;

    border-bottom:
        1px solid rgba(255,255,255,.065);

    transition:
        background .3s ease,
        padding .3s ease;
}


.q17-spec-row:hover {

    background:
        rgba(255,255,255,.035);

    padding-left: 8px;
}


/* NUMBER */

.q17-spec-number {

    color:
        rgba(255,255,255,.20);

    font-size: 8px;

    letter-spacing: .12em;
}


/* NAME */

.q17-spec-name {

    color:
        rgba(255,255,255,.38);

    font-size: 8px;

    letter-spacing: .22em;
}


/* VALUE */

.q17-spec-row strong {

    color:
        rgba(255,255,255,.82);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .02em;

    text-align: right;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.q17-spec-bottom {

    display: flex;

    justify-content: space-between;

    padding: 23px 0;

    color:
        rgba(255,255,255,.20);

    font-size: 7px;

    letter-spacing: .25em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .q17-specs-section {

        padding: 80px 15px;
    }

    .q17-specs-panel {

        padding: 0 18px;

        border-radius: 21px;
    }

    .q17-spec-row {

        grid-template-columns:
            35px
            1fr;

        padding: 18px 0;

        min-height: auto;

        gap: 4px;
    }

    .q17-spec-row strong {

        grid-column: 2;

        text-align: left;

        margin-top: 4px;

        font-size: 12px;
    }

    .q17-spec-name {

        font-size: 7px;
    }

    .q17-spec-bottom {

        flex-direction: column;

        gap: 9px;
    }

}
/* =========================================================
   VOLTICA Q17 — TECHNICAL SPECIFICATIONS
   ========================================================= */

.q17-specs-section {

    position: relative;

    width: 100%;

    padding: 110px 20px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0),
            rgba(18,20,22,.35),
            rgba(0,0,0,0)
        );

    overflow: hidden;
}


/* HEADER */

.q17-specs-header {

    width: min(1000px,100%);

    margin: 0 auto 45px;
}


.q17-specs-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    color:
        rgba(255,255,255,.38);

    font-size: 7px;

    letter-spacing: .30em;
}


.q17-specs-label span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(255,255,255,.8);

    box-shadow:
        0 0 12px rgba(255,255,255,.45);

    animation:
        specsPulse 2.5s ease-in-out infinite;
}


@keyframes specsPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


.q17-specs-header h2 {

    margin: 22px 0 0;

    font-size:
        clamp(40px, 6vw, 70px);

    line-height: .95;

    font-weight: 300;

    letter-spacing: -.045em;

    color:
        rgba(255,255,255,.90);
}


.q17-specs-header h2 span {

    display: block;

    margin-top: 8px;

    color:
        rgba(255,255,255,.30);
}


/* =========================================================
   MAIN GLASS PANEL
   ========================================================= */

.q17-specs-panel {

    position: relative;

    width: min(1000px,100%);

    margin: 0 auto;

    padding: 0 28px;

    box-sizing: border-box;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(39,42,45,.72),
            rgba(13,14,16,.72)
        );

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter:
        blur(30px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(120%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 35px 80px rgba(0,0,0,.40);

    overflow: hidden;
}


/* MOVING GLASS */

.q17-specs-panel::before {

    content: "";

    position: absolute;

    top: -100%;

    left: -70%;

    width: 30%;
    height: 300%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    animation:
        specsSweep 10s ease-in-out infinite;

    pointer-events: none;
}


@keyframes specsSweep {

    0% {
        left: -70%;
    }

    18% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* TOP LINE */

.q17-specs-topline {

    display: flex;

    justify-content: space-between;

    padding: 22px 0;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.23);

    font-size: 7px;

    letter-spacing: .28em;
}


/* =========================================================
   SPEC ROW
   ========================================================= */

.q17-spec-row {

    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(180px, 1fr)
        minmax(150px, .7fr);

    align-items: center;

    min-height: 70px;

    border-bottom:
        1px solid rgba(255,255,255,.065);

    transition:
        background .3s ease,
        padding .3s ease;
}


.q17-spec-row:hover {

    background:
        rgba(255,255,255,.035);

    padding-left: 8px;
}


/* NUMBER */

.q17-spec-number {

    color:
        rgba(255,255,255,.20);

    font-size: 8px;

    letter-spacing: .12em;
}


/* NAME */

.q17-spec-name {

    color:
        rgba(255,255,255,.38);

    font-size: 8px;

    letter-spacing: .22em;
}


/* VALUE */

.q17-spec-row strong {

    color:
        rgba(255,255,255,.82);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .02em;

    text-align: right;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.q17-spec-bottom {

    display: flex;

    justify-content: space-between;

    padding: 23px 0;

    color:
        rgba(255,255,255,.20);

    font-size: 7px;

    letter-spacing: .25em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .q17-specs-section {

        padding: 80px 15px;
    }

    .q17-specs-panel {

        padding: 0 18px;

        border-radius: 21px;
    }

    .q17-spec-row {

        grid-template-columns:
            35px
            1fr;

        padding: 18px 0;

        min-height: auto;

        gap: 4px;
    }

    .q17-spec-row strong {

        grid-column: 2;

        text-align: left;

        margin-top: 4px;

        font-size: 12px;
    }

    .q17-spec-name {

        font-size: 7px;
    }

    .q17-spec-bottom {

        flex-direction: column;

        gap: 9px;
    }

}
/* =========================================================
   VOLTICA STORE — MAIN LANDING ENTRY
   ========================================================= */

.voltica-store-entry {

    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 32px 20px 22px;

    box-sizing: border-box;

    position: relative;

    z-index: 100;
}


/* =========================================================
   MAIN STORE BUTTON
   ========================================================= */

.voltica-store-button {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 300px;

    padding: 16px 24px;

    box-sizing: border-box;

    border-radius: 18px;

    text-decoration: none;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.22);

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.16),

        inset 0 -1px 0
        rgba(0,0,0,.35),

        0 20px 50px
        rgba(0,0,0,.38);

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


/* =========================================================
   MOVING GLASS REFLECTION
   ========================================================= */

.voltica-store-button::before {

    content: "";

    position: absolute;

    top: -120%;

    left: -80%;

    width: 35%;

    height: 340%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    animation:
        storeGlassSweep 5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes storeGlassSweep {

    0% {
        left: -80%;
    }

    25% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}


/* =========================================================
   V LOGO
   ========================================================= */

.store-button-logo {

    position: relative;

    z-index: 2;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.045)
        );

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 25px rgba(255,255,255,.04);

    font-size: 21px;

    font-weight: 300;

    letter-spacing: -.08em;
}


/* =========================================================
   TEXT
   ========================================================= */

.store-button-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.store-button-content small {

    font-size: 7px;

    letter-spacing: .35em;

    color:
        rgba(255,255,255,.35);
}


.store-button-content strong {

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .20em;

    color:
        rgba(255,255,255,.90);
}


/* =========================================================
   SUBTLE PULSE
   ========================================================= */

.voltica-store-button {

    animation:
        storeButtonPulse 3.5s ease-in-out infinite;
}


@keyframes storeButtonPulse {

    0%,
    100% {

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.16),

            0 20px 50px
            rgba(0,0,0,.38),

            0 0 0
            rgba(255,255,255,0);
    }

    50% {

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.20),

            0 22px 55px
            rgba(0,0,0,.42),

            0 0 28px
            rgba(255,255,255,.055);
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.voltica-store-button:hover {

    transform:
        translateY(-5px)
        scale(1.015);

    border-color:
        rgba(255,255,255,.45);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.22),

        0 28px 65px
        rgba(0,0,0,.48),

        0 0 40px
        rgba(255,255,255,.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .voltica-store-entry {

        padding:
            22px 15px 15px;
    }

    .voltica-store-button {

        width: 100%;

        min-width: 0;

        max-width: 390px;
    }
/* =========================================================
   VOLTICA STORE — TOP NAVIGATION OVERRIDE
   ========================================================= */


/* =========================================================
   TOP LEFT CONTAINER
   HOME
   STORE
   ========================================================= */

.store-top-navigation {
    position: absolute;

    top: 24px;
    left: 24px;

    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;
}


/* =========================================================
   HOME BUTTON
   ========================================================= */

.store-top-home {

    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 108px;

    padding: 11px 16px;

    color: rgba(255,255,255,0.82);

    text-decoration: none;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.025)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 10px 35px rgba(0,0,0,0.30);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.store-top-home span {

    font-size: 14px;

    line-height: 1;
}


.store-top-home:hover {

    transform: translateX(4px);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.045)
        );

    border-color:
        rgba(255,255,255,0.30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 15px 45px rgba(0,0,0,0.45);
}


/* =========================================================
   STORE MENU
   ========================================================= */

.store-top-navigation .store-menu {

    position: relative;

    top: auto;
    left: auto;
    right: auto;
    bottom: auto;

    margin: 0;
}


/* =========================================================
   STORE BUTTON
   ========================================================= */

.store-top-navigation .store-menu-button {

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 108px;

    padding: 11px 16px;

    color: rgba(255,255,255,0.82);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 35px rgba(0,0,0,0.28);

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.store-top-navigation .store-menu-button:hover {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.14),
            rgba(255,255,255,0.04)
        );

    border-color:
        rgba(255,255,255,0.30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 15px 45px rgba(0,0,0,0.40);
}


.store-top-navigation .store-menu-button span {

    margin-left: 12px;

    font-size: 13px;

    opacity: 0.7;

    transition:
        transform 0.3s ease;
}


/* =========================================================
   STORE DROPDOWN
   ========================================================= */

.store-top-navigation .store-dropdown {

    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    min-width: 230px;

    padding: 8px;

    z-index: 10000;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(20,20,22,0.94),
            rgba(5,5,6,0.88)
        );

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.08);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px)
        scale(0.98);

    transform-origin: top left;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}


/* OPEN ON HOVER */

.store-top-navigation .store-menu:hover
.store-dropdown {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.store-top-navigation .store-dropdown a {

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px 13px;

    color: rgba(255,255,255,0.68);

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 2px;

    border-radius: 8px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.store-top-navigation .store-dropdown a span {

    width: 22px;

    color: rgba(255,255,255,0.30);

    font-size: 8px;

    letter-spacing: 1px;
}


.store-top-navigation .store-dropdown a:hover {

    color: #fff;

    background:
        rgba(255,255,255,0.08);

    transform: translateX(3px);
}


/* =========================================================
   VOLTICA STORE — TOP RIGHT
   ========================================================= */

.store-header > .store-brand {

    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    color: #fff;

    text-decoration: none;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 5px;

    line-height: 1;

    text-shadow:
        0 0 25px rgba(255,255,255,0.12);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.store-header > .store-brand:hover {

    opacity: 0.75;

    transform: translateY(-2px);
}


.store-header > .store-brand span {

    margin-top: 6px;

    color: rgba(255,255,255,0.45);

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 6px;
}


/* =========================================================
   CENTER HEADER
   ========================================================= */

.store-header {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 70px;
}


.store-header-center {

    position: relative;

    z-index: 2;

    text-align: center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .store-top-navigation {

        top: 16px;
        left: 14px;

        gap: 6px;
    }


    .store-top-home,
    .store-top-navigation .store-menu-button {

        min-width: 96px;

        padding: 10px 13px;

        font-size: 9px;

        letter-spacing: 2.5px;
    }


    .store-header > .store-brand {

        top: 18px;
        right: 16px;

        font-size: 15px;

        letter-spacing: 3px;
    }


    .store-header > .store-brand span {

        margin-top: 5px;

        font-size: 6px;

        letter-spacing: 4px;
    }


    .store-header {

        min-height: 380px;

        padding-top: 100px;
    }


    .store-top-navigation .store-dropdown {

        min-width: 205px;
    }

}
}
/* =========================================================
   VOLTICA STORE — TOP NAVIGATION
   ========================================================= */

.voltica-store-topbar {
    position: relative;

    width: 100%;

    min-height: 110px;

    padding: 22px 28px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    z-index: 1000;
}


/* =========================================================
   HOME — TOP LEFT
   ========================================================= */

.voltica-home-button {

    position: absolute;

    top: 22px;
    left: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    color: rgba(255,255,255,.8);

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 2px;

    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.035);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: 10px;

    transition: .3s ease;
}


.voltica-home-button:hover {

    color: #fff;

    border-color: rgba(255,255,255,.28);

    background: rgba(255,255,255,.07);

    transform: translateX(3px);

}


.voltica-nav-arrow {

    font-size: 16px;

    opacity: .7;
}


.voltica-nav-label {

    font-weight: 600;
}



/* =========================================================
   STORE — DIRECTLY UNDER HOME
   ========================================================= */

.voltica-store-topbar .store-menu {

    position: absolute;

    top: 70px;
    left: 28px;

    z-index: 1100;
}


.voltica-store-topbar
.store-menu-button {

    min-width: 115px;

    padding: 10px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 10px;

    background: rgba(255,255,255,.035);

    color: rgba(255,255,255,.8);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    cursor: pointer;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    transition: .3s ease;
}


.voltica-store-topbar
.store-menu-button:hover {

    color: #fff;

    background: rgba(255,255,255,.07);

    border-color: rgba(255,255,255,.28);

}


.store-menu-chevron {

    font-size: 15px;

    opacity: .6;

}



/* =========================================================
   STORE DROPDOWN
   ========================================================= */

.voltica-store-topbar .store-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: 230px;

    padding: 8px;

    display: none;

    flex-direction: column;

    gap: 3px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    background: rgba(12,12,16,.82);

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);
}


.voltica-store-topbar
.store-menu:hover
.store-dropdown {

    display: flex;

}


.voltica-store-topbar
.store-dropdown a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 12px;

    color: rgba(255,255,255,.72);

    text-decoration: none;

    font-size: 11px;

    letter-spacing: .8px;

    border-radius: 8px;

    transition: .25s ease;
}


.voltica-store-topbar
.store-dropdown a span {

    width: 22px;

    color: rgba(255,255,255,.35);

    font-size: 9px;

}


.voltica-store-topbar
.store-dropdown a:hover {

    color: #fff;

    background: rgba(255,255,255,.07);

}



/* =========================================================
   VOLTICA STORE — TOP RIGHT
   ========================================================= */

.voltica-store-logo {

    position: absolute;

    top: 22px;
    right: 28px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    text-decoration: none;

    line-height: .9;

}


.voltica-logo-main {

    color: #fff;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 5px;
}


.voltica-logo-sub {

    margin-top: 6px;

    color: rgba(255,255,255,.42);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 5px;
}



/* =========================================================
   KEEP HEADER CENTERED
   ========================================================= */

.store-header {

    position: relative;

    padding-top: 30px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .voltica-store-topbar {

        min-height: 105px;

        padding: 16px;
    }


    .voltica-home-button {

        top: 16px;
        left: 16px;
    }


    .voltica-store-topbar .store-menu {

        top: 62px;
        left: 16px;
    }


    .voltica-store-logo {

        top: 18px;
        right: 16px;
    }


    .voltica-logo-main {

        font-size: 17px;

        letter-spacing: 3px;
    }


    .voltica-logo-sub {

        font-size: 7px;

        letter-spacing: 3px;
    }

}
/* =========================================================
   VOLTICA GLASS NAVIGATION
   HOME + VOLTICA STORE
   ========================================================= */

.voltica-store-navigation {

    position: fixed;

    top: 24px;
    left: 24px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}


/* =========================================================
   GLASS SELECT BUTTON
   ========================================================= */

.voltica-glass-select {

    position: relative;

    min-width: 170px;

    height: 44px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    gap: 11px;

    text-decoration: none;

    color: rgba(255,255,255,.82);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 12px;

    backdrop-filter: blur(22px) saturate(130%);

    -webkit-backdrop-filter: blur(22px) saturate(130%);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 8px 30px rgba(0,0,0,.25);

    transition:

        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


/* =========================================================
   NUMBER
   ========================================================= */

.voltica-glass-number {

    width: 23px;
    height: 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 8px;

    letter-spacing: 1px;

    color: rgba(255,255,255,.42);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 7px;

    background: rgba(255,255,255,.035);

}


/* =========================================================
   TEXT
   ========================================================= */

.voltica-glass-text {

    flex: 1;

    font-family:

        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    white-space: nowrap;

}


/* =========================================================
   ARROW
   ========================================================= */

.voltica-glass-arrow {

    font-size: 15px;

    line-height: 1;

    color: rgba(255,255,255,.38);

    transition:

        transform .25s ease,
        color .25s ease;

}


/* =========================================================
   HOVER
   ========================================================= */

.voltica-glass-select:hover {

    color: #fff;

    transform: translateX(4px);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.045)
        );

    border-color: rgba(255,255,255,.27);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.12),

        0 12px 38px rgba(0,0,0,.35);

}


.voltica-glass-select:hover
.voltica-glass-arrow {

    color: #fff;

    transform: translateX(3px);

}


/* =========================================================
   ACTIVE / CURRENT STORE
   ========================================================= */

.voltica-glass-select[href="store.html"] {

    border-color: rgba(255,255,255,.19);

}


.voltica-glass-select[href="store.html"]
.voltica-glass-number {

    color: rgba(255,255,255,.7);

    border-color: rgba(255,255,255,.18);

}


/* =========================================================
   VOLTICA STORE BRAND — TOP RIGHT
   ========================================================= */

.voltica-store-brand {

    position: fixed;

    top: 26px;
    right: 28px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    line-height: .85;

    pointer-events: none;

}


.voltica-store-brand span {

    font-family:

        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 5px;

    color: rgba(255,255,255,.94);

    text-shadow:

        0 0 22px rgba(255,255,255,.08);

}


.voltica-store-brand small {

    margin-top: 7px;

    font-family:

        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 5px;

    color: rgba(255,255,255,.38);

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .voltica-store-navigation {

        top: 14px;

        left: 14px;

        gap: 7px;

    }


    .voltica-glass-select {

        min-width: 148px;

        height: 40px;

        padding: 0 11px;

        border-radius: 10px;

    }


    .voltica-glass-text {

        font-size: 9px;

        letter-spacing: 1.6px;

    }


    .voltica-glass-number {

        width: 21px;

        height: 21px;

    }


    .voltica-store-brand {

        top: 17px;

        right: 16px;

    }


    .voltica-store-brand span {

        font-size: 16px;

        letter-spacing: 3px;

    }


    .voltica-store-brand small {

        font-size: 6px;

        letter-spacing: 3px;

    }

}
/* =========================================================
   VOLTICA STORE — TOP NAVIGATION
   ========================================================= */

/* Conteneur principal */
.voltica-top-navigation {
    position: fixed;
    top: 22px;
    left: 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;

    z-index: 99999;
}


/* =========================================================
   GLASS SELECT BUTTON
   ========================================================= */

.voltica-glass-select {
    position: relative;

    display: flex;
    align-items: center;

    width: 145px;
    min-height: 34px;

    padding: 0 10px;

    box-sizing: border-box;

    text-decoration: none;

    color: rgba(255,255,255,.88);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 9px;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 30px rgba(0,0,0,.28);

    overflow: hidden;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Acrylic shine */
.voltica-glass-select::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .6s ease;

    pointer-events: none;
}


/* Hover */
.voltica-glass-select:hover {
    transform: translateX(3px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.055)
        );

    border-color:
        rgba(255,255,255,.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 10px 35px rgba(0,0,0,.38),
        0 0 18px rgba(255,255,255,.045);
}

.voltica-glass-select:hover::before {
    left: 130%;
}


/* =========================================================
   LUMINOUS DOT
   ========================================================= */

.voltx-number {
    position: relative;

    width: 6px;
    height: 6px;

    margin-right: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 4px rgba(255,255,255,.95),
        0 0 9px rgba(255,255,255,.70),
        0 0 16px rgba(255,255,255,.35);

    animation:
        voltx-dot-pulse 2.2s ease-in-out infinite;
}


/* Slight secondary glow */
.voltx-number::after {
    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    filter: blur(3px);

    opacity: .7;

    animation:
        voltx-dot-halo 2.2s ease-in-out infinite;
}


/* =========================================================
   DOT ANIMATION
   ========================================================= */

@keyframes voltx-dot-pulse {

    0%,
    100% {
        opacity: .45;

        box-shadow:
            0 0 3px rgba(255,255,255,.7),
            0 0 7px rgba(255,255,255,.35);
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 5px rgba(255,255,255,1),
            0 0 12px rgba(255,255,255,.85),
            0 0 20px rgba(255,255,255,.45);
    }

}


@keyframes voltx-dot-halo {

    0%,
    100% {
        opacity: .25;
        transform: scale(.75);
    }

    50% {
        opacity: .75;
        transform: scale(1.15);
    }

}


/* =========================================================
   LABEL
   ========================================================= */

.voltx-label {
    position: relative;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

    line-height: 1;

    white-space: nowrap;

    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(255,255,255,.10);
}


/* =========================================================
   ARROW
   ========================================================= */

.voltx-arrow {
    margin-left: auto;

    font-size: 12px;

    font-weight: 300;

    color: rgba(255,255,255,.55);

    transition:
        transform .25s ease,
        color .25s ease;
}


.voltica-glass-select:hover .voltx-arrow {
    color: #ffffff;

    transform:
        translate(2px,-2px);
}


/* =========================================================
   ACTIVE STORE BUTTON
   ========================================================= */

.voltx-store {
    border-color:
        rgba(255,255,255,.22);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.045)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 28px rgba(0,0,0,.30),
        0 0 18px rgba(255,255,255,.035);
}


/* =========================================================
   STORE BRAND — TOP RIGHT
   ========================================================= */

.voltica-store-brand {
    position: absolute;

    top: 24px;
    right: 28px;

    display: flex;
    align-items: baseline;

    gap: 6px;

    z-index: 9990;

    pointer-events: none;

    color: rgba(255,255,255,.92);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 800;

    font-size: 15px;

    letter-spacing: .16em;

    text-transform: uppercase;

    text-shadow:
        0 0 18px rgba(255,255,255,.10);
}


.voltica-store-brand small {
    font-size: 7px;

    font-weight: 500;

    letter-spacing: .28em;

    color:
        rgba(255,255,255,.48);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .voltica-top-navigation {
        top: 14px;
        left: 14px;

        gap: 5px;
    }


    .voltica-glass-select {
        width: 125px;

        min-height: 30px;

        padding:
            0 8px;

        border-radius: 8px;
    }


    .voltx-label {
        font-size: 8px;

        letter-spacing: .14em;
    }


    .voltx-number {
        width: 5px;
        height: 5px;

        margin-right: 8px;
    }


    .voltx-arrow {
        font-size: 10px;
    }


    .voltica-store-brand {
        top: 18px;
        right: 16px;

        font-size: 11px;

        gap: 4px;

        letter-spacing: .13em;
    }


    .voltica-store-brand small {
        font-size: 6px;
    }

}


/* =========================================================
   REMOVE OLD NAVIGATION ELEMENTS
   ========================================================= */

/*
   Ces règles empêchent les anciens éléments de navigation
   de réapparaître si leur HTML est encore présent.
*/

.store-menu,
.store-menu-button,
.store-dropdown {
    display: none !important;
}


/* Ancienne navigation glass */
.voltica-glass-number,
.voltica-glass-text,
.voltica-glass-arrow {
    display: none !important;
}


/* =========================================================
   SAFETY — OLD DUPLICATE BUTTONS
   ========================================================= */

/*
   Le nouveau système utilise uniquement :

   .voltica-top-navigation
       ├── .voltx-home
       └── .voltx-store

   Si d'anciens boutons .voltica-glass-select sont placés
   directement dans .store-page mais hors de la navigation,
   ils sont masqués pour éviter les doublons.
*/

.store-page > .voltica-glass-select {
    display: none !important;
}
/* =========================================================
   VOLTICA — EDGE NAVIGATION
   Small glass controls / luminous dots
   ========================================================= */

.voltica-edge-nav {

    position: fixed;

    top: 14px;
    left: 10px;

    z-index: 99999;

    display: flex;
    flex-direction: column;

    gap: 5px;

}


/* =========================================================
   GLASS BUTTON
   ========================================================= */

.voltica-edge-button {

    width: 108px;
    height: 28px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 9px;

    box-sizing: border-box;

    text-decoration: none;

    color: rgba(255,255,255,.68);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018)
        );

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 8px;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 18px rgba(0,0,0,.30);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;

}


/* =========================================================
   LUMINOUS DOT
   ========================================================= */

.voltica-edge-dot {

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #ffffff;

    opacity: .65;

    box-shadow:
        0 0 4px rgba(255,255,255,.9),
        0 0 9px rgba(255,255,255,.55);

    animation:
        voltica-edge-pulse 1.8s ease-in-out infinite;

}


/* Second dot slightly out of phase */

.voltica-edge-button:nth-child(2)
.voltica-edge-dot {

    animation-delay: .65s;

}


/* =========================================================
   TEXT
   ========================================================= */

.voltica-edge-label {

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.7px;

    line-height: 1;

    white-space: nowrap;

}


/* =========================================================
   HOVER
   ========================================================= */

.voltica-edge-button:hover {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.035)
        );

    border-color:
        rgba(255,255,255,.23);

    transform:
        translateX(3px);

}


/* =========================================================
   PULSING WHITE LIGHT
   ========================================================= */

@keyframes voltica-edge-pulse {

    0%,
    100% {

        opacity: .35;

        transform: scale(.75);

        box-shadow:
            0 0 3px rgba(255,255,255,.45),
            0 0 7px rgba(255,255,255,.25);

    }

    50% {

        opacity: 1;

        transform: scale(1.2);

        box-shadow:
            0 0 5px rgba(255,255,255,1),
            0 0 12px rgba(255,255,255,.8),
            0 0 18px rgba(255,255,255,.35);

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .voltica-edge-nav {

        top: 10px;
        left: 7px;

        gap: 4px;

    }

    .voltica-edge-button {

        width: 100px;
        height: 26px;

        padding: 0 8px;

        border-radius: 7px;

    }

    .voltica-edge-label {

        font-size: 6.5px;

        letter-spacing: 1.45px;

    }

    .voltica-edge-dot {

        width: 4px;
        height: 4px;

        flex-basis: 4px;

    }

}
/* =========================================================
   VOLTICA — TOP GLASS NAVIGATION
   ========================================================= */

.voltica-top-navigation {
    position: fixed;
    top: 18px;
    left: 18px;

    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: 7px;

    width: 165px;
}


/* ---------------------------------------------------------
   GLASS BUTTON
   --------------------------------------------------------- */

.voltica-glass-select {
    position: relative;

    width: 100%;
    min-height: 38px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 7px 10px;

    text-decoration: none;

    color: rgba(255,255,255,0.88);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.018)
        );

    border: 1px solid rgba(255,255,255,0.13);

    border-radius: 9px;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 28px rgba(0,0,0,0.28);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* ---------------------------------------------------------
   SMALL LIGHT POINT
   --------------------------------------------------------- */

.voltx-number {
    width: 5px;
    height: 5px;

    margin-right: 9px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 4px rgba(255,255,255,0.95),
        0 0 9px rgba(255,255,255,0.65);

    font-size: 0;

    animation: volticaNavPulse 1.8s ease-in-out infinite;
}


/* Deuxième point avec un léger décalage */

.voltx-store .voltx-number {
    animation-delay: 0.7s;
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.voltx-label {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

    white-space: nowrap;

    line-height: 1;
}


/* ---------------------------------------------------------
   ARROW
   --------------------------------------------------------- */

.voltx-arrow {
    margin-left: auto;

    font-size: 13px;

    line-height: 1;

    opacity: 0.55;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.voltica-glass-select:hover {

    transform: translateX(3px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.11),
            rgba(255,255,255,0.025)
        );

    border-color:
        rgba(255,255,255,0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 10px 32px rgba(0,0,0,0.38),
        0 0 18px rgba(255,255,255,0.035);
}


.voltica-glass-select:hover .voltx-arrow {

    opacity: 1;

    transform: translate(2px,-2px);
}


/* ---------------------------------------------------------
   ACTIVE STORE
   --------------------------------------------------------- */

.voltx-store {

    border-color:
        rgba(255,255,255,0.20);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.025)
        );
}


/* ---------------------------------------------------------
   LIGHT PULSE
   --------------------------------------------------------- */

@keyframes volticaNavPulse {

    0%,
    100% {

        opacity: 0.45;

        transform: scale(0.8);

        box-shadow:
            0 0 3px rgba(255,255,255,0.7),
            0 0 6px rgba(255,255,255,0.35);
    }

    50% {

        opacity: 1;

        transform: scale(1.15);

        box-shadow:
            0 0 5px rgba(255,255,255,1),
            0 0 12px rgba(255,255,255,0.8);
    }
}


/* =========================================================
   VOLTICA STORE BRAND — TOP RIGHT
   ========================================================= */

.voltica-store-brand {

    position: fixed;

    top: 18px;
    right: 22px;

    z-index: 99998;

    display: flex;
    align-items: baseline;
    gap: 5px;

    padding: 8px 12px;

    border-radius: 9px;

    background:
        rgba(255,255,255,0.035);

    border: 1px solid rgba(255,255,255,0.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 8px 25px rgba(0,0,0,0.25);
}


.voltica-store-brand span {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    color: rgba(255,255,255,0.92);
}


.voltica-store-brand small {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 7px;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.45);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .voltica-top-navigation {

        top: 12px;
        left: 12px;

        width: 142px;

        gap: 5px;
    }


    .voltica-glass-select {

        min-height: 34px;

        padding: 6px 8px;

        border-radius: 8px;
    }


    .voltx-label {

        font-size: 8px;

        letter-spacing: 1.2px;
    }


    .voltx-arrow {

        font-size: 11px;
    }


    .voltica-store-brand {

        top: 12px;
        right: 12px;

        padding: 6px 9px;
    }


    .voltica-store-brand span {

        font-size: 9px;

        letter-spacing: 2px;
    }


    .voltica-store-brand small {

        font-size: 6px;

        letter-spacing: 1.5px;
    }

}
/* =====================================================
   VOLTICA TOP NAVIGATION — LARGER GLASS BUTTONS
   ===================================================== */

.voltica-top-navigation {
    position: fixed;
    top: 18px;
    left: 18px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 99999;
}


/* GLASS BUTTON */

.voltica-top-navigation .voltica-glass-select {
    width: 190px;
    min-height: 52px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.035)
        );

    border: 1px solid rgba(255,255,255,0.16);

    border-radius: 12px;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10);

    color: #fff;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


/* HOVER */

.voltica-top-navigation .voltica-glass-select:hover {
    transform: translateX(4px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.05)
        );

    border-color: rgba(255,255,255,0.28);
}


/* LUMINOUS DOT */

.voltica-top-navigation .voltx-number {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 5px rgba(255,255,255,0.9),
        0 0 12px rgba(255,255,255,0.75);

    font-size: 0;

    animation: voltx-nav-pulse 1.8s ease-in-out infinite;
}


/* LABEL */

.voltica-top-navigation .voltx-label {
    flex: 1;

    margin-left: 12px;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.14em;

    white-space: nowrap;
}


/* ARROW */

.voltica-top-navigation .voltx-arrow {
    font-size: 15px;

    opacity: 0.65;

    margin-left: 10px;
}


/* BLINKING DOT */

@keyframes voltx-nav-pulse {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.85);

        box-shadow:
            0 0 4px rgba(255,255,255,0.5),
            0 0 8px rgba(255,255,255,0.35);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);

        box-shadow:
            0 0 7px rgba(255,255,255,1),
            0 0 18px rgba(255,255,255,0.85);
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .voltica-top-navigation {
        top: 12px;
        left: 12px;
    }

    .voltica-top-navigation .voltica-glass-select {
        width: 170px;
        min-height: 48px;

        padding: 0 14px;
    }

    .voltica-top-navigation .voltx-label {
        font-size: 11px;
        letter-spacing: 0.11em;
    }

}
/* VOLTICA — Navigation buttons */
a[href="index.html"],
a[href="store.html"] {
    padding: 14px 28px !important;
    font-size: 17px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* VOLTICA NAV — BIGGER HOME + STORE BUTTONS */
header nav a,
nav a {
    padding: 16px 30px !important;
    font-size: 18px !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}