/* ==================================
   Product Detail Page
================================== */

.product-detail-section {
    padding-top: 1.5rem !important;
    background:
        linear-gradient(
            135deg,
            rgba(108,61,214,.03),
            rgba(232,62,140,.02),
            rgba(255,154,61,.03)
        );

    min-height: 100vh;
}

/* ==================================
   Gallery
================================== */

.product-gallery {
    background:white;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    height:100%;
}

.product-gallery img {
    border-radius: 16px;
}

.carousel-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ==================================
   Thumbnails
================================== */

.product-thumbnails{

    display:flex;

    justify-content:center;

    gap:12px;

    padding:20px;

    border-top:1px solid rgba(0,0,0,.06);
}

.product-thumb{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

    border:2px solid transparent;
}

.product-thumb:hover{

    border-color:var(--primary-color);

    transform:translateY(-2px);
}

/*.product-thumb.active{*/
/*    border:2px solid var(--primary-color);*/
/*}*/

.product-thumb.active,
.product-thumb:hover {
    border-color: var(--primary-color);
}

/* ==================================
   Product Info
================================== */

.product-title-detail {

    font-size: 3rem;

    font-weight: 800;

    color: var(--dark-color);

    line-height: 1.1;

    margin-top: 15px;

    margin-bottom: 15px;
}

.product-short-description {

    color: var(--text-muted);

    font-size: 1.1rem;

    line-height: 1.8;

    margin-bottom: 25px;
}

/* ==================================
   Price
================================== */

.product-price-box {

    margin-bottom: 30px;
}

.product-price-detail {

    font-size: 3rem;

    font-weight: 800;

    letter-spacing: -1px;

    color: var(--primary-color);

    line-height: 1;
}

.product-price-detail.consult {

    font-size: 2rem;
}

/* ==================================
   Buttons
================================== */

.btn-catalog {

    background: white;

    color: var(--primary-color);

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

    padding: 14px 24px;

    border-radius: 14px;

    font-weight: 600;

    transition: .3s;
}

.btn-catalog:hover {

    background: var(--primary-color);

    color: white;
}

/* ==================================
   Alert
================================== */

.product-alert {

    margin-top: 20px;

    padding: 16px 20px;

    border-radius: 14px;

    background:
        rgba(108,61,214,.06);

    border:
        1px solid rgba(108,61,214,.12);

    color: var(--primary-color);

    font-weight: 600;
}

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

.product-description-card {

    background: white;

    border-radius: 20px;

    padding: 30px;

    margin-top: 30px;

    border-left: 4px solid var(--primary-color);

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);
}

.product-description-card h5 {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 20px;

    color: var(--dark-color);
}

.product-description-card p {

    line-height: 1.9;

    color: #444;
}

/* ==================================
   Features
================================== */

.product-features {

    margin-top: 20px;

    padding-left: 20px;
}

.product-features li {

    margin-bottom: 10px;

    color: #555;

    line-height: 1.6;
}

/* ==================================
   Related Products
================================== */

.related-products {

    margin-top: 80px;
}

.related-products-title {

    text-align: center;

    margin-bottom: 50px;
}

.related-products-title h2 {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--dark-color);
}

.related-products-title p {

    color: var(--text-muted);
}

/* ==================================
   Breadcrumb
================================== */

.product-detail-section .breadcrumb {

    margin-bottom: 2rem;
}

/* ==================================
   Carousel Controls
================================== */

.carousel-control-prev-icon,
.carousel-control-next-icon {

    background-color: rgba(0,0,0,.3);

    border-radius: 50%;

    padding: 20px;
}

.hero-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-benefits span{
    white-space:nowrap;
}
/* ==================================
   Responsive
================================== */

@media(max-width:991px){

    .product-title-detail{
        font-size:2.5rem;
    }

    .product-price-detail{
        font-size:2.5rem;
    }

    .carousel-item img{
        max-height:500px;
    }

    .product-gallery{
        margin-bottom:20px;
    }
}

@media(max-width:768px){

    /* Layout */

    .product-detail-section{
        padding-top:10px !important;
        padding-bottom:40px;
    }

    .product-detail-section .breadcrumb{
        margin-bottom:1rem;
        font-size:.8rem;
    }

    /* Galeria */

    .product-gallery{
        border-radius:20px;
    }

    .carousel-item img{
        max-height:420px;
        border-radius:0;
    }

    /* Miniaturas */

    .product-thumbnails{

        justify-content:flex-start;

        flex-wrap:nowrap;

        overflow-x:auto;

        overflow-y:hidden;

        padding:15px;

        gap:10px;

        scrollbar-width:none;
    }

    .product-thumbnails::-webkit-scrollbar{
        display:none;
    }

    .product-thumb{

        flex:0 0 70px;

        width:70px;

        height:70px;
    }

    /* Informações */

    .category-badge{
        font-size:.8rem;
    }

    .product-title-detail{

        font-size:2rem;

        line-height:1.1;

        margin-bottom:10px;
    }

    .product-short-description{

        font-size:1rem;

        line-height:1.6;

        margin-bottom:20px;
    }

    .product-price-box{
        margin-bottom:20px;
    }

    .product-price-detail{

        font-size:2.2rem;
    }

    .product-price-detail.consult{

        font-size:1.6rem;
    }

    /* Botões */

    .btn-sonhos,
    .btn-catalog{

        width:100%;

        text-align:center;
    }

    /* Benefícios */

    .hero-benefits{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        margin-top:20px;
    }

    .hero-benefits span{

        white-space:normal;
    }

    /* Alert */

    .product-alert{

        font-size:.95rem;

        padding:14px 16px;
    }

    /* Card Personalização */

    .product-custom-card{

        padding:24px;

        border-radius:20px;
    }

    .product-custom-card h4{

        font-size:1.6rem;
    }

    .product-custom-card p{

        font-size:.95rem;
    }

    /* Descrição */

    .product-description-card{

        padding:24px;

        margin-top:20px;
    }

    .product-description-card h5{

        font-size:1.3rem;
    }

    .product-description-card p{

        font-size:.95rem;

        line-height:1.8;
    }

    .product-features{

        padding-left:18px;
    }

    /* Carrossel */

    .carousel-control-prev,
    .carousel-control-next{
        width:40px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon{

        padding:15px;
    }

    /* Relacionados */

    .related-products{

        margin-top:50px;
    }

    .related-products-title{

        margin-bottom:30px;
    }

    .related-products-title h2{

        font-size:1.8rem;
    }
}

@media(max-width:576px){

    .product-title-detail{

        font-size:1.8rem;
    }

    .product-price-detail{

        font-size:2rem;
    }

    .carousel-item img{

        max-height:350px;
    }

    .product-thumb{

        width:60px;

        height:60px;

        flex:0 0 60px;
    }

    .product-custom-card{

        padding:20px;
    }

    .product-description-card{

        padding:20px;
    }

    .hero-benefits{

        font-size:.95rem;
    }
}