/* =========================================================================
 * La Extremeña — WooCommerce
 *
 * Medidas del Figma: archivo con cabecera de 80/48 y píldoras de filtro (r:40, las únicas
 * píldoras del diseño); ficha con galería de 620 e info de 564, separadas 56.
 * ========================================================================= */

.woocommerce,
.woocommerce-page {
	background: var(--lx-ink-600);
}

/* --- Envoltorio general -------------------------------------------------- */

.lx-shop {
	max-width: var(--lx-shell);
	margin-inline: auto;
	padding-inline: 0;
}

/* hello-elementor limita el contenido a 1140 con
   `body:not([class*="elementor-page-"]) .site-main`, que gana a una clase suelta. Sin subir la
   especificidad, las pantallas de Woo se quedaban en 1140 y la rejilla de tres columnas salía
   a 282 en lugar de 397. */
body.woocommerce main.site-main,
body.woocommerce-page main.site-main {
	max-width: none;
	padding: 0;
}

.woocommerce-products-header,
.woocommerce div.product,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce ul.products,
.woocommerce nav.woocommerce-pagination,
.woocommerce .lx-filters,
.woocommerce .related,
.woocommerce .cart-collaterals,
.woocommerce form.woocommerce-cart-form,
.woocommerce form.checkout,
.woocommerce .woocommerce-order,
.woocommerce .woocommerce-MyAccount-navigation,
.woocommerce .woocommerce-MyAccount-content {
	max-width: var(--lx-band);
	margin-inline: auto;
}

.woocommerce .woocommerce-notices-wrapper:not(:empty) {
	padding-inline: var(--lx-gutter);
}

/* --- Cabecera de archivo ------------------------------------------------- */

/* Woo imprime el título antes del hook de la descripción, y el Figma pone la etiqueta
   encima del titular. Se reordena con flex en vez de sobrescribir archive-product.php, que
   se carga por `wc_get_template_part` y no por el filtro que redirige el resto. */
.woocommerce-products-header {
	display: flex;
	flex-direction: column;
	padding: 80px var(--lx-gutter) 0;
}

.woocommerce-products-header .lx-arch-eyebrow {
	order: -1;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
	margin: 16px 0 0;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 52px;
	line-height: 58px;
	letter-spacing: -.5px;
	color: var(--lx-paper-2);
}

.woocommerce-products-header .term-description,
.woocommerce-products-header .woocommerce-archive-description p {
	max-width: 620px;
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 26px;
	color: #bdb3a6;
}

/* Etiqueta de sección de la cabecera del catálogo: filete de 40 × 2. */
.lx-arch-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 600 12px/1.25 Inter, system-ui, sans-serif;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--lx-accent);
}

.lx-arch-eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background: var(--lx-accent);
}

/* --- Filtros de categoría (píldoras) ------------------------------------ */

.lx-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 48px var(--lx-gutter) 0;
}

.lx-filter {
	padding: 9px 18px;
	border: 1px solid var(--lx-line-2);
	border-radius: 40px;
	background: #231c18;
	font: 500 13.5px/1.2 Inter, system-ui, sans-serif;
	color: var(--lx-text);
	text-decoration: none;
	transition: border-color var(--lx-fast) var(--lx-ease), color var(--lx-fast) var(--lx-ease);
}

.lx-filter:hover {
	border-color: var(--lx-accent);
	color: var(--lx-accent);
}

.lx-filter.is-current {
	background: var(--lx-accent);
	border-color: var(--lx-accent);
	color: #160f0b;
}

/* --- Rejilla del catálogo ------------------------------------------------ */

/* El `margin` en atajo pisaba el `margin-inline: auto` del bloque anterior y la rejilla se
   quedaba pegada a la izquierda mientras el titular seguía centrado. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 56px auto 0;
	padding: 0 var(--lx-gutter);
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	float: none;
	display: flex;
}

.woocommerce ul.products li.product .lx-card {
	width: 100%;
}

.woocommerce nav.woocommerce-pagination {
	padding: 48px var(--lx-gutter) 90px;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 8px;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: 8px 14px;
	border: 1px solid var(--lx-line-2);
	border-radius: 2px;
	color: var(--lx-text);
	font: 500 14px/1 Inter, system-ui, sans-serif;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--lx-accent);
	border-color: var(--lx-accent);
	color: #160f0b;
}

@media (max-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce-products-header__title {
		font-size: 38px;
		line-height: 44px;
	}
}

/* =========================================================================
 * Ficha de producto
 * ========================================================================= */

