/* ==========================================================
   Peques & Co — CSS de la tienda (listados y fichas de producto)
   Se sube a la raíz del tema hijo. Lo carga functions.php (prioridad 100, después de
   GeneratePress) en la tienda, sus categorías salvo Talleres, marcas, buscador de productos,
   fichas de producto y la tarjeta regalo. Colores: variables de la paleta global de GP;
   radios y alturas: tokens del CSS adicional; componentes (.boton, .caja, .enlace-icono…):
   estilos globales de GenerateBlocks.
   ========================================================== */

/* ---------- Listado: cabecera de la categoría ---------- */
.woocommerce-products-header {
	position: relative;
	margin: 0 0 16px;
	padding: 28px 180px 28px 32px;
	background: var(--crema) url('/wp-content/themes/generatepress_child/img/mascota-tigre.png') no-repeat right 32px bottom 0 / 120px auto;
	border-radius: 24px;
}

.woocommerce-products-header__title.page-title {
	margin: 0;
	font-family: 'Chicken Pie', Roboto, sans-serif;
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	color: var(--contrast-2);
}

.woocommerce-products-header .term-description {
	max-width: 640px;
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--contrast-3);
}

.woocommerce-products-header .term-description p:last-child {
	margin-bottom: 0;
}

/* Subcategorías (bloque "Lista de categorías de producto" en el Elemento "Subcategorías") */
.subcategorias .wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 8px;
	padding: 0;
	list-style: none;
}

.subcategorias .wc-block-product-categories-list-item {
	margin: 0;
}

.subcategorias .wc-block-product-categories-list-item a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: #FFFFFF; /* blanco sobre el rosa de la cabecera */
	color: var(--contrast-2);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
}

.subcategorias .wc-block-product-categories-list-item a:hover {
	background: #F3DFD3;
}

/* Talleres no se enseña en la tienda */
.subcategorias .wc-block-product-categories-list-item:has(> a[href*="/talleres"]) {
	display: none;
}

/* ---------- Listado: barra de filtros y orden ---------- */
/* Una fila: Filtrar · filtros activos · "12 productos" · Ordenar. Son hermanos de la cuadrícula de productos
   dentro del contenedor de GeneratePress: el contenedor pasa a rejilla y todo lo demás ocupa el ancho entero. */
.woocommerce-archive-wrapper .wc-columns-container {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	column-gap: 16px;
	align-items: center;
}

.woocommerce-archive-wrapper .wc-columns-container > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce-archive-wrapper .wc-columns-container > .wc-block-product-filters,
.woocommerce-archive-wrapper .wc-columns-container > .filtros-activos,
.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-result-count,
.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-ordering {
	grid-row: 2;
	float: none;
	margin: 0 0 24px;
}

.woocommerce-archive-wrapper .wc-columns-container > .wc-block-product-filters { grid-column: 1; }
.woocommerce-archive-wrapper .wc-columns-container > .filtros-activos { grid-column: 2; }
.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-result-count { grid-column: 3; }
.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-ordering { grid-column: 4; }

.woocommerce-archive-wrapper .woocommerce-result-count {
	color: var(--contrast-3);
	font-size: 15px;
	white-space: nowrap;
}

/* Filtros activos con su "x" (functions.php, tienda_filtros_activos) */
.filtros-activos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.filtros-activos .filtro-activo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--verde-suave);
	color: var(--verde-oscuro);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.filtros-activos .filtro-activo:hover {
	background: #D2E6D8;
}

.filtros-activos .filtros-activos__quitar {
	margin-left: 4px;
	color: var(--contrast-3);
	font-size: 14px;
}

/* Número de filtros activos en el botón (clase filtros-N en el body) */
:is(.filtros-1, .filtros-2, .filtros-3, .filtros-4, .filtros-5, .filtros-6, .filtros-7, .filtros-8, .filtros-9) .wc-block-product-filters__open-overlay::after {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--accion);
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1;
	box-sizing: border-box;
}

