/*
Theme Name: Los Gigantes
Theme URI: https://smlg.com.mx/
Author: Supermercado Los Gigantes
Author URI: https://smlg.com.mx/
Description: Tema de comercio electronico para Supermercado Los Gigantes, con los modulos de operacion: buscador predictivo con busqueda por codigo de barras, compra rapida desde el catalogo, campos de producto (EAN, pasillo, formato, origen) y franjas horarias de entrega y recogida con cupo.
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: losgigantes
Tags: e-commerce, custom-menu, custom-logo, translation-ready, accessibility-ready, threaded-comments, footer-widgets
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ==========================================================================
   1. TOKENS DEL SISTEMA DE DISENO
   ========================================================================== */

:root {
	--lg-green:        #43694f;
	--lg-green-dark:   #2f4e3a;
	--lg-green-soft:   #eaf1e7;
	--lg-lime:         #7aa641;
	--lg-orange:       #d86a31;
	--lg-orange-dark:  #b85523;
	--lg-ink:          #26342b;
	--lg-muted:        #66736a;
	--lg-cream:        #f7f8f5;
	--lg-white:        #ffffff;
	--lg-line:         #e2e8e1;
	--lg-focus:        #a84d23;
	--lg-danger:       #b3261e;

	--lg-shadow:       0 18px 40px rgba(30, 57, 38, .11);
	--lg-shadow-sm:    0 4px 14px rgba(30, 57, 38, .08);

	--lg-radius:       15px;
	--lg-radius-md:    11px;
	--lg-radius-sm:    9px;

	--lg-container:    1180px;
	--lg-gutter:       40px;

	--lg-font:         Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--lg-header-h:     94px;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--lg-cream);
	color: var(--lg-ink);
	font-family: var(--lg-font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.045em; line-height: 1.15; }

a { color: var(--lg-green-dark); }
a:hover { color: var(--lg-orange); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	/*
	 * Anillo doble: interior blanco, exterior --lg-focus. Sobre el verde de la
	 * cabecera destaca el blanco (6.2:1); sobre el crema del cuerpo destaca el
	 * oscuro (5.3:1). Con un solo anillo naranja el foco daba 1.11:1 sobre la
	 * cabecera, es decir, era invisible.
	 */
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--lg-focus);
}

.lg-container {
	width: min(var(--lg-container), calc(100% - var(--lg-gutter)));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 999;
	padding: 12px 18px;
	border-radius: 0 0 var(--lg-radius-sm) var(--lg-radius-sm);
	background: var(--lg-orange);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   3. BARRA SUPERIOR
   ========================================================================== */

.lg-topbar {
	background: var(--lg-green-dark);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
}
.lg-topbar .lg-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 36px;
	text-align: center;
}
.lg-topbar span { opacity: .85; }

/* ==========================================================================
   4. CABECERA
   ========================================================================== */

