/* Comfortrek V251 — Badge rendering hardening
 * Fixes: stale/legacy badge backgrounds on PDP, missing glow, missing shine,
 * and the V250 pseudo-element conflict that replaced the glow layer with the icon.
 * Rail positioning intentionally remains V241/V248-compatible.
 */

.product-card-topline .product-badge,
.product-badges-pdp .product-badge,
.pm-badge-preview-stage .product-badge,
.pm-badge-library-trigger .product-badge {
  position:relative !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  isolation:isolate !important;
  color:var(--ct-badge-text,#fff) !important;
  border:1px solid var(--ct-badge-border,rgba(255,255,255,.24)) !important;
  border-radius:var(--ct-badge-radius,999px) !important;
  font-family:var(--ct-badge-font,'IBM Plex Mono',monospace) !important;
  font-size:clamp(8px,var(--ct-badge-size,9px),11px) !important;
  font-weight:var(--ct-badge-weight,900) !important;
  letter-spacing:var(--ct-badge-spacing,.055em) !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  padding:var(--ct-badge-py,5px) var(--ct-badge-px,9px) !important;
  background:linear-gradient(135deg,var(--ct-badge-bg,#1d2430),var(--ct-badge-gradient,#33465d)) !important;
  box-shadow:
    0 5px 16px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 calc(7px + 22px * var(--ct-badge-glow-intensity,.75)) var(--ct-badge-bg,#1d2430) !important;
  filter:drop-shadow(0 0 calc(2px + 7px * var(--ct-badge-glow-intensity,.75)) var(--ct-badge-bg,#1d2430)) !important;
  animation:ctBadge251Glow 2.8s ease-in-out infinite !important;
}

/* Visual modes are now authoritative on both cards and PDP; legacy badge
 * classes cannot silently restore their old colours. */
.product-card-topline .product-badge[style*="--ct-badge-visual:solid"],
.product-badges-pdp .product-badge[style*="--ct-badge-visual:solid"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-visual:solid"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-visual:solid"] {
  background:var(--ct-badge-bg,#1d2430) !important;
}
.product-card-topline .product-badge[style*="--ct-badge-visual:gradient"],
.product-badges-pdp .product-badge[style*="--ct-badge-visual:gradient"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-visual:gradient"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-visual:gradient"] {
  background:linear-gradient(135deg,var(--ct-badge-bg,#1d2430),var(--ct-badge-gradient,#33465d)) !important;
}
.product-card-topline .product-badge[style*="--ct-badge-visual:glass"],
.product-badges-pdp .product-badge[style*="--ct-badge-visual:glass"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-visual:glass"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-visual:glass"] {
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.055)) !important;
  backdrop-filter:blur(8px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(125%) !important;
}
.product-card-topline .product-badge[style*="--ct-badge-visual:metallic"],
.product-badges-pdp .product-badge[style*="--ct-badge-visual:metallic"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-visual:metallic"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-visual:metallic"] {
  background:linear-gradient(110deg,var(--ct-badge-bg,#454b55) 0%,#f1f3f5 48%,var(--ct-badge-gradient,#5a616b) 100%) !important;
}
.product-card-topline .product-badge[style*="--ct-badge-visual:neon"],
.product-badges-pdp .product-badge[style*="--ct-badge-visual:neon"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-visual:neon"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-visual:neon"] {
  background:linear-gradient(135deg,var(--ct-badge-bg,#1d2430),var(--ct-badge-gradient,#33465d)) !important;
  box-shadow:0 0 8px var(--ct-badge-bg,#1d2430),0 0 28px var(--ct-badge-bg,#1d2430),inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.product-card-topline .product-badge[style*="--ct-badge-visual:outline"],
.product-badges-pdp .product-badge[style*="--ct-badge-visual:outline"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-visual:outline"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-visual:outline"] {
  background:transparent !important;
  box-shadow:0 0 calc(7px + 22px * var(--ct-badge-glow-intensity,.75)) var(--ct-badge-bg,#1d2430) !important;
}

/* Icon layer. V250 accidentally used ::before for the icon and thereby
 * removed the V249 glow layer. Glow is now on the element itself; the icon
 * and shine can therefore coexist reliably. */
.product-card-topline .product-badge::before,
.product-badges-pdp .product-badge::before,
.pm-badge-preview-stage .product-badge::before,
.pm-badge-library-trigger .product-badge::before {
  content:var(--ct-badge-icon,"✦") !important;
  position:absolute !important;
  left:7px !important;
  top:50% !important;
  width:13px !important;
  height:13px !important;
  transform:translateY(-50%) !important;
  display:grid !important;
  place-items:center !important;
  color:var(--ct-badge-text,#fff) !important;
  font-size:9px !important;
  line-height:1 !important;
  z-index:30 !important;
  opacity:.96 !important;
  pointer-events:none !important;
  box-shadow:none !important;
  text-shadow:0 0 7px currentColor !important;
}
.product-card-topline .product-badge,
.product-badges-pdp .product-badge {
  padding-left:max(25px,var(--ct-badge-px,9px)) !important;
}

/* One deterministic shine layer. */
.product-card-topline .product-badge::after,
.product-badges-pdp .product-badge::after,
.pm-badge-preview-stage .product-badge::after,
.pm-badge-library-trigger .product-badge::after {
  content:"" !important;
  position:absolute !important;
  top:-90% !important;
  bottom:-90% !important;
  left:0 !important;
  width:34% !important;
  min-width:18px !important;
  transform:translate3d(-240%,0,0) skewX(-18deg) !important;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,.55) 44%,rgba(255,255,255,1) 50%,rgba(255,255,255,.55) 56%,rgba(255,255,255,0) 72%,transparent 100%) !important;
  animation:ctBadge251Shine var(--ct-badge-speed,2.35s) linear infinite !important;
  animation-play-state:running !important;
  opacity:var(--ct-badge-shine,1) !important;
  pointer-events:none !important;
  z-index:25 !important;
  display:block !important;
  mix-blend-mode:screen !important;
  will-change:transform,opacity !important;
}

@keyframes ctBadge251Shine {
  0%{transform:translate3d(-240%,0,0) skewX(-18deg);opacity:0}
  10%{opacity:calc(.72 * var(--ct-badge-shine,1))}
  25%{opacity:var(--ct-badge-shine,1)}
  43%{transform:translate3d(360%,0,0) skewX(-18deg);opacity:0}
  100%{transform:translate3d(360%,0,0) skewX(-18deg);opacity:0}
}
@keyframes ctBadge251Glow {
  0%,100%{filter:drop-shadow(0 0 3px var(--ct-badge-bg,#1d2430));transform:translateZ(0)}
  50%{filter:drop-shadow(0 0 calc(8px + 9px * var(--ct-badge-glow-intensity,.75)) var(--ct-badge-bg,#1d2430));transform:translateZ(0) scale(1.012)}
}

/* When glow is explicitly disabled, remove the visual glow but keep shine. */
.product-card-topline .product-badge[style*="--ct-badge-glow:0"],
.product-badges-pdp .product-badge[style*="--ct-badge-glow:0"],
.pm-badge-preview-stage .product-badge[style*="--ct-badge-glow:0"],
.pm-badge-library-trigger .product-badge[style*="--ct-badge-glow:0"] {
  filter:none !important;
  box-shadow:0 5px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.20) !important;
  animation:none !important;
}

@media (prefers-reduced-motion:reduce){
  .product-card-topline .product-badge,
  .product-badges-pdp .product-badge,
  .pm-badge-preview-stage .product-badge,
  .pm-badge-library-trigger .product-badge {animation:none !important}
  .product-card-topline .product-badge::after,
  .product-badges-pdp .product-badge::after,
  .pm-badge-preview-stage .product-badge::after,
  .pm-badge-library-trigger .product-badge::after {animation:none !important;transform:translate3d(-240%,0,0) skewX(-18deg) !important}
}