/*
Theme Name: Resortes AGAS - Storefront Child
Template: storefront
Description: Tema hijo de Storefront para resortesagas.com. Identidad visual tipo distribuidor industrial (inspirado en la estructura de catálogos técnicos de resortes de gas) con la marca roja del cliente.
Version: 1.2.0
Author: Pedro Crespo
Text Domain: resortesagas-storefront-child
*/

/* =========================================================
   0. TOKENS DE MARCA  (pares fondo/texto, WCAG AA)
   ========================================================= */
:root {
	--font:         "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--brand:        #c8102e; /* rojo corporativo; blanco encima = 5.9:1 */
	--brand-dark:   #9e0c23; /* hover */
	--brand-tint:   #fbe9ec; /* fondo suave rojizo */
	--ink:          #1f1f1f; /* texto principal (neutro, como Suspain) = 15:1 */
	--muted:        #595959; /* texto secundario sobre blanco = 7:1 */
	--line:         #e3e3e3; /* bordes neutros */
	--surface:      #ffffff;
	--surface-alt:  #f4f4f4; /* secciones alternas, gris neutro */
	--navy:         #1e1e1e; /* oscuro NEUTRO para topbar / footer / bandas (no azulado) */
	--navy-soft:    #2b2b2b;
	--navy-fg:      #f2f2f2; /* texto sobre oscuro = 15:1 */
	--navy-muted:   #b8b8b8; /* texto atenuado sobre oscuro = 8:1 */
	--ok:           #157347; /* verde envío sobre CLARO (blanco/gris) — AA */
	--ok-on-dark:   #7fe0a8; /* verde envío sobre OSCURO (topbar/footer navy) */
	--radius:       4px;     /* esquinas sobrias (no landing) */
	--radius-lg:    8px;
	--shadow-sm:    0 1px 3px rgba(0,0,0,.08);
	--shadow-md:    0 4px 16px rgba(0,0,0,.10);
	--maxw:         1520px;  /* ancho casi completo con margen */
	/* Tarjetas (producto + categoría): valores compartidos para consistencia */
	--card-pad:     12px;      /* padding interno de tarjeta */
	--card-hover-border: #d6d6d6; /* borde al hover, unificado */
}

/* =========================================================
   1. BASE
   ========================================================= */
body.woocommerce-active,
body,
button, input, select, textarea,
.site-title, .site-header, .main-navigation,
h1, h2, h3, h4, h5, h6,
p, a, li, span, td, th, label {
	font-family: var(--font);
}
body {
	color: var(--ink);
	background: var(--surface);
	font-size: 16px;
	line-height: 1.625;
	font-weight: 400;
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* Ancho casi completo con margen (como Suspain), textos con ancho de lectura */
.col-full {
	max-width: var(--maxw);
	padding-left: clamp(16px, 3vw, 44px);
	padding-right: clamp(16px, 3vw, 44px);
	box-sizing: border-box;
}

/* Escala tipográfica sobria de Suspain (nada de titulares gigantes de landing) */
h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: 0; line-height: 1.3; }
h1 { font-size: 28px; font-weight: 500; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }

/* Botones Storefront/Woo -> estilo pill rojo */
.button,
button.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
input[type="submit"] {
	background: var(--brand);
	color: #fff;
	border-radius: var(--radius);
	padding: .7em 1.6em;
	font-weight: 600;
	border: 2px solid var(--brand);
	transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce button.button.alt:hover,
input[type="submit"]:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   CAMPOS DE FORMULARIO (global, todo el tema): fondo BLANCO + borde visible.
   Storefront/WPForms/WooCommerce los dejan grises o transparentes → "gris
   sobre gris" ilegible. Aquí se unifican para que se distingan bien.
   (Se excluye el buscador del header, que es una píldora a propósito.)
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="month"], input[type="week"], input[type="time"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wpforms-field input[type="text"], .wpforms-field input[type="email"],
.wpforms-field input[type="tel"], .wpforms-field input[type="url"],
.wpforms-field input[type="number"], .wpforms-field textarea,
.wpforms-field-medium, .wpforms-field-large, .wpforms-field-small,
.select2-container--default .select2-selection--single {
	background-color: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	color: var(--ink);
	padding: 11px 14px;
	box-shadow: none !important;
	line-height: 1.3;
}
/* El buscador del header conserva su diseño de píldora */
.site-header .widget_product_search input[type="search"] { border-radius: 999px !important; }
/* Placeholder legible */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* Foco claro con acento de marca */
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, textarea:focus, select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wpforms-field input:focus, .wpforms-field textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--brand) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-tint) !important;
}
/* Botón secundario (contorno) */
.button.rga-outline,
.woocommerce a.button.rga-outline {
	background: #fff;
	color: var(--brand);
	border-color: var(--brand);
}
.button.rga-outline:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* =========================================================
   2. BARRA SUPERIOR DE CONTACTO  (inyectada en functions.php)
   ========================================================= */
