/* =========================
   PRODUCT PAGE (responsive)
========================= */

.pd__title{
    color:#fff;
    margin:0 0 14px;
    font-size:38px;
    line-height:1.1;
    letter-spacing:-.01em;
}

.pd__grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:start;
}

/* Gallery desktop: thumbs left, main right */
.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;
    scrollbar-width:none;
}
.pd__thumbs::-webkit-scrollbar{ display:none; }

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

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

.pd__main{
    background:rgba(255,255,255,.06);
    border-radius:12px;
    padding:14px;
    overflow:hidden;
}
.pd__main img{
    width:100%;
    height:520px;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
    display:block;
}

.pd__price{
    color:#fff;
    font-size:22px;
    font-weight:900;
    margin-bottom:14px;
}

.pd__add{
    margin-top:16px;
    background:#ff2b2b;
    border:none;
    color:#fff;
    padding:12px 18px;
    border-radius:24px;
    font-weight:900;
    cursor:pointer;
    width: fit-content;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 980px){
    .pd__title{ font-size:30px; }

    .pd__grid{
        grid-template-columns: 1fr;
        gap:14px;
    }

    /* Gallery mobile: main arriba, thumbs abajo en horizontal */
    .pd__gallery{
        grid-template-columns: 1fr;
        gap:10px;
    }

    .pd__main img{
        height:360px;
    }

    .pd__thumbs{
        order:2;
        flex-direction:row;
        max-height:none;
        overflow-x:auto;
        overflow-y:hidden;
        padding-right:0;
        padding-bottom:6px;
        -webkit-overflow-scrolling: touch;
    }

    .pd-thumb{
        flex:0 0 auto;
        width:72px;
    }

    .pd-thumb img{
        height:54px;
    }

    .pd__add{
        width:100%;
        text-align:center;
    }
}