.product-page{

    display:grid;

    grid-template-columns:1fr 1.4fr 1fr;

    gap:80px;

    padding:60px 5%;

    align-items:start;

}

.product-details{

    position:sticky;

    top:100px;

}

.product-details h3{

    margin-bottom:30px;

    font-size:14px;

    letter-spacing:2px;

}

.product-details p{

    margin-bottom:20px;

    line-height:1.8;

    color:whitesmoke;

}

.product-details .shipping{
    color: gray;
}

/* ==========================================
   PRODUCT GALLERY
========================================== */

.product-gallery{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.gallery-container{

    position:relative;

    width:100%;

    max-width:750px;

}

.gallery-container img{

    width:100%;

    display:block;

    transition:opacity .35s ease;

    user-select:none;

}

/* Invisible Click Areas */

.gallery-zone{

    position:absolute;

    top:0;

    width:35%;

    height:100%;

    cursor:pointer;

    z-index:10;

}

.previous{

    left:0;

}

.next{

    right:0;

}

/* Arrows */

.gallery-zone::after{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    font-size:34px;

    color:white;

    opacity:0;

    transition:.25s;

}

.previous::after{

    content:"←";

    left:30px;

}

.next::after{

    content:"→";

    right:30px;

}

.gallery-zone:hover::after{

    opacity:1;

}

/* Counter */

.gallery-counter{

    position:absolute;

    bottom:25px;

    right:25px;

    background:rgba(0,0,0,.55);

    color:white;

    padding:8px 14px;

    font-size:14px;

    border-radius:20px;

    letter-spacing:1px;

}







.purchase-panel{

    position:sticky;

    top:100px;

}

.purchase-panel h1{

    font-size:32px;

    margin-bottom:10px;

}

.purchase-panel h2{

    margin-bottom:40px;

    font-weight:400;

}

.sizes{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-bottom:30px;

}

.sizes button{

    padding:14px;

    border:1px solid #ddd;

    background:#fff;

    cursor:pointer;

    transition:.3s ease;

}

.sizes button:hover{

    border-color:#111;
    background-color: gray;

}

.sizes button.active{

    background-color:#3A9605;
    border-color:#111;
    color:white;

}

.quantity{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:40px;

}

.quantity button{

    width:40px;

    height:40px;

    border:1px solid #ddd;

    background:#fff;

}

.quantity button:hover{
    background-color: gray;
    border-color:#111;

}


.add-cart{

    width:100%;

    padding:18px;

    background:#111;

    color:#fff;

    border:none;

    font-size:15px;

    letter-spacing:2px;

    cursor:pointer;

}

.add-cart:hover{
    border-color:#111;
    background-color: #153e0f;
}


/* ==========================================
   MOBILE STYLING
========================================== */

@media (max-width: 768px) {

    .product-page {
        display: flex;
        flex-direction: column;
        gap: 35px;
        padding: 25px 20px 50px;
    }

    /* PRODUCT IMAGE */

    .product-gallery {
        width: 100%;
        order: 1;
    }

    .gallery-container {
        width: 100%;
        max-width: 100%;
    }

    .gallery-container img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .gallery-counter {
        bottom: 12px;
        right: 12px;
        padding: 6px 10px;
        font-size: 12px;
    }

    /* PURCHASE SECTION */

    .purchase-panel {
        position: static;
        width: 100%;
        order: 2;
    }

    .purchase-panel h1 {
        font-size: 25px;
        margin-bottom: 8px;
    }

    .purchase-panel h2 {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .sizes {
        width: 100%;
        gap: 8px;
        margin-bottom: 25px;
    }

    .sizes button {
        padding: 12px 5px;
    }

    .quantity {
        margin-bottom: 25px;
    }

    .add-cart {
        width: 100%;
        padding: 16px;
    }

    /* PRODUCT DETAILS */

    .product-details {
        position: static;
        width: 100%;
        order: 3;
    }

    .product-details h3 {
        margin-bottom: 20px;
    }

    .product-details p {
        margin-bottom: 12px;
    }

    /* MOBILE GALLERY ARROWS */

    .gallery-zone::after {
        opacity: 0.7;
        font-size: 26px;
    }

    .previous::after {
        left: 15px;
    }

    .next::after {
        right: 15px;
    }
}