/* El storefront se monta directamente en el editor: estas reglas activan su
   composición móvil cuando el selector de preview usa el contenedor de 390px. */
.preview-mobile .preview-store,
.preview-mobile .store-shell {
  width: min(390px, 100%);
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.preview-mobile .preview-canvas {
  box-sizing: border-box;
  height: min(760px, calc(100vh - 180px));
  min-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  contain: paint;
}

.preview-mobile .preview-store {
  margin-block: 0;
}

.preview-mobile .store-shell .navbar,
.preview-mobile .store-shell .announcement-bar,
.preview-mobile .store-shell .nav-primary,
.preview-mobile .store-shell .nav-secondary,
.preview-mobile .store-shell .mobile-nav-drawer {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
}

.preview-mobile .store-shell .navbar {
  left: auto;
  right: auto;
  overflow-x: clip;
}

/* El sticky del storefront no debe adherirse al viewport exterior de MTTAdmin. */
.preview-mobile .store-shell .navbar.navbar-sticky {
  position: relative !important;
  top: auto !important;
}

.preview-mobile .store-shell .nav-primary > *,
.preview-mobile .store-shell .nav-tools {
  min-width: 0;
  max-width: 100%;
}

.preview-mobile .store-shell .hero {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 430px;
  padding: 44px 22px !important;
}

.preview-mobile .store-shell .hero-copy {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.preview-mobile .store-shell .hero h1 {
  max-width: 100%;
  margin-inline: 0;
  font-size: clamp(32px, 10vw, 40px) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
}

.preview-mobile .store-shell .hero p {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.55;
}

.preview-mobile .store-shell .hero-art {
  display: none !important;
}

.preview-mobile .store-shell section,
.preview-mobile .store-shell footer {
  max-width: 100%;
  min-width: 0;
}

.preview-mobile .store-shell .reviews-grid,
.preview-mobile .store-shell .reviews-grid.reviews-count-1,
.preview-mobile .store-shell .reviews-grid.reviews-count-2,
.preview-mobile .store-shell .reviews-grid.reviews-count-3,
.preview-mobile .store-shell .reviews-grid.reviews-count-4 {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
}

.preview-mobile .store-shell .reviews-grid .review-card,
.preview-mobile .store-shell .reviews-grid.reviews-count-3 .review-card:last-child {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.preview-mobile .store-shell .reviews-marquee {
  width: 100%;
  overflow: hidden;
  --review-count: 1;
}

.preview-mobile .store-shell .reviews-marquee .review-card {
  flex: 0 0 calc(390px - 40px);
  width: calc(390px - 40px);
  max-width: calc(100vw - 40px);
  min-width: 0;
}

.preview-mobile .store-shell .review-card,
.preview-mobile .store-shell .review-card > p,
.preview-mobile .store-shell .review-card > footer {
  overflow-wrap: anywhere;
}

.preview-mobile .store-shell .benefits-grid,
.preview-mobile .store-shell .category-editorial,
.preview-mobile .store-shell .category-text-directory,
.preview-mobile .store-shell .public-blog-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.preview-mobile .store-shell .category-slider {
  grid-auto-columns: min(72%, 220px) !important;
  overflow-x: auto;
}

.preview-mobile .store-shell .visual-gallery {
  grid-template-columns: minmax(0, 1fr) !important;
}

.preview-mobile .store-shell .visual-gallery > * {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
}

.preview-mobile .store-shell .store-footer {
  text-align: left;
  padding: 42px 20px 20px;
}

.preview-mobile .store-shell .store-footer .footer-main,
.preview-mobile .store-shell .store-footer .footer-main.without-newsletter {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  gap: 30px;
}

.preview-mobile .store-shell .store-footer .footer-commerce-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  margin: 28px 0 22px;
}

.preview-mobile .store-shell .footer-payment-methods {
  width: 100%;
  min-width: 0;
}

.preview-mobile .store-shell .footer-payment-methods > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-mobile .store-shell .store-footer .footer-created-by {
  align-self: center;
  align-items: center;
  margin: 0;
  text-align: center;
}

.preview-mobile .store-shell .store-footer .footer-created-by img {
  width: 180px;
  max-width: 100%;
  height: 64px;
}

.preview-mobile .store-shell .store-footer .footer-bottom {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.preview-mobile .store-shell .footer-newsletter {
  width: 100%;
  min-width: 0;
}

.preview .store-shell .store-whatsapp {
  display: none !important;
}