/* Marketplace AX — catálogo público, Liquid Glass sobre fondo mesh. */

/* ── Breadcrumbs (compartido por toda página pública) ────────────────── */
.mkt-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mkt-breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color .2s var(--mkt-ease); }
.mkt-breadcrumbs a:hover { color: var(--mkt-accent); }
.mkt-breadcrumb-actual { color: var(--text); font-weight: 600; }

/* layout.css pone `html, body { height:100%; overflow:hidden }` pensado para el shell
   interno (sidebar+topbar), que scrollea solo dentro de `.page-content`. Las páginas
   públicas del marketplace no tienen ese contenedor — hay que devolverle el scroll
   normal al body o el contenido bajo el viewport queda inalcanzable. */
html:has(body.mkt-catalogo-body) { height: auto; overflow: visible; }
.mkt-catalogo-body {
  background: var(--mkt-mesh-bg);
  background-image: var(--mkt-mesh);
  /* Sin background-attachment:fixed (ver nota en marketplace.css) — junto a
     los backdrop-filter de header/cards obligaba a recomponer el blur en
     cada frame de scroll. */
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--mkt-font);
}

.mkt-catalogo-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 20px 24px;
  padding: 12px 20px;
  border-radius: var(--mkt-radius-pill);
  /* Ronda 18 — lag real reportado en producto.php: .mkt-catalogo-header hereda
     backdrop-filter del bloque compartido en marketplace.css, pero al ser
     position:sticky, una vez "pegado" arriba tiene contenido scrolleando
     detrás en TODA página pública — más notorio en producto.php por ser la
     más larga (tabs, carrusel, reseñas, calendario). Mismo criterio anti-lag
     ya usado en mi-tienda/catálogo/networking (Rondas 2/9/13/14): fondo
     sólido en vez de blur. Esta regla, al cargar después de marketplace.css
     con la misma especificidad, gana por orden de cascada. */
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 640px) {
  .mkt-catalogo-header { margin-left: auto; margin-right: auto; max-width: 1100px; }
}
.mkt-catalogo-brand {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
}
.mkt-brand-logo { display: flex; align-items: center; justify-content: center; }
.mkt-brand-img { display: none; max-height: 26px; max-width: 140px; width: auto; object-fit: contain; }
.has-logo-navy .mkt-brand-img--navy { display: block; }
.has-logo-navy .mkt-brand-default { display: none; }
[data-theme="light"] .has-logo-light .mkt-brand-img--navy  { display: none; }
[data-theme="light"] .has-logo-light .mkt-brand-img--light { display: block; }
[data-theme="light"] .has-logo-light .mkt-brand-default    { display: none; }
.mkt-brand-default {
  color: var(--mkt-accent);
  font-size: .9rem;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(var(--mkt-accent-rgb), .14);
}
.mkt-brand-sub {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 1px;
}
.mkt-catalogo-nav { display: flex; align-items: center; gap: 14px; }
.mkt-catalogo-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s var(--mkt-ease);
}
.mkt-catalogo-nav a:hover { color: var(--mkt-accent); }
.mkt-catalogo-nav a.mkt-cart-count {
  font-size: .82rem;
  font-weight: 700;
  color: var(--mkt-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mkt-catalogo-nav a.mkt-cart-count:hover { color: var(--mkt-accent-dark, var(--mkt-accent)); }

.mkt-catalogo-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* Modo embed (Ronda 24, <iframe> same-origin) — sin header propio, la página
   necesita un respiro arriba en vez del margen que dejaba .mkt-catalogo-header. */
.mkt-embed .mkt-catalogo-main { padding-top: 24px; }

/* Barra de cuenta del embed — el comprador solo conoce el dominio del
   vendedor, nunca ve el header completo (oculto arriba), así que necesita un
   link mínimo para loguearse/registrarse o volver a su portal. Los links
   usan target="_top": el login real NUNCA pasa dentro del iframe cross-origin
   (cookies de terceros bloqueadas en Safari y cada vez más navegadores). */
.mkt-embed-cuenta {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 0;
}

.mkt-catalogo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.mkt-catalogo-filtros input[type="text"] {
  flex: 1;
  min-width: 220px;
  background: var(--glass-input-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-pill);
  padding: 11px 18px;
  color: var(--text);
  font-size: .87rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--mkt-ease), box-shadow .2s var(--mkt-ease);
}
.mkt-catalogo-filtros input[type="text"]:focus {
  border-color: rgba(var(--mkt-accent-rgb), .5);
  box-shadow: 0 0 0 4px rgba(var(--mkt-accent-rgb), .12);
}
.mkt-catalogo-filtros select {
  background: var(--glass-input-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-input-border);
  border-radius: var(--mkt-radius-pill);
  padding: 11px 16px;
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
}
/* Ronda 18 — el fix de Ronda 16 (`color-scheme: dark light;`) le decía al
   navegador "cualquiera de los dos sirve", así que terminaba pintando el
   popup nativo de <option> según la preferencia del SISTEMA OPERATIVO del
   usuario, no según el tema REAL del sitio (data-theme) — si el SO estaba en
   claro y el sitio en navy, el popup salía blanco igual, look "sin estilo"/
   inconsistente. Corregido: valor único que coincide con el tema activo del
   sitio en cada caso, nunca delegado al SO. Mismo criterio aplica a
   .mkt-field select (marketplace.css, mi-tienda/personalizar.php incl.). */
.mkt-catalogo-filtros select { color-scheme: dark; }
[data-theme="light"] .mkt-catalogo-filtros select { color-scheme: light; }

.mkt-catalogo-empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
}
.mkt-catalogo-empty i { font-size: 2.2rem; margin-bottom: 14px; display: block; color: rgba(var(--mkt-accent-rgb), .35); }

