/* MRP Gaming · tienda de ordenadores (oleada 8): cabecera, accesos por uso, filtros, rejilla, vacío,
   paginación, migas de pan, contacto y páginas legales. Solo variables de tokens.css. */

/* Migas de pan (tienda, ficha y páginas legales): sin colores por defecto del navegador */
.mrp-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 var(--mrp-sp-4); font-size: var(--mrp-fs-sm); color: var(--mrp-text-muted); }
.mrp-migas a { color: var(--mrp-text-muted); text-decoration: none; }
.mrp-migas a:hover { color: var(--mrp-link); text-decoration: underline; }
.mrp-migas__sep { opacity: .6; }
.mrp-wc .woocommerce-breadcrumb.mrp-migas { margin-bottom: var(--mrp-sp-5); }

/* Cabecera de la tienda */
.mrp-tienda-hero { padding: var(--mrp-sp-6) 0 var(--mrp-sp-6); }
.mrp-tienda-hero h1 { margin: 0 0 var(--mrp-sp-2); font-size: var(--mrp-fs-3xl); }
.mrp-tienda-hero .mrp-lead { max-width: 62ch; color: var(--mrp-text-muted); }
@media (min-width: 960px) { .mrp-tienda-hero { padding: var(--mrp-sp-7) 0; } }

/* Accesos por uso (chips, fijos bajo la cabecera) */
.mrp-chips-wrap { position: sticky; top: var(--mrp-header-h); z-index: 20; background: color-mix(in srgb, var(--mrp-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mrp-border); }
.admin-bar .mrp-chips-wrap { top: calc(var(--mrp-header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .mrp-chips-wrap { top: calc(var(--mrp-header-h) + 46px); } }
/* Por debajo de 600 px la barra de administración no es fija: cabecera y chips pegados arriba */
@media (max-width: 600px) { .admin-bar .mrp-header { top: 0; } .admin-bar .mrp-chips-wrap { top: var(--mrp-header-h); } }
.mrp-chips { list-style: none; display: flex; gap: var(--mrp-sp-2); margin: 0 auto; padding-top: var(--mrp-sp-3); padding-bottom: var(--mrp-sp-3); overflow-x: auto; scrollbar-width: none; }
.mrp-chips::-webkit-scrollbar { display: none; }
.mrp-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--mrp-radius-pill); border: 1px solid var(--mrp-border); background: var(--mrp-surface); color: var(--mrp-text); font-size: var(--mrp-fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mrp-chip:hover { border-color: var(--mrp-accent); }
.mrp-chip.is-active { background: var(--mrp-accent); border-color: var(--mrp-accent); color: var(--mrp-ink-on-green); }
.mrp-chip--cta { border-color: var(--mrp-accent); color: var(--mrp-link); }

/* Filtros */
.mrp-tienda { padding-top: var(--mrp-sp-5); }
.mrp-tienda__editor { margin: 0 0 var(--mrp-sp-4); font-size: var(--mrp-fs-sm); }
.mrp-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mrp-sp-3); align-items: end; padding: var(--mrp-sp-4); border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius); background: var(--mrp-surface); }
.mrp-filtros__campo { display: grid; gap: 4px; min-width: 0; }
.mrp-filtros label { font-size: var(--mrp-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mrp-text-muted); }
.mrp-filtros select { width: 100%; min-height: 44px; padding: 0 36px 0 12px; border-radius: var(--mrp-radius-sm); border: 1.5px solid var(--mrp-border); background-color: var(--mrp-bg-soft); color: var(--mrp-text); font: inherit; font-size: var(--mrp-fs-sm); appearance: none; -webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.mrp-filtros select:focus-visible { border-color: var(--mrp-focus); }
.mrp-filtros__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--mrp-sp-2); }
.mrp-filtros.is-auto .mrp-filtros__aplicar { display: none; }
@media (min-width: 768px) { .mrp-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mrp-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; } .mrp-filtros__acciones { grid-column: auto; } }
.mrp-tienda__cuenta { margin: var(--mrp-sp-4) 0 0; color: var(--mrp-text-muted); font-size: var(--mrp-fs-sm); }
.mrp-tienda__rejilla { margin-top: var(--mrp-sp-3); }
.mrp-tienda__rejilla .mrp-gama__media, .mrp-otros .mrp-gama__media { aspect-ratio: 16 / 9; }
.mrp-tienda__rejilla .mrp-gama__media:has(> img), .mrp-otros .mrp-gama__media:has(> img) { aspect-ratio: 1 / 1; }

