/* ==========================================================================
   BEST CHRISTMAS SWEATER - OFFICIAL FESTIVE & UX ENHANCEMENT SUITE
   Namespace: bcs-* (with backward-compatibility aliases for zv-*)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Variables & Festive Palettes
   -------------------------------------------------------------------------- */
:root {
  --bcs-xmas-hero-bg: url('https://img-va.myshopline.com/image/store/1789714266278/473d9331de554ad0b906f1b35fe847e8.jpg');
  --bcs-hw-hero-bg: url('https://img-va.myshopline.com/image/store/1789714266278/fd6f10fbe37e4bbbb5c7c63511503ba6.jpg');
  --bcs-xmas-portal-bg: url('https://img-va.myshopline.com/image/store/1789714266278/606ebb2865314617940e3fbc01fdcdb6.jpg');
  --bcs-hw-portal-bg: url('https://img-va.myshopline.com/image/store/1789714266278/e68381f49a1f4b70b5ae352b210dee4e.jpg');
  
  --zv-xmas-hero-bg: var(--bcs-xmas-hero-bg);
  --zv-hw-hero-bg: var(--bcs-hw-hero-bg);

  --bcs-primary: #121212;
  --bcs-accent: #c41e3a;
  --bcs-glow: rgba(196, 30, 58, 0.35);
}

/* Classic Mode */
html[data-bcs-festival="classic"],
html[data-zv-festival="classic"],
html:not([data-bcs-festival]) {
  --bcs-primary: #121212;
  --bcs-accent: #b8860b;
  --bcs-glow: rgba(184, 134, 11, 0.25);
}

/* Halloween Mode - Rich Spooky Ambiance */
html[data-bcs-festival="halloween"],
html[data-zv-festival="halloween"] {
  --bcs-primary: #1a0f2e;
  --bcs-accent: #ff6600;
  --bcs-glow: rgba(255, 102, 0, 0.45);
}