/* ── Página pública de una tienda de vendedor (Ronda 15/16) ────────────
   El bloque "tienda-header" (logo grande + nombre + bio) se quitó — quedaba
   redundante con el logo/nombre de la tienda ya en el navbar (white-label). ── */

/* Logo de tienda en el navbar más grande que el logo chico de plataforma
   (pedido explícito) — scopeado a .mkt-catalogo-brand--tienda para no tocar
   el tamaño del logo de AlterXpert en el catálogo general/networking. */
.mkt-catalogo-brand--tienda .mkt-brand-img { max-height: 42px; max-width: 220px; }
.mkt-catalogo-brand--tienda .mkt-brand-tienda-nombre { font-size: 1.15rem; }

/* Fondo de tienda personalizado (Ronda 16, ajustado Ronda 17) — capa fija y
   desenfocada DETRÁS de todo el contenido (position:fixed + filter:blur, no
   backdrop-filter). Al no scrollear ni tener contenido pasando "detrás" para
   resamplear, el navegador la compone una sola vez — mismo criterio anti-lag
   de las rondas 9/13/14. De paso, al cubrir el viewport completo desde el
   borde superior soluciona la franja del fondo de <html> (--surface-0)
   asomando arriba del header — antes solo lo pintaba body, esta capa fija no
   deja huecos.
   z-index EXPLÍCITO (0 para el fondo, 1 para el contenido) en vez de
   z-index negativo — más robusto/menos ambiguo entre navegadores que
   depender de las reglas de stacking de contenido no-posicionado.
   Una sola capa de background-image por regla (sin listas separadas por
   coma) — evitar el error real de la Ronda 16: combinar
   `var(--mkt-mesh), var(--mkt-tf-image)` (--mkt-mesh ya es una lista de 3
   gradientes, quedaban 4 capas) con `background-size: auto, cover` (solo 2
   valores) obligaba al navegador a CICLAR los valores por capa — frágil y
   difícil de razonar. Con foto real del vendedor tampoco tiene sentido
   dibujar el mesh de acento encima: lo tapaba/deslavaba, volviéndola
   irreconocible ("no se puede visualizar el fondo que subió el usuario"). */
