/*
 * El banner editorial usa dos capas cuando hay degradado: gradiente + imagen.
 * Cada capa necesita su propio valor de size/position/repeat; si se declara uno
 * solo, la imagen conserva "auto" y en móvil queda como una franja panorámica.
 */
.store-shell .hero-editorial.has-image {
  background-size: cover, cover !important;
  background-position: var(--qa-editorial-position, center), var(--qa-editorial-position, center) !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Sin degradado queda una sola capa. Los valores adicionales son inocuos. */
.store-shell .hero-editorial.has-image[style*="url("] {
  background-size: cover, cover !important;
}

@media (max-width: 900px) {
  .store-shell .hero-editorial {
    min-height: clamp(380px, 96vw, 460px) !important;
    padding-top: clamp(48px, 12vw, 68px) !important;
    padding-bottom: clamp(48px, 12vw, 68px) !important;
  }

  .store-shell .hero-editorial h1 {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.05;
  }
}

/* La vista previa móvil vive en un viewport de escritorio y no activa el media query. */
.admin .preview-mobile .store-shell .hero-editorial {
  min-height: 420px !important;
  padding-top: 52px !important;
  padding-bottom: 52px !important;
  background-size: cover, cover !important;
  background-position: var(--qa-editorial-position, center), var(--qa-editorial-position, center) !important;
  background-repeat: no-repeat, no-repeat !important;
}

.admin .preview-mobile .store-shell .hero-editorial h1 {
  font-size: clamp(36px, 10vw, 46px);
  line-height: 1.05;
}