.lg-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--lg-green);
	color: #fff;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .05);
}
.lg-header-row {
	display: grid;
	grid-template-columns: 190px 1fr auto;
	align-items: center;
	gap: 30px;
	min-height: var(--lg-header-h);
}
.lg-brand { display: block; width: 168px; }
.lg-brand img { display: block; width: 100%; max-height: 84px; object-fit: contain; }
.lg-brand-text { color: #fff; font-size: 1.15rem; font-weight: 900; text-decoration: none; line-height: 1.1; }

.lg-search {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 46px;
	padding: 4px 5px 4px 16px;
	border-radius: 12px;
	background: #fff;
	/* Ancla el panel de sugerencias. Antes vivia en el bloque de modulos. */
	position: relative;
}
.lg-search svg { flex: 0 0 auto; width: 19px; color: var(--lg-muted); }
.lg-search input[type="search"] {
	width: 100%;
	min-width: 60px;
	padding: 8px 10px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--lg-ink);
}
.lg-search input[type="search"]::placeholder { color: var(--lg-muted); }
.lg-search button {
	padding: 10px 15px;
	border: 0;
	border-radius: var(--lg-radius-sm);
	background: var(--lg-orange-dark);
	color: #fff;
	font-weight: 800;
	transition: background .2s;
}
.lg-search button:hover { background: #9c4a1e; }

.lg-header-actions { display: flex; align-items: center; gap: 12px; }
.lg-account {
	color: #fff;
	font-size: .87rem;
	line-height: 1.25;
	text-decoration: none;
}
.lg-account small { display: block; opacity: .85; font-size: .72rem; }
.lg-account:hover { color: #fff; text-decoration: underline; }

.lg-cart-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 10px;
	background: #fff;
	color: var(--lg-green-dark);
	font-weight: 800;
}
.lg-cart-count {
	display: grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 50px;
	background: var(--lg-orange);
	color: #fff;
	font-size: .75rem;
}

.lg-menu-toggle {
	display: none;
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font-weight: 800;
}

/* ==========================================================================
   5. NAVEGACION
   ========================================================================== */

.lg-nav {
	background: #fff;
	border-bottom: 1px solid var(--lg-line);
}
.lg-nav .lg-container { position: relative; }
.lg-nav ul {
	display: flex;
	align-items: center;
	/*
	 * Envuelve, no desplaza. Antes llevaba overflow-x: auto, y por
	 * especificacion, si un eje de overflow no es visible el otro se computa a
	 * auto: el ul se volvia contenedor de scroll y recortaba el .sub-menu
	 * absoluto. El overflow: visible del propio submenu no ayudaba, porque
	 * quien recorta es el ancestro.
	 */
	flex-wrap: wrap;
	gap: 8px 25px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lg-nav li { position: relative; }
.lg-nav a {
	color: #415047;
	font-size: .9rem;
	font-weight: 750;
	text-decoration: none;
	white-space: nowrap;
}
.lg-nav a:hover,
.lg-nav .current-menu-item > a,
.lg-nav .current_page_item > a,
.lg-nav .current-menu-parent > a { color: var(--lg-orange); }

.lg-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 220px;
	min-height: 0;
	padding: 8px 0;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: #fff;
	box-shadow: var(--lg-shadow);
	overflow: visible;
}
.lg-nav li:hover > .sub-menu,
.lg-nav li:focus-within > .sub-menu { display: flex; }
.lg-nav .sub-menu a { display: block; padding: 9px 16px; }
.lg-nav .sub-menu a:hover { background: var(--lg-green-soft); }

/* ==========================================================================
   6. PORTADA: HERO
   ========================================================================== */

.lg-hero {
	overflow: hidden;
	background: linear-gradient(110deg, var(--lg-green-soft) 0%, var(--lg-cream) 51%, #f6e7df 100%);
}
.lg-hero-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	align-items: center;
	gap: 34px;
	min-height: 355px;
}
.lg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--lg-green-dark);
	font-size: .77rem;
	font-weight: 900;
	letter-spacing: .085em;
	text-transform: uppercase;
}
.lg-eyebrow::before {
	content: "";
	display: block;
	width: 20px;
	height: 3px;
	border-radius: 4px;
	background: var(--lg-orange);
}
.lg-hero h1 {
	max-width: 680px;
	margin: 14px 0 16px;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	letter-spacing: -.065em;
	line-height: .94;
}
.lg-hero h1 strong { display: block; color: var(--lg-orange); }
.lg-hero-lead {
	max-width: 500px;
	margin: 0 0 25px;
	color: #415047;
	font-size: 1.04rem;
}
.lg-note {
	display: inline-flex;
	margin: 18px 0 0;
	padding: 8px 11px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .72);
	color: var(--lg-green-dark);
	font-size: .84rem;
	font-weight: 750;
}
/*
 * Ilustracion del hero.
 *
 * Antes eran dos emojis y el logotipo. Ahora son productos del catalogo, y
 * eso cambia dos reglas:
 *
 *   - Las imagenes no se amplian nunca. Las fotos del catalogo son de unos
 *     186 px; estiradas al ancho de la tarjeta se ven peor que pequenas y
 *     centradas. De ahi max-width en lugar de width, y object-fit: contain,
 *     el mismo criterio que en la rejilla: el envase entero, sin recortar.
 *   - La tarjeta conserva el verde de marca, pero la foto va sobre un panel
 *     claro dentro. Un envase sobre fondo oscuro pierde el contorno, y el
 *     contorno es justo lo que el cliente reconoce.
 */
.lg-hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.lg-hero-card {
	position: relative;
	display: block;
	width: min(100%, 420px);
	padding: 18px;
	border-radius: 28px;
	background: var(--lg-green);
	box-shadow: var(--lg-shadow);
	transform: rotate(2deg);
	transition: transform .25s ease;
}
.lg-hero-card:hover { transform: rotate(2deg) translateY(-4px); }
.lg-hero-card img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 320px;
	margin: 0 auto;
	padding: 14px;
	border-radius: 20px;
	background: #fff;
	object-fit: contain;
}
/* El logotipo de respaldo no necesita el panel claro: ya viene con fondo. */
.lg-hero-card--logo img { padding: 6px; background: none; }

.lg-roundel {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 124px;
	height: 124px;
	padding: 16px;
	border-radius: 50%;
	box-shadow: var(--lg-shadow);
	transition: transform .25s ease;
}
.lg-roundel img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
.lg-roundel--a { top: 20px; right: -10px; background: #fff; transform: rotate(11deg); }
.lg-roundel--b { bottom: 4px; left: -18px; width: 98px; height: 98px; background: #f6e7df; transform: rotate(-12deg); }
.lg-roundel--a:hover { transform: rotate(11deg) translateY(-4px); }
.lg-roundel--b:hover { transform: rotate(-12deg) translateY(-4px); }
.lg-hero-card:focus-visible,
.lg-roundel:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--lg-focus); }

