/* =========================================================
 *  JYM Shop Archive
 *  Layout 2 columnas (sidebar + grid) + breadcrumbs + paginación.
 *  La card de producto (.oz-loop-product__*) NO se toca aquí.
 * ========================================================= */

.jym-shop {
	/* Paleta verde unificada (única en todo el sitio).
	   Primary brillante #20E457 → SIEMPRE va con TEXTO/ICONO negro encima
	   (contraste 14:1, AAA). El "dark" es el verde para hover y para texto
	   verde sobre fondo blanco (donde necesita pasar AA). */
	/* Paleta AQUAVEST: teal de marca + naranja. Reemplaza el verde anterior. */
	--jym-shop-accent:        #0e7c8b;     /* teal de marca (texto/icono blanco encima) */
	--jym-shop-accent-dark:   #0b626e;     /* hover/oscuro */
	--jym-shop-accent-press:  #094e58;     /* press */
	--jym-shop-accent-ink:    #ffffff;     /* texto SOBRE teal */
	--jym-shop-accent-soft:   #e3f3f5;     /* fondos sutiles (chips) — tinte teal claro */
	--jym-shop-navy:          #1e3a5f;     /* azul navy industrial — acento serio */
	--jym-shop-text:          #0f172a;     /* H1 más profundo */
	--jym-shop-text-2:        #111827;     /* títulos secundarios */
	--jym-shop-text-soft:     #374151;     /* texto sidebar, badges */
	--jym-shop-muted:         #6b7280;     /* subtítulos */
	--jym-shop-muted-2:       #9ca3af;     /* breadcrumb */
	--jym-shop-border:        #e5e7eb;
	--jym-shop-border-light:  #f3f4f6;
	--jym-shop-border-strong: #d1d5db;
	--jym-shop-surface:       #ffffff;
	--jym-shop-bg:            #ffffff;     /* fondo principal: blanco para contrastar mejor */
	--jym-shop-bg-grid:       #fafbfc;     /* fondo sutil del área de productos (alternativa) */
	--jym-shop-chip-bg:       #f3f4f6;     /* chip del contador */
	--jym-shop-radius:        12px;
	--jym-shop-radius-sm:     8px;
	--jym-shop-shadow:        0 1px 3px rgba(0, 0, 0, .04);
	--jym-shop-shadow-card:   0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
	--jym-shop-shadow-hover:  0 8px 24px rgba(15, 23, 42, .10), 0 4px 8px rgba(22, 163, 74, .08);
	--jym-shop-sidebar-w:     268px;
	--jym-shop-gap:           clamp(20px, 2.5vw, 32px);
	--jym-shop-pad-y:         clamp(20px, 3vw, 36px);

	display: block;
	background: var(--jym-shop-bg);
	color: var(--jym-shop-text);
	font-family: var(--OZ-Font-Base, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Banda verde acento debajo del header — separador visual con marca.
   Vive ENTRE el header y el contenedor del grid, con aire arriba y abajo.
   En móvil se oculta para liberar espacio vertical. */
.jym-shop__accent-band {
	height: 3px;
	margin: 24px 0 28px;
	background: linear-gradient(90deg, var(--jym-shop-accent) 0%, transparent 100%);
}
@media (max-width: 767px) {
	.jym-shop__accent-band { display: none; }
	/* En móvil el kicker también es ruido — la jerarquía la da el H1. */
	.jym-shop__kicker { display: none; }
	/* Reducir aire del header en móvil */
	.jym-shop__header { padding-top: 14px; }
}

.jym-shop * { box-sizing: border-box; }

/* ---------- Contenedor compartido ---------- */
.jym-shop__container {
	width: 100%;
	max-width: var(--container, 1280px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 2vw, 24px);
	padding-right: clamp(16px, 2vw, 24px);
}

/* ---------- Cabecera: breadcrumb arriba + flex 2-col (H1+sub | badges) ---------- */
.jym-shop__header {
	padding-top: var(--jym-shop-pad-y);
}

/* Fila flex: izquierda H1, derecha subtítulo+badges.
   align-items: center → el bloque derecho queda VERTICALMENTE CENTRADO
   respecto al H1 → mismo aire arriba y abajo (subtítulo encima de los
   badges, ambos centrados sobre el eje del H1). */
.jym-shop__header-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	margin: 0;
}
@media (min-width: 768px) {
	.jym-shop__header-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}
}


