/* Valley Fest 2027 — blackfriday.css (black-friday.html, build 263)
   Loads after stylesheet.css, sponsor.css and xmas.css (it reuses the shop components: steppers, summary, checkout)
   and re-skins them for Black Friday: black, the festival rainbow, electric yellow. Scoped to body.sl.bf. */
body.sl.bf{
  --xm-red:#FF3D7F; --xm-red-2:#E0115F; --xm-green:#23E572; --xm-holly:#0A8F4A; --xm-gold:#FFE600; --xm-cream:#FFFFFF;
  --bf-rb:linear-gradient(90deg,#FF3D7F,#FF8A00,#FFE600,#23E572,#00C2FF,#8B5CFF);
  --sl-sunset:var(--bf-rb);
  background:#060608;
}
.bf .sl-nav.solid{background:rgba(6,6,8,.92)}
.bf .sl-btn.primary{background:#FFE600;color:#0A0A0A;box-shadow:0 10px 30px rgba(255,230,0,.3)}
.bf .sl-btn.primary:hover{box-shadow:0 14px 36px rgba(255,230,0,.45)}
.bf .sl-btn.primary:disabled{background:#3A3A40;color:#9A9AA5;box-shadow:none;cursor:not-allowed;transform:none}
.bf .sl-eyebrow{color:#FFE600}
.bf .sl-logo span{color:#FFE600}
.bf .xm-box,.bf .xm-faq details{background:#111116;border-color:rgba(255,255,255,.1)}
.bf .xm-section.alt{background:#0C0C10}
.bf .xm-qty{background:#060608}
.bf .xm-qty button:hover:not(:disabled){background:#FF3D7F}
.bf input[type=text],.bf input[type=email]{background:#060608}
.bf .xm-sum{background:#fff;color:#111}
.bf .xm-sum::before{background:var(--bf-rb);height:8px}
.bf .xm-sum h3{color:#111}
.bf .xm-sum .tot,.bf .xm-sum li{color:#111}
.bf .xm-pay .check input{accent-color:#FFE600}

/* ---- hero ---- */
.bf-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:130px 0 70px;overflow:hidden;isolation:isolate;
  background:radial-gradient(50% 50% at 85% 20%,rgba(255,61,127,.22),transparent 60%),radial-gradient(45% 50% at 10% 85%,rgba(0,194,255,.16),transparent 60%),#060608}
.bf-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%;z-index:-3;filter:saturate(1.15) contrast(1.05)}
.bf-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(6,6,8,.9) 0%,rgba(6,6,8,.66) 40%,rgba(6,6,8,.22) 72%,rgba(6,6,8,.35) 100%),
  linear-gradient(180deg,rgba(6,6,8,.6) 0%,rgba(6,6,8,0) 22%,rgba(6,6,8,0) 72%,#060608 100%),
  radial-gradient(50% 50% at 85% 20%,rgba(255,61,127,.25),transparent 60%)}
.bf-hero .bf-word{-webkit-text-stroke:2px rgba(255,255,255,.12)}
.bf-hero .sl-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;width:100%}
.bf-word{position:absolute;left:-2vw;right:-2vw;top:50%;transform:translateY(-50%) rotate(-4deg);z-index:-1;font-weight:800;font-size:clamp(90px,17vw,260px);line-height:.85;letter-spacing:-.02em;white-space:nowrap;text-align:center;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.07);user-select:none;pointer-events:none}
.bf-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:#FFE600;color:#0A0A0A;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.bf-badge i{width:10px;height:10px;border-radius:50%;background:#FF3D7F;box-shadow:0 0 0 0 rgba(255,61,127,.7);animation:bf-pulse 1.6s infinite}
@keyframes bf-pulse{70%{box-shadow:0 0 0 10px rgba(255,61,127,0)}100%{box-shadow:0 0 0 0 rgba(255,61,127,0)}}
.bf-hero h1{font-weight:800;font-size:clamp(44px,6.6vw,92px);line-height:.95;margin:18px 0 18px;text-shadow:none}
.bf-hero h1 .rb{background:var(--bf-rb);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bf-flow 6s linear infinite}
@keyframes bf-flow{to{background-position:200% 0}}
.bf-hero p.sub{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:rgba(255,255,255,.82);max-width:600px;margin:0 0 26px}

/* the deal card */
.bf-deal{position:relative;border-radius:28px;padding:clamp(22px,2.6vw,34px);background:#111116;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -30px rgba(0,0,0,.9);overflow:hidden}
.bf-deal::before{content:"";position:absolute;inset:0;padding:2px;border-radius:28px;background:var(--bf-rb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.bf-deal .lbl{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bf-was{display:flex;align-items:baseline;gap:12px;margin:8px 0 2px}
.bf-was s{font-size:clamp(24px,2.4vw,30px);font-weight:700;color:rgba(255,255,255,.5);text-decoration-thickness:3px;text-decoration-color:#FF3D7F}
.bf-was span{font-size:14px;color:rgba(255,255,255,.55)}
.bf-now{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bf-now b{font-size:clamp(56px,6vw,84px);line-height:1;font-weight:800;color:#FFE600}
.bf-now span{font-size:15px;color:rgba(255,255,255,.75);font-weight:700}
.bf-save{display:inline-block;margin:12px 0 18px;padding:6px 14px;border-radius:999px;background:#FF3D7F;color:#fff;font-weight:800;font-size:15px;transform:rotate(-2deg)}
.bf-clock{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 18px}
.bf-clock div{background:#060608;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 6px;text-align:center}
.bf-clock b{display:block;font-size:clamp(30px,3.2vw,42px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.bf-clock span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.bf-state{font-weight:800;font-size:15px;margin:0 0 8px;color:#FFE600}
.bf-deal .sl-btn{width:100%}
.bf-deal .fine{font-size:13px;color:rgba(255,255,255,.55);margin:12px 0 0;line-height:1.5}

/* ---- the tier ladder ---- */
.bf-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1040px;margin:0 auto}
.bf-tier{position:relative;padding:22px 22px 20px;border-radius:22px;background:#111116;border:1px solid rgba(255,255,255,.1)}
.bf-tier .n{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.bf-tier h3{font-size:21px;font-weight:800;margin:6px 0 4px}
.bf-tier .p{font-size:30px;font-weight:800}
.bf-tier .st{display:inline-block;margin-top:10px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bf-tier.gone{opacity:.55}.bf-tier.gone .p{text-decoration:line-through;text-decoration-color:#FF3D7F}
.bf-tier.gone .st{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.bf-tier.now .st{background:#23E572;color:#04140B}
.bf-tier.back{border-color:transparent;box-shadow:0 0 0 2px #FFE600,0 20px 50px -20px rgba(255,230,0,.4);transform:translateY(-6px);background:linear-gradient(180deg,#1A1A10,#111116)}
.bf-tier.back .p{color:#FFE600}
.bf-tier.back .st{background:#FFE600;color:#0A0A0A}
.bf-tier.back::after{content:"Black Friday";position:absolute;top:-12px;right:16px;padding:4px 12px;border-radius:999px;background:#FF3D7F;color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bf-ended .bf-tier.back{transform:none;box-shadow:none;border-color:rgba(255,255,255,.1)}
.bf-ended .bf-tier.back::after{display:none}

/* included */
.bf-incl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1040px;margin:0 auto}
.bf-incl div{padding:18px;border-radius:18px;background:#111116;border:1px solid rgba(255,255,255,.08)}
.bf-incl b{display:block;font-size:17px;margin-bottom:4px}
.bf-incl span{color:rgba(255,255,255,.65);font-size:14.5px;line-height:1.45}

/* closed state over the checkout */
.bf-closed{display:none;max-width:720px;margin:0 auto 24px;padding:18px 22px;border-radius:18px;background:#1A1A10;border:1px solid rgba(255,230,0,.4);color:#FFE600;font-weight:700;text-align:center}
.bf-off .bf-closed{display:block}
.bf-off .xm-checkout{opacity:.5;pointer-events:none}

.bf .xm-bar{background:rgba(6,6,8,.94)}
@media (max-width:980px){
  /* phones (build 265): the photo is a band across the top showing the field, tents and crowd, fading into black under the headline */
  .bf-hero{display:block;padding-top:calc(min(72vw,560px) - 64px)}
  .bf-hero-img{height:min(72vw,560px);bottom:auto;object-position:50% 60%}
  .bf-hero::before{bottom:auto;height:min(72vw,560px);background:linear-gradient(180deg,rgba(6,6,8,.5) 0%,rgba(6,6,8,0) 22%,rgba(6,6,8,0) 55%,rgba(6,6,8,.75) 82%,#060608 100%)}
  .bf-hero .bf-word{display:none}
  .bf-hero .sl-wrap,.bf-ladder{grid-template-columns:1fr}
  .bf-incl{grid-template-columns:1fr 1fr}
  .bf-tier.back{transform:none}
}
@media (max-width:560px){.bf-incl{grid-template-columns:1fr}.bf-word{font-size:30vw}
  /* phones: zoom into the arena so the field, tents and flags fill the band rather than the sky */
  .bf-hero{padding-top:calc(84vw - 56px)}
  .bf-hero-img{width:170%;max-width:none;height:auto;left:50%;right:auto;transform:translateX(-50%);top:calc(84vw - 113.4vw);object-fit:fill}
  .bf-hero::before{height:84vw;background:linear-gradient(180deg,rgba(6,6,8,.55) 0%,rgba(6,6,8,.05) 20%,rgba(6,6,8,0) 58%,rgba(6,6,8,.8) 86%,#060608 100%)}
}
@media (prefers-reduced-motion:reduce){.bf-hero h1 .rb,.bf-badge i{animation:none}}