/**
 * Encabezado del tema. Description y Tags van en una sola linea por larga que
 * quede: get_file_data() lee cada cabecera con un regex anclado a fin de linea
 * ($ con /m), asi que lo que se parta a la siguiente se pierde. Estaban
 * partidas y el panel mostraba media descripcion.
 *
 * Theme Name:  Gilmore and Friends
 * Theme URI:   https://gilmoreandfriends.com.ar
 * Description: Tema de la tienda de regalos para fans de Gilmore Girls y Friends. Hijo de Twenty Twenty-Five: suma el carrusel de la portada, las grillas de catalogo con scroll infinito y los ajustes del checkout (descuento por medio de pago, envios de Correo Argentino y Andreani). Los colores y la tipografia salen de theme.json.
 * Author:      Gilmore and Friends
 * Author URI:  https://gilmoreandfriends.com.ar
 * Template:    twentytwentyfive
 * Version:     1.24.1
 * Requires at least: 6.7
 * Tested up to: 7.0
 * Requires PHP: 7.4
 * Text Domain: gilmore
 * Tags:        e-commerce, full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready, wide-blocks
 * License:     GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * Update URI: false
 *   No es un tema de wordpress.org. Sin esto, cualquier tema publicado ahi con
 *   el slug "gilmore" le ofreceria una actualizacion al panel y pisaria este.
 */

/* Atajos a los tokens de theme.json. Todo lo que se pueda configurar vive
   alla (settings.color.palette y settings.custom); aca solo se le pone un
   nombre corto. Los fallbacks son por si se renombra un token. */
:root {
	--gf-crema:     var(--wp--preset--color--base, #FBF7F0);
	--gf-tinta:     var(--wp--preset--color--contrast, #2B3439);
	--gf-terracota: var(--wp--preset--color--accent-1, #2b3f38);
	--gf-verde:     var(--wp--preset--color--accent-2, #14563F);
	--gf-amarillo:  var(--wp--preset--color--accent-3, #F4B62C);
	--gf-lavanda:   var(--wp--preset--color--accent-4, #6E3F91);
	--gf-blanco:    var(--wp--preset--color--accent-5, #FFFFFF);
	--gf-arena:     var(--wp--preset--color--accent-6, #636F75);

	--gf-titulos:    var(--wp--custom--marca--titulos, var(--wp--preset--font-family--poppins));
	--gf-radio:      var(--wp--custom--marca--radio, 18px);
	/* Los botones van mucho menos redondos que las tarjetas: con la pastilla
	   completa parecian etiquetas y no controles. */
	--gf-radio-boton: 6px;

	/* Color de los avisos que empujan a comprar: poco stock y promociones.
	   Va aparte del primario a proposito: el primario paso a verde y estos
	   mensajes necesitan un tono calido que se distinga del resto de la ficha.
	   Apunta a accent-3 por decision de diseño. OJO: con el valor actual
	   (#de7c4c) da 2,77:1 sobre el crema, por debajo del minimo de 4,5 para
	   texto. Oscurecer accent-3 hasta #B35525 lo deja en 4,63:1 sin cambiar
	   el matiz. */
	--gf-urgencia: var(--wp--custom--marca--urgencia, var(--wp--preset--color--accent-3, #C2461C));
	--gf-transicion: var(--wp--custom--marca--transicion, 200ms cubic-bezier(.2, .7, .3, 1));

	--gf-sombra:      var(--wp--custom--sombra--normal, 0 1px 2px rgba(43, 52, 57, .06), 0 8px 24px rgba(43, 52, 57, .08));
	--gf-sombra-alta: var(--wp--custom--sombra--alta, 0 2px 4px rgba(43, 52, 57, .08), 0 16px 40px rgba(43, 52, 57, .14));
	--gf-borde:       var(--wp--custom--borde--sutil, 1px solid rgba(43, 52, 57, .09));

	/* Sobre foto: el texto va siempre claro, sin importar la paleta. */
	--gf-foto-texto:  var(--wp--custom--sobre-foto--texto, #FFFFFF);
	--gf-foto-tenue:  var(--wp--custom--sobre-foto--texto-tenue, rgba(255, 255, 255, .92));
	--gf-foto-ctrl:   var(--wp--custom--sobre-foto--control, rgba(255, 255, 255, .92));
	--gf-foto-punto:  var(--wp--custom--sobre-foto--punto-inactivo, rgba(255, 255, 255, .45));
	--gf-foto-chip:   var(--wp--custom--sobre-foto--insignia, rgba(255, 255, 255, .24));
	--gf-foto-sombra: var(--wp--custom--sobre-foto--sombra-texto, 0 1px 3px rgba(0, 0, 0, .5));

	--gf-velo-hero-movil:      var(--wp--custom--velo--hero-movil, linear-gradient(180deg, rgba(24, 18, 14, .30) 0%, rgba(24, 18, 14, .82) 100%));
	--gf-velo-hero-escritorio: var(--wp--custom--velo--hero-escritorio, linear-gradient(90deg, rgba(24, 18, 14, .90) 0%, rgba(24, 18, 14, .68) 34%, rgba(24, 18, 14, .14) 74%, rgba(24, 18, 14, 0) 100%));
	--gf-velo-tarjeta:         var(--wp--custom--velo--tarjeta, linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .34) 48%, rgba(0, 0, 0, .82) 100%));
	--gf-velo-tarjeta-activa:  var(--wp--custom--velo--tarjeta-activa, linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .72) 100%));
	--gf-velo-serie:           var(--wp--custom--velo--serie, linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, .80) 100%));
	/* Texto de la ficha: un 10% por debajo del preset medium, manteniendo su
	   comportamiento fluido. */
	--gf-ficha-texto: calc(var(--wp--preset--font-size--medium) * .9);

	/* Texto de las paginas legales y de contacto. Nacio como excepcion, cuando el
	   cuerpo del sitio heredaba el preset large de twentytwentyfive (1,38rem,
	   ~22px) y a ese tamaño un texto legal de dos pantallas se leia como un
	   cartel. Hoy el cuerpo ya es small y la excepcion sobra, asi que hereda: si
	   se dejaba en medium, estas paginas pasaban a verse MAS grandes que el resto
	   del sitio. Se conserva el token para tener de donde agarrarse si alguna vez
	   hay que volver a diferenciarlas. */
	--gf-legal-texto: inherit;

	--gf-velo-serie-activa:    var(--wp--custom--velo--serie-activa, linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .70) 100%));
}

/* ==========================================================================
   Modelo de caja

   El tema padre no fuerza border-box, asi que en cualquier elemento propio con
   height o min-height mas padding, el relleno se suma POR FUERA. Eso rompio dos
   veces: el panel del hero quedaba 96px mas alto que su slide y se cortaba el
   boton, y las tarjetas de categoria sobresalian 37px de su celda y se pisaban
   entre filas. Se declara una vez para todo lo nuestro en lugar de ir tapando
   cada caso.
   ========================================================================== */

.gf-hero, .gf-hero *,
.gf-tira, .gf-tira *,
.gf-cats, .gf-cats *,
.gf-series, .gf-series *,
.gf-header, .gf-header *,
.gf-footer, .gf-footer *,
.gf-infinito, .gf-infinito *,
.gf-ficha__principal, .gf-ficha__descripcion,
.gf-wsp, .gf-btn, .gf-cart {
	box-sizing: border-box;
}

/* ==========================================================================
   Carrusel del hero
   ========================================================================== */

.gf-hero {
	position: relative;
	isolation: isolate;
}

.gf-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* La barra de scroll se oculta: se navega con flechas, puntos o swipe. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gf-hero__track::-webkit-scrollbar { display: none; }

.gf-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	/* Las fotos son panoramicas (2,13:1). A ancho completo en un celular
	   quedarian de ~180px de alto, asi que se recortan con object-fit. */
	height: clamp(440px, 56vw, 660px);
	overflow: hidden;
}

.gf-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Velo oscuro: las fotos son claras y muy cargadas, sin esto el texto no se
   lee. En movil cae de arriba hacia abajo; en escritorio, de izquierda. */
.gf-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gf-velo-hero-movil);
}