/* El relleno superior lo aporta la banda de migas, que va a sangre: si la sección lo llevara,
   las migas quedarían separadas de la cabecera. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 620px 1fr;
	column-gap: 56px;
	padding: 0 var(--lx-gutter) 90px;
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary {
	margin-top: 36px;
}

/* Woo declara `div.product div.images { width: 48% }` con float, pensado para su maquetación
   de dos columnas. Aquí manda la rejilla, así que hay que anularlo con un selector al menos
   igual de específico: `div.images` incluido. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* Con `width: auto` y `aspect-ratio`, la imagen colapsaba a 1px: hay que dar el ancho. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	aspect-ratio: 620 / 480;
	object-fit: cover;
}

.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap: 16px;
	margin: 16px 0 0;
	padding: 0;
}

.woocommerce div.product .flex-control-thumbs li {
	width: auto;
	flex: 1;
	margin: 0;
}

.woocommerce div.product .flex-control-thumbs img {
	border-radius: 4px;
	aspect-ratio: 143 / 100;
	object-fit: cover;
	opacity: 1;
	border: 2px solid transparent;
}

.woocommerce div.product .flex-control-thumbs img.flex-active {
	border-color: var(--lx-accent);
}

.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* La categoría hace de eyebrow, apagada y sin filete: el naranja está en el precio. */
.woocommerce div.product .lx-eyebrow--plain span {
	font: 600 12px/1.25 Inter, system-ui, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--lx-muted);
}

.woocommerce div.product .lx-eyebrow--plain span::before {
	content: none;
}

.woocommerce div.product h1.product_title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 44px;
	line-height: 48px;
	letter-spacing: -.3px;
	color: var(--lx-paper-2);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 8px;
	color: var(--lx-accent);
	white-space: nowrap;
}

.woocommerce div.product p.price .lx-price {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 30px;
	color: var(--lx-accent);
}

.woocommerce div.product p.price .lx-price--quote {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--lx-paper-2);
}

/* «IVA incl.», el pie del precio en el Figma. */
.woocommerce div.product p.price::after {
	content: "IVA incl.";
	font: 400 13px/1 Inter, system-ui, sans-serif;
	color: var(--lx-muted);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 564px;
	font-size: 16px;
	line-height: 25px;
	color: #bdb3a6;
}

/* --- Especificaciones ---------------------------------------------------- */

.lx-specs {
	margin: 8px 0 0;
	padding: 0;
}

.lx-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-block: 13px;
	border-bottom: 1px solid var(--lx-line);
}

.lx-specs dt {
	margin: 0;
	font: 500 14px/1.2 Inter, system-ui, sans-serif;
	color: var(--lx-muted);
}

.lx-specs dd {
	margin: 0;
	text-align: right;
	font: 400 14px/1.2 Inter, system-ui, sans-serif;
	color: #e7e0d5;
}

/* --- Botones ------------------------------------------------------------- */

.lx-btn,
.woocommerce div.product form.cart button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 17px 30px;
	border-radius: 2px;
	border: 0;
	font: 600 15px/1 Inter, system-ui, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--lx-fast) var(--lx-ease), border-color var(--lx-fast) var(--lx-ease), color var(--lx-fast) var(--lx-ease);
}

.lx-btn--solid,
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--lx-accent);
	color: #160f0b;
}

.lx-btn--solid:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--lx-paper);
	color: var(--lx-ink-900);
}

.lx-btn--outline {
	background: none;
	border: 1px solid #5a4e44;
	padding: 17px 26px;
	color: var(--lx-paper);
}

.lx-btn--outline:hover {
	border-color: var(--lx-accent);
	color: var(--lx-accent);
}

/* Los dos botones van en fila y pegados a la izquierda. Woo maqueta `form.cart` con floats
   y márgenes propios, que dejaban «Llamar» debajo y desplazado a la derecha. */
.lx-actions,
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	margin: 16px 0 0;
	padding-top: 16px;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	float: none;
	margin: 0;
}

.woocommerce div.product form.cart div.quantity {
	margin: 0;
}