.rga-topbar {
	background: var(--navy);
	color: var(--navy-fg);
	font-size: 14px;
}
.rga-topbar .col-full {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	padding: 8px 0;
}
.rga-topbar a { color: var(--navy-fg); text-decoration: none; }
.rga-topbar a:hover { color: #fff; text-decoration: underline; }
.rga-topbar .rga-topbar-left { margin-right: auto; color: var(--navy-muted); }
.rga-topbar .rga-ship { color: var(--ok-on-dark); font-weight: 600; }
.rga-topbar svg, .rga-topbar .dashicons { vertical-align: middle; }

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding-top: 18px;
	padding-bottom: 18px;
}
.site-header .col-full {
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-branding { margin: 0; flex: 0 0 auto; }
.site-header .site-search {
	flex: 1 1 auto;
	margin: 0;
	max-width: 620px;
}
.site-header .site-search .widget { margin: 0; }
.site-header .widget_product_search form { position: relative; }
.site-header .widget_product_search input[type="search"],
.site-header .widget_product_search .search-field {
	width: 100%;
	border: 2px solid var(--line);
	border-radius: 999px;
	padding: .75em 3.2em .75em 1.4em;
	background: var(--surface-alt);
	font-size: 15px;
	color: var(--ink);
}
.site-header .widget_product_search input[type="search"]::placeholder { color: var(--muted); }
.site-header .widget_product_search input[type="search"]:focus {
	outline: none;
	border-color: var(--brand);
	background: #fff;
}
.site-header .widget_product_search button[type="submit"] {
	position: absolute;
	right: 4px; top: 4px; bottom: 4px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	border: 0;
	font-weight: 600;
	display: flex; align-items: center; justify-content: center;
}
.site-header .widget_product_search button[type="submit"]:hover { background: var(--brand-dark); }

/* Carrito del header */
.site-header-cart { flex: 0 0 auto; }
.site-header-cart .cart-contents {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
.site-header-cart .cart-contents:hover { color: var(--brand); }
.site-header-cart .amount { color: var(--brand); }

/* Limpieza de cabecera: fuera la franja de widgets viejos (promo redundante:
   "¿Cómo comprar" + "ENVÍO GRATIS", ya cubierto por la topbar) y el menú de
   páginas duplicado que Storefront pinta como fallback dentro del nav. */
.header-widget-region { display: none !important; }
#site-navigation > .menu { display: none !important; }

/* --- Fila 1 del header estilo competencia: logo | buscador ancho | acciones --- */
.site-header > .col-full { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.site-header > .col-full > .site-branding { flex: 0 0 auto; margin: 0; width: auto !important; max-width: 260px; }
.site-header .site-branding .custom-logo,
.site-header .site-branding img { max-width: 240px; width: auto; height: auto; }
.site-header > .col-full > .site-search { flex: 1 1 auto; max-width: none; min-width: 0; margin: 0; }
.site-header .site-search,
.site-header .site-search .widget,
.site-header .site-search .widget_product_search,
.site-header .site-search form { width: 100%; }

/* Bloque de acciones: SOLO iconos (cuenta + carrito con badge) */
.rga-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: 6px; }
.rga-header-actions .rga-hact-icon {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; /* objetivo táctil mínimo accesible */
	color: var(--ink); text-decoration: none;
}
.rga-header-actions .rga-hact-icon:hover { color: var(--brand); }
.rga-header-actions .rga-hact-icon svg { width: 27px; height: 27px; }
.rga-cart-count {
	position: absolute; top: 0; right: 0;
	min-width: 18px; height: 18px; padding: 0 4px;
	background: var(--brand); color: #fff;
	border-radius: 999px; font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center; line-height: 1;
	box-sizing: border-box;
}
.rga-cart-count.is-empty { display: none; }
/* Hamburguesa del header: oculta en escritorio (hay nav horizontal); el @media
   móvil la muestra a la derecha del carrito y oculta el botón rojo de Storefront. */
.rga-menu-toggle { display: none; background: transparent; border: 0; }
/* F3.7: micro-textos a un mínimo legible (evita 10-11px sueltos) */
.rga-force-note, .rga-datasheet, .rga-datasheet td, .rga-datasheet th { font-size: 12.5px; }

/* Ocultar el icono flotante del side cart (XootiX): usamos solo el del header */
/* Burbuja flotante del carrito de XootiX: fuera de la vista (el carrito se abre
   desde el icono del header y desde "Editar carro"). NO usamos display:none: el
   plugin lo fuerza a flex con `.xoo-wsc-basket[style*="block"]` (más específico)
   y además el JS usa la burbuja como trigger. La ocultamos sin tocar `display`
   para no pelear con el plugin ni romper el trigger. */
body .xoo-wsc-basket,
body .xoo-wsc-cart-trigger {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---- Side cart (XootiX): diseño + flujo de compra rápido ----
   La clase REAL del botón "Ver carrito" es .xoo-wsc-ft-btn-cart (verificado en
   vivo). Se OCULTA (el carrito es el panel lateral; no hay página de cesta),
   dejando "Finalizar compra" como acción principal a todo el ancho y "Seguir
   comprando" como enlace secundario discreto. */
.xoo-wsc-ft-btn-cart { display: none !important; }
.xoo-wsc-ft-buttons-cont { display: flex; flex-wrap: wrap; gap: 10px; }
.xoo-wsc-ft-btn-checkout {
	order: 1;
	flex: 1 1 100% !important;
	background: var(--brand) !important;
	border: 2px solid var(--brand) !important;
	color: #fff !important;
	border-radius: var(--radius) !important;
	font-weight: 700 !important;
	padding: .9em 1.2em !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.xoo-wsc-ft-btn-checkout:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.xoo-wsc-ft-btn-continue {
	order: 2;
	flex: 1 1 100% !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--muted) !important;
	text-decoration: underline;
	font-weight: 600 !important;
	padding: 4px !important;
	min-height: 0 !important;
}
.xoo-wsc-ft-btn-continue:hover { color: var(--brand) !important; }
/* Cabecera y totales del panel: tipografía y color de marca coherentes */
.xoo-wsc-container, .xoo-wsc-modal { font-family: var(--font) !important; }
.xoo-wsc-cart-head, .xoo-wsc-header { background: var(--navy) !important; color: #fff !important; }
.xoo-wsc-cart-head *, .xoo-wsc-header * { color: #fff !important; }
.xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-value,
.xoo-wsc-ft-amt-subtotal .woocommerce-Price-amount { color: var(--brand) !important; font-weight: 800 !important; }
/* Textos de "ahorro" del side cart en verde legible (token --ok #157347 = ~5.9:1
   sobre blanco; el verde por defecto del plugin daba 2.78:1). */
.xoo-wsc-ft-amt-savings,
.xoo-wsc-ft-amt-savings .xoo-wsc-ft-amt-value,
.xoo-wsc-ft-amt-savings .woocommerce-Price-amount,
.xoo-wsc-ft-amt-savings .woocommerce-Price-currencySymbol,
.xoo-wsc-psavlabel,
.xoo-wsc-psavings,
.xoo-wsc-psavings .woocommerce-Price-amount,
.xoo-wsc-psavings .woocommerce-Price-currencySymbol,
.xoo-wsc-psavings .amount,
.xoo-wsc-psavings bdi,
.xoo-wsc-psaved,
.xoo-wsc-psaved .woocommerce-Price-amount,
.xoo-wsc-psaved .woocommerce-Price-currencySymbol { color: var(--ok) !important; }
.xoo-wsc-product-name a, .xoo-wsc-p-name a { color: var(--ink) !important; font-weight: 600 !important; }
.xoo-wsc-sc-qty span, .xoo-wsc-qty-box { border-color: var(--line) !important; }

/* Control de cantidad propio en el panel lateral (fallback al PRO de XootiX;
   lo inyecta initSideCartQty() reemplazando el texto "Cantidad: N"). */
.rga-scqty {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}
.rga-scqty-btn {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: var(--surface-alt);
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.rga-scqty-btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
.rga-scqty-btn:disabled { opacity: .4; cursor: default; }
.rga-scqty-val {
	min-width: 38px;
	padding: 0 6px;
	text-align: center;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.rga-scqty.is-loading { opacity: .55; pointer-events: none; }

/* --- Item del carrito lateral (XootiX): el badge de ahorro (sm-right, ~145px)
   estrujaba el nombre a ~88px y lo apilaba palabra a palabra (altísimo). Se
   reorganiza: imagen compacta, nombre a ANCHO COMPLETO (2 líneas), papelera
   arriba-derecha, y qty/precio/ahorro apilados debajo con aire. --- */
.xoo-wsc-product { position: relative; align-items: flex-start; gap: 12px; }
.xoo-wsc-product .xoo-wsc-img-col { flex: 0 0 74px; width: 74px; }
.xoo-wsc-product .xoo-wsc-img-col img { width: 74px; height: 74px; object-fit: contain; border-radius: var(--radius); background: var(--surface-alt); }
.xoo-wsc-product .xoo-wsc-sum-col { min-width: 0; flex: 1 1 auto; }
/* sm-info en bloque → sm-left (nombre/qty/precio) y sm-right (ahorro) apilados a ancho completo */
.xoo-wsc-product .xoo-wsc-sm-info { display: block; }
.xoo-wsc-product .xoo-wsc-sm-left,
.xoo-wsc-product .xoo-wsc-sm-right { width: auto !important; display: block; min-width: 0; }
/* Nombre a ancho completo, 2 líneas máximo, legible */
.xoo-wsc-product .xoo-wsc-pname { display: block; width: auto; margin: 0 26px 8px 0; }
.xoo-wsc-product .xoo-wsc-pname a {
	font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Papelera arriba a la derecha, fuera del flujo del nombre */
.xoo-wsc-product .xoo-wsc-smr-del { position: absolute !important; top: 0; right: 0; margin: 0 !important; }
/* qty + precio + ahorro con aire, apilados */
.xoo-wsc-product .rga-scqty { margin: 4px 0 8px; }
.xoo-wsc-product .xoo-wsc-priceBox { margin: 0 0 6px; }
.xoo-wsc-product .xoo-wsc-sm-right { margin-top: 2px; }
.xoo-wsc-product .xoo-wsc-psavings { display: inline-flex; }

/* Iconos (imágenes) dentro de los ENLACES del menú: fuera, quedan feos.
   Se restringe a `a img` para no ocultar la imagen del panel del mega. */
#site-navigation a img,
.main-navigation a img { display: none !important; }
.main-navigation .rga-mega-img img { display: block !important; }

/* =========================================================
   4. NAVEGACIÓN PRINCIPAL + MEGA MENÚ (sobre menú nativo)
   ========================================================= */
.storefront-primary-navigation {
	background: var(--surface);
	border-bottom: 2px solid var(--brand);
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--ink);
	font-weight: 600;
	text-transform: none;
	font-size: 15.5px;
	padding: 16px 18px;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li:hover > a {
	color: var(--brand);
}
.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li { border: 0; }

/* --- Panel MEGA: submenú de primer nivel ancho y en columnas --- */
.main-navigation ul.nav-menu > li.menu-item-has-children { position: static; }
.storefront-primary-navigation .col-full { position: relative; }

.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu {
	left: 0;
	right: 0;
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-md);
	display: none;
	/* 2 columnas de categorías a la izquierda; el aside (imagen) va absoluto a la derecha.
	   min-height asegura que el aside (imagen + promo) quepa sin desbordar el recuadro. */
	grid-template-columns: 1fr 1fr;
	gap: 4px 30px;
	align-content: start;
	padding: 24px 30px 26px;
	padding-right: 38%;
	min-height: 400px;
}
.main-navigation ul.nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation ul.nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
	display: grid;
}
.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li {
	width: auto;
	float: none;
	border: 0;
	padding: 0;
}
.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
	color: var(--ink);
	font-weight: 600;
	font-size: 14.5px;
	padding: 9px 12px;
	border-radius: var(--radius);
	display: block;
	border-left: 3px solid transparent;
	line-height: 1.35;
}
.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover {
	background: var(--brand-tint);
	color: var(--brand-dark);
	border-left-color: var(--brand);
}
/* Panel lateral del mega (inyectado por JS): imagen dinámica + promo.
   Selector específico + !important para ganar a las reglas de Storefront
   que fuerzan position:relative en los <li> del menú. */
.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li.rga-mega-aside {
	position: absolute !important;
	top: 24px !important;
	right: 30px !important;
	bottom: 26px !important;
	left: auto !important;
	width: 34% !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
}
.rga-mega-img {
	flex: 1 1 auto;
	min-height: 150px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.rga-mega-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rga-mega-promo {
	flex: 0 0 auto;
	background: var(--navy);
	border-radius: var(--radius-lg);
	padding: 16px 18px;
}
.rga-mega-promo h4 { margin: 0 0 5px; font-size: 15px; color: #fff; }
.rga-mega-promo p { margin: 0 0 12px; color: var(--navy-muted); font-size: 13px; line-height: 1.5; }
.rga-mega-promo .button { display: inline-block; padding: .55em 1.2em; font-size: 13.5px; }

/* =========================================================
   5. HERO / CABECERA DE CATEGORÍA  (inyectado por hook)
   ========================================================= */
.rga-cat-hero {
	display: flex;
	align-items: center;
	gap: 34px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px 34px;
	margin: 18px 0 28px;
}
.rga-cat-hero .rga-cat-hero-body { flex: 1 1 auto; min-width: 0; }
.rga-cat-hero h1 { color: var(--ink); margin: 4px 0 12px; font-size: 2rem; }
.rga-hero-ship { color: var(--ok); font-weight: 600; margin: 0 0 4px; font-size: 14px; }
.rga-cat-hero-desc { color: var(--muted); max-width: 66ch; }
.rga-cat-hero-desc p { margin: 0 0 .7em; line-height: 1.6; }
.rga-cat-hero-desc p:last-child { margin-bottom: 0; }
.rga-cat-hero-desc strong { color: var(--ink); }
.rga-cat-hero-media { flex: 0 0 300px; display: flex; align-items: center; justify-content: center; }
.rga-cat-hero-media img {
	width: 100%; height: auto; max-height: 230px;
	object-fit: contain; border-radius: var(--radius);
	background: #fff; mix-blend-mode: multiply;
}
@media (max-width: 800px) {
	.rga-cat-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
	.rga-cat-hero-media { flex-basis: auto; width: 100%; }
}

/* Diagrama "cómo medir" de la guía (SVG inline inyectado por hook) */
.rga-medir {
	margin: 0 0 30px;
	padding: 22px 24px 18px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.rga-medir-head { margin: 0 0 12px; }
.rga-medir-kick {
	display: inline-block; font-size: 12px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--brand); background: var(--brand-tint);
	padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.rga-medir-head h2 { margin: 0 0 6px; font-size: 1.4rem; color: var(--ink); }
.rga-medir-head p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 70ch; }
.rga-medir-head p strong { color: var(--ink); }
.rga-medir-svg { display: block; width: 100%; height: auto; max-width: 600px; margin: 6px auto 4px; }
.rga-medir-dim { fill: var(--ink); font-size: 16px; font-weight: 600; font-family: var(--font); }
.rga-medir-carr { fill: var(--brand); font-size: 18px; font-weight: 800; font-family: var(--font); letter-spacing: .02em; }
.rga-medir-carr-sub { fill: var(--brand); font-size: 13px; font-weight: 600; font-family: var(--font); }
.rga-medir figcaption {
	color: var(--muted); font-size: 13.5px; line-height: 1.6;
	margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px;
}
.rga-medir figcaption strong { color: var(--ink); }
@media (max-width: 600px) {
	.rga-medir { padding: 16px; }
	.rga-medir-head h2 { font-size: 1.25rem; }
}

/* Estrellas de valoración.
   ⚠️ La regla base fuerza Montserrat en TODOS los <span>, y eso pisaba la fuente
   de iconos "star" de WooCommerce en las estrellas RELLENAS (que van dentro de un
   <span>), rompiéndolas (salían como rectángulos rayados). Hay que restaurar la
   fuente "star" en el rating y sus spans. */
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span,
.woocommerce .star-rating span::before,
.star-rating,
.star-rating::before,
.star-rating span,
.star-rating span::before { font-family: "star" !important; }
/* Dorado legible (>=3:1 sobre blanco), no el morado del tema */
.woocommerce .star-rating span::before,
.star-rating span::before { color: #b7791f; }
.woocommerce .star-rating::before,
.star-rating::before { color: #d9cdb4; }

/* =========================================================
   HOME HERO — full-bleed: imagen de fondo + scrim oscuro + texto superpuesto
   (entrada editorial tipo peronda.com). Contraste garantizado por el degradado.
   ========================================================= */
.rga-home-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 0;
	min-height: 560px;
	display: flex;
	align-items: flex-end;      /* texto anclado abajo (editorial) */
	background: var(--navy);
	color: #fff;
	/* Full-bleed: rompe el contenedor .col-full y ocupa TODO el ancho (sin blanco
	   a los lados). El overflow-x:clip de #content (abajo) evita el scroll
	   horizontal que provocaría el 100vw + el ancho del scrollbar. */
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw) 34px;
}
/* Contiene el desbordamiento del hero full-bleed SOLO en la home (sin sticky aquí) */
.home #content.site-content { overflow-x: clip; }
/* Storefront mete margin-bottom (~68px) + el header lleva padding-bottom (18px)
   bajo la línea roja del nav → blanco entre el header y el hero. En la home
   quitamos ambos para que la imagen quede PEGADA a la línea roja del header. */
.home .site-header { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.home #content.site-content { padding-top: 0 !important; margin-top: 0 !important; }
.rga-hero-bg { position: absolute; inset: 0; z-index: 0; }
.rga-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim: degradado abajo (para el texto) + lateral izquierdo (refuerza el copy).
   Garantiza >=4.5:1 del texto blanco sobre cualquier zona de la imagen. */
.rga-hero-scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	/* Scrim fuerte en la ZONA DEL TEXTO (izquierda) para garantizar >=4.5:1 del
	   texto blanco incluso sobre reflejos claros de la imagen (verificado por
	   muestreo de píxeles). Se difumina a la derecha para dejar ver la imagen. */
	background:
		linear-gradient(90deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.88) 46%, rgba(10,10,10,.34) 70%, rgba(10,10,10,0) 92%),
		linear-gradient(180deg, rgba(10,10,10,.10) 0%, rgba(10,10,10,.28) 50%, rgba(10,10,10,.62) 100%);
}
/* El contenido se centra al ancho de la página (como .col-full) aunque el fondo
   sea full-bleed → el texto del hero alinea con el resto de secciones. */
.rga-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(16px, 3vw, 44px); box-sizing: border-box; }
.rga-hero-copy { max-width: 640px; }
.rga-hero-eyebrow {
	display: block;
	font-size: clamp(12px, 1.3vw, 14px);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #ff8a97;            /* rojo claro legible sobre oscuro (>=6:1) */
	margin-bottom: 14px;
	text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.rga-home-hero h1 {
	color: #fff;
	font-size: clamp(32px, 5.2vw, 54px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.01em;
	margin: 0 0 16px;
	max-width: 16ch;
	text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.rga-home-hero p {
	color: rgba(255,255,255,.92);
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 28px;
	text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.rga-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.rga-home-hero .button { padding: .85em 1.8em; font-size: 16px; }
.rga-home-hero .button.rga-outline {
	background: rgba(255,255,255,.10);
	color: #fff; border-color: rgba(255,255,255,.65);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.rga-home-hero .button.rga-outline:hover { background: rgba(255,255,255,.2); color: #fff; border-color: #fff; }
/* Sin imagen: hero navy compacto (fallback) */
.rga-home-hero:not(.has-bg) { min-height: auto; }
.rga-home-hero:not(.has-bg) .rga-hero-inner { padding: 52px clamp(28px, 4vw, 56px); }

@media (max-width: 768px) {
	/* En móvil: imagen grande arriba + texto compacto abajo sobre degradado fuerte.
	   Se OCULTA la descripción larga (va también en el bloque SEO de abajo) para
	   que el texto quepa en la mitad inferior y la imagen luzca — y para garantizar
	   >=4.5:1 aunque la imagen tenga reflejos claros. */
	.rga-home-hero { min-height: 560px; border-radius: 0; align-items: flex-end; }
	.rga-home-hero h1 { font-size: clamp(30px, 8.5vw, 42px); margin-bottom: 20px; }
	.rga-home-hero > .rga-hero-inner p { display: none; }
	.rga-hero-scrim {
		background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.08) 12%, rgba(10,10,10,.86) 34%, rgba(10,10,10,.97) 100%);
	}
}
@media (max-width: 480px) {
	.rga-home-hero { min-height: 520px; }
	.rga-hero-cta .button { flex: 1 1 100%; text-align: center; }
}

/* =========================================================
   6. CATÁLOGO: tarjetas de producto
   ========================================================= */
/* Rejilla ÚNICA para TODOS los listados de producto (tienda, categoría,
   buscador, home "populares", relacionados, upsells, "has visto
   recientemente"): 4 columnas iguales con CSS Grid en vez de los floats
   de Storefront → mismo tamaño de tarjeta en todas partes y SIN
   estiramientos cuando hay pocos ítems (p.ej. upsells con 2 productos). */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 20px;
	margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}
/* Productos: 4/3/2 por breakpoint. (Los breakpoints de .rga-cat-grid viven
   JUNTO a su regla base más abajo — si van aquí, la base posterior los pisa.) */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--card-pad) var(--card-pad) 16px;
	transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--card-hover-border);
	transform: translateY(-3px);
}
/* Zona de imagen con zoom en hover */
.rga-card-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-alt);
	margin-bottom: 12px;
}
.woocommerce ul.products li.product .rga-card-media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	background: transparent;
	mix-blend-mode: multiply;
	transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover .rga-card-media img { transform: scale(1.05); }
/* ---- Badge de OFERTA (toda la web): pill rojo con sombra que resalta,
   muestra el % de descuento. Sustituye el chip plano anterior. ---- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.rga-onsale {
	position: absolute; top: 10px; left: 10px; right: auto; bottom: auto; margin: 0;
	min-width: 0 !important; min-height: 0 !important; width: auto; height: auto;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--brand); color: #fff;
	font-weight: 800; font-size: 12.5px; letter-spacing: .04em; line-height: 1;
	text-transform: uppercase;
	padding: 7px 12px; border-radius: 999px;
	box-shadow: 0 5px 14px rgba(200,16,46,.38);
	z-index: 4;
}
/* En el single, sobre la galería (rga.js lo mete dentro para que siga el sticky) */
.single-product .woocommerce-product-gallery .onsale {
	top: 14px; left: 14px; font-size: 14px; padding: 8px 15px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	/* Espaciado SIEMPRE como margin (fuera de la caja de recorte); si fuese
	   padding, la 3ª línea asomaría por debajo (sliver sobre el precio). */
	margin: 2px 0 8px;
	padding: 0;
	line-height: 1.35;
	/* !important: WooCommerce/Storefront fuerza display:flow-root en el título
	   y desactivaría el line-clamp (título largo se solaparía con el precio). */
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* alto EXACTO de 2 líneas → todas las tarjetas alinean precio y botón */
	height: calc(2 * 1.35em);
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--brand); }
.woocommerce ul.products li.product .star-rating { font-size: .85em; margin: 0 0 8px; }
.woocommerce ul.products li.product .price {
	color: var(--ink);
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 12px;
	display: block;
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: 14px; margin-right: 6px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price .amount { color: var(--brand); }
/* Botón añadir al carrito: alineado abajo y a todo el ancho */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
/* Meta de tarjeta (inyectada por hook): Ref + fuerza en UNA línea limpia.
   Ref = texto gris discreto (sin pill); fuerza = tag rojo suave. */
.rga-loop-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 6px;
	min-height: 20px; /* reserva la línea aunque falte SKU o fuerza */
}
.rga-loop-ref {
	font-size: 11.5px;
	color: var(--muted);
	letter-spacing: .02em;
}
.rga-loop-force {
	font-size: 11px;
	font-weight: 700;
	color: var(--brand);          /* #c8102e sobre #fbe9ec = 5.05:1 (AA) */
	background: var(--brand-tint);
	border-radius: 4px;
	padding: 2px 7px;
	letter-spacing: .02em;
	line-height: 1.4;
}

/* Barra de orden + recuento de resultados (coherente con la marca) */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	color: var(--muted);
	font-size: 13.5px;
	margin: 0 0 18px;
	line-height: 2.4;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering { margin: 0 0 18px; }
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	font-family: var(--font);
	font-size: 13.5px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 9px 34px 9px 12px;
	line-height: 1.2;
	max-width: 100%;
}
.woocommerce .woocommerce-ordering select:focus,
.woocommerce-page .woocommerce-ordering select:focus {
	outline: none; border-color: var(--brand);
}