.gf-hero__panel {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	gap: .75rem;
	padding: 2rem 1.25rem 3.25rem;
	color: var(--gf-foto-texto);
}

.gf-hero__eyebrow {
	margin: 0;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gf-amarillo);
}

.gf-hero__title {
	margin: 0;
	font-family: var(--gf-titulos);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.02em;
	font-size: clamp(2.1rem, 7vw, 4.2rem);
	color: var(--gf-foto-texto);
	text-wrap: balance;
}

.gf-hero__text {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	color: var(--gf-foto-tenue);
	text-wrap: pretty;
}

.gf-btn {
	display: inline-block;
	margin-top: .5rem;
	padding: .9rem 2rem;
	border-radius: var(--gf-radio-boton);
	background: var(--gf-terracota);
	color: var(--gf-foto-texto) !important;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--gf-sombra);
	transition: transform var(--gf-transicion), background-color var(--gf-transicion);
}

.gf-btn:hover,
.gf-btn:focus-visible {
	background: var(--gf-tinta);
	transform: translateY(-2px);
}

/* Flechas: solo en pantallas con espacio. En movil se navega con swipe. */
.gf-hero__nav {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	translate: 0 -50%;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gf-foto-ctrl);
	color: var(--gf-tinta);
	cursor: pointer;
	box-shadow: var(--gf-sombra);
	transition: background-color var(--gf-transicion), transform var(--gf-transicion);
}

.gf-hero__nav svg { width: 24px; height: 24px; }
.gf-hero__nav:hover { background: var(--gf-foto-texto); transform: translateY(-50%) scale(1.06); }
.gf-hero__nav--prev { left: clamp(1rem, 3vw, 2.5rem); }
.gf-hero__nav--next { right: clamp(1rem, 3vw, 2.5rem); }

.gf-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: .5rem;
}

.gf-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gf-foto-punto);
	cursor: pointer;
	transition: background-color var(--gf-transicion), width var(--gf-transicion);
}

.gf-hero__dot[aria-selected="true"] {
	width: 28px;
	border-radius: 999px;
	background: var(--gf-foto-texto);
}

@media (min-width: 782px) {
	.gf-hero__slide::after {
		background: var(--gf-velo-hero-escritorio);
	}

	.gf-hero__panel {
		align-items: flex-start;
		justify-content: center;
		text-align: left;
		gap: 1rem;
		padding: 3rem clamp(3rem, 8vw, 7rem);
		/* En rem y no en ch. El panel no tiene tamaño de letra propio: hereda el
		   del cuerpo, asi que su ch no medía el texto que contiene sino el del
		   sitio. Al bajar el cuerpo de large a small, 60ch pasó de 814px a 528 y
		   "Gilmore and Friends" se partió en tres lineas en vez de dos. El ch se
		   usa para dar medida de lectura, y solo sirve en el elemento que lleva
		   el texto. */
		max-width: 51rem;
	}

	.gf-hero__nav { display: grid; place-items: center; }

	.gf-hero__dots { justify-content: flex-start; padding-left: clamp(3rem, 8vw, 7rem); }
}

/* --- La tira: el hero de las paginas internas ------------------------------ */

/* Misma foto y mismo velo que el hero, pero al 60% de su altura. No lleva
   volanta ni boton: en una pagina de texto el banner ubica, no vende, y a
   altura completa empujaba el contenido abajo del pliegue. */
.gf-tira {
	position: relative;
	height: clamp(264px, 33.6vw, 396px);
	overflow: hidden;
}

.gf-tira__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El recorte se lleva 40% de la foto. Se ancla arriba porque las dos fotos
	   del hero tienen los productos en la mitad superior; centrado los partia. */
	object-position: center 35%;
}

.gf-tira::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gf-velo-hero-movil);
}