.lg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--lg-orange-dark);
	color: #fff;
	font-weight: 900;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(216, 106, 49, .22);
	transition: background .2s, transform .2s;
}
.lg-button:hover { background: #9c4a1e; color: #fff; transform: translateY(-1px); }

/* ==========================================================================
   7. SECCIONES
   ========================================================================== */

.lg-section { padding: 58px 0; }
.lg-section--tight { padding: 36px 0; }
.lg-section--panel { background: #fff; border-block: 1px solid var(--lg-line); }

.lg-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 23px;
}
.lg-section-head h2 { margin: 0; font-size: 1.7rem; }
.lg-section-head p { margin: 4px 0 0; color: var(--lg-muted); }
.lg-all-link { color: var(--lg-orange-dark); font-weight: 850; text-decoration: none; white-space: nowrap; }
.lg-all-link:hover { color: var(--lg-orange-dark); text-decoration: underline; }

/* ==========================================================================
   8. GRID DE CATEGORIAS
   ========================================================================== */

.lg-categories {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lg-category {
	display: block;
	padding: 17px 12px 15px;
	border: 1px solid var(--lg-line);
	border-radius: 14px;
	background: #fff;
	color: var(--lg-ink);
	text-align: center;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lg-category:hover {
	color: var(--lg-ink);
	border-color: var(--lg-green);
	transform: translateY(-4px);
	box-shadow: var(--lg-shadow);
}
.lg-category-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 10px;
	border-radius: 18px;
	background: var(--lg-green-soft);
	font-size: 2rem;
	overflow: hidden;
}
/* Mismo motivo que en la rejilla: el envase entero, sin recortar. */
.lg-category-icon img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.lg-categories li:nth-child(6n+2) .lg-category-icon { background: #f6e7df; }
.lg-categories li:nth-child(6n+3) .lg-category-icon { background: #edf2ec; }
.lg-categories li:nth-child(6n+4) .lg-category-icon { background: #f3f4ee; }
.lg-categories li:nth-child(6n+5) .lg-category-icon { background: #f0f3ea; }
.lg-category strong { display: block; font-size: .91rem; }
.lg-category span { display: block; margin-top: 3px; color: var(--lg-muted); font-size: .76rem; font-weight: 700; }

/* ==========================================================================
   9. PRODUCTOS (WOOCOMMERCE LOOP)
   ========================================================================== */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 17px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 15px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	background: var(--lg-cream);
	text-align: left;
	transition: transform .2s, box-shadow .2s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--lg-shadow); }

/*
 * contain, no cover.
 *
 * En un supermercado el envase es la señal de reconocimiento: el cliente
 * busca la bolsa amarilla de Sabritas o la caja roja de Emperador, no lee
 * el nombre. Recortar la foto para llenar el cuadro corta justo la parte
 * de arriba, que es donde va la marca. Con contain se ve el paquete entero
 * y el fondo claro hace de marco.
 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	width: 100%;
	height: 168px;
	margin: 0 0 13px;
	padding: 8px;
	border-radius: var(--lg-radius-md);
	background: #f7f9f6;
	object-fit: contain;
	transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }

.lg-loop-cat {
	display: block;
	color: var(--lg-muted);
	font-size: .76rem;
	font-weight: 750;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow: hidden;
	margin: 4px 0 6px;
	padding: 0;
	font-size: .95rem;
	font-weight: 800;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }

/*
 * Valoracion en la tarjeta del catalogo.
 *
 * min-height reserva el renglon aunque el producto no tenga media todavia:
 * el contenedor se pinta siempre, vacio si hace falta, para que todas las
 * tarjetas de la fila midan lo mismo.
 *
 * Las estrellas llenas heredan el color de .star-rating; las vacias las pinta
 * WooCommerce con su propio ::before y se dejan como estan, que es lo que da
 * el contraste entre unas y otras.
 */
.lg-loop-rating {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 15px;
	margin: 0 0 5px;
}
.woocommerce ul.products li.product .lg-loop-rating .star-rating {
	float: none;
	margin: 0;
	color: var(--lg-orange);
	font-size: .68rem;
	line-height: 1;
}
.lg-loop-rating__count {
	color: var(--lg-muted);
	font-size: .72rem;
	font-weight: 700;
}

.lg-loop-unit { min-height: 18px; margin: 0; color: var(--lg-muted); font-size: .78rem; }
.lg-loop-stock { display: block; margin-top: 9px; color: var(--lg-green-dark); font-size: .76rem; font-weight: 800; }
.lg-loop-stock.is-out { color: var(--lg-danger); }

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 9px;
	margin: auto 0 0;
	padding-top: 14px;
	color: var(--lg-orange);
	font-size: 1.25rem;
	font-weight: 950;
	letter-spacing: -.04em;
}
.woocommerce ul.products li.product .price del {
	order: 2;
	color: var(--lg-muted);
	font-size: .75rem;
	font-weight: 400;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--lg-orange);
	font-weight: 950;
	text-decoration: none;
}
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { font-size: .8em; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	width: 100%;
	margin: 14px 0 0;
	padding: 10px 8px;
	border: 1px solid var(--lg-green);
	border-radius: var(--lg-radius-sm);
	background: transparent;
	color: var(--lg-green-dark);
	font-size: .87rem;
	font-weight: 900;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.woocommerce ul.products li.product .button:hover { background: var(--lg-green); color: #fff; }
.woocommerce ul.products li.product .added_to_cart { display: none; }
.woocommerce ul.products li.product .button.loading { opacity: .6; pointer-events: none; }

/* Badge de oferta */
.woocommerce span.onsale,
span.onsale {
	position: absolute;
	top: 13px;
	left: 13px;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 8px;
	border-radius: 6px;
	background: var(--lg-orange-dark);
	color: #fff;
	font-size: .72rem;
	font-weight: 900;
	line-height: 1.2;
}

/* ==========================================================================
   10. PAGINAS WOOCOMMERCE INTERNAS
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--lg-line);
	border-top: 3px solid var(--lg-green);
	border-radius: var(--lg-radius-md);
	background: #fff;
	list-style: none;
}
.woocommerce-error { border-top-color: var(--lg-danger); }

/*
 * WooCommerce antepone un icono a cada aviso con un ::before que tira de su
 * tipografia propia. Cuando esa fuente no llega, el navegador pinta el
 * cuadrito de glifo ausente delante del texto. Este tema no usa iconos en los
 * avisos —distingue por el color del borde superior—, asi que se apaga.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: var(--lg-radius-sm);
	background: var(--lg-green);
	color: #fff;
	font-weight: 800;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--lg-green-dark); color: #fff; }

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border: 0;
	border-radius: var(--lg-radius-sm);
	background: var(--lg-orange-dark);
	color: #fff;
	font-weight: 900;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--lg-orange-dark); color: #fff; }

.woocommerce div.product .product_title { font-size: 2rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--lg-orange); font-size: 1.7rem; font-weight: 950; }
.woocommerce div.product .quantity .qty {
	padding: 10px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-sm);
	background: #fff;
}

.woocommerce-breadcrumb {
	margin: 0 0 20px;
	color: var(--lg-muted);
	font-size: .84rem;
}
.woocommerce-breadcrumb a { color: var(--lg-muted); }

.woocommerce .woocommerce-ordering select,
.lg-shop-toolbar select {
	padding: 9px 12px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-sm);
	background: #fff;
}
.lg-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.woocommerce .woocommerce-result-count { margin: 0; color: var(--lg-muted); font-size: .86rem; }

.woocommerce table.shop_table {
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	border-collapse: separate;
	background: #fff;
}
.woocommerce-cart table.cart img { width: 64px; border-radius: var(--lg-radius-sm); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	padding: 11px 13px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-sm);
	background: #fff;
}
.woocommerce form .form-row label { font-weight: 700; }

/* --- Mi cuenta -------------------------------------------------------------
 *
 * WooCommerce trae aqui sus propias plantillas y el tema nunca las vistio: el
 * menu lateral salia como una lista de vinetas con el estilo por defecto del
 * navegador, y al lado del resto del sitio parecia otra web.
 *
 * La rejilla de dos columnas se ata a .logged-in a proposito. La pantalla de
 * acceso usa el mismo contenedor .woocommerce pero sin menu lateral; sin esa
 * condicion, el formulario de entrada se quedaria encajado en la columna de
 * 254 px pensada para el menu.
 * -------------------------------------------------------------------------- */

/*
 * Lo primero es quitar el tope de ancho.
 *
 * .lg-entry-content lleva max-width: 760px, que es la medida de lectura para
 * las paginas de texto: una linea mas larga cansa la vista. Pero estas
 * pantallas no son texto corrido, son una interfaz con menu lateral y tablas
 * de pedidos, y encajarlas en 760 px deja el contenido en menos de 480. Aqui
 * el ancho completo del contenedor es lo correcto.
 */
.woocommerce-account .lg-entry-content { max-width: none; }

/*
 * Se reparte con flex.
 *
 * .woocommerce tiene siempre dos hijos y solo dos —el menu y el contenido— en
 * las cinco subpantallas: Escritorio, Pedidos, Descargas, Direcciones y
 * Detalles de la cuenta. Comprobado descargando las cinco. Con dos elementos
 * fijos, flex sobra para el reparto y no hay celdas vacias que cuadrar.
 *
 * Hay que anular el float y el ancho en porcentaje que woocommerce-layout.css
 * da al menu (30 %) y al contenido (68 %). El ancho es el que importa: en
 * porcentaje sobre un hueco ya repartido, las dos tarjetas salen encogidas.
 */
.woocommerce-account.logged-in .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
	flex: 0 0 254px;
	float: none;
	width: auto;
	max-width: 100%;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
	flex: 1 1 320px;
	float: none;
	width: auto;
	min-width: 0;
}

.woocommerce-MyAccount-navigation {
	padding: 10px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: #fff;
}
.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-MyAccount-navigation li + li { margin-top: 2px; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 13px;
	border-radius: var(--lg-radius-sm);
	color: var(--lg-green-dark);
	font-size: .92rem;
	font-weight: 750;
	text-decoration: none;
	transition: background .18s, color .18s;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--lg-green-soft); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--lg-green); color: #fff; }

/* Salir se separa del resto: no es una seccion mas, es una salida. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--lg-line);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--lg-muted); }

.woocommerce-MyAccount-content {
	min-width: 0;
	padding: 26px 28px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: #fff;
}
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content p { color: #415047; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { margin: 26px 0 12px; font-size: 1.12rem; }

/* Pedidos y descargas. */
.woocommerce-MyAccount-content table.shop_table { width: 100%; }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--lg-line);
	text-align: left;
}
.woocommerce-MyAccount-content table.shop_table th {
	color: var(--lg-muted);
	font-size: .74rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.woocommerce-MyAccount-content table.shop_table tr:last-child td { border-bottom: 0; }

/*
 * Direcciones: dos fichas que se apilan solas cuando no caben.
 *
 * Cuidado con el clearfix de WooCommerce. woocommerce-layout.css declara
 * `.col2-set::before { content: " "; display: table }`, y un pseudoelemento
 * con contenido **cuenta como item** dentro de un contenedor flex o grid: se
 * queda con el primer hueco y empuja las dos direcciones un puesto a la
 * derecha, dejando el de la izquierda vacio. Como no es un nodo del DOM, no
 * aparece al inspeccionar el HTML; solo se ve en el navegador. Hay que
 * apagarlo explicitamente.
 *
 * Y como en el menu de la cuenta, hay que anular el ancho en porcentaje que
 * WooCommerce da a .col-1 y .col-2.
 */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}
