/* ============================================================
   // CSS NAME: website-banners-front //
   Lightweight hero banner slider. Per-banner colours come in as
   inline CSS variables, so one stylesheet skins every banner.
   ============================================================ */
/* Full-bleed: span the whole viewport even inside a constrained theme container */
.wb-hero{position:relative;width:100vw;max-width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  height:var(--wb-h,clamp(440px,50vw,600px));overflow:hidden;isolation:isolate;color:#fff;}
.wb-hero *{box-sizing:border-box;}

/* // CSS NAME: wb-slide // */
.wb-slide{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1;
  transition:opacity .9s ease-in-out,visibility 0s linear .9s;}
.wb-slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity .9s ease-in-out;}

/* // CSS NAME: wb-bg // (the photo) — zoom OFF by default, only animates under .wb-zoom */
.wb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.wb-hero.wb-zoom .wb-bg{transform:scale(1.04);}
.wb-hero.wb-zoom .wb-slide.is-active .wb-bg{animation:wbZoom 7s ease-out forwards;}
@keyframes wbZoom{from{transform:scale(1.04);}to{transform:scale(1.12);}}

/* // CSS NAME: wb-overlay // (opacity + colour set per banner) */
.wb-scrim{position:absolute;inset:0;z-index:2;background:var(--wb-ovc,#0E1417);opacity:var(--wb-ov,.38);}
.wb-soft{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,0) 40%,rgba(0,0,0,.30));}

/* // CSS NAME: wb-strip // (optional sale ribbon) */
.wb-strip{position:absolute;top:0;left:0;right:0;z-index:4;background:var(--wb-cta-bg,#FF9F19);color:var(--wb-cta-fg,#0E1417);
  text-align:center;font-weight:800;font-size:clamp(.66rem,1.5vw,.82rem);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;}

/* // CSS NAME: wb-content // */
.wb-content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px 26px 90px;}
.wb-inner{max-width:1100px;display:flex;flex-direction:column;align-items:center;}

/* // CSS NAME: wb-edge // (brush pinned to the bottom — only the TOP tip shows, bottom of the PNG is cropped off below the banner) */
.wb-edge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:var(--wb-edge-h,17px);object-fit:cover;object-position:center top;z-index:3;pointer-events:none;}

