/* =========================================================
   Ferretería Digital — Página de producto individual
   Solo se carga en is_product(). Acompaña al override
   templates/single-product.html (galería con miniaturas
   verticales a la izquierda).

   La disposición la resuelve el CSS de WooCommerce:
   - > 600px: la galería es flex horizontal y la lista de
     miniaturas (primer hijo) se apila en columna.
   - <= 600px: la galería pasa a columna y las miniaturas
     quedan en fila debajo de la imagen (order: 1).
   Aquí solo van los estilos del sitio.

   Ficha en 3 cards (galería | info | confianza), mismo
   tratamiento que .fdpa-card del panel admin. Los grises
   de la tabla de especificaciones copian los --fdpa-* de
   fd-panel-admin.css, que no se carga en el front.
   ========================================================= */

.fd-producto {
	--fd-producto-borde-fila: #f1f2f5; /* = --fdpa-borde-3 */
	--fd-producto-fondo-etiqueta: #fafafb; /* = cabecera de .fdpa-tabla */
	--fd-producto-gris: #8a93a6; /* = --fdpa-gris */
	--fd-producto-texto: #1c2230; /* = --fdpa-texto */
	--fd-producto-texto-2: #4a5266; /* = --fdpa-texto-2 */
	--fd-producto-naranja-claro: #fdf0e6; /* = --fdpa-naranja-claro */
	--fd-producto-alto-control: 42px; /* cantidad, Añadir al carrito, Comprar ahora */
}

/* ---------------------------------------------------------
   Columnas como cards
   --------------------------------------------------------- */
/* Separación entre cards: 16px en lugar del spacing|50 de Twenty
   Twenty-Five para core/columns (hasta 50px), que las dejaba sueltas. */
.wp-block-columns.fd-producto__columnas {
	align-items: flex-start;
	gap: 16px;
}

/* Proporciones 35 / 42 / 23: la info (nombre, precio, compra) es la
   columna principal. La plantilla trae flex-basis inline (46/32/22),
   por eso el !important. En tablet la regla de abajo (más adelante en
   el archivo) sigue mandando la card de confianza a todo el ancho. */
@media (min-width: 782px) {
	.fd-producto__columnas > .fd-producto__galeria {
		flex-basis: 35% !important;
	}

	.fd-producto__columnas > .fd-producto__resumen {
		flex-basis: 42% !important;
	}

	.fd-producto__columnas > .fd-producto__confianza {
		flex-basis: 23% !important;
	}
}

.fd-producto__card {
	background-color: var(--fd-white);
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius-card);
	padding: 20px;
}

/* Tablet: galería + info arriba, confianza a lo ancho debajo. */
@media (min-width: 782px) and (max-width: 1099px) {
	.wp-block-columns.fd-producto__columnas {
		flex-wrap: wrap !important;
	}

	.fd-producto__columnas > .fd-producto__galeria,
	.fd-producto__columnas > .fd-producto__resumen {
		flex-grow: 1;
	}

	.fd-producto__columnas > .fd-producto__confianza {
		flex-basis: 100% !important;
	}

	.fd-producto__confianza .fd-confianza {
		flex-direction: row;
	}

	.fd-producto__confianza .fd-confianza__item {
		flex: 1 1 0;
	}
}

/* ---------------------------------------------------------
   Título del producto: en el espíritu del título del topbar de
   Mi Cuenta (.fd-dash-titulo-topbar, 17px/800) pero un escalón
   más grande por ser el título de página, en vez del xx-large
   de Twenty Twenty-Five (2.15–3rem).
   --------------------------------------------------------- */