/* Halloween Site-Wide Atmosphere Enhancements */
html[data-bcs-festival="halloween"] body,
html[data-zv-festival="halloween"] body {
  background-color: #fcf9f5 !important;
  background-image: 
    radial-gradient(circle at 12% 8%, rgba(255, 102, 0, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 88% 14%, rgba(138, 43, 226, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(255, 102, 0, 0.04) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* Header Spooky Accent */
html[data-bcs-festival="halloween"] header,
html[data-bcs-festival="halloween"] .header-wrapper,
html[data-zv-festival="halloween"] header,
html[data-zv-festival="halloween"] .header-wrapper {
  border-bottom: 1px solid rgba(255, 102, 0, 0.22) !important;
  box-shadow: 0 4px 20px rgba(255, 102, 0, 0.08) !important;
}

/* Highlight Halloween Nav Menu Item */
html[data-bcs-festival="halloween"] .header-nav a[href*="halloween"],
html[data-zv-festival="halloween"] .header-nav a[href*="halloween"] {
  color: #ff6600 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(255, 102, 0, 0.3) !important;
}

/* Christmas Mode */
html[data-bcs-festival="christmas"],
html[data-zv-festival="christmas"] {
  --bcs-primary: #0b1f14;
  --bcs-accent: #c41e3a;
  --bcs-glow: rgba(196, 30, 58, 0.45);
}

/* --------------------------------------------------------------------------
   2. Header Capsule Switcher (Mobile >=44px, 0ms Instant Feedback)
   -------------------------------------------------------------------------- */
.bcs-festive-capsule,
.zv-festive-capsule {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  padding: 3px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.bcs-capsule-btn,
.zv-capsule-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  min-height: 34px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  color: #555555 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bcs-capsule-btn:hover,
.zv-capsule-btn:hover {
  color: #111111 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

/* Active Button Illuminations */
.bcs-capsule-btn.active,
.zv-capsule-btn.active {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.bcs-capsule-btn[data-festival="classic"].active,
.zv-capsule-btn[data-festival="classic"].active {
  background: #1e1e1e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.bcs-capsule-btn[data-festival="halloween"].active,
.zv-capsule-btn[data-festival="halloween"].active {
  background: linear-gradient(135deg, #ff6600 0%, #d84315 100%) !important;
  box-shadow: 0 2px 14px rgba(255, 102, 0, 0.55) !important;
}

.bcs-capsule-btn[data-festival="christmas"].active,
.zv-capsule-btn[data-festival="christmas"].active {
  background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%) !important;
  box-shadow: 0 2px 14px rgba(196, 30, 58, 0.55) !important;
}

.bcs-capsule-icon,
.zv-capsule-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
}

.bcs-capsule-icon svg,
.zv-capsule-icon svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

/* Mobile Switcher Standards (>=44px touch targets) */
@media (max-width: 768px) {
  .bcs-festive-capsule,
  .zv-festive-capsule {
    padding: 2px !important;
    max-width: 100% !important;
  }
  .bcs-capsule-btn,
  .zv-capsule-btn {
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .bcs-capsule-text,
  .zv-capsule-text {
    display: inline-block !important;
  }
}

/* --------------------------------------------------------------------------
   3. Ambient Particle Overlays (Sky Flying Bats & Crystalline Snow)
   Notice: Non-intrusive! Only in upper sky & gentle background snow.
   -------------------------------------------------------------------------- */
.bcs-particles-container,
.zv-particles-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 999980 !important;
  overflow: hidden !important;
  contain: strict !important;
}

/* Default state: both hidden */
.bcs-bats-container,
.zv-bats-container,
.bcs-snow-container,
.zv-snow-container {
  display: none !important;
}

/* Show Halloween bat overlay in Halloween mode */
html[data-bcs-festival="halloween"] .bcs-bats-container,
html[data-bcs-festival="halloween"] .zv-bats-container,
html[data-zv-festival="halloween"] .bcs-bats-container,
html[data-zv-festival="halloween"] .zv-bats-container {
  display: block !important;
}

/* Show Christmas snow overlay in Christmas mode */
html[data-bcs-festival="christmas"] .bcs-snow-container,
html[data-bcs-festival="christmas"] .zv-snow-container,
html[data-zv-festival="christmas"] .bcs-snow-container,
html[data-zv-festival="christmas"] .zv-snow-container {
  display: block !important;
}

/* Performance degradation: disable on mobile (<768px) and reduced-motion */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .bcs-particles-container,
  .zv-particles-container,
  .bcs-bats-container,
  .zv-bats-container,
  .bcs-snow-container,
  .zv-snow-container,
  .bcs-hw-particle {
    display: none !important;
  }
}

/* === TRUE ARTICULATED WING-FLAPPING BATS (LIFELIKE MOTION IN UPPER SKY) === */
.bcs-bat,
.zv-bat {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
}

.bcs-bat-wrap,
.zv-bat-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Stable central body with ears & glowing orange eyes */
.bcs-torso,
.zv-torso {
  display: block !important;
  width: 16px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22' fill='%23190e24'%3E%3Cpath d='M3,0 L5,5 L7,3 L9,3 L11,5 L13,0 L12,7 C14,9 15,12 15,15 C15,19 12,22 8,22 C4,22 1,19 1,15 C1,12 2,9 4,7 Z'/%3E%3Ccircle cx='6' cy='10' r='1.2' fill='%23ff6600'/%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23ff6600'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 2 !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)) !important;
}

/* Flapping wings attached at shoulder joints */
.bcs-wing,
.zv-wing {
  display: block !important;
  width: 28px !important;
  height: 20px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  will-change: transform !important;
}

.bcs-wing-l,
.zv-wing-l {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='%23190e24'%3E%3Cpath d='M28,11 C20,1 8,2 0,9 C4,13 9,16 14,14 C18,18 23,19 28,11 Z'/%3E%3C/svg%3E") !important;
  background-position: right center !important;
  transform-origin: 100% 55% !important;
  margin-right: -3px !important;
  animation: bcs-wing-flap-l 0.22s ease-in-out infinite alternate !important;
}

.bcs-wing-r,
.zv-wing-r {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='%23190e24'%3E%3Cpath d='M0,11 C8,1 20,2 28,9 C24,13 19,16 14,14 C10,18 5,19 0,11 Z'/%3E%3C/svg%3E") !important;
  background-position: left center !important;
  transform-origin: 0% 55% !important;
  margin-left: -3px !important;
  animation: bcs-wing-flap-r 0.22s ease-in-out infinite alternate !important;
}

.flap-fast .bcs-wing, .flap-fast .zv-wing { animation-duration: 0.17s !important; }
.flap-mid .bcs-wing,  .flap-mid .zv-wing  { animation-duration: 0.22s !important; }
.flap-slow .bcs-wing, .flap-slow .zv-wing { animation-duration: 0.27s !important; }

@keyframes bcs-wing-flap-l {
  0%   { transform: rotate(38deg) scaleY(0.85); }
  100% { transform: rotate(-35deg) scaleY(1.05); }
}

@keyframes bcs-wing-flap-r {
  0%   { transform: rotate(-38deg) scaleY(0.85); }
  100% { transform: rotate(35deg) scaleY(1.05); }
}

/* Lifelike Gliding Flight Trajectories across Sky (top 50px - 220px) */
@keyframes bcs-fly-lr-1 {
  0%   { transform: translate3d(-100px, 60px, 0); }
  50%  { transform: translate3d(50vw, 35px, 0); }
  100% { transform: translate3d(105vw, 85px, 0); }
}

@keyframes bcs-fly-rl-1 {
  0%   { transform: translate3d(105vw, 110px, 0) scaleX(-1); }
  50%  { transform: translate3d(45vw, 70px, 0) scaleX(-1); }
  100% { transform: translate3d(-100px, 130px, 0) scaleX(-1); }
}

@keyframes bcs-fly-lr-2 {
  0%   { transform: translate3d(-100px, 160px, 0) scale(0.85); }
  50%  { transform: translate3d(55vw, 120px, 0) scale(0.85); }
  100% { transform: translate3d(105vw, 180px, 0) scale(0.85); }
}

@keyframes bcs-fly-rl-2 {
  0%   { transform: translate3d(105vw, 200px, 0) scale(0.9) scaleX(-1); }
  50%  { transform: translate3d(40vw, 150px, 0) scale(0.9) scaleX(-1); }
  100% { transform: translate3d(-100px, 220px, 0) scale(0.9) scaleX(-1); }
}

.bcs-bat-1, .zv-bat-1 { animation: bcs-fly-lr-1 13s linear infinite -2s !important; }
.bcs-bat-2, .zv-bat-2 { animation: bcs-fly-rl-1 15s linear infinite -7s !important; }
.bcs-bat-3, .zv-bat-3 { animation: bcs-fly-lr-2 17s linear infinite -11s !important; }
.bcs-bat-4, .zv-bat-4 { animation: bcs-fly-rl-2 14s linear infinite -5s !important; }

/* === REAL CRYSTALLINE LACE SNOWFLAKES (片状六角冰晶雪花 - 晶莹半透明背景氛围) === */
.bcs-crystal-flake {
  position: absolute !important;
  pointer-events: none !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  will-change: transform, opacity !important;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75)) !important;
  opacity: 0.75 !important;
}

@keyframes bcs-crystal-fall-1 {
  0%   { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.85; }
  88%  { opacity: 0.8; }
  100% { transform: translate3d(50px, 105vh, 0) rotate(360deg); opacity: 0; }
}

@keyframes bcs-crystal-fall-2 {
  0%   { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.85; }
  88%  { opacity: 0.8; }
  100% { transform: translate3d(-45px, 105vh, 0) rotate(-360deg); opacity: 0; }
}

.bcs-crystal-1  { left: 5%;  width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 11s linear infinite 0.5s !important; }
.bcs-crystal-2  { left: 14%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 13s linear infinite 3s !important; }
.bcs-crystal-3  { left: 23%; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 10s linear infinite 6s !important; }
.bcs-crystal-4  { left: 32%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 14s linear infinite 2s !important; }
.bcs-crystal-5  { left: 42%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 12s linear infinite 8s !important; }
.bcs-crystal-6  { left: 50%; width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 9s  linear infinite 1s !important; }
.bcs-crystal-7  { left: 59%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 13s linear infinite 5s !important; }
.bcs-crystal-8  { left: 68%; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 11s linear infinite 7s !important; }
.bcs-crystal-9  { left: 77%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 12s linear infinite 2.5s !important; }
.bcs-crystal-10 { left: 84%; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 10s linear infinite 6.5s !important; }
.bcs-crystal-11 { left: 91%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 14s linear infinite 4s !important; }
.bcs-crystal-12 { left: 97%; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 11s linear infinite 1.5s !important; }

/* === AMBIENT FLOATING HALLOWEEN PARTICLES (秋日落叶、微光幽灵、南瓜微火) === */
.bcs-hw-particle {
  position: absolute !important;
  pointer-events: none !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  will-change: transform, opacity !important;
}

@keyframes bcs-hw-fall-1 {
  0%   { transform: translate3d(0, -40px, 0) rotate(0deg); }
  12%  { opacity: 0.82; }
  88%  { opacity: 0.78; }
  100% { transform: translate3d(55px, 105vh, 0) rotate(340deg); }
}

@keyframes bcs-hw-fall-2 {
  0%   { transform: translate3d(0, -40px, 0) rotate(0deg); }
  12%  { opacity: 0.82; }
  88%  { opacity: 0.78; }
  100% { transform: translate3d(-50px, 105vh, 0) rotate(-320deg); }
}

@keyframes bcs-hw-rise-1 {
  0%   { transform: translate3d(0, 105vh, 0) scale(0.9); opacity: 0; }
  15%  { opacity: 0.75; }
  85%  { opacity: 0.7; }
  100% { transform: translate3d(45px, -40px, 0) scale(1.05); opacity: 0; }
}

@keyframes bcs-hw-rise-2 {
  0%   { transform: translate3d(0, 105vh, 0) scale(1); opacity: 0; }
  15%  { opacity: 0.75; }
  85%  { opacity: 0.7; }
  100% { transform: translate3d(-40px, -40px, 0) scale(0.95); opacity: 0; }
}

.bcs-hw-p-1  { left: 6%;  width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 2 C16 2 27 8 25 19 C23 27 16 30 16 30 C16 30 9 27 7 19 C5 8 16 2 16 2 Z' fill='%23d9631e' fill-opacity='0.85'/%3E%3Cpath d='M16 6 L16 30 M16 12 L22 17 M16 18 L23 23 M16 12 L10 17 M16 18 L9 23' stroke='%23ffd166' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 11s linear infinite 0.5s !important; filter: drop-shadow(0 2px 6px rgba(217, 99, 30, 0.45)) !important; }
.bcs-hw-p-2  { left: 15%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4 C11 4 7 8 7 14 C7 20 6 25 8 27 C10 28 12 26 14 27 C16 28 17 27 19 27 C21 27 22 28 24 27 C26 25 25 20 25 14 C25 8 21 4 16 4 Z' fill='%23ffffff' fill-opacity='0.75' filter='drop-shadow(0 0 6px rgba(255,255,255,0.6))'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23190e24'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23190e24'/%3E%3Cellipse cx='16' cy='17' rx='1.5' ry='2.2' fill='%23190e24'/%3E%3C/svg%3E"); animation: bcs-hw-rise-1 14s linear infinite 2s !important; }
.bcs-hw-p-3  { left: 24%; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 3 L18 9 L24 7 L21 13 L28 15 L22 20 L25 26 L18 23 L17 30 L15 30 L14 23 L7 26 L10 20 L4 15 L11 13 L8 7 L14 9 Z' fill='%23e0871d' fill-opacity='0.85'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 13s linear infinite 4s !important; filter: drop-shadow(0 2px 6px rgba(224, 135, 29, 0.4)) !important; }
.bcs-hw-p-4  { left: 33%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='10' fill='%23ff7700' fill-opacity='0.8' filter='drop-shadow(0 0 6px rgba(255,136,0,0.7))'/%3E%3Cpath d='M14 4 C15 4 15.5 6 14 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpolygon points='10,12 12,14 10,15' fill='%232b0f38'/%3E%3Cpolygon points='18,12 16,14 18,15' fill='%232b0f38'/%3E%3Cpolygon points='14,14 15,16 13,16' fill='%232b0f38'/%3E%3Cpath d='M10 18 Q14 21 18 18' stroke='%232b0f38' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 10s linear infinite 1s !important; }
.bcs-hw-p-5  { left: 42%; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffb703' opacity='0.8'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' filter='drop-shadow(0 0 4px rgba(255,183,3,0.8))'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 9s linear infinite 5s !important; }
.bcs-hw-p-6  { left: 51%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4 C11 4 7 8 7 14 C7 20 6 25 8 27 C10 28 12 26 14 27 C16 28 17 27 19 27 C21 27 22 28 24 27 C26 25 25 20 25 14 C25 8 21 4 16 4 Z' fill='%23ffffff' fill-opacity='0.75' filter='drop-shadow(0 0 6px rgba(255,255,255,0.6))'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23190e24'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23190e24'/%3E%3Cellipse cx='16' cy='17' rx='1.5' ry='2.2' fill='%23190e24'/%3E%3C/svg%3E"); animation: bcs-hw-rise-2 13s linear infinite 3.5s !important; }
.bcs-hw-p-7  { left: 60%; width: 25px; height: 25px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 2 C16 2 27 8 25 19 C23 27 16 30 16 30 C16 30 9 27 7 19 C5 8 16 2 16 2 Z' fill='%23d9631e' fill-opacity='0.85'/%3E%3Cpath d='M16 6 L16 30 M16 12 L22 17 M16 18 L23 23 M16 12 L10 17 M16 18 L9 23' stroke='%23ffd166' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 12s linear infinite 6s !important; filter: drop-shadow(0 2px 6px rgba(217, 99, 30, 0.45)) !important; }
.bcs-hw-p-8  { left: 69%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='10' fill='%23ff7700' fill-opacity='0.8' filter='drop-shadow(0 0 6px rgba(255,136,0,0.7))'/%3E%3Cpath d='M14 4 C15 4 15.5 6 14 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpolygon points='10,12 12,14 10,15' fill='%232b0f38'/%3E%3Cpolygon points='18,12 16,14 18,15' fill='%232b0f38'/%3E%3Cpolygon points='14,14 15,16 13,16' fill='%232b0f38'/%3E%3Cpath d='M10 18 Q14 21 18 18' stroke='%232b0f38' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 11s linear infinite 2.5s !important; }
.bcs-hw-p-9  { left: 78%; width: 27px; height: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 3 L18 9 L24 7 L21 13 L28 15 L22 20 L25 26 L18 23 L17 30 L15 30 L14 23 L7 26 L10 20 L4 15 L11 13 L8 7 L14 9 Z' fill='%23e0871d' fill-opacity='0.85'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 12.5s linear infinite 7s !important; filter: drop-shadow(0 2px 6px rgba(224, 135, 29, 0.4)) !important; }
.bcs-hw-p-10 { left: 86%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4 C11 4 7 8 7 14 C7 20 6 25 8 27 C10 28 12 26 14 27 C16 28 17 27 19 27 C21 27 22 28 24 27 C26 25 25 20 25 14 C25 8 21 4 16 4 Z' fill='%23ffffff' fill-opacity='0.75' filter='drop-shadow(0 0 6px rgba(255,255,255,0.6))'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23190e24'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23190e24'/%3E%3Cellipse cx='16' cy='17' rx='1.5' ry='2.2' fill='%23190e24'/%3E%3C/svg%3E"); animation: bcs-hw-rise-1 15s linear infinite 1.5s !important; }
.bcs-hw-p-11 { left: 92%; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffb703' opacity='0.8'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' filter='drop-shadow(0 0 4px rgba(255,183,3,0.8))'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 10s linear infinite 3s !important; }
.bcs-hw-p-12 { left: 97%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 2 C16 2 27 8 25 19 C23 27 16 30 16 30 C16 30 9 27 7 19 C5 8 16 2 16 2 Z' fill='%23d9631e' fill-opacity='0.85'/%3E%3Cpath d='M16 6 L16 30 M16 12 L22 17 M16 18 L23 23 M16 12 L10 17 M16 18 L9 23' stroke='%23ffd166' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 13s linear infinite 4.5s !important; filter: drop-shadow(0 2px 6px rgba(217, 99, 30, 0.45)) !important; }


/* --------------------------------------------------------------------------
   4. FIXED FESTIVE CORNER DECORATIONS (固定在屏幕与版块边角，绝不挡服装)
   -------------------------------------------------------------------------- */
.bcs-fixed-corner-decor {
  position: fixed !important;
  z-index: 99990 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: flex-end !important;
  contain: layout style !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Bottom-Right Screen Corner */
.bcs-fixed-decor-br {
  bottom: 24px !important;
  right: 28px !important;
  gap: 8px !important;
}

/* Bottom-Left Screen Corner */
.bcs-fixed-decor-bl {
  bottom: 24px !important;
  left: 28px !important;
  gap: 6px !important;
}

/* Fixed Elements Styling */
.bcs-fixed-elem {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  will-change: transform, filter !important;
}

/* Halloween Jack-o'-Lantern (Fixed in corner with warm breathing candle glow) */
.bcs-fixed-pumpkin-lg {
  width: 52px !important;
  height: 52px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C16 2 17 6 15 8C11 8 6 11 5 17C4 23 8 29 16 29C24 29 28 23 27 17C26 11 21 8 17 8C15 6 16 2 16 2Z' fill='%23ff6600'/%3E%3Cpath d='M16 2C17 2 18 5 16 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 13L12 16L9 17Z' fill='%231a0f2e'/%3E%3Cpath d='M22 13L23 17L20 16Z' fill='%231a0f2e'/%3E%3Cpath d='M16 16L17 19L15 19Z' fill='%231a0f2e'/%3E%3Cpath d='M9 22C11 25 14 26 16 26C18 26 21 25 23 22C21 23 18 24 16 24C14 24 11 23 9 22Z' fill='%231a0f2e'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 14px rgba(255, 102, 0, 0.85)) !important;
  animation: bcs-candle-glow 3s ease-in-out infinite alternate !important;
}

.bcs-fixed-pumpkin-sm {
  width: 36px !important;
  height: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C16 2 17 6 15 8C11 8 6 11 5 17C4 23 8 29 16 29C24 29 28 23 27 17C26 11 21 8 17 8C15 6 16 2 16 2Z' fill='%23ff6600'/%3E%3Cpath d='M16 2C17 2 18 5 16 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 13L12 16L9 17Z' fill='%231a0f2e'/%3E%3Cpath d='M22 13L23 17L20 16Z' fill='%231a0f2e'/%3E%3Cpath d='M16 16L17 19L15 19Z' fill='%231a0f2e'/%3E%3Cpath d='M9 22C11 25 14 26 16 26C18 26 21 25 23 22C21 23 18 24 16 24C14 24 11 23 9 22Z' fill='%231a0f2e'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.75)) !important;
}

/* Halloween Friendly Ghost (Hovering gently in place right above the pumpkin) */
.bcs-fixed-ghost {
  width: 42px !important;
  height: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C10 3 6 8 6 15C6 21 5 26 8 28C10 29 12 27 14 28C16 29 17 28 19 28C21 28 22 29 24 28C27 26 26 21 26 15C26 8 22 3 16 3Z' fill='%23ffffff' opacity='0.95' filter='drop-shadow(0 2px 8px rgba(255,255,255,0.5))'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%231a0f2e'/%3E%3Ccircle cx='20' cy='12' r='2' fill='%231a0f2e'/%3E%3Cellipse cx='16' cy='18' rx='2' ry='3' fill='%231a0f2e'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) !important;
  animation: bcs-ghost-bob 2.6s ease-in-out infinite alternate !important;
  margin-bottom: 8px !important;
}

/* Halloween Spooky Star (Twinkles subtly in place) */
.bcs-fixed-star {
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffaa00'%3E%3Cpath d='M12 2L14.4 9.6L22 12L14.4 14.4L12 22L9.6 14.4L2 12L9.6 9.6L12 2Z'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.85)) !important;
  animation: bcs-star-twinkle 2s ease-in-out infinite alternate !important;
}

/* Christmas Tree (Fixed with golden festive glow) */
.bcs-fixed-tree {
  width: 56px !important;
  height: 56px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='16,3 20,9 18,9 23,16 20,16 25,24 7,24 12,16 9,16 14,9 12,9' fill='%232e7d32'/%3E%3Crect x='14' y='24' width='4' height='5' fill='%236d4c41'/%3E%3Ccircle cx='16' cy='3' r='2' fill='%23ffd700'/%3E%3Ccircle cx='13' cy='13' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='19' cy='14' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='11' cy='20' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='17' cy='19' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='21' cy='21' r='1.5' fill='%231e88e5'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.75)) !important;
  animation: bcs-holiday-sparkle 3s ease-in-out infinite alternate !important;
}

/* Santa Claus (Fixed smiling cheerful presence) */
.bcs-fixed-santa {
  width: 44px !important;
  height: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 14C8 6 24 6 26 14L28 17L4 17Z' fill='%23d32f2f'/%3E%3Crect x='3' y='16' width='26' height='4' rx='2' fill='%23ffffff'/%3E%3Ccircle cx='27' cy='11' r='3.5' fill='%23ffffff'/%3E%3Cellipse cx='16' cy='22' rx='9' ry='6' fill='%23ffffff'/%3E%3Cellipse cx='16' cy='20' rx='6' ry='3' fill='%23ffccbc'/%3E%3Ccircle cx='13' cy='19' r='1' fill='%23212121'/%3E%3Ccircle cx='19' cy='19' r='1' fill='%23212121'/%3E%3Ccircle cx='16' cy='21' r='1.5' fill='%23e53935'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)) !important;
}

/* Gift Boxes (Fixed festive presents under the tree) */
.bcs-fixed-gift-lg {
  width: 34px !important;
  height: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2' fill='%23d32f2f'/%3E%3Crect x='2' y='6' width='20' height='4' rx='1' fill='%23e53935'/%3E%3Crect x='10' y='6' width='4' height='15' fill='%23ffd700'/%3E%3Cpath d='M12 6C10 3 6 3 8 6ZM12 6C14 3 18 3 16 6Z' fill='%23ffd700'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) !important;
}

.bcs-fixed-gift-sm {
  width: 26px !important;
  height: 26px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2' fill='%23d32f2f'/%3E%3Crect x='2' y='6' width='20' height='4' rx='1' fill='%23e53935'/%3E%3Crect x='10' y='6' width='4' height='15' fill='%23ffd700'/%3E%3Cpath d='M12 6C10 3 6 3 8 6ZM12 6C14 3 18 3 16 6Z' fill='%23ffd700'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
}

/* Animations for fixed elements (subtle in-place breathing, 0 translation across products!) */
@keyframes bcs-candle-glow {
  0%   { filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.65)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.95)); transform: scale(1.04); }
}

@keyframes bcs-ghost-bob {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes bcs-star-twinkle {
  0%   { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 1;   transform: scale(1.15) rotate(15deg); }
}

@keyframes bcs-holiday-sparkle {
  0%   { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)); }
  100% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.95)); }
}

/* Portal Fixed Corner Badges */
.bcs-portal-card .bcs-corner-stamp {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 38px !important;
  height: 38px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  z-index: 5 !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important;
  pointer-events: none !important;
}

.bcs-stamp-pumpkin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C16 2 17 6 15 8C11 8 6 11 5 17C4 23 8 29 16 29C24 29 28 23 27 17C26 11 21 8 17 8C15 6 16 2 16 2Z' fill='%23ff6600'/%3E%3Cpath d='M16 2C17 2 18 5 16 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 13L12 16L9 17Z' fill='%231a0f2e'/%3E%3Cpath d='M22 13L23 17L20 16Z' fill='%231a0f2e'/%3E%3Cpath d='M16 16L17 19L15 19Z' fill='%231a0f2e'/%3E%3Cpath d='M9 22C11 25 14 26 16 26C18 26 21 25 23 22C21 23 18 24 16 24C14 24 11 23 9 22Z' fill='%231a0f2e'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.75)) !important;
}

.bcs-stamp-tree {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='16,3 20,9 18,9 23,16 20,16 25,24 7,24 12,16 9,16 14,9 12,9' fill='%232e7d32'/%3E%3Crect x='14' y='24' width='4' height='5' fill='%236d4c41'/%3E%3Ccircle cx='16' cy='3' r='2' fill='%23ffd700'/%3E%3Ccircle cx='13' cy='13' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='19' cy='14' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='11' cy='20' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='17' cy='19' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='21' cy='21' r='1.5' fill='%231e88e5'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.75)) !important;
}

