/* Container - centers content with max-width */
.builder-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Row - flex container for columns */
.builder-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   GAP FIX — use padding-based gutters instead
   of CSS gap (which breaks percentage columns).

   PHP generation — replace your gap style with:

   $half   = $gap / 2;
   $style  = "#sec-{$id} > .builder-row { margin-left:-{$half}px; margin-right:-{$half}px; }";
   $style .= "#sec-{$id} > .builder-row > * { padding-left:{$half}px; padding-right:{$half}px; box-sizing:border-box; }";
   ============================================ */

/* Safety rule — every direct child of a builder-row
   must include its padding in its percentage width   */
.builder-row > * {
    box-sizing: border-box;
}

.builder-col-12 {
    display: block;
    width: 100%;
}
.builder-col-1,
.builder-col-2,
.builder-col-3,
.builder-col-4,
.builder-col-5,
.builder-col-6,
.builder-col-7,
.builder-col-8,
.builder-col-9,
.builder-col-10,
.builder-col-11{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
/* Columns */
.builder-col-1  { flex: 0 0 8.333%;   max-width: 8.333%; }
.builder-col-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
.builder-col-3  { flex: 0 0 25%;      max-width: 25%; }
.builder-col-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
.builder-col-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
.builder-col-6  { flex: 0 0 50%;      max-width: 50%; }
.builder-col-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
.builder-col-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
.builder-col-9  { flex: 0 0 75%;      max-width: 75%; }
.builder-col-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
.builder-col-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
.builder-col-12 {     max-width: 100%; }

/* Fullwidth row - no max-width constraint */
.builder-row-fullwidth {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Builder section wrapper */
.builder-section {
    width: 100%;
    box-sizing: border-box;
}

/* Slider fullwidth fix */
.builder-slider-wrapper {
    width: 100%;
    overflow: hidden;
}
/** builder-card-container **/
.builder-card-container{
    position: relative;
}
/** product-carousel **/
.product-carousel,
.category-carousel,
.brand-carousel,
.custom-carousel{
    width: 100%;
    max-width: 100%;
}
.product-carousel .swiper-wrapper,
.category-carousel .swiper-wrapper,
.custom-carousel .swiper-wrapper,
.brand-carousel .swiper-wrapper {
    align-items: stretch;
}

.product-carousel .swiper-slide,
.category-carousel .swiper-slide,
.custom-carousel .swiper-slide,
.brand-carousel .swiper-slide {
    height: auto;
    display: flex;
}

.product-carousel .swiper-slide > *,
.category-carousel .swiper-slide > *,
.custom-carousel .swiper-slide > *,
.brand-carousel .swiper-slide > * {
    flex: 1;
}
.header{
    position: static !important;
}

.builder-column-direction>.builder-row{
    flex-direction: column;
}
#category .product-list{
    width: 100%;
}
#index #wrapper {
    padding-top: 0 !important;
}
/* ============================================
   Responsive breakpoints
   ============================================ */
@media (max-width: 768px) {
    .builder-col-1,
    .builder-col-2,
    .builder-col-3,
    .builder-col-4,
    .builder-col-5,
    .builder-col-6,
    .builder-col-7,
    .builder-col-8,
    .builder-col-9,
    .builder-col-10,
    .builder-col-11,
    .builder-col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Remove horizontal gutters on mobile to avoid extra padding 
    .builder-row > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }*/
    .builder-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Tablet columns */
    .builder-tablet-col-1  { flex: 0 0 8.333%!important;   max-width: 8.333%!important; }
    .builder-tablet-col-2  { flex: 0 0 16.666%!important;  max-width: 16.666%!important; }
    .builder-tablet-col-3  { flex: 0 0 25%!important;      max-width: 25%!important; }
    .builder-tablet-col-4  { flex: 0 0 33.333%!important;  max-width: 33.333%!important; }
    .builder-tablet-col-5  { flex: 0 0 41.666%!important;  max-width: 41.666%!important; }
    .builder-tablet-col-6  { flex: 0 0 50%!important;      max-width: 50%!important; }
    .builder-tablet-col-7  { flex: 0 0 58.333%!important;  max-width: 58.333%!important; }
    .builder-tablet-col-8  { flex: 0 0 66.666%!important;  max-width: 66.666%!important; }
    .builder-tablet-col-9  { flex: 0 0 75%!important;      max-width: 75%!important; }
    .builder-tablet-col-10 { flex: 0 0 83.333%!important;  max-width: 83.333%!important; }
    .builder-tablet-col-11 { flex: 0 0 91.666%!important;  max-width: 91.666%!important; }
    .builder-tablet-col-12 { flex: 0 0 100%!important;     max-width: 100%!important; }
}

@media (max-width: 572px) {
    .builder-tablet-col-1,
    .builder-tablet-col-2,
    .builder-tablet-col-3,
    .builder-tablet-col-4,
    .builder-tablet-col-5,
    .builder-tablet-col-6,
    .builder-tablet-col-7,
    .builder-tablet-col-8,
    .builder-tablet-col-9,
    .builder-tablet-col-10,
    .builder-tablet-col-11,
    .builder-tablet-col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Mobile columns */
    .builder-mobile-col-1  { flex: 0 0 8.333%!important;   max-width: 8.333%!important; }
    .builder-mobile-col-2  { flex: 0 0 16.666%!important;  max-width: 16.666%!important; }
    .builder-mobile-col-3  { flex: 0 0 25%!important;      max-width: 25%!important; }
    .builder-mobile-col-4  { flex: 0 0 33.333%!important;  max-width: 33.333%!important; }
    .builder-mobile-col-5  { flex: 0 0 41.666%!important;  max-width: 41.666%!important; }
    .builder-mobile-col-6  { flex: 0 0 50%!important;      max-width: 50%!important; }
    .builder-mobile-col-7  { flex: 0 0 58.333%!important;  max-width: 58.333%!important; }
    .builder-mobile-col-8  { flex: 0 0 66.666%!important;  max-width: 66.666%!important; }
    .builder-mobile-col-9  { flex: 0 0 75%!important;      max-width: 75%!important; }
    .builder-mobile-col-10 { flex: 0 0 83.333%!important;  max-width: 83.333%!important; }
    .builder-mobile-col-11 { flex: 0 0 91.666%!important;  max-width: 91.666%!important; }
    .builder-mobile-col-12 { flex: 0 0 100%!important;     max-width: 100%!important; }
}