/* [AP] Shop — seasonal themes: palette, product frames, ambient particles */

html[data-theme="halloween"] { --t1: #ff7a18; --t2: #8b5cf6; --t3: #ffb347; --t-rgb: 255, 122, 24; --t-glyph: "🎃"; }
html[data-theme="christmas"] { --t1: #e11d48; --t2: #16a34a; --t3: #fde68a; --t-rgb: 225, 29, 72; --t-glyph: "🎄"; }
html[data-theme="valentines"] { --t1: #ff4d8d; --t2: #ff9ebb; --t3: #ffd1dc; --t-rgb: 255, 77, 141; --t-glyph: "💖"; }
html[data-theme="new-year"] { --t1: #fbbf24; --t2: #a78bfa; --t3: #ffffff; --t-rgb: 251, 191, 36; --t-glyph: "✨"; }
html[data-theme="easter"] { --t1: #f9a8d4; --t2: #a7f3d0; --t3: #fde68a; --t-rgb: 249, 168, 212; --t-glyph: "🐣"; }
html[data-theme="black-friday"] { --t1: #fbbf24; --t2: #f59e0b; --t3: #fff7d6; --t-rgb: 251, 191, 36; --t-glyph: "🏷️"; }
html[data-theme="summer"] { --t1: #fb923c; --t2: #facc15; --t3: #38bdf8; --t-rgb: 251, 146, 60; --t-glyph: "☀️"; }
html[data-theme="cyber-monday"] { --t1: #22d3ee; --t2: #6366f1; --t3: #e879f9; --t-rgb: 34, 211, 238; --t-glyph: "⚡"; }

/* ── Themed product frames ─────────────────────────────────────────── */

html[data-theme] .store-card,
html[data-theme] #productList > .group {
  border-color: rgba(var(--t-rgb), 0.4) !important;
  box-shadow: var(--shadow-plate), 0 0 34px rgba(var(--t-rgb), 0.12);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

html[data-theme] .store-card:hover,
html[data-theme] #productList > .group:hover {
  border-color: rgba(var(--t-rgb), 0.7) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), 0 0 54px rgba(var(--t-rgb), 0.3);
}

/* The frame itself: a moving ring in the theme's colours. */
html[data-theme] .store-card::before,
html[data-theme] #productList > .group::before {
  padding: 2px;
  opacity: 0.75;
  background: conic-gradient(from var(--spin), var(--t1), var(--t2), var(--t3), var(--t1));
  animation: spin-angle 8s linear infinite;
}

html[data-theme] .store-card:hover::before,
html[data-theme] #productList > .group:hover::before {
  opacity: 1;
}

html[data-theme] .store-card::after,
html[data-theme] #productList > .group::after {
  background: linear-gradient(90deg, var(--t1), var(--t2), transparent);
  opacity: 0.9;
}

/* Corner charm on every product image. */
html[data-theme] .product-media::before {
  content: var(--t-glyph);
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(8, 8, 14, 0.74);
  border: 1px solid rgba(var(--t-rgb), 0.55);
  box-shadow: 0 0 16px rgba(var(--t-rgb), 0.45);
  animation: charm-bob 3.6s ease-in-out infinite;
}

@keyframes charm-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-3px) rotate(6deg); }
}

html[data-theme] .product-frame {
  border-color: rgba(var(--t-rgb), 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 60px rgba(var(--t-rgb), 0.18);
}

html[data-theme] #productList .rounded-full[style*="--accent-color"] {
  background: linear-gradient(120deg, var(--t1), var(--t2)) !important;
  box-shadow: 0 0 16px rgba(var(--t-rgb), 0.5);
}

/* Halloween: slime drips from the top edge, embers on hover. */
html[data-theme="halloween"] .store-card::after,
html[data-theme="halloween"] #productList > .group::after {
  height: 12px;
  background:
    radial-gradient(circle at 50% 0, var(--t1) 6px, transparent 7px) 0 0 / 26px 12px repeat-x,
    radial-gradient(circle at 50% 0, var(--t2) 4px, transparent 5px) 13px 0 / 26px 9px repeat-x;
  filter: drop-shadow(0 2px 6px rgba(var(--t-rgb), 0.6));
}

