/* =========================================================
   1. CONFIGURAÇÕES RESPONSIVAS GERAIS
========================================================= */

/* Ícone de tag no menu */
@media (min-width: 350px) {
  .menu-item-icon .fa-tag {
    color: red !important;
  }
}

/* Container em telas grandes */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1400px !important;
  }

  .menu-box {
    column-gap: 89px;
  }
}

/* Imagens arredondadas em banners no desktop */
@media (min-width: 1025px) {
  .swiper-slide img {
    border-radius: 10px;
  }
}


/* =========================================================
   2. AJUSTES GERAIS DO SITE
========================================================= */

.banner-swiper {
  margin-top: 0;
}

.u-s-p-b-30 {
  padding-bottom: 0;
}

div#swipper-banners_6984f45495b74 {
  margin-bottom: 0.9rem !important;
}

.owl-carousel .owl-item img {
  border-radius: 5px;
}

.link-image-link,
.link-image-link:hover {
  box-shadow: none;
  border-radius: 10px;
}

footer {
  margin-top: 20px;
}

.section__heading,
.section__span {
  text-align: left !important;
}


/* =========================================================
   3. CATEGORIAS DA HOME
========================================================= */

#categories-home {
  padding: 0;
}

#categories-home .banner-link,
#categories-home .link-image-link {
  width: 90px;
}

#categories-home .link-image-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#categories-home .link-image-slide .img-alt-link {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

#categories-home .link-image-slide .img-alt-link:hover {
  text-decoration: underline;
  box-shadow: none;
}


/* =========================================================
   4. HEADER, LOGO E MENU
========================================================= */

.header--style-3 {
  padding-bottom: 0;
}

/* Fundo do menu principal */
.menu-inner {
  background-color: #ad1421;
}

/* Texto dos itens do menu principal */
.menu-box a p.u-c-secondary {
  color: white !important;
}

/* Texto do submenu */
p.u-c-secondary.menu-content b.menu-text {
  color: black !important;
}

/* Logo principal */
.main-logo img {
  width: 90% !important;
}

/* Logo em telas pequenas */
@media (max-width: 600px) {
  .main-logo img {
    width: 100% !important;
  }
}

/* Tamanho da logo no mobile */
@media (max-width: 576px) {
  .main-logo {
    max-width: 160px !important;
  }
}


/* =========================================================
   5. TÍTULOS E AVISOS
========================================================= */

/* Título H1 das seções */
h1.section__heading {
  color: #ad1421;
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
}

/* Oculta aviso de manutenção */
.maintenance-alert {
  display: none;
}


/* =========================================================
   6. CARDS DE PRODUTOS
========================================================= */

.product-bs {
  box-shadow: none;
}

.product-card.u-s-m-b-15 {
  border: 1px solid #e2e2e2;
  border-radius: 14px;
}


/* =========================================================
   7. RODAPÉ
========================================================= */

/* Fundo principal do rodapé */
footer.opacity-on {
  background-color: #76232a;
}

/* Área externa do rodapé */
.outer-footer {
  padding: 80px 0;
  background-color: #00000000 !important;
}

/* Área de copyright */
.lower-footer {
  background-color: #00000000 !important;
}

/* Links da área PharmaInfo */
#footer__pharmaInfo a {
  color: #fff;
}

/* Logo do rodapé */
a#footer-logo-link {
  background-image: url("https://ecomstore.com.br/uploads/ecomd-white.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80px;
}

img#footer-logo-img {
  opacity: 0;
}

/* Ícones e textos do rodapé */
li.mb-2,
li.mb-2 i,
li i.fa.fa-link {
  color: white !important;
}