.mkt-catalogo-body--tienda-fondo {
  background: var(--mkt-tf-color, var(--mkt-mesh-bg));
}
.mkt-catalogo-body--tienda-fondo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--mkt-tf-color, var(--mkt-mesh-bg));
  background-image: var(--mkt-mesh);
  background-repeat: no-repeat;
  background-position: center;
}
.mkt-catalogo-body--tienda-fondo-imagen::before {
  inset: -30px;
  background-color: var(--mkt-mesh-bg);
  background-image: var(--mkt-tf-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(14px);
  transform: scale(1.04);
}
/* Fondo por tema: si el vendedor subió una foto específica para el tema
   claro (--mkt-tf-image-light), se usa esa en vez de la de navy. Si no
   subió una, --mkt-tf-image-light nunca se define y el navegador ignora
   esta regla (fallback natural a la declaración de arriba). */
[data-theme="light"] .mkt-catalogo-body--tienda-fondo-imagen::before {
  background-image: var(--mkt-tf-image-light, var(--mkt-tf-image));
}
/* Velo oscuro sobre la foto del vendedor: una foto puede ser clara u oscura
   según lo que suban, así que el texto plano que va directo sobre el fondo
   (breadcrumb, títulos, descripción — nunca dentro de una card de vidrio)
   necesita contraste garantizado sin importar la foto. Texto claro fijo
   (mismo tono que el tema navy) porque el velo ya deja el fondo
   suficientemente oscuro en los dos temas. */
.mkt-catalogo-body--tienda-fondo-imagen::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 24, .5), rgba(8, 12, 24, .68));
}
.mkt-catalogo-body--tienda-fondo .mkt-catalogo-main,
.mkt-catalogo-body--tienda-fondo .mkt-footer {
  position: relative;
  z-index: 1;
}
.mkt-catalogo-body--tienda-fondo-imagen .mkt-breadcrumbs,
.mkt-catalogo-body--tienda-fondo-imagen .mkt-producto-head,
.mkt-catalogo-body--tienda-fondo-imagen .mkt-producto-desc,
.mkt-catalogo-body--tienda-fondo-imagen .mkt-curso-head,
.mkt-catalogo-body--tienda-fondo-imagen .mkt-alert-info {
  --text: #f1f5f9;
  --text-muted: rgba(241, 245, 249, .7);
}

.mkt-catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.mkt-prod-card {
  position: relative;
  /* Sin backdrop-filter por card: con un grid grande (hasta 60 productos),
     un blur+saturate por card es muy costoso de renderizar (lag real al
     hacer scroll). Fondo más opaco en su lugar, sin blur, para mantener el
     look "glass" sin ese costo — el header/footer (una sola instancia)
     conservan el blur. */
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--mkt-radius);
  box-shadow: var(--mkt-glass-shadow-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
  transition: transform .3s var(--mkt-spring), box-shadow .3s var(--mkt-ease), border-color .3s var(--mkt-ease);
  animation: mkt-card-in .5s var(--mkt-ease) backwards;
}
.mkt-prod-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--mkt-glass-highlight), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.mkt-prod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mkt-glass-shadow);
  border-color: rgba(var(--mkt-accent-rgb), .3);
}
.mkt-prod-card.mkt-prod-vitrina { opacity: .62; }

@keyframes mkt-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.mkt-catalogo-grid .mkt-prod-card:nth-child(1) { animation-delay: .02s; }
.mkt-catalogo-grid .mkt-prod-card:nth-child(2) { animation-delay: .06s; }
.mkt-catalogo-grid .mkt-prod-card:nth-child(3) { animation-delay: .10s; }
.mkt-catalogo-grid .mkt-prod-card:nth-child(4) { animation-delay: .14s; }
.mkt-catalogo-grid .mkt-prod-card:nth-child(5) { animation-delay: .18s; }
.mkt-catalogo-grid .mkt-prod-card:nth-child(6) { animation-delay: .22s; }