.gf-tira--sin-foto {
	height: auto;
	background: var(--gf-tinta, #2B3439);
}

.gf-tira--sin-foto::after { content: none; }

.gf-tira__panel {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding: 2rem 1.25rem 2.25rem;
	color: var(--gf-foto-texto);
}

.gf-tira__titulo {
	margin: 0;
	font-family: var(--gf-titulos);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-size: clamp(1.8rem, 4.6vw, 2.9rem);
	color: var(--gf-foto-texto);
	text-wrap: balance;
}

@media (min-width: 782px) {
	.gf-tira::after {
		background: var(--gf-velo-hero-escritorio);
	}

	.gf-tira__panel {
		align-items: flex-start;
		justify-content: center;
		text-align: left;
		padding: 2rem clamp(3rem, 8vw, 7rem);
		/* En rem por lo mismo que el panel del hero: ver el comentario de arriba. */
		max-width: 51rem;
	}
}

@media (max-width: 781px) {
	.gf-tira {
		height: clamp(282px, 69vw, 360px);
	}
}

/* --- Cuerpo de las paginas legales ---------------------------------------- */

/* Son textos largos y de lectura obligada: se les da medida de lectura y aire
   entre secciones, que con los estilos del catalogo quedaban apelmazados. */
/* Se aplica al contenedor y no a cada etiqueta para que lo hereden tambien las
   partes que no escribimos nosotros: las etiquetas y los campos del formulario
   de contacto y el del arrepentimiento salen de Fluent Forms. */
/* La medida de lectura va en el contenedor y no en cada hijo. Estaba en los
   hijos y cada uno resolvia su propio 68ch, porque ch se mide contra la letra
   del elemento: los titulos, al ser mas grandes, recibian una caja mas ancha
   que la de los parrafos y aparecian sangrados hacia la izquierda respecto del
   texto que encabezaban. En el contenedor el ch se calcula una sola vez, con
   el tamaño del cuerpo, y todo el bloque comparte el mismo ancho. */
.gf-legal .wp-block-post-content {
	font-size: var(--gf-legal-texto);
	max-width: 68ch;
	margin-inline: auto;
}

.gf-legal h2 {
	margin-top: 2.5rem;
	/* Chico a proposito, y distinto del resto de los h2 del sitio. Aca no
	   encabezan una seccion de portada sino numerales de un texto corrido
	   ("1. Responsable"), asi que solo tienen que separar; a 1,7 veces el cuerpo
	   le ganaban al parrafo que venia abajo. El aire de arriba es lo que ordena
	   la lectura, no el tamaño. */
	font-size: clamp(1.05rem, 1.4vw, 1.15rem);
}

.gf-legal p,
.gf-legal li {
	line-height: 1.7;
}

.gf-legal li + li {
	margin-top: .5rem;
}

/* ==========================================================================
   Secciones

   Un unico ritmo vertical para todas, para que la home no se vea desalineada
   respecto del resto del sitio.
   ========================================================================== */

.gf-section {
	margin-top: clamp(3.5rem, 7vw, 6rem);
	margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.gf-section__title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* --- Las dos series ------------------------------------------------------ */

.gf-series {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.gf-series__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .3rem;
	min-height: 190px;
	padding: 1.75rem;
	overflow: hidden;
	border-radius: var(--gf-radio);
	background-size: cover;
	background-position: center;
	color: var(--gf-foto-texto) !important;
	text-decoration: none;
	box-shadow: var(--gf-sombra);
	transition: transform var(--gf-transicion), box-shadow var(--gf-transicion);
}

/* Velo negro sobre la foto: sin esto el texto blanco no se lee. */
.gf-series__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gf-velo-serie);
	transition: background var(--gf-transicion);
}

.gf-series__card:hover,
.gf-series__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--gf-sombra-alta);
}

.gf-series__card:hover::before {
	background: var(--gf-velo-serie-activa);
}

.gf-series__label,
.gf-series__count {
	position: relative;
	z-index: 1;
}

.gf-series__label {
	font-family: var(--gf-titulos);
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
}

.gf-series__count {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	opacity: .9;
}

/* --gf-columnas lo pone inc/home-cards.php segun cuantas tarjetas haya, hasta
   tres. Con dos columnas fijas, una tarjeta sola ocupaba media pantalla y una
   tercera quedaba sola en la fila de abajo. */
@media (min-width: 700px) {
	.gf-series { grid-template-columns: repeat(var(--gf-columnas, 2), minmax(0, 1fr)); gap: 1.5rem; }
	.gf-series__card { min-height: 260px; }
}

/* --- Categorias ---------------------------------------------------------- */

.gf-cats {
	display: grid;
	/* minmax(0, ...) y no 1fr a secas: 1fr no impide que la columna crezca
	   hasta el min-content del texto, y ahi la grilla se sale del contenedor
	   y aparece scroll horizontal. Pasaba en movil y en pantallas medianas. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gf-cats a {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: .75rem;
	min-width: 0;
	min-height: 140px;
	height: 100%;
	padding: 1.15rem 1.35rem;
	overflow: hidden;
	border-radius: var(--gf-radio);
	background-size: cover;
	background-position: center;
	color: var(--gf-foto-texto) !important;
	text-decoration: none;
	font-weight: 600;
	box-shadow: var(--gf-sombra);
	transition: transform var(--gf-transicion), box-shadow var(--gf-transicion);
}

.gf-cats a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gf-velo-tarjeta);
	transition: background var(--gf-transicion);
}

.gf-cats a:hover,
.gf-cats a:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--gf-sombra-alta);
}

.gf-cats a:hover::before {
	background: var(--gf-velo-tarjeta-activa);
}

.gf-cats__name,
.gf-cats__count {
	position: relative;
	z-index: 1;
}

.gf-cats__name {
	font-size: 1.05rem;
	text-shadow: var(--gf-foto-sombra);
}

.gf-cats__count {
	flex: none;
	min-width: 2rem;
	padding: .15rem .55rem;
	border-radius: 999px;
	background: var(--gf-foto-chip);
	font-size: .8rem;
	text-align: center;
}

@media (min-width: 640px) {
	.gf-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
	.gf-cats a { min-height: 170px; }
}

/* Igual que en las series, hasta seis. */
@media (min-width: 1100px) {
	.gf-cats { grid-template-columns: repeat(var(--gf-columnas, 6), minmax(0, 1fr)); }
}

/* ==========================================================================
   Productos

   La home usa el mismo bloque product-collection que el catalogo, asi que
   hereda su grilla y su espaciado. Lo unico que se ajusta es el subrayado del
   titulo, que viene del estilo de enlaces del tema padre.
   ========================================================================== */

.wp-block-post-title a,
.wc-block-components-product-name,
.woocommerce-loop-product__title a {
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible,
.wc-block-components-product-name:hover {
	color: var(--gf-tinta);
	text-decoration: none;
}

/* En celulares angostos, una sola columna: la tarjeta pasa de ~154px a ~330px
   de ancho y la foto del producto se ve de verdad. Vale para la home y para el
   catalogo, asi los dos siguen viendose igual. */
@media (max-width: 520px) {
	/* La clase se repite para ganarle en especificidad a la regla de
	   WooCommerce (.wc-block-product-template__responsive.columns-N), sin
	   recurrir a !important ni depender del orden de carga. */
	.wc-block-product-template__responsive.wc-block-product-template__responsive.wc-block-product-template__responsive {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

/* El sticky va en el <header> que envuelve a la parte de plantilla, no en
   .gf-header. Estaba adentro y no funcionaba: un elemento sticky solo se
   desplaza dentro de su contenedor, y ese contenedor medía exactamente lo
   mismo que la cabecera, asi que tenia cero recorrido y se iba con el scroll.
   El <header> cuelga de .wp-site-blocks, que es toda la pagina. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.gf-header {
	background: var(--gf-blanco);
	border-bottom: var(--gf-borde);
}

/* La barra de administracion de WordPress es fija y taparia la cabecera. */
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* --- Cabecera compacta al bajar -------------------------------------------- */

/* El relleno estaba como estilo en linea del bloque; se paso al CSS para
   poder animarlo. La clase --compacta la pone assets/js/header.js. */
.gf-header__barra {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	transition: padding var(--gf-transicion);
}

.gf-header--compacta .gf-header__barra {
	padding-top: .4rem;
	padding-bottom: .4rem;
}

/* La sombra aparece solo cuando hay contenido pasando por debajo; arriba de
   todo seria una linea de mas. */
.gf-header--compacta {
	box-shadow: var(--gf-sombra);
}

.gf-brand img {
	display: block;
	border-radius: 50%;
	transition: width var(--gf-transicion), height var(--gf-transicion);
}

/* El logo baja de 62 a 40. El alto va en auto para no deformarlo: la imagen es
   cuadrada, pero si algun dia se cambia por una que no lo sea, se achica sin
   aplastarse. */
.gf-header--compacta .gf-brand img {
	width: 40px;
	height: auto;
}

/* Quien pidio menos movimiento se queda con la cabecera fija, que es lo que
   resuelve el problema, pero sin la animacion. */
@media (prefers-reduced-motion: reduce) {
	.gf-header__barra,
	.gf-brand img {
		transition: none;
	}
}

.gf-header .wp-block-navigation {
	font-size: .95rem;
	font-weight: 600;
}

.gf-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--gf-tinta);
	text-decoration: none;
}

.gf-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--gf-terracota);
}