/* Columna izquierda: breadcrumb arriba + H1 abajo, gap consistente. */
.jym-shop__header-left {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Columna derecha: subtítulo arriba + badges horizontales debajo, gap igual. */
.jym-shop__header-right {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;     /* alineado a la derecha del header-row */
	gap: 8px;
}
@media (max-width: 767px) {
	.jym-shop__header-right { align-items: flex-start; }
}

/* Kicker: etiqueta verde sobre el H1 — refuerza marca + categoría B2B. */
.jym-shop__kicker {
	display: inline-block;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--jym-shop-accent);
	text-transform: uppercase;
}

/* H1: 40px / 800 / #0F172A — más presencia industrial */
.jym-shop__title {
	margin: 0;
	font-family: var(--OZ-Font-Headings, var(--OZ-Font-Base, inherit));
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--jym-shop-text);
}

/* Subtítulo: 16px / #6B7280, alineado a la derecha en desktop.
   Después del subtítulo añade línea decorativa verde de 60×3px. */
.jym-shop__subtitle {
	margin: 0;
	max-width: 600px;
	color: var(--jym-shop-muted);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	text-align: right;
	position: relative;
}
.jym-shop__subtitle::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--jym-shop-accent);
	border-radius: 2px;
	margin: 10px 0 0 auto;     /* alineado a la derecha bajo el subtítulo */
}
@media (max-width: 767px) {
	.jym-shop__subtitle { text-align: left; }
	.jym-shop__subtitle::after { margin-left: 0; }
}

.jym-shop__description {
	margin: 10px 0 0;
	max-width: 720px;
	color: var(--jym-shop-muted);
	font-size: 14.5px;
	line-height: 1.6;
}
.jym-shop__description p { margin: 0 0 8px; }
.jym-shop__description p:last-child { margin-bottom: 0; }

/* Trust badges: cada uno como mini-tarjeta blanca con icono en círculo
   verde claro (#DCFCE7) — más presencia, lenguaje "feature-card". */
.jym-shop__badges {
	flex: 0 0 auto;
	display: block;
}
.jym-shop__badges-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Sin tarjeta — solo icono en círculo verde + texto, "señal de confianza" sutil */
.jym-shop__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--jym-shop-text-2);
	white-space: nowrap;
}
/* Icono verde sólido al lado del texto, sin fondo. Limpio y consistente. */
.jym-shop__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--jym-shop-accent);
}
.jym-shop__badge-icon svg {
	width: 18px;
	height: 18px;
}
.jym-shop__badge-label { line-height: 1.2; }

/* Tablet 768–1023: gap más amplio entre badges. */
@media (min-width: 768px) and (max-width: 1023px) {
	.jym-shop__badges-list { gap: 18px; }
	.jym-shop__badge { font-size: 13px; gap: 8px; }
	.jym-shop__badge-icon,
	.jym-shop__badge-icon svg { width: 16px; height: 16px; }
}

/* Desktop ≥1024: gap mayor entre badges. */
@media (min-width: 1024px) {
	.jym-shop__badges-list { gap: 24px; }
}

/* Mobile <768px: ocultamos subtítulo + trust badges para liberar espacio.
   El usuario quiere ver productos, no copy de marca, en pantalla pequeña.
   Se mantienen visibles en tablet y desktop. */
@media (max-width: 767px) {
	.jym-shop__subtitle,
	.jym-shop__badges {
		display: none !important;
	}
	/* Sin la línea decorativa después del subtítulo (queda huérfana) */
	.jym-shop__subtitle::after { display: none !important; }
}

.jym-breadcrumb { font-size: 13px; line-height: 1.4; font-weight: 500; }
.jym-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	color: var(--jym-shop-muted-2);
}
.jym-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.jym-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--jym-shop-muted-2);
	text-decoration: none;
	transition: color .15s ease;
}
.jym-breadcrumb__link:hover,
.jym-breadcrumb__link:focus-visible {
	color: var(--jym-shop-accent-dark);
	text-decoration: none;
}
.jym-breadcrumb__home {
	display: inline-flex;
	align-items: center;
	color: currentColor;
}
.jym-breadcrumb__sep {
	margin: 0 8px;
	color: #cbd5e1;
	user-select: none;
	font-weight: 400;
}
.jym-breadcrumb__item--current .jym-breadcrumb__label {
	color: #64748b;       /* algo más oscuro que el resto, pero sin gritar */
	font-weight: 600;
}

/* ---------- Layout 2 columnas ---------- */
.jym-shop__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jym-shop-gap);
	padding-bottom: calc(var(--jym-shop-pad-y) + 12px);
}

