/* Navegacion: composicion centrada, preview clasica fluida y menu movil con contraste */
@media (min-width: 761px) {
  .store-shell .navbar-centered .nav-primary {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 13px;
    min-height: 0 !important;
    padding: 18px 5% !important;
  }

  .store-shell .navbar-centered .brand-logo {
    position: static !important;
    width: auto;
    max-width: min(100%, 240px);
    transform: none !important;
  }

  .store-shell .navbar-centered .nav-center {
    display: flex !important;
    grid-column: auto;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
  }

  .store-shell .navbar-centered .nav-tools {
    display: grid !important;
    grid-template-columns: repeat(2, 42px);
    grid-template-rows: 42px 42px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 9px 12px;
    width: min(100%, 360px) !important;
    min-height: 0;
  }

  .store-shell .navbar-centered .nav-tools > .search-box {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 42px;
  }

  .store-shell .navbar-centered .nav-tools > .search-box form {
    width: 100% !important;
    max-width: 360px;
  }

  .store-shell .navbar-centered .nav-tools > .account-menu {
    display: flex !important;
    grid-column: 1;
    grid-row: 2;
  }

  .store-shell .navbar-centered .nav-tools > .cart-button {
    display: flex !important;
    grid-column: 2;
    grid-row: 2;
  }

  .store-shell .navbar-centered .mobile-menu-toggle {
    display: none !important;
  }

  .store-shell .navbar-classic .nav-primary {
    grid-template-columns: minmax(90px, 170px) minmax(300px, 1fr) minmax(240px, 300px) !important;
    gap: clamp(12px, 2vw, 30px);
  }

  .store-shell .navbar-classic .brand-logo {
    min-width: 0;
    max-width: 170px;
  }

  .store-shell .navbar-classic .brand-logo img {
    width: auto;
    max-width: 100%;
  }

  .store-shell .navbar-classic .nav-center {
    min-width: 0;
    gap: clamp(12px, 1.7vw, 28px);
  }

  .store-shell .navbar-classic .nav-tools {
    min-width: 0;
  }

  .store-shell .navbar-classic .nav-tools .search-box,
  .store-shell .navbar-classic .nav-tools .search-box form {
    min-width: 0;
    width: min(100%, 210px) !important;
  }
}

.store-shell .mobile-menu-toggle,
.preview-mobile .mobile-menu-toggle {
  color: var(--nav-ink, var(--ink)) !important;
  border: 1px solid color-mix(in srgb, var(--nav-ink, var(--ink)) 34%, transparent) !important;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nav-ink, var(--ink)) 12%, transparent) !important;
}

.store-shell .mobile-menu-toggle:hover,
.preview-mobile .mobile-menu-toggle:hover,
.store-shell .mobile-menu-toggle.open,
.preview-mobile .mobile-menu-toggle.open {
  background: color-mix(in srgb, var(--nav-ink, var(--ink)) 20%, transparent) !important;
}

.store-shell .mobile-menu-toggle span,
.preview-mobile .mobile-menu-toggle span {
  background: currentColor !important;
}

/* Unificacion visual storefront/preview: logo, buscador y simulacion responsive */
.store-shell .brand-logo {
  box-sizing: border-box;
  width: min(calc(var(--logo-size, 54px) * 3.5), 280px, 100%) !important;
  max-width: min(calc(var(--logo-size, 54px) * 3.5), 280px, 100%) !important;
  height: calc(var(--logo-size, 54px) + 10px) !important;
  flex: 0 1 min(calc(var(--logo-size, 54px) * 3.5), 280px) !important;
  overflow: visible;
}

.store-shell .brand-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: var(--logo-size, 54px) !important;
  object-fit: contain;
}

@media (min-width: 761px) {
  .store-shell .navbar-centered .nav-tools {
    width: min(100%, 500px) !important;
    grid-template-columns: repeat(2, 44px);
  }

  .store-shell .navbar-centered .nav-tools > .search-box form {
    width: 100% !important;
    max-width: 500px !important;
  }

  .store-shell .navbar-classic .nav-primary {
    grid-template-columns: minmax(120px, 280px) minmax(280px, 1fr) minmax(330px, 420px) !important;
  }

  .store-shell .navbar-classic .brand-logo {
    max-width: min(calc(var(--logo-size, 54px) * 3.5), 240px) !important;
  }

  .store-shell .navbar-classic .nav-tools .search-box,
  .store-shell .navbar-classic .nav-tools .search-box form {
    width: min(100%, 330px) !important;
  }
}