.filtros-1 .wc-block-product-filters__open-overlay::after { content: "1"; }
.filtros-2 .wc-block-product-filters__open-overlay::after { content: "2"; }
.filtros-3 .wc-block-product-filters__open-overlay::after { content: "3"; }
.filtros-4 .wc-block-product-filters__open-overlay::after { content: "4"; }
.filtros-5 .wc-block-product-filters__open-overlay::after { content: "5"; }
.filtros-6 .wc-block-product-filters__open-overlay::after { content: "6"; }
.filtros-7 .wc-block-product-filters__open-overlay::after { content: "7"; }
.filtros-8 .wc-block-product-filters__open-overlay::after { content: "8"; }
.filtros-9 .wc-block-product-filters__open-overlay::after { content: "9+"; }

/* Pastilla como "Filtrar productos", con flecha propia (la del navegador se montaba sobre el texto en móvil) */
.woocommerce-ordering select {
	-webkit-appearance: none;
	appearance: none;
	min-height: 44px;
	padding: 0 40px 0 18px;
	border: 1px solid var(--borde-fuerte);
	border-radius: 999px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233B3431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
	color: var(--contrast-2);
	font-weight: 500;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* La flecha de WooCommerce es un icono de su fuente: sin la fuente cargada sale como "••" */
.woocommerce-ordering::after {
	display: none !important;
}

/* "Ordenar por" delante del desplegable (en móvil no cabe; se quita en la media query) */
.woocommerce-archive-wrapper .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce-archive-wrapper .woocommerce-ordering::before {
	content: "Ordenar por";
	color: var(--contrast-3);
	font-size: 15px;
	white-space: nowrap;
}

/* Botón "Filtrar" del bloque de filtros (Elemento "Filtros tienda", en modo superpuesto) */
.wc-block-product-filters__open-overlay {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px !important;
	border: 0;
	border-radius: 999px;
	background: #FFFFFF !important;
	box-shadow: inset 0 0 0 2px var(--contrast-2);
	color: var(--contrast-2) !important;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

/* Panel de filtros */
.wc-block-product-filters__overlay-content > .wp-block-heading:first-child { /* solo "Filtrar", no los títulos de cada filtro */
	margin: 0 0 4px;
	font-family: 'Chicken Pie', Roboto, sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
}

/* Cada filtro separado por una línea, con aire encima del título */
.wc-block-product-filters__overlay-content > div {
	padding-top: 18px;
	border-top: 1px solid var(--borde);
}

.wc-block-product-filters__overlay-content > div:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.wc-block-product-filters__overlay-content h3 {
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 16px;
}

.wc-block-product-filters__apply {
	min-height: 52px;
	border-radius: 999px !important;
	background: var(--accion, #3F7A52) !important;
	color: #FFFFFF !important;
	font-weight: 700;
}

/* ---------- Tarjeta de producto (listados, relacionados y "también te gustará") ---------- */
.woocommerce ul.products {
	gap: 24px;
}

.woocommerce ul.products li.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr auto auto; /* foto, marca, nombre (ocupa el hueco), edad, precio y botón: estos últimos quedan abajo en todas */
	position: relative;
	align-content: start;
	margin: 0;
	padding: 0 0 16px;
	border: 1px solid var(--borde);
	border-radius: 18px;
	overflow: hidden;
	background: #FFFFFF;
	text-align: left;
}

/* Cada parte en su fila, sin depender del orden en que la pinta WordPress ni de si falta alguna */
.woocommerce ul.products li.product .wc-product-image { grid-row: 1; }
.woocommerce ul.products li.product .tarjeta-marca { grid-row: 2; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { grid-row: 3; }
.woocommerce ul.products li.product .tarjeta-edad { grid-row: 4; }
.woocommerce ul.products li.product .price { grid-row: 5; grid-column: 1; }
.woocommerce ul.products li.product .button { grid-row: 5; grid-column: 2; }

/* El enlace no ocupa caja: imagen, nombre y precio se colocan en la rejilla de la tarjeta */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: contents !important; /* GeneratePress lo pone en block */
}

.woocommerce ul.products li.product .inside-wc-product-image {
	display: block;
}

.woocommerce ul.products li.product .wc-product-image {
	grid-column: 1 / -1;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--borde);
}

.woocommerce ul.products li.product .wc-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	grid-column: 1 / -1;
	margin: 0 0 8px;
	padding: 0 16px;
	font-family: Roboto, sans-serif; /* es un h2 y los h2 van en CHICKEN Pie (Personalizar → Tipografía) */
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--contrast-2);
}