/* Tarjetas: equipo montado y gama en borrador (solo editores) */
.mrp-gama { position: relative; }
.mrp-gama__tipo { margin: 0; font-size: var(--mrp-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mrp-link); }
.mrp-gama__acciones--uno { grid-template-columns: 1fr; }
.mrp-gama__flag { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 2px 10px; border-radius: var(--mrp-radius-pill); background: var(--mrp-warn); color: #1A1200; font-size: var(--mrp-fs-xs); font-weight: 700; }
.mrp-gama .mrp-precios__desde strong { font-size: 1.35rem; }

/* Estado vacío */
.mrp-vacio { display: grid; justify-items: center; gap: var(--mrp-sp-3); margin: var(--mrp-sp-5) auto 0; padding: var(--mrp-sp-7) var(--mrp-sp-4); max-width: 640px; text-align: center; border: 1px dashed var(--mrp-border); border-radius: var(--mrp-radius-lg); background: var(--mrp-surface); }
.mrp-vacio h2 { margin: 0; font-size: var(--mrp-fs-xl); }
.mrp-vacio p { margin: 0; color: var(--mrp-text-muted); }
.mrp-vacio .mrp-actions { justify-content: center; }
.mrp-vacio__svg { width: 96px; height: auto; opacity: .85; }
/* «No hay productos» de WooCommerce (búsquedas, bloques) con el mismo aspecto */
.woocommerce-info.woocommerce-no-products-found, .woocommerce-no-products-found .woocommerce-info { padding: var(--mrp-sp-5); border: 1px dashed var(--mrp-border); border-radius: var(--mrp-radius); background: var(--mrp-surface); color: var(--mrp-text); }

/* Paginación (tienda propia y la de WooCommerce/WordPress) */
.mrp-paginacion ul, .woocommerce nav.woocommerce-pagination ul, .nav-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mrp-sp-2); margin: var(--mrp-sp-6) 0 0; padding: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.mrp-paginacion a, .mrp-paginacion span, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--mrp-radius-sm); border: 1px solid var(--mrp-border); background: var(--mrp-surface); color: var(--mrp-text); font-weight: 600; text-decoration: none; }
.mrp-paginacion span[aria-current], .woocommerce nav.woocommerce-pagination ul li span.current, .nav-links .page-numbers.current { background: var(--mrp-accent); border-color: var(--mrp-accent); color: var(--mrp-ink-on-green); }

/* Ficha sin foto: la ilustración no ocupa toda la pantalla en tableta */
.mrp-ficha-ilustracion { aspect-ratio: auto; height: clamp(260px, 52vw, 460px); }
.mrp-ficha-ilustracion .mrp-pc-svg { height: 100%; max-height: none; }

/* ---- Oleada 9 · Ficha: imagen + columna de compra ----
   Antes la columna derecha era sticky dentro de div.product (que incluye FPS, pestañas y «Otros equipos»)
   y, al hacer scroll, se montaba encima de todo eso; además quedaba 17 px bajo la cabecera con la barra de WP.
   Ahora ambas columnas van en .mrp-ficha-top (inc/tienda.php) y el sticky termina con la imagen. */