/* // CSS NAME: wb-eyebrow //  (.wb-hero prefix + !important so the theme can't override) */
.wb-hero .wb-eyebrow{display:inline-block!important;background:var(--wb-eb-bg,#00ADBC)!important;color:var(--wb-eb-fg,#fff)!important;
  font-family:'Work Sans','Arial',sans-serif!important;font-weight:var(--wb-eb-weight,900)!important;font-size:var(--wb-eb-size,24px)!important;
  text-transform:uppercase!important;text-align:center!important;letter-spacing:1px!important;padding:12px 22px!important;
  border-radius:6px!important;box-shadow:2px 4px 8px rgba(0,0,0,.3)!important;line-height:1.2!important;margin:0 0 .7em!important;}
/* // CSS NAME: wb-heading //  (size, weight, colour + a crisp 4-way outline like the brand CSS) */
.wb-hero .wb-heading{font-family:var(--wb-font,'Work Sans','Arial Black',sans-serif)!important;color:var(--wb-hd-fg,#fff)!important;
  font-weight:var(--wb-hd-weight,900)!important;font-size:var(--wb-hd-size,96px)!important;
  line-height:1.1;text-transform:uppercase;letter-spacing:.01em;margin:0;max-width:24ch;
  --wb-so:var(--wb-hd-stroke,3px);--wb-soc:var(--wb-hd-stroke-c,#00ADBC);
  text-shadow:calc(var(--wb-so)*-1) calc(var(--wb-so)*-1) 0 var(--wb-soc),var(--wb-so) calc(var(--wb-so)*-1) 0 var(--wb-soc),calc(var(--wb-so)*-1) var(--wb-so) 0 var(--wb-soc),var(--wb-so) var(--wb-so) 0 var(--wb-soc);}
/* drop shadow behind the outline, only when the toggle is on (matches your brand CSS) */
.wb-hero.wb-shadow .wb-heading{text-shadow:calc(var(--wb-so)*-1) calc(var(--wb-so)*-1) 0 var(--wb-soc),var(--wb-so) calc(var(--wb-so)*-1) 0 var(--wb-soc),calc(var(--wb-so)*-1) var(--wb-so) 0 var(--wb-soc),var(--wb-so) var(--wb-so) 0 var(--wb-soc),0 14px 16px rgba(0,0,0,.4);}
/* // CSS NAME: wb-tagline // */
.wb-hero .wb-tagline{color:var(--wb-tg-fg,#fff)!important;font-weight:var(--wb-tg-weight,500)!important;
  font-size:var(--wb-tg-size,20px)!important;margin:.6em 0 0;text-shadow:0 2px 12px rgba(0,0,0,.55);}
/* // CSS NAME: wb-cta // (fill + text + size + weight all controllable) */
.wb-hero .wb-cta{display:inline-flex!important;align-items:center;gap:.5em;margin-top:1.3rem;background:var(--wb-cta-bg,#FF9F19)!important;
  color:var(--wb-cta-fg,#fff)!important;font-family:'Work Sans','Arial',sans-serif!important;font-weight:var(--wb-cta-weight,800)!important;font-size:var(--wb-cta-size,18px)!important;
  letter-spacing:.03em!important;text-transform:uppercase!important;text-decoration:none!important;padding:14px 28px!important;border-radius:999px!important;line-height:1.2!important;
  box-shadow:0 12px 26px rgba(0,0,0,.3);transition:transform .18s ease;border:0!important;}
.wb-hero .wb-cta:hover{transform:translateY(-2px);}
.wb-hero .wb-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* // CSS NAME: wb-eyebrow-below // — put the eyebrow box under the heading */
.wb-hero.wb-eb-below .wb-heading{order:1;}
.wb-hero.wb-eb-below .wb-eyebrow{order:2;margin:.55em 0 0;}
.wb-hero.wb-eb-below .wb-tagline{order:3;}
.wb-hero.wb-eb-below .wb-timer{order:3;}
.wb-hero.wb-eb-below .wb-cta{order:4;}

/* // CSS NAME: wb-mobile-sizes // — separate mobile control per component */
@media (max-width:768px){
  .wb-hero .wb-eyebrow{font-size:var(--wb-eb-msize,13px)!important;}
  .wb-hero .wb-heading{font-size:var(--wb-hd-msize,40px)!important;--wb-so:var(--wb-hd-stroke-m,2px);}
  .wb-hero .wb-tagline{font-size:var(--wb-tg-msize,15px)!important;}
  .wb-hero .wb-cta{font-size:var(--wb-cta-msize,14px)!important;}
}

/* // CSS NAME: wb-salebar // (full-width sale bar across the top) */
.wb-salebar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:14px;padding:11px 20px;
  box-shadow:0 6px 16px rgba(0,0,0,.3);font-family:'Work Sans','Arial',sans-serif;}
.wb-salebar.wb-hide{display:none;}
.wb-sb-pill{font-weight:900!important;text-transform:uppercase;letter-spacing:.5px;font-size:15px;padding:8px 14px;border-radius:8px;
  color:#0E1417;box-shadow:0 3px 6px rgba(0,0,0,.3);white-space:nowrap;line-height:1;}
.wb-sb-text{font-weight:700;font-size:15px;flex:1;min-width:0;}
.wb-sb-timer{display:flex;gap:6px;}
.wb-sb-timer .wb-cell{background:rgba(255,255,255,.16);border-radius:6px;padding:5px 8px;text-align:center;min-width:40px;}
.wb-sb-timer .wb-cell b{font-weight:900;font-size:15px;line-height:1;display:block;font-variant-numeric:tabular-nums;}
.wb-sb-timer .wb-cell span{font-size:8px;opacity:.75;text-transform:uppercase;letter-spacing:.05em;}
.wb-sb-btn{background:#fff;color:#0E1417;font-weight:900!important;text-transform:uppercase;font-size:13px;padding:10px 18px;border-radius:8px;
  text-decoration:none!important;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.2);}
.wb-sb-x{background:none;border:0;color:inherit;opacity:.6;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;}
.wb-sb-x:hover{opacity:1;}
@media (max-width:768px){
  .wb-salebar{flex-wrap:wrap;gap:8px;padding:8px 12px;justify-content:center;}
  .wb-sb-text{flex:1 1 100%;order:3;text-align:center;font-size:13px;}
  .wb-sb-pill{font-size:13px;padding:6px 11px;}
  .wb-sb-x{position:absolute;top:6px;right:8px;}
}

/* // CSS NAME: wb-timer // (countdown) */
.wb-timer{margin:.5em 0 .2em;display:flex;flex-direction:column;align-items:center;gap:8px;}
.wb-timer-label{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.66rem,1.5vw,.8rem);opacity:.9;}
.wb-cells{display:flex;gap:8px;}
.wb-cell{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:10px 8px;min-width:66px;text-align:center;}
.wb-cell b{font-family:var(--wb-font,'Work Sans',sans-serif);font-weight:900;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1;display:block;font-variant-numeric:tabular-nums;}
.wb-cell span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.85;}

/* // CSS NAME: wb-arrows // */
.wb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:50px;height:50px;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--wb-arrow,#fff);font-size:1.6rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.wb-arrow:hover{background:rgba(0,0,0,.35);}
.wb-arrow:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.wb-prev{left:16px;}.wb-next{right:16px;}

/* // CSS NAME: wb-dots // (higher on desktop, closer to the bottom on mobile) */
.wb-dots{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);z-index:5;display:flex;gap:10px;}
@media (max-width:768px){ .wb-dots{bottom:20px;} }
.wb-dots button{width:11px;height:11px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;}
.wb-dots button.is-active{background:var(--wb-dot,#FF9F19);transform:scale(1.25);}

/* // CSS NAME: wb-progress // */
.wb-progress{position:absolute;left:0;bottom:0;z-index:5;height:4px;width:100%;background:rgba(255,255,255,.15);}
.wb-progress span{display:block;height:100%;width:0;background:rgba(255,255,255,.85);}
.wb-hero.is-playing .wb-progress span{animation:wbProg var(--wb-dur,6s) linear forwards;}
@keyframes wbProg{from{width:0;}to{width:100%;}}

@media (max-width:768px){
  .wb-arrow{display:none;}
  .wb-content{padding:20px;}
}
@media (prefers-reduced-motion:reduce){
  .wb-slide,.wb-bg,.wb-hero.is-playing .wb-progress span{animation:none!important;}
  .wb-slide{transition:opacity .3s ease;}
  .wb-bg{transform:none;}
}