html[data-theme="halloween"] .store-card:hover,
html[data-theme="halloween"] #productList > .group:hover {
  animation: theme-flicker 2.2s linear infinite;
}

@keyframes theme-flicker {
  0%, 100% { box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), 0 0 54px rgba(var(--t-rgb), 0.3); }
  42% { box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), 0 0 30px rgba(var(--t-rgb), 0.16); }
  46% { box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), 0 0 70px rgba(139, 92, 246, 0.4); }
  52% { box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), 0 0 36px rgba(var(--t-rgb), 0.2); }
}

/* Christmas: candy-cane frame and a string of lights. */
html[data-theme="christmas"] .store-card::before,
html[data-theme="christmas"] #productList > .group::before {
  padding: 3px;
  background: repeating-linear-gradient(45deg, #e11d48 0 10px, #fff 10px 20px);
  background-size: 28.28px 28.28px;
  animation: theme-slide 1.6s linear infinite;
}

html[data-theme="christmas"] .store-card::after,
html[data-theme="christmas"] #productList > .group::after {
  top: 6px;
  height: 10px;
  background:
    radial-gradient(circle, #fde68a 3px, transparent 4px) 0 0 / 56px 10px repeat-x,
    radial-gradient(circle, #ef4444 3px, transparent 4px) 14px 0 / 56px 10px repeat-x,
    radial-gradient(circle, #22c55e 3px, transparent 4px) 28px 0 / 56px 10px repeat-x,
    radial-gradient(circle, #38bdf8 3px, transparent 4px) 42px 0 / 56px 10px repeat-x;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  animation: theme-twinkle 1.4s steps(2, jump-none) infinite;
}

@keyframes theme-slide {
  to { background-position: 28.28px 0; }
}

@keyframes theme-twinkle {
  0% { opacity: 1; }
  100% { opacity: 0.45; }
}

/* Valentines: a heartbeat glow. */
html[data-theme="valentines"] .store-card,
html[data-theme="valentines"] #productList > .group {
  animation: theme-heartbeat 2.4s ease-in-out infinite;
}

@keyframes theme-heartbeat {
  0%, 100% { box-shadow: var(--shadow-plate), 0 0 28px rgba(var(--t-rgb), 0.12); }
  12% { box-shadow: var(--shadow-plate), 0 0 46px rgba(var(--t-rgb), 0.38); }
  24% { box-shadow: var(--shadow-plate), 0 0 30px rgba(var(--t-rgb), 0.16); }
  36% { box-shadow: var(--shadow-plate), 0 0 50px rgba(var(--t-rgb), 0.42); }
}

/* New Year and Black Friday: polished gold that catches the light. */
html[data-theme="new-year"] .store-card::before,
html[data-theme="new-year"] #productList > .group::before,
html[data-theme="black-friday"] .store-card::before,
html[data-theme="black-friday"] #productList > .group::before {
  background: linear-gradient(110deg, #7a5a00 0%, #fbbf24 22%, #fff7d6 38%, #fbbf24 54%, #7a5a00 76%, #fbbf24 100%);
  background-size: 220% 100%;
  animation: theme-gold 3.2s linear infinite;
}

@keyframes theme-gold {
  to { background-position: -220% 0; }
}

html[data-theme="new-year"] .product-media::before {
  animation: theme-sparkle 1.8s ease-in-out infinite;
}

@keyframes theme-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50% { transform: scale(1.18) rotate(20deg); filter: brightness(1.5); }
}

/* Easter: a ribbon of pastel dashes. */
html[data-theme="easter"] .store-card::before,
html[data-theme="easter"] #productList > .group::before {
  padding: 3px;
  background: repeating-linear-gradient(90deg, #f9a8d4 0 16px, #a7f3d0 16px 32px, #fde68a 32px 48px, #c4b5fd 48px 64px);
  background-size: 64px 100%;
  animation: theme-ribbon 3s linear infinite;
}

@keyframes theme-ribbon {
  to { background-position: 64px 0; }
}

/* Summer: a slow sunset. */
html[data-theme="summer"] .store-card::before,
html[data-theme="summer"] #productList > .group::before {
  animation-duration: 12s;
}