.woocommerce div.product .mrp-ficha-top { display: grid; gap: var(--mrp-sp-5); align-items: start; margin: 0 0 var(--mrp-sp-6); }
.woocommerce div.product .mrp-ficha-top > div.images, .woocommerce div.product .mrp-ficha-top > .summary { float: none; width: auto; min-width: 0; margin: 0; }
.woocommerce div.product .mrp-ficha-top .summary { position: static; }
@media (min-width: 960px) {
	.woocommerce div.product .mrp-ficha-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mrp-sp-6); }
	.woocommerce div.product .mrp-ficha-top .summary { position: sticky; top: calc(var(--mrp-header-h) + var(--mrp-sp-4)); }
	body.admin-bar div.product .mrp-ficha-top .summary { top: calc(var(--mrp-header-h) + 32px + var(--mrp-sp-4)); }
}
/* Imagen principal: ocupa todo el recuadro (sin relleno ni fondo alrededor) y a tamaño completo; en las gamas es la versión 4:3 */
.theme-gaming .woocommerce div.product .mrp-ficha-top div.images.woocommerce-product-gallery { padding: 0; overflow: hidden; }
.woocommerce div.product .mrp-ficha-top div.images .woocommerce-product-gallery__image img.wp-post-image,
.woocommerce div.product .mrp-ficha-top div.images .flex-viewport .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; }
.woocommerce div.product .mrp-ficha-top div.images .flex-control-thumbs { padding: var(--mrp-sp-2); }
.woocommerce div.product .mrp-ficha-top .mrp-ficha-ilustracion { margin: 0; }
/* Rejilla de WooCommerce (búsqueda, bloques): misma imagen a sangre 1:1 */
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Ficha: otros equipos */
.mrp-otros { clear: both; margin: var(--mrp-sp-7) 0 0; }
.mrp-otros .mrp-section-head h2 { font-size: var(--mrp-fs-xl); margin: 0; }

/* Contacto */
.mrp-contacto { display: grid; gap: var(--mrp-sp-4); }
@media (min-width: 768px) { .mrp-contacto { grid-template-columns: repeat(3, 1fr); } }
.mrp-contacto__bloque { padding: var(--mrp-sp-5); }
.mrp-contacto__bloque h2 { margin: 0 0 var(--mrp-sp-2); font-size: var(--mrp-fs-lg); }
.mrp-contacto__bloque p { margin: 0 0 var(--mrp-sp-2); }

/* Contacto: formulario + datos */
.mrp-contacto-grid { display: grid; gap: var(--mrp-sp-5); }
@media (min-width: 960px) { .mrp-contacto-grid { grid-template-columns: 3fr 2fr; align-items: start; } .mrp-contacto-grid .mrp-contacto { grid-template-columns: 1fr; } }
.mrp-contacto-form-wrap { padding: var(--mrp-sp-5); }
.mrp-contacto-form-wrap h2 { margin: 0 0 var(--mrp-sp-4); font-size: var(--mrp-fs-xl); }
.mrp-campos { display: grid; gap: var(--mrp-sp-3); }
@media (min-width: 640px) { .mrp-campos { grid-template-columns: 1fr 1fr; } .mrp-campo--ancho { grid-column: 1 / -1; } }
.mrp-campo { display: grid; gap: 4px; margin: 0; }
.mrp-campo label { font-size: var(--mrp-fs-sm); font-weight: 600; }
.mrp-campo input, .mrp-campo select, .mrp-campo textarea { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--mrp-radius-sm); border: 1.5px solid var(--mrp-border); background: var(--mrp-surface); color: var(--mrp-text); font: inherit; }
.mrp-campo textarea { resize: vertical; }
.mrp-campo input:focus-visible, .mrp-campo select:focus-visible, .mrp-campo textarea:focus-visible { border-color: var(--mrp-focus); }
.mrp-check { display: flex; gap: 10px; align-items: flex-start; margin: var(--mrp-sp-4) 0 var(--mrp-sp-2); font-size: var(--mrp-fs-sm); }
.mrp-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.mrp-rgpd { margin: 0 0 var(--mrp-sp-4); font-size: var(--mrp-fs-xs); color: var(--mrp-text-muted); }
.mrp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mrp-contacto-respuesta { margin: var(--mrp-sp-3) 0 0; padding: 10px 14px; border-radius: var(--mrp-radius-sm); font-size: var(--mrp-fs-sm); }
.mrp-contacto-respuesta.is-ok { background: var(--mrp-surface-2); color: var(--mrp-ok); border: 1px solid var(--mrp-ok); }
.mrp-contacto-respuesta.is-error { background: var(--mrp-surface-2); color: var(--mrp-danger); border: 1px solid var(--mrp-danger); }
.mrp-mapa { padding: var(--mrp-sp-4); }
.mrp-mapa__aviso { margin: 0 0 var(--mrp-sp-3); font-size: var(--mrp-fs-sm); color: var(--mrp-text-muted); }
.mrp-mapa__iframe { display: block; width: 100%; height: 280px; margin-top: var(--mrp-sp-3); border: 0; border-radius: var(--mrp-radius-sm); }

