/* ============================================================
   Black November theme - layered on top of midnight.css.
   Loaded by includes/header.php ONLY inside the window set in
   includes/seasonal_promo.php, so it switches itself off afterwards.
   ============================================================ */

/* Accent: gold instead of cyan, site-wide. midnight.css drives colour
   through these tokens, so buttons, links and badges all follow. */
body.midnight-theme.blacknov {
  --rgb-primary: 245 197 66; --rgb-primary-light: 250 215 120; --rgb-primary-dark: 217 164 32;
  --rgb-accent: 245 197 66;  --rgb-accent-light: 250 215 120;  --rgb-accent-dark: 217 164 32;
  --color-primary: #f5c542; --color-primary-light: #fad778; --color-primary-dark: #d9a420;
  --color-accent: #f5c542;
  --gradient-primary: linear-gradient(120deg,#d9a420,#fad778);
  --gradient-hero: linear-gradient(120deg,#050505,#141210);
  --rgb-aurora-a: 120 92 20; --rgb-aurora-b: 30 26 18;
}

/* ---------- Sale banner under the navigation ---------- */
body.blacknov .hw-banner {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; padding: 10px 16px; text-align: center; text-decoration: none;
  background: linear-gradient(90deg,#000 0%,#1a1608 50%,#000 100%);
  border-bottom: 1px solid #f5c54255; color: #f3e6c0 !important; font-size: 14px;
}
body.blacknov .hw-banner strong { color: #fff; letter-spacing: .04em; }
body.blacknov .hw-banner code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .1em;
  color: #000; background: #f5c542; padding: 2px 8px; border-radius: 6px;
}
body.blacknov .hw-banner .hw-ends {
  font-size: 12px; font-weight: 700; color: #fad778; border: 1px solid #f5c54266;
  padding: 2px 10px; border-radius: 999px;
}
body.blacknov .hw-banner .hw-tag { width: 20px; height: 20px; color: #f5c542; animation: bn-shine 2.6s ease-in-out infinite; }
body.blacknov .hw-banner:hover { filter: brightness(1.1); }

/* ---------- Home hero: gold starburst sale badge (index.php .bn-seal) ---------- */
body.blacknov .midnight-home-hero { overflow: hidden; }
.bn-seal {
  position: absolute; top: 6%; right: 5%; z-index: 3; pointer-events: none;
  width: 190px; height: 190px; transform: rotate(-12deg);
  animation: bn-wobble 4s ease-in-out infinite;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(245,197,66,.35));
}
.bn-seal-burst {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(50.0% 0.0%,56.9% 6.5%,65.5% 2.4%,70.0% 10.8%,79.4% 9.5%,81.1% 18.9%,90.5% 20.6%,89.2% 30.0%,97.6% 34.5%,93.5% 43.1%,100.0% 50.0%,93.5% 56.9%,97.6% 65.5%,89.2% 70.0%,90.5% 79.4%,81.1% 81.1%,79.4% 90.5%,70.0% 89.2%,65.5% 97.6%,56.9% 93.5%,50.0% 100.0%,43.1% 93.5%,34.5% 97.6%,30.0% 89.2%,20.6% 90.5%,18.9% 81.1%,9.5% 79.4%,10.8% 70.0%,2.4% 65.5%,6.5% 56.9%,0.0% 50.0%,6.5% 43.1%,2.4% 34.5%,10.8% 30.0%,9.5% 20.6%,18.9% 18.9%,20.6% 9.5%,30.0% 10.8%,34.5% 2.4%,43.1% 6.5%);
  background: conic-gradient(from 20deg,#fff1b8,#f5c542,#b8860b,#f5c542,#fff1b8,#d9a420,#f5c542,#fff1b8);
}
.bn-seal-burst::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform: skewX(-18deg); animation: bn-sweep 3.4s ease-in-out infinite;
}
.bn-seal-core {
  position: absolute; inset: 15%; border-radius: 999px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 35%,#1d1a12 0%,#000 75%);
  box-shadow: inset 0 0 0 2px #f5c542, inset 0 0 0 5px #000, inset 0 0 0 6px #f5c54280;
}
.bn-seal-top, .bn-seal-bot {
  font: 800 10px/1.1 Poppins, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fad778;
}
.bn-seal-pct {
  font: 900 44px/1 Poppins, system-ui, sans-serif; letter-spacing: -.03em; margin: 4px 0 3px;
  background: linear-gradient(180deg,#fff7d6 0%,#f5c542 55%,#b8860b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bn-spark { position: absolute; width: 14px; height: 14px; color: #fff3c4; animation: bn-twinkle 2.2s ease-in-out infinite; }
.bn-spark svg { width: 100%; height: 100%; display: block; }
.bn-spark.s1 { top: -4%; left: 8%; }
.bn-spark.s2 { bottom: 2%; right: -2%; width: 18px; height: 18px; animation-delay: -.8s; }
.bn-spark.s3 { top: 40%; left: -8%; width: 10px; height: 10px; animation-delay: -1.5s; }

@keyframes bn-wobble { 0%,100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.04); } }
@keyframes bn-sweep { 0%,55% { left: -60%; } 100% { left: 130%; } }
@keyframes bn-twinkle { 0%,100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Light snowfall (markup in includes/header.php) ----------
   CSS only, no image files or JS. Three crystal shapes drawn by tiny inline
   SVGs. Three layers of movement, all transform-only (GPU, no repaint):
     <i>         falls at a steady speed and drifts with a light breeze
     <b>         sways left-right on its own slower rhythm
     <b>::before the crystal itself, turning slowly
   Depth of field: far flakes are small, faint, slow and slightly soft; mid
   ones are sharp; two close ones are large and out of focus.
   pointer-events:none: never blocks a click. */
.bn-snow { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.bn-snow i { position: absolute; top: -40px; will-change: transform; animation: bn-fall linear infinite; }
.bn-snow b { display: block; will-change: transform; animation: bn-sway ease-in-out infinite alternate; }
.bn-snow b::before {
  content: ""; display: block; width: 100%; height: 100%; will-change: transform;
  background: center / contain no-repeat; animation: bn-spin linear infinite;
}
.bn-snow i:nth-child(3n+1) b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.0' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate%280 12 12%29'%3E%3Cpath d='M12 12V1M12 3.4l-1.7-1.5M12 3.4l1.7-1.5M12 5.9l-2.6-2.2M12 5.9l2.6-2.2M12 8.6l-2-1.7M12 8.6l2-1.7'/%3E%3C/g%3E%3Cg transform='rotate%2860 12 12%29'%3E%3Cpath d='M12 12V1M12 3.4l-1.7-1.5M12 3.4l1.7-1.5M12 5.9l-2.6-2.2M12 5.9l2.6-2.2M12 8.6l-2-1.7M12 8.6l2-1.7'/%3E%3C/g%3E%3Cg transform='rotate%28120 12 12%29'%3E%3Cpath d='M12 12V1M12 3.4l-1.7-1.5M12 3.4l1.7-1.5M12 5.9l-2.6-2.2M12 5.9l2.6-2.2M12 8.6l-2-1.7M12 8.6l2-1.7'/%3E%3C/g%3E%3Cg transform='rotate%28180 12 12%29'%3E%3Cpath d='M12 12V1M12 3.4l-1.7-1.5M12 3.4l1.7-1.5M12 5.9l-2.6-2.2M12 5.9l2.6-2.2M12 8.6l-2-1.7M12 8.6l2-1.7'/%3E%3C/g%3E%3Cg transform='rotate%28240 12 12%29'%3E%3Cpath d='M12 12V1M12 3.4l-1.7-1.5M12 3.4l1.7-1.5M12 5.9l-2.6-2.2M12 5.9l2.6-2.2M12 8.6l-2-1.7M12 8.6l2-1.7'/%3E%3C/g%3E%3Cg transform='rotate%28300 12 12%29'%3E%3Cpath d='M12 12V1M12 3.4l-1.7-1.5M12 3.4l1.7-1.5M12 5.9l-2.6-2.2M12 5.9l2.6-2.2M12 8.6l-2-1.7M12 8.6l2-1.7'/%3E%3C/g%3E%3C/svg%3E"); }
.bn-snow i:nth-child(3n+2) b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.0' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate%280 12 12%29'%3E%3Cpath d='M12 12V2.2M12 2.2l-1.5 1.6L12 5.6l1.5-1.8zM12 8.2l-1.9-1.3M12 8.2l1.9-1.3'/%3E%3C/g%3E%3Cg transform='rotate%2860 12 12%29'%3E%3Cpath d='M12 12V2.2M12 2.2l-1.5 1.6L12 5.6l1.5-1.8zM12 8.2l-1.9-1.3M12 8.2l1.9-1.3'/%3E%3C/g%3E%3Cg transform='rotate%28120 12 12%29'%3E%3Cpath d='M12 12V2.2M12 2.2l-1.5 1.6L12 5.6l1.5-1.8zM12 8.2l-1.9-1.3M12 8.2l1.9-1.3'/%3E%3C/g%3E%3Cg transform='rotate%28180 12 12%29'%3E%3Cpath d='M12 12V2.2M12 2.2l-1.5 1.6L12 5.6l1.5-1.8zM12 8.2l-1.9-1.3M12 8.2l1.9-1.3'/%3E%3C/g%3E%3Cg transform='rotate%28240 12 12%29'%3E%3Cpath d='M12 12V2.2M12 2.2l-1.5 1.6L12 5.6l1.5-1.8zM12 8.2l-1.9-1.3M12 8.2l1.9-1.3'/%3E%3C/g%3E%3Cg transform='rotate%28300 12 12%29'%3E%3Cpath d='M12 12V2.2M12 2.2l-1.5 1.6L12 5.6l1.5-1.8zM12 8.2l-1.9-1.3M12 8.2l1.9-1.3'/%3E%3C/g%3E%3Cpath d='M12 8.6l2.95 1.7v3.4L12 15.4l-2.95-1.7v-3.4z'/%3E%3C/svg%3E"); }
.bn-snow i:nth-child(3n) b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate%280 12 12%29'%3E%3Cpath d='M12 12V2M12 5l-2.3-2M12 5l2.3-2'/%3E%3C/g%3E%3Cg transform='rotate%2860 12 12%29'%3E%3Cpath d='M12 12V2M12 5l-2.3-2M12 5l2.3-2'/%3E%3C/g%3E%3Cg transform='rotate%28120 12 12%29'%3E%3Cpath d='M12 12V2M12 5l-2.3-2M12 5l2.3-2'/%3E%3C/g%3E%3Cg transform='rotate%28180 12 12%29'%3E%3Cpath d='M12 12V2M12 5l-2.3-2M12 5l2.3-2'/%3E%3C/g%3E%3Cg transform='rotate%28240 12 12%29'%3E%3Cpath d='M12 12V2M12 5l-2.3-2M12 5l2.3-2'/%3E%3C/g%3E%3Cg transform='rotate%28300 12 12%29'%3E%3Cpath d='M12 12V2M12 5l-2.3-2M12 5l2.3-2'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.3' fill='white' stroke='none'/%3E%3C/svg%3E"); }
.bn-snow i:nth-child(1){left:1.7%;--w:9.5vw;animation-duration:24s;animation-delay:-10.2s}.bn-snow i:nth-child(1) b{width:21.1px;height:21.1px;opacity:0.88;--s:2.3vw;animation-duration:7.1s;animation-delay:-3.8s}.bn-snow i:nth-child(1) b::before{animation-duration:20s;animation-direction:reverse}
.bn-snow i:nth-child(2){left:3.0%;--w:3.9vw;animation-duration:43s;animation-delay:-38.8s}.bn-snow i:nth-child(2) b{width:5.0px;height:5.0px;opacity:0.34;--s:1.0vw;animation-duration:5.6s;animation-delay:-0.6s}.bn-snow i:nth-child(2) b::before{animation-duration:23s;animation-direction:reverse;filter:blur(0.8px)}
.bn-snow i:nth-child(3){left:9.5%;--w:9.9vw;animation-duration:22s;animation-delay:-7.9s}.bn-snow i:nth-child(3) b{width:21.8px;height:21.8px;opacity:0.89;--s:2.4vw;animation-duration:4.1s;animation-delay:-0.2s}.bn-snow i:nth-child(3) b::before{animation-duration:32s;animation-direction:reverse}
.bn-snow i:nth-child(4){left:14.9%;--w:8.5vw;animation-duration:27s;animation-delay:-15.3s}.bn-snow i:nth-child(4) b{width:19.4px;height:19.4px;opacity:0.83;--s:2.1vw;animation-duration:6.3s;animation-delay:-5.4s}.bn-snow i:nth-child(4) b::before{animation-duration:32s;animation-direction:reverse}
.bn-snow i:nth-child(5){left:21.9%;--w:10.0vw;animation-duration:22s;animation-delay:-15.8s}.bn-snow i:nth-child(5) b{width:32.3px;height:32.3px;opacity:0.55;--s:2.4vw;animation-duration:6.0s;animation-delay:-3.5s}.bn-snow i:nth-child(5) b::before{animation-duration:36s;animation-direction:normal;filter:blur(1.6px)}
.bn-snow i:nth-child(6){left:25.2%;--w:6.1vw;animation-duration:35s;animation-delay:-23.6s}.bn-snow i:nth-child(6) b{width:11.0px;height:11.0px;opacity:0.53;--s:1.5vw;animation-duration:4.6s;animation-delay:-2.4s}.bn-snow i:nth-child(6) b::before{animation-duration:22s;animation-direction:reverse;filter:blur(0.3px)}
.bn-snow i:nth-child(7){left:27.4%;--w:7.1vw;animation-duration:32s;animation-delay:-26.3s}.bn-snow i:nth-child(7) b{width:12.2px;height:12.2px;opacity:0.57;--s:1.7vw;animation-duration:5.5s;animation-delay:-1.8s}.bn-snow i:nth-child(7) b::before{animation-duration:30s;animation-direction:reverse;filter:blur(0.3px)}
.bn-snow i:nth-child(8){left:33.4%;--w:5.6vw;animation-duration:37s;animation-delay:-9.6s}.bn-snow i:nth-child(8) b{width:10.3px;height:10.3px;opacity:0.51;--s:1.4vw;animation-duration:5.1s;animation-delay:-0.5s}.bn-snow i:nth-child(8) b::before{animation-duration:35s;animation-direction:normal;filter:blur(0.3px)}
.bn-snow i:nth-child(9){left:40.5%;--w:8.5vw;animation-duration:27s;animation-delay:-24.8s}.bn-snow i:nth-child(9) b{width:19.4px;height:19.4px;opacity:0.84;--s:2.1vw;animation-duration:6.9s;animation-delay:-4.1s}.bn-snow i:nth-child(9) b::before{animation-duration:23s;animation-direction:normal}
.bn-snow i:nth-child(10){left:42.8%;--w:9.6vw;animation-duration:23s;animation-delay:-9.0s}.bn-snow i:nth-child(10) b{width:21.3px;height:21.3px;opacity:0.88;--s:2.3vw;animation-duration:7.4s;animation-delay:-1.2s}.bn-snow i:nth-child(10) b::before{animation-duration:19s;animation-direction:reverse}
.bn-snow i:nth-child(11){left:47.1%;--w:4.6vw;animation-duration:41s;animation-delay:-22.1s}.bn-snow i:nth-child(11) b{width:5.8px;height:5.8px;opacity:0.37;--s:1.2vw;animation-duration:4.8s;animation-delay:-4.7s}.bn-snow i:nth-child(11) b::before{animation-duration:34s;animation-direction:normal;filter:blur(0.8px)}
.bn-snow i:nth-child(12){left:53.7%;--w:8.2vw;animation-duration:28s;animation-delay:-1.0s}.bn-snow i:nth-child(12) b{width:19.0px;height:19.0px;opacity:0.82;--s:2.0vw;animation-duration:7.4s;animation-delay:-2.0s}.bn-snow i:nth-child(12) b::before{animation-duration:26s;animation-direction:normal}
.bn-snow i:nth-child(13){left:60.8%;--w:6.8vw;animation-duration:33s;animation-delay:-3.4s}.bn-snow i:nth-child(13) b{width:11.9px;height:11.9px;opacity:0.56;--s:1.7vw;animation-duration:5.6s;animation-delay:-3.0s}.bn-snow i:nth-child(13) b::before{animation-duration:25s;animation-direction:normal;filter:blur(0.3px)}
.bn-snow i:nth-child(14){left:66.1%;--w:10.0vw;animation-duration:22s;animation-delay:-9.8s}.bn-snow i:nth-child(14) b{width:34.3px;height:34.3px;opacity:0.55;--s:2.4vw;animation-duration:4.9s;animation-delay:-1.7s}.bn-snow i:nth-child(14) b::before{animation-duration:27s;animation-direction:normal;filter:blur(1.6px)}
.bn-snow i:nth-child(15){left:71.1%;--w:9.2vw;animation-duration:25s;animation-delay:-1.7s}.bn-snow i:nth-child(15) b{width:20.7px;height:20.7px;opacity:0.87;--s:2.2vw;animation-duration:7.1s;animation-delay:-6.8s}.bn-snow i:nth-child(15) b::before{animation-duration:33s;animation-direction:reverse}
.bn-snow i:nth-child(16){left:75.7%;--w:9.3vw;animation-duration:24s;animation-delay:-18.5s}.bn-snow i:nth-child(16) b{width:20.8px;height:20.8px;opacity:0.87;--s:2.2vw;animation-duration:5.9s;animation-delay:-3.3s}.bn-snow i:nth-child(16) b::before{animation-duration:27s;animation-direction:reverse}
.bn-snow i:nth-child(17){left:81.1%;--w:6.8vw;animation-duration:33s;animation-delay:-31.8s}.bn-snow i:nth-child(17) b{width:11.9px;height:11.9px;opacity:0.56;--s:1.7vw;animation-duration:4.4s;animation-delay:-3.2s}.bn-snow i:nth-child(17) b::before{animation-duration:32s;animation-direction:reverse;filter:blur(0.3px)}
.bn-snow i:nth-child(18){left:82.8%;--w:6.0vw;animation-duration:36s;animation-delay:-8.5s}.bn-snow i:nth-child(18) b{width:10.9px;height:10.9px;opacity:0.53;--s:1.5vw;animation-duration:6.3s;animation-delay:-3.5s}.bn-snow i:nth-child(18) b::before{animation-duration:25s;animation-direction:normal;filter:blur(0.3px)}
.bn-snow i:nth-child(19){left:89.2%;--w:6.3vw;animation-duration:35s;animation-delay:-0.8s}.bn-snow i:nth-child(19) b{width:11.2px;height:11.2px;opacity:0.54;--s:1.6vw;animation-duration:6.5s;animation-delay:-6.2s}.bn-snow i:nth-child(19) b::before{animation-duration:18s;animation-direction:reverse;filter:blur(0.3px)}
.bn-snow i:nth-child(20){left:94.0%;--w:8.2vw;animation-duration:28s;animation-delay:-20.9s}.bn-snow i:nth-child(20) b{width:19.0px;height:19.0px;opacity:0.82;--s:2.0vw;animation-duration:6.8s;animation-delay:-6.5s}.bn-snow i:nth-child(20) b::before{animation-duration:19s;animation-direction:reverse}
@keyframes bn-fall { from { transform: translate3d(0, -40px, 0); } to { transform: translate3d(var(--w), 106vh, 0); } }
@keyframes bn-sway { from { transform: translate3d(calc(var(--s) * -1), 0, 0); } to { transform: translate3d(var(--s), 0, 0); } }
@keyframes bn-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) { .bn-snow i:nth-child(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .bn-snow { display: none; } }

/* ---------- Checkout: the BLACK35 button in black + gold ---------- */
body.blacknov .fall-promo-btn {
  background: linear-gradient(120deg,#000 0%,#2a2210 50%,#b8860b 100%) !important;
}
body.blacknov .fall-promo-btn .fp-apply { color: #8a6508 !important; }
body.blacknov .fall-promo-btn .fp-dot { border-color: #f5c542; }

@keyframes bn-shine { 0%,100% { opacity: 1; transform: rotate(0); } 50% { opacity: .7; transform: rotate(-8deg); } }

@media (prefers-reduced-motion: reduce) {
  body.blacknov .hw-banner .hw-tag, .bn-seal, .bn-seal-burst::after, .bn-spark { animation: none; }
}
@media (max-width: 768px) {
  .bn-seal { width: 118px; height: 118px; top: 3%; right: 3%; }
  .bn-seal-pct { font-size: 27px; margin: 2px 0 1px; }
  .bn-seal-top, .bn-seal-bot { font-size: 7px; letter-spacing: .12em; }
  body.blacknov .hw-banner { font-size: 13px; gap: 8px; }
}