/**
 * Fourriders Classic — capa de estilo para WooCommerce
 *
 * @version 1.3.0
 * @author  Zekmog
 *
 * Traduce el marcado clásico de WooCommerce (ul.products, div.product,
 * shop_table, form.checkout…) al lenguaje visual del diseño: fichas con borde
 * fino, tipografía mono para los datos, acento rojo en dosis mínimas.
 *
 * Se carga solo cuando WooCommerce está activo.
 */

/* ---------------------------------------------------------------------
   1. Rejilla y fichas del listado

   El ámbito es `ul.products` a secas, no un contenedor concreto: así el
   mismo diseño vale para la portada, el catálogo, los productos
   relacionados, las ventas cruzadas de la cesta y cualquier shortcode.

   El número de columnas lo dice el propio WooCommerce con la clase
   `columns-N` que pone en la lista, así que lo leemos de ahí.
   --------------------------------------------------------------------- */

/* Contenedores. `.fr-prods` es una rejilla en el prototipo, pero cuando
   envuelve una lista de WooCommerce la rejilla la pone la propia lista. */
.fr-prods,
.fr-shop-grid-wrap{ max-width: 1400px; margin: 0 auto; }
.fr-prods{ padding: 0 28px 20px; display: block; }
.fr-shop-grid-wrap{ padding: 0; }

/* La lista */
.woocommerce ul.products,
ul.products{
	--fr-cols: 3;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--fr-cols), 1fr);
}
ul.products.columns-1{ --fr-cols: 1; }
ul.products.columns-2{ --fr-cols: 2; }
ul.products.columns-3{ --fr-cols: 3; }
ul.products.columns-4{ --fr-cols: 4; }
ul.products.columns-5{ --fr-cols: 5; }
ul.products.columns-6{ --fr-cols: 6; }
.fr-shop-grid-wrap ul.products{ padding-top: 24px; }

/* La ficha. La especificidad sube a propósito por encima de la de
   WooCommerce (`.woocommerce ul.products li.product`), que impone anchos
   en porcentaje y floats incompatibles con una rejilla. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products > li{
	border: 1px solid var(--fr-line);
	background: var(--fr-paper);
	overflow: hidden;
	transition: .3s var(--fr-ease);
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	position: relative;
	width: auto;
	min-width: 0;
	max-width: none;
	float: none;
	clear: none;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
ul.products > li::before,
ul.products > li::after{ content: none; }
.woocommerce ul.products li.product:hover,
ul.products > li:hover{
	border-color: var(--fr-ink);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(22, 22, 22, .4);
}

/* Imagen */
.woocommerce ul.products li.product .fr-pic,
ul.products > li .fr-pic{
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: 1;
	background:
		radial-gradient(60% 60% at 50% 45%, rgba(22, 22, 22, .06), transparent 70%),
		var(--fr-paper-2);
	overflow: hidden;
}
.woocommerce ul.products li.product .fr-pic img,
ul.products > li .fr-pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	display: block;
	transition: transform .5s var(--fr-ease);
}
.woocommerce ul.products li.product:hover .fr-pic img,
ul.products > li:hover .fr-pic img{ transform: scale(1.04); }