@media (min-width: 992px) {
	.jym-shop__layout {
		grid-template-columns: var(--jym-shop-sidebar-w) minmax(0, 1fr);
		gap: clamp(24px, 3vw, 40px);
	}
	/* Si la barra lateral NO tiene widgets ni filtros activos (está vacía en
	   desktop), el grid de productos ocupa TODO el ancho y se oculta el hueco
	   de la sidebar. Detectamos contenido real con :has(). */
	.jym-shop__layout:not(:has(.jym-shop__sidebar .widget)):not(:has(.jym-shop__active-filters)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.jym-shop__layout:not(:has(.jym-shop__sidebar .widget)):not(:has(.jym-shop__active-filters)) .jym-shop__sidebar {
		display: none;
	}
}

.jym-shop__sidebar { min-width: 0; }
.jym-shop__main    { min-width: 0; }

/* =========================================================
 *  Sidebar de la tienda — estilos de los widgets nativos.
 *  Cada widget que el usuario añada (Categorías de producto,
 *  Filtrar por atributo, Buscar, Filtro por precio, Custom HTML…)
 *  hereda esta tarjeta + tipografía consistente.
 * ========================================================= */
.jym-shop__sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Móvil: más separación entre widgets para leerlos como bloques distintos. */
@media (max-width: 991px) {
	.jym-shop__sidebar { gap: 12px; }
}

/* ---------- Bloque "Filtros aplicados" + Borrar filtros ----------
   Se renderiza desde archive-product.php sólo si hay GET filters activos.
   Va siempre en la primera posición de la sidebar para visibilidad. */
.jym-shop__active-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--jym-shop-accent-soft);
	border: 1px solid #c7e6d4;
	border-radius: var(--jym-shop-radius);
	box-shadow: var(--jym-shop-shadow);
}
.jym-shop__active-filters-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--jym-shop-accent-dark);
	letter-spacing: .12em;
	text-transform: uppercase;
	min-width: 0;
}
.jym-shop__active-filters-label svg { flex: 0 0 auto; }

.jym-shop__clear-filters {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 6px 10px;
	border-radius: 6px;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
.jym-shop__clear-filters:hover,
.jym-shop__clear-filters:focus-visible {
	color: #b91c1c;
	background: #fef2f2;
	text-decoration: none;
	outline: none;
}
.jym-shop__clear-filters svg { flex: 0 0 auto; }

.shop-sidebar__widget,
.jym-shop__sidebar > .widget {
	background: var(--jym-shop-surface);
	border: 1px solid var(--jym-shop-border);
	border-radius: var(--jym-shop-radius);
	padding: 18px 18px 16px;
	box-shadow: var(--jym-shop-shadow);
	color: var(--jym-shop-text);
	font-size: 14px;
	line-height: 1.45;
}

.shop-sidebar__title,
.jym-shop__sidebar .widget-title,
.jym-shop__sidebar .wp-block-heading {
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--jym-shop-border);
	font-family: var(--OZ-Font-Headings, var(--OZ-Font-Base, inherit));
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jym-shop-text);
	display: flex;
	align-items: center;
	gap: 8px;
}
.shop-sidebar__title::before,
.jym-shop__sidebar .widget-title::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 14px;
	background: var(--jym-shop-accent);
	border-radius: 2px;
	flex: 0 0 auto;
}

/* Listas dentro de cualquier widget de la sidebar */
.jym-shop__sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jym-shop__sidebar li { margin: 0; }

/* ---------- Widget: Categorías de producto (árbol colapsable + checkbox) ---------- */
.jym-shop__sidebar .product-categories,
.jym-shop__sidebar .widget_product_categories ul,
.jym-shop__sidebar .widget_categories ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Fila: [check] [nombre flexible] [contador] [caret].
   La fila completa tiene hover/selección de fondo, pero el clic en el nombre
   sigue navegando al archive y el clic en el check filtra. */
.jym-shop__sidebar .cat-item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 0;
	margin: 0 -10px;
	padding: 5px 10px;
	border-radius: var(--jym-shop-radius-sm);
	transition: background-color .15s ease, color .15s ease;
}
/* Hover INDIVIDUAL: la fila bajo el cursor se pinta VERDE + texto NEGRO.
   Si un descendiente está hovereado, el ancestro se rebaja a gris sutil
   (vía :has()) para que sólo "una" categoría aparezca como activa a la vez. */
