Free gifts grid code

/* --- Început Carusel CSS pentru Cadouri --- */

/* 1. Transformăm containerul principal al tabelului într-un container scrollabil */
.wd-cart-free-gifts .elementor-widget-container {
    overflow-x: auto; /* Permite scroll orizontal */
    -webkit-overflow-scrolling: touch; /* Scroll fin pe iOS */
    padding-bottom: 20px; /* Spațiu pentru scrollbar ca să nu se suprapună */
}

/* 2. Adăugăm proprietăți de "snap" pentru o experiență de carusel nativ */
.wd-cart-free-gifts .elementor-widget-container {
    scroll-snap-type: x mandatory;
}

/* 3. Forțăm tabelul să ocupe mult mai mult spațiu pe orizontală */
.wd-cart-free-gifts .wd-fg-table {
    width: 100%; /* Lățimea inițială */
    display: table;
    border-collapse: separate;
    border-spacing: 15px 0; /* Adăugăm spațiu între carduri */
}

/* 4. Transformăm fiecare RÂND (tr) al tabelului într-un CARD de carusel */
.wd-cart-free-gifts .wd-fg-table tr {
    display: table-cell; /* Forțăm rândurile să stea unul lângă altul */
    vertical-align: top;
    width: 1%; /* Necesar pentru ca 'display: table-cell' să funcționeze corect */
    scroll-snap-align: start; /* Aliniază fiecare card la începutul containerului la scroll */
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px; /* Colțuri rotunjite pentru aspect de card */
    padding: 15px; /* Spațiu interior pentru card */
    text-align: center; /* Aliniem conținutul pe centru */
}

/* 5. Facem ca celulele din interior (imagine, nume, buton) să stea una sub alta */
.wd-cart-free-gifts .wd-fg-table td {
    display: block;
    width: auto !important;
    border: none; /* Scoatem bordurile default ale celulelor */
    padding: 5px 0;
}

/* 6. Butonul să ocupe toată lățimea cardului */
.wd-cart-free-gifts .product-btn .button {
    width: 100%;
}

/* === RESPONSIVE === */

/* --- DESKTOP (4 produse vizibile) --- */
/* Pe desktop, lățimea unui card este ~25% minus spațierea */
.wd-cart-free-gifts .wd-fg-table tr {
    min-width: calc(25% - 20px);
}


/* --- TABLETĂ (2.5 produse vizibile) --- */
@media (max-width: 1024px) {
    .wd-cart-free-gifts .wd-fg-table tr {
        min-width: calc(100% / 2.5);
    }
}

/* --- MOBIL (1.5 produse vizibile) --- */
@media (max-width: 767px) {
    .wd-cart-free-gifts .wd-fg-table tr {
        min-width: calc(100% / 1.5);
    }
}

/* --- Sfârșit Carusel CSS pentru Cadouri --- */