/* Hallmark · component: shop bottom action-bar + categories bottom-sheet
 * genre: site system (Poppins · azul de marca · tokens --yoo-*) · Prosingladura
 * states: default · hover · focus · active · disabled · loading(n/a) · error(n/a) · open
 * contrast: texto sobre azul/blanco >= 4.5:1
 *
 * Solo móvil (<=767px), solo listados de tienda. Reordena la toolbar del tema
 * (.before-loop-wrapper) hacia una barra inferior y abre el árbol de categorías
 * en un bottom-sheet. Se apila ENCIMA del botón flotante Solicitar Presupuesto.
 */

:root {
	--sb-accent:       var(--yoo-color-primary, #125bc9);
	--sb-accent-hover: var(--yoo-color-primary-hover, #0f4ea8);
	--sb-accent-soft:  var(--yoo-color-primary-soft, #eaf1fd);
	--sb-ink:          #1a1d21;
	--sb-body:         #3d4149;
	--sb-muted:        #8b9098;
	--sb-line:         #e7e9ee;
	--sb-surface:      #ffffff;
	--sb-surface-2:    #f5f6f8;
	--sb-font:         var(--ts-font-family, "Poppins", sans-serif);
	--sb-ease:         cubic-bezier(0.16, 1, 0.3, 1);
	--sb-radius:       16px;
	--sb-shadow:       0 -6px 24px -10px rgba(20, 24, 31, 0.22);
	/* En tienda se oculta la burbuja "Solicitar Presupuesto", así que la barra se
	   ancla al borde inferior (0). Se mantiene la variable por si vuelve. */
	--sb-float-clear:  0px;
}

/* ================================================================== *
 * SOLO MÓVIL
 * ================================================================== */
@media (max-width: 767px) {

	/* En TIENDA/CATEGORÍA se oculta el botón flotante "Solicitar Presupuesto"
	 * (petición 2026-07-13): en estas páginas manda la barra inferior propia. */
	.yoo-fm-bubble { display: none !important; }

	/* -- Ocultar la toolbar sticky original: sus controles se MUEVEN a la barra
	 * inferior con JS (queda solo su contenedor vacío, sin sticky). -- */
	.before-loop-wrapper {
		position: static !important;
		top: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* El contador y los formularios que NO movemos quedan ocultos en su sitio
	 * (se re-muestran dentro de la barra/sheet). El botón FILTRO no se quiere
	 * en móvil (petición 2026-07-13): se oculta en su sitio original. */
	.before-loop-wrapper > .woocommerce-result-count,
	.before-loop-wrapper > .product-on-sale-form,
	.before-loop-wrapper > .filter-widget-area-button,
	.filter-widget-area-button {
		display: none !important;
	}

	/* -- Barra inferior fija -- */
	.yoo-shopbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--sb-float-clear);       /* encima de Solicitar Presupuesto */
		z-index: 99980;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--sb-surface);
		border-top: 1px solid var(--sb-line);
		box-shadow: var(--sb-shadow);
		font-family: var(--sb-font);
	}
	.yoo-shopbar[hidden] { display: none; }

	/* Botón "Menú Categorías" (protagonista, a la izquierda) */
	.yoo-shopbar__cats {
		flex: 1 1 auto;
		min-width: 0;                 /* permite encoger sin partir el texto */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 14px;
		border: none;
		border-radius: 999px;
		background: var(--sb-accent);
		color: #fff;
		font-family: var(--sb-font);
		font-size: 0.9rem;
		font-weight: 600;
		white-space: nowrap;          /* nunca partir en 2 líneas */
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.16s var(--sb-ease), transform 0.16s var(--sb-ease);
	}
	.yoo-shopbar__cats-text { white-space: nowrap; }
	.yoo-shopbar__cats:hover { background: var(--sb-accent-hover); }
	.yoo-shopbar__cats:active { transform: scale(0.98); }
	.yoo-shopbar__cats:focus-visible { outline: 2px solid var(--sb-ink); outline-offset: 2px; }
	.yoo-shopbar__cats-icon { display: inline-flex; }

	/* Contenedor de las herramientas movidas (Ordenar, grid/list, filtro) */
	.yoo-shopbar__tools {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 6px;
	}
	/* El tema oculta Ordenar/grid-list en móvil; dentro de la barra los mostramos. */
	.yoo-shopbar__tools .woocommerce-ordering,
	.yoo-shopbar__tools .gridlist-toggle,
	.yoo-shopbar__tools .filter-widget-area-button {
		display: inline-flex !important;
	}
	/* Cada control reubicado: cuadrado táctil neutro */
	.yoo-shopbar__tools > * {
		margin: 0 !important;
	}
	.yoo-shopbar__tool-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 44px;
		min-height: 44px;
		padding: 0 10px;
		border: 1px solid var(--sb-line);
		border-radius: 12px;
		background: var(--sb-surface-2);
		color: var(--sb-body);
		font-family: var(--sb-font);
		font-size: 0.82rem;
		font-weight: 600;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.16s var(--sb-ease), border-color 0.16s var(--sb-ease);
	}
	.yoo-shopbar__tool-btn:hover { background: var(--sb-surface); border-color: var(--sb-accent); }
	.yoo-shopbar__tool-btn:active { transform: scale(0.96); }
	.yoo-shopbar__tool-btn:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
	.yoo-shopbar__tool-btn svg { width: 20px; height: 20px; }

	/* ---- Controles reubicados dentro de la barra ---- */
	/* Cada tool con aspecto de botón cuadrado neutro */
	.yoo-shopbar__tool {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0 8px;
		border: 1px solid var(--sb-line);
		border-radius: 12px;
		background: var(--sb-surface-2);
		font-family: var(--sb-font);
		font-size: 0.8rem;
		color: var(--sb-body);
	}
	.yoo-shopbar__tool:active { transform: scale(0.97); }

	/* Filtro: enlace → botón-icono compacto (solo icono, sin texto para ahorrar
	   espacio en la barra). */
	.yoo-shopbar__tool--filter { width: 44px; min-width: 44px; padding: 0; }
	.yoo-shopbar__tool--filter a {
		display: inline-flex; align-items: center; justify-content: center;
		width: 100%; height: 44px;
		color: var(--sb-body); text-decoration: none;
		font-size: 0;                 /* oculta el texto "Filtro" */
		line-height: 1;
	}
	.yoo-shopbar__tool--filter a::before {
		content: "";
		width: 18px; height: 18px; flex: 0 0 auto;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='10' y1='18' x2='14' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='10' y1='18' x2='14' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Ordenar: en móvil el tema muestra el <select> NATIVO. Lo estilamos como un
	   botón-icono compacto (el select real captura el tap y abre el menú del SO).
	   El UL custom del tema se oculta aquí (usamos el select nativo, más fiable). */
	.yoo-shopbar__tool--order {
		padding: 0; border: 0; background: transparent; position: relative;
		flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.yoo-shopbar__tool--order ul.orderby,
	.yoo-shopbar__tool--order .orderby-label { display: none !important; }
	.yoo-shopbar__tool--order select.orderby {
		-webkit-appearance: none; appearance: none;
		width: 44px; height: 44px; padding: 0;
		border: 1px solid var(--sb-line); border-radius: 12px;
		background: var(--sb-surface-2)
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4149' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11M3 12h8M3 18h5'/%3E%3Cpath d='M16 14l3 3 3-3'/%3E%3Cpath d='M19 6v11'/%3E%3C/svg%3E") center / 22px no-repeat;
		color: transparent;           /* ocultar el texto de la opción */
		text-indent: -9999px;
		cursor: pointer;
		font-size: 16px;              /* evita zoom en iOS al enfocar */
	}
	.yoo-shopbar__tool--order select.orderby:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
	/* Dropdown de ordenar abre HACIA ARRIBA (la barra está abajo). */
	.yoo-shopbar__tool--order ul.dropdown {
		position: absolute;
		bottom: calc(100% + 8px);
		right: 0;
		min-width: 210px;
		list-style: none; margin: 0; padding: 6px;
		background: var(--sb-surface);
		border: 1px solid var(--sb-line);
		border-radius: 12px;
		box-shadow: 0 10px 30px -10px rgba(20,24,31,.28);
		z-index: 5;
	}
	.yoo-shopbar__tool--order ul.dropdown a {
		display: block; padding: 10px 12px; border-radius: 8px;
		color: var(--sb-body); text-decoration: none; font-size: 0.9rem;
	}
	.yoo-shopbar__tool--order ul.dropdown a.current,
	.yoo-shopbar__tool--order ul.dropdown a:hover { background: var(--sb-accent-soft); color: var(--sb-accent); }

	/* grid/list toggle: dos iconos cuadrados */
	.yoo-shopbar__tool--gridlist {
		gap: 2px; padding: 0 6px;
	}
	.yoo-shopbar__tool--gridlist .grid,
	.yoo-shopbar__tool--gridlist .list {
		width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
		cursor: pointer; color: var(--sb-muted); border-radius: 8px;
	}
	.yoo-shopbar__tool--gridlist .active { color: var(--sb-accent); background: var(--sb-accent-soft); }

	/* ============================================================== *
	 * BOTTOM-SHEET de categorías
	 * ============================================================== */
	.yoo-cats-sheet {
		position: fixed;
		inset: 0;
		z-index: 99993;   /* por encima de la barra y del botón flotante */
		font-family: var(--sb-font);
	}
	.yoo-cats-sheet[hidden] { display: none; }

	.yoo-cats-sheet__overlay {
		position: absolute;
		inset: 0;
		background: rgba(20, 24, 31, 0.5);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity 0.28s var(--sb-ease);
	}
	.yoo-cats-sheet.is-open .yoo-cats-sheet__overlay { opacity: 1; }

	.yoo-cats-sheet__panel {
		outline: none;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 92vh;
		max-height: 92dvh;
		display: flex;
		flex-direction: column;
		background: var(--sb-surface);
		border-radius: var(--sb-radius) var(--sb-radius) 0 0;
		box-shadow: 0 -12px 40px -12px rgba(20, 24, 31, 0.4);
		transform: translateY(100%);
		transition: transform 0.34s var(--sb-ease);
		overflow: hidden;
	}
	.yoo-cats-sheet.is-open .yoo-cats-sheet__panel { transform: translateY(0); }

	/* Cabecera del sheet */
	.yoo-cats-sheet__head {
		position: relative;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 16px 16px 12px;
		border-bottom: 1px solid var(--sb-line);
		/* zona de agarre: el gesto de arrastre manda aquí (no scroll) */
		touch-action: none;
		cursor: grab;
		-webkit-user-select: none; user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.yoo-cats-sheet__head:active { cursor: grabbing; }
	.yoo-cats-sheet__grip {
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 44px;
		height: 5px;
		border-radius: 999px;
		background: var(--sb-line);
		transition: background 0.16s var(--sb-ease);
	}
	.yoo-cats-sheet__head:active .yoo-cats-sheet__grip { background: var(--sb-muted); }
	/* La X sí acepta su tap sin que el head lo bloquee */
	.yoo-cats-sheet__close { touch-action: auto; }
	.yoo-cats-sheet__title {
		flex: 1 1 auto;
		margin: 0;
		font-family: var(--sb-font);
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--sb-ink);
	}
	/* Botón cerrar — círculo perfecto, FONDO AZUL, aspa blanca. */
	.yoo-cats-sheet__close {
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		min-width: 42px;
		box-sizing: border-box;
		padding: 0;
		aspect-ratio: 1 / 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: var(--sb-accent);
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.16s var(--sb-ease), transform 0.16s var(--sb-ease);
	}
	.yoo-cats-sheet__close:hover { background: var(--sb-accent-hover); }
	.yoo-cats-sheet__close:active { transform: scale(0.92); }
	/* Foco: anillo azul claro (no negro). El :focus normal (no-visible, del
	   .focus() al abrir) no dibuja aro. */
	.yoo-cats-sheet__close:focus { outline: none; }
	.yoo-cats-sheet__close:focus-visible {
		outline: 2px solid color-mix(in srgb, var(--sb-accent) 55%, #fff);
		outline-offset: 2px;
	}
	.yoo-cats-sheet__close svg {
		width: 22px !important; height: 22px !important;
		min-width: 22px !important;
		flex: 0 0 22px !important;
		display: block !important;
		fill: none !important;
		stroke: #fff !important;
		stroke-width: 2.2 !important;
	}
	.yoo-cats-sheet__close svg line,
	.yoo-cats-sheet__close svg path {
		stroke: #fff !important;
		fill: none !important;
	}

	/* Cuerpo scrollable con el árbol de categorías */
	.yoo-cats-sheet__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px));
	}
	/* Que el árbol reutilizado ocupe todo el ancho del sheet (en PC va en aside) */
	.yoo-cats-sheet__body .yoo-vmenu-cats,
	.yoo-cats-sheet__body .yoo-vmenu-panel {
		width: 100%;
		max-width: none;
		display: block;
		position: static;
		box-shadow: none;
		border: 0;
		background: transparent;
	}
	/* Quitar bullets/markers de todas las listas del árbol dentro del sheet */
	.yoo-cats-sheet__body ul,
	.yoo-cats-sheet__body li {
		list-style: none !important;
		margin: 0;
		padding-left: 0;
	}
	.yoo-cats-sheet__body li::marker,
	.yoo-cats-sheet__body li::before { content: none !important; }

	/* Los botones de expandir nivel del árbol (flechas ›) salían como cajas
	   negras: darles aspecto de botón-icono neutro. Cubrimos varias clases
	   posibles del widget. */
	.yoo-cats-sheet__body button,
	.yoo-cats-sheet__body .yoo-cat-toggle,
	.yoo-cats-sheet__body .yoo-lvl-toggle,
	.yoo-cats-sheet__body [class*="toggle"] {
		background: var(--sb-accent-soft) !important;
		color: var(--sb-accent) !important;
		border: 0 !important;
		border-radius: 8px !important;
		width: 34px; height: 34px;
		min-width: 34px;
		display: inline-flex; align-items: center; justify-content: center;
		box-shadow: none !important;
		padding: 0 !important;
	}
	.yoo-cats-sheet__body button svg,
	.yoo-cats-sheet__body [class*="toggle"] svg { stroke: currentColor; }

	/* Filas del árbol: espaciado cómodo, enlaces limpios */
	.yoo-cats-sheet__body a {
		text-decoration: none;
	}

	/* El botón flotante "Solicitar Presupuesto" NO debe asomar sobre el sheet. */
	body.yoo-cats-open .yoo-fm-bubble,
	body.yoo-cats-open .yoo-shopbar { display: none !important; }

	/* ============================================================== *
	 * REDISEÑO PREMIUM del árbol dentro del sheet — línea del header
	 * móvil (mobile-menu.css): filas-tarjeta, icono en cápsula,
	 * contador en píldora, chevron, drill-down deslizante.
	 * ============================================================== */
	--sb-radius-sm:  12px;
	--sb-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

	/* Viewport + track de 2 paneles (raíz | subnivel) */
	.yoo-cats-drill { padding: 0; }
	.yoo-cats-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }
	.yoo-cats-track {
		display: flex; width: 200%; height: 100%;
		transform: translateX(0);
		transition: transform 0.34s var(--sb-ease-out);
	}
	.yoo-cats-drill.is-drilled .yoo-cats-track { transform: translateX(-50%); }
	.yoo-cats-pane {
		width: 50%; height: 100%;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
	}

	/* ============================================================== *
	 * LISTA LIMPIA CON DIVISORES (estilo iOS/ajustes) — ordenado,
	 * denso, con ritmo consistente. Sin tarjetas flotantes.
	 * ============================================================== */
	.yoo-cats-pane { padding: 6px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }

	/* Reset del árbol reutilizado: listas planas, sin bullets ni márgenes */
	.yoo-cats-pane .yoo-vmenu-cats,
	.yoo-cats-pane .yoo-vmenu-panel,
	.yoo-cats-pane ul { list-style: none !important; margin: 0; padding: 0; width: 100%; max-width: none; border: 0; background: transparent; box-shadow: none; }
	.yoo-cats-pane li { list-style: none !important; margin: 0; }
	.yoo-cats-pane li::marker, .yoo-cats-pane li::before { content: none !important; }

	/* Divisor hairline entre filas (una sola línea, no doble): solo en el <li>. */
	.yoo-cats-pane .yoo-category-list-item + .yoo-category-list-item {
		border-top: 1px solid var(--sb-line);
	}
	.yoo-cats-pane .yoo-category-list-item > .yoo-category-row { border-top: 0; }

	/* "Todo el catálogo" — fila destacada, ligera (no bloque azul pesado) */
	.yoo-cats-pane .yoo-cat-all-link {
		display: flex; align-items: center; gap: 12px;
		padding: 13px 16px; margin: 0 0 4px;
		border-radius: 12px;
		background: var(--sb-accent-soft);
		color: var(--sb-accent);
		font-family: var(--sb-font); font-weight: 700; font-size: 0.95rem;
		text-decoration: none;
		transition: background 0.16s var(--sb-ease);
	}
	.yoo-cats-pane .yoo-cat-all-link.active { background: var(--sb-accent); color: #fff; }
	.yoo-cats-pane .yoo-cat-all-link:hover { background: color-mix(in srgb, var(--sb-accent) 16%, #fff); }
	.yoo-cats-pane .yoo-cat-all-icon { display: inline-flex; flex: 0 0 auto; }

	/* Fila de categoría: alto compacto y consistente, sin borde/tarjeta */
	.yoo-cats-pane .yoo-category-row {
		display: flex; align-items: center; gap: 0;
		min-height: 54px;
		padding-right: 8px;
		background: transparent;
		transition: background 0.14s var(--sb-ease);
	}
	.yoo-cats-pane .yoo-category-row:hover,
	.yoo-cats-pane .yoo-category-row:active { background: var(--sb-surface-2); }

	/* Enlace: icono + nombre + contador, todo agrupado */
	.yoo-cats-pane .yoo-category-link {
		flex: 1 1 auto; min-width: 0;
		display: flex; align-items: center; gap: 12px;
		padding: 10px 4px 10px 16px;
		color: var(--sb-ink);
		font-family: var(--sb-font); font-weight: 500; font-size: 0.96rem;
		text-decoration: none;
	}
	.yoo-cats-pane .yoo-category-link.active { color: var(--sb-accent); font-weight: 600; }

	/* Icono en cápsula (más pequeño, coherente) */
	.yoo-cats-pane .yoo-category-icon {
		flex: 0 0 auto; width: 34px; height: 34px;
		display: grid; place-items: center;
		border-radius: 9px;
		background: var(--sb-surface-2);
		color: var(--sb-body);
	}
	.yoo-cats-pane .yoo-category-link.active .yoo-category-icon {
		background: var(--sb-accent-soft); color: var(--sb-accent);
	}
	.yoo-cats-pane .yoo-category-icon svg { width: 18px; height: 18px; }
	.yoo-cats-pane .yoo-category-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }

	/* Contador en píldora — pegado al chevron (agrupado a la derecha) */
	.yoo-cats-pane .yoo-category-count {
		flex: 0 0 auto; order: 3; margin-left: auto;
		font-size: 0.72rem; font-weight: 600; color: var(--sb-muted);
		background: var(--sb-surface-2);
		border-radius: 999px; padding: 2px 8px; min-width: 24px; text-align: center;
	}
	/* Flecha de hojas (sin hijos): pequeña, junto al contador */
	.yoo-cats-pane .yoo-category-arrow--nav {
		flex: 0 0 auto; order: 4; color: var(--sb-muted);
		display: inline-flex; align-items: center; margin-left: 8px;
	}

	/* Chevron (toggle) de las que tienen hijos — SIN separador vertical,
	   alineado consistente con el resto, junto al contador */
	.yoo-cats-pane .yoo-cat-toggle {
		flex: 0 0 auto; order: 5;
		width: 40px; height: 40px;
		display: inline-flex; align-items: center; justify-content: center;
		background: transparent !important; border: 0 !important; box-shadow: none !important;
		color: var(--sb-muted) !important;
		cursor: pointer; padding: 0 !important; margin: 0;
	}
	.yoo-cats-pane .yoo-cat-toggle:hover { color: var(--sb-accent) !important; }
	.yoo-cats-pane .yoo-cat-toggle .yoo-category-arrow svg { width: 18px; height: 18px; }

	/* En el drill-down, los acordeones in situ del widget quedan OCULTOS */
	.yoo-cats-pane .yoo-subcategory-wrapper { display: none !important; }

	/* --- Subpanel: cabecera en FILA — título a la izquierda, Volver a la
	   derecha, alineados verticalmente. --- */
	.yoo-cats-subhead {
		display: flex; flex-direction: row; align-items: center;
		justify-content: space-between; gap: 10px;
		padding: 8px 16px 12px; margin-bottom: 4px;
		border-bottom: 1px solid var(--sb-line);
	}
	/* Volver: !important + auto width/height para vencer estilos de button del tema
	   (que lo dejaban en 34×34 con fondo azul y padding 0). */
	.yoo-cats-sheet .yoo-cats-back {
		display: inline-flex !important; align-items: center; gap: 6px;
		width: auto !important; height: auto !important; min-width: 0 !important;
		padding: 8px 12px 8px 8px !important; margin-left: -8px;
		border: 0 !important; background: transparent !important; box-shadow: none !important;
		font-family: var(--sb-font); font-size: 0.85rem; font-weight: 600;
		color: var(--sb-accent) !important; cursor: pointer; border-radius: 10px;
		-webkit-tap-highlight-color: transparent;
	}
	.yoo-cats-sheet .yoo-cats-back:hover,
	.yoo-cats-sheet .yoo-cats-back:active { background: var(--sb-accent-soft) !important; }
	.yoo-cats-back svg { width: 18px; height: 18px; flex: 0 0 auto; }
	.yoo-cats-subtitle {
		margin: 0; padding: 0;
		font-family: var(--sb-font); font-weight: 700; font-size: 1.15rem; color: var(--sb-ink);
		flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.2;
	}
	.yoo-cats-sheet .yoo-cats-back { flex: 0 0 auto; margin-left: 0; }
	.yoo-cats-all {
		display: flex; align-items: center; gap: 12px;
		padding: 12px 16px; margin: 12px 0 8px;
		border-radius: 12px;
		background: var(--sb-accent-soft); color: var(--sb-accent);
		font-family: var(--sb-font); font-weight: 600; font-size: 0.93rem; text-decoration: none;
	}
	.yoo-cats-all:hover { background: color-mix(in srgb, var(--sb-accent) 16%, #fff); }
	.yoo-cats-all-ico { flex: 0 0 auto; display: inline-flex; }

	/* Reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.yoo-cats-track { transition-duration: 0.12s; }
	}

	/* Bloquear scroll de fondo cuando el sheet está abierto */
	body.yoo-cats-open { overflow: hidden; }

	/* Reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.yoo-cats-sheet__panel,
		.yoo-cats-sheet__overlay { transition-duration: 0.12s; }
	}
}

/* En escritorio la barra y el sheet no existen (el sidebar real de PC sigue). */
@media (min-width: 768px) {
	.yoo-shopbar,
	.yoo-cats-sheet { display: none !important; }
}