.jym-shop__sidebar .cat-item:hover {
	background: var(--jym-shop-accent);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.jym-shop__sidebar .cat-item:hover > a {
	color: #000000;
	font-weight: 700;
}
.jym-shop__sidebar .cat-item:hover > .count {
	background: #ffffff;
	color: #000000;
}
.jym-shop__sidebar .cat-item:hover > .oz-cat-check {
	border-color: #000000;
	background: #ffffff;
}
.jym-shop__sidebar .cat-item:hover > .oz-cat-check:checked {
	background: #000000;
	border-color: #000000;
	box-shadow: inset 0 0 0 2px var(--jym-shop-accent);
}
.jym-shop__sidebar .cat-item:hover > .oz-cat-toggle {
	color: #000000;
}

/* Ancestros: cuando un descendiente está bajo el cursor, este baja a gris sutil. */
.jym-shop__sidebar .cat-item:has(.cat-item:hover) {
	background: var(--jym-shop-chip-bg);
}
.jym-shop__sidebar .cat-item:has(.cat-item:hover) > a {
	color: var(--jym-shop-text);
	font-weight: 600;
}
.jym-shop__sidebar .cat-item:has(.cat-item:hover) > .count {
	background: var(--jym-shop-chip-bg);
	color: var(--jym-shop-muted);
}
.jym-shop__sidebar .cat-item:has(.cat-item:hover) > .oz-cat-check {
	border-color: var(--jym-shop-border-strong);
	background: #ffffff;
	box-shadow: none;
}
.jym-shop__sidebar .cat-item:has(.cat-item:hover) > .oz-cat-check:checked {
	background: var(--jym-shop-accent);
	border-color: var(--jym-shop-accent);
	box-shadow: inset 0 0 0 2px #ffffff;
}
.jym-shop__sidebar .cat-item:has(.cat-item:hover) > .oz-cat-toggle {
	color: var(--jym-shop-muted);
}

.jym-shop__sidebar .cat-item > a:focus-visible {
	outline: 2px solid var(--jym-shop-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Checkbox de filtro (inyectado por shop-sidebar.js).
   Touch target ≥ 18px en móvil (recomendación WCAG / Material). */
.oz-cat-check {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--jym-shop-border-strong);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
	grid-column: 1;
}
@media (min-width: 992px) {
	.oz-cat-check { width: 16px; height: 16px; }
}
.oz-cat-check:hover { border-color: var(--jym-shop-accent); }
.oz-cat-check:focus-visible {
	outline: none;
	border-color: var(--jym-shop-accent);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
}
.oz-cat-check:checked {
	background: var(--jym-shop-accent);
	border-color: var(--jym-shop-accent);
	box-shadow: inset 0 0 0 2px #fff;
}

/* Nombre — L1 NEGRO + 600 (categorías padre destacadas) */
.jym-shop__sidebar .cat-item > a {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	color: var(--jym-shop-text);
	text-decoration: none;
	font-weight: 600;
	transition: color .15s ease;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jym-shop__sidebar .cat-item > a:focus-visible {
	color: var(--jym-shop-accent-dark);
}

/* Contador como pill (radius 10): visible cuando hay productos.
   Cuando es (0) baja a opacity 0.5 para indicar "sin stock filtrable". */
.jym-shop__sidebar .cat-item > .count {
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 20px;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--jym-shop-chip-bg);
	border: 0;
	color: var(--jym-shop-muted);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* :has() para detectar contador "(0)" — soporte Chrome 105+, Safari 15.4+, Firefox 121+ */
.jym-shop__sidebar .cat-item:has(.count:is([class*="0"])) > .count {
	opacity: 1;       /* fallback: el JS de abajo es más confiable */
}
.jym-shop__sidebar .cat-item.is-empty > .count,
.jym-shop__sidebar .cat-item.is-empty > a {
	opacity: .5;
}

/* Caret de despliegue (insertado por shop-sidebar.js) */
.oz-cat-toggle {
	grid-column: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--jym-shop-muted);
	cursor: pointer;
	border-radius: 6px;
	transition: background-color .15s ease, color .15s ease, transform .2s ease;
}
.oz-cat-toggle:hover,
.oz-cat-toggle:focus-visible {
	background: var(--jym-shop-bg);
	color: var(--jym-shop-text);
	outline: none;
}
.oz-cat-toggle[aria-expanded="true"] { color: var(--jym-shop-accent-dark); }
.oz-cat-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.oz-cat-toggle svg { transition: transform .2s ease; }

/* Estado activo (checkbox marcado): SIN fondo verde, sólo texto verde + bold.
   El checkbox ya muestra el estado por sí mismo. */
.jym-shop__sidebar .cat-item.is-filter-active {
	background: transparent;
}
.jym-shop__sidebar .cat-item.is-filter-active > a {
	color: var(--jym-shop-accent-dark);
	font-weight: 600;
}
.jym-shop__sidebar .cat-item.is-filter-active > .count {
	background: var(--jym-shop-accent-soft);
	color: var(--jym-shop-accent-dark);
}

/* Estado: categoría actual del archive (navegado por nombre).
   Texto verde + bold; sin fondo. */
.jym-shop__sidebar .cat-item.current-cat,
.jym-shop__sidebar .cat-item.current-cat-parent,
.jym-shop__sidebar .cat-item.current-cat-ancestor {
	background: transparent;
}
.jym-shop__sidebar .cat-item.current-cat > a,
.jym-shop__sidebar .cat-item.current-cat-parent > a,
.jym-shop__sidebar .cat-item.current-cat-ancestor > a {
	color: var(--jym-shop-accent-dark);
	font-weight: 600;
}

/* Niveles anidados: indentación + barra guía vertical sutil */
.jym-shop__sidebar .cat-item .children {
	grid-column: 1 / -1;
	margin: 4px 0 4px 14px;
	padding-left: 10px;
	border-left: 1px solid var(--jym-shop-border);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
/* Importante: el JS pone `hidden` para colapsar; el `display: flex` de arriba
   tiene más especificidad que el [hidden] del user-agent, así que forzamos. */
.jym-shop__sidebar [hidden] { display: none !important; }

/* Subcategorías L2/L3 — texto más oscuro para que se lea bien */
.jym-shop__sidebar .cat-item .children .cat-item > a {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--jym-shop-text-soft);   /* #374151 — antes era #6b7280 muy claro */
}
.jym-shop__sidebar .cat-item .children .cat-item:hover > a {
	color: #000000;
	font-weight: 700;
}
.jym-shop__sidebar .cat-item .children .children .cat-item > a {
	font-size: 12.5px;
}

/* ---------- Widget: Filtrar productos por atributo (Marcas, etc) ---------- */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* La <li> es el contenedor flex: nombre a la izquierda, contador a la derecha
   en la MISMA línea, sin saltos. */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -10px;
	padding: 7px 10px;
	border-radius: var(--jym-shop-radius-sm);
	transition: background-color .15s ease, color .15s ease;
	color: var(--jym-shop-text);
	font-weight: 600;
	cursor: pointer;
}
/* Hover individual: verde + texto 100% negro, igual que categorías. */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item:hover {
	background: var(--jym-shop-accent);
	color: #000000;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item:hover > a,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item:hover > span:not(.count) {
	color: #000000;
	font-weight: 700;
}
/* Nombre (link cuando hay productos, span cuando no) */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > a,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > span:not(.count) {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Pseudo-checkbox cuadrado antes del nombre. Touch target ≥18px en móvil. */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > a::before,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > span:not(.count)::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--jym-shop-border-strong);
	border-radius: 4px;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 992px) {
	.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > a::before,
	.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > span:not(.count)::before {
		width: 16px;
		height: 16px;
	}
}
/* Checkbox visible sobre el verde: borde negro y fondo blanco (sin marcar)
   o negro con check verde inverso (marcado). */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item:hover > a::before,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item:hover > span:not(.count)::before {
	border-color: #000000;
	background: #ffffff;
}
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item--chosen:hover > a::before,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item.chosen:hover > a::before {
	background: #000000;
	border-color: #000000;
	box-shadow: inset 0 0 0 2px var(--jym-shop-accent);
}
/* Contador legible sobre el verde */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item:hover .count {
	background: #ffffff;
	color: #000000;
}
/* Focus accesible para teclado */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item > a:focus-visible {
	outline: 2px solid var(--jym-shop-accent);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Estado seleccionado: SIN fondo verde, sólo texto verde + bold.
   El checkbox marcado señala el estado por sí mismo. */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item--chosen,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item.chosen {
	background: transparent;
	color: var(--jym-shop-accent-dark);
	font-weight: 600;
}
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item--chosen > a::before,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item.chosen > a::before,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item--chosen > span:not(.count)::before,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item.chosen > span:not(.count)::before {
	background: var(--jym-shop-accent);
	border-color: var(--jym-shop-accent);
	box-shadow: inset 0 0 0 2px #fff;
}
/* Contador del widget Marcas: mismo pill, mismo opacity para (0). */
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item .count {
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 20px;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--jym-shop-chip-bg);
	border: 0;
	color: var(--jym-shop-muted);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item.is-empty {
	opacity: .5;
}
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item--chosen .count,
.jym-shop__sidebar .woocommerce-widget-layered-nav-list__item.chosen .count {
	background: #fff;
	border-color: var(--jym-shop-accent);
	color: var(--jym-shop-accent-dark);
}

/* Dropdown layered nav */
.jym-shop__sidebar .woocommerce-widget-layered-nav-dropdown select,
.jym-shop__sidebar select {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--jym-shop-border);
	border-radius: var(--jym-shop-radius-sm);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--jym-shop-text);
}
.jym-shop__sidebar .woocommerce-widget-layered-nav-dropdown select:focus {
	outline: none;
	border-color: var(--jym-shop-accent);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

/* ---------- Widget: Buscador (WP search + Woo product search) ---------- */
.jym-shop__sidebar .widget_search form,
.jym-shop__sidebar .widget_product_search form,
.jym-shop__sidebar .wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
}
.jym-shop__sidebar input[type="search"],
.jym-shop__sidebar input[type="text"],
.jym-shop__sidebar .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--jym-shop-border);
	border-radius: var(--jym-shop-radius-sm);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--jym-shop-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jym-shop__sidebar input[type="search"]:focus,