.woocommerce ul.products li.product .price {
	align-self: center;
	margin: 0;
	padding-left: 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--contrast-2);
}

.woocommerce ul.products li.product .button {
	align-self: center;
	justify-self: end;
	margin: 0 16px 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--boton-alto-s, 40px); /* botón pequeño: el general (CSS adicional) mide 48 */
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
}

/* Marca, edad y avisos (functions.php, sección "Tarjeta de producto en los listados") */
.woocommerce ul.products li.product .tarjeta-marca {
	grid-column: 1 / -1;
	margin-bottom: 4px;
	padding: 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--contrast-3);
}

.woocommerce ul.products li.product .tarjeta-edad {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0 16px 12px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--verde-suave);
	color: var(--verde-oscuro);
	font-size: 12px;
	font-weight: 700;
}

.woocommerce ul.products li.product .tarjeta-marca:empty,
.woocommerce ul.products li.product .tarjeta-edad:empty {
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product .tarjeta-aviso {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ambar-suave);
	color: var(--ambar-oscuro);
	font-size: 12px;
	font-weight: 700;
}

.woocommerce ul.products li.product .tarjeta-aviso--agotado {
	background: #EEEBE8;
	color: var(--contrast-3);
}

/* Agotado: "Pregúntanos" por WhatsApp, con borde en lugar de verde */
.woocommerce ul.products li.product .button.boton-preguntar {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--contrast-2);
	color: var(--contrast-2);
}

/* Al pasar el ratón, relleno oscuro, como .boton-borde (GeneratePress lo ponía verde) */
.woocommerce ul.products li.product .button.boton-preguntar:hover {
	background: var(--contrast-2);
	color: #FFFFFF;
}

/* GeneratePress pone margin-top: 10px a todo lo que va dentro del enlace del producto y quita el margen
   izquierdo del botón (texto alineado a la izquierda), con más prioridad que las reglas de arriba: se fijan aquí */
.woocommerce ul.products li.product .tarjeta-marca { margin: 0 0 4px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 0 8px !important; }
.woocommerce ul.products li.product .tarjeta-edad { margin: 0 16px 12px !important; }
.woocommerce ul.products li.product .price { margin: 0 !important; }
.woocommerce ul.products li.product .button { margin: 0 16px 0 8px !important; }

.woocommerce ul.products li.product .tarjeta-marca:empty,
.woocommerce ul.products li.product .tarjeta-edad:empty {
	margin: 0 !important;
}

/* Segunda foto (al pasar el ratón): con fondo blanco, para que no se transparente la primera si es un PNG sin fondo */
.woocommerce ul.products li.product .wc-product-image .secondary-image {
	background: #FFFFFF;
}

.woocommerce ul.products li.product .onsale {
	border-radius: 999px;
}

/* ---------- Paginación ---------- */
.woocommerce nav.woocommerce-pagination {
	margin: 40px 0 8px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	float: none;
	margin: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--borde-fuerte);
	color: var(--contrast-2);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	background: var(--crema);
	color: var(--contrast-2);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
	background: var(--contrast-2);
	box-shadow: none;
	color: #FFFFFF;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
	background: transparent;
	box-shadow: none;
	min-width: 24px;
	padding: 0;
}

/* ---------- Ayuda en mitad del listado (Elemento "Ayuda tienda", gancho peques_mitad_listado) ---------- */
/* Tras el octavo producto va dentro de la cuadrícula, ocupando todo el ancho */
.woocommerce ul.products li.mitad-listado {
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.mitad-listado .gb-element-at02a1 {
	margin-top: 0;
}

/* ---------- Ayuda tras el listado (Elemento "Ayuda tienda") ---------- */
/* La jirafa (mascota principal) delante del texto, como en el diseño */
.gb-element-at02a1::before { /* bloque contenedor del Elemento "Ayuda tienda" (GenerateBlocks no guarda atributos data-) */
	content: "";
	flex: 0 0 56px;
	height: 64px;
	background: url('img/mascota-jirafa.png') center / contain no-repeat;
}

/* ---------- Ficha de producto ---------- */
.single-product div.product .product_title {
	margin: 0 0 12px;
	font-family: 'Chicken Pie', Roboto, sans-serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 1;
	color: var(--contrast-2);
}

.single-product div.product .summary > .price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 30px;
	font-weight: 700;
	color: var(--contrast-2);
}

