/* Reset */
html, body, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Page base */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f9f9f9;
  font-family: Montserrat, sans-serif;
}

/* Swiper navigation */
.swiper-button-prev,
.swiper-button-next {
  color: #000; /* adjust to brand color */
  top: 50%;
  transform: translateY(-50%);
}
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }

/* Slide details overlay */
.details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.swiper-slide:hover .details {
  opacity: 1;
}
.details h2 {
  margin: 0;
  font-size: 18px;
}
.details p {
  margin: 5px 0 0;
  font-size: 14px;
}

.sweettee-slider .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}


/* Ensure Elementor containers sit above */
.elementor-container,
.elementor-widget {
  position: relative;
  z-index: 1;
}

/* 1) Remove link-based overlays inside the slider */
.sweettee-slider .swiper-slide a {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  position: relative;
  z-index: 0;
}

/* 2) Nuke pseudo-element overlays on links (tints, gradients) */
.sweettee-slider .swiper-slide a::before,
.sweettee-slider .swiper-slide a::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* 3) Ensure images aren’t tinted or blended */
.sweettee-slider .swiper-slide img {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 4) If an overlay container exists, block it */
.sweettee-slider .overlay,
.sweettee-slider .image-overlay,
.sweettee-slider .woocommerce-loop-product__link::before,
.sweettee-slider .woocommerce-loop-product__link::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Wrap your shortcode’s container (assign this class in Elementor) */
.sweettee-slider-wrapper {
  max-width: 80%;        /* adjust until left content is visible */
  margin: 0 auto;        /* centers the slider */
  position: relative;
  isolation: isolate;    /* creates a local stacking context */
  z-index: 0;
}

/* Keep the slider itself at the lowest layer within its wrapper */
.sweettee-slider {
  position: relative;
  z-index: 0;
}

/* Ensure text containers in the same section sit above */
.sweettee-slider-wrapper ~ .elementor-container,
.sweettee-slider-wrapper ~ .elementor-widget {
  position: relative;
  z-index: 1;
}

.left-column {
  position: relative;
  z-index: 20;   /* forces it above the slider */
  left: 0;       /* anchors it to the left edge */
}

/* 1. Make the slides much larger for the V-shape */
.sweettee-slider .swiper-slide {
  width: 600px !important;  /* Increased from 250px to 600px */
  flex-shrink: 0;
  text-align: center;
  transition: transform 0.3s ease;
}

/* 2. Allow the "wings" of the V to go outside the box */
.sweettee-slider {
  overflow: visible !important;
  padding: 50px 0 !important;
}

/* 3. Force the image to be high quality and large */
.sweettee-slider .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px;
}

/* 4. Fix the Wrapper so it doesn't squish the V */
.sweettee-slider-wrapper {
  max-width: 100% !important; /* Changed from 80% to 100% */
  margin: 0 auto;
  overflow: hidden; /* This keeps the V from overlapping other sections of the page */
}

/* =================================================================
   🔵 BRANDED CHECKOUT BUTTONS (#083FEE)
   ================================================================= */

/* High-Priority Styling for the Purchase Button & ShopEngine Overrides */
#payment #place_order, 
#payment #place_order.button.alt, 
.shopengine-widget .checkout-button,
button[name="apply_coupon"] {
    background-color: #083FEE !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    padding: 18px 30px !important;
    font-size: 18px !important;
    display: block !important;
    width: 100% !important; /* Makes the button full-width and easy to hit */
    border: none !important;
}

/* High-Priority Hover State (Changes text to Purple #3004A8) */
#payment #place_order:hover, 
#payment #place_order.button.alt:hover, 
.shopengine-widget .checkout-button:hover,
button[name="apply_coupon"]:hover {
    background-color: #083FEE !important; /* Background stays Blue */
    color: #3004A8 !important;            /* Text turns Purple */
    box-shadow: 0 4px 12px rgba(8, 63, 238, 0.4) !important;
    transform: translateY(-1px);
}

/* Specific fix for the Coupon button size */
button[name="apply_coupon"] {
    width: auto !important; /* Keep the coupon button smaller than the main checkout button */
    display: inline-block !important;
    padding: 10px 25px !important;
}

/* --- THE ULTIMATE TRANSPARENCY FIX --- */
.sweettee-slider, 
.sweettee-slider .swiper-wrapper, 
.sweettee-slider .swiper-slide, 
.sweettee-slider .swiper-slide a {
    background: transparent !important;
    background-color: transparent !important;
}

.sweettee-slider .swiper-slide img {
    mix-blend-mode: multiply !important; 
    background: transparent !important;
}