/* General container styling */
.cbsp-container {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    padding: 20px 0;
}

/* Grid row */
.cbsp-grid-layout-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    
}

/* Product Column */
.cbsp-product-column {
    /*background-color: #fff;*/
    padding: 20px;
    text-align: center;
    /*border: 1px solid #ddd;*/
    border-radius: 8px;
    /*transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
}

.cbsp-product-column:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

/* Product Image */
.cbsp-product-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* Product Title */
.cbsp-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.cbsp-title:hover {
    text-decoration: underline;
}

/* Price Section */
.cbsp-price, .cbsp-currency-symbol {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 10px;
}

/* View Product Button */
.cbsp-btn {
    background-color: #000;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    text-transform: unset;
    transition: background-color 0.3s ease;
    border: none;
}

.cbsp-btn:hover {
    background-color: #444;
}

/* Responsive breakpoints */

/* Small devices (mobile phones, less than 576px) */
@media (max-width: 575.98px) {
    .cbsp-grid-layout-row .col-1, 
    .cbsp-grid-layout-row .col-2, 
    .cbsp-grid-layout-row .col-3, 
    .cbsp-grid-layout-row .col-4, 
    .cbsp-grid-layout-row .col-5, 
    .cbsp-grid-layout-row .col-6, 
    .cbsp-grid-layout-row .col-7, 
    .cbsp-grid-layout-row .col-8, 
    .cbsp-grid-layout-row .col-9, 
    .cbsp-grid-layout-row .col-10, 
    .cbsp-grid-layout-row .col-11, 
    .cbsp-grid-layout-row .col-12 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Medium devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .cbsp-grid-layout-row .col-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }
    .cbsp-grid-layout-row .col-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
    .cbsp-grid-layout-row .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .cbsp-grid-layout-row .col-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .cbsp-grid-layout-row .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Large devices (desktops, 768px and up) */
@media (min-width: 768px) {
    .cbsp-grid-layout-row .col-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }
    .cbsp-grid-layout-row .col-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
    .cbsp-grid-layout-row .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .cbsp-grid-layout-row .col-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .cbsp-grid-layout-row .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .cbsp-grid-layout-row .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .cbsp-grid-layout-row .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .cbsp-grid-layout-row .col-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .cbsp-grid-layout-row .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}