/*==================================================
09 PRODUCT RECOMMENDATIONS
==================================================*/

.cl-recommendations{
    padding:35px 0;
    background:transparent;
}

/*==================================
Section Heading
==================================*/

.cl-section-heading{
    text-align:center;
    margin-bottom:28px;
}

.cl-section-heading h2{
    margin:0;
    font-size:42px;
    line-height:1.2;
    font-weight:800;
    color:var(--cl-landing-title-color,#111111);
}

@media(max-width:767px){

    .cl-section-heading{
        margin-bottom:20px;
    }

    .cl-section-heading h2{
        font-size:28px;
    }

}



/*==============================
Card
==============================*/

.cl-recommendation-card{
    display:flex;
    flex-direction:column;

    width:100%;

    height:100%;
    background:#fff;
    border:1px solid #f3dce6;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(16,24,40,.08);
    transition:.3s;
}

.cl-recommendation-card:hover{
    transform:translateY(-5px);
    border-color:var(--cl-button-bg);
    box-shadow:0 18px 45px rgba(16,24,40,.12);
}

/*==================================
Header
==================================*/

.cl-rec-header{
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;

    border-bottom:1px solid #f3f3f3;
}

.cl-rec-header-image{

    flex:0 0 68px;

}

.cl-rec-header-image img{

    width:68px;

    height:68px;

    border-radius:12px;

    object-fit:cover;

    display:block;

    border:1px solid #ececec;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.cl-rec-header-info{

    flex:1;

    min-width:0;

}

.cl-rec-header-info h3{

    margin:0 0 6px;

    font-size:18px;

    line-height:1.4;

    font-weight:700;

    color:var(--cl-text);

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:4;

    overflow:hidden;

}

.cl-rec-header-info .cl-price{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:var(--cl-primary);

}
/*==============================
Image
==============================*/


/*==============================
Content
==============================*/

/*==============================
Tablet
==============================*/




/*==================================
Recommendation Body
==================================*/

/*==================================
Recommendation Image
==================================*/

.cl-rec-gallery{
    width:100%;
    aspect-ratio:1/1;
    border-radius:16px;
    overflow:hidden;
    background:#fafafa;
}

.cl-rec-gallery img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.cl-recommendation-card:hover .cl-rec-gallery img{

    transform:scale(1.04);

}

.cl-recommendation-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:24px;

    align-items:stretch;

}

.cl-recommendation-grid.cl-rec-single{

    grid-template-columns:1fr;

}

@media(max-width:767px){

    .cl-recommendation-grid{

        grid-template-columns:1fr;

        gap:16px;

    }

}



.cl-rec-gallery .splide__arrow{
    width:36px;
    height:36px;
}

.cl-rec-gallery .splide__pagination{
    bottom:10px;
}

.cl-rec-gallery .splide__track{

    overflow:hidden;

    height:100%;

}

.cl-rec-gallery,
.cl-rec-gallery .splide,
.cl-rec-gallery .splide__track,
.cl-rec-gallery .splide__list,
.cl-rec-gallery .splide__slide{
    height:100%;
}

.cl-rec-gallery .splide__slide{
    opacity:.45;
    transition:.3s;
}

.cl-rec-gallery .splide__slide.is-active{
    opacity:1;
}

.cl-rec-gallery .splide__list{

    height:100%;

    align-items:stretch;

}

.cl-rec-gallery .splide__slide{

    display:flex;

    padding:0;

}

.cl-rec-gallery .splide__slide img{

    flex:1;

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
Description
==================================*/

.cl-rec-description{

    margin-bottom:10px;

    font-size:22px;

    line-height:1.5;

     font-weight:400;      /* Regular */

    color:var(--cl-muted);

    display:block;
    overflow:visible;

}

.cl-rec-description p{

    margin:0 0 10px;

}

.cl-rec-description p:last-child{

    margin-bottom:0;

}

/*==================================
Lens Options
==================================*/

.cl-rec-options{

    margin-bottom:10px;

}

.cl-rec-footer{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:auto;

}

.cl-rec-qty-wrap{

    display:flex;

    align-items:center;

    border:1px solid #e5e5e5;

    border-radius:10px;

    overflow:hidden;

    height:42px;

}


/*==================================
Content Wrapper
==================================*/

.cl-rec-content{

    display:flex;
    flex-direction:column;

    gap:20px;

    padding:20px;

}

.cl-rec-top{

    display:grid;
    grid-template-columns:320px 1fr;

    gap:20px;

    align-items:start;

}

.cl-rec-gallery{
    width:100%;
    max-width:320px;
    aspect-ratio:1/1;
}

.cl-rec-left{
    min-width:0;
}

.cl-rec-right{

    min-width:0;

    display:flex;
    flex-direction:column;

}

.cl-rec-qty{

    width:46px;

    height:38px;

    border:0;

    text-align:center;

    outline:none;

}

.cl-rec-qty-minus,
.cl-rec-qty-plus{

    width:36px;

    height:38px;

    border:0;

    background:#f5f5f5;

    cursor:pointer;

    transition:.25s;

    font-size:20px;

    font-weight:700;

}

.cl-rec-qty-minus:hover,
.cl-rec-qty-plus:hover{

    background:#ececec;

}

.cl-rec-add{

    flex:1;

    height:42px;

    border:0;

    border-radius:10px;

    background:var(--cl-button-bg);

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.cl-rec-add:hover{

    transform:translateY(-1px);

    opacity:.95;

    box-shadow:0 10px 22px rgba(0,0,0,.15);

}

/* Hide Number Spinner */

.cl-rec-qty::-webkit-inner-spin-button,
.cl-rec-qty::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;

}

.cl-rec-qty{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:textfield;

}

/*==================================
Mobile
==================================*/

@media (max-width:767px){

    .cl-recommendations{
        padding:15px 0;
    }

    .cl-recommendation-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .cl-recommendation-card:hover{
        transform:none;
    }

    .cl-rec-header{
        padding:16px;
        gap:12px;
    }

    .cl-rec-header-image{
        flex:0 0 56px;
    }

    .cl-rec-header-image img{
        width:56px;
        height:56px;
    }

    .cl-rec-header-info h3{
        font-size:16px;
    }

    .cl-rec-header-info .cl-price{
        font-size:18px;
    }

    /* Keep desktop layout */
    .cl-rec-content{

    display:flex;
    flex-direction:column;

    gap:16px;

    padding:16px;

}

.cl-rec-top{

    display:grid;

    grid-template-columns:42% 58%;

    gap:16px;

    align-items:start;

}

    .cl-rec-left,
    .cl-rec-right{
        min-width:0;
    }

    .cl-rec-gallery{

    width:100%;

    max-width:180px;

    margin:0 auto;

    aspect-ratio:1/1;

}

    .cl-rec-description{

    font-size:12px;
    line-height:1.6;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:7;   /* 4 line */
    overflow:hidden;

}

    .cl-rec-options{
        margin-bottom:8px;
    }

    .cl-rec-footer{
        display:flex;
        gap:8px;
        margin-top:12px;
    }

    .cl-rec-qty-wrap{
        flex-shrink:0;
    }

    .cl-rec-add{
        flex:1;
        font-size:14px;
        height:40px;
    }

    .cl-rec-options{

    width:100%;

}

.cl-rec-footer{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:nowrap;

}

.cl-rec-add{

    flex:1;

    min-width:0;

}

}