/* ClockerGo */
.mrp-cg-grid { display: grid; gap: var(--mrp-sp-4); margin-top: var(--mrp-sp-5); }
@media (min-width: 640px) { .mrp-cg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mrp-cg-grid { grid-template-columns: repeat(3, 1fr); } }
.mrp-cg-card { padding: var(--mrp-sp-5); }
.mrp-cg-card h3 { margin: 0 0 var(--mrp-sp-2); font-size: var(--mrp-fs-lg); }
.mrp-cg-card p { margin: 0 0 var(--mrp-sp-2); color: var(--mrp-text-muted); font-size: var(--mrp-fs-sm); }
.mrp-cg-card ul { margin: 0; padding-left: 18px; font-size: var(--mrp-fs-sm); }
.mrp-cg-mods { list-style: none; margin: var(--mrp-sp-5) 0 0; padding: 0; display: grid; gap: var(--mrp-sp-2); }
@media (min-width: 768px) { .mrp-cg-mods { grid-template-columns: repeat(2, 1fr); } }
.mrp-cg-mods li { padding: var(--mrp-sp-3) var(--mrp-sp-4); border: 1px solid var(--mrp-border); border-radius: var(--mrp-radius-sm); background: var(--mrp-surface); font-size: var(--mrp-fs-sm); }
.mrp-cg-mods strong { display: block; }
.mrp-faq details { border-bottom: 1px solid var(--mrp-border); padding: var(--mrp-sp-3) 0; }
.mrp-faq summary { cursor: pointer; font-weight: 600; }
.mrp-faq p { margin: var(--mrp-sp-2) 0 0; color: var(--mrp-text-muted); }

/* Páginas legales: columna de lectura */
.mrp-legal { max-width: 800px; margin: 0 auto; }
.mrp-legal h1 { font-size: var(--mrp-fs-2xl); margin: 0 0 4px; }
.mrp-legal__fecha { margin: 0 0 var(--mrp-sp-5); font-size: var(--mrp-fs-sm); }
.mrp-legal h2 { margin-top: var(--mrp-sp-6); padding-bottom: var(--mrp-sp-2); border-bottom: 1px solid var(--mrp-border); font-size: var(--mrp-fs-xl); }
.mrp-legal table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--mrp-fs-sm); }
.mrp-legal th, .mrp-legal td { padding: 8px 10px; border: 1px solid var(--mrp-border); text-align: left; vertical-align: top; }
.mrp-legal .mrp-notice { margin-top: var(--mrp-sp-6); }

/* Cabecera en móviles estrechos (375–400 px): logo e iconos caben sin desbordar */
@media (max-width: 400px) {
	.mrp-header__bar { gap: var(--mrp-sp-2); }
	.mrp-header__actions { gap: 0; }
	.mrp-icon-btn { width: 40px; }
	.mrp-logo { font-size: 1rem; gap: 6px; }
}