/* Visibility Control for Fixed Corner Badges */
.bcs-hw-fixed-group,
.bcs-xmas-fixed-group {
  display: none !important;
}

html[data-bcs-festival="halloween"] .bcs-hw-fixed-group,
html[data-zv-festival="halloween"] .bcs-hw-fixed-group {
  display: flex !important;
}

html[data-bcs-festival="christmas"] .bcs-xmas-fixed-group,
html[data-zv-festival="christmas"] .bcs-xmas-fixed-group,
html[data-bcs-festival="classic"] .bcs-xmas-fixed-group,
html:not([data-bcs-festival]) .bcs-xmas-fixed-group {
  display: flex !important;
}

/* Mobile Responsiveness: compact scale */
@media (max-width: 768px) {
  .bcs-fixed-decor-br {
    bottom: 16px !important;
    right: 16px !important;
  }
  .bcs-fixed-decor-bl {
    display: none !important;
  }
  .bcs-fixed-pumpkin-lg { width: 40px !important; height: 40px !important; }
  .bcs-fixed-ghost { width: 32px !important; height: 32px !important; }
  .bcs-fixed-tree { width: 42px !important; height: 42px !important; }
  .bcs-fixed-santa { width: 34px !important; height: 34px !important; }
}

/* --------------------------------------------------------------------------
   5. Homepage Hero Banner & Category Portals (Index only)
   -------------------------------------------------------------------------- */
