/* ============================================================
   VOLTCASA — Theme Supplement v1
   Loads AFTER voltcasa.css. Polish, mobile refinements,
   micro-interactions, a11y, dark-mode hints.
   2026-05-13
   ============================================================ */

/* ---------- Design tokens extension ---------- */
:root {
  --vc-ease:        cubic-bezier(.22,.61,.36,1);
  --vc-ease-snap:   cubic-bezier(.34,1.36,.64,1);
  --vc-dur-fast:    150ms;
  --vc-dur:         220ms;
  --vc-dur-slow:    420ms;
  --vc-ring:        0 0 0 3px rgba(37,99,235,.35);
  --vc-ring-soft:   0 0 0 4px rgba(0,212,255,.18);
  --vc-glass:       rgba(255,255,255,.72);
  --vc-glass-line:  rgba(10,14,39,.06);
}

/* ============================================================
   HERO v2 — refined mesh (more subtle, less rave)
   ============================================================ */
.carousel-inner::before {
  /* lower opacity, slower drift, calmer hues */
  background:
    radial-gradient(circle 620px at 18% 28%, rgba(124,58,237,.42), transparent 60%),
    radial-gradient(circle 720px at 78% 62%, rgba(37,99,235,.55), transparent 60%),
    radial-gradient(circle 480px at 50% 102%, rgba(0,212,255,.30), transparent 65%),
    radial-gradient(circle 360px at 92% 8%,  rgba(236,72,153,.22), transparent 60%) !important;
  animation: meshFloatV2 28s ease-in-out infinite alternate !important;
  filter: blur(48px) saturate(115%) !important;
}
@keyframes meshFloatV2 {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-24px,16px,0) rotate(6deg); }
  100% { transform: translate3d(18px,-22px,0) rotate(-4deg); }
}
/* Soft vignette so headline contrast stays AA on bright slides */
.carousel-inner {
  box-shadow:
    inset 0 -120px 120px -60px rgba(10,14,39,.35),
    inset 0 60px 80px -40px rgba(10,14,39,.25);
}

/* ============================================================
   MICRO-INTERACTIONS — buttons, links, cards
   ============================================================ */
.btn, .vc-p-cta, .carousel .caption a.slide-cta, .vc-floating-cta {
  will-change: transform;
  transform: translateZ(0); /* GPU layer for crisp 60fps */
}
.btn:active, .vc-p-cta:active, .vc-floating-cta:active,
.carousel .caption a.slide-cta:active {
  transform: translateY(0) scale(.98);
  transition-duration: 80ms;
}

/* Pointer-fine: subtle lift on cards */
@media (hover: hover) and (pointer: fine) {
  .vc-p {
    transition: transform var(--vc-dur-slow) var(--vc-ease),
                box-shadow var(--vc-dur-slow) var(--vc-ease);
  }
}
/* Touch devices: no hover lift (avoids stuck states) */
@media (hover: none) {
  .vc-p:hover { transform: none; }
  .vc-p:hover .vc-p-icon { transform: none; }
}

/* Link underline grow */
a.vc-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
a.vc-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform var(--vc-dur) var(--vc-ease);
  opacity: .8;
}
a.vc-link:hover::after { transform: scaleX(1); }

/* ============================================================
   FOCUS STATES — keyboard a11y (visible everywhere)
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--vc-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vc-blue);
  outline-offset: 3px;
  box-shadow: var(--vc-ring);
}
.vc-p:focus-visible {
  outline: none;
  box-shadow: var(--vc-ring), 0 12px 32px var(--p-shadow-hover, rgba(0,102,255,.15));
}

/* Skip-link helper */
.vc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vc-ink);
  color: #fff;
  padding: .65rem 1rem;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  z-index: 9999;
}
.vc-skip:focus-visible {
  left: 0;
  outline: 2px solid var(--vc-electric);
}

/* ============================================================
   CAROUSEL — scroll-snap on horizontal product strips
   ============================================================ */
.vc-snap {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--vc-line) transparent;
  padding: .25rem 1.25rem 1.25rem;
}
.vc-snap > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}
.vc-snap::-webkit-scrollbar { height: 6px; }
.vc-snap::-webkit-scrollbar-thumb {
  background: var(--vc-line);
  border-radius: 999px;
}
@media (min-width: 720px) {
  .vc-snap > * { flex-basis: 42%; }
}
@media (min-width: 1100px) {
  .vc-snap { overflow: visible; }
  .vc-snap > * { flex-basis: auto; }
}

/* ============================================================
   MOBILE — tighter breakpoints (480px, 414px, 375px, 320px)
   ============================================================ */