.single-product div.product .summary > .price::after {
	content: "IVA incluido";
	font-size: 14px;
	font-weight: 400;
	color: var(--contrast-3);
}

.single-product div.product .woocommerce-product-details__short-description {
	font-size: 17px;
	line-height: 1.6;
}

/* Logo y "Ver todo de Marca" encima del nombre (functions.php, "Ficha de producto de la tienda") */
.single-product div.product .ficha-marca {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	color: var(--contrast-3);
	font-size: 14px;
	text-decoration: none;
}

.single-product div.product .ficha-marca strong {
	color: var(--contrast-2);
}

.single-product div.product .ficha-marca:hover span {
	text-decoration: underline;
}

.single-product div.product .ficha-marca__logo {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	border: 1px solid var(--borde);
	object-fit: contain;
}

/* Edad, material y tipo de juego bajo el precio */
.single-product div.product .ficha-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.single-product div.product .ficha-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--crema);
	color: var(--contrast-2);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.single-product div.product .ficha-etiqueta--edad {
	background: var(--verde-suave);
	color: var(--verde-oscuro);
	font-weight: 700;
}

.single-product div.product .summary .stock {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 500;
	line-height: 1.6;
}

.single-product div.product .summary .stock.in-stock {
	color: var(--verde-oscuro);
}

.single-product div.product .summary .stock::before {
	content: "";
	flex: 0 0 10px;
	height: 10px;
	margin-top: calc(0.8em - 5px); /* centrado en la primera línea si el texto baja a dos */
	border-radius: 50%;
	background: var(--accion);
}

.single-product div.product .summary .stock.stock--ultimas {
	color: var(--ambar-oscuro);
}

.single-product div.product .summary .stock.stock--ultimas::before {
	background: var(--mostaza);
}

.single-product div.product .summary .stock.out-of-stock,
.single-product div.product .summary .stock.available-on-backorder {
	color: var(--contrast-3);
}

.single-product div.product .summary .stock.out-of-stock::before,
.single-product div.product .summary .stock.available-on-backorder::before {
	background: #B5A89F;
}

/* Cantidad y botón en una fila; el botón ocupa el resto */
.single-product div.product form.cart:not(.variations_form),
.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 12px;
}

/* El clearfix de WooCommerce (::before y ::after) contaba como elemento de la fila y sumaba 12 px a cada lado */
.single-product div.product form.cart:not(.variations_form)::before,
.single-product div.product form.cart:not(.variations_form)::after,
.single-product div.product .woocommerce-variation-add-to-cart::before,
.single-product div.product .woocommerce-variation-add-to-cart::after {
	display: none;
}

.single-product div.product form.cart .quantity.buttons-added {
	display: flex;
	align-items: center;
	margin: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}

.single-product div.product form.cart .quantity.buttons-added .minus,
.single-product div.product form.cart .quantity.buttons-added .plus,
.single-product div.product form.cart .quantity.buttons-added .qty {
	border: 0;
	background: transparent;
}

.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 52px;
	border-radius: 999px;
	font-size: 17px;
}

/* Sin "SKU: N/D" ni categorías: la marca ya sale arriba */
.single-product div.product .product_meta {
	display: none;
}

/* Descripción e Información adicional una junto a otra, sin pestañas */
.single-product .woocommerce-tabs {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 32px 48px;
	align-items: start;
	margin: 48px 0;
	padding: 48px;
	border-radius: 24px;
	background: var(--crema-verde);
}

/* Sin la barra de pestañas. Valoraciones fuera hasta que haya opiniones de productos (mejor: desactivarlas en WooCommerce) */
.single-product div.product .woocommerce-tabs ul.tabs,
.single-product div.product .woocommerce-tabs #tab-reviews {
	display: none !important;
}

.single-product .woocommerce-tabs .panel {
	display: block !important;
	margin: 0;
	padding: 0;
}

.single-product .woocommerce-tabs .panel > h2:first-child {
	margin: 0 0 16px;
	font-family: 'Chicken Pie', Roboto, sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.05;
}

