/* Black Friday FX: every class is prefixed with bffx- so it never touches the theme. */
:root{--bffx-op:.75;--bffx-dk:.5;--bffx-dark:#0a0a0b;--bffx-dark-2:#1a1a1d;--bffx-a:#f5c84c;--bffx-b:#b8862b;--bffx-on:#111;--bffx-glow:245,200,76;
  --bffx-title:Impact,Haettenschweiler,"Avenir Next Condensed","Arial Narrow Bold","Arial Narrow","sans-serif-condensed",sans-serif;
  --bffx-text:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-bffx-look="red"]{--bffx-a:#ff3b47;--bffx-b:#a80f1c;--bffx-on:#fff;--bffx-glow:255,59,71}
:root[data-bffx-look="white"]{--bffx-a:#f4f4f6;--bffx-b:#9a9aa2;--bffx-on:#111;--bffx-glow:255,255,255}

.bffx-layer{position:fixed;inset:0;pointer-events:none!important;z-index:99990;overflow:hidden}
.bffx-layer *{pointer-events:none!important}
.bffx-png{opacity:var(--bffx-op);transition:opacity .35s}
.bffx-png.bffx-near{opacity:.18}
.bffx-layer img{max-width:100%;height:auto;display:block;border:0;box-shadow:none}

/* ---------- Banner ---------- */
.bffx-banner{position:relative;z-index:99995;overflow:hidden;color:#fff;font-family:var(--bffx-text);line-height:1.3;background:linear-gradient(90deg,var(--bffx-dark),var(--bffx-dark-2) 50%,var(--bffx-dark));border-bottom:1px solid rgba(var(--bffx-glow),.35)}
.bffx-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 42%,rgba(var(--bffx-glow),.16) 50%,transparent 58%);animation:bffx-shine 6s infinite}
@keyframes bffx-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.bffx-b-in{position:relative;z-index:1;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:center;gap:10px 22px;padding:10px 48px;flex-wrap:wrap}
.bffx-b-title{font-family:var(--bffx-title);font-weight:700;font-synthesis:none;font-size:25px;letter-spacing:1.5px;line-height:1;color:var(--bffx-a);text-transform:uppercase}
.bffx-b-text{font-size:14px;opacity:.9}
.bffx-banner .bffx-code{all:unset;box-sizing:border-box;border:1px dashed rgba(var(--bffx-glow),.8);border-radius:6px;padding:4px 10px;font:700 13px/1.4 var(--bffx-text);letter-spacing:1px;color:var(--bffx-a);cursor:pointer;background:rgba(var(--bffx-glow),.08)}
.bffx-banner .bffx-code.bffx-copied{background:var(--bffx-a);color:var(--bffx-on)}
.bffx-count{display:flex;gap:6px;font-variant-numeric:tabular-nums}
.bffx-count span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 7px;font-size:13px;font-weight:700;min-width:38px;text-align:center;line-height:1.2;color:#fff}
.bffx-count small{display:block;font-size:9px;font-weight:400;opacity:.7;text-transform:uppercase}
.bffx-banner .bffx-cta{background:linear-gradient(180deg,var(--bffx-a),var(--bffx-b));color:var(--bffx-on)!important;text-decoration:none!important;font-weight:800;font-size:13px;padding:9px 18px;border-radius:999px;white-space:nowrap}
.bffx-banner .bffx-x{all:unset;position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:2;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.65;padding:4px}
.bffx-banner .bffx-x:hover{opacity:1}

/* ---------- Dark look: strength comes from --bffx-dk ---------- */
.bffx-edge{position:absolute;inset:0;background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 55%,rgba(0,0,0,calc(.62 * var(--bffx-dk))) 100%)}
.bffx-smoke{position:absolute;left:0;right:0;bottom:0;height:150px;overflow:hidden;background:linear-gradient(to top,rgba(0,0,0,calc(.42 * var(--bffx-dk))),transparent)}
.bffx-smoke::before{content:"";position:absolute;left:-30%;width:160%;top:30px;bottom:-40px;
  background:radial-gradient(ellipse 22% 60% at 18% 80%,rgba(0,0,0,calc(.4 * var(--bffx-dk))),transparent 70%),radial-gradient(ellipse 26% 70% at 52% 90%,rgba(0,0,0,calc(.38 * var(--bffx-dk))),transparent 70%),radial-gradient(ellipse 20% 55% at 84% 78%,rgba(0,0,0,calc(.4 * var(--bffx-dk))),transparent 70%);
  animation:bffx-drift 24s ease-in-out infinite alternate}
