/* ===== Fullwidth Wrapper ===== */
.chemstock-fullwidth-wrapper {
  position: relative;
  width: 100vw; /* fill full screen width */
  left: 50%;
  right: 50%;
  margin-left: -50vw; /* escape boxed container */
  margin-right: -50vw;
  margin-top: 5vw; /* desktop top margin */
  margin-bottom: 0; /* remove bottom gap */
  overflow: hidden;
  z-index: 2;
}

/* ===== Swiper Base ===== */
.chemstock-banner-carousel {
  width: 100%;
  height: auto;
  position: relative;
}

.chemstock-banner-carousel img {
  width: 100%;
  height: auto; /* maintain proportions */
  object-fit: contain; /* full image visible */
  display: block;
  box-shadow: none !important; /* no hover shadow */
  transition: none !important;
}

/* ===== Dots (Pagination) ===== */
.swiper-pagination {
  position: absolute;
  bottom: 2%; /* overlay dots on image */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.swiper-pagination-bullet {
  background: #f0f0f0;
  opacity: 0.8;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

.swiper-pagination-bullet-active {
  background: #27879a; /* Chemstock orange highlight */
  opacity: 1;
}

/* ===== Hide mobile/desktop carousel ===== */
.desktop-carousel {
  display: block;
}
.mobile-carousel {
  display: none;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .chemstock-fullwidth-wrapper {
    margin-top: 30vw; /* larger top margin for mobile */
  }

  .desktop-carousel {
    display: none;
  }

  .mobile-carousel {
    display: block;
  }

  .swiper-pagination {
    bottom: 3%; /* slightly higher dots on mobile */
  }
}