.single-product .woocommerce-tabs #tab-additional_information {
	position: sticky;
	top: 24px;
	padding: 24px;
	border-radius: 18px;
	background: #FFFFFF;
}

.single-product .woocommerce-tabs #tab-additional_information > h2:first-child {
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 18px;
}

.single-product .woocommerce-tabs table.shop_attributes {
	margin: 0;
	border: 0;
}

.single-product .woocommerce-tabs table.shop_attributes th,
.single-product .woocommerce-tabs table.shop_attributes td {
	padding: 10px 0;
	border: 0;
	border-top: 1px solid var(--borde);
	background: transparent !important; /* WooCommerce pone fondo gris en filas alternas */
	font-size: 15px;
	text-align: left;
	vertical-align: top;
	font-style: normal;
}

.single-product .woocommerce-tabs table.shop_attributes th {
	width: 40%;
	font-weight: 400;
	color: var(--contrast-3);
}

.single-product .woocommerce-tabs table.shop_attributes td p {
	margin: 0;
}

.single-product .up-sells > h2,
.single-product .related > h2 {
	margin: 0 0 24px;
	font-family: 'Chicken Pie', Roboto, sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.05;
}

/* Relacionados justo después de "También te gustará": mismo aire que encima de este (quedaba pegado) */
.single-product .up-sells ul.products {
	margin-bottom: 0;
}

.single-product .up-sells + .related {
	margin-top: 56px;
}