.bcs-hero-section,
.zv-hero-section {
  position: relative !important;
  width: 100% !important;
  margin: 0 0 40px 0 !important;
  overflow: hidden !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

.bcs-hero-banner,
.zv-hero-banner {
  position: relative !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
  background-position: center 30% !important;
  padding: 70px 24px !important;
  box-sizing: border-box !important;
}

/* Hero Background Overlays with Real Cinematic Backdrops */
.bcs-hero-christmas,
.zv-hero-christmas {
  background-image: 
    linear-gradient(180deg, rgba(12, 36, 20, 0.65) 0%, rgba(12, 36, 20, 0.85) 100%), 
    var(--bcs-xmas-hero-bg) !important;
}

.bcs-hero-halloween,
.zv-hero-halloween {
  background-image: 
    linear-gradient(180deg, rgba(16, 8, 28, 0.55) 0%, rgba(16, 8, 28, 0.82) 100%), 
    var(--bcs-hw-hero-bg) !important;
}

/* Toggle Hero based on Active Festival */
html[data-bcs-festival="halloween"] .bcs-hero-christmas,
html[data-bcs-festival="halloween"] .zv-hero-christmas,
html[data-zv-festival="halloween"] .bcs-hero-christmas,
html[data-zv-festival="halloween"] .zv-hero-christmas {
  display: none !important;
}
html[data-bcs-festival="halloween"] .bcs-hero-halloween,
html[data-bcs-festival="halloween"] .zv-hero-halloween,
html[data-zv-festival="halloween"] .bcs-hero-halloween,
html[data-zv-festival="halloween"] .zv-hero-halloween {
  display: flex !important;
}

html[data-bcs-festival="christmas"] .bcs-hero-christmas,
html[data-bcs-festival="christmas"] .zv-hero-christmas,
html[data-zv-festival="christmas"] .bcs-hero-christmas,
html[data-zv-festival="christmas"] .zv-hero-christmas {
  display: flex !important;
}
html[data-bcs-festival="christmas"] .bcs-hero-halloween,
html[data-bcs-festival="christmas"] .zv-hero-halloween,
html[data-zv-festival="christmas"] .bcs-hero-halloween,
html[data-zv-festival="christmas"] .zv-hero-halloween {
  display: none !important;
}

/* Classic defaults to Christmas Hero */
html[data-bcs-festival="classic"] .bcs-hero-christmas,
html[data-bcs-festival="classic"] .zv-hero-christmas,
html[data-zv-festival="classic"] .bcs-hero-christmas,
html[data-zv-festival="classic"] .zv-hero-christmas,
html:not([data-bcs-festival]) .bcs-hero-christmas,
html:not([data-bcs-festival]) .zv-hero-christmas {
  display: flex !important;
}
html[data-bcs-festival="classic"] .bcs-hero-halloween,
html[data-bcs-festival="classic"] .zv-hero-halloween,
html[data-zv-festival="classic"] .bcs-hero-halloween,
html[data-zv-festival="classic"] .zv-hero-halloween,
html:not([data-bcs-festival]) .bcs-hero-halloween,
html:not([data-bcs-festival]) .zv-hero-halloween {
  display: none !important;
}

.bcs-hero-content,
.zv-hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 820px !important;
  text-align: center !important;
  color: #ffffff !important;
}

