/*==========================================
        LUXURY PRODUCTS SECTION
==========================================*/

.featured-products{
    padding:120px 0;
    background:linear-gradient(180deg,#faf9f5 0%,#ffffff 100%);
}

.section-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 80px;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    background:#fff3d9;
    color:var(--primary);
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:20px;
}

.section-header h2{
    font-size:52px;
    margin-bottom:20px;
    color:#222;
    line-height:1.2;
}

.section-header p{
    font-size:18px;
    color:#777;
}

/*================================*/

.luxury-product{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    background:#fff;

    border-radius:32px;

    padding:70px;

    margin-bottom:70px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    transition:.4s;

    overflow:hidden;

    position:relative;

}

.luxury-product:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 80px rgba(0,0,0,.12);

}

.reverse{

    direction:rtl;

}

.reverse>*{

    direction:ltr;

}

/*================================*/

.product-label{

    display:inline-block;

    background:#f8b400;

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

.product-content h2{

    font-size:48px;

    margin-bottom:15px;

    color:#222;

}

.stars{

    font-size:18px;

    margin-bottom:20px;

    color:#f8b400;

}

.stars span{

    color:#666;

    font-size:15px;

    margin-left:8px;

}

.product-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

    font-size:17px;

}

.product-content ul{

    list-style:none;

    margin-bottom:35px;

}

.product-content li{

    padding:10px 0;

    font-size:16px;

    color:#444;

}

/*================================*/

.price{

    font-size:42px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:35px;

}

.price .js-mrp{

    font-size:24px;

    color:#999;

    text-decoration:line-through;

    margin-left:12px;

}

/*================================*/

.buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.buy-btn{

    padding:16px 36px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#f8b400,#ffcc4d);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.buy-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(248,180,0,.35);

}

.outline-btn{

    padding:16px 36px;

    border:2px solid var(--primary);

    background:transparent;

    color:var(--primary);

    border-radius:50px;

    font-size:16px;

    cursor:pointer;

    transition:.35s;

}

.outline-btn:hover{

    background:var(--primary);

    color:#fff;

}

/*================================*/

.product-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.product-image img{

    width:100%;

    max-width:380px;

    transition:.6s;

    filter:drop-shadow(0 25px 50px rgba(0,0,0,.18));

}

/* Instagram-style hover swap: a second "back" photo (set from the Admin
   Panel's product gallery) fades in over the first on hover. If a product
   only has one photo, .hover-image is never added and nothing changes. */
.product-image .hover-image{

    position:absolute;

    inset:0;

    width:100%;

    max-width:380px;

    margin:auto;

    opacity:0;

    transition:opacity .35s ease;

}

.product-image:hover .hover-image{

    opacity:1;

}

.product-image:hover img:not(.hover-image){

    opacity:0;

}

.luxury-product:hover .product-image img{

    transform:scale(1.08) rotate(-4deg);

}

/*================================*/

@media(max-width:992px){

    .luxury-product{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

        padding:50px 30px;

    }

    /* Home page face wash block: show the image above the product info
       when the two columns stack (tablets and phones). */
    .image-first .product-content{

        order:2;

    }

    .image-first .product-image{

        order:1;

    }

    .reverse{

        direction:ltr;

    }

    .buttons{

        justify-content:center;

    }

    .section-header h2{

        font-size:40px;

    }

    .product-content h2{

        font-size:38px;

    }

}

@media(max-width:576px){

    .featured-products{

        padding:80px 0;

    }

    .luxury-product{

        border-radius:24px;

        padding:35px 20px;

    }

    .section-header h2{

        font-size:30px;

    }

    .product-content h2{

        font-size:30px;

    }

    .price{

        font-size:34px;

    }

    .buttons{

        flex-direction:column;

    }

    .buy-btn,

    .outline-btn{

        width:100%;

    }

}