/* ==========================
   Modal
   ========================== */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:1000;
}

.modal-overlay.active{
    opacity:1;
    visibility:visible;
}
   
.modal{
    width:min(1100px,100%);
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    padding:2rem;
    position:relative;
}

.modal-content{
    width:min(1100px,92vw);

    background:#fff;
    border-radius:24px;
    padding:2.5rem;
    position:relative;
	animation:
        modalAppear .35s ease;
}

.modal-button{
    margin-top:1rem;
    width:100%;
}

.modal-close{
    position:absolute;
    top:24px;
    right:24px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:#f3f5f7;
    font-size:1.5rem;
    cursor:pointer;
    transition:.25s;
}

.modal-close:hover{
    background:var(--primary);
    color:#fff;
    transform:rotate(90deg);
}

@keyframes modalAppear{
    from{
        opacity:0;
        transform:
            translateY(24px)
            scale(.98);
    }
    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ==========================
   Product
   ========================== */
.product-modal{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:48px;
    align-items:start;
}

.product-info h2{
    font-size:2rem;
    margin-bottom:.5rem;
}

.product-collection{
    color:var(--primary);
    font-weight:600;
    margin-bottom:1.5rem;
}

.product-title{
    font-size:2rem;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.1;
    margin-bottom:1rem;
}

.product-description{
    color:#555;
    line-height:1.7;
}

.product-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-bottom:2rem;
}

.product-tag{
    background:#f4f7fb;
    padding:.6rem 1rem;
    border-radius:999px;
    font-size:.9rem;
}

.product-features{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-left:20px;
}

.product-info{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
	height:480px;
}

.product-info .btn{
    width:auto;
    min-width:260px;
    align-self:flex-start;
}

.product-actions{
    margin-top:auto;
	padding-top:1.2rem;
	padding-bottom:8px;
	display:flex;
    justify-content:center;
}

.collection-link{
    margin-top:1rem;
    color:var(--primary-dark);
    font-weight:600;
    opacity:0;
    transform:translateY(8px);
    transition:
        opacity .30s ease,
        transform .30s ease,
        color .30s ease;
	display:inline-flex;
    align-items:center;
    gap:.35rem;
}

.product-enter{
    opacity:0;
    transform:translateY(18px);
    animation:fadeCard .45s ease forwards;
}

.product-button{
    width:100%;
    height:60px;
    border:none;
    border-radius:999px;
    font-size:1.05rem;
    font-weight:700;
    cursor:pointer;
    color:white;
    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    transition:.3s;
}

.product-button:hover{
    transform:translateY(-3px);
    box-shadow:
        0 18px 35px rgba(34,199,232,.35);
}

.collection-card:hover .collection-link{
    opacity:1;
	gap:.7rem;
    transform:
        translateY(0);
}

.product-highlights{
    display:flex;
    flex-direction:column;
    gap:.8rem;
    padding:1.2rem 0;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
}

@keyframes fadeCard{
    to{
        opacity:1;
        transform:translateY(0);
    }
}


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

.gallery-thumbs{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.gallery-main{
	background:
		radial-gradient(
			circle,
			#202020 0%,
			#111 100%
		);
    border-radius:18px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:480px;
}

.gallery-main img{
    width:92%;
    height:92%;
    object-fit:contain;
	transition:
        opacity .18s ease,
        transform .18s ease;
}

.gallery-main img.is-changing{
    opacity:.15;
    transform:scale(.985);
}

.gallery-column{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:18px;
    align-items:start;
}
/* ==========================
   Thumb
   ========================== */

.thumb-image{
    width:92px;
    height:92px;
	opacity:.65;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    border:2px solid transparent;
    transition:.2s;
	transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.thumb-image:hover{
    border-color:var(--primary);
	opacity:1;
    transform:scale(1.05);
	transform:translateY(-3px);
    box-shadow:
        0 10px 20px rgba(0,0,0,.10);
}

.thumb-image.active{
	opacity:1;
    transform:scale(1.06);
    border-color:var(--primary);
	transform:translateY(-3px);
}

/* ==========================
   Highlight
   ========================== */
.highlight-item{
    padding:.1rem 0;
}


/* ==========================
   Responsivo
   ========================== */
@media(max-width:1000px){
	.product-modal{
	grid-template-columns:1fr;
	}

	.gallery-column{
	grid-template-columns:1fr;
	}

	.gallery-thumbs{
	flex-direction:row;
	justify-content:center;
	order:2;
	}

	.gallery-main{
	min-height:420px;
	}
}