/* CustomOBD Web + Tienda 1.9.6 · Ajuste exclusivo de PRESENTACION.
   Basado en la v1.9.5 REAL. Sin JS, sin cambios en catálogo/productos/pedidos/SEO.
   1. El hero crece solo si el texto y los botones lo necesitan.
   2. Alinear el interior del catálogo con el texto de la caja superior.
   3. Categorías con LEDs de color y brillo suave en secuencia. */

/* El alto fijo de 1.9.5 cortaba el botón y el mensaje de confianza en algunos PC. */
.shop-page .shop-hero {
  height: auto;
  min-height: clamp(340px, 29vw, 405px);
}
.shop-page .shop-hero-content {
  min-width: 0;
}
/* En pantallas grandes la imagen no debe imponer su altura vertical al grid.
   Su resolucion original se conserva, rellenando la columna sin recortes raros. */
@media (min-width: 781px) {
  .shop-page .shop-hero-visual {position: relative; min-height: 0;}
  .shop-page .shop-hero-visual > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

/* Alineacion de los EJES DE LECTURA: el contenido del catálogo empieza
   donde empieza "Las piezas correctas", no en el borde exterior del hero.
   El borde inferior del buscador sigue ocupando todo el ancho de la caja. */
@media (min-width: 900px) {
  .shop-page .content-main.shop-main {
    --customobd-inset: clamp(26px, 3.3vw, 46px);
  }
  .shop-page .shop-topline,
  .shop-page .shop-toolbar,
  .shop-page .shop-categories,
  .shop-page .shop-grid,
  .shop-page .shop-no-results {
    box-sizing: border-box;
    padding-inline: var(--customobd-inset);
  }
}
/* En móvil se preserva todo el ancho disponible para fotografías/productos. */
@media (max-width: 899px) {
  .shop-page .shop-topline,
  .shop-page .shop-toolbar,
  .shop-page .shop-categories,
  .shop-page .shop-grid {
    padding-inline: 0;
  }
}

/* LEDs retroiluminados: una señal suave recorre Alientech, Emuladores,
   Displays y Botones. Solo CSS, sin cambiar selección ni comportamiento. */
.shop-page .shop-categories .shop-filter {
  --customobd-led-rgb: 207 48 63;
  position: relative;
}
.shop-page .shop-categories .shop-filter[data-filter="alientech"] {--customobd-led-rgb: 226 181 56;}
.shop-page .shop-categories .shop-filter[data-filter="emuladores"] {--customobd-led-rgb: 69 173 225;}
.shop-page .shop-categories .shop-filter[data-filter="displays"] {--customobd-led-rgb: 236 151 87;}
.shop-page .shop-categories .shop-filter[data-filter="botones"] {--customobd-led-rgb: 231 121 180;}
.shop-page .shop-categories .shop-filter:not(.active):is(
  [data-filter="alientech"],[data-filter="emuladores"],
  [data-filter="displays"],[data-filter="botones"]
) {
  animation: customobd-led-sequence 9.6s ease-in-out infinite;
}
.shop-page .shop-categories .shop-filter[data-filter="alientech"]:not(.active) {animation-delay: 0s;}
.shop-page .shop-categories .shop-filter[data-filter="emuladores"]:not(.active) {animation-delay: 2.4s;}
.shop-page .shop-categories .shop-filter[data-filter="displays"]:not(.active) {animation-delay: 4.8s;}
.shop-page .shop-categories .shop-filter[data-filter="botones"]:not(.active) {animation-delay: 7.2s;}
@keyframes customobd-led-sequence {
  0%, 21%, 100% {
    filter: brightness(1);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .035),
                0 0 0 0 rgb(var(--customobd-led-rgb) / 0);
  }
  8%, 12% {
    filter: brightness(1.24);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10),
                0 0 18px 3px rgb(var(--customobd-led-rgb) / .29);
  }
  17% {
    filter: brightness(1.08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05),
                0 0 8px 1px rgb(var(--customobd-led-rgb) / .12);
  }
}
.shop-page .shop-categories .shop-filter:hover,
.shop-page .shop-categories .shop-filter:focus-visible {
  animation: none;
  filter: brightness(1.17);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09),
              0 0 16px 2px rgb(var(--customobd-led-rgb) / .24);
}
/* Selección estable: brilla el color activo sin intermitencia. */
.shop-page .shop-categories .shop-filter.active {
  animation: none;
  filter: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09),
              0 0 11px 1px rgb(var(--customobd-led-rgb) / .16);
}
@media (prefers-reduced-motion: reduce) {
  .shop-page .shop-categories .shop-filter {
    animation: none !important;
    filter: none !important;
  }
}