/* ==================================================
CONTENEDOR GENERAL
================================================== */
/* ==================================================
CONTENEDOR GENERAL
================================================== */

.pd-container{
width:100%;
max-width:1180px;
margin:auto;
padding:0 15px;
box-sizing:border-box;
}

main{
width:100%;
overflow:hidden;
}

/* ==================================================
TARJETA PRINCIPAL PRODUCTO
================================================== */

.producto-page{
background:#f2f2f2;
padding:40px 20px;
width:100%;

display:flex;
flex-direction:column;
align-items:center;

box-sizing:border-box;
}

.producto-layout{

display:grid;

/* miniaturas | imagen | info */

grid-template-columns:70px minmax(0,1fr) minmax(260px,360px);

gap:25px;
align-items:start;

background:#fff;
padding:30px;
border-radius:10px;

width:100%;
max-width:1180px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

overflow:hidden;
box-sizing:border-box;
}

/* ==================================================
MINIATURAS
================================================== */

.miniaturas{
display:flex;
flex-direction:column;
gap:8px;
max-width:100%;
}

.miniaturas img{
width:60px;
max-width:100%;
border:1px solid #ddd;
cursor:pointer;
border-radius:4px;
transition:0.2s;
}

.miniaturas img:hover{
border-color:#3483fa;
}

/* ==================================================
IMAGEN PRINCIPAL
================================================== */

.imagen-principal{
display:flex;
justify-content:center;
align-items:center;
width:100%;
max-width:100%;
overflow:hidden;
}

.imagen-principal img{
width:100%;
max-width:460px;
height:auto;

max-height:520px;

object-fit:contain;
border-radius:6px;
}

/* ==================================================
INFO PRODUCTO
================================================== */

.producto-info{
padding:5px 10px;
width:100%;
max-width:100%;
box-sizing:border-box;
}

.producto-info h1{
font-size:22px;
margin-bottom:8px;
line-height:1.3;

word-break:break-word;
overflow-wrap:anywhere;
}

.producto-info h2{
font-size:15px;
color:#666;
margin-bottom:10px;
}

.precio{
font-size:26px;
font-weight:bold;
margin:14px 0;
color:#333;
}

.btn-comprar{
display:inline-block;

background:#00a650;
color:#fff;

padding:12px 18px;

border-radius:6px;
text-decoration:none;
font-weight:bold;
font-size:14px;

transition:0.2s;
}

.btn-comprar:hover{
background:#009143;
}

/* ==================================================
DESCRIPCIÓN
================================================== */

.producto-descripcion{

max-width:1180px;
margin:30px auto;

background:#fff;

padding:25px;
border-radius:10px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

line-height:1.6;
font-size:15px;

word-break:break-word;
overflow-wrap:anywhere;
box-sizing:border-box;
}

/* ==================================================
RELACIONADOS
================================================== */

.relacionados{

max-width:1180px;
margin:40px auto;

background:#fff;

padding:25px;
border-radius:10px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

box-sizing:border-box;
}

.relacionados h3{
font-size:20px;
margin-bottom:20px;
}

/* carrusel */

.relacionados-scroll{

display:flex;
gap:20px;

overflow-x:auto;
padding-bottom:10px;

scroll-snap-type:x mandatory;
}

/* tarjeta */

.card-rel{
min-width:180px;
text-decoration:none;
color:#333;
scroll-snap-align:start;
}

.card-rel img{
width:100%;
border-radius:6px;
}

.card-rel p{
font-size:14px;
margin-top:8px;
line-height:1.3;

word-break:break-word;
overflow-wrap:anywhere;
}

/* ==================================================
RESPONSIVE TABLET
================================================== */

@media (max-width:900px){

.producto-layout{
grid-template-columns:1fr;
gap:20px;
}

/* orden visual */

.imagen-principal{
order:1;
}

.miniaturas{
order:2;
flex-direction:row;
justify-content:center;
flex-wrap:wrap;
}

.producto-info{
order:3;
text-align:center;
}

.miniaturas img{
width:55px;
}

.imagen-principal img{
max-width:420px;
}

}

/* ==================================================
RESPONSIVE MOBILE
================================================== */

@media (max-width:600px){

.pd-container{
padding:15px 10px;
}

.producto-layout{
padding:15px;
gap:15px;
}

/* imagen */

.imagen-principal img{
max-width:100%;
max-height:360px;
}

/* info */

.producto-info{
padding:0;
}

/* titulo */

.producto-info h1{
font-size:19px;
line-height:1.3;
}

/* subtitulo */

.producto-info h2{
font-size:14px;
}

/* precio */

.precio{
font-size:24px;
}

/* boton */

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

/* miniaturas */

.miniaturas{
gap:6px;
}

.miniaturas img{
width:50px;
}

/* relacionados */

.relacionados-scroll{
gap:12px;
}

.card-rel{
min-width:130px;
}

}
.pd-container{
width:100%;
max-width:1180px;
margin:auto;
padding:0 15px;
box-sizing:border-box;
}