.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after { display: none; }
.woocommerce-MyAccount-content .woocommerce-Address {
	flex: 1 1 260px;
	float: none;
	width: auto;
	min-width: 0;
}
.woocommerce-Address address { font-style: normal; line-height: 1.7; }
.woocommerce-Address h3 { margin-top: 0; }

/* Acceso, cuando no hay sesion iniciada. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login {
	max-width: 460px;
	margin: 0 auto;
	padding: 26px 28px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: #fff;
}

@media (max-width: 900px) {
	.woocommerce-account.logged-in .woocommerce { gap: 18px; }
	.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { flex: 0 0 100%; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
	.woocommerce-MyAccount-navigation li + li { margin-top: 0; }
	.woocommerce-MyAccount-navigation a { font-size: .86rem; }
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
	.woocommerce-MyAccount-content { padding: 20px; }
}

/* ==========================================================================
   11. CARRITO LATERAL
   ========================================================================== */

.lg-drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}
.lg-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 36, 26, .5);
	opacity: 0;
	transition: opacity .25s;
}
.lg-drawer-panel {
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: 100%;
	margin-left: auto;
	padding: 22px;
	background: #fff;
	box-shadow: -12px 0 40px rgba(0, 0, 0, .12);
	transform: translateX(100%);
	transition: transform .28s ease;
}
.lg-drawer.is-open { pointer-events: auto; }
.lg-drawer.is-open .lg-drawer-backdrop { opacity: 1; }
.lg-drawer.is-open .lg-drawer-panel { transform: translateX(0); }