/* Etiquetas de oferta y novedad, siempre sobre la imagen */
.woocommerce ul.products li.product :is(.onsale, .fr-badge),
ul.products > li :is(.onsale, .fr-badge){
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 1.4;
	font-family: var(--fr-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 9px;
	background: var(--fr-paper);
	color: var(--fr-red);
	border: 1px solid var(--fr-red);
	border-radius: 0;
	z-index: 3;
}
.woocommerce ul.products li.product .fr-badge:not(.fr-sale),
ul.products > li .fr-badge:not(.fr-sale){
	background: var(--fr-ink);
	color: var(--fr-paper);
	border-color: var(--fr-ink);
	left: auto;
	right: 12px;
}

/* Cuerpo de la ficha */
.woocommerce ul.products li.product .fr-body,
ul.products > li .fr-body{
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}
.woocommerce ul.products li.product .fr-cat-l,
ul.products > li .fr-cat-l{
	font-family: var(--fr-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fr-gray-2);
	line-height: 1.4;
}
.woocommerce ul.products li.product h4,
ul.products > li h4{
	font-family: var(--fr-sans);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product .star-rating,
ul.products > li .star-rating{
	font-size: .8em;
	color: var(--fr-ink);
	margin: 2px 0;
	float: none;
}
.woocommerce ul.products li.product .price,
ul.products > li .price{
	margin: auto 0 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--fr-mono);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--fr-ink);
	padding-top: 8px;
}
.woocommerce ul.products li.product .price del,
ul.products > li .price del{
	font-size: .85rem;
	color: var(--fr-gray-2);
	text-decoration: line-through;
	font-weight: 400;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins,
ul.products > li .price ins{ text-decoration: none; background: none; font-weight: 700; }

/* Botón «Añadir a la cesta» de la tarjeta: contorno fino, nunca el gris
   con poco contraste que trae WooCommerce por defecto. */
.woocommerce ul.products li.product :is(a.button, button.button, a.added_to_cart),
ul.products > li :is(a.button, button.button, a.added_to_cart){
	display: block;
	width: 100%;
	margin: 14px 0 0;
	font-family: var(--fr-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 400;
	border: 1px solid var(--fr-line);
	border-radius: 0;
	background: transparent;
	background-color: transparent;
	background-image: none;
	color: var(--fr-ink);
	padding: 11px;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	transition: .25s;
	cursor: pointer;
}
.woocommerce ul.products li.product :is(a.button, button.button):hover,
ul.products > li :is(a.button, button.button):hover{
	background: var(--fr-ink);
	background-color: var(--fr-ink);
	color: var(--fr-paper);
	border-color: var(--fr-ink);
}
.woocommerce ul.products li.product a.added_to_cart,
ul.products > li a.added_to_cart{ margin-top: 8px; border-style: dashed; }

/* Títulos de las secciones de relacionados, ventas cruzadas y superiores */
.woocommerce :is(.related, .upsells, .cross-sells) > h2{
	font-family: var(--fr-display);
	text-transform: uppercase;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	letter-spacing: -.01em;
	margin: 0 0 26px;
}
.woocommerce :is(.related, .upsells, .cross-sells){ width: auto; float: none; clear: both; }

/* ---------------------------------------------------------------------
   2. Barra superior del catálogo y paginación
   --------------------------------------------------------------------- */

.fr-toolbar .woocommerce-result-count{
	font-family: var(--fr-mono);
	font-size: 12px;
	letter-spacing: .05em;
	color: var(--fr-gray);
	margin: 0;
	float: none;
}
.fr-toolbar .woocommerce-ordering{ margin: 0; float: none; }
.fr-toolbar select{
	font-family: var(--fr-sans);
	font-size: 13px;
	color: var(--fr-ink);
	background: var(--fr-paper);
	border: 1px solid var(--fr-line);
	border-radius: 0;
	padding: 9px 12px;
	cursor: pointer;
}

.woocommerce-pagination{
	display: flex;
	justify-content: center;
	padding: 54px 0 10px;
	font-family: var(--fr-mono);
}
.woocommerce-pagination ul.page-numbers{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
.woocommerce-pagination ul.page-numbers li{ border: none; margin: 0; overflow: visible; }
.woocommerce-pagination :is(a, span).page-numbers{
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fr-line);
	color: var(--fr-gray);
	font-size: 13px;
	padding: 0;
	transition: .2s;
	background: transparent;
}
.woocommerce-pagination a.page-numbers:hover{ border-color: var(--fr-ink); color: var(--fr-ink); background: transparent; }
.woocommerce-pagination .page-numbers.current{ background: var(--fr-ink); color: #fff; border-color: var(--fr-ink); }
.woocommerce-pagination .page-numbers.dots{ border-color: transparent; width: auto; min-width: 20px; color: var(--fr-gray-2); }
.woocommerce-pagination :is(.prev, .next){
	width: auto;
	padding: 0 18px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. Ficha de producto
   --------------------------------------------------------------------- */

.fr-product-page .fr-wc-content{ max-width: 1400px; margin: 0 auto; padding: 0 28px; }

.fr-product-page div.product{
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 54px;
	align-items: start;
	padding: 38px 0 0;
}
.fr-product-page div.product::before,
.fr-product-page div.product::after{ content: none; }

.fr-product-page div.product .woocommerce-product-gallery{
	position: sticky;
	top: 96px;
	width: 100%;
	float: none;
	margin: 0;
}
.fr-product-page .woocommerce-product-gallery__image img{
	border: 1px solid var(--fr-line);
	background: var(--fr-paper-2);
}
.fr-product-page .flex-control-thumbs{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.fr-product-page .flex-control-thumbs li{ width: auto; float: none; margin: 0; }
.fr-product-page .flex-control-thumbs img{ border: 1px solid var(--fr-line); opacity: .6; transition: .2s; }
.fr-product-page .flex-control-thumbs .flex-active,
.fr-product-page .flex-control-thumbs img:hover{ opacity: 1; border-color: var(--fr-ink); }
.fr-product-page div.product .onsale{
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	font-family: var(--fr-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 11px;
	background: var(--fr-paper);
	color: var(--fr-red);
	border: 1px solid var(--fr-red);
	border-radius: 0;
	z-index: 5;
	line-height: 1.4;
}

.fr-product-page div.product .summary{
	width: 100%;
	float: none;
	margin: 0;
}
.fr-product-page div.product .product_title{
	font-family: var(--fr-display);
	text-transform: uppercase;
	line-height: .92;
	letter-spacing: -.01em;
	font-size: clamp(1.9rem, 4vw, 3rem);
	margin: 0 0 14px;
}
.fr-product-page div.product .woocommerce-product-rating{
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-family: var(--fr-mono);
	font-size: 12px;
	color: var(--fr-gray);
}
.fr-product-page div.product .woocommerce-product-rating .star-rating{ float: none; color: var(--fr-ink); }
.fr-product-page div.product .woocommerce-review-link{ color: var(--fr-gray); }

.fr-product-page div.product > .summary > .price,
.fr-product-page div.product .summary .price{
	font-family: var(--fr-mono);
	font-size: 2rem;
	font-weight: 700;
	color: var(--fr-ink);
	margin: 0 0 20px;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}
.fr-product-page div.product .summary .price del{ font-size: 1rem; color: var(--fr-gray-2); opacity: 1; }
.fr-product-page div.product .summary .price ins{ text-decoration: none; background: none; }

.fr-product-page .woocommerce-product-details__short-description{
	color: var(--fr-ink-soft);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 26px;
}

/* Formulario de compra */
.fr-product-page form.cart{ display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin: 0 0 8px; }
.fr-product-page form.cart .quantity{ display: flex; align-items: center; border: 1px solid var(--fr-ink); }
.fr-product-page form.cart .quantity input{
	width: 78px;
	min-height: 54px;
	text-align: center;
	border: none;
	background: var(--fr-paper);
	font-family: var(--fr-mono);
	font-size: 15px;
	color: var(--fr-ink);
}
.fr-product-page form.cart button.single_add_to_cart_button{
	flex: 1;
	min-width: 240px;
	border-radius: 0;
	border: 1.5px solid var(--fr-ink);
	background: var(--fr-ink);
	color: var(--fr-paper);
	font-family: var(--fr-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 16px 28px;
	transition: .25s var(--fr-ease);
	cursor: pointer;
}
.fr-product-page form.cart button.single_add_to_cart_button:hover{
	background: var(--fr-ink-soft);
	border-color: var(--fr-ink-soft);
}

/* Mientras falte algún atributo por elegir, o la combinación elegida esté
   agotada, WooCommerce deshabilita el botón. Se nota: un botón negro que no
   hace nada al pulsarlo desconcierta más que uno claramente apagado. */
.fr-product-page form.cart button.single_add_to_cart_button:disabled,
.fr-product-page form.cart button.single_add_to_cart_button.disabled{
	background: var(--fr-paper-2);
	border-color: var(--fr-line);
	color: var(--fr-gray-2);
	cursor: not-allowed;
	opacity: 1;
}
.fr-product-page form.cart button.single_add_to_cart_button:disabled:hover,
.fr-product-page form.cart button.single_add_to_cart_button.disabled:hover{
	background: var(--fr-paper-2);
	border-color: var(--fr-line);
}

/* Variaciones */
.fr-product-page table.variations{ width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.fr-product-page table.variations th,
.fr-product-page table.variations td{ border: none; padding: 0; }
.fr-product-page table.variations th{
	font-family: var(--fr-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fr-gray);
	text-align: left;
	padding: 12px 0 6px;
	font-weight: 400;
	display: block;
}
.fr-product-page table.variations td{ display: block; padding-bottom: 14px; }
.fr-product-page table.variations select{
	width: 100%;
	border: 1px solid var(--fr-line);
	background: var(--fr-paper);
	border-radius: 0;
	padding: 13px 14px;
	font-family: var(--fr-sans);
	font-size: 14px;
	color: var(--fr-ink);
}
/* Botones de atributo.

   Los <select> siguen en el DOM porque son lo que lee el script de
   variaciones de WooCommerce; solo dejan de verse. Y dejan de verse desde
   JS —la clase `fr-vform` la pone el script—, no desde aquí: sin JavaScript
   los botones no harían nada, así que en ese caso lo que se ve es el
   desplegable de siempre, funcionando. */
.fr-swatches{ display: none; }

.fr-vform .fr-swatches{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.fr-vform table.variations select{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fr-swatch{
	position: relative;
	min-width: 52px;
	padding: 11px 15px;
	border: 1px solid var(--fr-line);
	background: var(--fr-paper);
	color: var(--fr-ink);
	font-family: var(--fr-mono);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	border-radius: 0;
	transition: border-color .15s, background .15s, color .15s;
}
.fr-swatch:hover{ border-color: var(--fr-ink); }
.fr-swatch:focus-visible{ outline: 2px solid var(--fr-red); outline-offset: 2px; }

/* Elegido */
.fr-swatch.is-selected{
	background: var(--fr-ink);
	border-color: var(--fr-ink);
	color: var(--fr-paper);
}

/* Agotado: la combinación existe pero no hay existencias. Se deja pulsable
   a propósito, para que WooCommerce muestre su aviso y quede claro por qué
   no se puede comprar. */
.fr-swatch--out{
	color: var(--fr-gray-2);
	border-color: var(--fr-line);
	border-style: dashed;
	background: var(--fr-paper-2);
}
.fr-swatch--out .fr-swatch-t{ text-decoration: line-through; text-decoration-thickness: 1px; }
.fr-swatch--out.is-selected{
	background: var(--fr-paper-2);
	color: var(--fr-ink);
	border-color: var(--fr-red);
	border-style: solid;
}

/* Imposible: esa combinación no existe con lo ya elegido. */
.fr-swatch--off,
.fr-swatch:disabled{
	color: var(--fr-gray-2);
	border-color: var(--fr-line);
	background: transparent;
	opacity: .38;
	cursor: not-allowed;
}
.fr-swatch--off:hover{ border-color: var(--fr-line); }

/* Una raya diagonal deja claro de un vistazo cuáles no llevan a ninguna
   parte, sin depender solo del color. */
.fr-swatch--off::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right,
		transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px),
		currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
	.fr-swatch{ transition: none; }
}

.fr-product-page .reset_variations{
	font-family: var(--fr-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fr-gray);
}

.fr-product-page .stock{
	font-family: var(--fr-mono);
	font-size: 12px;
	color: var(--fr-gray);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
}
.fr-product-page .stock::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3a7d44; }
.fr-product-page .stock.out-of-stock::before{ background: var(--fr-red); }

.fr-product-page .product_meta{
	margin-top: 26px;
	border-top: 1px solid var(--fr-line);
	padding-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	color: var(--fr-ink-soft);
}
.fr-product-page .product_meta > span{ display: flex; gap: 14px; flex-wrap: wrap; }
.fr-product-page .product_meta .sku_wrapper,
.fr-product-page .product_meta .posted_in,
.fr-product-page .product_meta .tagged_as{ font-size: 13px; }

/* Pestañas */
.fr-product-page .woocommerce-tabs{ grid-column: 1 / -1; margin-top: 70px; }
.fr-product-page .woocommerce-tabs ul.tabs{
	display: flex;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--fr-line);
	flex-wrap: wrap;
}
.fr-product-page .woocommerce-tabs ul.tabs::before{ content: none; }
.fr-product-page .woocommerce-tabs ul.tabs li{
	background: none;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.fr-product-page .woocommerce-tabs ul.tabs li::before,
.fr-product-page .woocommerce-tabs ul.tabs li::after{ content: none; }
.fr-product-page .woocommerce-tabs ul.tabs li a{
	display: block;
	font-family: var(--fr-mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fr-gray);
	padding: 0 0 16px;
	position: relative;
	font-weight: 400;
	transition: .2s;
}
.fr-product-page .woocommerce-tabs ul.tabs li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--fr-red);
	transition: width .3s var(--fr-ease);
}
.fr-product-page .woocommerce-tabs ul.tabs li.active a{ color: var(--fr-ink); }
.fr-product-page .woocommerce-tabs ul.tabs li.active a::after{ width: 100%; }
.fr-product-page .woocommerce-Tabs-panel{ padding: 34px 0 6px; max-width: 760px; }
.fr-product-page .woocommerce-Tabs-panel > h2{ display: none; }
.fr-product-page .woocommerce-Tabs-panel p{ color: var(--fr-ink-soft); font-size: 15.5px; line-height: 1.7; }
.fr-product-page table.shop_attributes{ width: 100%; border-collapse: collapse; }
.fr-product-page table.shop_attributes tr{ border-bottom: 1px solid var(--fr-line); }
.fr-product-page table.shop_attributes th{
	font-family: var(--fr-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fr-gray);
	width: 200px;
	text-align: left;
	padding: 13px 0;
	font-weight: 400;
	background: none;
}
.fr-product-page table.shop_attributes td{ padding: 13px 0; font-size: 14px; color: var(--fr-ink-soft); font-style: normal; }
.fr-product-page table.shop_attributes td p{ margin: 0; }

/* Relacionados y superiores: ocupan todo el ancho bajo la ficha */
.fr-product-page :is(.related, .upsells){ grid-column: 1 / -1; margin-top: 70px; }

/* ---------------------------------------------------------------------
   4. Cesta, finalizar compra y mi cuenta
   --------------------------------------------------------------------- */

.fr-wc-page{ max-width: 1400px; margin: 0 auto; padding: 32px 28px 60px; }

.woocommerce table.shop_table{
	--fr-cart-thumb: 84px;
	border: none;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}
.woocommerce table.shop_table th{
	font-family: var(--fr-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fr-gray);
	font-weight: 400;
	padding: 14px 12px 14px 0;
	border-bottom: 1px solid var(--fr-line);
}
.woocommerce table.shop_table td{
	padding: 22px 12px 22px 0;
	border-top: none;
	border-bottom: 1px solid var(--fr-line);
	vertical-align: middle;
}
/* Miniatura de la cesta y del pedido.

   Aquí había un estirón feo. La regla anterior fijaba `width: 84px` y no
   decía nada del alto, y los atributos `width`/`height` que WooCommerce pone
   en el <img> son sugerencias de presentación: son CSS de baja prioridad,
   pero CSS al fin y al cabo. Al ganar el ancho declarado aquí y quedarse el
   alto del atributo, una miniatura cuadrada de 300×300 se pintaba a 84×300
   —la misma imagen, estirada ocho veces a lo alto— y la fila de la cesta se
   iba a 345px. Con una foto más alta, peor.

   La solución no es solo `height: auto`: eso arregla el estirón pero deja el
   alto a merced de la proporción de cada foto, y una imagen apaisada o muy
   alta seguiría descuadrando la tabla. La miniatura es una casilla cuadrada
   fija, como las fichas del catálogo, y la foto se encaja dentro con
   `object-fit`. */
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce table.shop_table img{
	width: var(--fr-cart-thumb);
	height: var(--fr-cart-thumb);
	max-width: var(--fr-cart-thumb);
	object-fit: cover;
	object-position: center;
	border: 1px solid var(--fr-line);
	background: var(--fr-paper-2);
	display: block;
}
.woocommerce table.cart .product-name a{ font-weight: 700; font-size: 1.05rem; color: var(--fr-ink); }
.woocommerce table.cart .variation{ font-family: var(--fr-mono); font-size: 11.5px; color: var(--fr-gray); }
.woocommerce table.cart :is(.product-price, .product-subtotal){ font-family: var(--fr-mono); font-weight: 700; }
.woocommerce a.remove{
	color: var(--fr-gray) !important;
	font-weight: 400;
	border-radius: 0;
	line-height: 1;
}
.woocommerce a.remove:hover{ background: transparent !important; color: var(--fr-red) !important; }

.woocommerce .quantity input.qty{
	border: 1px solid var(--fr-line);
	background: var(--fr-paper);
	font-family: var(--fr-mono);
	font-size: 14px;
	padding: 10px 6px;
	width: 68px;
	text-align: center;
	border-radius: 0;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order{
	border: 1px solid var(--fr-line);
	background: var(--fr-paper-2);
	padding: 28px;
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3{
	font-family: var(--fr-display);
	text-transform: uppercase;
	font-size: 1.1rem;
	margin: 0 0 20px;
	letter-spacing: -.005em;
}
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th{ padding: 10px 0; }
.woocommerce .cart_totals .order-total .amount{ font-family: var(--fr-mono); font-size: 1.15rem; }

/* Botones generales de WooCommerce */
.woocommerce :is(a.button, button.button, input.button, a.button.alt, button.button.alt, .woocommerce-Button){
	border-radius: 0;
	font-family: var(--fr-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--fr-ink);
	background-color: var(--fr-ink);
	color: var(--fr-paper);
	border: 1.5px solid var(--fr-ink);
	padding: 15px 26px;
	transition: .25s var(--fr-ease);
	line-height: 1.2;
}
.woocommerce :is(a.button, button.button, input.button, a.button.alt, button.button.alt):hover{
	background: var(--fr-ink-soft);
	background-color: var(--fr-ink-soft);
	color: var(--fr-paper);
	border-color: var(--fr-ink-soft);
}
.woocommerce .checkout-button.button,
.woocommerce #place_order{ width: 100%; text-align: center; margin-top: 10px; }

/* Formularios del checkout y de la cuenta */
.woocommerce form .form-row{ padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label{
	display: block;
	font-family: var(--fr-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fr-gray);
	margin-bottom: 7px;
}
.woocommerce form .form-row :is(input.input-text, textarea, select),
.woocommerce .select2-container .select2-selection--single{
	width: 100%;
	border: 1px solid var(--fr-line);
	background: var(--fr-paper);
	padding: 13px 14px;
	font-family: var(--fr-sans);
	font-size: 14px;
	color: var(--fr-ink);
	border-radius: 0;
	height: auto;
}
.woocommerce form .form-row :is(input.input-text, textarea):focus{ outline: none; border-color: var(--fr-ink); }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
	line-height: 1.5;
	padding: 0;
	color: var(--fr-ink);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{ height: 100%; }

/* Finalizar compra.

   Aquí NO se usa rejilla, y es a propósito. WooCommerce emite dentro del
   formulario tres hermanos sueltos —los datos del cliente, el encabezado
   «Tu pedido» y la caja del pedido—, no dos contenedores. En una rejilla de
   dos columnas el encabezado ocupa la fila 1 de la columna derecha y la caja
   no cabe ya en esa celda, así que baja a la fila 2. Como la altura de la
   fila 1 la marca la columna de datos, que es muy alta, la caja del pedido
   se desplomaba hasta el final del formulario: ese era el descuadre.

   Con flotados el encabezado y la caja se apilan solos en la columna
   derecha, sin importar cuántos hijos añadan WooCommerce o los plugins de
   pago (cupones, avisos, campos extra). */
.woocommerce-checkout .woocommerce{ display: block; }
.woocommerce-checkout form.checkout{
	display: block;

	/* Ancho de la columna del pedido y separación entre columnas. Cámbialos
	   aquí (o desde un tema hijo) y el reparto se recalcula solo. */
	--fr-checkout-aside: 380px;
	--fr-checkout-gap: 46px;
}

/* Limpieza de flotados: el formulario tiene que envolver sus dos columnas
   para que el pie de la página no se suba. */
.woocommerce-checkout form.checkout::after{
	content: "";
	display: table;
	clear: both;
}

.woocommerce-checkout form.checkout #customer_details{
	float: left;
	width: calc(100% - var(--fr-checkout-aside) - var(--fr-checkout-gap));
	margin: 0 0 40px;
}
.woocommerce-checkout form.checkout #order_review_heading{
	float: right;
	clear: right;
	width: var(--fr-checkout-aside);
	margin-top: 0;
}
.woocommerce-checkout form.checkout #order_review{
	float: right;
	clear: right;
	width: var(--fr-checkout-aside);
	margin: 0 0 40px;
}

/* La columna izquierda ya no dispone del ancho completo, así que los datos
   de facturación y los de envío se apilan en lugar de ir a dos columnas.
   Por encima de 1280px sí caben las dos. */
.woocommerce-checkout #customer_details{
	display: block;
	width: auto;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
	width: auto;
	max-width: none;
	float: none;
}
.woocommerce-checkout #customer_details .col-2{ margin-top: 34px; }

@media (min-width: 1281px){
	.woocommerce-checkout #customer_details{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px;
	}
	.woocommerce-checkout #customer_details .col-2{ margin-top: 0; }
}
.woocommerce-checkout #payment{ background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods{
	border-bottom: 1px solid var(--fr-line);
	padding: 0 0 14px;
	list-style: none;
	margin: 0 0 14px;
}
/* Cada forma de pago es un recuadro entero pulsable, no solo el redondel y
   su etiqueta. La parte de «pulsar en cualquier sitio» la resuelve el script;
   aquí va lo que lo hace evidente: el cursor de mano y un estado elegido que
   se distingue de un vistazo, que antes no existía.

   La fila se monta en rejilla —redondel, etiqueta, y debajo la descripción a
   todo el ancho— en vez de dejarla al flujo, para que la etiqueta ocupe todo
   el ancho disponible y sea pulsable de lado a lado incluso sin JavaScript. */
.woocommerce-checkout #payment ul.payment_methods li{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	border: 1px solid var(--fr-line);
	padding: 14px 16px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: .2s;
}
.woocommerce-checkout #payment ul.payment_methods li:hover{ border-color: var(--fr-ink); }

/* El redondel desaparece de la vista pero NO del formulario: sigue ahí, con
   su tamaño mínimo y transparente, porque es el que guarda la elección, el
   que recibe el foco al tabular y el que anuncia el lector de pantalla. Si se
   quitara con `display:none` dejaría de ser enfocable y la página se volvería
   inmanejable con el teclado. */
.woocommerce-checkout #payment ul.payment_methods li > input{
	position: absolute;
	top: 50%;
	left: 16px;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}
