/* ===========================
   Reset
=========================== */

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

body {

    font-family: "Segoe UI", "Yu Gothic", sans-serif;
    background: #ffffff;
    color: #222;
    overflow-x: hidden;

}

img {

    display: block;
    max-width: 100%;

}


/* ===========================
   Layout
=========================== */

.container {

    width: min(1400px, 92%);
    margin: 60px auto;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;

    align-items: start;

}


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

.gallery {

    position: sticky;
    top: 40px;

}

.main-image {

    width: 100%;

    border-radius: 18px;

    overflow: hidden;

    background: #f7f7f7;

}

.thumbnail-list {

    display: flex;

    gap: 12px;

    margin-top: 20px;

}

.thumbnail-list img {

    width: 90px;

    height: 90px;

    object-fit: cover;

    border-radius: 12px;

    cursor: pointer;

    border: 2px solid transparent;

    transition: .25s;

}

.thumbnail-list img:hover{

    border-color:#111;

}


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

.product{

    display:flex;

    flex-direction:column;

}

.category{

    font-size:14px;

    color:#777;

    margin-bottom:12px;

}

.product-title{

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.review{

    font-size:18px;

    color:#ffb400;

    margin-bottom:18px;

}

.review span{

    color:#555;

    margin-left:8px;

}

.price{

    font-size:38px;

    font-weight:bold;

    margin-bottom:35px;

}

.option{

    margin-bottom:30px;

}

.option label{

    display:block;

    font-weight:bold;

    margin-bottom:10px;

}

.option p{

    color:#666;

}


/* ===========================
   Button
=========================== */

.cart-button{

    width:100%;

    height:60px;

    border:none;

    border-radius:999px;

    background:#111;

    color:#fff;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.cart-button:hover{

    background:#333;

    transform:translateY(-2px);

}

.note{

    margin-top:15px;

    color:#777;

    font-size:13px;

}


/* ===========================
   Overlay
=========================== */

#drawerOverlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

}

#drawerOverlay.active{

    opacity:1;

    visibility:visible;

}


/* ===========================
   Drawer
=========================== */

#drawer{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:90vh;

    background:#fff;

    border-radius:24px 24px 0 0;

    transform:translateY(100%);

    transition:transform .45s cubic-bezier(.22,1,.36,1);

    z-index:999;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    box-shadow:0 -15px 40px rgba(0,0,0,.25);

}

#drawer.active{

    transform:translateY(0);

}


/* ===========================
   Drawer Header
=========================== */

.drawer-header{

    height:56px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    border-bottom:1px solid #eee;

}

.handle{

    width:60px;

    height:6px;

    border-radius:999px;

    background:#ccc;

}

#closeDrawer{

    position:absolute;

    right:18px;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    font-size:18px;

}

#fullscreenDrawer{

    position:absolute;

    left:18px;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    font-size:18px;

    line-height:1;

}

#fullscreenDrawer:hover,
#closeDrawer:hover{

    background:#e5e5e5;

}


/* ===========================
   Drawer Fullscreen state
=========================== */

#drawer.fullscreen{

    height:100vh;

    height:100dvh;

    border-radius:0;

}


/* ===========================
   iframe
=========================== */

#drawer iframe{

    flex:1;

    width:100%;

    border:none;

}


/* ===========================
   Responsive
=========================== */

@media (max-width:900px){

    .container{

        grid-template-columns:1fr;

        gap:40px;

        width:94%;

        margin:30px auto;

    }

    .gallery{

        position:static;

    }

    .product-title{

        font-size:30px;

    }

    .price{

        font-size:30px;

    }

    .thumbnail-list img{

        width:70px;

        height:70px;

    }

}