.lg-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 17px;
	border-bottom: 1px solid var(--lg-line);
}
.lg-drawer-head h2 { margin: 0; font-size: 1.35rem; }
.lg-drawer-close {
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	border: 0;
	border-radius: 50%;
	background: #eef4e9;
	color: var(--lg-green-dark);
	font-size: 1.35rem;
	line-height: 1;
}

.lg-drawer-body { flex: 1; padding: 16px 0; overflow-y: auto; }
.lg-drawer-body.is-busy { opacity: .5; pointer-events: none; }
.lg-cart-empty { padding: 50px 10px; color: var(--lg-muted); text-align: center; }

.lg-cart-line {
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lg-line);
}
.lg-cart-line img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--lg-cream);
	object-fit: cover;
}
.lg-cart-line-name { display: block; font-size: .92rem; font-weight: 800; text-decoration: none; color: var(--lg-ink); }
.lg-cart-line-meta { display: block; margin-top: 2px; color: var(--lg-muted); font-size: .82rem; }
.lg-cart-line-actions { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.lg-qty-button {
	width: 27px;
	height: 27px;
	padding: 0;
	border: 1px solid var(--lg-line);
	border-radius: 7px;
	background: #fff;
	color: var(--lg-green-dark);
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
}
.lg-qty-button:hover { border-color: var(--lg-green); }
.lg-qty-value { min-width: 22px; font-weight: 800; text-align: center; }
.lg-cart-remove {
	margin-left: auto;
	border: 0;
	background: none;
	color: var(--lg-orange);
	font-size: .78rem;
	font-weight: 800;
}

.lg-drawer-foot { padding-top: 17px; border-top: 1px solid var(--lg-line); }
.lg-cart-subtotal {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 1.08rem;
	font-weight: 800;
}
.lg-cart-subtotal .amount { color: var(--lg-orange); }
.lg-cart-tax-note { margin: 0 0 13px; color: var(--lg-muted); font-size: .76rem; }
.lg-drawer-foot .lg-checkout-button {
	display: block;
	width: 100%;
	padding: 13px;
	border: 0;
	border-radius: var(--lg-radius-sm);
	background: var(--lg-orange-dark);
	color: #fff;
	font-weight: 900;
	text-align: center;
	text-decoration: none;
}
.lg-drawer-foot .lg-checkout-button:hover { background: #9c4a1e; color: #fff; }
.lg-view-cart-link { display: block; margin-top: 10px; color: var(--lg-muted); font-size: .82rem; text-align: center; }

/* ==========================================================================
   12. AVISO FLOTANTE
   ========================================================================== */

.lg-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 60;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--lg-green-dark);
	color: #fff;
	font-size: .9rem;
	font-weight: 750;
	box-shadow: var(--lg-shadow);
	opacity: 0;
	transform: translate(-50%, 100px);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.lg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ==========================================================================
   13. BENEFICIOS Y BOLETIN
   ========================================================================== */

.lg-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.lg-benefit { display: flex; align-items: center; gap: 13px; padding: 17px; }
.lg-benefit-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lg-green-soft);
	font-size: 1.38rem;
}
.lg-benefits > :nth-child(2) .lg-benefit-icon { background: #f6e7df; }
.lg-benefits > :nth-child(3) .lg-benefit-icon { background: #edf2ec; }
.lg-benefit strong { display: block; }
.lg-benefit span { display: block; margin-top: 2px; color: var(--lg-muted); font-size: .84rem; }

.lg-branches { background: var(--lg-green); color: #fff; }
.lg-branches .lg-container { padding: 44px 0; }
.lg-branches h2 { margin: 0 0 6px; font-size: 1.65rem; }
.lg-branches > .lg-container > p { margin: 0 0 24px; color: var(--lg-green-soft); }
.lg-branch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.lg-branch {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--lg-radius-md);
	background: rgba(255, 255, 255, .07);
}
.lg-branch strong { display: block; margin-bottom: 5px; font-size: .95rem; }
.lg-branch span { display: block; color: var(--lg-green-soft); font-size: .84rem; }

/* ==========================================================================
   14. PIE
   ========================================================================== */

.lg-footer {
	padding: 34px 0 22px;
	background: var(--lg-green-dark);
	color: var(--lg-green-soft);
	font-size: .85rem;
}
.lg-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
.lg-footer h2, .lg-footer h3 { margin: 0 0 8px; color: #fff; font-size: 1rem; }
.lg-footer p { max-width: 340px; margin: 0; }
.lg-footer a { display: block; width: fit-content; margin: 7px 0; color: var(--lg-green-soft); text-decoration: none; }
.lg-footer a:hover { color: #fff; text-decoration: underline; }
.lg-footer ul { margin: 0; padding: 0; list-style: none; }
.lg-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid rgba(234, 241, 231, .22);
}

/* ==========================================================================
   15. CONTENIDO GENERICO
   ========================================================================== */

.lg-entry { padding: 48px 0; }
.lg-entry-content { max-width: 760px; }
/*
 * El tope de 760 px es la medida de lectura, buena para texto y mala para una
 * rejilla de productos: con cuatro columnas ahi dentro las tarjetas bajan de
 * 170 px. La clase la pone losgigantes_page_has_product_grid(), en inc/setup.php,
 * cuando la pagina trae un shortcode o un bloque de productos.
 */
.lg-wide-content .lg-entry-content { max-width: none; }
.lg-entry-content img { border-radius: var(--lg-radius-md); }
.lg-entry-title { margin: 0 0 18px; font-size: 2.1rem; }
.lg-post-card {
	margin-bottom: 20px;
	padding: 22px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	background: #fff;
}
.lg-post-card h2 { margin: 0 0 8px; font-size: 1.3rem; }
.lg-post-card h2 a { text-decoration: none; }
.lg-meta { color: var(--lg-muted); font-size: .82rem; }

.lg-pagination { margin-top: 26px; }
.lg-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	margin-right: 6px;
	padding: 0 10px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-sm);
	background: #fff;
	text-decoration: none;
}
.lg-pagination .page-numbers.current { background: var(--lg-green); border-color: var(--lg-green); color: #fff; }

.lg-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.lg-header-row { grid-template-columns: 168px 1fr auto; gap: 16px; }
	.lg-brand { width: 155px; }
	.lg-account { display: none; }
	.lg-categories { grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); }
	.lg-hero-art { transform: scale(.9); }
	.lg-branch-grid { grid-template-columns: repeat(2, 1fr); }
	.lg-footer-grid { grid-template-columns: 1fr 1fr; }
	.lg-widgets { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
	:root { --lg-gutter: 28px; }

	.lg-topbar .lg-container { min-height: 39px; font-size: .76rem; }

	.lg-header-row {
		grid-template-columns: 1fr auto;
		grid-template-rows: 70px 51px;
		gap: 0 10px;
		min-height: 132px;
	}
	.lg-brand { align-self: center; width: 142px; }
	.lg-search { grid-column: 1 / -1; grid-row: 2; min-height: 42px; padding-left: 12px; }
	.lg-search button { padding: 8px 11px; }
	.lg-cart-toggle { padding: 9px; }
	.lg-cart-toggle > span:first-child { display: none; }
	.lg-menu-toggle { display: inline-block; }

	.lg-nav ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0;
	}
	.lg-nav.is-open ul { display: flex; }
	.lg-nav a { display: block; padding: 11px 0; }
	.lg-nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 16px; }

	.lg-hero-grid { grid-template-columns: 1fr; gap: 13px; min-height: auto; padding: 44px 0 40px; }
	.lg-hero-art { display: none; }
	.lg-hero h1 { font-size: 2.65rem; }

	.lg-section { padding: 42px 0; }
	.lg-section-head { align-items: start; }
	.lg-section-head h2 { font-size: 1.43rem; }
	.lg-section-head p { font-size: .86rem; }

	.lg-categories { grid-template-columns: repeat(3, 1fr); gap: 9px; }
	.lg-category { padding: 12px 5px; }
	.lg-category-icon { width: 51px; height: 51px; border-radius: 15px; font-size: 1.65rem; }
	.lg-category strong { font-size: .78rem; }

	.woocommerce ul.products, ul.products { gap: 10px; }
	.woocommerce ul.products li.product { padding: 10px; }
	.woocommerce ul.products li.product img { height: 126px; margin-bottom: 9px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .86rem; }
	.woocommerce ul.products li.product .price { font-size: 1.05rem; }
	.woocommerce ul.products li.product .button { font-size: .8rem; }

	.lg-benefits { grid-template-columns: 1fr; gap: 3px; }
	.lg-branch-grid { grid-template-columns: 1fr; }
	.lg-footer-grid { grid-template-columns: 1fr; gap: 22px; }
	.lg-widgets { grid-template-columns: 1fr; }
	.lg-entry-title { font-size: 1.7rem; }
}