.jym-shop__sidebar input[type="text"]:focus,
.jym-shop__sidebar .wp-block-search__input:focus {
	outline: none;
	border-color: var(--jym-shop-accent);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}
.jym-shop__sidebar .widget_search button[type="submit"],
.jym-shop__sidebar .widget_search input[type="submit"],
.jym-shop__sidebar .widget_product_search button[type="submit"],
.jym-shop__sidebar .widget_product_search input[type="submit"],
.jym-shop__sidebar .wp-block-search__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--jym-shop-radius-sm);
	background: var(--jym-shop-accent);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.jym-shop__sidebar .widget_search button[type="submit"]:hover,
.jym-shop__sidebar .widget_search input[type="submit"]:hover,
.jym-shop__sidebar .widget_product_search button[type="submit"]:hover,
.jym-shop__sidebar .widget_product_search input[type="submit"]:hover,
.jym-shop__sidebar .wp-block-search__button:hover {
	background: var(--jym-shop-accent-dark);
}

/* ---------- Widget: Filtro por precio ---------- */
.jym-shop__sidebar .widget_price_filter .price_slider_wrapper { padding: 4px 0; }
.jym-shop__sidebar .widget_price_filter .ui-slider {
	background: var(--jym-shop-border);
	height: 4px;
	border-radius: 4px;
	position: relative;
	margin: 12px 4px;
}
.jym-shop__sidebar .widget_price_filter .ui-slider .ui-slider-range {
	background: var(--jym-shop-accent);
	height: 100%;
	position: absolute;
	border-radius: 4px;
}
.jym-shop__sidebar .widget_price_filter .ui-slider .ui-slider-handle {
	width: 16px; height: 16px;
	background: #fff;
	border: 2px solid var(--jym-shop-accent);
	border-radius: 50%;
	top: -6px; margin-left: -8px;
	cursor: grab;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.jym-shop__sidebar .widget_price_filter .ui-slider .ui-slider-handle:active { cursor: grabbing; }
.jym-shop__sidebar .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--jym-shop-muted);
}
.jym-shop__sidebar .widget_price_filter .price_slider_amount .button {
	margin-left: auto;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--jym-shop-radius-sm);
	background: var(--jym-shop-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.jym-shop__sidebar .widget_price_filter .price_slider_amount .button:hover {
	background: var(--jym-shop-accent-dark);
}
.jym-shop__sidebar .widget_price_filter .price_label { font-weight: 600; color: var(--jym-shop-text); }

/* ---------- Widget: Productos / Recientes / Top rated ---------- */
.jym-shop__sidebar .widget_recently_viewed_products ul,
.jym-shop__sidebar .widget_products ul,
.jym-shop__sidebar .widget_top_rated_products ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.jym-shop__sidebar .widget_recently_viewed_products li,
.jym-shop__sidebar .widget_products li,
.jym-shop__sidebar .widget_top_rated_products li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
}
.jym-shop__sidebar .widget_recently_viewed_products li img,
.jym-shop__sidebar .widget_products li img,
.jym-shop__sidebar .widget_top_rated_products li img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--jym-shop-radius-sm);
	border: 1px solid var(--jym-shop-border);
	flex: 0 0 auto;
}
.jym-shop__sidebar .product-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--jym-shop-text);
	line-height: 1.3;
}
.jym-shop__sidebar .amount {
	font-size: 12.5px;
	color: var(--jym-shop-accent-dark);
	font-weight: 600;
}