/* ---------- Móvil (punto de corte del menú de GeneratePress) ---------- */
@media (max-width: 768px) {
	.woocommerce-products-header {
		padding: 20px 16px;
		background-size: 64px auto;
		background-position: right 14px top 14px; /* el tigre arriba, junto al título: los botones de subcategoría usan todo el ancho */
		border-radius: 18px;
	}

	.woocommerce-products-header__title.page-title {
		font-size: 40px;
		padding-right: 72px;
	}

	.woocommerce-products-header .term-description {
		font-size: 16px;
	}

	.subcategorias .wc-block-product-categories-list-item a {
		min-height: 36px;
		padding: 0 14px;
		font-size: 14px;
	}

	/* Filtrar y Ordenar en la misma fila, los filtros activos debajo; sin recuento (como en el diseño) */
	.woocommerce-archive-wrapper .wc-columns-container {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 12px;
	}

	.woocommerce-archive-wrapper .wc-columns-container > .wc-block-product-filters,
	.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-ordering {
		margin-bottom: 12px !important;
	}

	.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-ordering { grid-column: 3; }

	.woocommerce-archive-wrapper .wc-columns-container > .woocommerce-result-count {
		display: none;
	}

	.woocommerce-archive-wrapper .wc-columns-container > .filtros-activos {
		grid-row: 3;
		grid-column: 1 / -1;
		margin-bottom: 16px;
	}

	.wc-block-product-filters__open-overlay {
		position: relative;
		gap: 6px;
		padding: 0 14px !important;
		font-size: 14px !important; /* GeneratePress le pone la letra del cuerpo (18 px en móvil) */
		white-space: nowrap;
	}

	/* El número de filtros, en burbuja sobre la esquina: dentro del botón lo partía en dos líneas */
	.wc-block-product-filters__open-overlay::after {
		position: absolute;
		top: -6px;
		right: -6px;
		box-shadow: 0 0 0 2px #FFFFFF;
	}

	.woocommerce-archive-wrapper .woocommerce-ordering {
		float: none !important;
		width: auto !important;
	}

	.woocommerce-archive-wrapper .woocommerce-ordering::before {
		display: none;
	}

	.woocommerce-archive-wrapper .woocommerce-ordering select {
		max-width: 146px; /* junto a "Filtrar productos" en 375 px; más ancho baja a otra fila */
		padding: 0 34px 0 14px;
		background-position: right 13px center;
		font-size: 14px;
	}

	.woocommerce ul.products {
		gap: 12px;
	}

	.woocommerce ul.products li.product {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto auto auto;
		padding-bottom: 12px;
	}

	.woocommerce ul.products li.product .tarjeta-marca {
		padding: 0 10px;
		font-size: 11px;
	}

	.woocommerce ul.products li.product .tarjeta-edad {
		margin: 0 10px 10px !important;
	}

	.woocommerce ul.products li.product .tarjeta-aviso {
		top: 8px;
		left: 8px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		padding: 0 10px;
		font-size: 14px;
	}

	.woocommerce ul.products li.product .price {
		padding: 0 10px 8px;
		font-size: 16px;
	}

	/* En móvil el botón va debajo del precio, a todo el ancho de la tarjeta */
	.woocommerce ul.products li.product .button {
		justify-self: stretch;
		grid-row: 6;
		grid-column: 1;
		margin: 0 10px !important;
		text-align: center;
		padding: 0 12px;
		font-size: 13px;
	}

	.single-product div.product .product_title {
		font-size: 40px;
	}

	.single-product .woocommerce-tabs {
		grid-template-columns: minmax(0, 1fr);
		margin: 32px 0;
		padding: 24px 16px;
		border-radius: 18px;
	}

	/* Ficha técnica: etiqueta arriba y valor debajo (WooCommerce apila las celdas en móvil
	   pero deja el ancho del 40 %, las líneas y el fondo gris alterno) */
	.single-product .woocommerce-tabs table.shop_attributes,
	.single-product .woocommerce-tabs table.shop_attributes tbody,
	.single-product .woocommerce-tabs table.shop_attributes tr {
		display: block;
		width: 100%;
	}

	.single-product .woocommerce-tabs table.shop_attributes tr {
		padding: 10px 0;
		border-top: 1px solid var(--borde);
	}

	.single-product .woocommerce-tabs table.shop_attributes th,
	.single-product .woocommerce-tabs table.shop_attributes td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	.single-product .woocommerce-tabs table.shop_attributes th {
		margin-bottom: 2px;
		font-size: 13px;
	}

	.single-product .woocommerce-tabs .panel > h2:first-child,
	.single-product .up-sells > h2,
	.single-product .related > h2 {
		font-size: 30px;
	}

	.single-product .up-sells + .related {
		margin-top: 40px;
	}

	/* "También te gustará" y relacionados: carrusel con desplazamiento lateral. Llega hasta el borde
	   de la pantalla (margen negativo = hueco lateral de la página) y la siguiente tarjeta asoma */
	.single-product .up-sells ul.products,
	.single-product .related ul.products {
		display: flex !important;
		gap: 12px;
		width: auto !important; /* WooCommerce le fija el ancho: sin esto el margen negativo solo lo desplaza */
		margin: 0 -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		scrollbar-width: none;
	}

	.single-product .up-sells ul.products::-webkit-scrollbar,
	.single-product .related ul.products::-webkit-scrollbar {
		display: none;
	}

	.single-product .up-sells ul.products::before,
	.single-product .up-sells ul.products::after,
	.single-product .related ul.products::before,
	.single-product .related ul.products::after {
		display: none; /* los "clearfix" de WooCommerce contarían como huecos del carrusel */
	}

	.single-product .up-sells ul.products li.product,
	.single-product .related ul.products li.product {
		flex: 0 0 62%;
		width: auto !important;
		scroll-snap-align: start;
	}
}

/* ---------- Ficha de la tarjeta regalo (body.ficha-tarjeta-regalo, functions.php "Tarjetas regalo") ----------
   Usa lo mismo que las demás fichas; aquí solo lo que cambia: la tarjeta en vivo en lugar de la galería,
   el formulario en lugar de la cantidad y una sola columna en la descripción (no tiene ficha técnica). */
/* En los listados, sin "tú eliges": partía la línea en móvil y ya lo dicen la imagen y el botón "Elegir importe" */
.woocommerce ul.products li.product .price .precio-nota {
	display: none;
}

/* "tú eliges" pequeño junto al importe; sin "IVA incluido": la tarjeta no lleva IVA al venderla */
.ficha-tarjeta-regalo div.product .summary > .price::after {
	content: none;
}

.ficha-tarjeta-regalo div.product .summary > .price .precio-nota {
	font-size: 14px;
	font-weight: 400;
	color: var(--contrast-3);
}

/* Campos (y en móvil la tarjeta, que el JavaScript mete en el formulario) a todo el ancho; el botón debajo */
.ficha-tarjeta-regalo div.product form.cart {
	flex-wrap: wrap;
}