/* --- Buscador de la cabecera ---------------------------------------------- */

.gf-buscador {
	margin: 0;
}

/* El carrito no esta en la plantilla: lo inserta WooCommerce despues de lo que
   haya, asi que en el marcado queda detras del buscador. El orden que se lee
   es enlaces, lupa y carrito, y eso se arregla aca en vez de pelear con donde
   lo inyecta. */
.gf-header__acciones .wp-block-navigation { order: 1; }
.gf-header__acciones .gf-buscador { order: 2; }
.gf-header__acciones .wc-block-mini-cart { order: 3; }

/* La lupa tiene que leerse como los demas iconos de la barra, no como el boton
   de accion que el tema pinta de color. */
.gf-buscador .wp-block-search__button {
	padding: .35rem;
	border: 0;
	background: transparent;
	color: var(--gf-tinta);
	min-width: 0;
	transition: color var(--gf-transicion);
}

.gf-buscador .wp-block-search__button:hover,
.gf-buscador .wp-block-search__button:focus-visible {
	background: transparent;
	color: var(--gf-terracota);
}

.gf-buscador .wp-block-search__button svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* El campo que se despliega. Mismo lenguaje que los del checkout: sin relleno
   propio y con el borde marcando donde se escribe. */
.gf-buscador .wp-block-search__input {
	padding: .45rem .7rem;
	border: 1px solid rgba(43, 52, 57, .28);
	border-radius: var(--gf-radio-boton);
	background: transparent;
	font-size: .95rem;
	color: var(--gf-tinta);
}

.gf-buscador .wp-block-search__input:focus {
	border-color: var(--gf-terracota);
	box-shadow: 0 0 0 1px var(--gf-terracota);
	outline: none;
}

/* Plegado ocupa cero: sin esto deja un hueco a la izquierda de la lupa. */
.gf-buscador .wp-block-search__inside-wrapper {
	gap: .4rem;
}

/* En un celular el campo desplegado no entra al lado del menu y del carrito.
   Se lo saca de la barra y se lo apoya debajo, a lo ancho. */
@media (max-width: 600px) {
	.gf-buscador:has(.wp-block-search__input:not([aria-hidden="true"])) .wp-block-search__inside-wrapper {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1;
		padding: 0 1rem .75rem;
		background: var(--gf-blanco);
	}

	.gf-buscador .wp-block-search__input {
		width: 100%;
	}
}

/* ==========================================================================
   Pie
   ========================================================================== */

.gf-footer {
	background: var(--gf-blanco);
	border-top: var(--gf-borde);
}

.gf-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
}

.gf-footer__logo { display: block; border-radius: 50%; }

.gf-footer__tagline {
	margin: .9rem 0 0;
	max-width: 32ch;
	color: var(--gf-arena);
	font-size: .95rem;
}

.gf-footer__titulo {
	margin: 0 0 .85rem;
	font-family: var(--gf-titulos);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--gf-arena);
}

.gf-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
}

.gf-footer__col a {
	color: var(--gf-tinta) !important;
	text-decoration: none;
	font-size: .95rem;
}

.gf-footer__col a:hover,
.gf-footer__col a:focus-visible {
	color: var(--gf-terracota) !important;
}

.gf-footer__legal {
	margin: 2.75rem 0 0;
	padding-top: 1.5rem;
	border-top: var(--gf-borde);
	color: var(--gf-arena);
	font-size: .875rem;
}

@media (min-width: 640px) {
	.gf-footer__grid { grid-template-columns: repeat(3, 1fr); }
	.gf-footer__marca { grid-column: 1 / -1; }
}

/* Cinco columnas para los cinco bloques. Con cuatro, Contacto no entraba en la
   fila y caia debajo de la marca, que es donde mas se nota el hueco. La ultima
   va mas ancha que las de enlaces porque ahi vive el correo, que es la linea
   mas larga del pie.

   Arranca en 1100 y no en 900: a 900 las columnas del medio quedaban de 84px y
   se partian "Tu compra" y "Gilmore Girls" en dos lineas. Hasta ahi siguen las
   tres columnas, que entran bien. */