/* Reparto de las barras: Storefront duplica orden+recuento+paginación en dos
   .storefront-sorting (arriba y abajo). Arriba dejamos ORDEN+RECUENTO; abajo,
   solo la PAGINACIÓN, con aire y separador (antes iba pegada y sin estilo). */
.rga-shopmain .storefront-sorting {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	margin: 4px 0 22px; padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.rga-shopmain .storefront-sorting::before,
.rga-shopmain .storefront-sorting::after { content: none; display: none; }
.rga-shopmain .storefront-sorting .woocommerce-result-count,
.rga-shopmain .storefront-sorting .woocommerce-ordering { margin: 0; float: none; }
.rga-shopmain .storefront-sorting .woocommerce-notices-wrapper { flex-basis: 100%; }
.rga-shopmain .storefront-sorting .woocommerce-pagination { display: none; }
.rga-shopmain ul.products ~ .storefront-sorting {
	display: block; border-bottom: 0; padding-bottom: 0;
	margin: 44px 0 8px; padding-top: 32px; border-top: 1px solid var(--line);
}
.rga-shopmain ul.products ~ .storefront-sorting .woocommerce-result-count,
.rga-shopmain ul.products ~ .storefront-sorting .woocommerce-ordering { display: none; }
.rga-shopmain ul.products ~ .storefront-sorting .woocommerce-pagination { display: block; }

/* Paginación: botones de página con la marca (antes texto plano de Storefront) */
.woocommerce nav.woocommerce-pagination { text-align: center; width: 100%; }
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 8px; margin: 0; padding: 0; border: 0;
}
.woocommerce nav.woocommerce-pagination ul li { margin: 0; padding: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 13px; box-sizing: border-box;
	border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); font-weight: 600; background: #fff; text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover { border-color: var(--brand); color: var(--brand); }
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots { border-color: transparent; background: transparent; min-width: 22px; }

/* Botón "Ver resultados" al final de los filtros (cierra el cajón en móvil) */
.rga-filters-apply {
	display: block; width: 100%; box-sizing: border-box;
	margin: 18px 0 2px;
	background: var(--brand); color: #fff; border: 1px solid var(--brand);
	border-radius: var(--radius); padding: 12px 18px;
	font-weight: 700; font-size: 15px; font-family: var(--font); cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.rga-filters-apply:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* =========================================================
   7. FICHA DE PRODUCTO
   ========================================================= */
.single-product div.product .product_title { font-size: 1.9rem; }
.single-product div.product p.price,
.single-product div.product span.price { color: var(--brand); font-weight: 700; }
.single-product .woocommerce-product-gallery {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 16px;
	box-shadow: var(--shadow-sm);
}
.single-product div.product .woocommerce-product-details__short-description { color: var(--muted); }

/* Referencia bajo el título */
.rga-sku-line {
	color: var(--muted);
	font-size: 14px;
	margin: -6px 0 14px;
}
.rga-sku-line strong { color: var(--ink); }

/* Botones de descarga ficha técnica / CAD */
.rga-downloads {
	display: flex;
	gap: 14px;
	margin: 18px 0 6px;
	flex-wrap: wrap;
}
.rga-download-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 180px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 14px 16px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
	transition: border-color .15s, box-shadow .15s;
}
.rga-download-btn:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); color: var(--ink); }
.rga-download-btn .rga-dl-ico {
	width: 40px; height: 40px; flex: 0 0 40px;
	background: var(--brand-tint);
	color: var(--brand);
	border-radius: var(--radius);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
}
.rga-download-btn small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }

/* Envío 24/48h destacado */
.rga-ship-badge {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--ok); font-weight: 600; margin: 8px 0 4px;
}

/* Pestañas de WooCommerce -> ACORDEÓN full-width (como la competencia).
   rga.js oculta la lista de títulos e inserta un header antes de cada panel. */
