/* =====================================================================
   FICHA DE PRODUCTO — piezas propias de esta página
   =====================================================================
   Va después de sitio.css y ui.css. Aquí solo lo exclusivo de la
   ficha: el selector de cantidad, la corrección de la retícula de
   relacionados y el ajuste de la foto.
   ===================================================================== */

.pd-wrap{ padding-top:1.75rem; padding-bottom:2.5rem; }
@media(max-width:860px){ .pd-wrap{ padding-bottom:5.5rem; } } /* aire para la barra móvil */

/* La foto vivía en una caja pálida enorme con la imagen chica flotando
   en medio. Ahora ocupa el espacio real, con el mismo fondo suave. */
.pd-foto{ position:relative; min-height:340px; }
.pd-foto img{ max-height:480px; }
@media(max-width:640px){ .pd-foto{ min-height:260px; } .pd-foto img{ max-height:320px; } }
.pd-foto .s-tag{ top:1rem; left:1rem; }

/* ---- Selector de cantidad ---- */
.pd-cant-bloque{ margin:1.35rem 0; }
.pd-cant-et{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--s-gris-2); margin-bottom:.55rem;
}

/* ---- Relacionados: auto-fit en vez del auto-fill de .s-rej.

   Con auto-fill, un solo producto relacionado dejaba dos columnas
   vacías del mismo ancho: el hueco de una retícula de 3 sin llenar.
   auto-fit colapsa esas columnas vacías a 0 y deja que el 1fr real se
   reparta el espacio — con 1 producto ocupa el ancho completo, con 2
   se dividen, con 3 se ven como siempre. ---- */
.pd-relacionados{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
}
/* Con pocos relacionados no tiene caso que las tarjetas se estiren a
   todo lo ancho del contenedor: se limita su crecimiento. */
.pd-relacionados .s-card{ max-width:380px; }
@media(max-width:640px){ .pd-relacionados .s-card{ max-width:none; } }