/* ==========================================================================
   MODULOS ADICIONALES
   Buscador predictivo, compra rapida, franjas horarias y datos de producto.
   Escrito con los tokens de este tema: no redefine ninguna variable.
   ========================================================================== */

/* --- Buscador predictivo -------------------------------------------------- */

.lgig-suggest {
	position: absolute;
	z-index: 60;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 70vh;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: var(--lg-white);
	box-shadow: var(--lg-shadow);
	text-align: left;
}

.lgig-suggest[hidden] { display: none; }

.lgig-suggest__list { margin: 0; padding: 0; list-style: none; }

.lgig-suggest__link {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--lg-radius-sm);
	color: var(--lg-ink);
	text-decoration: none;
}

.lgig-suggest__link:hover,
.lgig-suggest__link.is-active { background: var(--lg-green-soft); color: var(--lg-ink); }

.lgig-suggest__media img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--lg-radius-sm);
}

.lgig-suggest__body { display: flex; flex-direction: column; min-width: 0; }

.lgig-suggest__title {
	overflow: hidden;
	font-size: .9rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lgig-suggest__format { color: var(--lg-muted); font-size: .8rem; }

.lgig-suggest__price { font-size: .9rem; font-weight: 700; white-space: nowrap; }
.lgig-suggest__price del { display: none; }

.lgig-suggest__more,
.lgig-suggest__empty,
.lgig-suggest__loading {
	display: block;
	margin: 4px 0 0;
	padding: 12px;
	border-top: 1px solid var(--lg-line);
	color: var(--lg-muted);
	font-size: .88rem;
	text-align: center;
}

.lgig-suggest__more { font-weight: 700; color: #9c4a1e; }

/* --- Compra rapida en el catalogo ---------------------------------------- */

/*
 * La fila de compra rapida se reparte con flex, no con rejilla.
 *
 * Con `grid-template-columns: auto minmax(0, 1fr)` el selector de cantidad se
 * quedaba con sus 102 px fijos y al boton le tocaba una pista que podia
 * encogerse hasta cero. Pero el texto y el relleno del boton no encogen: se
 * salian de la caja naranja y se montaban sobre el borde de la tarjeta.
 *
 * Con flex-basis y wrap, el boton baja a su propia linea en cuanto no le caben
 * 110 px, en vez de desbordar. Pasa en tarjetas estrechas y en movil.
 */
.lgig-quick-add {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	/*
	 * Sin margin-top: auto. El .price ya lleva `margin: auto 0 0` y, con dos
	 * margenes automaticos en la misma columna flex, el espacio libre se
	 * reparte a partes iguales: quedaba un hueco encima del precio y otro
	 * igual debajo.
	 */
	padding-top: 12px;
}
.lgig-quick-add .lgig-qty { flex: 0 0 auto; }

/*
 * Sin overflow: hidden. Recortaba el anillo de foco de los botones +/- y del
 * campo, que cae 6 px fuera de la pildora. Las esquinas las redondean ahora
 * los propios hijos.
 */
.lgig-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--lg-line);
	border-radius: 999px;
}
.lgig-qty > :first-child { border-radius: 999px 0 0 999px; }
.lgig-qty > :last-child { border-radius: 0 999px 999px 0; }