html[data-theme="summer"] .product-media::before {
  animation: orbit 14s linear infinite;
}

/* Cyber Monday: neon ring and scanlines. */
html[data-theme="cyber-monday"] .store-card::before,
html[data-theme="cyber-monday"] #productList > .group::before {
  animation-duration: 3.5s;
  filter: drop-shadow(0 0 6px rgba(var(--t-rgb), 0.9));
}

html[data-theme="cyber-monday"] .product-media::after {
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.1) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, transparent 55%, rgba(16, 16, 24, 0.85));
}

html[data-theme="cyber-monday"] .group:hover .product-media img,
html[data-theme="cyber-monday"] .store-card:hover .product-media img {
  filter: saturate(1.3) drop-shadow(3px 0 0 rgba(232, 121, 249, 0.5)) drop-shadow(-3px 0 0 rgba(34, 211, 238, 0.5));
}

/* ── Themed storefront chrome ──────────────────────────────────────── */

html[data-theme] .scroll-progress {
  background: linear-gradient(90deg, var(--t1), var(--t2), var(--t3));
  box-shadow: 0 0 14px rgba(var(--t-rgb), 0.8);
}

html[data-theme] .store-hero::before {
  background:
    radial-gradient(38% 42% at 20% 32%, rgba(var(--t-rgb), 0.2), transparent 70%),
    radial-gradient(30% 36% at 80% 64%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    radial-gradient(24% 28% at 58% 10%, rgba(var(--t-rgb), 0.12), transparent 70%);
}

html[data-theme] .hero-accent {
  background-image: linear-gradient(100deg, var(--t1) 0%, var(--t2) 34%, #fff 50%, var(--t2) 66%, var(--t1) 100%);
}

html[data-theme] .hero-showcase::before {
  background: conic-gradient(from var(--spin), transparent 0 40%, var(--t1) 62%, #fff 72%, var(--t2) 84%, transparent 100%);
}

html[data-theme] .hero-pill {
  border-color: rgba(var(--t-rgb), 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--t-rgb), 0.22);
}

html[data-theme] .hero-ring {
  border-color: rgba(var(--t-rgb), 0.35);
}

html[data-theme] .hero-ring::after {
  box-shadow: 0 0 14px 3px rgba(var(--t-rgb), 0.9);
}

html[data-theme] .store-marquee-track span::after {
  content: var(--t-glyph);
  font-size: 0.75em;
}

html[data-theme] .cta-panel {
  border-color: rgba(var(--t-rgb), 0.38);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 90px rgba(var(--t-rgb), 0.16);
}

html[data-theme] .footer-ghost {
  -webkit-text-stroke-color: rgba(var(--t-rgb), 0.22);
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--t-rgb), 0.5);
  background: linear-gradient(120deg, rgba(var(--t-rgb), 0.2), rgba(var(--t-rgb), 0.04));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 26px rgba(var(--t-rgb), 0.22);
}

.theme-chip i::before {
  content: var(--t-glyph);
}

.theme-chip i {
  display: inline-block;
  font-style: normal;
  animation: charm-bob 3s ease-in-out infinite;
}

.theme-chip b {
  color: var(--t1);
  font-weight: 700;
}

/* Nav seasonal trim: one fine moving line instead of emoji. */
.holiday-nav-overlay [class$="-nav-accent"] {
  display: none !important;
}

.holiday-nav-overlay [class$="-nav-border"] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--t1), var(--t2), var(--t3), var(--t1), transparent) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 16px rgba(var(--t-rgb), 0.7) !important;
  animation: theme-trim 6s linear infinite !important;
}

