/* =========================================
   BLACK FRIDAY HERO
   ========================================= */

/* Eyebrow, headline, subtext */
.bf-hero .bf-eyebrow{
  color:#e8457a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
}
.bf-hero .bf-title{
  color:#fff;
  font-size:clamp(52px,10vw,210px) !important;
  font-weight:900;
  line-height:.85;
  letter-spacing:-.02em;
  white-space:nowrap;
  margin:10px 0 30px;
}
.bf-hero .bf-sub{ color:#ddd }
.bf-side .bf-sub{
  font-size:20px;
  line-height:1.5;
  margin-bottom:28px;
}
/* Right-align the action block (desktop) */
.bf-side .col-inner{ text-align:right }
.bf-side .bf-countdown{ justify-content:flex-end }
.bf-side .button.bf-code{ margin-right:0 !important }

/* Buttons (shared) */
.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;
}

/* Shop the sale: pink */
.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;
}

/* Code: white dashed outline (needs btn-keep class too) */
.bf-hero .button.bf-code,
.bf-hero .button.bf-code:hover{
  background:transparent !important;
  border:1.5px dashed #fff !important;
  box-shadow:none !important;
  letter-spacing:.1em;
  cursor:default;
  pointer-events:none;
}
.bf-hero .button.bf-code,
.bf-hero .button.bf-code span{ color:#fff !important }

/* Countdown */
.bf-hero .bf-countdown{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-top:34px !important;
  color:#fff;
}
.bf-hero .bf-countdown div{ text-align:center; min-width:80px }
.bf-hero .bf-countdown span{
  display:block;
  font-size:clamp(44px,4.2vw,76px) !important;
  font-weight:800;
  line-height:1;
}
.bf-hero .bf-countdown small{
  display:block;
  margin-top:10px;
  font-size:12px !important;
  letter-spacing:.18em;
  color:#999;
}
.bf-hero .bf-countdown b{
  padding-top:10px;
  font-size:44px !important;
  color:#555;
}
.bf-hero .bf-countdown .sec span{ color:#e8457a }

/* =========================================
   CATEGORY TILES
   ========================================= */
.bf-hero .bf-tiles{ margin-top:40px !important }

/* Bar: pinned flush to the bottom, blurred, no sliding */
.bf-tiles .banner .text-box{
  top:auto !important;
  bottom:-1px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  margin:0 !important;
  transform:none !important;
  background:rgba(10,10,10,.45);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.bf-tiles .banner-layers,
.bf-tiles .banner .text-box,
.bf-tiles .banner .text-box *{
  transition:none !important;
  animation:none !important;
}

/* Label + % */
.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-size:13px;
  font-weight:800;
  letter-spacing:.1em;
}
.bf-tile span:last-child{
  color:#e8457a;
  font-size:22px;
  font-weight:900;
  letter-spacing:0;
}

/* Hover zoom: only on devices with a real mouse */
.bf-tiles .banner .bg{ transition:transform .5s }
@media(hover:hover){
  .bf-tiles .banner:hover .bg{ transform:scale(1.04) }
}

/* Stop tiles being dragged like images */
.bf-tiles a,
.bf-tiles img,
.bf-tiles .bg{
  -webkit-user-drag:none;
  user-select:none;
}

/* =========================================
   BEST SELLERS
   ========================================= */
.bf-view-all{ text-decoration:underline }

/* -30% badges */
.discount-badge,
.discount-badge2{ position:relative }

.discount-badge::after{
  content:"-30%";
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding:4px 10px;
  background:#000;
  color:#fff;
  font-size:16px;
  font-weight:600;
  letter-spacing:.5px;
}

/* =========================================
   SITE
   ========================================= */


/* =========================================
   TABLET + MOBILE (≤849px)
   ========================================= */
@media(max-width:849px){

  /* Hero: centred, headline can wrap */
  .bf-hero .bf-title{ white-space:normal }
  .bf-hero .col-inner{ text-align:center !important }
  .bf-hero .bf-countdown{ justify-content:center !important }
  .bf-hero .button.bf-shop,
  .bf-hero .button.bf-code{ margin:0 4px 10px !important }

  /* Tiles: label on top, % underneath */
  .bf-tiles .bf-tile{
    flex-direction:column;
    align-items:flex-start !important;
    gap:2px;
    padding:12px 14px !important;
    font-size:11px;
    line-height:1.3;
  }
  .bf-tile span:last-child{ font-size:20px }

  /* Solid bar (blur is slow to scroll on phones) */
  .bf-tiles .banner .text-box{
    background:rgba(10,10,10,.6);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* =========================================
   MOBILE (≤549px)
   ========================================= */
@media(max-width:549px){

  /* Equal gutters, so everything is truly centred */
  .bf-hero .col{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .bf-hero .col-inner{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .bf-hero .row > .col:first-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
.bf-hero .bf-side .col-inner{ padding-top:0 !important }
.bf-hero .bf-side .bf-sub{ margin-top:10px !important }
  /* Headline */
  .bf-hero .bf-title{
   font-size:19vw !important;
	  font-weight:800 !important;
    white-space:nowrap;
    margin-bottom:16px !important;
  }

  /* Subtext */
  .bf-hero .bf-sub,
  .bf-side .bf-sub{
    font-size:16px !important;
    line-height:1.5;
    max-width:300px;
    margin:0 auto 20px !important;
    text-wrap:balance;
  }

  /* Buttons */
  .bf-hero .button.bf-shop,
  .bf-hero .button.bf-code{
    font-size:15px !important;
    padding:0 22px !important;
    min-width:220px;
    min-height:48px !important;
    line-height:48px !important;
  }

  /* Countdown */
  .bf-hero .bf-countdown{ gap:10px }
  .bf-hero .bf-countdown div{ min-width:58px }
  .bf-hero .bf-countdown span{ font-size:36px !important }
  .bf-hero .bf-countdown b{ font-size:28px !important }

  /* Shorter tiles */
  .bf-tiles .banner{
    padding-top:0 !important;
    height:200px !important;
  }
	@media(max-width:549px){
  .bf-banner .row > .col:first-child .col-inner{ padding-bottom:0 !important }
  .bf-banner .bf-side .col-inner{ padding-top:0 !important }
  .bf-banner .bf-title{ margin-bottom:0 !important }
  .bf-banner .bf-cat{ margin-top:22px !important }
}
}
/* =========================================
   CATEGORY PAGE BANNER
   ========================================= */
.bf-banner .bf-title{
  font-size:clamp(48px,7vw,130px) !important;
  margin-bottom:0;
}
.bf-banner .bf-cat{
  color:#fff;
  font-size:clamp(28px,3vw,48px);
  font-weight:900;
  letter-spacing:.06em;
  line-height:1;
  margin:0 0 20px;
}
.bf-banner .bf-side .col-inner{ text-align:right }
.bf-banner .bf-countdown{ justify-content:flex-end; margin-top:22px !important; gap:12px }
.bf-banner .bf-countdown div{ min-width:64px }
.bf-banner .bf-countdown span{ font-size:clamp(32px,3vw,52px) !important }
.bf-banner .bf-countdown b{ font-size:32px !important }

@media(max-width:849px){
  .bf-banner .bf-side .col-inner{ text-align:center }
  .bf-banner .bf-countdown{ justify-content:center }
}
@media(max-width:549px){
  .bf-banner .bf-title{ font-size:16vw !important }
  .bf-banner .bf-cat{ margin-top:16px }
}
.bf-pink{ color:#e8457a }
/* =========================================
   BLACK FRIDAY ON/OFF
   ========================================= */
body.bf-live .bf-normal{ display:none !important }       /* hide usual banners during sale */
body:not(.bf-live) .bf-only{ display:none !important }   /* hide sale-only bits outside it */

/* =========================================
   BLACK FRIDAY: black outline buttons
   ========================================= */
body.bf-live .button.is-outline:not(.btn-keep):not(.wedding-green-button):not(.wedding-beige-button){
  color:#000 !important;
  border-color:#000 !important;
  background-color:transparent !important;
}

body.bf-live .button.is-outline:not(.btn-keep):not(.wedding-green-button):not(.wedding-beige-button):hover,
body.bf-live .button.is-outline:not(.btn-keep):not(.wedding-green-button):not(.wedding-beige-button):focus{
  color:#fff !important;
  background-color:#000 !important;
  border-color:#000 !important;
  box-shadow:none !important;
}
/* =========================================
   BLACK FRIDAY: top bar + footer colours
   ========================================= */
body.bf-live #top-bar{
  background-color:#000 !important;
}
body.bf-live .footer-1,
body.bf-live .footer-2{
  background-color:#000 !important;
}
body.bf-live .absolute-footer{
  background-color:#000 !important;
}
/* Page background behind the footer (shows when scrolling past the bottom) */
html:has(body.bf-live){
  background-color:#000 !important;
}