/* ---------- Estado vacío de la sidebar (sin widgets) ---------- */
.jym-shop__sidebar:empty { display: none; }

@media (max-width: 991px) {
	.jym-shop__sidebar { gap: 12px; }
	.shop-sidebar__widget,
	.jym-shop__sidebar > .widget { padding: 16px; }
}

/* ---------- Grid de productos ----------
 * El grid real lo aplica WooCommerce sobre <ul class="products"> dentro de
 * .jym-shop__grid. Respeta `--oz-shop-grid-columns` (Customizer → Catálogo).
 */
.jym-shop__grid {
	margin: 0;
	padding: 0;
	clear: both; /* defensa: si algún plugin reintroduce un float arriba */
}

.jym-shop__grid > ul.products,
.jym-shop__main ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	width: 100%;
	/* Anular floats/columns del CSS de WooCommerce. */
	float: none;
	clear: both;
}

/* Mobile pequeño: 1 columna para que las cards se lean cómodamente */
@media (max-width: 420px) {
	.jym-shop__grid > ul.products,
	.jym-shop__main ul.products {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* WooCommerce inyecta `ul.products::before` y `::after` como clearfix.
   Cuando `ul.products` es `display: grid` esos pseudoelementos cuentan
   como ítems de la grilla y dejan la primera celda vacía (lo que el
   usuario veía como "el primer producto sale en blanco") y otra al
   final. Los neutralizamos para que sólo los <li> reales sean ítems. */
.jym-shop__grid > ul.products::before,
.jym-shop__grid > ul.products::after,
.jym-shop__main ul.products::before,
.jym-shop__main ul.products::after {
	content: none;
	display: none;
}

/* Anular reglas .columns-N de woocommerce.css (que aplican width % + float).
   La card interna (.ozc-product-card--pack-jym / .oz-loop-product__*) maneja
   su propio borde, sombra y hover — el <li> queda transparente.
   `min-width: 0` permite que la card hija se contraiga en columnas estrechas
   sin desbordar (sin él el grid track adopta el ancho del contenido).
   `overflow: visible` evita que la sombra del hover (que crece fuera de la
   caja) quede recortada por el contenedor. */
.jym-shop__main ul.products li.product {
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

@media (min-width: 768px) {
	.jym-shop__grid > ul.products,
	.jym-shop__main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
}

@media (min-width: 992px) {
	.jym-shop__grid > ul.products,
	.jym-shop__main ul.products {
		grid-template-columns: repeat(var(--oz-shop-grid-columns, 4), minmax(0, 1fr));
		gap: 22px;
	}
}

/* Toolbar arriba del loop (notices + result-count + ordering)
   Flex para evitar floats y huecos vacíos antes del grid. */
.jym-shop__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--jym-shop-border);
	clear: both;
}
/* Mobile <768px: ocultar toda la toolbar (Mostrando + Orden) — el botón
   "Filtrar" sticky ya cubre la necesidad de filtrar/ordenar; mostrando los
   productos directamente recuperamos espacio vertical. */
@media (max-width: 767px) {
	.jym-shop__toolbar {
		display: none !important;
	}
}

/* Notices: ocupa una fila completa cuando hay mensajes; oculto cuando vacío */
.jym-shop__toolbar .woocommerce-notices-wrapper {
	flex: 1 1 100%;
	margin: 0;
}
.jym-shop__toolbar .woocommerce-notices-wrapper:empty,
.jym-shop__toolbar .woocommerce-notices-wrapper:not(:has(*)) {
	display: none;
}

.jym-shop__main .woocommerce-result-count {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--jym-shop-muted);
	font-size: 14px;
	font-weight: 500;
}
.jym-shop__main .woocommerce-result-count::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.jym-shop__main .woocommerce-ordering {
	margin: 0 0 0 auto;   /* push to right en lugar de float */
	float: none;
	position: relative;
}
.jym-shop__main .woocommerce-ordering select {
	min-height: 40px;
	padding: 8px 36px 8px 14px;
	border: 1px solid var(--jym-shop-border);
	border-radius: var(--jym-shop-radius-sm);
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--jym-shop-text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jym-shop__main .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--jym-shop-accent);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