.ficha-tarjeta-regalo div.product form.cart .campos-tarjeta,
.ficha-tarjeta-regalo div.product form.cart .tarjeta-vista {
	flex: 1 1 100%;
}

/* Cantidad oculta (una tarjeta por línea): sin esto deja un hueco antes del botón. El campo se envía igual */
.ficha-tarjeta-regalo div.product form.cart .quantity {
	display: none;
}

/* Tarjeta en vivo en lugar de la galería (functions.php, tarjetas_vista_previa; el diseño de la tarjeta va
   allí porque lo comparte con la imprimible): mismo hueco que la galería de GeneratePress (50 % y margen del 4 %) */
.tarjeta-vista {
	float: left;
	width: 50%;
	margin: 0 4% 2em 0;
}

.tarjeta-vista .tarjeta-regalo {
	box-shadow: 0 1px 2px rgba(59, 52, 49, .08), 0 8px 24px rgba(59, 52, 49, .12);
}

.tarjeta-vista__mensaje {
	margin: 16px 0 0;
	padding: 14px 18px;
	background: #FFFFFF;
	border: 1px solid var(--borde);
	border-radius: var(--radio-s);
	font-style: italic;
	line-height: 1.5;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.tarjeta-vista__mensaje[hidden] {
	display: none;
}

.tarjeta-vista__nota {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--contrast-3);
}

/* Formulario: importe, atajos, para, de parte de y mensaje */
.ficha-tarjeta-regalo div.product .campos-tarjeta {
	margin: 0 0 8px;
}

.campos-tarjeta .form-row {
	margin-bottom: 10px;
}

.campos-tarjeta label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
}

.campos-tarjeta .optional {
	display: none;
}

/* Borde, esquinas y foco: los de todos los campos (CSS adicional); aquí, el tamaño */
.ficha-tarjeta-regalo div.product .campos-tarjeta :is(input.input-text, textarea) {
	width: 100%;
	padding: 12px 16px;
	background: #FFFFFF;
	font-size: 16px;
}

/* Atajos de importe (25, 50, 100 €): botones de opción con borde verde */
.tarjeta-atajos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.tarjeta-atajo {
	min-height: var(--boton-alto-s);
	padding: 0 18px;
	border: 2px solid var(--accion);
	border-radius: var(--radio-pastilla);
	background: transparent;
	color: var(--accion);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.tarjeta-atajo.es-elegido,
.tarjeta-atajo:hover {
	background: var(--accion);
	color: #FFFFFF;
}

/* Caja de confianza: fondo, esquinas y relleno de .caja (estilo global de GenerateBlocks, como la de los demás productos) */
.ficha-confianza {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0 16px;
}

.ficha-confianza p {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--contrast-2);
}

.ficha-confianza svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--terracota-oscuro);
}

/* Enlace de WhatsApp: color, icono y subrayado de .enlace-icono (estilo global de GenerateBlocks) */
.ficha-whatsapp {
	margin-bottom: 24px;
	font-size: 15px;
}

.ficha-whatsapp svg {
	width: 20px;
	height: 20px;
}

/* Descripción sola, sin la columna de "Información adicional": una columna con un ancho cómodo de leer */
.ficha-tarjeta-regalo .woocommerce-tabs {
	grid-template-columns: minmax(0, 1fr);
	/* Desplegables de preguntas frecuentes (componente común del CSS adicional) sobre el verde del recuadro */
	--faq-icono: #FFFFFF;
	--faq-borde: #DDE2D6;
}

.ficha-tarjeta-regalo .woocommerce-tabs .panel {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.6;
}

/* Descripción: subtítulos y preguntas frecuentes en desplegables, como las de la página de talleres
   (el contenido está en descripcion-tarjeta-regalo.html, pegado en la descripción del producto) */
.ficha-tarjeta-regalo .woocommerce-tabs .panel h3 {
	margin: 28px 0 10px;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--contrast-2);
}

.ficha-tarjeta-regalo .woocommerce-tabs details:first-of-type {
	border-top: 1px solid var(--faq-borde);
}

@media (max-width: 768px) {
	.tarjeta-vista {
		float: none;
		width: 100%;
		margin-right: 0;
	}
}