/* ============================================
   ESTILO GENERAL PRODUCTOS (responsive + fix)
   ============================================ */
:root{
  --gap-lg: 40px;
  --gap-md: 24px;
  --gap-sm: 14px;
  --radius: 16px;
}

html, body{
  margin:0;
  padding:0;
  overflow-x:hidden;                 /* evita empuje lateral */
  background:#f9f9f9;
  font-family: Arial, sans-serif;
}

/* Contenedor principal: 2 columnas en desktop, 1 en móvil */
.container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:start;
  gap: var(--gap-lg);
  padding: var(--gap-lg);
  max-width: 1200px;
  margin-inline: auto;               /* centro real */
  box-sizing:border-box;
}

/* ================== IMAGEN ================== */
.images{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f5f5;
  padding:20px;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;               /* evita saltos de layout */
  margin-inline:auto;                 /* centrada en grid */
  place-self:center;
}
.images img{
  width: min(520px, 100%);
  height: auto;                       /* no forzar alto */
  object-fit: contain;
  border-radius: 12px;
  transition: transform .3s ease;
}
@media (hover:hover){
  .images img:hover{ transform: scale(1.05); }
}

/* =================== INFO =================== */
.info{
  max-width: 560px;
  width:100%;
  justify-self:start;
}

.descripcion{
  font-size: clamp(.95rem, 1.8vw, 1rem);
  color:#555;
  margin:.5rem 0;
  line-height:1.55;
}

.price{
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight:700;
  margin:.75rem 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
}
.price .orig{
  text-decoration:line-through;
  color:#666;
  margin-right:.5rem;
}
.price .final{ color:#c1121f; }

.promo-badge{
  background:#e6ffed;
  color:#0a7a28;
  border:1px solid #b6f5c8;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
}

/* Aviso debajo del precio (selecciona talla) */
.talla-alert{
  margin-top:8px;
  font-size:.9rem;
  font-weight:600;
  color:#fff;
  background:#f59e0b;
  padding:6px 10px;
  border-radius:10px;
  display:none;
  animation:fadeIn .3s ease;
}
.talla-alert.show{ display:inline-block; }
@keyframes fadeIn{
  from {opacity:0; transform:translateY(-4px);}
  to   {opacity:1; transform:translateY(0);}
}

/* ================ TALLAS ================= */
.sizes{
  margin:1rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sizes span{
  padding:10px 14px;
  border:1px solid #ccc;
  border-radius:12px;
  cursor:pointer;
  background:#f8f8f8;
  user-select:none;
  transition: background .2s ease, transform .1s ease, border-color .2s ease;
}
.sizes span:active{ transform: scale(.98); }
.sizes span.active{
  background:#000;
  color:#fff;
  border-color:#000;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ============== CANTIDAD / STEPPER ============== */
.qty-group{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 4px;
}
.qty-label{
  font-size:.95rem;
  color:#444;
  min-width:74px;
}
.qty-control{
  display:inline-flex;
  align-items:center;
  border:1.5px solid #ddd;
  border-radius:12px;
  overflow:hidden;
}
.qty-btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#f5f5f5;
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:18px;
  transition: background .2s ease;
}
.qty-btn:hover{ background:#e9e9e9; }
.qty-input{
  width:84px;
  height:44px;
  border:0;
  text-align:center;
  font-size:16px;
  outline:none;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-input{ -moz-appearance:textfield; }

/* ============== BOTONES (Adidas style) ============== */
.buttons{
  display:flex;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

.btn-cart, .btn-view{
  flex:1;
  min-width:180px;
  height:48px;
  padding:0 18px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition: all .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:12px;
}

/* Añadir al carrito */
.btn-cart{
  background:#000;
  color:#fff;
  border:1px solid #000;
}
.btn-cart:hover{ background:#fff; color:#000; }
.btn-cart:active{ transform:translateY(1px); }

/* Ver carrito / Ver detalles */
.btn-view{
  background:#fff;
  color:#111;
  border:1.5px solid #111;
}
.btn-view:hover{ background:#000; color:#fff; }
.btn-view:active{ transform:translateY(1px); }

/* =========================
   BREAKPOINTS RESPONSIVE
   ========================= */

/* <= 1200px: menos gap */
@media (max-width: 1200px){
  .container{ gap: var(--gap-md); padding: var(--gap-md); }
}

/* <= 992px: imagen más cuadrada, info full width */
@media (max-width: 992px){
  .container{
    grid-template-columns: 1fr;      /* columna única */
    justify-items: center;           /* centra los hijos */
    padding: 24px 16px;              /* padding simétrico */
    gap: 24px;
  }
  .container > .images,
  .container > .info{
    width:100%;
    max-width: 680px;                /* ajustable: 600–720 */
  }
  .images{ aspect-ratio: 1 / 1; }
  .info{ justify-self: stretch; }
}

/* <= 768px: botones full-width */
@media (max-width: 768px){
  .buttons{
    flex-direction: column;
    width:100%;
  }
  .btn-cart, .btn-view{
    flex:none; width:100%;
  }
  .qty-label{ min-width:64px; }
}

/* <= 560px: controles compactos */
@media (max-width: 560px){
  .container{ padding: 20px 14px; }
  .descripcion{ line-height:1.5; }
  .qty-btn{ width:40px; height:40px; }
  .qty-input{ width:72px; height:40px; font-size:15px; }
}

/* Accesibilidad: respeta “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .images img,
  .btn-cart, .btn-view{ transition:none; }
}