/* El modo movil del editor debe ganar aun cuando la ventana exterior sea grande. */
.preview-mobile .store-shell .navbar-centered .nav-primary,
.preview-mobile .store-shell .navbar-classic .nav-primary,
.preview-mobile .store-shell .navbar-minimal .nav-primary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: max(68px, calc(var(--logo-size, 54px) + 16px)) !important;
  padding: 0 16px !important;
}

.preview-mobile .store-shell .navbar-centered .brand-logo,
.preview-mobile .store-shell .navbar-classic .brand-logo,
.preview-mobile .store-shell .navbar-minimal .brand-logo {
  position: static !important;
  width: min(calc(var(--logo-size, 54px) * 3.5), 230px, calc(100% - 4px)) !important;
  max-width: min(calc(var(--logo-size, 54px) * 3.5), 230px, calc(100% - 4px)) !important;
  height: calc(var(--logo-size, 54px) + 8px) !important;
  transform: none !important;
}

.preview-mobile .store-shell .navbar-centered .brand-logo img,
.preview-mobile .store-shell .navbar-classic .brand-logo img,
.preview-mobile .store-shell .navbar-minimal .brand-logo img {
  max-height: var(--logo-size, 54px) !important;
}

.preview-mobile .store-shell .navbar-centered .nav-center,
.preview-mobile .store-shell .navbar-classic .nav-center,
.preview-mobile .store-shell .navbar-minimal .nav-center,
.preview-mobile .store-shell .navbar-centered .nav-tools > .search-box,
.preview-mobile .store-shell .navbar-classic .nav-tools > .search-box,
.preview-mobile .store-shell .navbar-minimal .nav-tools > .search-box,
.preview-mobile .store-shell .nav-tools > .account-menu,
.preview-mobile .store-shell .nav-tools > .cart-button,
.preview-mobile .store-shell .nav-secondary {
  display: none !important;
}

.preview-mobile .store-shell .navbar-centered .nav-tools,
.preview-mobile .store-shell .navbar-classic .nav-tools,
.preview-mobile .store-shell .navbar-minimal .nav-tools {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-height: 42px;
}

