.smart-container ul.products,
.smart-layout-wrapper {
    display: grid;
}

/* MOBILE (default) */
.cols-mobile-1 { grid-template-columns: repeat(1, 1fr) !important; }
.cols-mobile-2 { grid-template-columns: repeat(2, 1fr) !important; }
.cols-mobile-3 { grid-template-columns: repeat(3, 1fr) !important; }
.cols-mobile-4 { grid-template-columns: repeat(4, 1fr) !important; }
.cols-mobile-5 { grid-template-columns: repeat(5, 1fr) !important; }
.cols-mobile-6 { grid-template-columns: repeat(6, 1fr) !important; }
.cols-mobile-7 { grid-template-columns: repeat(7, 1fr) !important; }
.cols-mobile-8 { grid-template-columns: repeat(8, 1fr) !important; }
.cols-mobile-9 { grid-template-columns: repeat(9, 1fr) !important; }
.cols-mobile-10 { grid-template-columns: repeat(10, 1fr) !important; }
.cols-mobile-11 { grid-template-columns: repeat(11, 1fr) !important; }
.cols-mobile-12 { grid-template-columns: repeat(12, 1fr) !important; }

/* GAP para MOBILE (default) */
.gap-mobile-0 { gap: 0px !important; }
.gap-mobile-5 { gap: 5px !important; }
.gap-mobile-10 { gap: 10px !important; }
.gap-mobile-15 { gap: 15px !important; }
.gap-mobile-20 { gap: 20px !important; }
.gap-mobile-25 { gap: 25px !important; }
.gap-mobile-30 { gap: 30px !important; }
.gap-mobile-35 { gap: 35px !important; }
.gap-mobile-40 { gap: 40px !important; }
.gap-mobile-45 { gap: 45px !important; }
.gap-mobile-50 { gap: 50px !important; }

/* TABLET ≥ 768px */
@media (min-width: 768px) {
    .cols-tablet-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .cols-tablet-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .cols-tablet-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .cols-tablet-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .cols-tablet-5 { grid-template-columns: repeat(5, 1fr) !important; }
    .cols-tablet-6 { grid-template-columns: repeat(6, 1fr) !important; }
    .cols-tablet-7 { grid-template-columns: repeat(7, 1fr) !important; }
    .cols-tablet-8 { grid-template-columns: repeat(8, 1fr) !important; }
    .cols-tablet-9 { grid-template-columns: repeat(9, 1fr) !important; }
    .cols-tablet-10 { grid-template-columns: repeat(10, 1fr) !important; }
    .cols-tablet-11 { grid-template-columns: repeat(11, 1fr) !important; }
    .cols-tablet-12 { grid-template-columns: repeat(12, 1fr) !important; }
    
    .gap-tablet-0 { gap: 0px !important; }
    .gap-tablet-5 { gap: 5px !important; }
    .gap-tablet-10 { gap: 10px !important; }
    .gap-tablet-15 { gap: 15px !important; }
    .gap-tablet-20 { gap: 20px !important; }
    .gap-tablet-25 { gap: 25px !important; }
    .gap-tablet-30 { gap: 30px !important; }
    .gap-tablet-35 { gap: 35px !important; }
    .gap-tablet-40 { gap: 40px !important; }
    .gap-tablet-45 { gap: 45px !important; }
    .gap-tablet-50 { gap: 50px !important; }
}

/* LAPTOP ≥ 1200px */
@media (min-width: 1200px) {
    .cols-laptop-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .cols-laptop-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .cols-laptop-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .cols-laptop-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .cols-laptop-5 { grid-template-columns: repeat(5, 1fr) !important; }
    .cols-laptop-6 { grid-template-columns: repeat(6, 1fr) !important; }
    .cols-laptop-7 { grid-template-columns: repeat(7, 1fr) !important; }
    .cols-laptop-8 { grid-template-columns: repeat(8, 1fr) !important; }
    .cols-laptop-9 { grid-template-columns: repeat(9, 1fr) !important; }
    .cols-laptop-10 { grid-template-columns: repeat(10, 1fr) !important; }
    .cols-laptop-11 { grid-template-columns: repeat(11, 1fr) !important; }
    .cols-laptop-12 { grid-template-columns: repeat(12, 1fr) !important; }
    
    .gap-laptop-0 { gap: 0px !important; }
    .gap-laptop-5 { gap: 5px !important; }
    .gap-laptop-10 { gap: 10px !important; }
    .gap-laptop-15 { gap: 15px !important; }
    .gap-laptop-20 { gap: 20px !important; }
    .gap-laptop-25 { gap: 25px !important; }
    .gap-laptop-30 { gap: 30px !important; }
    .gap-laptop-35 { gap: 35px !important; }
    .gap-laptop-40 { gap: 40px !important; }
    .gap-laptop-45 { gap: 45px !important; }
    .gap-laptop-50 { gap: 50px !important; }
}

/* DESKTOP ≥ 1500px */
@media (min-width: 1500px) {
    .cols-desktop-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .cols-desktop-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .cols-desktop-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .cols-desktop-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .cols-desktop-5 { grid-template-columns: repeat(5, 1fr) !important; }
    .cols-desktop-6 { grid-template-columns: repeat(6, 1fr) !important; }
    .cols-desktop-7 { grid-template-columns: repeat(7, 1fr) !important; }
    .cols-desktop-8 { grid-template-columns: repeat(8, 1fr) !important; }
    .cols-desktop-9 { grid-template-columns: repeat(9, 1fr) !important; }
    .cols-desktop-10 { grid-template-columns: repeat(10, 1fr) !important; }
    .cols-desktop-11 { grid-template-columns: repeat(11, 1fr) !important; }
    .cols-desktop-12 { grid-template-columns: repeat(12, 1fr) !important; }

    .gap-desktop-0 { gap: 0px !important; }
    .gap-desktop-5 { gap: 5px !important; }
    .gap-desktop-10 { gap: 10px !important; }
    .gap-desktop-15 { gap: 15px !important; }
    .gap-desktop-20 { gap: 20px !important; }
    .gap-desktop-25 { gap: 25px !important; }
    .gap-desktop-30 { gap: 30px !important; }
    .gap-desktop-35 { gap: 35px !important; }
    .gap-desktop-40 { gap: 40px !important; }
    .gap-desktop-45 { gap: 45px !important; }
    .gap-desktop-50 { gap: 50px !important; }
}