.lgig-qty__btn {
	width: 34px;
	height: 38px;
	border: 0;
	background: transparent;
	color: var(--lg-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background .12s ease;
}

.lgig-qty__btn:hover { background: var(--lg-cream); }

.lgig-qty__input {
	width: 34px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: .9rem;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.lgig-qty__input::-webkit-outer-spin-button,
.lgig-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.lgig-btn--add {
	flex: 1 1 110px;
	width: auto;
	min-width: 0;
	padding-inline: 12px;
}
.lgig-btn--add.is-added { background: var(--lg-lime); border-color: var(--lg-lime); color: var(--lg-ink); }
.lgig-btn--add.is-loading { position: relative; color: transparent; }

/*
 * Los dos estados, repetidos con el alcance del catalogo.
 *
 * `.woocommerce ul.products li.product .button` tiene especificidad (0,4,2) y
 * gana a `.lgig-btn--add.is-added` (0,2,0): devolvia el boton a
 * `background: transparent` y `color: var(--lg-green-dark)`, asi que ni el
 * verde de confirmacion ni el texto transparente del estado de carga se
 * llegaban a ver. El cliente pulsaba Agregar y en pantalla no pasaba nada.
 */
.woocommerce ul.products li.product .lgig-btn--add.is-added {
	background: var(--lg-lime);
	border-color: var(--lg-lime);
	color: var(--lg-ink);
}
.woocommerce ul.products li.product .lgig-btn--add.is-loading { color: transparent; }

.lgig-btn--add.is-loading::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	/* El boton del catalogo es transparente sobre crema: un giro blanco no se veia. */
	border: 2px solid rgba(47, 78, 58, .22);
	border-top-color: var(--lg-green-dark);
	border-radius: 50%;
	animation: lgig-spin .6s linear infinite;
	content: "";
}

@keyframes lgig-spin { to { transform: rotate(360deg); } }

/* --- Datos del producto --------------------------------------------------- */

.lgig-unit-price {
	display: block;
	color: var(--lg-muted);
	font-size: .82rem;
	font-weight: 500;
}

.lgig-unit-price .woocommerce-Price-amount { color: inherit; }

.lgig-product-specs {
	margin: 24px 0;
	padding: 16px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: var(--lg-cream);
	font-size: .9rem;
}

.lgig-product-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 8px;
	border-bottom: 1px solid var(--lg-line);
}