@media (min-width: 1100px) {
	.gf-footer__grid {
		grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr;
		gap: 2.5rem;
	}

	.gf-footer__marca { grid-column: auto; }
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

/* El recuadro del foco, solo cuando se navega con teclado: al hacer clic con
   el mouse molesta y no aporta nada. */
:focus:not(:focus-visible) {
	outline: none;
}

:where(.gf-btn, .gf-hero__nav, .gf-hero__dot, .gf-series__card, .gf-cats a):focus-visible {
	outline: 3px solid var(--gf-terracota);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.gf-hero__track { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   Scroll infinito del listado
   ========================================================================== */

.gf-infinito {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	min-height: 3rem;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.gf-infinito__aviso {
	margin: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--gf-arena);
	font-size: .9rem;
}

/* Girito de carga. Va adentro del aviso y no como fila propia para que el
   alto del pie no cambie al aparecer: el boton se oculta con visibility y
   sigue ocupando su lugar. */
.gf-infinito__spinner {
	display: none;
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid currentColor;
	/* El lado transparente es lo que hace que se note el giro. */
	border-top-color: transparent;
	border-radius: 50%;
	opacity: .8;
	animation: gf-girar .7s linear infinite;
}

.gf-infinito--cargando .gf-infinito__spinner {
	display: block;
}

@keyframes gf-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gf-infinito__spinner { animation-duration: 2.4s; }
}

.gf-infinito__boton {
	padding: .8rem 1.9rem;
	border: var(--gf-borde);
	border-radius: var(--gf-radio-boton);
	background: transparent;
	color: var(--gf-tinta);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--gf-transicion), color var(--gf-transicion);
}

.gf-infinito__boton:hover:not(:disabled) {
	background: var(--gf-tinta);
	color: var(--gf-blanco);
}

.gf-infinito__boton:disabled { opacity: .5; cursor: default; }

/* Mientras carga manda el aviso, no el boton. */
.gf-infinito--cargando .gf-infinito__boton { visibility: hidden; }

.gf-infinito__boton:focus-visible {
	outline: 3px solid var(--gf-terracota);
	outline-offset: 3px;
}

/* La paginacion que reemplaza el scroll infinito.
   El JS le pone el atributo hidden, pero eso solo vale display:none desde la
   hoja del navegador y WordPress declara "body .is-layout-flex {display:flex}"
   para el soporte de layout de los bloques. Le ganaba, y la paginacion se
   seguia viendo debajo del boton de cargar mas. Hay que decirlo con !important
   porque la regla de WordPress ya trae la especificidad de body. */
.wp-block-query-pagination[hidden] {
	display: none !important;
}

/* --- Selector de orden ---------------------------------------------------- */

/* Venia con la caja gris del sistema operativo, que no se parece a nada del
   sitio. Se le saca la apariencia nativa y se lo viste como los desplegables
   del checkout, pero mas chico: aca es un control secundario al lado del
   contador de resultados, no un campo de un formulario. */
.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	padding: .4rem 2rem .4rem .7rem;
	border: 1px solid rgba(43, 52, 57, .28);
	border-radius: var(--gf-radio-boton);
	background-color: transparent;
	/* La flecha va como imagen de fondo porque al quitar la apariencia nativa
	   desaparece la del sistema, y un <select> no admite ::after. Es el mismo
	   dibujo que usa WooCommerce en el checkout, en gris. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237E8A90'%3E%3Cpath d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .35rem center;
	background-size: 20px 20px;
	color: var(--gf-tinta);
	font-family: inherit;
	font-size: .85rem;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color var(--gf-transicion);
}

.woocommerce-ordering select.orderby:hover {
	border-color: rgba(43, 52, 57, .5);
}

.woocommerce-ordering select.orderby:focus {
	border-color: var(--gf-terracota);
	box-shadow: 0 0 0 1px var(--gf-terracota);
	outline: none;
}

/* --- Contador de resultados ---------------------------------------------- */

/* "Mostrando 1-16 de 72 resultados" venia heredando el cuerpo del tema y
   quedaba en 21px, contra los 45px del titulo: competia con el h1 siendo un
   dato de referencia. Va chico y en gris. */
.woocommerce-result-count,
.wc-block-product-results-count {
	margin: 0;
	color: var(--gf-arena);
	font-size: .8rem;
	line-height: 1.5;
}

/* ==========================================================================
   Aviso de poco stock
   ========================================================================== */

/* Los avisos de stock son texto, no controles: cualquier borde o pastilla
   los hace parecer botones y la gente les hace clic. */
.stock {
	display: block;
	margin: 0 0 .35rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: .95rem;
	font-weight: 600;
}

.stock.gf-stock-urgente,
.stock.in-stock {
	color: var(--gf-urgencia) !important;
}

.stock.out-of-stock {
	color: var(--gf-arena) !important;
}

/* --- Descripcion de la ficha ---------------------------------------------- */

/* Antes habia dos descripciones: un resumen arriba, hecho con core/post-excerpt,
   y las pestanas de WooCommerce abajo con la descripcion completa. Eran el mismo
   texto dos veces, y el de arriba salia peor: post-excerpt pasa por
   wp_strip_all_tags() y perdia las negritas de 42 de los 72 productos. Quedo una
   sola, arriba, con core/post-content y su formato. */
.gf-ficha__descripcion {
	text-wrap: pretty;
}

.gf-ficha__descripcion > :first-child { margin-top: 0; }
.gf-ficha__descripcion > :last-child  { margin-bottom: 0; }

/* Los parrafos vienen del editor sin clases, asi que el interlineado y el aire
   entre ellos se fijan aca. */
.gf-ficha__descripcion p {
	margin: 0 0 .6em;
	line-height: 1.6;
}

.gf-ficha__descripcion ul,
.gf-ficha__descripcion ol {
	margin: 0 0 .6em;
	padding-left: 1.25em;
}

.gf-ficha__descripcion li { margin-bottom: .25em; }

/* La negrita hay que declararla con un numero. El navegador le da a <strong>
   font-weight:bolder, que es RELATIVO al padre, y el cuerpo del tema pesa 300:
   desde ahi bolder resuelve a 400, no a 700. El resultado era que 42 de los 72
   productos tenian su negrita en el HTML y se veia igual que el texto normal.

   Vuelve a morder en cada bloque de texto nuevo: las paginas legales llegaron
   con la negrita muerta por lo mismo, y ahi importa mas que en un producto
   porque es donde estan los plazos y los limites. Al sumar un contenedor de
   texto libre, agregarlo a esta lista. */
.gf-ficha__descripcion strong,
.gf-ficha__descripcion b,
.gf-legal strong,
.gf-legal b {
	font-weight: 700;
}

.gf-ficha__descripcion a {
	color: var(--gf-terracota);
	text-underline-offset: .2em;
}

/* --- Aviso de 2x1 en la ficha --------------------------------------------- */

/* Lo imprime el plugin (gilmore_aviso_2x1_en_ficha). Salia como un parrafo mas
   y se perdia entre el precio y la descripcion, que es justo donde tiene que
   pesar: es el gancho de la promo. */
.gf-promo-2x1 {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 1rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	color: var(--gf-urgencia);
	/* Fondo apenas tenido del mismo tono, para que resalte sin gritar como lo
	   haria la pastilla llena. */
	background: color-mix(in srgb, var(--gf-urgencia) 12%, transparent);
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Los navegadores sin color-mix se quedan con el fondo de arriba, que en ese
   caso no se aplica; este es el respaldo plano. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.gf-promo-2x1 { background: #FBEAE3; }
}

.gf-promo-2x1::before {
	content: "🏷";
	font-size: .95em;
}

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

   El area superior y la descripcion se acotan a 1300px: a 1560 la linea de
   texto queda larguisima y la ficha se lee incomoda. Los relacionados de mas
   abajo siguen a lo ancho, que ahi si conviene mostrar mas productos.
   ========================================================================== */

/* La clase se repite para superar en especificidad a
   `.is-layout-constrained > .alignwide`, que es la que fija 1560px. Sin esto
   gana WordPress y el ancho no cambia. */
.is-layout-constrained > .gf-ficha__principal.gf-ficha__principal {
	max-width: var(--gf-ficha-ancho, 1300px);
	margin-left: auto;
	margin-right: auto;
}

/* El cuerpo del tema padre son 22px, pensado para lectura de blog. En la
   ficha eso agranda todo (descripcion y meta) y le saca aire. Se baja al
   preset medium, que es el mismo que usa el precio. */
.gf-ficha__principal {
	font-size: var(--gf-ficha-texto);
}

.gf-ficha__principal .gf-ficha__descripcion,
.gf-ficha__principal .wp-block-woocommerce-product-meta {
	font-size: var(--gf-ficha-texto);
}

/* --- Jerarquia de la ficha ------------------------------------------------ */

/* El titulo a 48px se comia el espacio y aplastaba al precio. */
.gf-ficha__principal h1.wp-block-post-title {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	line-height: 1.15;
	margin-bottom: .5rem;
}

/* El precio tiene que leerse como precio: es el dato que decide la compra y
   antes competia de igual a igual con las viñetas. */
.gf-ficha__principal .wp-block-woocommerce-product-price {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gf-terracota);
	margin-bottom: 1.25rem;
}

.gf-ficha__principal .wp-block-woocommerce-product-price del {
	margin-right: .5rem;
	color: var(--gf-arena);
	font-size: 1rem;
	font-weight: 500;
}

.gf-ficha__principal .wp-block-woocommerce-product-price ins {
	text-decoration: none;
}

/* El boton se sentia pesado: mucho alto y mucho texto. Se afina sin perder
   presencia, que sigue siendo la accion principal. */
.gf-ficha__principal .single_add_to_cart_button {
	padding: .75rem 1.75rem !important;
	font-size: .95rem !important;
	letter-spacing: .01em;
}

/* --- Galeria -------------------------------------------------------------- */

/* La foto es lo que vende: se la deja crecer con el contenedor en vez de
   clavarla en 512px, y se le da el mismo redondeo que las tarjetas del resto
   del sitio para que no quede como un elemento ajeno. */
.gf-ficha__principal .woocommerce-product-gallery__image img,
.gf-ficha__principal .wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--gf-radio);
}