.bcs-hero-tag,
.zv-hero-tag {
  display: inline-block !important;
  padding: 8px 20px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  background: rgba(255, 102, 0, 0.22) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 102, 0, 0.5) !important;
  color: #ffaa55 !important;
  text-shadow: 0 0 10px rgba(255, 102, 0, 0.5) !important;
}

.bcs-hero-title,
.zv-hero-title {
  font-size: clamp(34px, 5.5vw, 58px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  color: #ffffff !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55) !important;
  letter-spacing: -0.5px !important;
}

.bcs-hero-desc,
.zv-hero-desc {
  font-size: clamp(16px, 2.2vw, 19px) !important;
  line-height: 1.65 !important;
  margin: 0 auto 32px auto !important;
  max-width: 640px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

.bcs-hero-actions,
.zv-hero-actions {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.bcs-hero-btn,
.zv-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 34px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bcs-hero-btn-primary,
.zv-hero-btn-primary {
  background: linear-gradient(135deg, #ff6600 0%, #e65100 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 20px rgba(255, 102, 0, 0.45) !important;
}
.bcs-hero-btn-primary:hover,
.zv-hero-btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(255, 102, 0, 0.6) !important;
}

.bcs-hero-btn-secondary,
.zv-hero-btn-secondary {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
}
.bcs-hero-btn-secondary:hover,
.zv-hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px) !important;
}

/* Category Portals with Real Boutique Flatlay Photography */
.bcs-category-portals,
.zv-category-portals {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  max-width: 1280px !important;
  margin: 0 auto 52px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.bcs-portal-card,
.zv-portal-card {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 250px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 28px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.bcs-portal-card:hover,
.zv-portal-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
}

.bcs-portal-xmas,
.zv-portal-xmas {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(12, 36, 20, 0.90) 100%), var(--bcs-xmas-portal-bg) !important;
}

.bcs-portal-hw,
.zv-portal-hw {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(26, 15, 46, 0.90) 100%), var(--bcs-hw-portal-bg) !important;
}

