/* Categorias destacadas: carrusel continuo de marcas. */
.store-shell .category-layout-brands {
  width: 100%;
  max-width: none;
  overflow: hidden;
}

.store-shell .category-layout-brands .section-title {
  width: min(var(--content-max, 1180px), calc(100% - 40px));
  margin-inline: auto;
}

.store-shell .category-brand-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 18px 0;
  background: color-mix(in srgb, var(--surface) 82%, var(--brand) 18%);
  border-block: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

.store-shell .category-brand-marquee::before,
.store-shell .category-brand-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(36px, 7vw, 120px);
  pointer-events: none;
}

.store-shell .category-brand-marquee::before {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 82%, var(--brand) 18%), transparent);
}

.store-shell .category-brand-marquee::after {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--surface) 82%, var(--brand) 18%), transparent);
}

.store-shell .category-brand-track {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 42px);
  width: max-content;
  padding-inline: 21px;
  animation: qa-brand-marquee 32s linear infinite;
  will-change: transform;
}

.store-shell .category-brand-marquee:hover .category-brand-track {
  animation-play-state: paused;
}

.store-shell .category-brand-item {
  display: grid;
  grid-template-rows: 64px auto;
  place-items: center;
  gap: 7px;
  width: clamp(130px, 12vw, 190px);
  min-height: 96px;
  padding: 12px 18px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: color-mix(in srgb, var(--ink) 58%, var(--surface));
  text-decoration: none;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
}

.store-shell .category-brand-item img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .48;
  transition: filter .25s, opacity .25s, transform .25s;
}

.store-shell .category-brand-item > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: 24px;
  font-weight: 900;
}

.store-shell .category-brand-item b {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-shell .category-brand-item:hover,
.store-shell .category-brand-item:focus-visible {
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-dark) 13%, transparent);
  transform: translateY(-3px);
}

.store-shell .category-brand-item:hover img,
.store-shell .category-brand-item:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

@keyframes qa-brand-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 10.5px)); }
}

@media (max-width: 600px) {
  .store-shell .category-brand-marquee { padding-block: 12px; }
  .store-shell .category-brand-track { gap: 14px; animation-duration: 24s; }
  .store-shell .category-brand-item { width: 128px; grid-template-rows: 52px auto; min-height: 82px; padding: 9px 12px 8px; }
  .store-shell .category-brand-item img { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .store-shell .category-brand-track {
    animation: none;
  }
  .store-shell .category-brand-marquee {
    overflow-x: auto;
  }
}/* Carrusel de marcas: fondo neutro y hover exclusivo sobre el logo. */
.store-shell .category-brand-marquee {
  background: color-mix(in srgb, var(--surface) 94%, var(--ink) 6%) !important;
}
.store-shell .category-brand-marquee::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 94%, var(--ink) 6%), transparent) !important;
}
.store-shell .category-brand-marquee::after {
  background: linear-gradient(270deg, color-mix(in srgb, var(--surface) 94%, var(--ink) 6%), transparent) !important;
}
.store-shell .category-brand-item,
.store-shell .category-brand-item:hover,
.store-shell .category-brand-item:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.store-shell .category-brand-item img {
  filter: grayscale(1) opacity(.48);
  transform: scale(1);
  transform-origin: center;
}
.store-shell .category-brand-item:hover img,
.store-shell .category-brand-item:focus-visible img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}
.store-shell .category-brand-item:hover b,
.store-shell .category-brand-item:focus-visible b {
  color: var(--accent);
}