.gf-ficha__principal .woocommerce-product-gallery {
	position: relative;
}

/* La columna de texto respira mejor con un poco de aire a la izquierda. */
@media (min-width: 782px) {
	.gf-ficha__principal > .wp-block-column + .wp-block-column {
		padding-left: clamp(1rem, 2vw, 2.5rem);
	}
}

/* --- Galeria: ocupar la columna ------------------------------------------- */

/* WooCommerce le deja float:left y sin ancho efectivo, asi que la galeria se
   encogia al tamano natural de la imagen (512px) dentro de una columna de 650
   y quedaba un hueco muerto contra el texto. */
/* Quien limitaba la galeria no era la galeria sino su bloque contenedor:
   `.woocommerce .wp-block-woocommerce-product-image-gallery` le clava
   max-width 512px, el tamano de la imagen. Con eso la foto nunca llenaba su
   columna y quedaba un hueco muerto contra el texto. */
.woocommerce .gf-ficha__principal .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.gf-ficha__principal .woocommerce-product-gallery.woocommerce-product-gallery.images {
	width: 100%;
	max-width: none;
	float: none;
}

.gf-ficha__principal .woocommerce-product-gallery__image img,
.gf-ficha__principal .woocommerce-product-gallery img.wp-post-image {
	width: 100%;
	height: auto;
}

/* Aire entre la foto grande y las miniaturas, que venian pegadas. */
.gf-ficha__principal .flex-control-thumbs.flex-control-thumbs.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
	/* La regla de WooCommerce fija margin:0 y gana; se fuerza solo esto. */
	margin: .9rem 0 0 !important;
	padding: 0;
	list-style: none;
}

.gf-ficha__principal .flex-control-thumbs.flex-control-thumbs li {
	/* WooCommerce les fija width:25% pensando en un layout flotado; dentro de
	   la grilla eso las dejaba en 38px. */
	width: 100% !important;
	margin: 0;
	list-style: none;
}

.gf-ficha__principal .flex-control-thumbs img {
	width: 100%;
	height: auto;
	border-radius: calc(var(--gf-radio) * .6);
	opacity: .65;
	cursor: pointer;
	transition: opacity var(--gf-transicion);
}

.gf-ficha__principal .flex-control-thumbs img:hover,
.gf-ficha__principal .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* --- Insignia de oferta --------------------------------------------------- */

/* Venia en un verde oliva que no pertenece a ninguna paleta del sitio. */
.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	background: var(--gf-terracota) !important;
	color: var(--gf-blanco) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: .78rem !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	padding: .3rem .8rem !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.5 !important;
}

/* --- Pastilla del 2x1 ----------------------------------------------------- */

/* Arriba a la izquierda: la insignia de oferta ocupa la derecha y un producto
   puede tener las dos. Las dos van en naranja, asi que se distinguen por el
   lado y por el texto, no por el color. */
.gf-2x1 {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--gf-terracota);
	color: var(--gf-blanco);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	pointer-events: none;
}

/* En la ficha la foto es mucho mas grande y la pastilla se despega del borde
   igual que la de oferta. */
.gf-ficha__principal .gf-2x1 {
	top: .9rem;
	left: .9rem;
}

/* En la ficha la insignia es un circulo posicionado; se pasa a pastilla. */
.gf-ficha__principal .onsale {
	position: absolute;
	top: .9rem;
	left: .9rem;
	z-index: 2;
	width: auto !important;
	height: auto !important;
}

/* --- Redondeo de las fotos en todas las grillas --------------------------- */

/* Home, catalogo, categorias, resultados de filtro y relacionados: todas usan
   alguno de estos contenedores segun el bloque. */
