/*
 * Consolidated PageBuilder Fix
 * Combines all PageBuilder slider/banner fixes into a single, conflict-free CSS file
 */

/* Base PageBuilder Slider Structure */


.pagebuilder-slider {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.pagebuilder-slider .pagebuilder-slide-wrapper {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden;

    /* Base background settings for all slides */
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* Base height settings */
    min-height: 500px !important;
    height: 70vh !important;
    max-height: 800px !important;
}

/* Tablet optimizations */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .pagebuilder-slider .pagebuilder-slide-wrapper {
        /* min-height: 400px !important;
        height: 65vh !important;
        max-height: 600px !important; */
    }
}

/* Ensure slide content covers properly */
.pagebuilder-slider .pagebuilder-slide-wrapper .pagebuilder-slide-wrapper {
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Overlay content positioning with proper z-index */
.pagebuilder-slider .pagebuilder-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

.pagebuilder-slider .pagebuilder-overlay.pagebuilder-poster-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    background: none !important;
}

/* Enhanced Slick Dots Styling */
.pagebuilder-slider .slick-dots {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
}

.pagebuilder-slider .slick-dots li {
    margin: 0 5px !important;
}

.pagebuilder-slider .slick-prev {
    left: 20px !important;
}

.pagebuilder-slider .slick-next {
    right: 20px !important;
}

/* Use simple arrows instead of Font Awesome */
.pagebuilder-slider .slick-prev:before {
    content: '‹' !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

.pagebuilder-slider .slick-prev:before {
    content: '' !important;
}

.pagebuilder-slider .slick-next:before {
    content: '' !important;
}

.pagebuilder-slider .pagebuilder-slide-wrapper{
  /* height: auto !important;
  aspect-ratio: 32 / 15; */
}


/* Mobile arrow adjustments */
@media screen and (max-width: 768px) {
    .pagebuilder-slider .slick-prev,
    .pagebuilder-slider .slick-next {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    .pagebuilder-slider .slick-prev {
        left: 10px !important;
    }

    .pagebuilder-slider .slick-next {
        right: 10px !important;
    }
}

@media (max-width: 640px) {
    .pagebuilder-slider .pagebuilder-slide-wrapper{
       background-size: contain !important;  /* หรือ cover ถ้าอยากเต็มจอ */
       background-position: center !important;
       background-repeat: no-repeat !important;
    }



    .pagebuilder-slider .pagebuilder-slide-wrapper {
        background-size: contain !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 32 / 15;
        min-height: clamp(160px, 47vw, 320px) !important;
    }


    .pagebuilder-slider .slick-dots {
      bottom: 30px !important;
    }

    .product-on-homepage{
        margin-top: 0px !important;
    }
  }

  @media (min-width: 641px) and (max-width: 1024px) {
    .pagebuilder-slider .pagebuilder-slide-wrapper {
      /* min-height: 360px !important;
      height: 50vh !important;
      max-height: 600px !important; */
    }
  }



.cms-index-index .benefits-of-benefits .action-btn-center .view-all {
    padding: 10px 40px 10px 40px !important;
}

.cms-index-index .double-power-secsion .contetn-brown .action-btn-center .view-all {
    padding: 10px 40px 10px 40px !important;
}