@keyframes theme-trim {
  to { background-position: 200% 0; }
}

/* ── Sale banner ───────────────────────────────────────────────────── */

.sale-event-banner {
  --b1: #8b5cf6;
  --b2: #c4b5fd;
  --b-rgb: 139, 92, 246;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 220% at 0% 50%, rgba(var(--b-rgb), 0.42), transparent 70%),
    radial-gradient(60% 220% at 100% 50%, rgba(var(--b-rgb), 0.3), transparent 70%),
    #07060c;
  animation: sale-drop 0.6s var(--ease, ease) both;
}

.sale-event-banner.halloween-theme { --b1: #ff7a18; --b2: #8b5cf6; --b-rgb: 255, 122, 24; }
.sale-event-banner.christmas-theme { --b1: #e11d48; --b2: #16a34a; --b-rgb: 225, 29, 72; }
.sale-event-banner.valentines-theme { --b1: #ff4d8d; --b2: #ff9ebb; --b-rgb: 255, 77, 141; }
.sale-event-banner.new-year-theme { --b1: #fbbf24; --b2: #a78bfa; --b-rgb: 251, 191, 36; }
.sale-event-banner.easter-theme { --b1: #f9a8d4; --b2: #a7f3d0; --b-rgb: 249, 168, 212; }
.sale-event-banner.black-friday-theme { --b1: #fbbf24; --b2: #f59e0b; --b-rgb: 251, 191, 36; }
.sale-event-banner.summer-theme { --b1: #fb923c; --b2: #facc15; --b-rgb: 251, 146, 60; }
.sale-event-banner.cyber-monday-theme { --b1: #22d3ee; --b2: #6366f1; --b-rgb: 34, 211, 238; }

.sale-event-banner[hidden] {
  display: none;
}

@keyframes sale-drop {
  from { transform: translateY(-100%); opacity: 0; }
}

/* Moving light along the bottom edge. */
.sale-event-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--b1), #fff, var(--b2), transparent);
  background-size: 200% 100%;
  animation: theme-trim 5s linear infinite;
}

.sale-event-shine {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 30%;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: sale-shine 5s ease-in-out infinite;
}

@keyframes sale-shine {
  0% { left: -40%; }
  55%, 100% { left: 130%; }
}

.sale-event-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sale-event-motes span {
  position: absolute;
  bottom: -1.6rem;
  font-size: 1rem;
  opacity: 0;
  animation: sale-mote 7s linear infinite;
}

.sale-event-motes span:nth-child(1) { left: 6%; animation-delay: 0s; }
.sale-event-motes span:nth-child(2) { left: 19%; animation-delay: 2.4s; font-size: 0.8rem; }
.sale-event-motes span:nth-child(3) { left: 33%; animation-delay: 4.6s; }
.sale-event-motes span:nth-child(4) { left: 68%; animation-delay: 1.2s; font-size: 0.8rem; }
.sale-event-motes span:nth-child(5) { left: 82%; animation-delay: 3.5s; }
.sale-event-motes span:nth-child(6) { left: 94%; animation-delay: 5.6s; font-size: 0.85rem; }

@keyframes sale-mote {
  0% { transform: translateY(0) rotate(-10deg); opacity: 0; }
  15% { opacity: 0.55; }
  85% { opacity: 0.55; }
  100% { transform: translateY(-7rem) rotate(14deg); opacity: 0; }
}

.sale-event-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 64px;
  padding: 0.7rem 3.2rem;
}

.sale-event-icon {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--b1), var(--b2));
  box-shadow: 0 8px 24px rgba(var(--b-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: charm-bob 3.2s ease-in-out infinite;
}

.sale-event-copy {
  min-width: 0;
}

.sale-event-message {
  margin: 0;
  font-family: var(--display, "Syne", system-ui, sans-serif);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-shadow: 0 0 24px rgba(var(--b-rgb), 0.55);
}

.sale-event-sub {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sale-event-cta {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  border-radius: 12px;
  color: #0b0614;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(120deg, var(--b1), var(--b2));
  box-shadow: 0 10px 26px rgba(var(--b-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.3s var(--ease, ease), filter 0.3s ease;
}

.sale-event-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.sale-event-cta i {
  transition: transform 0.3s var(--ease, ease);
}

.sale-event-cta:hover i {
  transform: translateX(3px);
}

.sale-event-close {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.sale-event-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media (max-width: 760px) {
  .sale-event-inner {
    gap: 0.7rem;
    padding: 0.65rem 2.6rem 0.65rem 0.9rem;
    justify-content: flex-start;
  }

  .sale-event-icon,
  .sale-event-sub {
    display: none;
  }

  .sale-event-cta {
    margin-left: auto;
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* ── Ambient particles ─────────────────────────────────────────────── */

#holiday-effects-container {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

html.staff-desk #holiday-effects-container {
  display: none !important;
}

.hx {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hx > span {
  display: block;
  line-height: 1;
  animation: hx-sway 4s ease-in-out infinite alternate;
}

.hx-fall { animation-name: hx-fall; }
.hx-rise { animation-name: hx-rise; }
.hx-glide { animation-name: hx-glide; }
.hx-drop { animation-name: hx-drop; animation-timing-function: ease-in-out; }

@keyframes hx-fall {
  from { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--dx, 0), 112vh, 0) rotate(var(--rot, 0deg)); }
}

@keyframes hx-rise {
  from { transform: translate3d(0, 112vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--dx, 0), -12vh, 0) rotate(var(--rot, 0deg)); }
}

@keyframes hx-glide {
  0% { transform: translate3d(-12vw, 0, 0); }
  25% { transform: translate3d(22vw, -4vh, 0); }
  50% { transform: translate3d(50vw, 3vh, 0); }
  75% { transform: translate3d(78vw, -5vh, 0); }
  100% { transform: translate3d(112vw, 0, 0); }
}

@keyframes hx-drop {
  0%, 100% { transform: translate3d(0, -14vh, 0); }
  40%, 62% { transform: translate3d(0, var(--drop, 30vh), 0); }
}

@keyframes hx-sway {
  from { transform: translateX(-10px) rotate(-8deg); }
  to { transform: translateX(10px) rotate(8deg); }
}

.hx-snow > span {
  color: #fff;
  text-shadow: 0 0 6px rgba(200, 230, 255, 0.8);
}

/* Spiders hang from a thread. */
.hx-drop > span {
  animation: none;
}

.hx-drop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 70%;
  width: 1px;
  height: 100vh;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35));
}

.hx-dot > span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(var(--t-rgb), 0.9) 45%, transparent 70%);
  box-shadow: 0 0 14px 3px rgba(var(--t-rgb), 0.55);
}

.hx-code > span {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-weight: 700;
  color: var(--t1);
  text-shadow: 0 0 10px rgba(var(--t-rgb), 0.9);
  animation: none;
}

.hx-gold > span {
  font-family: var(--display, "Syne", system-ui, sans-serif);
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
}

.hx-confetti > span {
  width: 0.45em;
  height: 0.75em;
  border-radius: 2px;
  background: var(--c, #fbbf24);
}

.hx-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 10px var(--c, #fff), 0 0 22px var(--c, #fff);
  animation: hx-burst 1.5s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes hx-burst {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate3d(var(--tx), calc(var(--ty) + 26px), 0) scale(0.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .store-card,
  html[data-theme] #productList > .group,
  html[data-theme] .store-card::before,
  html[data-theme] #productList > .group::before,
  html[data-theme] .store-card::after,
  html[data-theme] #productList > .group::after,
  html[data-theme] .product-media::before,
  .theme-chip i,
  .holiday-nav-overlay [class$="-nav-border"],
  .sale-event-banner,
  .sale-event-banner::after,
  .sale-event-shine,
  .sale-event-motes span,
  .sale-event-icon {
    animation: none !important;
  }

  #holiday-effects-container {
    display: none !important;
  }
}