:root{
    --accent:#007bff;
    --green:#28a745;
    --danger:#ff3b30;
    --text:#222;
    --text-light:#444;
    --border:#e6e6e6;
    --bg:#f6f7f8;

    --container-width:1100px;
    --section-spacing:2.5rem;
}

/* BODY */
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    margin:0;
    background:var(--bg);
    color:var(--text);
}

/* CONTAINER GLOBAL */
.container{
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 1rem;
}

/* ESPACIADOS */
.section-top-spacing{
    margin-top:var(--section-spacing);
}
.section-spacing{
    margin-top:var(--section-spacing);
    margin-bottom:var(--section-spacing);
}

/* PRODUCT PAGE */
.producto-page{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;

    background:#fff;
    padding:2rem;
    border-radius:.8rem;
    border:1px solid var(--border);
    box-shadow:0 6px 18px rgba(0,0,0,0.06);

    max-width:var(--container-width);
    margin:var(--section-spacing) auto;
}

/* ---------------------------------------------------- */
/*      IMAGEN PRINCIPAL SIEMPRE CUADRADA              */
/* ---------------------------------------------------- */
.producto-imgs{
    flex:1 1 420px;
}

.producto-imgs img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:contain;
    background:#fff;
    padding:10px;
    border-radius:.6rem;
    border:1px solid #e5e5e5;
    transition:0.25s ease;
}

.producto-imgs img:hover{
    transform:scale(1.015);
}

/* ---------------------------------------------------- */
/*      THUMBS — FIX MÓVIL                             */
/* ---------------------------------------------------- */
.producto-thumbs{
    display:flex;
    flex-wrap:wrap;       
    gap:.6rem;
    margin-top:1rem;
    justify-content:center;
}

.producto-thumbs img{
    width:72px;
    height:72px;
    aspect-ratio:1/1;
    object-fit:contain;
    background:#fff;

    border-radius:.4rem;
    border:2px solid transparent;
    cursor:pointer;
    transition:0.25s ease;
}

.producto-thumbs img:hover{
    transform:scale(1.08);
}

.producto-thumbs img.active{
    border-color:var(--accent);
}

@media (max-width:480px){
    .producto-thumbs img{
        width:60px;
        height:60px;
    }
}

/* ---------------------------------------------------- */
/*      INFO                                            */
/* ---------------------------------------------------- */
.producto-info{
    flex:1 1 360px;
}

.producto-info h1{
    margin:0 0 .7rem;
    font-size:1.7rem;
    font-weight:700;
    line-height:1.35;
}

.price{
    font-size:1.75rem;
    color:var(--accent);
    font-weight:700;
    margin-bottom:1.2rem;
}

.description{
    margin-bottom:1.3rem;
    color:var(--text-light);
    line-height:1.6;
    font-size:1rem;
}

/* CANTIDAD */
.cantidad-wrap{
    display:flex;
    align-items:center;
    gap:1.2rem;
    margin-top:1.4rem;
}

.cantidad-wrap button{
    width:52px;
    height:52px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fafafa;
    font-size:1.35rem;
    cursor:pointer;
    transition:0.25s ease;
}

.cantidad-wrap button:hover{
    background:#f0f0f0;
}

.cantidad-display{
    min-width:48px;
    text-align:center;
    font-weight:700;
    font-size:1.35rem;
}

/* BOTÓN AGREGAR */
.btn-add{
    background:var(--green);
    color:#fff;
    padding:.8rem 1.4rem;
    border-radius:.5rem;
    border:none;
    cursor:pointer;
    font-weight:700;
    margin-top:1.2rem;
    font-size:1rem;
    transition:0.25s ease;
}

.btn-add:hover{
    filter:brightness(0.93);
}

.btn-add.added{
    background:#218838;
}

/* ALERTA DISPONIBILIDAD */
.alerta-disponibilidad {
    background:#ffce7b;
    color:#5a3300;
    padding:14px 18px;
    border-radius:6px;
    font-size:14px;
    line-height:1.45em;
    border:1px solid #e0a74b;
    margin-top:1.5rem;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

/* Ajuste ML button */
.producto-info .btn-ml {
    margin-top:2.4rem !important;
}

/* ---------------------------------------------------- */
/* CONTENEDOR DESCRIPCIÓN ABAJO                         */
/* ---------------------------------------------------- */
.descripcion-container{
    background:#fff;
    padding:2rem;
    margin-top:2rem;
    border-radius:.8rem;
    border:1px solid var(--border);
    box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.descripcion-container h2{
    font-weight:700;
    font-size:1.35rem;
    margin-bottom:1rem;
}

.descripcion-container p{
    font-size:1rem;
    line-height:1.6;
    color:var(--text-light);
}