.lgig-product-specs__row:last-child { border-bottom: 0; }
.lgig-product-specs dt { color: var(--lg-muted); font-weight: 600; }
.lgig-product-specs dd { margin: 0; font-weight: 700; text-align: right; }

/* --- Franjas horarias en el checkout -------------------------------------- */

.lgig-slots {
	margin-block: 24px;
	padding: 24px;
	border: 2px solid var(--lg-green-soft);
	border-radius: var(--lg-radius);
	background: var(--lg-white);
}

.lgig-slots h3 { margin-bottom: 16px; }

.lgig-slots__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.lgig-slots__mode {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 200px;
	padding: 12px 16px;
	border: 2px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

/*
 * `.is-selected` la pone lgig-modules.js. Es el respaldo para navegadores sin
 * :has() (Firefox < 121, Safari < 15.4), donde si no no habria ninguna senal
 * de que modo de entrega esta elegido.
 */
.lgig-slots__mode:has(input:checked),
.lgig-slots__mode.is-selected {
	border-color: var(--lg-green);
	background: var(--lg-green-soft);
}

.lgig-slots__store[hidden] { display: none; }

.lgig-slots__hint { margin: 12px 0 0; color: var(--lg-muted); font-size: .82rem; }
/* Era --lg-line: 1.25:1 sobre blanco, es decir, invisible. */
.lgig-slots select option:disabled { color: var(--lg-muted); }

.lgig-order-slot,
.lgig-admin-slot {
	margin-block: 24px;
	padding: 16px;
	border-left: 4px solid var(--lg-lime);
	border-radius: var(--lg-radius-sm);
	background: var(--lg-green-soft);
}

.lgig-order-slot h2,
.lgig-admin-slot h3 { margin-bottom: 8px; font-size: 1rem; }
.lgig-order-slot p:last-child,
.lgig-admin-slot p:last-child { margin-bottom: 0; }

/* --- Acceso con Google y Facebook ----------------------------------------- */

.lgig-social { margin-top: 20px; }

.lgig-social__sep {
	position: relative;
	margin: 0 0 16px;
	text-align: center;
}

.lgig-social__sep::before {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--lg-line);
	content: "";
}

.lgig-social__sep span {
	position: relative;
	padding: 0 12px;
	background: var(--lg-white);
	color: var(--lg-muted);
	font-size: .82rem;
}

.lgig-social__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-bottom: 10px;
	padding: 11px 16px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-md);
	background: var(--lg-white);
	color: var(--lg-ink);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease;
}

.lgig-social__btn:hover {
	background: var(--lg-cream);
	border-color: var(--lg-muted);
	color: var(--lg-ink);
}

.lgig-social__icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	font-size: .82rem;
	font-weight: 800;
	line-height: 1;
}

.lgig-social__btn--google .lgig-social__icon { background: #4285f4; }
.lgig-social__btn--facebook .lgig-social__icon { background: #1877f2; }

.lgig-social__legal {
	margin: 12px 0 0;
	color: var(--lg-muted);
	font-size: .76rem;
	text-align: center;
}

/* --- Correcciones de revision ---------------------------------------------- */

/*
 * El enlace que envuelve la imagen del producto no tenia regla: al quedar en
 * linea dejaba un hueco bajo la foto por el espacio de linea base.
 */
.lg-loop-image {
	display: block;
}

/* Boton "+" del carrito lateral cuando ya no quedan unidades. */
.lg-qty-button[disabled] {
	opacity: .38;
	cursor: not-allowed;
}

/* --- Carrito y checkout de bloques ------------------------------------------
 *
 * .lg-entry-content limita el contenido a 760px, que es el ancho de lectura
 * correcto para una pagina de texto. Pero el carrito y el checkout son
 * interfaces de dos columnas: a 760px la columna del resumen baja de 300px y
 * los nombres de producto se parten palabra por palabra.
 *
 * En esas dos paginas se quita el tope y se deja mandar al contenedor.
 * -------------------------------------------------------------------------- */

.woocommerce-cart .lg-entry-content,
.woocommerce-checkout .lg-entry-content {
	max-width: none;
}

/* Suelo para la columna del resumen: por debajo de esto los nombres se rompen. */
.wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-checkout-totals-block {
	min-width: min(320px, 100%);
}

/* Los nombres largos parten por espacios, nunca a mitad de palabra. */
.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* El precio anterior tachado no debe partirse en dos lineas. */
.wc-block-components-product-price del,
.wc-block-components-product-price ins {
	white-space: nowrap;
}