:root {
  /* Brand — UV Brite navy + teal */
  --brand-primary: #113263;
  --brand-secondary: #4dacc1;
  --brand-accent: #4dacc1;

  /* Surfaces */
  --surface-bg: #ffffff;
  --surface-card: #ffffff;
  --surface-alt: #f4f7fa;

  /* Text */
  --text-primary: #0e2939;
  --text-secondary: #4a5568;
  --text-inverse: #ffffff;
  --text-accent: #4dacc1;

  /* Border */
  --border-default: rgba(14, 41, 57, 0.16);

  /* State */
  --state-success: #00ac05;
  --state-success-strong: #00ba05;
  --state-warning: #f59e0b;
  --state-error: #e53935;
}

/* CTA button hover/active feedback */
a[class*="bg-[#00ac05]"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
a[class*="bg-[#00ac05]"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
a[class*="bg-[#00ac05]"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Lightning-flash animation on every "⚡ Flash Sale Ends Tonight" urgency text.
   Matches the ZQuiet / Techtopia treatment: holds a soft yellow base glow, then
   double-pulses sharper yellow + a brightness kick at 10% / 30% of the cycle. */
@keyframes lightning-flash {
  0%, 100% { text-shadow: 0px 0px 14px #ffde67; filter: none; }
  10%      { text-shadow: 0 0 8px rgba(255,200,0,0.95),  0 0 20px rgba(255,160,0,0.6); filter: brightness(1.4); }
  20%      { text-shadow: 0px 0px 14px #ffde67; filter: none; }
  30%      { text-shadow: 0 0 12px rgba(255,200,0,1),    0 0 30px rgba(255,160,0,0.7); filter: brightness(1.6); }
  40%      { text-shadow: 0px 0px 14px #ffde67; filter: none; }
}
.flash-sale-text {
  animation: lightning-flash 3s ease-in-out infinite;
}

/* CTA pulse — subtle scale + outward green ring halo on the primary green CTAs.
   Pseudo-element handles the ring so it coexists with existing drop-shadow + the
   click-loading spinner overlay without interference. */
@keyframes cta-pulse-scale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@keyframes cta-pulse-ring {
  0%   { box-shadow: 0 0 0 0  rgba(0, 172, 5, 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 14px rgba(0, 172, 5, 0);   opacity: 0; }
  100% { box-shadow: 0 0 0 14px rgba(0, 172, 5, 0);   opacity: 0; }
}
.cta-pulse {
  position: relative;
  animation: cta-pulse-scale 2.2s ease-in-out infinite;
}

a{
  text-align: center;
}

.cta-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(0, 172, 5, 0.55);
  animation: cta-pulse-ring 2.2s ease-out infinite;
}
/* Pause the pulse the moment the CTA enters the click-loading state */
.cta-loading,
.cta-loading::after { animation-play-state: paused; }

/* Marquee stripes on the red flash-sale accent strip (ps-cta-1). The repeating
   gradient pattern has a 38px period — animating background-position-x from 0
   to 38px completes one cycle. Desktop (lg+) only per the design brief. */
@keyframes marquee-stripes-left {
  from { background-position: 0 0; }
  to   { background-position: 38px 0; }
}
.stripes-marquee {
  background-image: repeating-linear-gradient(-62deg, transparent 0 18px, rgba(255, 255, 255, 0.15) 18px 38px);
  background-color: #e53935;
  animation: marquee-stripes-left 1s linear infinite;
}

/* Sticky bottom CTA (mobile + tablet). Slides off-screen when [data-final-cta]
   enters the viewport so the page's own final CTA section closes the deal
   without two competing CTAs on screen. */
.sticky-mobile-cta {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out;
}
.sticky-mobile-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

/* Icon strip marquee (icons-5). Duplicated row scrolls left continuously.
   Desktop shows all 4 items centered (no animation). Mobile/tablet: ticker. */
@keyframes icon-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.icon-ticker-track {
  display: flex;
  width: max-content;
  animation: icon-ticker 20s linear infinite;
}
@media (min-width: 1024px) {
  .icon-ticker-track { animation: none; width: auto; }
}

/* ── lang-fr overrides ── */
@media (min-width: 1024px) {
  /* Keep marquee visible, keep desktop hidden between 1024–1549px */
  .lang-fr .icons-5-desktop { display: none; }
  .lang-fr .icons-5-marquee { display: block; }
  /* Re-enable ticker animation (disabled by the rule above) */
  .lang-fr .icon-ticker-track { animation: icon-ticker 20s linear infinite; width: max-content; }
}
@media (min-width: 1550px) {
  .lang-fr .icons-5-desktop { display: flex; }
  .lang-fr .icons-5-marquee { display: none; }
  .lang-fr .icon-ticker-track { animation: none; width: auto; }
}
.lang-fr .nav-flash-mobile { font-size: 12px; }
.lang-fr .ps-sidebar-cta-btn { font-size: 18px; }
.lang-fr .ps-cta-1-btn { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .flash-sale-text,
  .cta-pulse,
  .cta-pulse::after,
  .stripes-marquee,
  .icon-ticker-track { animation: none; }
  .cta-pulse { transform: none; }
  .sticky-mobile-cta { transition: none; }
}

/* Accordion panel — smooth open/close via max-height + opacity.
   max-height transition at 380ms ease; opacity finishes slightly earlier. */
[data-accordion-panel] {
  overflow: hidden;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 280ms ease-out,
              margin 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-accordion-panel].is-collapsed {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0 !important;
}
/* Icon rotation for +/- morph */
[data-accordion-icon] {
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-accordion-item][data-open="true"] [data-accordion-icon] {
  transform: rotate(45deg);
}

/* CTA loading spinner — universal */
@keyframes cta-spin {
  to { transform: rotate(360deg); }
}
.cta-spinner {
  width: 1.4em;
  height: 1.4em;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cta-spin 0.7s linear infinite;
}
.cta-loading {
  position: relative;
}
.cta-loading > :not(.cta-spinner-overlay) {
  opacity: 0;
}
.cta-spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Stock-running-low bars — left-to-right opacity wave, matches prior LPs. */
@keyframes stock-wave {
  0%, 70%, 100% { opacity: 0.2; }
  20%, 40%      { opacity: 1; }
}
.stock-bar {
  animation: stock-wave 1.5s ease-in-out infinite;
  will-change: opacity;
}
.stock-bar:nth-child(1) { animation-delay: 0s; }
.stock-bar:nth-child(2) { animation-delay: 0.25s; }
.stock-bar:nth-child(3) { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .stock-bar { animation: none; opacity: 1; }
}