/* v0.12 · 95-atajos — Atajos por tipo (especificación del 12 nov 2026): pestañas con ícono y subrayado en las categorías con la
   casilla "Mostrar atajos por tipo" (inc/atajos.php). Van antes de las columnas de filtros y grilla, a todo el ancho de la tienda
   (1120px); en el celular, entre "Filtrar y ordenar" y la grilla. Medidas de la especificación; el peso va en 700 y no en
   Semibold 600, por el manual de tipografía del dueño (solo 400 y 700). */

.emx-shop > .emx-atajos{position:relative;margin-top:24px!important;margin-bottom:20px!important}
.emx-shop > .emx-atajos + .emx-shop-cols{margin-top:0!important}
.emx-atajos__fila{position:relative;display:flex;gap:24px;margin:0;padding:0;list-style:none;border-bottom:1px solid #E4E6E9;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.emx-atajos__fila::-webkit-scrollbar{display:none}
.emx-atajos__item{flex:none;margin:0;scroll-snap-align:start}
.emx-atajos__link{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border-bottom:2px solid transparent;color:var(--wp--preset--color--informativo,#5A5F69);font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none;transition:color .15s,border-color .15s}
.emx-atajos__link svg{width:18px;height:18px;fill:currentColor;flex:none}
@media (hover:hover){.emx-atajos__link:hover{color:var(--ink,#212427);border-bottom-color:#C9CDD1;text-decoration:none}}
.emx-atajos__link:focus-visible{outline:3px solid var(--wp--preset--color--celestial,#2695D1);outline-offset:-3px}
/* Seleccionada: el tipo filtrado, o "Todos" si no hay tipo (o hay varios marcados en el panel) */
.emx-atajos__link[aria-current="page"],.emx-atajos__link[aria-current="page"]:hover{color:var(--ink,#212427);border-bottom-color:var(--ink,#212427)}
@media (prefers-reduced-motion:reduce){.emx-atajos__link{transition:none}}

/* Con mouse (no se puede deslizar de lado): si no caben, desvanecido en el borde con más pestañas y flecha (shop.js) */
.emx-atajos__mas{display:none}
@media (hover:hover) and (pointer:fine){
	.emx-atajos.is-r .emx-atajos__fila{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 96px),transparent)}
	.emx-atajos.is-l .emx-atajos__fila{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 96px),transparent)}
	.emx-atajos.is-l.is-r .emx-atajos__fila{-webkit-mask-image:linear-gradient(to right,transparent,#000 96px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(to right,transparent,#000 96px,#000 calc(100% - 96px),transparent)}
	.emx-atajos.is-l .emx-atajos__mas.is-prev,.emx-atajos.is-r .emx-atajos__mas.is-next{display:inline-grid;position:absolute;top:4px;z-index:1;width:36px;height:36px}
	.emx-atajos__mas.is-prev{left:0}
	.emx-atajos__mas.is-next{right:0}
	.emx-atajos__mas svg{width:16px;height:16px}
	.emx-atajos__mas.is-prev svg{transform:scaleX(-1)}
}

/* Celular y tableta: la barra "Filtrar y ordenar" va justo arriba; el aire hasta la grilla lo pone la fila (la grilla trae 20px
   arriba en el celular, theme.css, y se sumaban) */
@media (max-width:781px){
	.emx-shop > .emx-atajos{margin-top:0!important}
	.emx-shop > .emx-atajos + .emx-shop-cols :is(.emx-grid-bar + .emx-grid,.emx-grid-bar + .emx-active,.emx-grid-bar + .emx-empty){margin-top:0}
}
/* Celular: la línea va de borde a borde y la primera pestaña empieza a 16px; 14px hasta la grilla */
@media (max-width:700px){
	.emx-shop > .emx-atajos{margin:0 -16px 14px!important;max-width:none!important}
	.emx-atajos__fila{gap:18px;padding:0 16px;scroll-padding-inline:16px}
	.emx-atajos__link{font-size:13px}
}