/* Menú: enlaces de la tienda sin equipos (solo editores) */
.mrp-menu-vacio > a { opacity: .6; }

/* ---- 0.5.3 · Accesibilidad ---- */
/* T1: migas de la tienda (WooCommerce las pintaba en #767676: 4,33:1) */
.woocommerce .woocommerce-breadcrumb.mrp-migas, .woocommerce .woocommerce-breadcrumb.mrp-migas a,
.woocommerce-page .woocommerce-breadcrumb.mrp-migas, .woocommerce-page .woocommerce-breadcrumb.mrp-migas a { color: var(--mrp-text-muted); }
/* T3: chips, botones de filtros y migas a 44 px */
.mrp-chip { min-height: 44px; }
.mrp-filtros__acciones .mrp-btn { min-height: 44px; }
.mrp-migas a { display: inline-block; padding: 10px 0; }
.mrp-migas { row-gap: 0; }
/* L1: contacto */
.mrp-contacto .mrp-btn { min-height: 44px; }
.mrp-check { min-height: 44px; align-items: center; }
.mrp-check input { margin-top: 0; }
/* L2: tablas legales con sombra que indica que hay más columnas */
.mrp-legal table, .mrp-entry table:not([class]) {
	background: linear-gradient(to right, var(--mrp-bg) 30%, transparent), linear-gradient(to left, var(--mrp-bg) 30%, transparent) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) 100% 0;
	background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll;
}
/* G5: iconos de la cabecera a 44 px también en móvil estrecho; el logo cede espacio */
@media (max-width: 400px) {
	.mrp-icon-btn { width: 44px; }
	.mrp-header .mrp-logo { font-size: .95rem; gap: 5px; }
	.mrp-header .mrp-logo__img { width: 34px; height: 34px; }
}
@media (max-width: 359px) { .mrp-header .mrp-logo__txt { display: none; } }
/* G7: índice de Easy TOC legible en los dos ambientes (título en #F9F9F9 con texto blanco: 1,07:1) */
#ez-toc-container { background: var(--mrp-surface) !important; border: 1px solid var(--mrp-border) !important; border-radius: var(--mrp-radius); color: var(--mrp-text); box-shadow: none; }
#ez-toc-container .ez-toc-title, #ez-toc-container p.ez-toc-title, #ez-toc-container .ez-toc-title-container { color: var(--mrp-text) !important; font-weight: 700; }
#ez-toc-container a, #ez-toc-container a:visited { color: var(--mrp-link) !important; }
#ez-toc-container .ez-toc-list a { display: inline-block; padding: 6px 0; }
#ez-toc-container .ez-toc-toggle, #ez-toc-container .ez-toc-btn { min-width: 32px; min-height: 32px; color: var(--mrp-text) !important; }
#ez-toc-container .ez-toc-icon-toggle-span svg, #ez-toc-container svg { fill: currentColor; color: var(--mrp-text); }
/* CK1: banner de cookies (Complianz) en móvil: ≈ 36 % de la pantalla a 390 × 670 (antes 69 %), con el título,
   el mensaje desplazable y Aceptar / Rechazar / Configurar en una fila, todos visibles y del mismo tamaño (también en tableta) */
@media (max-width: 800px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner { padding: 12px 14px; gap: 8px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { display: flex; align-items: center; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { display: block !important; font-size: 15px; font-weight: 700; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { max-height: 45vh; overflow-y: auto; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { font-size: 13px; line-height: 1.4; max-height: 5.6em; overflow-y: auto; padding-right: 4px; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: auto; min-width: 0; height: auto; min-height: 44px; margin: 0; padding: 6px 4px; font-size: 13px; line-height: 1.2; white-space: normal; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents { margin: 0; }
}
/* CK2: enlaces y flechas del banner más fáciles de pulsar */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents a, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a { display: inline-block; padding: 6px 4px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-icon.cmplz-open { min-width: 32px; min-height: 32px; }