.jym-shop__main::after { content: ""; display: table; clear: both; }

/* ---------- Empty state ---------- */
.jym-shop__empty {
	padding: 48px 20px;
	border: 1px dashed var(--jym-shop-border-strong);
	border-radius: var(--jym-shop-radius);
	background: var(--jym-shop-bg);
	text-align: center;
	color: var(--jym-shop-muted);
}
.jym-shop__empty .woocommerce-info {
	background: transparent;
	border: 0;
	color: inherit;
	margin: 0;
	padding: 0;
}

/* ---------- Paginación ---------- */
.jym-pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, 3vw, 40px);
}
.jym-pagination .page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 480px) {
	.jym-pagination .page-numbers li > * {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
		font-size: 13.5px;
	}
}
.jym-pagination .page-numbers li { margin: 0; }
.jym-pagination .page-numbers li > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--jym-shop-border);
	border-radius: var(--jym-shop-radius-sm);
	background: #fff;
	color: var(--jym-shop-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
}
.jym-pagination .page-numbers li a:hover,
.jym-pagination .page-numbers li a:focus-visible {
	border-color: var(--jym-shop-accent);
	color: var(--jym-shop-accent-dark);
	background: var(--jym-shop-accent-soft);
	text-decoration: none;
	outline: none;
}
.jym-pagination .page-numbers li .current {
	background: var(--jym-shop-accent);
	border-color: var(--jym-shop-accent);
	color: #fff;
}
.jym-pagination .page-numbers li .dots {
	border: 0;
	background: transparent;
	color: var(--jym-shop-muted);
	min-width: 24px;
	padding: 0 4px;
}
.jym-pagination .page-numbers li .prev,
.jym-pagination .page-numbers li .next { font-weight: 500; }

