/* =====================================================================
   Vape Big — Home hero banner slider redesign
   Reframes the existing Owl Carousel (.wbs_slider_container) into the
   rounded 1320x440 hero with glassy round nav arrows + pill dots.
   Real DB banner images + slider behaviour are untouched.
   ===================================================================== */

.wbs_slider_container {
  position: relative;
  height: auto !important;
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(120deg, #0e1117 0%, #16278a 100%);
}

/* ---------- mobile: inset the banner from the screen edges ----------
   The prototype frames the hero with `padding: 12px 12px 0px;` on its wrapper.
   Because .wbs_slider_container is rounded + overflow:hidden, padding INSIDE it
   would expose the gradient around the image, so we inset via margins instead:
   12px left/right, 12px top, 0 bottom. !important beats the mt-30/mb-30
   utility margins on the element. */
@media (max-width: 767.98px) {
  .wbs_slider_container {
    /* !important needed to beat the element's inline style="width:100%" —
       otherwise the banner stays 100% wide and its right edge overflows past
       the 12px left margin (so only the left/top gutter shows). */
    width: auto !important;
    margin: 12px 12px 0 !important;
  }
}

/* keep the rounded corners through Owl's wrappers */
.wbs_slider_container .owl-carousel,
.wbs_slider_container .owl-stage-outer,
.wbs_slider_container .wbs_slider {
  border-radius: 16px;
}

/* image fills the rounded frame */
.wbs_slider_container img {
  border-radius: 16px;
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 768px) {
  .wbs_slider_container .wbs_item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1320 / 440;
    object-fit: cover;
  }
}

/* ---------- pre-init (PHP/server-render) fallback ----------
   Each .wbs_item carries an inline `display:none` and is only revealed once
   Owl Carousel initialises. Before the JS runs, that leaves the hero as a
   blank gradient box. While the items are still DIRECT children of
   .wbs_slider (i.e. Owl hasn't wrapped them in .owl-item yet), reveal the
   first slide so the banner shows immediately on load. Once Owl initialises,
   .wbs_item is nested inside .owl-item, so this selector no longer matches
   and the working JS slider behaviour is untouched. */
.wbs_slider_container .wbs_slider > .wbs_item:first-child {
  display: block !important;
}

/* ---------- nav arrows: round glass buttons ---------- */
.wbs_slider_container .owl-nav { margin: 0; }
.wbs_slider_container .owl-nav button.owl-prev,
.wbs_slider_container .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0 !important;          /* hide Owl's default prev/next text */
  line-height: 0 !important;
  margin: 0;
  z-index: 5;
  transition: background .15s;
}
.wbs_slider_container .owl-nav button.owl-prev { left: 16px; }
.wbs_slider_container .owl-nav button.owl-next { right: 16px; }
.wbs_slider_container .owl-nav button.owl-prev:hover,
.wbs_slider_container .owl-nav button.owl-next:hover {
  background: rgba(0, 0, 0, .5) !important;
  color: #fff;
}
.wbs_slider_container .owl-nav button.owl-prev span,
.wbs_slider_container .owl-nav button.owl-next span { display: none; }

/* chevrons drawn with borders */
.wbs_slider_container .owl-nav button.owl-prev::after,
.wbs_slider_container .owl-nav button.owl-next::after {
  content: "";
  width: 9px;
  height: 9px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
}
.wbs_slider_container .owl-nav button.owl-prev::after { transform: rotate(45deg); margin-left: 3px; }
.wbs_slider_container .owl-nav button.owl-next::after { transform: rotate(-135deg); margin-right: 3px; }

/* ---------- dots: pill style ---------- */
.wbs_slider_container .owl-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.wbs_slider_container .owl-dots .owl-dot { margin: 0; }
.wbs_slider_container .owl-dots .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  transition: width .2s, background .2s;
}
.wbs_slider_container .owl-dots .owl-dot.active span,
.wbs_slider_container .owl-dots .owl-dot:hover span {
  width: 24px;
  background: #fff;
}

/* ---------- desktop: frame the hero banner in a light band ----------
   The .home-slider section gets a #ece9f0 background with a little top/bottom
   padding so the centred 1320px banner sits inside a soft frame. Desktop only
   (mobile keeps the 12px edge inset from the rule above). The banner's
   mt-30/mb-30 utility margins are zeroed so the spacing comes from the band's
   padding; horizontal margin:auto centering is preserved. */
@media (min-width: 768px) {
  .home-slider {
    background: #ece9f0;
    padding: 20px 0;
  }
  .home-slider .wbs_slider_container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}