.wc-block-components-product-image img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product img,
.wc-block-product .wc-block-components-product-image img {
	border-radius: var(--gf-radio);
}

/* El contenedor tambien, para que el recorte acompane a la imagen. Ese
   overflow es ademas lo que recorta el zoom de abajo. */
.wc-block-components-product-image,
.wc-block-components-product-image__inner-container {
	border-radius: var(--gf-radio);
	overflow: hidden;
}

/* --- Columnas de los relacionados ----------------------------------------- */

/* WooCommerce salta de una columna a cinco en 600px: abajo de eso pone
   width:100% y arriba calc(20% - 1em), sin nada en el medio. En una tablet
   quedaban cinco tarjetas de 100px con el titulo partido en cuatro lineas.

   Se reparte el salto en una escalera. Los cortes son los que ya usa el tema
   en otras grillas, para que todo el sitio cambie de forma en los mismos
   anchos.

   El selector repite .is-flex-container y arranca en body porque la regla de
   WooCommerce ya trae cuatro clases; con menos, no gana. La formula es la
   misma que la de ellos (el -1em compensa el hueco entre columnas). */
@media (min-width: 600px) {
	body .wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li {
		width: calc(50% - 1em);
	}
}

@media (min-width: 782px) {
	body .wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li {
		width: calc(33.333% - 1em);
	}
}

@media (min-width: 1100px) {
	body .wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li {
		width: calc(25% - 1em);
	}
}

@media (min-width: 1400px) {
	body .wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li {
		width: calc(20% - 1em);
	}
}

/* --- Zoom al pasar por encima --------------------------------------------- */

/* La foto se agranda apenas al apuntar la tarjeta, en el catalogo y en los
   relacionados. El 4% es a proposito: mas que eso se nota el recorte de los
   bordes y las fotos, que son de producto sobre fondo liso, empiezan a perder
   el objeto.

   El movimiento va mas lento que el resto de las transiciones del tema. A los
   200ms de --gf-transicion el zoom parece un salto; asi acompana al mouse.

   Escala la imagen y no la tarjeta para no mover el titulo, el precio ni el
   boton, que son los que se van a clickear. */
.wc-block-product .wc-block-components-product-image img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product img {
	transition: transform 450ms cubic-bezier(.2, .7, .3, 1);
}

.wc-block-product:hover .wc-block-components-product-image img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.04);
}

/* Con el puntero fino y el foco de teclado tambien, para que no dependa solo
   del mouse. */
.wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product .wc-block-components-product-image img,
	.wc-block-grid__product-image img,
	.woocommerce ul.products li.product img {
		transition: none;
	}

	.wc-block-product:hover .wc-block-components-product-image img,
	.wc-block-product:focus-within .wc-block-components-product-image img,
	.wc-block-grid__product:hover .wc-block-grid__product-image img,
	.woocommerce ul.products li.product:hover img {
		transform: none;
	}
}

/* --- Respiracion entre secciones de la ficha ------------------------------ */

/* La ficha terminaba pegada a los relacionados, y los relacionados al pie. Sin
   ese aire las tres zonas se leen como una sola masa. El margen estaba en las
   pestanas; al sacarlas paso al bloque de arriba, que ahora es el ultimo antes
   de los relacionados. */
.gf-ficha__principal {
	margin-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.wp-block-woocommerce-product-collection.alignwide {
	margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* ==========================================================================
   Titulos de las paginas de compra

   Carrito, checkout y cuenta usaban el mismo tamano que un titulo de ficha.
   Ahi el titulo no vende nada: lo importante es el contenido.
   ========================================================================== */

.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title {
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   Boton de WhatsApp
   ========================================================================== */

.gf-wsp {
	position: fixed;
	right: clamp(1rem, 2.5vw, 1.75rem);
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	z-index: 200;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff !important;
	box-shadow: var(--gf-sombra-alta);
	transition: transform var(--gf-transicion);
}

.gf-wsp:hover,
.gf-wsp:focus-visible {
	transform: scale(1.06);
	color: #fff !important;
}

.gf-wsp:focus-visible {
	outline: 3px solid var(--gf-tinta);
	outline-offset: 3px;
}

/* ==========================================================================
   Formulario de checkout
   ========================================================================== */

/* Los <select> de Pais y de Provincia salian pegados al campo de arriba.
   WooCommerce le da 12px de margen superior a cada campo de texto y despues se
   lo saca al de pais, porque da por hecho que el pais va primero en el
   formulario. En el formato argentino va despues de Nombre y Apellidos, asi que
   ese cero deja las dos filas tocandose. Al de provincia le pasa lo mismo:
   arrancaba 12px mas arriba que Localidad, que va a su lado, y quedaban
   desalineados.

   Se repone el mismo 12px de los demas campos, no un valor propio, para que la
   grilla quede pareja. Se excluye el primer campo, que es el unico caso en el
   que WooCommerce tiene razon. El selector lleva .wc-block-components-form
   adelante para ganarle en especificidad a la regla original. */
.wc-block-components-form .wc-block-components-address-form > .wc-block-components-country-input:not(:first-child),
.wc-block-components-form .wc-block-components-address-form > .wc-block-components-state-input:not(:first-child) {
	margin-top: 12px;
}

/* Los campos venian con fondo blanco sobre el crema del sitio y se leian como
   parches. En transparente heredan la superficie donde esten, asi que sirven
   igual sobre el crema del formulario que sobre una tarjeta clara. El borde
   pasa a ser lo que marca donde se escribe.

   Va con !important, igual que las insignias: WooCommerce declara el fondo
   enumerando cada input[type="..."], lo que le da 0,3,1 de especificidad.
   Igualarla desde aca obligaria a repetir toda esa lista de tipos y a
   mantenerla cuando le agreguen uno. En el select el fondo no esta en el
   <select> sino en el contenedor que le dibuja la flecha. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-blocks-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: transparent !important;
}

/* Sin relleno propio el borde queda como unica pista de que es un campo, asi
   que se afina el color y se apoya mas en el foco.

   En el select el borde lo dibuja el <select>, no el contenedor: apuntarle al
   contenedor dejaba los desplegables con el borde oscuro original y los campos
   de texto con el nuevo, que era la diferencia que se veia. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	border-color: rgba(43, 52, 57, .28) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--gf-terracota) !important;
	/* El segundo borde lo dibuja una sombra y no un outline para que no corra
	   el layout ni tape el redondeo. */
	box-shadow: 0 0 0 1px var(--gf-terracota);
	outline: none;
}

/* Provincia quedaba 12px mas abajo que Localidad, que va a su lado. El
   envoltorio lleva el margen que se repone arriba y adentro WooCommerce le
   pone otros 12px propios a .wc-blocks-components-select; los dos se sumaban.
   El de adentro sobra: el de afuera ya separa la fila, igual que en los campos
   de texto, donde el input arranca pegado a su envoltorio. */
.wc-block-components-address-form .wc-block-components-state-input .wc-blocks-components-select {
	margin-top: 0;
}

/* --- Etiquetas ------------------------------------------------------------ */

/* En reposo la etiqueta ocupa el lugar del texto y venia en 16px, el mismo
   cuerpo que el valor: el campo vacio pesaba igual que uno lleno. Se baja solo
   ese estado; el flotado se deja como esta, porque WooCommerce lo achica al
   82% y cae en 13px, que es justo el cuerpo de las etiquetas de los select. */
.wc-block-components-text-input:not(.is-active) label {
	font-size: 14px;
	transition: font-size var(--gf-transicion);
}

/* --- Desplegables --------------------------------------------------------- */

/* La flecha viene en el color del texto y compite con el valor. Va en gris y
   se tine al pasar por encima o al enfocar, que es cuando importa. Solo el
   control cerrado se puede vestir: la lista que abre la dibuja el sistema
   operativo y no la alcanza el CSS. */
/* El selector repite la clase del padre para igualar la especificidad con la
   que WooCommerce pinta la flecha; con una sola clase perdia. */
.wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--gf-arena);
	transition: fill var(--gf-transicion);
	pointer-events: none;
}