.woocommerce-checkout #payment ul.payment_methods li > label{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
/* Los logotipos que meten algunas pasarelas dentro de la etiqueta. La regla
   global del tema pinta las imágenes en bloque, y aquí tienen que ir en línea
   con el texto. */
.woocommerce-checkout #payment ul.payment_methods li > label img{
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 8px;
	max-height: 26px;
	width: auto;
}
/* Cualquier otra cosa que añada la pasarela ocupa la fila entera. */
.woocommerce-checkout #payment ul.payment_methods li > *:not(input):not(label){
	grid-column: 1 / -1;
}
.woocommerce-checkout #payment ul.payment_methods li > .payment_box{ cursor: auto; }

/* Elegida.

   Sin redondel a la vista, el recuadro tiene que decirlo él solo, y además
   distinguirse de un recuadro simplemente señalado con el ratón —que también
   oscurece el borde—. De ahí la banda roja de la izquierda, la misma marca
   que el tema usa en los avisos. Va como sombra interior y no como borde para
   que no mueva ni un píxel el contenido al elegir. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){
	border-color: var(--fr-ink);
	background: var(--fr-paper-2);
	box-shadow: inset 3px 0 0 var(--fr-red);
}

/* Foco del teclado: como el redondel no se ve, lo enseña el recuadro. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:focus-visible){
	outline: 2px solid var(--fr-red);
	outline-offset: 2px;
	border-color: var(--fr-ink);
}
.woocommerce-checkout #payment div.payment_box{
	background: var(--fr-paper);
	border: 1px solid var(--fr-line);
	border-radius: 0;
	font-size: 13px;
	color: var(--fr-ink-soft);
}
.woocommerce-checkout #payment div.payment_box::before{ content: none; }

/* Avisos */
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews){
	border-radius: 0;
	border: none;
	border-left: 3px solid var(--fr-red);
	background: var(--fr-paper-2);
	color: var(--fr-ink-soft);
	font-size: 14px;
	padding: 16px 20px;
	margin: 0 0 22px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.woocommerce .woocommerce-message{ border-left-color: #3a7d44; }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before{ content: none; }
.woocommerce :is(.woocommerce-message, .woocommerce-info) .button{ margin-left: auto; padding: 10px 18px; font-size: 11px; }

/* Mi cuenta.

   Dos avisos importantes:

   1. WooCommerce mete `.woocommerce-notices-wrapper` como primer hijo del
      contenedor. En una rejilla eso es una celda más: se quedaba con la
      columna del menú y empujaba el contenido a una segunda fila. Por eso
      cualquier hijo que no sea el menú o el contenido ocupa el ancho entero.

   2. Cuando el visitante no ha iniciado sesión no hay menú lateral, solo el
      formulario de acceso. Si dejáramos la rejilla fija, ese formulario
      se metería en la columna de 250px. La rejilla solo se activa si el
      menú existe de verdad. */
.woocommerce-account .woocommerce{ display: block; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 46px;
	align-items: start;
}
.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content){
	grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-MyAccount-navigation{ width: auto; float: none; border-left: 2px solid var(--fr-line); }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a{
	display: block;
	padding: 11px 18px;
	font-size: 13.5px;
	color: var(--fr-gray);
	border-left: 2px solid transparent;
	margin-left: -2px;
	transition: .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{ color: var(--fr-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{
	color: var(--fr-ink);
	border-color: var(--fr-red);
	font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content{ width: auto; float: none; min-width: 0; }

/* ---------------------------------------------------------------------
   5. Pantallas pequeñas
   --------------------------------------------------------------------- */

@media (max-width: 1100px){
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6{ --fr-cols: 3; }
}
@media (max-width: 980px){
	ul.products{ --fr-cols: 2 !important; }
	.fr-product-page div.product{ grid-template-columns: 1fr; gap: 34px; }
	.fr-product-page div.product .woocommerce-product-gallery{ position: static; }
	.woocommerce-account .woocommerce{ grid-template-columns: 1fr; }
	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review{
		float: none;
		clear: both;
		width: 100%;
	}
	.woocommerce-checkout form.checkout #order_review_heading{ margin-top: 34px; }
	.woocommerce-account .woocommerce-MyAccount-navigation{ border-left: none; border-bottom: 1px solid var(--fr-line); }
	.fr-wc-page{ padding: 24px 20px 40px; }
}
@media (max-width: 560px){
	ul.products{ --fr-cols: 2 !important; gap: 12px; }
	ul.products > li .fr-body{ padding: 13px; }
	.fr-product-page form.cart button.single_add_to_cart_button{ min-width: 100%; }
	.woocommerce table.shop_table{ --fr-cart-thumb: 56px; }
}

/* ---------------------------------------------------------------------
   6. Correcciones finas
   --------------------------------------------------------------------- */

/* WooCommerce imprime el precio tachado ANTES del rebajado. El diseño lo
   quiere al revés: primero lo que se paga, y detrás lo que costaba. */
ul.products > li .price,
.fr-product-page div.product .summary .price{ flex-direction: row; }
ul.products > li .price ins,
.fr-product-page div.product .summary .price ins{ order: 1; }
ul.products > li .price del,
.fr-product-page div.product .summary .price del{ order: 2; }

/* Cesta a dos columnas, como en el diseño original */
.woocommerce-cart .fr-wc-page > .woocommerce{
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 46px;
	align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .fr-notice{ grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form{ grid-column: 1; min-width: 0; }
.woocommerce-cart .cart-collaterals{
	grid-column: 2;
	width: auto;
	float: none;
	position: sticky;
	top: 96px;
}
.woocommerce-cart .cart-collaterals .cart_totals{ width: auto; float: none; }
.woocommerce-cart .cart-collaterals .cross-sells{ width: auto; float: none; margin-top: 26px; }

/* Los totales se leen mejor con la etiqueta a la izquierda */
.woocommerce .cart_totals table.shop_table th{
	text-align: left;
	border-bottom: 1px solid var(--fr-line);
	padding: 11px 0;
	width: 45%;
}
.woocommerce .cart_totals table.shop_table td{
	text-align: right;
	border-bottom: 1px solid var(--fr-line);
	padding: 11px 0;
	font-family: var(--fr-mono);
}
.woocommerce .cart_totals table.shop_table tr:last-child :is(th, td){ border-bottom: none; }

/* Botones de acción a ancho completo dentro de su caja */
.woocommerce .checkout-button.button,
.woocommerce #place_order,
.woocommerce .cart_totals .button{ display: block; width: 100%; text-align: center; }

/* La fila de acciones de la cesta (cupón + actualizar) */
.woocommerce table.cart td.actions{ padding: 22px 0; }
.woocommerce table.cart td.actions .coupon{ display: flex; gap: 10px; float: none; margin-bottom: 14px; }
.woocommerce table.cart td.actions .coupon .input-text{
	width: auto;
	flex: 1;
	max-width: 260px;
	border: 1px solid var(--fr-line);
	background: var(--fr-paper);
	padding: 13px 14px;
	font-family: var(--fr-sans);
	font-size: 14px;
	border-radius: 0;
}

@media (max-width: 980px){
	.woocommerce-cart .fr-wc-page > .woocommerce{ grid-template-columns: 1fr; }
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals{ grid-column: 1; position: static; }
}

/* ---------------------------------------------------------------------
   7. Correcciones sobre el CSS que trae WooCommerce
   --------------------------------------------------------------------- */

/* Galería de la ficha a todo el ancho de su columna. WooCommerce la deja
   al 48% en su hoja de maquetación, que el tema retira. */
.fr-product-page div.product .woocommerce-product-gallery,
.fr-product-page div.product div.images{
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	opacity: 1 !important;
}
.fr-product-page div.product .woocommerce-product-gallery__wrapper{ margin: 0; }
.fr-product-page div.product .woocommerce-product-gallery__image{ width: 100%; }
.fr-product-page div.product .woocommerce-product-gallery__image img{
	width: 100%;
	height: auto;
	display: block;
}
.fr-product-page div.product .woocommerce-product-gallery .flex-viewport{ width: 100%; }
.fr-product-page div.product .summary.entry-summary{ width: 100%; max-width: none; float: none; }

/* Formularios a dos columnas (mi cuenta, checkout, direcciones) */
.woocommerce .col2-set,
.woocommerce-page .col2-set{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	width: auto;
}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2{
	width: auto;
	max-width: none;
	float: none;
}

/* Campos a media anchura. Se usan floats a propósito y no inline-block:
   con inline-block el espacio en blanco entre las dos etiquetas cuenta como
   un carácter y basta para que la segunda columna baje de línea. */
.woocommerce form .form-row{ display: block; width: 100%; float: none; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{ width: calc(50% - 8px); }
.woocommerce form .form-row-first{ float: left; clear: left; }
.woocommerce form .form-row-last{ float: right; clear: right; }
.woocommerce form .form-row-wide,
.woocommerce form .form-row:not(.form-row-first):not(.form-row-last){ width: 100%; clear: both; }
.woocommerce form::after,
.woocommerce form p::after{ content: ""; display: table; clear: both; }

/* Mi cuenta: el contenido necesita todo el ancho disponible */
.woocommerce-account .woocommerce-MyAccount-content{ width: auto; float: none; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content form{ max-width: 640px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{ width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table{ width: 100%; }
.woocommerce-account fieldset{
	border: 1px solid var(--fr-line);
	padding: 22px;
	margin: 26px 0 0;
}
.woocommerce-account fieldset legend{
	font-family: var(--fr-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fr-gray);
	padding: 0 8px;
}

/* Formulario de acceso y registro */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password{
	border: 1px solid var(--fr-line);
	border-radius: 0;
	padding: 26px;
	margin: 0 0 26px;
	max-width: 640px;
}

/* Contraste de los botones: WooCommerce los pinta en gris claro con texto
   gris oscuro. Aquí van siempre en carbón sobre papel, o al revés. */
/* Ojo con `:is()`: adopta la especificidad de su argumento más alto. Si se
   mete aquí `#respond input#submit` (dos IDs), toda la regla pasa a pesar
   como si tuviera dos IDs y aplasta al botón de contorno de las tarjetas.
   Por eso el selector con ID va aparte. */
.woocommerce #respond input#submit,
.woocommerce :is(a.button, button.button, input.button, .woocommerce-Button),
.woocommerce-page :is(a.button, button.button, input.button),
.woocommerce :is(a.button.alt, button.button.alt, input.button.alt){
	background: var(--fr-ink);
	background-color: var(--fr-ink);
	background-image: none;
	color: var(--fr-paper);
	border: 1.5px solid var(--fr-ink);
	border-radius: 0;
	text-shadow: none;
	font-family: var(--fr-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 15px 26px;
	line-height: 1.2;
	transition: .25s var(--fr-ease);
}
.woocommerce #respond input#submit:hover,
.woocommerce :is(a.button, button.button, input.button, .woocommerce-Button):hover,
.woocommerce :is(a.button.alt, button.button.alt, input.button.alt):hover{
	background: var(--fr-ink-soft);
	background-color: var(--fr-ink-soft);
	color: var(--fr-paper);
	border-color: var(--fr-ink-soft);
}
.woocommerce :is(a.button, button.button, input.button):disabled,
.woocommerce :is(a.button, button.button, input.button).disabled{
	background: var(--fr-gray-2);
	background-color: var(--fr-gray-2);
	border-color: var(--fr-gray-2);
	color: var(--fr-paper);
	opacity: 1;
}

/* Ventas cruzadas de la cesta: mismo aire que el resto de rejillas */
.woocommerce .cross-sells{ margin-top: 40px; }
.woocommerce .cross-sells > h2{ font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

/* WooCommerce afina el ancho de la ficha con selectores que incluyen la
   clase `columns-N` (`.woocommerce ul.products.columns-3 li.product`), y esa
   especificidad es mayor que la de la regla general de arriba. Repetimos aquí
   el dimensionado incluyendo esa clase para que la rejilla mande siempre,
   incluso si otro plugin vuelve a cargar la hoja de maquetación. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] > li{
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	float: none;
	clear: none;
}

/* ---------------------------------------------------------------------
   8. Clearfix de WooCommerce contra CSS Grid

   `woocommerce.css` limpia flotantes con `::before { content:" " }` y
   `::after { content:" " }` en sus contenedores. Eso es inofensivo con
   floats, pero en un contenedor grid ambos pseudoelementos se convierten
   en celdas: la primera fila arranca con un hueco vacío y toda la rejilla
   se desplaza una posición. Como aquí esos contenedores SON rejillas, hay
   que anularlos.
   --------------------------------------------------------------------- */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce div.product::before,
.woocommerce div.product::after,
.fr-product-page div.product::before,
.fr-product-page div.product::after,
.woocommerce-cart .fr-wc-page > .woocommerce::before,
.woocommerce-cart .fr-wc-page > .woocommerce::after,
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after,
.woocommerce-checkout #payment ul.payment_methods li::before,
.woocommerce-checkout #payment ul.payment_methods li::after{
	content: none;
	display: none;
}

/* Fichas de subcategoría.

   Las monta `woocommerce/content-product_cat.php` con las mismas piezas que
   la tarjeta de producto, así que casi todo el estilo lo heredan de la
   sección 1 y aquí solo queda el recuento.

   Antes se estilaban aparte y salían mal: el título aparecía pegado al borde
   de la tarjeta, sin el margen interior de las demás. El motivo era de
   especificidad. La regla del tema era

       ul.products > li.product-category .woocommerce-loop-category__title

   —tres clases— y WooCommerce trae

       .woocommerce ul.products li.product .woocommerce-loop-category__title

   —cuatro—, así que ganaba el plugin y aplicaba su `padding: .5em 0`, sin
   nada a los lados. Con la estructura de tarjeta normal el problema
   desaparece de raíz, porque el margen interior lo pone `.fr-body`, que sí
   está bien especificada.

   Se deja además una defensa por si algún plugin pinta estas fichas con el
   marcado original de WooCommerce: mismos selectores que usa el plugin, para
   empatar en especificidad y ganar por orden de carga. */
.woocommerce ul.products li.product .fr-body .fr-cat-n,
ul.products > li .fr-body .fr-cat-n{
	margin: auto 0 0;
	padding-top: 8px;
	font-family: var(--fr-mono);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fr-gray);
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title{
	font-family: var(--fr-display);
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: -.005em;
	color: var(--fr-ink);
	margin: 0;
	padding: 18px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product .woocommerce-loop-category__title mark.count{
	font-family: var(--fr-mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--fr-gray-2);
	background: none;
	padding: 0;
}

/* Misma defensa para las demás rejillas: cualquier hijo que WooCommerce
   añada (avisos, cupones, encabezados) ocupa la fila entera en lugar de
   robar una celda. */
.woocommerce-cart .fr-wc-page > .woocommerce > *:not(.woocommerce-cart-form):not(.cart-collaterals){
	grid-column: 1 / -1;
}
.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review){
	clear: both;
	width: 100%;
}
.woocommerce-checkout #customer_details > *:not(.col-1):not(.col-2){
	grid-column: 1 / -1;
}
.woocommerce .col2-set > *:not(.col-1):not(.col-2){ grid-column: 1 / -1; }

/* El menú lateral y el contenido nunca se estiran de más */
.woocommerce-account .woocommerce-MyAccount-navigation{ grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content{ grid-column: 2; }
@media (max-width: 980px){
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content{ grid-column: 1 / -1; }
}

/* Aire dentro del contenido de Mi cuenta */
.woocommerce-account .woocommerce-MyAccount-content > :is(h2, h3){
	font-family: var(--fr-display);
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: -.005em;
	margin: 30px 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content > :first-child{ margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content p{ color: var(--fr-ink-soft); margin: 0 0 16px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{ margin-top: 20px; }

/* ---------------------------------------------------------------------
   9. Botón de mostrar contraseña

   WooCommerce dibuja ese botón con un carácter de su propia fuente de
   iconos. Si la fuente no llega a cargarse —o si algún plugin de caché la
   sirve desde otro dominio— el botón queda invisible, aunque siga siendo
   pulsable. Aquí se sustituye por un icono SVG incrustado: no depende de
   ninguna fuente, no hay texto que traducir y se ve siempre.
   --------------------------------------------------------------------- */

.woocommerce form .password-input,
.woocommerce-page form .password-input{
	display: block;
	position: relative;
	width: 100%;
}

/* Hueco a la derecha para que el texto no pase por debajo del icono */
.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"]{
	padding-right: 46px;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input{
	position: absolute;
	top: 50%;
	right: 1px;
	transform: translateY(-50%);
	width: 44px;
	height: calc(100% - 2px);
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s;
	background: none;
	border: none;
	color: var(--fr-ink);
}
.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input:focus-visible{ opacity: 1; }

/* Ojo abierto: la contraseña está oculta y se puede mostrar */
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before{
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--fr-eye) center / 20px 20px no-repeat;
	mask: var(--fr-eye) center / 20px 20px no-repeat;
}

/* Ojo tachado: la contraseña está a la vista */
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before{
	-webkit-mask-image: var(--fr-eye-off);
	mask-image: var(--fr-eye-off);
}
.woocommerce form .show-password-input.display-password{ opacity: 1; color: var(--fr-red); }

/* El carácter de la fuente de iconos sobra: lo apagamos para que no se
   duplique con el nuestro cuando la fuente sí carga. */
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after{ content: none; }