/* src/css/product/product.gallery.css */

.pd {
    padding: 34px 0;
}

.pd-grid{
    display:grid;
    grid-template-columns: 560px 1fr;
    gap:28px;
    align-items:flex-start;
}

.pd-gallery{
    display:grid;
    grid-template-columns: 84px 1fr;
    gap:14px;
}

.pd-thumbs{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height: 520px;
    overflow:auto;
    padding-right:6px;
}

.pd-thumbs::-webkit-scrollbar{ width:6px; }
.pd-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px; }

.pd-thumb{
    border:1px solid rgba(255,255,255,.14);
    background:#111;
    border-radius:10px;
    padding:6px;
    cursor:pointer;
    opacity:.85;
}
.pd-thumb:hover{ opacity:1; }
.pd-thumb.is-active{
    border-color:#fff;
    opacity:1;
}

.pd-thumb img{
    width:100%;
    height:62px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}

.pd-main{
    border-radius:14px;
    background:#0b0b0b;
    border:1px solid rgba(255,255,255,.10);
    padding:14px;
}

.pd-main img{
    width:100%;
    height: 480px;
    object-fit:contain;
    display:block;
    background:#fff;
    border-radius:12px;
}

@media (max-width: 980px){
    .pd-grid{ grid-template-columns: 1fr; }
    .pd-gallery{ grid-template-columns: 1fr; }
    .pd-thumbs{
        flex-direction:row;
        max-height:none;
        overflow:auto;
        padding-right:0;
        padding-bottom:6px;
    }
    .pd-thumb{ flex:0 0 84px; }
    .pd-main img{ height: 360px; }
}