/* =========================================================
 *  Drawer móvil de filtros
 *  - Botón "Filtrar" en la toolbar visible <992px.
 *  - Sidebar pasa a panel deslizante desde la izquierda.
 *  - Backdrop oscuro + click-fuera cierra (manejado por JS).
 *  - Header del drawer (título + cerrar) sólo visible <992px.
 * ========================================================= */

/* Botón "Filtrar" en la toolbar — sólo visible en mobile/tablet */
.jym-shop__filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 16px;
	min-height: 44px;
	background: var(--jym-shop-text);
	color: #ffffff;
	border: 0;
	border-radius: var(--jym-shop-radius-sm);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	transition: background-color .15s ease;
}
.jym-shop__filter-toggle:hover {
	background: #1f2937;
}
.jym-shop__filter-toggle-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--jym-shop-accent);
	border-radius: 50%;
	margin-left: 4px;
}

/* Cabecera del drawer (título FILTROS + botón cerrar) */
.jym-shop__sidebar-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--jym-shop-border);
	background: var(--jym-shop-bg);
	border-radius: var(--jym-shop-radius) var(--jym-shop-radius) 0 0;
}
.jym-shop__sidebar-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jym-shop-text);
}
.jym-shop__sidebar-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--jym-shop-text);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.jym-shop__sidebar-close:hover { background: #ffffff; }

/* Backdrop del drawer */
.jym-shop__sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .5);
	z-index: 998;
}

@media (max-width: 991px) {
	/* Botón "Filtrar" full-width en móvil para mejor touch target +
	   sticky para acceso fácil al hacer scroll. */
	.jym-shop__filter-toggle {
		display: flex;
		width: 100%;
		justify-content: center;
		position: sticky;
		top: 8px;
		z-index: 50;
		box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
	}

	/* El sidebar pasa a panel fijo deslizante desde la izquierda */
	.jym-shop__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(360px, 92vw);
		z-index: 999;
		background: var(--jym-shop-surface);
		box-shadow: 0 0 30px rgba(15, 23, 42, .25);
		transform: translateX(-100%);
		transition: transform .25s ease;
		overflow-y: auto;
		padding: 0 16px 24px;
		gap: 14px;
		border-radius: 0;
	}
	.jym-shop__sidebar.is-open { transform: translateX(0); }

	/* Cabecera del drawer (sticky arriba) */
	.jym-shop__sidebar-header {
		display: flex;
		position: sticky;
		top: 0;
		margin: 0 -16px 0;
		z-index: 2;
	}

	/* El backdrop activo */
	.jym-shop__sidebar-backdrop:not([hidden]) { display: block; }

	/* Bloquear scroll del body cuando está abierto */
	body.jym-shop-filters-open { overflow: hidden; }

	/* Layout: sidebar ya no toma espacio en el grid (es overlay) */
	.jym-shop__layout { grid-template-columns: 1fr; }
}

@media (min-width: 992px) {
	/* En desktop el botón y el header del drawer se quedan ocultos */
	.jym-shop__filter-toggle,
	.jym-shop__sidebar-header,
	.jym-shop__sidebar-backdrop { display: none !important; }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.jym-pagination .page-numbers li > *,
	.jym-breadcrumb__link,
	.jym-shop__sidebar { transition: none !important; }
}