@media (max-width: 480px) {
  :root { --vc-radius-lg: 18px; --vc-radius: 12px; }
  h1 { font-size: 1.75rem; line-height: 1.08; }
  h2 { font-size: 1.35rem; }

  .carousel, .carousel.slide { padding: .75rem .75rem 0; }
  .carousel-inner, .carousel .carousel-item { height: 340px; max-height: 64vh; }
  .carousel .carousel-item .caption { padding: 1.25rem 1.25rem; }
  .carousel .carousel-item .caption .display-1,
  .carousel .display-1 { font-size: 1.75rem !important; line-height: 1.04; }
  .carousel .caption p { font-size: .9rem; margin-bottom: 1.25rem; }
  .carousel .caption a.slide-cta { padding: .8rem 1.4rem; font-size: .88rem; }
  .carousel-control-prev, .carousel-control-next { display: none; }
  .carousel-indicators { bottom: 1rem; }

  .vc-p { padding: 1.25rem .9rem 1.1rem; border-radius: 14px; }
  .vc-p-name { font-size: .92rem; min-height: 2.4em; }
  .vc-p-now  { font-size: 1.2rem; }
  .vc-p-cta  { padding: .6rem 1rem; font-size: .8rem; }

  /* touch target floor — WCAG 2.5.5 */
  .btn, a.btn, .vc-p-cta, .carousel .caption a.slide-cta,
  .top-menu a[data-depth="0"], .vc-floating-cta {
    min-height: 44px;
  }
}

@media (max-width: 414px) {
  .featured-products, .products-section, #content-wrapper > section {
    padding: 3rem 0 2.5rem;
  }
  .featured-products h2, .products-section-title, section h2.h2 {
    font-size: 1.5rem;
    padding: 0 1rem;
  }
}

@media (max-width: 360px) {
  h1 { font-size: 1.55rem; }
  .carousel-inner, .carousel .carousel-item { height: 300px; }
  .carousel .carousel-item .caption .display-1,
  .carousel .display-1 { font-size: 1.55rem !important; }
  .vc-p-icon { border-radius: 10px; }
}

/* ============================================================
   REDUCED MOTION — kill drift, glow, snap
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .carousel-inner::before { animation: none !important; }
  .vc-x-dot { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   DARK MODE — opt-in via prefers-color-scheme
   Voltcasa keeps a bright ID, dark mode is a polite refinement.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --vc-bg:        #06091A;
    --vc-surface:   #0A0E27;
    --vc-text:      #E6EBFF;
    --vc-ink:       #F5F7FF;
    --vc-muted:     #94A3BC;
    --vc-faint:     #64748B;
    --vc-line:      rgba(255,255,255,.10);
    --vc-line-soft: rgba(255,255,255,.05);
    --vc-glass:     rgba(10,14,39,.72);
    --vc-glass-line:rgba(255,255,255,.08);
  }
  body, body.classic {
    background: var(--vc-bg);
    color: var(--vc-text);
  }
  #header {
    background: var(--vc-glass);
    border-bottom: 1px solid var(--vc-glass-line);
  }
  .top-menu a[data-depth="0"] { color: var(--vc-text) !important; }
  .top-menu a[data-depth="0"]:hover { background: rgba(255,255,255,.06); color: var(--vc-electric) !important; }
  #search_widget input[type="text"], #search_widget input[type="search"] {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12) !important;
    color: var(--vc-text);
  }
  .vc-p {
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.08);
    color: var(--vc-text);
  }
  .vc-p-icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.05); }
  .vc-p-name, .vc-p-now { color: var(--vc-text); }
  /* Logo: swap to dark variant if site exposes the helper class */
  .vc-logo-dark { display: inline-block !important; }
  .vc-logo-light { display: none !important; }
}
.vc-logo-dark { display: none; }

/* ============================================================
   FOOTER OVERRIDE — force dark + readable text
   PrestaShop classic theme.css has multiple background:#fff on:
   #footer, .block_newsletter, .links ul, .links a span.link-item
   ============================================================ */
body #footer,
body .page-footer,
body .footer-container,
body .footer-container .container,
body .block_newsletter {
  background-color: #0A0E27 !important;
  background-image: radial-gradient(ellipse 600px at 20% 0%, rgba(124,58,237,.15), transparent), radial-gradient(ellipse 700px at 80% 100%, rgba(37,99,235,.15), transparent) !important;
  color: rgba(255, 255, 255, .82) !important;
}
/* Inner blocks transparent so the parent dark shows through */
body #footer .links ul,
body .footer-container .links ul,
body #footer .links a span.link-item,
body .footer-container .links a span.link-item,
body #footer .wrapper,
body .footer-container .wrapper {
  background-color: transparent !important;
  background-image: none !important;
}
body #footer h3,
body .footer-container h3,
body #footer .h3,
body .footer-container .h3,
body #footer h4,
body .footer-container h4,
body #footer .h4,
body .footer-container .h4 {
  color: #fff !important;
}
body #footer a,
body .footer-container a,
body #footer p,
body .footer-container p,
body #footer li,
body .footer-container li,
body #footer span,
body .footer-container span,
body #footer div,
body .footer-container div {
  color: rgba(255, 255, 255, .72) !important;
}
body #footer a:hover,
body .footer-container a:hover {
  color: #00D4FF !important;
}
body #footer input[type="email"],
body .footer-container input[type="email"] {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
body #footer input[type="email"]::placeholder,
body .footer-container input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .45) !important;
}
body #footer .block-social a,
body .footer-container .block-social a {
  background: rgba(255, 255, 255, .08) !important;
}
body .copyright,
body #footer .copyright {
  background: #050813 !important;
  color: rgba(255, 255, 255, .45) !important;
}

/* ============================================================
   PRINT — clean invoice-friendly defaults
   ============================================================ */
@media print {
  #header, #footer, .vc-floating-cta, .carousel { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}