/*
 * Cards de categorias — versão 2.5.1.
 * Arquivo isolado para impedir conflitos com regras antigas do tema.
 */

.mdp-home-categories-section-v5 {
  width: 100%;
  background: #fff;
}

.mdp-home-category-grid-v5,
.mdp-category-showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: stretch !important;
  grid-auto-flow: row dense !important;
}

.mdp-home-category-card-v5,
.mdp-category-showcase-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #d7e0ea !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 7px 18px rgba(19, 42, 79, .08) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.mdp-home-category-card-v5:hover,
.mdp-category-showcase-card:hover {
  transform: translateY(-3px) !important;
  border-color: #b9cce0 !important;
  box-shadow: 0 12px 26px rgba(19, 42, 79, .13) !important;
}

.mdp-home-category-card-v5:focus-visible,
.mdp-category-showcase-card:focus-visible {
  outline: 3px solid var(--mdp-blue) !important;
  outline-offset: 3px !important;
}

.mdp-home-category-media-v5,
.mdp-category-showcase-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #f2f7fc !important;
  flex: 0 0 auto !important;
}

.mdp-home-category-media-v5 img,
.mdp-home-category-image-v5,
.mdp-category-showcase-media img,
.mdp-category-showcase-media .mdp-category-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.mdp-home-category-copy-v5,
.mdp-category-showcase-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 16px 18px 18px !important;
  border: 0 !important;
  background: #fff !important;
  text-align: left !important;
}

.mdp-home-category-copy-v5 h3,
.mdp-category-showcase-copy h3 {
  margin: 0 0 7px !important;
  color: var(--mdp-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.mdp-home-category-copy-v5 p,
.mdp-category-showcase-copy p {
  margin: 0 !important;
  color: var(--mdp-muted) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

.mdp-home-categories-section-v5 .mdp-home-showcase-action {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .mdp-home-category-grid-v5,
  .mdp-category-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .mdp-home-category-grid-v5,
  .mdp-category-showcase-grid {
    grid-template-columns: 1fr !important;
    width: calc(100% - 20px) !important;
    gap: 14px !important;
  }

  .mdp-home-category-copy-v5,
  .mdp-category-showcase-copy {
    min-height: 0 !important;
    padding: 14px 15px 17px !important;
  }
}


/* 2.5.1 — somente cards válidos participam da grade da página inicial. */
.mdp-home-category-grid-v5 > :not(.mdp-home-category-card-v5) {
  display: none !important;
}

.mdp-home-category-card-v5 {
  position: relative !important;
}

.mdp-home-category-card-link-v5 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: transparent !important;
  text-decoration: none !important;
}

.mdp-home-category-card-link-v5:focus-visible {
  outline: 3px solid var(--mdp-blue) !important;
  outline-offset: -4px !important;
}

.mdp-home-category-media-v5,
.mdp-home-category-copy-v5 {
  position: relative !important;
  z-index: 1 !important;
}

@supports selector(.mdp-home-category-card-v5:has(h3)) {
  .mdp-home-category-grid-v5 > .mdp-home-category-card-v5:not(:has(h3)),
  .mdp-home-category-grid-v5 > .mdp-home-category-card-v5:not(:has(img)) {
    display: none !important;
  }
}


/* 2.6.2 — subcategorias mais largas e sem cards fantasmas. */
.mdp-category-showcase-grid > :not(.mdp-category-showcase-card),
.mdp-child-category-grid > :not(.mdp-category-showcase-card),
.mdp-category-showcase-grid > :empty,
.mdp-child-category-grid > :empty {
  display: none !important;
}

@supports selector(.mdp-category-showcase-card:has(h3)) {
  .mdp-category-showcase-grid > .mdp-category-showcase-card:not(:has(h3)),
  .mdp-category-showcase-grid > .mdp-category-showcase-card:not(:has(img)),
  .mdp-child-category-grid > .mdp-category-showcase-card:not(:has(h3)),
  .mdp-child-category-grid > .mdp-category-showcase-card:not(:has(img)) {
    display: none !important;
  }
}

.mdp-child-categories {
  width: min(1400px, calc(100vw - 40px)) !important;
  max-width: 1400px !important;
  margin: 0 auto 28px !important;
}

.mdp-child-categories h2 {
  margin: 0 0 22px !important;
  text-align: center !important;
}

.mdp-child-category-grid.mdp-category-showcase-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: min(1400px, calc(100vw - 40px)) !important;
  max-width: 1400px !important;
  gap: 22px !important;
}

.mdp-child-category-grid .mdp-category-showcase-card {
  min-height: 100% !important;
}

.mdp-child-category-grid .mdp-category-showcase-copy {
  min-height: 0 !important;
}

@media (max-width: 1200px) {
  .mdp-child-category-grid.mdp-category-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .mdp-child-categories {
    width: calc(100% - 24px) !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: calc(100% - 8px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .mdp-child-categories {
    width: calc(100% - 16px) !important;
    margin-bottom: 18px !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* 2.6.3 — mantém 4 cards no desktop com respiro lateral mínimo. */
.mdp-child-categories {
  width: min(1360px, calc(100vw - 56px)) !important;
  max-width: 1360px !important;
}

.mdp-child-category-grid.mdp-category-showcase-grid {
  width: min(1360px, calc(100vw - 56px)) !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .mdp-child-categories {
    width: calc(100% - 24px) !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: calc(100% - 24px) !important;
  }
}

@media (max-width: 600px) {
  .mdp-child-categories {
    width: calc(100% - 16px) !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: calc(100% - 16px) !important;
  }
}


/* 2.6.4 — cards um pouco menores para manter 4 colunas sem ultrapassar a tela. */
.mdp-child-categories {
  width: min(1280px, calc(100vw - 72px)) !important;
  max-width: 1280px !important;
}

.mdp-child-category-grid.mdp-category-showcase-grid {
  width: min(1280px, calc(100vw - 72px)) !important;
  max-width: 1280px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mdp-child-category-grid .mdp-category-showcase-card {
  min-width: 0 !important;
}

@media (max-width: 1200px) {
  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: min(1100px, calc(100vw - 48px)) !important;
    max-width: 1100px !important;
    gap: 18px !important;
  }
}

@media (max-width: 900px) {
  .mdp-child-categories {
    width: calc(100% - 24px) !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: calc(100% - 24px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .mdp-child-categories {
    width: calc(100% - 16px) !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: calc(100% - 16px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* 2.6.5 — centralização exata sem diferença causada por 100vw/scrollbar. */
.mdp-products-archive,
.mdp-products-archive .mdp-child-categories {
  box-sizing: border-box !important;
}

.mdp-child-categories {
  width: 100% !important;
  max-width: 1328px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.mdp-child-category-grid.mdp-category-showcase-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 1200px) {
  .mdp-child-categories {
    max-width: 1148px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    max-width: 1100px !important;
  }
}

@media (max-width: 900px) {
  .mdp-child-categories {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .mdp-child-categories {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mdp-child-category-grid.mdp-category-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}