@keyframes bffx-drift{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
.bffx-glow{position:absolute;left:0;right:0;bottom:0;height:130px;background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(var(--bffx-glow),.20),transparent 70%);animation:bffx-breathe 6s ease-in-out infinite}
@keyframes bffx-breathe{0%,100%{opacity:.65}50%{opacity:1}}

/* ---------- Confetti: slow, flips in 3D, every piece its own path ---------- */
.bffx-conf{position:absolute;top:-30px;width:var(--w);height:var(--h);animation:bffx-fall var(--t) linear var(--d) infinite}
.bffx-conf i{display:block;width:100%;height:100%;border-radius:1px;background:linear-gradient(135deg,var(--bffx-a),var(--bffx-b));animation:bffx-flip var(--f) linear infinite}
.bffx-conf.bffx-bk i{background:linear-gradient(135deg,#2c2c30,#050506);box-shadow:0 0 0 1px rgba(var(--bffx-glow),.55)}
@keyframes bffx-fall{0%{transform:translate(0,0)}50%{transform:translate(var(--sway),55vh)}100%{transform:translate(calc(var(--sway) * -.4),112vh)}}
@keyframes bffx-flip{from{transform:rotate3d(1,.6,.3,0deg)}to{transform:rotate3d(1,.6,.3,720deg)}}

/* ---------- Balloons: rise along the sides and fade out before they reach the header ---------- */
.bffx-ball{position:absolute;top:0;left:var(--x);width:var(--s);opacity:0;animation:bffx-rise var(--t) linear var(--d) infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.bffx-ball .bffx-png{display:block}
.bffx-ball svg{display:block;width:100%;overflow:visible;transform-origin:50% 0;animation:bffx-sway 5s ease-in-out infinite}
@keyframes bffx-rise{0%{transform:translate(0,104vh);opacity:0}6%{opacity:1}72%{opacity:1}92%,100%{transform:translate(var(--sway),16vh);opacity:0}}
@keyframes bffx-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ---------- Price tags (position driven by JS) ---------- */
.bffx-tag{position:absolute;left:0;top:0;width:var(--s);will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.bffx-tag svg{display:block;width:100%;overflow:visible;transform-origin:22% 18%;animation:bffx-swing 2.6s ease-in-out infinite}
@keyframes bffx-swing{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(11deg)}}

/* ---------- Corner bag + gift ---------- */
.bffx-corner{position:absolute;bottom:-4px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
.bffx-corner svg{display:block;width:100%}
.bffx-corner.bffx-l{left:10px;width:112px;animation:bffx-bob 3.8s ease-in-out infinite}
.bffx-corner.bffx-r{right:10px;width:112px;animation:bffx-bob 4.4s ease-in-out infinite reverse}
@keyframes bffx-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.bffx-lite .bffx-corner{display:none}

/* ---------- Side tab: stays after the popup is closed, reopens it ---------- */
button.bffx-side{all:unset;box-sizing:border-box;position:fixed;right:0;top:46%;z-index:99994;writing-mode:vertical-rl;transform:rotate(180deg) translateY(50%);background:linear-gradient(180deg,var(--bffx-dark-2),var(--bffx-dark));color:var(--bffx-a);border:1px solid rgba(var(--bffx-glow),.6);border-left:0;border-radius:0 10px 10px 0;padding:16px 9px;cursor:pointer;font:800 13px/1.2 var(--bffx-text);letter-spacing:1px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25)}
button.bffx-side:focus-visible{outline:2px solid var(--bffx-a);outline-offset:2px}

/* ---------- Cursor trail ---------- */
.bffx-spark{position:fixed;font-size:11px;line-height:1;color:var(--bffx-a);animation:bffx-spark .8s ease-out forwards}
@keyframes bffx-spark{to{transform:translateY(24px) scale(.2) rotate(120deg);opacity:0}}

/* ---------- Popup ---------- */
.bffx-popup{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,5,6,.68);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s;overflow-y:auto;font-family:var(--bffx-text);line-height:1.3}
.bffx-popup.bffx-open{opacity:1}
.bffx-card{position:relative;box-sizing:border-box;width:100%;max-width:430px;margin:auto;text-align:center;color:#fff;border-radius:20px;padding:30px 28px 22px;border:1px solid rgba(var(--bffx-glow),.45);background:radial-gradient(circle at 50% 0,rgba(var(--bffx-glow),.20),transparent 52%),linear-gradient(170deg,#17171a,#09090a);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(16px) scale(.95);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.bffx-popup.bffx-open .bffx-card{transform:none}
.bffx-card p{color:inherit}
.bffx-popup .bffx-pop-x{all:unset;box-sizing:border-box;position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:#fff;background:rgba(255,255,255,.12);cursor:pointer;transition:.2s}
.bffx-popup .bffx-pop-x:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}
.bffx-popup .bffx-pop-x:focus-visible,.bffx-popup .bffx-later:focus-visible{outline:2px solid var(--bffx-a);outline-offset:2px}
.bffx-card .bffx-kicker{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--bffx-a);margin:0 34px 6px;padding:0}
.bffx-card .bffx-pop-title{font-family:var(--bffx-title);font-weight:700;font-synthesis:none;font-size:46px;line-height:1.02;letter-spacing:1px;margin:0;padding:0;text-transform:uppercase;color:#fff}
.bffx-card .bffx-pop-off{margin:12px 0 2px;padding:0;font-size:70px;font-weight:800;line-height:1;letter-spacing:-3px;background:linear-gradient(180deg,#fff 15%,var(--bffx-a) 60%,var(--bffx-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.bffx-card .bffx-pop-off span{font-size:30px;letter-spacing:0}
.bffx-card .bffx-pop-text{font-size:15px;opacity:.82;margin:8px auto 14px;padding:0;max-width:320px;line-height:1.4}
.bffx-box{display:flex;align-items:center;gap:8px;border:2px dashed rgba(var(--bffx-glow),.7);border-radius:12px;padding:6px 6px 6px 16px;background:rgba(var(--bffx-glow),.06)}
.bffx-pop-code{flex:1;min-width:0;text-align:left;font:800 20px/1.2 ui-monospace,Consolas,monospace;letter-spacing:2px;color:var(--bffx-a);overflow-wrap:anywhere}
.bffx-popup .bffx-copy{all:unset;box-sizing:border-box;cursor:pointer;background:var(--bffx-a);color:var(--bffx-on);font:700 14px/1.2 var(--bffx-text);padding:11px 16px;border-radius:8px;white-space:nowrap}
.bffx-popup .bffx-copy.bffx-copied{background:#2fbf71;color:#fff}
.bffx-popup .bffx-copy:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bffx-card .bffx-ends{margin:15px 0 6px;padding:0;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.65}
.bffx-popup .bffx-count{justify-content:center}
.bffx-popup .bffx-pop-cta{display:block;box-sizing:border-box;width:100%;margin-top:17px;background:linear-gradient(180deg,var(--bffx-a),var(--bffx-b));color:var(--bffx-on)!important;text-decoration:none!important;font:800 16px/1.2 var(--bffx-text);padding:14px;border-radius:999px;text-align:center}
.bffx-popup .bffx-later{all:unset;display:inline-block;color:#fff;cursor:pointer;margin-top:11px;font:400 13px/1.3 var(--bffx-text);opacity:.6;text-decoration:underline}

@media(max-width:800px){
  .bffx-b-title{font-size:20px}.bffx-banner .bffx-count{display:none}.bffx-b-in{padding:9px 40px 9px 14px;gap:8px 12px}
  .bffx-corner.bffx-l,.bffx-corner.bffx-r{width:74px}
  .bffx-card .bffx-pop-title{font-size:36px}.bffx-card .bffx-pop-off{font-size:56px}.bffx-card{padding:26px 18px 18px}
  button.bffx-side{padding:12px 7px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .bffx-layer *,.bffx-layer *::before,.bffx-banner::after{animation:none!important}
  .bffx-conf,.bffx-tag,.bffx-ball{display:none}
}