.wc-blocks-components-select__select {
	cursor: pointer;
	transition: border-color var(--gf-transicion);
}

.wc-blocks-components-select__container:hover .wc-blocks-components-select__select {
	border-color: rgba(43, 52, 57, .5) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__container:hover .wc-blocks-components-select__expand,
.wc-blocks-components-select .wc-blocks-components-select__container:focus-within .wc-blocks-components-select__expand {
	fill: var(--gf-terracota);
}

/* El autocompletado de Chrome pinta el campo de amarillo y se come el
   transparente. No hay forma de cambiar ese fondo: se tapa con una sombra
   interna del color de la superficie. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 60px var(--gf-crema) inset;
	-webkit-text-fill-color: var(--gf-tinta);
}

/* En el checkout estorba: compite con el boton de pagar, que es lo unico
   que el cliente tiene que apretar ahi. */
.woocommerce-checkout .gf-wsp {
	display: none;
}

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

/* --- Titulo del carrito lateral ------------------------------------------ */

/* Venia en 32px, el tamano de un titulo de seccion, dentro de un panel de
   400px de ancho. Ocupaba dos lineas antes de mostrar un solo producto. */
.wc-block-mini-cart__title,
.wp-block-woocommerce-mini-cart-title-block,
.wp-block-woocommerce-mini-cart-title-label-block {
	font-size: 1.15rem !important;
	line-height: 1.3;
}

/* El contador es un dato secundario: no necesita el peso del titulo. */
.wp-block-woocommerce-mini-cart-title-items-counter-block {
	font-size: .95rem !important;
	font-weight: 400;
	color: var(--gf-arena);
}

/* Los dos botones del pie del cajon quedaban de 57px de alto con texto de
   17,5px: heredan el boton global del theme.json, que esta dimensionado para
   el CTA del hero. Ahi es correcto, pero aca son dos botones lado a lado en un
   panel angosto y no entra el texto sin apretarse. Se acotan solo aca; el
   boton de la ficha y el de finalizar compra siguen grandes, que es donde
   conviene. */
.wc-block-mini-cart__footer .wc-block-components-button {
	padding: .7rem 1.1rem;
	font-size: .95rem;
	min-height: 0;
}

/* Con menos aire alrededor, el texto largo ("Ir a Finalizar compra") se
   apretaba contra los bordes en pantallas angostas. */
.wc-block-mini-cart__footer .wc-block-components-button > * {
	white-space: normal;
	line-height: 1.3;
}

/* --- Hero en movil -------------------------------------------------------- */

/* El contenido del panel medía 472px dentro de un slide de 440 con overflow
   hidden: el botón quedaba cortado por abajo. Se le da altura suficiente y se
   sube el bloque separándolo más del borde inferior. */
@media (max-width: 781px) {
	.gf-hero__slide {
		height: clamp(470px, 115vw, 600px);
	}

	.gf-hero__panel {
		gap: .6rem;
		padding: 2rem 1.25rem 4rem;
	}

	.gf-hero__title {
		font-size: clamp(1.9rem, 6.4vw, 2.4rem);
	}

	.gf-hero__text {
		font-size: 1rem;
	}
}

/* --- Resumen y descripción en la ficha ------------------------------------ */

/* La descripcion corta vende, la larga informa. Van juntas en la columna pero
   con una separacion que las distinga: sin esto se leen como un solo bloque. */
.gf-ficha__descripcion {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: var(--gf-borde);
}

.gf-ficha__resumen {
	font-weight: 500;
}

.gf-ficha__descripcion p {
	margin: 0 0 .55rem;
}

.gf-ficha__descripcion p:last-child {
	margin-bottom: 0;
}

/* --- Botón de arrepentimiento --------------------------------------------- */

/* El "boton de arrepentimiento" no tiene estilo propio: es un enlace mas de la
   columna "Tu compra" y se ve como sus vecinos. Pasó por botón y por enlace
   subrayado antes de quedar así, por decisión de diseño. Si alguna vez hay que
   destacarlo —la Resolución 424/2020 habla de "un lugar destacado, en cuanto a
   visibilidad y tamaño"— la regla va calificada con .gf-footer__col, porque ese
   selector trae text-decoration none y le gana a una clase sola. */

/* --- Formularios ---------------------------------------------------------- */

.fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: .95rem;
}

.fluentform .ff-el-form-control {
	border: var(--gf-borde);
	border-radius: var(--gf-radio-boton);
	padding: .7rem .9rem;
	font-family: inherit;
	font-size: 1rem;
	background: var(--gf-blanco);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--gf-urgencia);
	outline: 2px solid var(--gf-urgencia);
	outline-offset: 1px;
}

.fluentform .ff-el-help-message {
	color: var(--gf-arena);
	font-size: .85rem;
}

.fluentform .ff-btn-submit {
	padding: .8rem 1.9rem !important;
	border-radius: var(--gf-radio-boton) !important;
	background: var(--gf-terracota) !important;
	color: var(--gf-blanco) !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	border: 0 !important;
}