/*
 * Ficha de un producto.
 *
 * Se encola solo en `is_singular( 'product' )` (ver inc/enqueue.php). Depende de
 * catalogo.css, que trae la grilla y la card: la ficha también las usa, en los
 * relacionados del pie.
 */

.producto-single__volver {
  margin-bottom: 2rem;
}

.producto-single__grilla {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}

@media (min-width: 768px) {
  .producto-single__grilla {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.producto-single__figura {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-xl);
  background-color: var(--c-suave);
  box-shadow: var(--c-sombra-suave);
  overflow: hidden;
}

.producto-single__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-single__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.producto-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.producto-single__titulo {
  font-size: var(--c-txt-titulo);
  line-height: var(--c-txt-titulo-lh);
}

.producto-single__precio {
  margin-top: 1rem;
  color: var(--c-naranja);
  font-size: var(--c-txt-3xl);
  font-weight: 800;
}

.producto-single__resumen {
  margin-top: 1.25rem;
  color: var(--c-apagado);
}

.producto-single__accion {
  margin-top: 2rem;
}

/* A todo el ancho en mobile, igual que los botones del hero: es la acción
   principal de la página y se toca con el pulgar. Desde 640 vuelve a su ancho
   natural, que al lado de la foto se lee mejor que una barra larga.
   Apunta a `.boton` y no a `.button`, así que no toca el botón de compra de
   WooCommerce que aparece con el flag apagado (ver "Venta habilitada" abajo). */
.producto-single__accion .boton {
  width: 100%;
}

@media (min-width: 640px) {
  .producto-single__accion .boton {
    width: auto;
  }
}

.producto-single__nota {
  margin-top: 0.9rem;
  max-width: 24rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
}

.producto-single__sku {
  margin-top: 1.5rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-xs);
}

.producto-single__descripcion {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* El título de la descripción no lleva el margen superior que `.prosa` le pone
   a los h2 del contenido: acá ya lo separa el margen del bloque entero. */
.producto-single__descripcion > .seccion__titulo {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.catalogo--relacionados {
  background-color: var(--c-crema);
}

/* --- Venta habilitada ---
   Nada de esto se ve con el modo catálogo puesto. Son cuatro reglas para que el
   formulario de compra de WooCommerce no aparezca crudo el día que se apague el
   flag: la hoja `woocommerce-general` sigue afuera en las páginas de producto
   (ver `Cucha_Catalog_Mode::quitar_estilos_woo()`). */

.producto-single__accion form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.producto-single__accion .quantity input {
  width: 4.5rem;
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-lg);
  font-family: var(--c-fuente-texto);
  font-size: var(--c-txt-base);
  text-align: center;
}

.producto-single__accion .button,
.producto-single__accion button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.5rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--c-radio-lg);
  background-color: var(--c-naranja);
  color: var(--c-sobre-oscuro);
  box-shadow: var(--c-sombra-suave);
  font-family: var(--c-fuente-texto);
  font-size: var(--c-txt-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--c-trans), box-shadow var(--c-trans);
}

.producto-single__accion .button:hover,
.producto-single__accion button[type='submit']:hover {
  background-color: hsl(25 85% 32%);
  box-shadow: var(--c-sombra-media);
}

.producto-single__accion .stock {
  width: 100%;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
}

/* Los avisos de Woo ("producto agregado al carrito") aparecen en la ficha antes
   de la grilla, y sin la hoja de Woo salen como una lista pelada. */
.woocommerce-notices-wrapper ul {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-naranja);
  border-radius: var(--c-radio-lg);
  background-color: var(--c-acento);
  color: var(--c-texto);
  font-size: var(--c-txt-base);
}

.woocommerce-notices-wrapper li + li {
  margin-top: 0.5rem;
}