main{
width:100%;
overflow:hidden;
}

/* ==================================================
TARJETA PRINCIPAL PRODUCTO
================================================== */

.producto-page{
background:#f2f2f2;
padding:40px 20px;
width:100%;

display:flex;
flex-direction:column;
align-items:center;

box-sizing:border-box;
}

.producto-layout{

display:grid;

/* miniaturas | imagen | info */

grid-template-columns:70px minmax(0,1fr) minmax(260px,360px);

gap:25px;
align-items:start;

background:#fff;
padding:30px;
border-radius:10px;

width:100%;
max-width:1180px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

overflow:hidden;
box-sizing:border-box;
}

/* ==================================================
MINIATURAS
================================================== */

.miniaturas{
display:flex;
flex-direction:column;
gap:8px;
max-width:100%;
}

.miniaturas img{
width:60px;
max-width:100%;
border:1px solid #ddd;
cursor:pointer;
border-radius:4px;
transition:0.2s;
}

.miniaturas img:hover{
border-color:#3483fa;
}

/* ==================================================
IMAGEN PRINCIPAL
================================================== */

.imagen-principal{
display:flex;
justify-content:center;
align-items:center;
width:100%;
max-width:100%;
overflow:hidden;
}

.imagen-principal img{
width:100%;
max-width:460px;
height:auto;

max-height:520px;

object-fit:contain;
border-radius:6px;
}

/* ==================================================
INFO PRODUCTO
================================================== */

.producto-info{
padding:5px 10px;
width:100%;
max-width:100%;
box-sizing:border-box;
}

.producto-info h1{
font-size:22px;
margin-bottom:8px;
line-height:1.3;

word-break:break-word;
overflow-wrap:anywhere;
}

.producto-info h2{
font-size:15px;
color:#666;
margin-bottom:10px;
}

.precio{
font-size:26px;
font-weight:bold;
margin:14px 0;
color:#333;
}

.btn-comprar{
display:inline-block;

background:#00a650;
color:#fff;

padding:12px 18px;

border-radius:6px;
text-decoration:none;
font-weight:bold;
font-size:14px;

transition:0.2s;
}

.btn-comprar:hover{
background:#009143;
}

/* ==================================================
DESCRIPCIÓN
================================================== */

.producto-descripcion{

max-width:1180px;
margin:30px auto;

background:#fff;

padding:25px;
border-radius:10px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

line-height:1.6;
font-size:15px;

word-break:break-word;
overflow-wrap:anywhere;
box-sizing:border-box;
}

/* ==================================================
RELACIONADOS
================================================== */

.relacionados{

max-width:1180px;
margin:40px auto;

background:#fff;

padding:25px;
border-radius:10px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

box-sizing:border-box;
}

.relacionados h3{
font-size:20px;
margin-bottom:20px;
}

/* carrusel */

.relacionados-scroll{

display:flex;
gap:20px;

overflow-x:auto;
padding-bottom:10px;

scroll-snap-type:x mandatory;
}

/* tarjeta */

.card-rel{
min-width:180px;
text-decoration:none;
color:#333;
scroll-snap-align:start;
}

.card-rel img{
width:100%;
border-radius:6px;
}

.card-rel p{
font-size:14px;
margin-top:8px;
line-height:1.3;

word-break:break-word;
overflow-wrap:anywhere;
}

/* ==================================================
RESPONSIVE TABLET
================================================== */

@media (max-width:900px){

.producto-layout{
grid-template-columns:1fr;
gap:20px;
}

/* orden visual */

.imagen-principal{
order:1;
}

.miniaturas{
order:2;
flex-direction:row;
justify-content:center;
flex-wrap:wrap;
}

.producto-info{
order:3;
text-align:center;
}

.miniaturas img{
width:55px;
}

.imagen-principal img{
max-width:420px;
}

}

/* ==================================================
RESPONSIVE MOBILE
================================================== */

@media (max-width:600px){

.pd-container{
padding:15px 10px;
}

.producto-layout{
padding:15px;
gap:15px;
}

/* imagen */

.imagen-principal img{
max-width:100%;
max-height:360px;
}

/* info */

.producto-info{
padding:0;
}

/* titulo */

.producto-info h1{
font-size:19px;
line-height:1.3;
}

/* subtitulo */

.producto-info h2{
font-size:14px;
}

/* precio */

.precio{
font-size:24px;
}

/* boton */

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

/* miniaturas */

.miniaturas{
gap:6px;
}

.miniaturas img{
width:50px;
}

/* relacionados */

.relacionados-scroll{
gap:12px;
}

.card-rel{
min-width:130px;
}

}/* ==================================================
   FIX OVERFLOW MOBILE
================================================== */

.producto-wrap {
    width: 100%;
    max-width: 1180px;
    box-sizing: border-box;
    overflow: hidden;
}

.producto-descripcion,
.relacionados {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 600px) {

    .producto-page {
        padding: 20px 10px;
    }

    .producto-descripcion,
    .relacionados {
        margin: 15px 0;
        padding: 15px;
    }
}