.bcs-portal-hw:hover,
.zv-portal-hw:hover {
  border-color: rgba(255, 102, 0, 0.5) !important;
  box-shadow: 0 12px 36px rgba(255, 102, 0, 0.25) !important;
}

.bcs-portal-content,
.zv-portal-content {
  position: relative !important;
  z-index: 2 !important;
}

.bcs-portal-badge,
.zv-portal-badge {
  display: inline-block !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px) !important;
}

.bcs-portal-hw .bcs-portal-badge,
.zv-portal-hw .zv-portal-badge {
  background: rgba(255, 102, 0, 0.35) !important;
  color: #ffcc88 !important;
  border: 1px solid rgba(255, 102, 0, 0.5) !important;
}

.bcs-portal-title,
.zv-portal-title {
  font-size: 24px !important;
  font-weight: 850 !important;
  margin: 0 0 6px 0 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.bcs-portal-link,
.zv-portal-link {
  font-size: 14px !important;
  font-weight: 650 !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
}

/* --------------------------------------------------------------------------
   6. Precision Product Grid & Button Alignment (100% Horizontal Rule)
   -------------------------------------------------------------------------- */
/* Eliminate any residual description placeholders */
.block-product-card-info [class*="description"],
.block-product-card-info__description,
.block-product-card__info__description,
.product-card/_description {
  display: none !important;
}

/* 3:4 Portrait Ratio for Apparel */
.block-product-card-image,
.product-card__image-wrapper {
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: #f7f7f7 !important;
  border-radius: 10px !important;
}

.block-product-card-image img,
.product-card__image-wrapper img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.35s ease !important;
}