.fd-producto__resumen .wp-block-post-title {
	margin-top: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

@media (max-width: 781px) {
	.fd-producto__resumen .wp-block-post-title {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------
   Descripción corta (core/post-excerpt; en la plantilla de
   bloques no existe .woocommerce-product-details__short-description).
   Sin esto hereda el font-size "large" del body de Twenty
   Twenty-Five (18–22px).
   --------------------------------------------------------- */
.fd-producto__resumen .wp-block-post-excerpt__excerpt {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

/* ---------------------------------------------------------
   Pestañas: descripción larga y títulos de los paneles.
   Mismo criterio que la descripción corta; el título del panel
   (h2 "Descripción" / "Especificaciones", x-large de TT25) y los
   h3 que traiga la descripción bajan en proporción al título del
   producto (22px).
   --------------------------------------------------------- */
.fd-producto .woocommerce-Tabs-panel--description {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.fd-producto .woocommerce-Tabs-panel > h2 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.fd-producto .woocommerce-Tabs-panel--description h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

/* ---------------------------------------------------------
   Galería
   --------------------------------------------------------- */

.fd-producto .wc-block-product-gallery {
	gap: 12px;
}

/* Sin borde propio: ya está dentro de la card. */
.fd-producto .wc-block-product-gallery-large-image {
	border-radius: var(--fd-radius);
	overflow: hidden;
	background-color: var(--fd-white);
}

.fd-producto .wc-block-product-gallery-thumbnails__thumbnail__image {
	border-radius: var(--fd-radius);
}

/* Flechas anterior/siguiente de la imagen grande. WooCommerce les da un
   cuadro blanco (background: base) de 40x40: se quita solo el fondo; el
   área clicable de 40x40 sigue siendo la de WooCommerce. El chevron va en
   #202020 con el trazo engrosado y un halo blanco (drop-shadow) para que
   se lea también sobre fotos con fondo oscuro (p. ej. las del grifo). En
   <= 600px WooCommerce ya las oculta (se desliza con el dedo). */
.fd-producto .wc-block-next-previous-buttons__button {
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--fd-black);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fd-producto .wc-block-next-previous-buttons__icon {
	overflow: visible;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

.fd-producto .wc-block-next-previous-buttons__icon path {
	stroke: currentColor;
	stroke-width: 0.8px;
	stroke-linejoin: round;
}

/* Hover/foco: flecha negra y un halo blanco translúcido, sin borde duro. */
.fd-producto .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):hover,
.fd-producto .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):focus-visible {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 45%, rgba(255, 255, 255, 0) 70%);
	color: #000;
}

.fd-producto .wc-block-next-previous-buttons__button:focus-visible {
	outline: 2px solid var(--fd-orange-dark);
	outline-offset: 0;
}

/* Primera/última imagen: atenuada, no oculta. */
.fd-producto .wc-block-next-previous-buttons__button[aria-disabled="true"] .wc-block-next-previous-buttons__icon {
	opacity: 0.35;
}

/* Miniatura activa: contorno naranja en lugar del negro por defecto. */
.fd-producto .wc-block-product-gallery-thumbnails--active-outline .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border-color: var(--fd-orange);
}

/* ---------------------------------------------------------
   Visor 3D (inc/producto-visor-3d.php, fd-visor-3d.js)
   --------------------------------------------------------- */

/* El alto lo fija fd-visor-3d.js con el de la galería; 1/1 si no lo sabe. */
.fd-visor__escenario {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--fd-radius);
	overflow: hidden;
	background-color: var(--fd-producto-fondo-etiqueta);
}

.fd-visor__escenario[style*="height"] {
	aspect-ratio: auto;
}

.fd-visor__escenario[hidden],
.fd-visor__modos[hidden],
.fd-visor__estado[hidden] {
	display: none;
}

.fd-visor__lienzo {
	width: 100%;
	height: 100%;
	cursor: grab;
}

.fd-visor__lienzo:active {
	cursor: grabbing;
}

.fd-visor__lienzo canvas {
	display: block;
}

.fd-visor__estado,
.fd-visor__pista {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}

.fd-visor__estado {
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 14px;
	background-color: var(--fd-white);
	border: 1px solid var(--fd-border);
	color: var(--fd-producto-texto-2);
}

.fd-visor__pista {
	bottom: 12px;
	padding: 5px 12px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
}

.fd-visor__modos {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.fd-visor__modo {
	flex: 1;
	min-height: var(--fd-producto-alto-control);
	padding: 0 12px;
	border: 1.5px solid var(--fd-border);
	border-radius: var(--fd-radius);
	background-color: var(--fd-white);
	color: var(--fd-producto-texto-2);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.fd-visor__modo:hover {
	border-color: var(--fd-orange);
	color: var(--fd-orange-dark);
}

.fd-visor__modo[aria-pressed="true"] {
	border-color: var(--fd-orange);
	background-color: var(--fd-producto-naranja-claro);
	color: var(--fd-orange-dark);
}

.fd-visor__modo:focus-visible {
	outline: 2px solid var(--fd-orange-dark);
	outline-offset: 2px;
}

.fd-visor__solo-admin {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--fd-producto-gris);
}

/* ---------------------------------------------------------
   Columna de confianza (bloque fd/confianza-producto)
   --------------------------------------------------------- */
.fd-confianza {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fd-confianza__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.fd-confianza__icono {
	display: flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: var(--fd-radius);
	background-color: var(--fd-producto-naranja-claro);
	color: var(--fd-orange-dark);
}

.fd-confianza__icono .fd-icono {
	width: 20px;
	height: 20px;
}

.fd-confianza__titulo {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fd-producto-texto);
}

.fd-confianza__detalle {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--fd-producto-texto-2);
}

/* Línea de cuotas de Cashea: separada del bloque de arriba y sin
   el fondo amarillo de la nota original. */
.fd-confianza--cuotas {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--fd-border);
}

