/* Black Friday 2026 strip on the home page - links to /black-friday-2026.
   Loaded only by the home_bf_strip CMS block. To remove: delete that block's line from homepage_v2,
   then this file and js/pt-bf-strip.js. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&family=Barlow+Condensed:ital,wght@1,900&display=swap');

#pt-bfs{--a:#ED253B;display:block;background:#0b0b0c;color:#fff;text-decoration:none;font-family:Rubik,Arial,Helvetica,sans-serif;line-height:1.4;text-align:center;overflow:hidden}
#pt-bfs,#pt-bfs *,#pt-bfs *::before,#pt-bfs *::after{box-sizing:border-box}
#pt-bfs:hover,#pt-bfs:focus{color:#fff;text-decoration:none}
#pt-bfs:focus-visible{outline:3px solid var(--a);outline-offset:-3px}

/* hazard strips */
#pt-bfs .bfs-strip{display:block;height:10px;background:repeating-linear-gradient(-45deg,#ED253B 0 16px,#0b0b0c 16px 32px)}

#pt-bfs .bfs-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px clamp(14px,2.4vw,34px);padding:clamp(14px,1.6vw,22px) 14px clamp(14px,1.6vw,20px);background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.10),transparent 60%),#0b0b0c}
#pt-bfs .bfs-bf{display:block;font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;line-height:.9;white-space:nowrap;font-size:clamp(46px,8.5vw,108px);letter-spacing:-.02em;color:#fff;text-shadow:.032em .032em 0 var(--a)}
#pt-bfs .bfs-l2{margin-left:.22em;animation:pt-bfs-blink 6s steps(1,end) infinite}
@keyframes pt-bfs-blink{
/* once, then twice, then three times, then a rest */
0%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
8%{color:#fff;text-shadow:.032em .032em 0 #ED253B,0 0 0 rgba(237,37,59,0)}
12%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
30%{color:#fff;text-shadow:.032em .032em 0 #ED253B,0 0 0 rgba(237,37,59,0)}
34%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
38%{color:#fff;text-shadow:.032em .032em 0 #ED253B,0 0 0 rgba(237,37,59,0)}
42%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
60%{color:#fff;text-shadow:.032em .032em 0 #ED253B,0 0 0 rgba(237,37,59,0)}
64%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
68%{color:#fff;text-shadow:.032em .032em 0 #ED253B,0 0 0 rgba(237,37,59,0)}
72%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
76%{color:#fff;text-shadow:.032em .032em 0 #ED253B,0 0 0 rgba(237,37,59,0)}
80%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
100%{color:#ED253B;text-shadow:.032em .032em 0 #000,0 0 .35em rgba(237,37,59,.9)}
}

/* red "up to 50% off" tag, with the call to action under it */
#pt-bfs .bfs-up{display:inline-flex;align-items:center;gap:clamp(8px,1vw,14px);background:var(--a);color:#fff;padding:clamp(5px,.6vw,8px) clamp(18px,2vw,28px);transform:skewX(-8deg);transition:background .2s ease,color .2s ease}
#pt-bfs .bfs-up b{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-style:italic;font-weight:900;font-size:clamp(30px,3.6vw,50px);text-transform:uppercase;line-height:1;white-space:nowrap}
#pt-bfs .bfs-up i{font-style:normal;font-weight:700;font-size:clamp(11px,1.1vw,14px);letter-spacing:.1em;text-transform:uppercase;text-align:left;line-height:1.2}
#pt-bfs .bfs-go{display:block;flex-basis:100%;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
#pt-bfs .bfs-go span{display:inline-block;transition:transform .2s ease}
#pt-bfs:hover .bfs-up{background:#fff;color:#0b0b0c}
#pt-bfs:hover .bfs-go span{transform:translateX(4px)}

@media (max-width:640px){
#pt-bfs .bfs-strip{height:8px}
}
@media (max-width:480px){
#pt-bfs .bfs-up{flex-direction:column;gap:3px;padding:6px 22px 7px}
#pt-bfs .bfs-up i{order:-1;text-align:center;font-size:11.5px;letter-spacing:.14em}
#pt-bfs .bfs-up i br{display:none}
#pt-bfs .bfs-go{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
#pt-bfs .bfs-l2{animation:none;color:#ED253B}
#pt-bfs .bfs-up,#pt-bfs .bfs-go span{transition:none}
}