.woocommerce-tabs { display: block; overflow: visible; }
.woocommerce-tabs .rga-acc-header {
	display: flex; justify-content: space-between; align-items: center;
	width: 100%; float: none; clear: both;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 18px;
	margin: 10px 0 0;
	font-weight: 700; font-size: 16px; color: var(--ink);
	text-align: left; cursor: pointer;
	transition: color .15s, border-color .15s;
}
.woocommerce-tabs .rga-acc-header:hover { color: var(--brand); }
.woocommerce-tabs .rga-acc-header.is-open {
	color: var(--brand);
	border-color: var(--brand);
	border-radius: var(--radius) var(--radius) 0 0;
}
.woocommerce-tabs .rga-acc-ico {
	width: 10px; height: 10px; flex: 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.woocommerce-tabs .rga-acc-header.is-open .rga-acc-ico { transform: rotate(-135deg); }
.woocommerce-tabs .rga-acc-panel {
	display: none; float: none; width: 100%; clear: both;
	border: 1px solid var(--brand);
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: 20px 22px;
	margin: 0;
}
.woocommerce-tabs .rga-acc-panel.is-open { display: block; }
.woocommerce-tabs .rga-acc-panel > h2:first-child { margin-top: 0; }

/* Tabla de descuento por volumen (Tiered Price Table) */
.tiered-pricing-table, table.tiered_pricing_table {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.tiered-pricing-table th { background: var(--navy); color: #fff; }

/* ---------------------------------------------------------------------------
   BLINDAJE ANTI-MORADO: WooCommerce y el plugin Tiered Price Table traen por
   defecto un lila/morado (#7f54b3 y variantes) en las pestañas de producto y
   en la tabla de "descuento por volumen". Aquí se fuerza TODO a marca/ink, en
   cualquier estado de caché o si el acordeón JS no llega a aplicarse.
   --------------------------------------------------------------------------- */
/* Pestañas NATIVAS de WooCommerce (por si se muestran sin el acordeón) */
.woocommerce-tabs ul.tabs li a { color: var(--ink); }
.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li.active a { color: var(--brand) !important; }
.woocommerce-tabs ul.tabs li.active { background: #fff; }
.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li.active { border-color: var(--line) !important; }
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li.active::before,
.woocommerce-tabs ul.tabs li.active::after { border-color: var(--line) !important; background: transparent !important; }
/* Tabla de descuento por volumen (Tiered Price Table): acentos del plugin a marca */
.tiered-pricing-table th,
table.tiered_pricing_table th,
.tier-pricing-table th { background: var(--navy) !important; color: #fff !important; }
.tiered-pricing-table tr.active,
.tiered-pricing-table tbody tr:hover,
table.tiered_pricing_table tr.active,
.tier-pricing-table tr.active,
.tier-pricing-table-row.active { background: var(--brand-tint) !important; }
.tiered-pricing-you-save,
.tiered-pricing-you-save__discount,
.tiered-pricing-you-save__total,
.tier-pricing-table .discount,
.tier-pricing-table a,
.tier-pricing-table .highlight,
.tiered-pricing-table a { color: var(--brand) !important; }
.tier-pricing-table :is(td, th, tr).active,
.tier-pricing-table [class*="active"] { border-color: var(--brand) !important; }

/* =========================================================
   8. FOOTER OSCURO MULTI-COLUMNA
   ========================================================= */
.site-footer {
	background: var(--navy);
	color: var(--navy-fg);
	padding-top: 48px;
}
.site-footer .col-full { max-width: var(--maxw); }
.site-footer a { color: var(--navy-muted); }
.site-footer a:hover { color: #fff; }
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .widget-title {
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 16px;
}
.site-footer .footer-widgets {
	border-bottom: 1px solid var(--navy-soft);
	padding-bottom: 24px;
}
.site-footer .site-info {
	background: transparent;
	color: var(--navy-muted);
	border-top: 1px solid var(--navy-soft);
	padding: 20px 0;
}
.site-footer .site-info a { color: var(--navy-fg); }

/* Columnas de footer propias */
.rga-footer-cols { padding: 8px 0 30px; }
.rga-footer-cols .col-full {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
}
/* Storefront añade pseudo-elementos de clearfix (::before/::after con content)
   al .col-full; en un contenedor grid/flex se cuelan como celdas fantasma y
   descuadran las columnas. Los anulamos en nuestros col-full grid/flex. */
.rga-footer-cols .col-full::before,
.rga-footer-cols .col-full::after,
.site-header > .col-full::before,
.site-header > .col-full::after { content: none; display: none; }
.rga-fcol h3 {
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--navy-soft);
}
.rga-fcol p { color: var(--navy-muted); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.rga-fcol ul { list-style: none; margin: 0; padding: 0; }
.rga-fcol ul li { padding: 5px 0; font-size: 14px; }
.rga-fcol a { color: var(--navy-muted); text-decoration: none; }
.rga-fcol a:hover { color: #fff; text-decoration: underline; }
.rga-fcol .rga-fship { color: var(--ok-on-dark); font-weight: 600; }
.rga-fcol-about p { max-width: 42ch; }

@media (max-width: 900px) {
	.rga-footer-cols .col-full { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.rga-footer-cols .col-full { grid-template-columns: 1fr; }
}

/* --- Footer: menú legal (widget nav_menu de Storefront) + colofón ---------
   Los enlaces legales salían como lista con marcador/icono por defecto y muy
   espaciados. Se convierten en una fila compacta, sin marcadores, coherente
   con el pie oscuro. */
.site-footer .footer-widgets .widget_nav_menu ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
}
.site-footer .footer-widgets .widget_nav_menu li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.site-footer .footer-widgets .widget_nav_menu li::marker { content: none; }
.site-footer .footer-widgets .widget_nav_menu li img,
.site-footer .footer-widgets .widget_nav_menu li svg { display: none !important; }
.site-footer .footer-widgets .widget_nav_menu a {
	color: var(--navy-muted);
	font-size: 13.5px;
	text-decoration: none;
}
.site-footer .footer-widgets .widget_nav_menu a:hover { color: #fff; text-decoration: underline; }

/* Sangría limpia de las subcategorías en la columna "Categorías" del footer. */
.rga-fcat-list .children {
	padding-left: 12px;
	margin: 2px 0 4px;
	border-left: 1px solid var(--navy-soft);
}

/* Colofón: quitar el crédito "Construido con WooCommerce" y el separador,
   dejando solo el copyright y la política de privacidad. */
.site-footer .site-info a[href*="woocommerce.com"] { display: none; }
.site-footer .site-info span[role="separator"] { display: none; }

/* =========================================================
   8a. DESCRIPCIÓN DE CATEGORÍA (intro SEO)
   ========================================================= */
/* Breadcrumb compacto (menos aire de "landing"): Storefront lo deja con 22px
   de padding y 59px de margin inferior — lo densificamos como una tienda real. */
.storefront-breadcrumb,
.woocommerce-breadcrumb {
	padding: 14px 0 0 !important;
	margin: 0 0 16px !important;
	font-size: 13.5px;
	color: var(--muted);
}

.term-description { color: var(--muted); margin: 0 0 22px; max-width: 70ch; }
.term-description p { margin: 0 0 .9em; line-height: 1.6; }
.term-description strong { color: var(--ink); }
.term-description p:last-child { margin-bottom: 0; }

/* =========================================================
   8b. SIDEBAR DE FILTROS POR ATRIBUTOS (estilo competencia)
   ========================================================= */
.rga-filters-panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 2px 18px 16px;
	margin: 0 0 20px;
}
.rga-filters-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 15px 0 12px; margin-bottom: 4px;
	border-bottom: 2px solid var(--brand);
}
.rga-filters-head h3 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.rga-filters-close { display: none; background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); }

/* Filtros activos (chips con ✕) */
.rga-active-filters { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rga-active-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 8px; }
.rga-active-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rga-active-filters li { margin: 0; padding: 0; }
.rga-active-filters li a {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--brand-tint); color: var(--brand-dark);
	border: 1px solid #f3c6ce; border-radius: 999px;
	padding: 3px 11px; font-size: 12.5px; text-decoration: none; font-weight: 600;
}
.rga-active-filters li a::before { content: '✕'; font-size: 10px; }
.rga-active-filters li a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Grupos de atributo */
.rga-filter-group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rga-filter-group:last-child { border-bottom: 0; padding-bottom: 4px; }
.rga-filter-title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* Lista de términos como checkboxes */
.rga-filters-panel ul.woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li { list-style: none; margin: 0; padding: 0; border: 0; display: flex; align-items: center; }
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li a {
	display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
	padding: 6px 2px; color: var(--ink); font-size: 14px; text-decoration: none;
}
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li a::before {
	content: ''; flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box;
	border: 2px solid #cfcfcf; border-radius: 4px; background-color: #fff;
	background-position: center; background-repeat: no-repeat; background-size: 12px;
	transition: border-color .15s, background-color .15s;
}
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li a:hover { color: var(--brand); }
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li a:hover::before { border-color: var(--brand); }
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li.chosen a { color: var(--brand); font-weight: 600; }
.rga-filters-panel ul.woocommerce-widget-layered-nav-list li.chosen a::before {
	background-color: var(--brand); border-color: var(--brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.rga-filters-panel .count {
	flex: 0 0 auto; margin-left: 8px; color: var(--muted); font-size: 12px;
	background: var(--surface-alt); border-radius: 999px; padding: 1px 9px;
}

/* =========================================================
   8c. OVERRIDES DE CONTRASTE (ganan al customizer / tema padre)
        Verificado con auditor WCAG: pares texto/fondo >= 4.5:1
   ========================================================= */
/* Enlaces del footer sobre navy: TODOS claros y legibles (>=7:1) */
.site-footer a:not(.button) { color: var(--navy-muted) !important; }
.site-footer a:not(.button):hover { color: #fff !important; }
.site-footer .site-info,
.site-footer .site-info a { color: var(--navy-fg) !important; }
.site-footer .rga-fcol h3,
.site-footer .footer-widgets .widget-title { color: #fff !important; }
.site-footer, .site-footer p, .site-footer li { color: var(--navy-muted) !important; }

/* Enlaces del banner de cookies (plugin RGPD): legibles sobre fondo oscuro.
   El banner usa clases .cdp-cookies-texto (sing.) y .cdp-cookies-textos (pl.) */
.cdp-cookies-alerta .cdp-cookies-texto p a[href],
.cdp-cookies-alerta .cdp-cookies-textos p a[href],
.cdp-cookies-texto p a[href],
.cdp-cookies-textos p a[href],
.cdp-cookies-texto a[href],
.cdp-cookies-textos a[href],
.cdp-cookies-alerta a[href] { color: #fff !important; text-decoration: underline !important; }

/* Contenido antiguo con el azul cian de Gutenberg (rgb(6,147,227) = 3.2:1,
   falla contraste y es off-brand): se pasa al rojo de marca (5.9:1). */
.has-vivid-cyan-blue-color { color: var(--brand) !important; }
.has-vivid-cyan-blue-background-color { background-color: var(--brand) !important; }

/* Botones con relleno de marca: texto SIEMPRE blanco (WCAG 5.9:1) */
.button:not(.rga-outline),
.woocommerce a.button:not(.rga-outline),
.woocommerce button.button:not(.rga-outline),
.woocommerce .button:not(.rga-outline),
.woocommerce #respond input#submit:not(.rga-outline),
.woocommerce button.button.alt,
.single_add_to_cart_button,
.rga-home-hero .button,
.rga-cat-hero .button,
.site-header .widget_product_search button[type="submit"] {
	color: #fff !important;
}

/* =========================================================
   8c-bis. BLINDAJE DE BLOQUES WOO "CATEGORÍA/PRODUCTO DESTACADO"
   Los bloques Gutenberg de WooCommerce (Featured Category / Featured
   Product, usados en la página de tienda) pintan el título en BLANCO
   sobre la imagen; sin un velo suficiente el texto es ILEGIBLE (fallo
   WCAG verificado en /tienda-resortes-de-gas/). Aquí se garantiza un
   scrim oscuro + sombra bajo el texto y se tematiza el botón con el pill
   de marca, para que cualquier tile que inserte el cliente sea legible.
   ========================================================= */
.wc-block-featured-category,
.wc-block-featured-product {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
}
/* Velo garantizado sobre la imagen: por encima del fondo, por debajo del texto. */
.wc-block-featured-category::before,
.wc-block-featured-product::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.55) 100%);
	z-index: 1;
	pointer-events: none;
}
/* El contenido (título, descripción, botón) siempre por encima del velo. */
.wc-block-featured-category__wrapper,
.wc-block-featured-product__wrapper,
.wc-block-featured-category__title,
.wc-block-featured-product__title,
.wc-block-featured-category__description,
.wc-block-featured-product__description,
.wc-block-featured-category__link,
.wc-block-featured-product__link,
.wc-block-featured-category .wp-block-button,
.wc-block-featured-product .wp-block-button {
	position: relative;
	z-index: 2;
}
/* Título y descripción SIEMPRE legibles sobre cualquier imagen. */
.wc-block-featured-category__title,
.wc-block-featured-product__title,
.wc-block-featured-category__description,
.wc-block-featured-product__description {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* Botón "Comprar ahora" -> pill rojo de marca, contenido dentro de la tile. */
.wc-block-featured-category .wp-block-button__link,
.wc-block-featured-product .wp-block-button__link {
	background: var(--brand) !important;
	border: 2px solid var(--brand) !important;
	color: #fff !important;
	border-radius: var(--radius) !important;
	font-weight: 600;
	max-width: 100%;
	white-space: normal;
}
.wc-block-featured-category .wp-block-button__link:hover,
.wc-block-featured-product .wp-block-button__link:hover {
	background: var(--brand-dark) !important;
	border-color: var(--brand-dark) !important;
	color: #fff !important;
}
/* El botón y su wrapper no deben desbordar la tile. */
.wc-block-featured-category .wp-block-button,
.wc-block-featured-product .wp-block-button { max-width: 100%; }
/* Algún bloque trae el grupo de botones con fondo blanco (has-white-background-color)
   → recuadro blanco que rompe la tile. Lo forzamos transparente. */
.wc-block-featured-category .wp-block-buttons,
.wc-block-featured-product .wp-block-buttons {
	background: transparent !important;
	padding: 0 !important;
}

/* =========================================================
   8d. LAYOUT DE CATÁLOGO CON SIDEBAR IZQUIERDA (tipo distribuidor)
   ========================================================= */
/* Sin barra lateral en TODA la web (petición de Pedro): contenido a ancho completo.
   Los filtros de la tienda van en el aside propio (.rga-shopside), no en #secondary. */
#secondary,
.rga-catalog #secondary { display: none !important; }
#primary.content-area,
#primary,
.rga-catalog #primary.content-area,
.rga-catalog #primary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
/* Layout propio de 2 columnas dentro del contenido */
.rga-shoplayout {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}
.rga-shopside {
	flex: 0 0 280px;
	width: 280px;
}
.rga-shopmain {
	flex: 1 1 auto;
	min-width: 0;
}
/* El botón "Filtrar productos" es el toggle del cajón de filtros MÓVIL. En
   escritorio sobra (los filtros están siempre visibles en el sidebar y aplican
   al instante), así que se oculta; el @media móvil lo vuelve a mostrar. */
.rga-filters-toggle { display: none; }
/* Filtros dentro del aside: una sola columna apilada */
.rga-shopside .rga-filters .rga-filter-col { margin-bottom: 16px; }
.rga-shopside .rga-filters .rga-filter-col:last-child { margin-bottom: 0; }

/* Cajas del sidebar */
.rga-side-box {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 18px 18px;
	margin: 0 0 20px;
}
.rga-side-box h3 {
	margin: 0 0 12px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ink);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--brand);
}
.rga-side-cats ul { list-style: none; margin: 0; padding: 0; }
.rga-side-cats li { list-style: none; margin: 0; }
.rga-side-cats > ul > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.rga-side-cats a {
	flex: 1 1 auto;
	display: block;
	padding: 7px 10px;
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
	border-left: 3px solid transparent;
	line-height: 1.35;
}
.rga-side-cats a:hover { background: var(--brand-tint); color: var(--brand-dark); border-left-color: var(--brand); }
.rga-side-cats li.current-cat > a { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; border-left-color: var(--brand); }
.rga-side-cats .count { flex: 0 0 auto; color: var(--muted); font-size: 12px; padding-left: 6px; }
.rga-side-cats ul.children { flex: 1 1 100%; padding-left: 14px; border-left: 1px solid var(--line); margin: 2px 0 4px 10px; }
.rga-side-help { background: var(--surface-alt); }
.rga-side-help p { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }
.rga-side-help .button { display: block; text-align: center; margin: 0 0 8px; }

@media (max-width: 900px) {
	.rga-shoplayout { flex-direction: column; }
	.rga-shopside { flex-basis: auto; width: 100%; }
}

/* =========================================================
   9. RESPONSIVE  (mobile-first: la mayoría compra desde el móvil)
   ========================================================= */

/* ---- Tablet / móvil grande (<= 900px) ---- */
@media (max-width: 900px) {
	.site-header > .col-full { flex-wrap: wrap; gap: 12px 14px; }
	/* Storefront oculta `.site-search` en móvil (buscador en el footer handheld);
	   nosotros SÍ queremos el buscador FiboSearch a lo ancho bajo el logo/iconos. */
	.site-header .site-search { display: block !important; }
	.site-header > .col-full > .site-search { order: 3; max-width: 100%; flex: 1 1 100%; }
	.rga-cat-hero { flex-direction: column; align-items: flex-start; padding: 24px; }
	.rga-topbar .col-full { justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
	.rga-topbar .rga-topbar-left { margin-right: 0; width: 100%; text-align: center; }
}

/* ---- Móvil (<= 768px): la hamburguesa de Storefront toma el mando ---- */
@media (max-width: 768px) {
	/* HEADER: logo compacto + iconos arriba, buscador a lo ancho debajo */
	.site-header { padding-top: 12px; padding-bottom: 12px; }
	.site-header > .col-full > .site-branding { max-width: 160px; }
	.site-header .site-branding .custom-logo,
	.site-header .site-branding img { max-width: 160px; }
	.rga-header-actions { margin-left: auto; gap: 6px; }
	.rga-header-actions .rga-hact-icon { width: 44px; height: 44px; }

	/* NAV: botón hamburguesa a marca; menú vertical al desplegar.
	   Storefront colapsa #site-navigation al ancho del botón y deja el
	   wrapper .primary-navigation en display:none; lo forzamos a ancho
	   completo y visible SOLO cuando el nav está .toggled. */
	.storefront-primary-navigation { border-bottom: 0; padding: 6px 0; }
	.storefront-primary-navigation .col-full { display: block; }
	.main-navigation { display: block; width: 100%; float: none; }
	/* El botón rojo original de Storefront se OCULTA: el menú se abre con la
	   hamburguesa del header (rga.js togglea .toggled directamente). */
	.storefront-primary-navigation .main-navigation button.menu-toggle,
	.main-navigation .menu-toggle { display: none !important; }
	/* Hamburguesa en el header, a la derecha del carrito (objetivo táctil 44px) */
	.rga-menu-toggle {
		display: inline-flex !important; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer;
		background: transparent; border: 0; color: var(--ink);
	}
	.rga-menu-toggle:hover { color: var(--brand); }
	.rga-burger, .rga-burger::before, .rga-burger::after {
		display: block; width: 25px; height: 2.5px; border-radius: 2px;
		background: currentColor; transition: transform .2s ease, opacity .2s ease, background .2s ease;
	}
	.rga-burger { position: relative; }
	.rga-burger::before, .rga-burger::after { content: ''; position: absolute; left: 0; }
	.rga-burger::before { top: -7px; }
	.rga-burger::after { top: 7px; }
	/* Estado abierto → X */
	.rga-menu-toggle.is-open .rga-burger { background: transparent; }
	.rga-menu-toggle.is-open .rga-burger::before { top: 0; transform: rotate(45deg); }
	.rga-menu-toggle.is-open .rga-burger::after { top: 0; transform: rotate(-45deg); }
	.main-navigation .primary-navigation { display: none; width: 100%; }
	.main-navigation.toggled .primary-navigation { display: block; margin-top: 8px; }
	.main-navigation ul.nav-menu,
	.main-navigation ul.menu { display: none; }
	.main-navigation.toggled ul.nav-menu,
	.main-navigation.toggled ul.menu { display: block; }
	.main-navigation ul.nav-menu > li { width: 100%; float: none; border: 0; }
	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding: 13px 8px; font-size: 16px;
		border-bottom: 1px solid var(--line);
	}
	/* Submenú (mega) -> lista apilada SIEMPRE visible; sin hover, sin imagen */
	.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu {
		position: static !important; display: block !important;
		width: auto !important; max-width: none !important; margin: 0 !important;
		border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
		grid-template-columns: none !important;
		padding: 2px 0 6px 14px !important; padding-right: 0 !important;
		min-height: 0 !important; background: transparent !important;
	}
	.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li { width: 100% !important; }
	.main-navigation ul.nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
		font-size: 14px; padding: 9px 10px; border-bottom: 1px solid #f0f0f0;
	}
	.rga-mega-aside, .rga-mega-promo, .rga-mega-img { display: none !important; }

	/* CATÁLOGO: filtros como cajón lateral (off-canvas) */
	.rga-shoplayout { flex-direction: column; gap: 0; }
	.rga-filters-toggle {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		width: 100%; box-sizing: border-box;
		background: var(--brand-tint); border: 1px solid var(--brand); border-radius: var(--radius);
		padding: 13px 18px; font-weight: 700; color: var(--brand); cursor: pointer;
		margin: 0 0 18px; font-size: 15px; font-family: var(--font);
	}
	.rga-filters-toggle:hover { background: var(--brand); color: #fff; }
	.rga-filters-toggle:hover svg { stroke: #fff; }
	.rga-filters-toggle svg { width: 18px; height: 18px; }
	.rga-shopside {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 100050;
		width: 86%; max-width: 340px;
		background: #fff; padding: 14px 16px; overflow-y: auto;
		transform: translateX(-100%); transition: transform .25s ease;
		box-shadow: 0 0 40px rgba(0,0,0,.25);
	}
	body.rga-filters-open { overflow: hidden; }
	body.rga-filters-open .rga-shopside { transform: translateX(0); }
	body.rga-filters-open::after {
		content: ''; position: fixed; inset: 0; z-index: 100040;
		background: rgba(0,0,0,.5);
	}
	.rga-filters-close { display: block !important; }
	.rga-shopside .rga-side-help { display: none; }
	.rga-filters-panel { border: 0; padding: 0; margin: 0; }
	.rga-filters-panel ul.woocommerce-widget-layered-nav-list { max-height: none; }

	/* Móvil: las 2 columnas las da la rejilla grid unificada (sección 6).
	   Solo ajustamos el botón para que quepa el texto en tarjetas estrechas. */
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart { padding-left: 8px; padding-right: 8px; font-size: 13px; }

	/* HOME: bandas más compactas (el hero full-bleed lleva sus propias reglas). */
	.rga-cta-band { padding: 24px 22px; }
	.rga-home-seo, .rga-home-sec { margin: 28px 0; }
	.rga-home-seo { padding: 22px; }

	/* FICHA: quitar aire lateral de la galería/resumen */
	.single-product div.product .woocommerce-product-gallery { padding: 10px; }
	.rga-downloads { flex-direction: column; }
	/* La galería NO debe ser sticky en móvil (solo tiene sentido en desktop con
	   2 columnas): en el teléfono se quedaba pegada arriba tapando el resumen. */
	.single-product .woocommerce-product-gallery,
	.single-product div.product .woocommerce-product-gallery {
		position: static !important; top: auto !important;
	}

	/* CATEGORÍA: hero más compacto en móvil (la imagen ocupaba demasiado y
	   empujaba los productos muy abajo). Se mantiene la descripción SEO. */
	.rga-cat-hero { padding: 16px; margin: 12px 0 18px; gap: 12px; }
	.rga-cat-hero h1 { font-size: 1.5rem; margin: 2px 0 8px; }
	.rga-cat-hero-media { max-height: 150px; }
	.rga-cat-hero-media img { max-height: 150px; }

	/* BARRA INFERIOR MÓVIL (Storefront): acento de marca en el carrito */
	.storefront-handheld-footer-bar ul li.cart > a::before,
	.storefront-handheld-footer-bar ul li > a { color: #fff; }
	.storefront-handheld-footer-bar ul li.cart .count {
		background: var(--brand); color: #fff; border-color: var(--brand);
	}
}

/* ---- Móvil pequeño (<= 480px) ---- */
@media (max-width: 480px) {
	.rga-topbar .rga-topbar a[href^="mailto:"] { display: none; }  /* email fuera: deja envío + teléfono */
	.rga-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
	.rga-hero-cta .button { flex: 1 1 100%; text-align: center; }
	.rga-sec-head { flex-direction: column; align-items: flex-start; gap: 4px; }
	.rga-sec-head h2 { font-size: 1.35rem; }
	.rga-cta-band h2 { font-size: 1.3rem; }
}

/* =========================================================
   11. HOME MODULAR  (portada tipo distribuidor)
   ========================================================= */
/* En la portada, el título de página nativo se oculta: manda el hero */
.home.page .entry-header,
.home .type-page > .entry-header { display: none; }
.home #content .entry-content { margin-top: 0; }

.rga-home-sec { margin: 40px 0; }
.rga-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 20px;
	border-bottom: 2px solid var(--line);
	padding-bottom: 10px;
}
.rga-sec-head h2 { margin: 0; font-size: 1.55rem; }
.rga-sec-link { font-weight: 600; font-size: 14px; white-space: nowrap; }

/* --- Banda de confianza --- */
.rga-trust {
	background: var(--navy);
	border-radius: var(--radius-lg);
	padding: 20px 26px;
	margin: 0 0 36px;
}
.rga-trust-inner {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}
.rga-trust-item { display: flex; align-items: center; gap: 12px; }
.rga-trust-ico {
	flex: 0 0 46px;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	color: #fff;
}
.rga-trust-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rga-trust-txt strong { color: #fff; font-size: 14px; }
.rga-trust-txt small { color: var(--navy-muted); font-size: 12px; }

/* --- Tarjetas de categoría --- */
.rga-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
/* Breakpoints AQUÍ (después de la base) para que ganen por orden de fuente.
   minmax(0,1fr) impide que el contenido ensanche columnas y desborde. */
@media (max-width: 1024px) { .rga-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rga-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }
.rga-cat-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--card-pad);
	text-decoration: none;
	color: var(--ink);
	transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.rga-cat-card:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--card-hover-border);
	transform: translateY(-3px);
	color: var(--ink);
}
.rga-cat-thumb {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--surface-alt);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 12px;
}
.rga-cat-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.rga-cat-card:hover .rga-cat-thumb img { transform: scale(1.05); }

/* Tarjetas de subcategoría dentro de la página de categoría */
/* Subcategorías a ANCHO COMPLETO bajo el hero: rectángulos HORIZONTALES
   (imagen + nombre + nº de referencias), compactos y elegantes, muchos por
   fila. Van fuera del layout de 2 columnas para que los productos suban. */
.rga-subcats { margin: 4px 0 30px; }
.rga-subcats-title {
	font-size: 1.15rem; margin: 0 0 16px; color: var(--ink);
	padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.rga-subcats .rga-subcat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
}
.rga-subcats .rga-subcat-grid .rga-cat-card {
	flex-direction: row; align-items: center; gap: 14px;
	padding: 10px 14px; min-width: 0;
}
.rga-subcats .rga-subcat-grid .rga-cat-thumb {
	flex: 0 0 58px; width: 58px; height: 58px; aspect-ratio: 1 / 1;
	margin: 0; border-radius: var(--radius);
}
.rga-subcats .rga-subcat-grid .rga-cat-text {
	display: flex; flex-direction: column; min-width: 0;
}
.rga-subcats .rga-subcat-grid .rga-cat-name {
	font-size: 14px; line-height: 1.3; margin: 0; font-weight: 600;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rga-subcats .rga-subcat-grid .rga-cat-count { font-size: 12px; margin-top: 3px; }
@media (max-width: 480px) {
	.rga-subcats .rga-subcat-grid { grid-template-columns: 1fr; }
}
.rga-cat-ph {
	font-size: 2.4rem; font-weight: 800; color: var(--brand);
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: var(--brand-tint);
}
.rga-cat-card, .rga-cat-card:hover,
.rga-cat-name, .rga-cat-count { text-decoration: none !important; }
.rga-cat-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.rga-cat-card:hover .rga-cat-name { color: var(--brand); }
.rga-cat-count { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
/* Nombre en rejilla VERTICAL (home + "Explora por tipo" en columnas): reserva
   2 líneas para que todas las tarjetas de la fila midan igual aunque el nombre
   sea de una sola línea. Se excluye la rejilla horizontal de subcategorías. */
.rga-cat-grid:not(.rga-subcat-grid) .rga-cat-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
}
/* La línea de recuento queda pegada al fondo → precios/etiquetas alineadas. */
.rga-cat-grid:not(.rga-subcat-grid) .rga-cat-count { margin-top: auto; padding-top: 4px; }

/* El grid de productos de la home reutiliza las tarjetas del catálogo */
.rga-home-products.woocommerce ul.products,
.rga-home-products ul.products { margin: 0; }

/* --- Banner "a medida" --- */
.rga-cta-band {
	background: var(--brand);
	border-radius: var(--radius-lg);
	padding: 30px 40px;
	margin: 40px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
}
.rga-cta-band .rga-cta-copy { flex: 1 1 420px; }
.rga-cta-band h2 { color: #fff; margin: 0 0 8px; font-size: 1.5rem; }
.rga-cta-band p { color: #ffe3e8; margin: 0; max-width: 60ch; }
.rga-cta-band .button {
	background: #fff; color: var(--brand) !important; border-color: #fff;
	flex: 0 0 auto;
}
.rga-cta-band .button:hover { background: var(--navy); color: #fff !important; border-color: var(--navy); }

/* --- SEO condensado --- */
.rga-home-seo {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px 34px;
	margin: 40px 0 10px;
}
.rga-home-seo h2 { margin: 0 0 12px; font-size: 1.4rem; }
.rga-home-seo p { color: var(--muted); line-height: 1.7; margin: 0 0 12px; max-width: 90ch; }
.rga-home-seo p:last-child { margin-bottom: 0; }
.rga-home-seo strong { color: var(--ink); }

@media (max-width: 900px) {
	.rga-trust-inner { grid-template-columns: repeat(3, 1fr); }
	.rga-cta-band { padding: 28px; }
}
@media (max-width: 600px) {
	.rga-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
	/* Ítem de confianza apilado y centrado en móvil: la etiqueta usa toda la
	   columna y deja de partirse raro ("Fabrica a medi… / y longitud"). */
	.rga-trust-item { flex-direction: column; align-items: center; text-align: center; gap: 7px; }
	.rga-trust-txt { align-items: center; }
	.rga-trust-txt strong { font-size: 13.5px; line-height: 1.3; }
	.rga-trust-txt small { font-size: 11.5px; line-height: 1.3; }
	.rga-sec-head { flex-direction: column; align-items: flex-start; gap: 4px; }
	.rga-hero-cta .button { flex: 1 1 100%; text-align: center; }
}

/* =========================================================
   14. AÑADIDOS: CTA teléfono (home) + ficha (cantidad / carrito / variaciones)
   ========================================================= */
/* Banda "a medida": botón + teléfono. Texto blanco sobre rojo (>=5.9:1). */
.rga-cta-actions { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; flex: 0 0 auto; }
.rga-cta-phone { color: #fff; text-decoration: none; font-size: 15px; white-space: nowrap; }
.rga-cta-phone strong { text-decoration: underline; color: #fff; }
.rga-cta-phone:hover { color: #ffe3e8; }
.rga-cta-phone:hover strong { color: #ffe3e8; }

/* Mini-guía "cómo elegir" dentro del bloque SEO de la home */
.rga-home-seo h3 { margin: 20px 0 8px; font-size: 1.15rem; color: var(--ink); }
.rga-home-seo a { font-weight: 600; }

/* Ficha: fila cantidad + añadir al carrito (como la competencia) */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
	display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; margin: 18px 0;
}
.single-product form.cart .quantity { margin: 0; }
.single-product form.cart .quantity input.qty {
	min-height: 48px; height: 100%; width: 78px;
	border: 2px solid var(--line); border-radius: var(--radius);
	text-align: center; font-weight: 600; font-size: 16px; color: var(--ink);
}
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px; min-height: 48px;
	font-size: 16px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
/* Ficha: selección de variaciones (productos variables) */
.single-product .variations { border: 0; margin: 0 0 14px; width: 100%; }
.single-product .variations td, .single-product .variations th { border: 0; padding: 6px 0; vertical-align: middle; }
.single-product .variations th.label { font-weight: 700; color: var(--ink); padding-right: 14px; }
.single-product .variations select {
	min-height: 46px; border: 2px solid var(--line); border-radius: var(--radius);
	padding: 0 12px; font-size: 15px; color: var(--ink); background: #fff;
}
.single-product .woocommerce-variation-price .price { font-size: 1.4rem; color: var(--brand); }
.single-product .reset_variations { color: var(--muted); font-size: 13px; }

@media (max-width: 480px) {
	.single-product form.cart .single_add_to_cart_button { flex: 1 1 100%; }
	.rga-cta-actions { width: 100%; }
	.rga-cta-phone { white-space: normal; }
}

/* =========================================================
   15. FICHA DE PRODUCTO TIPO COMPETENCIA (single product)
   ========================================================= */

/* Galería: recortar el track del slider. En este entorno flexslider no siempre
   añade la clase .flexslider (init incompleto), así que la regla overflow:hidden
   de WooCommerce no aplica y los slides se desbordan a lo ancho de la página.
   Forzamos el recorte en el propio contenedor (comportamiento estándar). */
.single-product .woocommerce-product-gallery { overflow: hidden; }
.single-product .woocommerce-product-gallery .flex-viewport { overflow: hidden; }
/* Sin slider: imagen destacada grande + rejilla de miniaturas (4 por fila),
   interactivas (rga.js: click cambia la principal). */
.single-product .woocommerce-product-gallery__wrapper {
	display: flex; flex-wrap: wrap; gap: 16px 12px; margin: 0; width: 100% !important; transform: none !important;
}
.single-product .woocommerce-product-gallery__image { margin: 0 !important; }
.single-product .woocommerce-product-gallery__image a { display: block; }
.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }

/* Imagen destacada: marco interior suave + cursor zoom (click = ampliar).
   Alto ACOTADO (algunas imágenes del cliente son enormes, p.ej. 121x1500). */
.single-product .woocommerce-product-gallery__image:first-child {
	flex: 0 0 100%;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
}
.single-product .woocommerce-product-gallery__image:first-child img {
	width: 100%; height: auto; max-height: 420px; object-fit: contain;
	margin: 0 auto; padding: 10px; box-sizing: border-box;
}

/* Miniaturas (incluida la sintética .rga-thumb-main): cuadradas, con hover y
   estado activo. Cursor pointer (son clicables para cambiar la principal). */
.single-product .woocommerce-product-gallery__image:not(:first-child),
.single-product .rga-thumb-main {
	flex: 0 0 calc(25% - 9px);
	aspect-ratio: 1 / 1;
	border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; background: #fff; cursor: pointer; padding: 4px;
	box-sizing: border-box;
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.single-product .woocommerce-product-gallery__image:not(:first-child) img,
.single-product .rga-thumb-main img {
	width: 100%; height: 100%; object-fit: contain;
}
.single-product .woocommerce-product-gallery__image:not(:first-child):hover,
.single-product .rga-thumb-main:hover {
	border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.single-product .rga-thumb-active {
	border: 2px solid var(--brand) !important;
	box-shadow: 0 0 0 3px var(--brand-tint) !important;
	transform: none !important;
}

/* Lupa de zoom: botón redondo limpio arriba a la derecha. */
.single-product .woocommerce-product-gallery__trigger {
	top: 12px; right: 12px; left: auto;
	width: 42px; height: 42px; margin: 0;
	background: #fff !important; border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,.14);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink); z-index: 5; font-size: 18px;
	transition: color .15s ease, transform .12s ease;
}
.single-product .woocommerce-product-gallery__trigger:hover { color: var(--brand); transform: scale(1.06); }

/* --- Layout 2 columnas: galería STICKY a la izquierda | summary (con las
   pestañas dentro) a la derecha; relacionados y "vistos recientemente" a ancho
   completo debajo. Storefront usa floats en div.product; lo pasamos a CSS grid.
   La galería, con align-self:start, se queda pegada (sticky) mientras la columna
   derecha es más alta, y se suelta al llegar a relacionados (fila siguiente). --- */
.single-product div.product {
	position: relative;
	overflow: visible !important; /* Storefront pone overflow:hidden aquí y rompe el position:sticky de la galería */
}
/* Wrapper creado por rga.js: SOLO galería + summary → el sticky se ancla a esta
   pareja y se suelta justo antes de relacionados (que van fuera, a ancho completo). */
.single-product .rga-product-cols {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 30px 50px;
	align-items: start;
	margin-top: 30px;
}
.single-product .rga-product-cols > .woocommerce-product-gallery {
	width: 100% !important; float: none !important; margin: 0 !important;
	/* top holgado: deja aire respecto a la cabecera y libra la barra sticky de
	   "Añadir al carrito" de Storefront cuando aparece al hacer scroll. */
	position: sticky !important; top: 90px; align-self: start;
}
.single-product .rga-product-cols > .summary {
	width: 100% !important; float: none !important; margin: 0 !important;
}
.single-product div.product > .onsale {
	position: absolute; top: 12px; left: 12px; right: auto; z-index: 3; margin: 0;
}
/* Relacionados / upsells / recientes: bloques a ancho completo bajo el wrapper,
   BIEN separados (Pedro: que tengan aire, no pegados). */
.single-product div.product > .up-sells,
.single-product div.product > .upsells,
.single-product div.product > .related,
.single-product div.product > .rga-recent {
	width: 100%; float: none; clear: both; margin-top: 56px;
}
.single-product div.product > .related,
.single-product div.product > .rga-recent {
	padding-top: 40px; border-top: 1px solid var(--line);
}
/* Títulos de esas secciones con aire y separador (coherentes) */
.single-product .related > h2,
.single-product .up-sells > h2,
.single-product .upsells > h2 {
	font-size: 1.4rem; margin: 0 0 24px; padding-bottom: 12px;
	border-bottom: 2px solid var(--line);
}
/* body y .site llevan overflow-y:auto (crean scroll-container y rompen el sticky
   de la galería). En la ficha los liberamos: no hay scroll horizontal aquí. */
body.single-product,
body.single-product .site.hfeed { overflow: visible !important; }

/* Paginación prev/next de producto de Storefront: asoma por los bordes de la
   pantalla (imágenes de producto que sangran a izq/der). La competencia no la
   tiene y ensucia la ficha → fuera. */
.storefront-product-pagination { display: none !important; }

/* "+Info" tras la referencia (ancla a la ficha técnica) */
.rga-sku-line .rga-info-link {
	font-size: 13px; font-weight: 600; color: var(--brand);
	text-decoration: none; margin-left: 8px; white-space: nowrap;
}
.rga-sku-line .rga-info-link:hover { text-decoration: underline; }

/* Descripción corta destacada (va antes del precio) */
.single-product .woocommerce-product-details__short-description {
	color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 4px 0 18px;
}
.single-product .woocommerce-product-details__short-description strong { color: var(--ink); }

/* Bloque de confianza: ayuda + envío (antes del precio) */
.rga-single-assurance {
	display: flex; flex-direction: column; gap: 8px;
	margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--line);
}
.rga-help-link {
	display: inline-flex; align-items: center; gap: 9px;
	color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none;
}
.rga-help-link:hover { color: var(--brand); }
.rga-help-ico {
	flex: 0 0 22px; width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--brand); color: #fff; border-radius: 50%;
	font-weight: 700; font-size: 13px; line-height: 1;
}
.rga-ship-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; margin: 0; }

/* Selector de fuerza a medida (CTA cableado) */
.rga-force {
	background: var(--surface-alt); border: 1px solid var(--line);
	border-radius: var(--radius-lg); padding: 16px 18px; margin: 4px 0 18px;
}
.rga-force-label { display: block; font-weight: 700; color: var(--ink); font-size: 14.5px; margin-bottom: 10px; }
.rga-force-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rga-force-input {
	flex: 1 1 120px; min-height: 48px; box-sizing: border-box;
	border: 2px solid var(--line); border-radius: var(--radius);
	padding: 0 14px; font-size: 16px; color: var(--ink); background: #fff; font-family: var(--font);
}
.rga-force-input:focus { outline: none; border-color: var(--brand); }
.rga-force-btn { flex: 0 0 auto; min-height: 48px; display: inline-flex; align-items: center; }
.rga-force-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; }

/* Aviso de impuestos bajo el precio */
.rga-tax-note { color: var(--muted); font-size: 12.5px; margin: -8px 0 14px; }

/* Botones Ficha técnica / CAD: rga.js los mueve DENTRO de la galería (columna
   sticky), justo bajo la imagen. */
.single-product .woocommerce-product-gallery .rga-downloads {
	margin: 16px 0 0; float: none; width: auto; clear: none;
}

/* Tabla de ficha técnica (dentro del acordeón) */
.rga-datasheet { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rga-datasheet th, .rga-datasheet td { text-align: left; padding: 11px 14px; font-size: 14.5px; vertical-align: top; border-bottom: 1px solid var(--line); }
.rga-datasheet tr:last-child th, .rga-datasheet tr:last-child td { border-bottom: 0; }
.rga-datasheet th { width: 42%; color: var(--ink); font-weight: 700; background: var(--surface-alt); }
.rga-datasheet td { color: var(--ink); }
.rga-datasheet-empty { color: var(--muted); font-size: 14px; }
.rga-datasheet-empty a { color: var(--brand); font-weight: 600; }

/* Has visto recientemente */
.rga-recent { margin: 44px 0 10px; }
.rga-recent > h2 {
	font-size: 1.4rem; margin: 0 0 18px; padding-bottom: 10px;
	border-bottom: 2px solid var(--line);
}
.rga-recent-grid .products { margin: 0; }

/* Aire dentro del summary: separar el acordeón del meta y dar respiro entre
   bloques (Pedro: que todo tenga espacio, no pegado). */
.single-product .summary .woocommerce-tabs { margin-top: 30px; }
.single-product .summary .product_meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.woocommerce-tabs .rga-acc-header { margin-top: 12px; }
.single-product .summary > .price { margin-bottom: 4px; }

@media (max-width: 768px) {
	.rga-force-row { flex-direction: column; }
	/* En columna, flex-basis:120px pasaba a ALTO -> input gigante. Se resetea. */
	.rga-force-input { flex: 0 0 auto; width: 100%; height: 48px; }
	.rga-force-btn { width: 100%; justify-content: center; }
	/* Ficha en móvil: una sola columna, galería sin sticky (se apila) */
	.single-product .rga-product-cols { display: block; }
	.single-product .rga-product-cols > .woocommerce-product-gallery { position: static; margin-bottom: 20px !important; }
	.single-product .woocommerce-product-gallery .rga-downloads { float: none; width: auto; clear: both; }
}

/* =========================================================
   Accesibilidad (F3): foco visible por teclado + reduced-motion
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.rga-scqty-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 3px solid var(--brand) !important;
	outline-offset: 2px;
	border-radius: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

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

/* Contenedor con scroll horizontal para tablas anchas (ver initResponsiveTables en rga.js) */
.rga-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rga-table-scroll > table { margin: 0; }

/* Notices de WooCommerce con la paleta de marca (F3.6; por defecto Storefront gris) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	font-family: var(--font);
	border-radius: var(--radius);
	color: var(--ink);
}
.woocommerce-message { border-top: 3px solid var(--ok); background: #eef8f1; }
.woocommerce-message::before { color: var(--ok); }
.woocommerce-info { border-top: 3px solid var(--brand); background: var(--brand-tint); }
.woocommerce-info::before { color: var(--brand); }
.woocommerce-error { border-top: 3px solid #b3261e; background: #fdecea; }
.woocommerce-error::before { color: #b3261e; }
.woocommerce-message a.button, .woocommerce-info a.button { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }

/* Footer: cerrar el hueco antes del colofón y quitar iconos sueltos de los
   enlaces de páginas legales (F3.10) */
.site-footer .footer-widgets:empty, .site-footer .col-full > *:empty { display: none !important; }
.site-footer .site-info { margin-top: 0; padding: 18px 0 0; }
.site-footer nav .menu li img, .site-footer nav .menu li svg,
.site-footer .page_item a img, .site-footer li.page_item img, .site-footer li.page_item svg { display: none !important; }
.site-footer li.page_item { list-style: none; background: none; }
/* Los iconos que se ven en el menú legal NO son img/svg sino un ::before de
   Font Awesome (\f15c, "documento") que un plugin inyecta en TODO item de menú
   tipo página. Se anulan los pseudo-elementos SOLO en los menús legales del
   footer (el menú de Mi Cuenta sí los usa a propósito). NO se toca el resto del
   footer para no borrar los iconos ☎/✉ de la columna de atención al cliente. */
.site-footer .menu li::before,          .site-footer .menu li::after,
.site-footer .menu li a::before,        .site-footer .menu li a::after,
.site-footer li.menu-item::before,      .site-footer li.menu-item::after,
.site-footer li.menu-item a::before,    .site-footer li.menu-item a::after,
.site-footer li.page_item::before,      .site-footer li.page_item::after,
.site-footer li.page_item a::before,    .site-footer li.page_item a::after,
.site-footer .rga-legal-menu li::before,.site-footer .rga-legal-menu li a::before {
	content: none !important; display: none !important;
}

/* Enlaces legales reubicados en el colofón: el widget original (única cosa en
   .footer-widgets) se oculta y se colocan junto al copyright, en una barra. */
.site-footer .footer-widgets { display: none !important; }
.site-footer .site-info.rga-colophon {
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 8px 26px;
}
.rga-colophon .rga-legal-menu__list {
	display: flex; flex-wrap: wrap; gap: 6px 22px;
	list-style: none; margin: 0; padding: 0;
}
.rga-colophon .rga-legal-menu__list li { margin: 0; padding: 0; background: none; }
.rga-colophon .rga-legal-menu a { color: var(--navy-muted); font-size: 13px; text-decoration: none; }
.rga-colophon .rga-legal-menu a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 600px) {
	.site-footer .site-info.rga-colophon { justify-content: center; text-align: center; }
	.rga-colophon .rga-legal-menu__list { justify-content: center; }
}

/* Blog en modo archivo/listado: título sobrio (no rojo gigante) y contenido
   recortado como extracto de ~4 líneas (F3.8) */
.archive .hentry .entry-title,
.blog .hentry .entry-title,
.search .hentry .entry-title { font-size: 24px !important; line-height: 1.25; margin: 4px 0 10px; }
.archive .hentry .entry-title a,
.blog .hentry .entry-title a { color: var(--ink); }
.archive .hentry .entry-title a:hover,
.blog .hentry .entry-title a:hover { color: var(--brand); }
.archive .hentry .entry-content,
.blog .hentry .entry-content {
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* Botones del panel lateral sin capitalización forzada (F1.5): el texto ya está
   bien escrito ("Seguir comprando", "Volver a la tienda"), sobra el capitalize */
.xoo-wsc-ft-btn-continue, .xoo-wsc-ft-btn-checkout,
.xoo-wsc-empty a, .xoo-wsc-empty .button, .xoo-wsc-empty-btn { text-transform: none !important; }

/* ============================================================
   PÁGINA DE CONTACTO + FORMULARIO CF7  (F3.9 / F4.1)
   Layout 2 columnas: formulario en tarjeta + panel de contacto directo.
   ============================================================ */
.rga-contact {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 32px;
	align-items: start;
	margin: 4px 0;
}

/* --- tarjeta del formulario --- */
.rga-contact__form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px 28px 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.04);
}
.rga-contact__h { font-size: 22px; line-height: 1.2; margin: 0 0 6px; color: var(--ink); }
.rga-contact__lead { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 22px; }

/* --- rejilla de campos --- */
.rga-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.rga-f { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.rga-f--full { grid-column: 1 / -1; }
.rga-lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
.rga-req { color: var(--brand); font-weight: 700; }

.rga-contact .wpcf7-form-control-wrap { display: block; }
.rga-contact input[type=text],
.rga-contact input[type=email],
.rga-contact input[type=tel],
.rga-contact textarea {
	width: 100%;
	font-size: 15px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0 14px;
	height: 48px;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
	box-sizing: border-box;
}
.rga-contact textarea { height: auto; min-height: 132px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.rga-contact input::placeholder,
.rga-contact textarea::placeholder { color: #767676; opacity: 1; }
.rga-contact input:focus,
.rga-contact textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(200,16,46,.15);
}

/* --- aceptación de política --- */
.rga-accept { margin: 18px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.rga-accept .wpcf7-list-item { margin: 0; display: flex; align-items: flex-start; gap: 9px; }
.rga-accept input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); flex: 0 0 auto; }
.rga-accept a { color: var(--brand); font-weight: 600; text-decoration: underline; }

/* --- botón enviar --- */
.rga-submit-wrap { margin: 20px 0 0; }
.rga-contact input.wpcf7-submit {
	background: var(--brand);
	color: #fff;
	font-size: 16px; font-weight: 700;
	border: 0; border-radius: var(--radius);
	height: 52px; padding: 0 34px; min-width: 210px;
	cursor: pointer;
	transition: background .15s, transform .05s;
	letter-spacing: .2px;
}
.rga-contact input.wpcf7-submit:hover { background: var(--brand-dark); }
.rga-contact input.wpcf7-submit:active { transform: translateY(1px); }
.rga-contact input.wpcf7-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.rga-contact .wpcf7-spinner { margin-left: 12px; }

/* --- validación y respuesta --- */
.rga-contact .wpcf7-not-valid-tip { color: var(--brand-dark); font-size: 13px; font-weight: 600; margin-top: 5px; display: block; }
.rga-contact input.wpcf7-not-valid,
.rga-contact textarea.wpcf7-not-valid { border-color: var(--brand); background: var(--brand-tint); }
.rga-contact .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 13px 16px !important;
	border-radius: var(--radius);
	font-size: 14px; line-height: 1.5;
	border-width: 1px !important;
}
.rga-contact form.invalid .wpcf7-response-output,
.rga-contact form.unaccepted .wpcf7-response-output,
.rga-contact form.spam .wpcf7-response-output {
	border-color: #e0a6af !important; background: var(--brand-tint) !important; color: var(--brand-dark) !important;
}
.rga-contact form.sent .wpcf7-response-output {
	border-color: #a9d5bd !important; background: #e7f4ee !important; color: #0f5132 !important;
}

/* --- panel lateral de contacto directo --- */
.rga-contact__side {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px 22px 24px;
}
.rga-contact__sh { font-size: 16px; margin: 0 0 14px; color: var(--ink); }
.rga-contact__item {
	display: flex; align-items: center; gap: 13px;
	padding: 11px 0; color: var(--ink); text-decoration: none;
	border-top: 1px solid var(--line);
}
.rga-contact__item:first-of-type { border-top: 0; padding-top: 2px; }
.rga-contact__ic {
	flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface); border: 1px solid var(--line); color: var(--brand);
}
.rga-contact__ic svg { display: block; }
.rga-contact__tx { font-size: 14px; line-height: 1.35; color: var(--muted); display: flex; flex-direction: column; }
.rga-contact__tx b { font-size: 15px; color: var(--ink); font-weight: 600; transition: color .15s; }
.rga-contact__item:hover .rga-contact__tx b { color: var(--brand); }

.rga-contact__photos {
	margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line);
	display: flex; gap: 13px; align-items: flex-start;
}
.rga-contact__photos .rga-contact__ic { margin-top: 2px; }
.rga-contact__photos b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.rga-contact__photos p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* --- responsive --- */
@media (max-width: 900px) {
	.rga-contact { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
	.rga-form-grid { grid-template-columns: 1fr; }
	.rga-contact__form { padding: 22px 18px; }
	.rga-contact input.wpcf7-submit { width: 100%; }
}

/* =========================================================
   16. BUSCADOR — FiboSearch (AJAX predictivo) con el diseño de píldora del tema
   (clases .dgwt-wcas-*; se acotan a .site-header .site-search para no chocar con
   las reglas globales de input/.button). Refinado contra el markup real en vivo.
   ========================================================= */
.site-header .site-search .dgwt-wcas-search-wrapp {
	width: 100%; max-width: none; float: none; margin: 0;
	/* FiboSearch usa un grid de 2 columnas (280px + otra vacía) con un solo hijo
	   → el form se quedaba en 280px. En bloque, el form ocupa todo el ancho. */
	display: block !important;
}
/* El form/sf-wrapp de FiboSearch NO crecían con el wrapper (se quedaban ~280px)
   → el buscador salía "achicado" a anchos medios. Se fuerzan a ancho completo.
   Y `padding:0` en el sf-wrapp: tenía 10px que metían el input hacia dentro
   mientras el botón lupa se anclaba al borde del wrapper → la bolita sobresalía
   por la derecha. Sin ese padding, el input llena y la lupa queda DENTRO. */
.site-header .site-search .dgwt-wcas-search-form,
.site-header .site-search .dgwt-wcas-sf-wrapp { position: relative; margin: 0; width: 100% !important; max-width: none !important; }
.site-header .site-search .dgwt-wcas-sf-wrapp { padding: 0 !important; }
.site-header .site-search input.dgwt-wcas-search-input[type="search"] {
	width: 100% !important;
	height: auto !important;
	min-height: 48px;
	border: 2px solid var(--line) !important;
	border-radius: 999px !important;
	padding: .72em 3.6em .72em 1.4em !important;
	background: var(--surface-alt) !important;
	font-family: var(--font) !important;
	font-size: 15px !important;
	color: var(--ink) !important;
	box-shadow: none !important;
	line-height: 1.3;
}
.site-header .site-search input.dgwt-wcas-search-input::placeholder { color: var(--muted) !important; opacity: 1; }
.site-header .site-search input.dgwt-wcas-search-input:focus {
	border-color: var(--brand) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px var(--brand-tint) !important;
	outline: none !important;
}
/* Botón/icono de lupa: círculo rojo a la derecha (como el buscador anterior) */
/* Botón lupa: círculo rojo bien centrado verticalmente (top:50% + translateY,
   robusto ante la altura real del form de FiboSearch, que dejaba el botón
   pequeño/descentrado). `left:auto` porque FiboSearch fija `left` (estiraba). */
.site-header .site-search .dgwt-wcas-search-submit {
	position: absolute !important;
	top: 50% !important; right: 5px !important; bottom: auto !important; left: auto !important;
	transform: translateY(-50%) !important;
	width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 40px !important;
	padding: 0 !important; margin: 0 !important;
	background: var(--brand) !important;
	border: 0 !important; border-radius: 999px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	box-shadow: none !important; cursor: pointer !important;
	transition: background .15s ease;
}
.site-header .site-search .dgwt-wcas-search-submit:hover { background: var(--brand-dark) !important; }
.site-header .site-search .dgwt-wcas-search-submit:active { transform: translateY(-50%) scale(.94) !important; }
/* Icono lupa más grande y nítido, blanco, sin capturar el click aparte del botón */
.site-header .site-search .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier,
.site-header .site-search .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier path {
	fill: #fff !important;   /* FiboSearch pinta el path en #111 (oscuro sobre rojo) */
}
.site-header .site-search .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier {
	width: 21px !important; height: 21px !important; pointer-events: none !important;
}
/* Hueco a la derecha del input para el botón (44 + margen) */
.site-header .site-search input.dgwt-wcas-search-input[type="search"] { padding-right: 60px !important; }
.site-header .site-search .dgwt-wcas-preloader { right: 58px !important; }
/* La "x" para limpiar, si aparece, dentro de la píldora sin tapar la lupa */
.site-header .site-search .dgwt-wcas-close { right: 56px !important; }

/* Desplegable de sugerencias con la paleta de marca */
.dgwt-wcas-suggestions-wrapp {
	border: 1px solid var(--line) !important;
	border-top: 3px solid var(--brand) !important;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
	box-shadow: var(--shadow-md) !important;
	font-family: var(--font) !important;
}
.dgwt-wcas-suggestion { color: var(--ink) !important; }
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-focused { background: var(--brand-tint) !important; }
.dgwt-wcas-suggestion .dgwt-wcas-st-title,
.dgwt-wcas-suggestion .dgwt-wcas-st .dgwt-wcas-st-title { color: var(--ink) !important; font-weight: 600; }
.dgwt-wcas-suggestion .dgwt-wcas-sp,
.dgwt-wcas-suggestion .dgwt-wcas-st-price { color: var(--brand) !important; font-weight: 700; }
.dgwt-wcas-sug-hist-more a,
.dgwt-wcas-details-more,
.dgwt-wcas-suggestion-more { color: var(--brand) !important; }

/* =========================================================
   17. BLOG — listado en tarjetas + artículo (single) legible
   ========================================================= */
/* Rejilla de tarjetas SOLO en archivos de entradas (blog, categorías de post,
   etiquetas, autor). Los archivos de product_cat usan body.tax-product_cat (no
   .category) → no colisionan. Cabecera y paginación ocupan toda la fila. */
.blog #main.site-main,
.category #main.site-main,
.tag #main.site-main,
.author #main.site-main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 22px;
	align-items: start;
}
.blog #main.site-main > *:not(.rga-post-card),
.category #main.site-main > *:not(.rga-post-card),
.tag #main.site-main > *:not(.rga-post-card),
.author #main.site-main > *:not(.rga-post-card) { grid-column: 1 / -1; }

/* Cabecera del archivo del blog (título + descripción) coherente con los heros */
.blog .page-header,
.category .page-header,
.tag .page-header,
.author .page-header {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px 30px;
	margin: 12px 0 30px;
}
.blog .page-header .page-title,
.category .page-header .page-title,
.tag .page-header .page-title,
.author .page-header .page-title { margin: 0 0 8px; font-size: 1.9rem; color: var(--ink); }
.blog .page-header .taxonomy-description,
.category .page-header .taxonomy-description,
.blog .page-header p,
.category .page-header p { color: var(--muted); margin: 0; max-width: 80ch; line-height: 1.6; }

/* Tarjeta de artículo */
.rga-post-card {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
	margin: 0;
}
.rga-post-card:hover { box-shadow: var(--shadow-md); border-color: var(--card-hover-border); transform: translateY(-3px); }
.rga-post-card__media {
	display: block; aspect-ratio: 16 / 9; background: var(--surface-alt);
	overflow: hidden; border-bottom: 1px solid var(--line);
}
.rga-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.rga-post-card:hover .rga-post-card__media img { transform: scale(1.05); }
.rga-post-card__media .rga-post-ph {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: var(--brand-tint); color: var(--brand);
}
.rga-post-card__media .rga-post-ph svg { width: 46px; height: 46px; }
.rga-post-card__body { display: flex; flex-direction: column; padding: 16px 18px 18px; flex: 1 1 auto; }
.rga-post-card__cat {
	align-self: flex-start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 3px 10px;
	text-decoration: none; margin: 0 0 10px;
}
.rga-post-card__cat:hover { background: var(--brand); color: #fff; }
.rga-post-card__title { font-size: 18px; line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
.rga-post-card__title a { color: var(--ink); text-decoration: none; }
.rga-post-card__title a:hover { color: var(--brand); }
.rga-post-card__meta { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
.rga-post-card__excerpt { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.rga-post-card__more { margin-top: auto; align-self: flex-start; color: var(--brand); font-weight: 600; font-size: 14px; }
.rga-post-card:hover .rga-post-card__more { color: var(--brand-dark); }

@media (max-width: 1024px) {
	.blog #main.site-main, .category #main.site-main, .tag #main.site-main, .author #main.site-main { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.blog #main.site-main, .category #main.site-main, .tag #main.site-main, .author #main.site-main { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Artículo (single post): columna de lectura acotada + tipografía --- */
.single-post .hentry,
.single-post .entry-header,
.single-post .post-navigation,
.single-post #comments,
.single-post .comments-area {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	float: none;
}
.single-post .entry-header { margin-bottom: 14px; padding: 0; border: 0; text-align: left; }
.single-post .entry-title { font-size: clamp(26px, 4vw, 34px); line-height: 1.2; margin: 6px 0 12px; color: var(--ink); }
/* Meta de cabecera (fecha / autor / comentarios) sobria en una fila */
.single-post .entry-header .posted-on,
.single-post .entry-header .post-author,
.single-post .entry-header .post-comments,
.single-post .entry-meta {
	color: var(--muted); font-size: 13.5px;
}
.single-post .entry-header .posted-on a,
.single-post .entry-header .post-author a { color: var(--muted); text-decoration: none; }
.single-post .entry-header .posted-on a:hover,
.single-post .entry-header .post-author a:hover { color: var(--brand); }
/* Imagen destacada del artículo */
.single-post .post-thumbnail,
.single-post .entry-content > figure.wp-block-image:first-child,
.single-post .entry-content img.wp-post-image {
	border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 22px;
}
.single-post .post-thumbnail img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
/* Cuerpo del artículo */
.single-post .entry-content { color: var(--ink); font-size: 16.5px; line-height: 1.75; }
.single-post .entry-content p { margin: 0 0 1.1em; }
.single-post .entry-content h2 { font-size: 1.55rem; margin: 1.6em 0 .5em; }
.single-post .entry-content h3 { font-size: 1.25rem; margin: 1.4em 0 .4em; }
.single-post .entry-content ul,
.single-post .entry-content ol { margin: 0 0 1.1em 1.3em; }
.single-post .entry-content li { margin: 0 0 .4em; }
.single-post .entry-content a { color: var(--brand); text-decoration: underline; }
.single-post .entry-content a:hover { color: var(--brand-dark); }
.single-post .entry-content img { height: auto; border-radius: var(--radius); }
.single-post .entry-content blockquote {
	border-left: 4px solid var(--brand); background: var(--surface-alt);
	margin: 1.4em 0; padding: 14px 20px; border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink);
}
.single-post .entry-content table { width: 100%; border-collapse: collapse; }
.single-post .entry-content th, .single-post .entry-content td { border: 1px solid var(--line); padding: 10px 12px; }
.single-post .entry-content th { background: var(--surface-alt); }

/* Relacionados (inyectados por the_content; el "Volver al blog" se quitó: ya hay breadcrumb) */
.rga-post-related { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.rga-post-related > h2 { font-size: 1.35rem; margin: 0 0 18px; }
.rga-post-related .rga-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 680px) { .rga-post-related .rga-post-grid { grid-template-columns: 1fr; } }

/* Área de comentarios coherente con la marca */
.single-post .comments-area { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.single-post .comments-area .comment-reply-title,
.single-post .comments-area .comments-title { font-size: 1.3rem; margin: 0 0 16px; }
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea { width: 100%; }

/* =========================================================
   18. MI CUENTA (WooCommerce) — rediseño con tarjetas
   ========================================================= */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 34px;
	align-items: start;
}
/* Anular los floats por defecto de WooCommerce */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important; width: auto !important; margin: 0 !important;
}
/* Navegación como tarjeta/menú */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 12px; box-shadow: var(--shadow-sm); position: sticky; top: 90px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
/* !important + `ul` en el selector: otra hoja (iconos Font Awesome del menú)
   fijaba `padding:13px 0; display:block` y `::before{float:right}` con más
   especificidad, dejando el icono pegado al borde derecho. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex !important; align-items: center; gap: 12px;
	padding: 14px 16px !important; min-height: 52px; box-sizing: border-box;
	color: var(--ink); text-decoration: none !important; font-weight: 600; font-size: 15px;
	border-radius: var(--radius); border-left: 3px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
/* Icono (Font Awesome vía ::before) a la IZQUIERDA, antes del texto, con aire. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
	float: none !important; order: -1; flex: 0 0 22px;
	width: 22px !important; margin: 0 !important; text-align: center;
	color: inherit; font-size: 16px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--brand-tint); color: var(--brand-dark); border-left-color: var(--brand);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--brand-tint); color: var(--brand-dark); border-left-color: var(--brand);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }

/* Contenido como tarjeta */
.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 30px 34px; box-shadow: var(--shadow-sm); min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.7; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--brand); }

/* Accesos rápidos del escritorio (inyectados en functions.php §17) */
.rga-account-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 4px; }
.rga-account-card {
	display: flex; flex-direction: column; gap: 5px;
	background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 18px 20px; color: var(--ink);
	transition: border-color .15s, box-shadow .15s, transform .12s;
}
/* Sin subrayado en las tarjetas (el título salía subrayado por la regla de links) */
.rga-account-card, .rga-account-card:hover,
.rga-account-card .rga-account-card__t,
.rga-account-card .rga-account-card__d { text-decoration: none !important; }
.rga-account-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--ink); }
.rga-account-card__t { font-weight: 700; font-size: 15px; }
.rga-account-card__d { color: var(--muted); font-size: 13px; }

/* Tablas de pedidos/direcciones/descargas → estilo de marca + scroll móvil */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: 1px solid var(--line); border-radius: var(--radius); border-collapse: collapse; width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th { background: var(--surface-alt); color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { border-bottom: 1px solid var(--line); padding: 12px 14px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px;
}
.woocommerce-account .addresses .woocommerce-Address { margin-bottom: 18px; }

/* Formularios de login / registro / edición */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account form.edit-account,
.woocommerce-account form.woocommerce-EditAccountForm {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account form.edit-account .button { min-height: 48px; }
/* Cuando NO está logueado, el login ocupa el ancho (no hay menú de cuenta) */
.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

@media (max-width: 820px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 18px; }
	.woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
	.rga-account-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   18b. MI CUENTA — pedidos (tabla + vista de un pedido)
   ========================================================= */
/* --- Badge de estado (pill). En la tabla lo envuelve rga.js en un <span>;
       en la vista de pedido es el <mark class="order-status"> nativo. El color
       por estado se resuelve por la clase de la fila (--status-x) o del body
       (rga-ostatus-x, puesta en functions.php). Colores ≥4.5:1 sobre claro. */
.woocommerce-MyAccount-content mark.order-status,
.rga-ostatus {
	display: inline-block; padding: 3px 13px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700; line-height: 1.55; letter-spacing: .2px;
	background: var(--surface-alt); color: var(--ink);
	border: 1px solid var(--line); vertical-align: middle;
}
/* pendiente / pending */
.rga-ostatus--pending,          .rga-ostatus-pending  mark.order-status { background:#fff4e0; color:#8a5500; border-color:#f2cd8a; }
/* en espera / on-hold */
.rga-ostatus--on-hold,          .rga-ostatus-on-hold  mark.order-status { background:#fdeede; color:#8a4b00; border-color:#f0c48a; }
/* procesando / processing */
.rga-ostatus--processing,       .rga-ostatus-processing mark.order-status { background:#e6f0fb; color:#1b4f8f; border-color:#b8d3ef; }
/* completado / completed */
.rga-ostatus--completed,        .rga-ostatus-completed mark.order-status { background:#e6f5ec; color:#12633a; border-color:#b6ddc5; }
/* cancelado / cancelled */
.rga-ostatus--cancelled,        .rga-ostatus-cancelled mark.order-status { background:#eef0f2; color:#55606b; border-color:#d3d9de; }
/* reembolsado / refunded */
.rga-ostatus--refunded,         .rga-ostatus-refunded mark.order-status { background:#efeaf7; color:#58398a; border-color:#d3c6ea; }
/* fallido / failed */
.rga-ostatus--failed,           .rga-ostatus-failed   mark.order-status { background:#fdeaea; color:#a62019; border-color:#f3c2bf; }

/* --- Títulos de sección más sobrios (los h2 nativos salen enormes: 32px).
       Storefront los pisa con más especificidad → prefijo + !important, pero
       se excluyen los títulos de las tarjetas de dirección (van a 1rem). --- */
.woocommerce-MyAccount-content h2:not(.woocommerce-column__title) {
	font-size: 1.3rem !important; font-weight: 700; line-height: 1.3;
	margin: 30px 0 14px; color: var(--ink);
}
.woocommerce-MyAccount-content > h2:first-of-type { margin-top: 8px; }
.woocommerce-MyAccount-content > p:first-of-type { color: var(--ink); line-height: 1.7; }

/* --- Actualizaciones del pedido: notas como tarjeta con acento --- */
ol.woocommerce-OrderUpdates.notes { list-style: none; margin: 0 0 6px; padding: 0; }
ol.woocommerce-OrderUpdates .note {
	background: var(--surface-alt); border: 1px solid var(--line);
	border-left: 3px solid var(--brand); border-radius: var(--radius);
	padding: 14px 18px; margin: 0 0 12px;
}
ol.woocommerce-OrderUpdates .note p { margin: 0; }
ol.woocommerce-OrderUpdates .note .woocommerce-OrderUpdate-meta,
ol.woocommerce-OrderUpdates .note-meta {
	color: var(--muted); font-size: 12.5px; display: block; margin: 6px 0 0;
}

/* --- Direcciones (facturación / envío) como tarjetas en rejilla --- */
.woocommerce-customer-details .col2-set.addresses {
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px;
}
.woocommerce-customer-details .woocommerce-column {
	float: none !important; width: auto !important; margin: 0 !important;
	background: var(--surface-alt); border: 1px solid var(--line);
	border-radius: var(--radius-lg); padding: 20px 22px;
}
.woocommerce-customer-details .woocommerce-column__title {
	font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: var(--ink);
}
.woocommerce-customer-details address {
	font-style: normal; line-height: 1.7; color: var(--ink); border: 0; padding: 0;
}
.woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-customer-details address .woocommerce-customer-details--email {
	margin: 8px 0 0; color: var(--muted); font-size: 13px;
}

/* --- Jerarquía de botones de acción (Pagar / Ver / Cancelar) --- */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-content td.actions .button,
.woocommerce-MyAccount-content .order-again .button { min-height: 40px; }
.woocommerce-MyAccount-content .button + .button { margin-left: 8px; }
/* Ver = contorno; Cancelar = discreto (para no competir con Pagar) */
.woocommerce-MyAccount-content a.button.view {
	background: #fff !important; color: var(--brand) !important;
	border: 1px solid var(--brand) !important;
}
.woocommerce-MyAccount-content a.button.view:hover { background: var(--brand-tint) !important; }
.woocommerce-MyAccount-content a.button.cancel {
	background: transparent !important; color: var(--muted) !important;
	border: 1px solid var(--line) !important;
}
.woocommerce-MyAccount-content a.button.cancel:hover {
	color: #b3261e !important; border-color: #b3261e !important; background: #fff !important;
}
/* La celda de acciones respira y se alinea a la derecha en desktop */
.woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }

@media (max-width: 640px) {
	.woocommerce-customer-details .col2-set.addresses { grid-template-columns: 1fr; }
	.woocommerce-orders-table__cell-order-actions { white-space: normal; }
	.woocommerce-MyAccount-content .button + .button { margin-top: 6px; }
}

/* =========================================================
   19. FICHA — descripción larga incrustada (sin pestañas)
   ========================================================= */
/* Va DENTRO del summary (columna derecha): separador arriba + aire, sin
   romper a ancho completo. La galería izquierda sigue sticky. */
.single-product .summary .rga-product-description {
	clear: both; width: 100%;
	margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
	color: var(--ink); line-height: 1.75;
}
.rga-product-description > h2 { font-size: 1.35rem; margin: 0 0 16px; }
.rga-product-description p { margin: 0 0 1.05em; }
.rga-product-description h2:not(:first-child) { font-size: 1.3rem; margin: 1.4em 0 .5em; }
.rga-product-description h3 { font-size: 1.15rem; margin: 1.2em 0 .4em; }
.rga-product-description ul, .rga-product-description ol { margin: 0 0 1.05em 1.3em; }
.rga-product-description li { margin: 0 0 .4em; }
.rga-product-description img { max-width: 100%; height: auto; border-radius: var(--radius); }
.rga-product-description a { color: var(--brand); text-decoration: underline; }
.rga-product-description table { width: 100%; border-collapse: collapse; }
.rga-product-description th, .rga-product-description td { border: 1px solid var(--line); padding: 10px 12px; }
.rga-product-description th { background: var(--surface-alt); }

/* =========================================================
   20. CHECKOUT — quitar la barra de pasos (Fluid Checkout en 1 página)
   ========================================================= */
.fc-progress-bar { display: none !important; }

/* =========================================================
   21. PÁGINA 404 (tienda) — plantilla propia 404.php
   ========================================================= */
.rga-404 { padding: 26px 0 34px; }
.rga-404-hero {
	text-align: center; max-width: 640px; margin: 0 auto;
	padding: 14px 0 6px;
}
.rga-404-code {
	font-size: clamp(72px, 15vw, 128px); font-weight: 800; line-height: .9;
	color: var(--brand); letter-spacing: -3px; margin: 0 0 4px;
}
.rga-404-title {
	font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 800; line-height: 1.2;
	color: var(--ink); margin: 0 0 12px;
}
.rga-404-sub {
	color: var(--muted); font-size: 1.02rem; line-height: 1.65;
	max-width: 540px; margin: 0 auto 24px;
}
.rga-404-search { max-width: 560px; margin: 0 auto 22px; }
.rga-404-search .dgwt-wcas-search-wrapp { width: 100%; max-width: 100%; }
.rga-404-search form { margin: 0; }
.rga-404-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.rga-404-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 0 22px; border-radius: var(--radius);
	font-weight: 700; font-size: 15px; text-decoration: none;
	border: 1px solid transparent; cursor: pointer;
	background: var(--brand); color: #fff;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rga-404-btn:hover { background: var(--brand-dark); color: #fff; }
.rga-404-btn--ghost { background: #fff; color: var(--brand); border-color: var(--brand); }
.rga-404-btn--ghost:hover { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand-dark); }
/* La sección de categorías reutilizada no necesita su enlace "Ver todo" repetido
   aquí arriba: se deja, pero con un poco más de aire respecto al hero. */
.rga-404 .rga-home-sec { margin-top: 26px; }
@media (max-width: 480px) {
	.rga-404-actions .rga-404-btn { flex: 1 1 100%; }
}