/**
 * DinnUP – Responsividade loja e preview (mobile-first)
 * Breakpoints: mobile até 640px, tablet 641–1024px, desktop 1025px+
 */

/* ---- Base: evitar overflow e garantir fluidez ---- */
body.dn-page,
body[data-preview-slug],
.preview-wrap {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.store-page-content,
.preview-wrap > section,
.preview-wrap > div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- Sections e containers da engine: nunca largura fixa ---- */
.dn-page .dinnup-section,
.dn-page .dinnup-container,
.preview-wrap .dinnup-section,
.preview-wrap .dinnup-container,
.store-page-content .dinnup-section,
.store-page-content .dinnup-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Container interno: centralizado com padding responsivo */
.dn-page .dinnup-container[style*="max-width"],
.store-page-content .dinnup-container[style*="max-width"],
.preview-wrap .dinnup-container[style*="max-width"] {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (min-width: 641px) {
  .dn-page .dinnup-container[style*="max-width"],
  .store-page-content .dinnup-container[style*="max-width"],
  .preview-wrap .dinnup-container[style*="max-width"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1025px) {
  .dn-page .dinnup-container[style*="max-width"],
  .store-page-content .dinnup-container[style*="max-width"],
  .preview-wrap .dinnup-container[style*="max-width"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ---- Hero / overlay: proporção e imagem fluida ---- */
.dinnup-section.dinnup-overlay-root,
.dinnup-container.dinnup-overlay-root {
  min-height: 50vh !important;
  max-height: none;
}

@media (min-width: 641px) {
  .dinnup-section.dinnup-overlay-root,
  .dinnup-container.dinnup-overlay-root {
    min-height: 60vh !important;
  }
}

@media (min-width: 1025px) {
  .dinnup-section.dinnup-overlay-root,
  .dinnup-container.dinnup-overlay-root {
    min-height: 70vh !important;
  }
}

.dn-page .dinnup-section img,
.store-page-content .dinnup-section img,
.preview-wrap .dinnup-section img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* ---- Grid de produtos (engine): 1 / 2 / 4 colunas ---- */
.dn-page #dn_products_grid.dinnup-container,
.dn-page .dinnup-container[data-dinnup="products"],
.store-page-content .dinnup-container[data-dinnup="products"],
.preview-wrap .dinnup-container[data-dinnup="products"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (min-width: 641px) {
  .dn-page #dn_products_grid.dinnup-container,
  .dn-page .dinnup-container[data-dinnup="products"],
  .store-page-content .dinnup-container[data-dinnup="products"],
  .preview-wrap .dinnup-container[data-dinnup="products"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1025px) {
  .dn-page #dn_products_grid.dinnup-container,
  .dn-page .dinnup-container[data-dinnup="products"],
  .store-page-content .dinnup-container[data-dinnup="products"],
  .preview-wrap .dinnup-container[data-dinnup="products"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ---- Cards de produto: imagem e texto ---- */
.dn-page .dinnup-product-card,
.store-page-content .dinnup-product-card,
.preview-wrap .dinnup-product-card {
  min-width: 0;
}

.dn-page .dinnup-product-card__image-wrap img,
.store-page-content .dinnup-product-card__image-wrap img,
.preview-wrap .dinnup-product-card__image-wrap img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* ---- Tipografia fluida (evitar texto gigante no mobile) ---- */
.dn-page .dinnup-text[style*="fontSize"],
.store-page-content .dinnup-text[style*="fontSize"],
.preview-wrap .dinnup-text {
  font-size: clamp(0.875rem, 2.5vw, 1.125rem) !important;
}

.dn-page .dinnup-section h1,
.store-page-content .dinnup-section h1,
.preview-wrap .dinnup-section h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  line-height: 1.2;
}

.dn-page .dinnup-section h2,
.store-page-content .dinnup-section h2,
.preview-wrap .dinnup-section h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
  line-height: 1.3;
}

/* ---- Botões: 100% no mobile ---- */
@media (max-width: 640px) {
  .dn-page .dinnup-button,
  .store-page-content .dinnup-button,
  .preview-wrap .dinnup-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }
}

/* ---- Header loja: compacto no mobile ---- */
@media (max-width: 640px) {
  .dn-page .flex.justify-between.items-center.h-16,
  .dn-page header .flex {
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .dn-page header nav {
    width: 100%;
    order: 2;
    justify-content: flex-start;
  }
}

/* ---- Tema oficial: preservar hero e imagens do preview/editor/publicação ---- */
#store-preview-theme-wrap #dn_hero,
#editor-preview-theme-wrap #dn_hero,
.dn-page.dinnup-theme-base-v1 #dn_hero {
  min-height: 320px !important;
  max-height: 400px !important;
}

@media (min-width: 768px) {
  #store-preview-theme-wrap #dn_hero,
  #editor-preview-theme-wrap #dn_hero,
  .dn-page.dinnup-theme-base-v1 #dn_hero {
    min-height: 420px !important;
    max-height: 500px !important;
  }
}

@media (min-width: 1024px) {
  #store-preview-theme-wrap #dn_hero,
  #editor-preview-theme-wrap #dn_hero,
  .dn-page.dinnup-theme-base-v1 #dn_hero {
    min-height: 520px !important;
    max-height: 600px !important;
  }
}

#store-preview-theme-wrap #dn_hero .dinnup-image,
#editor-preview-theme-wrap #dn_hero .dinnup-image,
.dn-page.dinnup-theme-base-v1 #dn_hero .dinnup-image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}