.preview-mobile .store-shell .navbar-centered .mobile-menu-toggle,
.preview-mobile .store-shell .navbar-classic .mobile-menu-toggle,
.preview-mobile .store-shell .navbar-minimal .mobile-menu-toggle {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Ajuste individual: buscador de la navegacion */
@media (min-width: 761px) {
  .store-shell .navbar-centered .nav-tools {
    width: min(100%, 560px) !important;
  }

  .store-shell .navbar-centered .nav-tools > .search-box,
  .store-shell .navbar-centered .nav-tools > .search-box form {
    width: 100% !important;
    max-width: 560px !important;
  }

  .store-shell .navbar-classic .nav-primary {
    grid-template-columns: minmax(120px, 240px) minmax(260px, 1fr) minmax(340px, 480px) !important;
  }

  .store-shell .navbar-classic .nav-tools {
    width: 100%;
  }

  .store-shell .navbar-classic .nav-tools > .search-box,
  .store-shell .navbar-classic .nav-tools > .search-box form {
    width: 100% !important;
    max-width: 420px !important;
  }
}

.store-shell .mobile-nav-drawer > .search-box,
.store-shell .mobile-nav-drawer > .search-box form,
.preview-mobile .store-shell .mobile-nav-drawer > .search-box,
.preview-mobile .store-shell .mobile-nav-drawer > .search-box form {
  width: 100% !important;
  max-width: none !important;
}

/* Correccion: el buscador centrado no debe limitarse al ancho de las dos columnas de iconos */
@media (min-width: 761px) {
  .store-shell .navbar-centered .nav-tools > .search-box {
    justify-self: center;
    width: min(560px, 86vw) !important;
    max-width: none !important;
  }

  .store-shell .navbar-centered .nav-tools > .search-box form {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Ajuste individual: escalado real y proporcional del logo */
.store-shell .brand-logo {
  width: auto !important;
  max-width: none !important;
  height: calc(var(--logo-size, 54px) + 8px) !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.store-shell .brand-logo img {
  display: block;
  width: auto !important;
  height: var(--logo-size, 54px) !important;
  max-width: min(40vw, 420px) !important;
  max-height: none !important;
  object-fit: contain;
}

@media (min-width: 761px) {
  .store-shell .navbar-classic .nav-primary {
    grid-template-columns: auto minmax(260px, 1fr) minmax(340px, 480px) !important;
  }

  .store-shell .navbar-classic .brand-logo,
  .store-shell .navbar-centered .brand-logo,
  .store-shell .navbar-minimal .brand-logo {
    width: auto !important;
    max-width: none !important;
  }
}

/* La misma escala dentro de la simulacion movil, conservando lugar para el menu. */
.preview-mobile .store-shell .brand-logo {
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  height: calc(var(--logo-size, 54px) + 8px) !important;
}

.preview-mobile .store-shell .brand-logo img {
  width: auto !important;
  height: var(--logo-size, 54px) !important;
  max-width: min(65vw, 260px) !important;
  max-height: none !important;
}

@media (max-width: 760px) {
  .store-shell .brand-logo {
    width: auto !important;
    max-width: calc(100% - 8px) !important;
  }

  .store-shell .brand-logo img {
    width: auto !important;
    height: var(--logo-size, 54px) !important;
    max-width: min(65vw, 260px) !important;
    max-height: none !important;
  }
}

/* Preview/header: evitar superposicion en la variante Clasica (navbar-minimal). */
@media (min-width: 761px) {
  .store-shell .navbar-minimal .nav-primary {
    display: grid !important;
    grid-template-columns: auto minmax(320px, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(20px, 2.5vw, 42px) !important;
    padding: 0 5% !important;
  }

  .store-shell .navbar-minimal .nav-tools {
    position: static !important;
    grid-column: 2 / 4 !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) 42px 42px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .store-shell .navbar-minimal .nav-tools > .search-box {
    position: static !important;
    display: block !important;
    width: 100% !important;
    transform: none !important;
  }

  .store-shell .navbar-minimal .nav-tools > .search-box form {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Icono estable: tres lineas visibles y una X clara al abrir. */
.store-shell .mobile-menu-toggle,
.preview-mobile .store-shell .mobile-menu-toggle {
  position: relative !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.store-shell .mobile-menu-toggle span,
.preview-mobile .store-shell .mobile-menu-toggle span {
  position: absolute !important;
  left: 9px !important;
  width: 22px !important;
  height: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  background: currentColor !important;
  transform-origin: center !important;
}

.store-shell .mobile-menu-toggle span:nth-child(1),
.preview-mobile .store-shell .mobile-menu-toggle span:nth-child(1) {
  top: 12px !important;
}

.store-shell .mobile-menu-toggle span:nth-child(2),
.preview-mobile .store-shell .mobile-menu-toggle span:nth-child(2) {
  top: 19px !important;
}

.store-shell .mobile-menu-toggle span:nth-child(3),
.preview-mobile .store-shell .mobile-menu-toggle span:nth-child(3) {
  top: 26px !important;
}

.store-shell .mobile-menu-toggle.open span:nth-child(1),
.preview-mobile .store-shell .mobile-menu-toggle.open span:nth-child(1) {
  top: 19px !important;
  transform: rotate(45deg) !important;
}

.store-shell .mobile-menu-toggle.open span:nth-child(2),
.preview-mobile .store-shell .mobile-menu-toggle.open span:nth-child(2) {
  opacity: 0 !important;
}

.store-shell .mobile-menu-toggle.open span:nth-child(3),
.preview-mobile .store-shell .mobile-menu-toggle.open span:nth-child(3) {
  top: 19px !important;
  transform: rotate(-45deg) !important;
}

/* El menu abierto queda dentro del telefono de la preview. */
.preview-mobile .store-shell .navbar {
  position: relative !important;
  overflow: visible !important;
}

.preview-mobile .store-shell .mobile-nav-drawer {
  position: absolute !important;
  z-index: 105 !important;
  top: 100% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  max-height: min(560px, calc(100vh - 190px)) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.preview-mobile .store-shell .mobile-nav-backdrop {
  display: none !important;
}

.preview-mobile .store-shell .mobile-nav-drawer a,
.preview-mobile .store-shell .mobile-nav-drawer summary {
  color: var(--ink) !important;
}

/* Ajuste individual: el menu movil de la preview replica el storefront. */
.preview-mobile .store-shell .mobile-nav-drawer {
  box-sizing: border-box !important;
  min-height: 580px !important;
  max-height: 620px !important;
  padding: 18px !important;
  gap: 4px !important;
  font-family: var(--store-font) !important;
  font-size: calc(14px * var(--type-scale, 1)) !important;
  line-height: 1.35 !important;
  box-shadow: 0 22px 45px #0003 !important;
}

.preview-mobile .store-shell .mobile-nav-drawer > .search-box {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 10px !important;
}

.preview-mobile .store-shell .mobile-nav-drawer > .search-box form {
  display: flex !important;
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
}

.preview-mobile .store-shell .mobile-nav-drawer > a,
.preview-mobile .store-shell .mobile-category-menu > a,
.preview-mobile .store-shell .mobile-category-menu summary,
.preview-mobile .store-shell .mobile-category-menu details > a {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 11px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ink) !important;
  font: 700 calc(14px * var(--type-scale, 1))/1.35 var(--store-font) !important;
  text-decoration: none !important;
  list-style: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-mobile .store-shell .mobile-category-menu,
.preview-mobile .store-shell .mobile-category-menu details {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.preview-mobile .store-shell .mobile-category-menu summary::marker {
  display: none !important;
  content: "" !important;
}

.preview-mobile .store-shell .mobile-category-menu summary::-webkit-details-marker {
  display: none !important;
}

.preview-mobile .store-shell .mobile-category-menu details > a {
  padding-left: 24px !important;
  font-weight: 500 !important;
}

.preview-mobile .store-shell .mobile-nav-drawer hr {
  width: 100% !important;
  margin: 7px 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
}

/* Ajuste individual: Texto destacado en preview movil usa la escala movil real. */
.preview-mobile .store-shell .featured-text {
  box-sizing: border-box !important;
  padding: 50px 20px !important;
}

.preview-mobile .store-shell .featured-text-inner,
.preview-mobile .store-shell .featured-text-card .featured-text-inner,
.preview-mobile .store-shell .featured-text-highlight .featured-text-inner {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 40px !important;
}

.preview-mobile .store-shell .featured-text h2 {
  max-width: 100% !important;
  font-size: 36px !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.preview-mobile .store-shell .featured-text h3 {
  max-width: 100% !important;
  margin-top: 18px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

.preview-mobile .store-shell .featured-text-content {
  max-width: 100% !important;
  margin-top: 22px !important;
}

.preview-mobile .store-shell .featured-text-content p {
  font-size: calc(18px * var(--type-scale, 1)) !important;
  line-height: 1.75 !important;
}

.preview-mobile .store-shell .featured-text-actions {
  justify-content: inherit !important;
  margin-top: 28px !important;
}

/* Ajuste individual: Galerias visuales sin recorte ni superposicion. */
.store-shell .visual-gallery-section,
.preview-mobile .store-shell .visual-gallery-section {
  position: relative !important;
  z-index: auto !important;
  clear: both !important;
  overflow: visible !important;
}

.store-shell .visual-gallery > div,
.preview-mobile .store-shell .visual-gallery > div {
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat !important;
}

/* Mobile real y simulado: cada imagen ocupa su propia fila en el flujo. */
@media (max-width: 760px) {
  .store-shell .visual-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 18px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  .store-shell .visual-gallery > div {
    grid-area: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

.preview-mobile .store-shell .visual-gallery {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  gap: 18px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

.preview-mobile .store-shell .visual-gallery > div {
  grid-area: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

.store-shell .visual-gallery > div:not(.has-image),
.preview-mobile .store-shell .visual-gallery > div:not(.has-image) {
  min-height: 220px !important;
}

/* Ajuste individual: las imagenes de Galerias visuales ocupan el 100% de cada bloque. */
.store-shell .visual-gallery > div.has-image,
.preview-mobile .store-shell .visual-gallery > div.has-image {
  background-size: 100% 100% !important;
  background-position: center;
  background-repeat: no-repeat !important;
}

/* Galerias: proporcion natural y encuadre focal en mobile. */
@media (max-width: 760px) {
  .store-shell .visual-gallery > div.has-image {
    background-size: cover !important;
    min-height: 280px !important;
  }
}
.preview-mobile .store-shell .visual-gallery > div.has-image {
  background-size: cover !important;
  min-height: 280px !important;
}

/* Galerias mobile: imagen completa, sin recorte ni deformacion. */
@media (max-width: 760px) {
  .store-shell .visual-gallery > div.has-image {
    background-size: contain !important;
    min-height: 0 !important;
  }
}
.preview-mobile .store-shell .visual-gallery > div.has-image {
  background-size: contain !important;
  min-height: 0 !important;
}

/* Galerias definitivas: llenar sin deformar y respetar el punto focal configurado. */
.store-shell .visual-gallery > div.has-image,
.preview-mobile .store-shell .visual-gallery > div.has-image {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* El punto focal elegido prevalece sobre reglas antiguas de centrado. */
.store-shell .visual-gallery > div.has-image,
.preview-mobile .store-shell .visual-gallery > div.has-image {
  background-position: var(--qa-gallery-focus, center) !important;
}