.black-friday-component{--bf-accent:var(--primary,#f49b2b);--count:0;--days:31;--hours:24;--minutes:60;--seconds:60;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem;width:fit-content;margin-inline:auto;padding-inline:2.5rem;display:flex}.black-friday-component .coupon{border:1px solid var(--bf-accent);background:color-mix(in oklab, var(--card,#1a1a1a) 92%, var(--bf-accent) 8%);transform-origin:bottom;border-radius:12px;flex-direction:row;justify-content:space-between;align-items:center;display:flex;overflow:hidden;scale:.85}@media (width>=768px){.black-friday-component .coupon{scale:1}}.black-friday-component .coupon:hover .content h3>span{animation:.15s ease-out both bf-jump}.black-friday-component .coupon:hover .content h3>span:first-of-type{animation-delay:30ms}.black-friday-component .coupon:hover .content h3>span:nth-of-type(2){animation-delay:60ms}.black-friday-component .coupon:hover .content h3>span:nth-of-type(3){animation-delay:90ms}.black-friday-component .coupon:hover .content h3>span:nth-of-type(4){animation-delay:.12s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(5){animation-delay:.15s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(6){animation-delay:.18s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(7){animation-delay:.21s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(8){animation-delay:.24s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(9){animation-delay:.27s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(10){animation-delay:.3s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(11){animation-delay:.33s}.black-friday-component .coupon:hover .content h3>span:nth-of-type(12){animation-delay:.36s}.black-friday-component .coupon .box{color:#fff;background:linear-gradient(145deg, var(--bf-accent), color-mix(in oklab, var(--bf-accent), #000 28%));flex-direction:column;justify-content:center;align-items:center;width:130px;height:100%;padding:1rem;display:flex}.black-friday-component .coupon .box span{font-size:1.8rem;font-weight:700;display:block}.black-friday-component .coupon .diver{border:3px dashed #0000;border-right-color:var(--bf-accent);width:0;height:160px;display:block}.black-friday-component .coupon .content{color:#fff;flex:1;width:min(330px,100%);height:100%;padding:1rem}.black-friday-component .coupon .content h3{justify-content:flex-start;align-items:center;height:34px;margin-bottom:1rem;font-size:2rem;font-weight:600;display:flex}.black-friday-component .coupon .content h3 span.end{width:30px}.black-friday-component .coupon .content p{color:#959595;font-size:1rem;font-style:normal;font-weight:400;line-height:1.25rem}.black-friday-component .coupon .content p strong{color:var(--bf-accent)}.black-friday-component .coupon .content p a{color:var(--bf-accent);text-decoration:underline;text-decoration-color:var(--bf-accent);text-transform:capitalize;text-underline-offset:.05rem;word-spacing:.03rem;font-style:italic;font-weight:bolder}.black-friday-component .timer{text-align:center;flex-direction:row;justify-content:space-between;gap:0;width:244px;display:flex;overflow:hidden}.black-friday-component .timer .colon{color:#fff;width:8px;font-size:2rem}.black-friday-component .timer .item{text-align:center;width:55px;height:fit-content}.black-friday-component .timer .item .days,.black-friday-component .timer .item .hours,.black-friday-component .timer .item .minutes,.black-friday-component .timer .item .seconds{text-align:center;width:55px;height:40px;overflow:hidden}.black-friday-component .timer .item .day,.black-friday-component .timer .item .hour,.black-friday-component .timer .item .min,.black-friday-component .timer .item .sec{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;height:fit-content;display:flex}.black-friday-component .timer .item .day span,.black-friday-component .timer .item .hour span,.black-friday-component .timer .item .min span,.black-friday-component .timer .item .sec span{color:#fff;height:40px;font-size:2rem;display:inline-block}.black-friday-component .timer .item .day{--count:var(--days);animation:bf-slide calc(var(--count) * 86400s) ease-out 0s 31 normal both}.black-friday-component .timer .item .hour{--count:var(--hours);animation:bf-slide calc(var(--count) * 3600s) steps(var(--count)) 0s 24 normal both}.black-friday-component .timer .item .min{--count:var(--minutes);animation:bf-slide calc(var(--count) * 60s) steps(var(--count)) 0s 60 normal both}.black-friday-component .timer .item .sec{--count:var(--seconds);animation:bf-slide calc(var(--count) * 1s) steps(var(--count)) 0s 60 normal both}.black-friday-component .timer .item p{text-align:center;color:#fff;font-size:1.2rem;font-weight:400}@keyframes bf-slide{0%{transform:translateY(calc(-40px * var(--count)))}99.6%{transform:translateY(0)}to{transform:translateY(calc(-40px * var(--count)))}}@keyframes bf-jump{0%{transform:translateY(0)scale(1)}50%{transform:translateY(-10px)scale(1.1)}to{transform:translateY(0)scale(1)}}