.bf-hero .bf-eyebrow{color:#e8457a;font-size:11px;letter-spacing:.2em;font-weight:700}
.bf-hero .bf-title{
  color:#fff;
  font-size:clamp(56px,6.5vw,165px);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.02em;
  margin:12px 0 24px;
}
.bf-hero .bf-sub{color:#ddd}

/* Pink Shop the sale */
.bf-hero .button.bf-shop{background-color:#e8457a !important;border-color:#e8457a !important;color:#fff !important}
.bf-hero .button.bf-shop:hover{background-color:#d13a6b !important;border-color:#d13a6b !important}

/* White code button */
.bf-hero .button.bf-code,
.bf-hero .button.bf-code span{color:#fff !important}
.bf-hero .button.bf-code{background:transparent !important;border:1px dashed rgba(255,255,255,.6) !important;letter-spacing:.1em;cursor:default;pointer-events:none;box-shadow:none !important}
.bf-countdown{display:flex;align-items:flex-start;gap:12px;margin-top:28px;color:#fff}
/* Countdown, no line */
.bf-countdown div{text-align:center;min-width:60px;padding-top:0;border-top:0}.bf-countdown span{display:block;font-size:36px;font-weight:800;line-height:1}
.bf-countdown small{display:block;margin-top:6px;font-size:10px;letter-spacing:.18em;color:#999}
.bf-countdown b{padding-top:14px;font-size:26px;color:#555}
.bf-countdown .sec span{color:#e8457a}
@media(max-width:549px){.bf-countdown span{font-size:28px}.bf-countdown div{min-width:44px}}
/* Tile bar: blur version */
.bf-tiles .banner .text-box{
  background:rgba(10,10,10,.45);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

/* Label + % inside the bar */
.bf-tiles .bf-tile{
  display:flex !important;justify-content:space-between;align-items:center;
  width:100%;margin:0 !important;
  padding:20px 22px !important;
  box-sizing:border-box !important;
  color:#fff;font-weight:800;letter-spacing:.1em;font-size:13px;
}
.bf-tile span:last-child{color:#e8457a;font-size:22px;font-weight:900;letter-spacing:0}

/* Subtle zoom on hover */
.bf-tiles .banner .bg{transition:transform .5s}
.bf-tiles .banner:hover .bg{transform:scale(1.04)}
.bf-hero .button.bf-shop,
.bf-hero .button.bf-code{margin-bottom:0}
.bf-hero .bf-countdown{margin-top:20px !important}
.bf-view-all {text-decoration: underline;}

.bf-hero .button.bf-code,
.bf-hero .button.bf-code:hover{
  border-width:1.5px !important;
  border-style:dashed !important;
  border-color:#fff !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* "Coming soon" badge on tiles */
.discount-badge {
  position: relative;
}

.discount-badge::after {
  content: "-30%";
  position: absolute;
  top: 10px;
  left: 10px;
  background: #000000;
  color: #e8457a;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.discount-badge2::after {
  content: "-30%";
  position: absolute;
  top: 10px;
  left: 10px;
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}


/* Gap between the hero and the tiles */
.bf-hero .bf-tiles{margin-top:40px !important}

/* One-line headline */
.bf-hero .bf-title{
  font-size:clamp(52px,11.5vw,230px) !important;
  line-height:.85;
  white-space:nowrap;
  margin:10px 0 30px;
}

/* Info strip */
.bf-strip{

  padding:24px 0 !important;
  margin:0 40px !important;
  max-width:calc(100% - 80px) !important;
}
.bf-strip p{color:#ddd;font-size:17px;line-height:1.5;margin:0}
.bf-strip-btns .col-inner{text-align:center}
.bf-strip .bf-countdown{margin:0 !important;justify-content:flex-end}

/* Mobile */
@media(max-width:849px){
  .bf-hero .bf-title{white-space:normal}
  .bf-strip-btns .col-inner{text-align:left}
  .bf-strip .bf-countdown{justify-content:flex-start}
  .bf-strip .col{padding-bottom:16px !important}
}
/* Bigger buttons */
.bf-hero .button.bf-shop,
.bf-hero .button.bf-code{
  font-size:18px !important;
  padding:0 34px !important;
  min-height:58px !important;
  line-height:58px !important;
  margin:0 6px 0 0 !important;
}

/* Bigger countdown */
.bf-hero .bf-countdown{ gap:18px; margin-top:34px !important }
.bf-hero .bf-countdown div{ min-width:96px }
.bf-hero .bf-countdown span{ font-size:clamp(44px,4.2vw,76px) !important; line-height:1 }
.bf-hero .bf-countdown small{ font-size:12px !important; margin-top:10px }
.bf-hero .bf-countdown b{ font-size:44px !important; padding-top:10px }

/* Mobile: scale back down */
@media(max-width:549px){
  .bf-hero .button.bf-shop,
  .bf-hero .button.bf-code{ font-size:15px !important; padding:0 22px !important; min-height:48px !important; line-height:48px !important; margin-bottom:10px !important }
  .bf-hero .bf-countdown div{ min-width:58px }
  .bf-hero .bf-countdown b{ font-size:28px !important }
}
   .bf-side .bf-sub{ font-size:20px; line-height:1.5; color:#ddd; margin-bottom:28px }