/**
 * Capri Watch Promo Banners - Frontend Styles
 */

/* ========================================
   Base Banner Styles
   ======================================== */

.cpw-banner-link {
    display: block;
    text-decoration: none;
}

.cpw-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.cpw-banner-desktop {
    display: block;
}

.cpw-banner-mobile {
    display: none;
}

@media (max-width: 768px) {
    .cpw-banner-desktop {
        display: none;
    }
    .cpw-banner-mobile {
        display: block;
    }
}

/* ========================================
   Carrello / Checkout Layout (50/50)
   ======================================== */

.cpw-banners-cart,
.cpw-banners-checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    clear: both;
}

.cpw-banners-cart.cpw-dual-banners .cpw-banner-col,
.cpw-banners-checkout.cpw-dual-banners .cpw-banner-col {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

.cpw-banners-cart.cpw-single-banner .cpw-banner-col,
.cpw-banners-checkout.cpw-single-banner .cpw-banner-col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .cpw-banners-cart,
    .cpw-banners-checkout {
        flex-direction: column;
    }

    .cpw-banners-cart .cpw-banner-col,
    .cpw-banners-checkout .cpw-banner-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   Shop / Archivi Layout (25/50/25)
   ======================================== */

.cpw-shop-layout {
    width: 100%;   
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: space-between;
    order: 3;
}

/* Entrambi i banner attivi: 25% - 50% - 25% */
.cpw-shop-layout.cpw-both-banners .cpw-shop-banner {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
}

.cpw-shop-layout.cpw-both-banners .cpw-shop-description {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

/* Solo Banner 1: 25% - 75% */
.cpw-shop-layout.cpw-only-banner1 .cpw-shop-banner-1 {
    flex: 0 0 calc(25% - 10px);
    max-width: calc(25% - 10px);
}

.cpw-shop-layout.cpw-only-banner1 .cpw-shop-description {
    flex: 0 0 calc(75% - 10px);
    max-width: calc(75% - 10px);
}

/* Solo Banner 2: 75% - 25% */
.cpw-shop-layout.cpw-only-banner2 .cpw-shop-description {
    flex: 0 0 calc(75% - 10px);
    max-width: calc(75% - 10px);
    order: 1;
}

.cpw-shop-layout.cpw-only-banner2 .cpw-shop-banner-2 {
    flex: 0 0 calc(25% - 10px);
    max-width: calc(25% - 10px);
    order: 2;
}

/* Nessun banner: 100% testo */
.cpw-shop-layout.cpw-no-banners .cpw-shop-description {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Mobile: tutto in colonna */
@media (max-width: 768px) {
    .cpw-shop-layout {
        flex-direction: column;
    }

    .cpw-shop-layout .cpw-shop-banner,
    .cpw-shop-layout .cpw-shop-description {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: initial !important;
    }

    .cpw-shop-layout .cpw-shop-banner-1 {
        order: 1 !important;
    }

    .cpw-shop-layout .cpw-shop-description {
        order: 2 !important;
    }

    .cpw-shop-layout .cpw-shop-banner-2 {
        order: 3 !important;
    }
}

/* ========================================
   Shop Description Styling
   ======================================== */

.cpw-shop-description {
    line-height: 1.6;
}

.cpw-shop-description p:last-child {
    margin-bottom: 0;
}