/* =========================================================
   BERGMANN – Product Line Slider (Divi)
   Structure:
   Section ID:     #product-line-slider
   Left column:
     - Heading:    .product-line-title
     - Text:       .product-line-text
     - Button:     use .berg-btn-primary (from theme css)  [oai_citation:0‡bergmann-theme.css](sediment://file_00000000b0a0720abfdc6c1f468719f7)
   Right column:
     - Slider:     .product-line-slider  (images only)
   Goal: match reference (clean white, soft sage band, big image, arrows bottom-right)
   ========================================================= */

/* ---------- Section background + subtle sage band ---------- */
#product-line-slider{
  position: relative;
  background: var(--berg-bg-light);
  padding: 120px 0 0 !important;
  overflow: hidden;
}

#product-line-slider::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;                 /* the soft band */
  background: var(--berg-bg-sage);
  pointer-events: none;
}

/* ---------- Row: full width + fixed hero height ---------- */
#product-line-slider .et_pb_row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  /* align-items: stretch; */

  /* reference-like height */
  min-height: 620px;
  /* width: var(--berg-container-max) !important; */
}

/* Reset Divi gutters inside this component */
#product-line-slider .et_pb_column{
  margin: 0 !important;
  padding: 0 !important;
}

/* Two columns */
#product-line-slider .et_pb_column{
  width: 50% !important;
}

/* ---------- LEFT: content block ---------- */
#product-line-slider .product-line-title,
#product-line-slider .product-line-text{
  margin-bottom: 0 !important;
}

#product-line-slider .et_pb_column:first-child{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px !important;
  position: relative;
  z-index: 1; /* above the sage band */
  flex-direction: column;
}

#product-line-slider .et_pb_column:first-child .et_pb_module{
  margin-bottom: 0 !important;
}

/* constrain text width like the reference */
#product-line-slider .et_pb_column:first-child > .et_pb_module{
  max-width: 520px;
  width: 100%;
}

/* Title styling */
#product-line-slider .product-line-title h1,
#product-line-slider .product-line-title h2,
#product-line-slider .product-line-title h3{
  font-family: var(--berg-font-primary) !important;
  font-weight: var(--berg-weight-normal) !important;
  color: var(--berg-text-muted) !important;
  letter-spacing: var(--berg-tracking-normal) !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: var(--berg-leading-tight) !important;
  margin: 0 0 var(--berg-space-md) 0 !important;
}

/* Body styling */
#product-line-slider .product-line-text,
#product-line-slider .product-line-text p{
  font-family: var(--berg-font-primary) !important;
  font-weight: var(--berg-weight-normal) !important;
  color: var(--berg-text-primary) !important;
  font-size: var(--berg-text-base) !important;
  line-height: var(--berg-leading-relaxed) !important;
  margin: 0 0 var(--berg-space-xl) 0 !important;
}

/* Ensure the button looks like your theme primary */
#product-line-slider .et_pb_button_module_wrapper{
  margin-top: 0 !important;
}

/* (Optional safety) If you forgot to add .berg-btn-primary, still style it nicely */
#product-line-slider .berg-btn-primary:hover::after{
  display: none !important;
  transition: none !important;
}

/* ---------- RIGHT: image-only slider ---------- */
/* =========================================================
   Product Line Slider – Fix crop ratio + arrows on top
   (ONLY slider + arrows changes below)
   ========================================================= */

 #product-line-slider  .et_pb_slider_container_inner{
  width: 80% !important;
 }
/* 1) Keep the slider viewport at the top and centered in the right column */
/* Make the slider itself the crop viewport */
#product-line-slider .product-line-slider{
  width: min(726px, 100%);
  aspect-ratio: 121 / 141;   /* 726x846 */
  height: auto;

  position: relative;        /* arrows anchor here */
  overflow: hidden;          /* crop happens here */


  /* optional: if centered in the column, use:  */
     margin: 0 auto;

}

#product-line-slider .product-line-slider .et_pb_slider{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative;
  background: transparent !important;
}
#product-line-slider .product-line-slider .et_pb_slide{
  padding: 0 !important;
}

/* Ensure slides fill the viewport */
#product-line-slider .product-line-slider .et_pb_slides,
#product-line-slider .product-line-slider .et_pb_slide{
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
}

/* Cover crop for background-slide images */
#product-line-slider .product-line-slider .et_pb_slide{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* If Divi outputs <img> inside slide, force cover crop */
#product-line-slider .product-line-slider .et_pb_slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hide dots */
#product-line-slider .product-line-slider .et-pb-controllers{
  display: none !important;
}

/* ✅ Arrows: bottom-right, overlapping image */
#product-line-slider .product-line-slider .et-pb-arrow-prev,
#product-line-slider .product-line-slider .et-pb-arrow-next{
  position: absolute;
  top: auto !important;
  bottom: 24px !important;     /* adjust to taste */
  transform: none !important;

  color: var(--berg-text-primary) !important;
  opacity: 0.75;
  font-size: 56px !important;
  z-index: 10;

  /* helps legibility on dark/light areas */
  text-shadow: 0 1px 18px rgba(0,0,0,.22);
  /* transition: opacity var(--berg-transition-fast), transform var(--berg-transition-fast); */
}

#product-line-slider .et-pb-slider-arrows{
  position: relative;
  bottom: 90px;
}

#product-line-slider .product-line-slider .et-pb-arrow-next{
  right: 160px !important;
  left: auto !important;
}

#product-line-slider .product-line-slider .et-pb-arrow-prev{
  right: 220px !important;      /* spacing between arrows */
  left: auto !important;
}

#product-line-slider .product-line-slider .et-pb-arrow-prev:hover,
#product-line-slider .product-line-slider .et-pb-arrow-next:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  #product-line-slider .et_pb_row{
    flex-direction: column;
    min-height: 0;
  }

  #product-line-slider .et_pb_column{
    width: 100% !important;
  }

  /* Put image first on tablet/mobile (optional but usually nicer) */
  #product-line-slider .et_pb_column:last-child{ order: 1; }
  #product-line-slider .et_pb_column:first-child{ order: 2; }

  #product-line-slider .product-line-slider .et_pb_slider,
  #product-line-slider .product-line-slider .et_pb_slides,
  #product-line-slider .product-line-slider .et_pb_slide{
    min-height: 420px;
  }

  #product-line-slider::after{
    height: 120px;
  }
}

@media (max-width: 767px){
  #product-line-slider .et_pb_column:first-child{
    padding: 28px 18px !important;
  }

  /* keep mobile clean: hide arrows */
  #product-line-slider .product-line-slider .et-pb-arrow-prev,
  #product-line-slider .product-line-slider .et-pb-arrow-next{
    display: none !important;
  }
}