.mkt-prod-portada-link { display: block; margin: -18px -18px 4px; }
.mkt-prod-portada-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--mkt-radius) var(--mkt-radius) 0 0;
}
.mkt-prod-portada-thumb-vacia {
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--mkt-accent-rgb), .06);
  color: rgba(var(--mkt-accent-rgb), .3);
  font-size: 1.8rem;
}

.mkt-prod-top { display: flex; justify-content: space-between; align-items: center; }
.mkt-prod-nombre-link { text-decoration: none; }
.mkt-prod-nombre { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin: 0; }
.mkt-prod-tienda {
  font-size: .78rem; color: var(--text-muted); margin: 0;
  display: flex; align-items: center; gap: 5px; text-decoration: none;
  transition: color .2s var(--mkt-ease);
}
.mkt-prod-tienda:hover { color: var(--mkt-accent); }
.mkt-prod-autor { font-size: .74rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; margin-top: -6px; }
.mkt-prod-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin: 0; flex: 1; }

.mkt-prod-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}
.mkt-prod-precio {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mkt-accent);
  font-variant-numeric: tabular-nums;
}
.mkt-prod-precio-cotizar { font-size: .86rem; font-weight: 600; opacity: .85; }
.mkt-prod-bottom .mkt-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Alternativa B de organización de cards: "lista editorial" (Ronda 15,
   personalización de tienda) — una sola columna ancha, imagen a la
   izquierda, más aire para la descripción. 100% CSS, mismo markup que el
   grid (A) — el vendedor elige cuál usar desde mi-tienda/personalizar.php. ── */
.mkt-catalogo-grid--lista {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
}
.mkt-catalogo-grid--lista .mkt-prod-card {
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
}
.mkt-catalogo-grid--lista .mkt-prod-portada-link {
  flex: 0 0 200px;
  margin: -18px 0 -18px -18px;
  align-self: stretch;
}
.mkt-catalogo-grid--lista .mkt-prod-portada-thumb,
.mkt-catalogo-grid--lista .mkt-prod-portada-thumb-vacia {
  width: 200px;
  height: 100%;
  aspect-ratio: auto;
  border-radius: var(--mkt-radius) 0 0 var(--mkt-radius);
}
@media (max-width: 640px) {
  .mkt-catalogo-grid--lista .mkt-prod-card { flex-direction: column; }
  .mkt-catalogo-grid--lista .mkt-prod-portada-link { margin: -18px -18px 4px; align-self: auto; }
  .mkt-catalogo-grid--lista .mkt-prod-portada-thumb,
  .mkt-catalogo-grid--lista .mkt-prod-portada-thumb-vacia {
    width: 100%; height: auto; aspect-ratio: 4 / 3;
    border-radius: var(--mkt-radius) var(--mkt-radius) 0 0;
  }
}

/* ── Footer público (Liquid Glass, mismo panel que el header) ────────── */
.mkt-footer {
  max-width: 1100px;
  margin: 50px auto 0;
  padding: 0 20px;
}
.mkt-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 26px;
  border-radius: var(--mkt-radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--mkt-glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--mkt-glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--mkt-glass-shadow-sm);
}
/* ── Barra de confianza de pago (Mercado Pago) ───────────────────────── */
.mkt-footer-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
}
.mkt-footer-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.mkt-footer-trust-item i {
  color: var(--mkt-accent);
  font-size: 1rem;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--mkt-accent-rgb), .12);
}
.mkt-footer-trust-item strong { color: var(--text); }
.mkt-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.mkt-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mkt-footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.mkt-footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  transition: color .2s var(--mkt-ease);
}
.mkt-footer-nav a:hover { color: var(--mkt-accent); }
.mkt-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 6px 40px;
  font-size: .74rem;
  color: var(--text-muted);
}

