/* ---------- RESET ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #f9f8f5;
    color: #111;

    font-family: "Inter", Arial, sans-serif;

    -webkit-font-smoothing: antialiased;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    max-width: 100%;
}



/* ---------- HEADER ---------- */


.site-header {

    position: absolute;

    top: 0;
    left: 0;

    z-index: 10;

    width: 100%;

    padding: 26px 4%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #111;

}



.wordmark {

    font-size: 0.95rem;

    font-weight: 500;

    letter-spacing: 0.15em;

}



.header-bag {

    font-size: 0.67rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}





/* ---------- PRODUCT MAIN ---------- */


.product-page {

    max-width: 1200px;

    margin: auto;

    padding: 140px 8% 100px;

    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 80px;

    align-items: center;

    min-height: 90vh;

}





.product-gallery {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}




.product-gallery img {

    width: 100%;

    max-width: 520px;

}





.product-info {

    max-width: 360px;

}





.collection {

    font-size: 0.65rem;

    font-weight: 500;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    margin-bottom: 20px;

}





/* MATCH INDEX PRODUCT TITLE */


.product-info h1 {

    font-family: "Inter", Arial, sans-serif;

    font-size: clamp(2.1rem, 3.2vw, 3.35rem);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.05em;

    margin-bottom: 28px;

}





.price {

    font-size: 0.9rem;

    margin-bottom: 35px;

}





.description {

    font-size: 0.95rem;

    line-height: 1.8;

    color: #444;

    margin-bottom: 45px;

}





.button {

    display: inline-block;

    padding: 15px 28px;

    background: #111;

    color: white;

    border: 1px solid #111;

    font-size: 0.65rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    transition: 0.25s ease;

}





.button:hover {

    background: transparent;

    color: #111;

}





/* ---------- PRODUCT DETAILS ---------- */


.product-details {

    border-top: 1px solid rgba(17,17,17,0.15);

    padding: 100px 8% 150px;

    display: grid;

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

    gap: 80px;

}





.detail-block h2 {

    font-size: 0.65rem;

    font-weight: 500;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    margin-bottom: 25px;

}





.detail-block p {

    font-size: 0.9rem;

    line-height: 1.8;

    opacity: 0.75;

    max-width: 300px;

}





/* ---------- FOOTER ---------- */


.site-footer {

    padding: 30px 4%;

    text-align: center;

}





.site-footer p {

    font-size: 0.62rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    opacity: 0.5;

}





/* ---------- MOBILE ---------- */


@media(max-width:900px){


    .product-page {

        grid-template-columns: 1fr;

        padding-top: 120px;

        gap: 50px;

    }



    .product-gallery {

        padding: 40px;

    }



    .product-details {

        grid-template-columns: 1fr;

        gap: 50px;

    }


}

/* ================================
   BAG DRAWER
================================ */

.bag-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:90;
}

.bag-overlay.active{
    opacity:1;
    visibility:visible;
}

.bag-drawer{

    position:fixed;

    top:0;
    right:-420px;

    width:400px;
    max-width:90vw;

    height:100vh;

    background:#f9f8f5;

    z-index:100;

    transition:right .35s ease;

    display:flex;
    flex-direction:column;

    border-left:1px solid rgba(0,0,0,.08);

}

.bag-drawer.active{
    right:0;
}

.bag-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:28px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.bag-header h2{

    font-size:1rem;
    font-weight:400;

}

#closeBag{

    border:none;
    background:none;

    font-size:1.2rem;

    cursor:pointer;

}

#bagItems{

    flex:1;

    overflow-y:auto;

    padding:25px;

}

.bag-item{

    display:flex;

    gap:18px;

    margin-bottom:25px;

}

.bag-image{

    width:90px;
    height:90px;

    object-fit:cover;

    border-radius:10px;

    background:#ece9df;

}

.bag-info strong{

    display:block;

    font-weight:500;

    margin-bottom:8px;

}

.bag-info p{

    font-size:.85rem;

    opacity:.7;

    margin:4px 0;

}

.bag-footer{

    padding:25px;

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

}

#subtotal{

    margin-bottom:20px;

    font-size:.9rem;

}

/* ---------- BAG REMOVE BUTTON ---------- */

.remove-btn {

    display: inline-block;

    padding: 6px 14px;

    background: transparent;

    color: #111;

    border: 1px solid #111;

    font-size: 0.55rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-top: 10px;

    cursor: pointer;

    transition: 0.25s ease;

}


.remove-btn:hover {

    background: #111;

    color: white;

}

/* ---------- QUANTITY CONTROL ---------- */

.quantity-control {

    display:flex;
    align-items:center;
    gap:12px;
    margin-top:8px;
    margin-bottom:10px;

}


.quantity-control button {

    width:22px;
    height:22px;

    border:1px solid #111;

    background:transparent;

    font-size:0.75rem;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

}


.quantity-control span {

    font-size:0.8rem;

}