.block-product-card-image:hover img,
.product-card__image-wrapper:hover img {
  transform: scale(1.04) !important;
}

/* Halloween Card Hover Aura */
html[data-bcs-festival="halloween"] .product-card:hover,
html[data-bcs-festival="halloween"] .block-product-card:hover,
html[data-zv-festival="halloween"] .product-card:hover,
html[data-zv-festival="halloween"] .block-product-card:hover {
  box-shadow: 0 8px 24px rgba(255, 102, 0, 0.16) !important;
  border-color: rgba(255, 102, 0, 0.25) !important;
}

/* Strict Title 2-Line Height Lock */
.block-product-title,
.block-product-title span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  height: 2.8em !important;
  min-height: 2.8em !important;
  max-height: 2.8em !important;
  box-sizing: content-box !important;
  word-break: break-word !important;
}

/* Flexbox Info Container & Baseline Lock */
.block-product-card-info {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-height: 130px !important;
  padding-top: 10px !important;
}

.block-product-card-info__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.block-product-price,
theme-product-price {
  display: block !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
  height: 24px !important;
  line-height: 24px !important;
}

/* Add to Cart Button Strict Bottom Alignment */
.block-product-card-info button[name="add"],
.block-product-card-info .product-buy-button,
.block-product-card-info [class*="buy-button"],
.product-card__buy-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  line-height: 42px !important;
  width: 100% !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-weight: 650 !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* Halloween Add to Cart Button Styling */
html[data-bcs-festival="halloween"] .block-product-card-info button[name="add"],
html[data-bcs-festival="halloween"] .block-product-card-info .product-buy-button,
html[data-zv-festival="halloween"] .block-product-card-info button[name="add"],
html[data-zv-festival="halloween"] .block-product-card-info .product-buy-button {
  background: #1a0f2e !important;
  border: 1px solid rgba(255, 102, 0, 0.45) !important;
  color: #ffffff !important;
}

html[data-bcs-festival="halloween"] .block-product-card-info button[name="add"]:hover,
html[data-bcs-festival="halloween"] .block-product-card-info .product-buy-button:hover,
html[data-zv-festival="halloween"] .block-product-card-info button[name="add"]:hover,
html[data-zv-festival="halloween"] .block-product-card-info .product-buy-button:hover {
  background: #ff6600 !important;
  border-color: #ff6600 !important;
  box-shadow: 0 4px 16px rgba(255, 102, 0, 0.45) !important;
}

/* Standard Pagination Component */
.main-collection-products .pagination,
.collection-products-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 40px 0 !important;
}