.woocommerce div.product form.cart div.quantity input {
	height: 52px;
	width: 72px;
	padding: 0 8px;
	background: #231c18;
	border: 1px solid var(--lx-line-2);
	border-radius: 2px;
	color: var(--lx-paper);
	text-align: center;
	font: 500 15px/1 Inter, system-ui, sans-serif;
}

/* --- Relacionadas -------------------------------------------------------- */

.woocommerce .related {
	grid-column: 1 / -1;
	padding: 90px var(--lx-gutter) 0;
	background: var(--lx-ink-600);
}

.woocommerce .related h2 {
	margin: 0 0 34px;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 38px;
	color: var(--lx-paper-2);
}

.woocommerce .related ul.products {
	margin: 0;
	padding-inline: 0;
	max-width: none;
}

@media (max-width: 1024px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.woocommerce div.product .product_title {
		font-size: 34px;
		line-height: 40px;
	}
}

/* =========================================================================
 * Carrito, pago y cuenta — la parte que el Figma no dibuja
 *
 * Solo se pinta con los mismos tokens: fondo oscuro, filetes de 1px, radios de 2 y el
 * naranja reservado a la acción principal. Nada de degradados ni tarjetas redondeadas.
 * ========================================================================= */

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
	background: var(--lx-card-alt);
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	padding: 24px;
}

.woocommerce table.shop_table {
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--lx-line);
	color: var(--lx-text);
	font-family: Inter, system-ui, sans-serif;
}

.woocommerce table.shop_table th {
	color: var(--lx-muted);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--lx-accent);
	color: #160f0b;
	border-radius: 2px;
	padding: 15px 28px;
	font: 600 14px/1 Inter, system-ui, sans-serif;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--lx-paper);
	color: var(--lx-ink-900);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single {
	background: #231c18;
	border: 1px solid var(--lx-line-2);
	border-radius: 2px;
	color: var(--lx-paper);
	padding: 13px 14px;
	font: 400 15px/1.4 Inter, system-ui, sans-serif;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	color: var(--lx-muted);
	font: 500 13px/1.4 Inter, system-ui, sans-serif;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--lx-card-alt);
	border-top-color: var(--lx-accent);
	color: var(--lx-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--lx-accent);
}

/* --- Pestañas y descripción larga ---------------------------------------

   El Figma no tiene pestañas: la descripción corta va junto al precio y la larga debajo, a
   ancho de lectura. Se ocultan los títulos de pestaña y se deja el panel. */

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	padding-top: 56px;
	border-top: 1px solid var(--lx-line);
	margin-top: 56px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 720px;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	margin: 0 0 16px;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 32px;
	color: var(--lx-paper-2);
}

.woocommerce div.product .woocommerce-tabs .panel p {
	font-size: 16px;
	line-height: 26px;
	color: #bdb3a6;
}

/* El icono de lupa del zoom es de Woo y no está en el diseño. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	display: none;
}

/* Las tarjetas de una fila igualan altura: sin esto, una foto de otra proporción desplaza el
   pie de su tarjeta y la fila se descuadra. */
.woocommerce ul.products {
	align-items: stretch;
}

.woocommerce ul.products li.product .lx-card {
	height: 100%;
}

/* --- Migas de pan de la ficha ------------------------------------------- */

/* Van fuera de la rejilla de dos columnas, en su propia banda, como en el Figma: fondo del
   nav interior y filete inferior. */
.woocommerce div.product .lx-migas {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 calc(var(--lx-gutter) * -1) 24px;
	padding: 15px var(--lx-gutter);
	border-bottom: 1px solid var(--lx-line);
	font: 400 13px/1.2 Inter, system-ui, sans-serif;
	color: var(--lx-muted-2);
}

.woocommerce div.product .lx-migas a {
	color: var(--lx-muted-2);
	text-decoration: none;
}

.woocommerce div.product .lx-migas a:hover {
	color: var(--lx-accent);
}

.woocommerce div.product .lx-migas span[aria-current] {
	color: var(--lx-text);
}

.lx-migas__sep {
	color: #3e332b;
}

/* El selector de cantidad de la ficha no está en el diseño: se oculta accesiblemente (sigue
   enviando 1 con el formulario). Las cantidades se ajustan en el carrito. */
.woocommerce div.product form.cart div.quantity {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}