.fd-confianza--cuotas .fd-confianza__titulo {
	font-weight: 600;
	color: var(--fd-producto-texto-2);
}

/* Solo se dibuja si la página de devoluciones está publicada. */
.fd-confianza__politica {
	margin: 12px 0 0;
	font-size: 12.5px;
}

/* ---------------------------------------------------------
   "Comprar ahora" (columna de confianza). El color y el radio
   vienen de button.button en fd-custom.css.
   --------------------------------------------------------- */
.fd-comprar-ahora {
	margin: 20px 0 0;
}

.fd-comprar-ahora__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--fd-producto-alto-control);
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* ---------------------------------------------------------
   Cantidad + "Añadir al carrito" (columna de info). Misma
   altura y radio para los dos. Sin esto el botón toma el
   padding 1rem/2.25rem y el texto "medium" de Twenty
   Twenty-Five (~60px) y el selector se estira a esa altura.
   Proporción con .fdpa-boton (12.5px, 8px 14px, radio 8):
   algo mayor por ser el CTA principal, no el doble.
   --------------------------------------------------------- */
/* :not([hidden]): WooCommerce muestra u oculta el botón por JS con el
   atributo hidden (state.allowsAddingToCart); el display no debe pisarlo. */
.fd-producto__resumen .wc-block-components-product-button__button:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--fd-producto-alto-control);
	min-height: 0;
	padding: 0 20px;
	border-radius: var(--fd-radius);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.fd-producto__resumen .wc-block-add-to-cart-with-options .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	width: 116px;
	height: var(--fd-producto-alto-control);
	border-color: var(--fd-border);
	border-radius: var(--fd-radius);
}

.fd-producto__resumen .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 32px;
	font-size: 16px;
	line-height: 1;
}

.fd-producto__resumen .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--minus {
	border-radius: var(--fd-radius) 0 0 var(--fd-radius);
}

.fd-producto__resumen .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--plus {
	border-radius: 0 var(--fd-radius) var(--fd-radius) 0;
}

.fd-producto__resumen .wc-block-components-quantity-selector input.qty {
	height: 100%;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

/* Móvil: un poco más alto para tocar cómodo (nunca menos de 40px). */
@media (max-width: 781px) {
	.fd-producto {
		--fd-producto-alto-control: 44px;
	}
}

/* ---------------------------------------------------------
   Pestaña "Especificaciones": tabla campo/valor con el
   tratamiento de .fdpa-tabla (filas de 15px 20px, separador
   --fdpa-borde-3, etiqueta gris en mayúsculas).
   --------------------------------------------------------- */
.fd-producto .woocommerce-product-attributes {
	width: 100%;
	margin: 0;
	border: 1px solid var(--fd-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--fd-radius-card);
	overflow: hidden;
	background-color: var(--fd-white);
}

.fd-producto .woocommerce-product-attributes th,
.fd-producto .woocommerce-product-attributes td {
	padding: 15px 20px;
	border: 0;
	border-bottom: 1px solid var(--fd-producto-borde-fila);
	text-align: left;
	vertical-align: top;
}

.fd-producto .woocommerce-product-attributes tr:last-child th,
.fd-producto .woocommerce-product-attributes tr:last-child td {
	border-bottom: 0;
}

.fd-producto .woocommerce-product-attributes th {
	width: 38%;
	background-color: var(--fd-producto-fondo-etiqueta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--fd-producto-gris);
}

.fd-producto .woocommerce-product-attributes td {
	font-size: 13px;
	font-weight: 500;
	color: var(--fd-producto-texto);
}

.fd-producto .woocommerce-product-attributes td p {
	margin: 0;
}