/* «Usar el fondo de mi sitio» (interruptor en Personalizar tienda): dentro de un iframe (?embed=1) la página no pinta fondo
   propio, así se ve el de la página anfitriona. color-scheme normal evita que el navegador pinte un lienzo opaco detrás del
   iframe cuando el sitio anfitrión y la tienda declaran esquemas distintos. */
html:has(body.mkt-embed-transp), body.mkt-embed-transp { background: transparent !important; color-scheme: normal; }
body.mkt-embed-transp::before, body.mkt-embed-transp::after { display: none !important; }
/* Con «Usar el fondo de mi sitio» la tienda debe verse como parte de la página anfitriona: sin respiros extra arriba. */
.mkt-embed-transp .mkt-embed-cuenta { padding-top: 0; }
.mkt-embed.mkt-embed-transp .mkt-catalogo-main { padding-top: 6px; }

/* Ronda 68 — selects de los filtros (tipo de producto / categoría) con la estética de la plataforma: sin el aspecto nativo del
   navegador, flecha propia, vidrio, y el desplegable (<option>) con el color del tema activo. */
.mkt-catalogo-filtros select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-color: var(--glass-input-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  transition: border-color .2s var(--mkt-ease), box-shadow .2s var(--mkt-ease);
}
.mkt-catalogo-filtros select:hover { border-color: rgba(var(--mkt-accent-rgb), .6); }
.mkt-catalogo-filtros select:focus { outline: none; border-color: var(--mkt-accent); box-shadow: 0 0 0 3px rgba(var(--mkt-accent-rgb), .22); }
.mkt-catalogo-filtros select option { background: #0f1b2d; color: #e5e7eb; }
[data-theme="light"] .mkt-catalogo-filtros select option { background: #ffffff; color: #1e293b; }
/* layout.css pinta los select en tema claro con `html[data-theme="light"] select` (más específico): se reafirma aquí la flecha y el vidrio. */
html[data-theme="light"] .mkt-catalogo-filtros select {
  background-color: rgba(255, 255, 255, .78);
  border-radius: var(--mkt-radius-pill);
  box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  border-color: rgba(60, 60, 67, .18);
  color: #1e293b;
}
html[data-theme="light"] .mkt-catalogo-filtros select:focus { border-color: var(--mkt-accent); box-shadow: 0 0 0 3px rgba(var(--mkt-accent-rgb), .22); }

/* Móvil: el buscador y los filtros ya no tapan el banner. En pantallas angostas los filtros dejan de flotar sobre la imagen y pasan a un panel
   propio al pie del banner: la imagen queda de fondo de todo el bloque, el nombre se ve en una franja de 150 px arriba y los campos se acomodan
   en rejilla (búsqueda + botón en la primera fila, los dos selects lado a lado en la segunda). */
@media (max-width: 640px) {
  .mkt-banner.has-media:has(.mkt-banner-bottom) { height: auto !important; padding-top: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
  .mkt-banner.has-media:has(.mkt-banner-bottom) .mkt-banner-overlay { bottom: auto; height: 150px; padding: 14px 18px; }
  .mkt-banner.has-media .mkt-banner-bottom { position: relative; left: auto; right: auto; bottom: auto; padding: 10px; background: linear-gradient(0deg, rgba(2, 8, 20, .72), rgba(2, 8, 20, .38)); }
  .mkt-banner-bottom .mkt-catalogo-filtros { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 0; }
  .mkt-banner-bottom .mkt-catalogo-filtros input[type="text"] { grid-column: 1 / span 4; grid-row: 1; min-width: 0; width: 100%; box-sizing: border-box; }
  .mkt-banner-bottom .mkt-catalogo-filtros .mkt-btn { grid-column: 5 / span 2; grid-row: 1; justify-content: center; padding-left: 10px; padding-right: 10px; }
  .mkt-banner-bottom .mkt-catalogo-filtros select { grid-column: span 3; width: 100%; min-width: 0; box-sizing: border-box; padding-left: 14px; padding-right: 30px; text-overflow: ellipsis; }
}