/* ===========================================================
   PALETA DE CORES — LE CHARM
   =========================================================== */
:root {
  --accent: #d9afaf;       /* rosa principal */
  --accent-dark: #c69595;  /* rosa mais escuro (hover) */
  --text-color: #664532;   /* marrom para textos e títulos */
}

/* ===========================================================
   TEXTOS E TÍTULOS
   =========================================================== */
body, p, span, li, a, strong, h1, h2, h3, h4, h5, h6 {
  color: var(--text-color) !important;
}

a {
  text-decoration: none !important;
  color: var(--text-color) !important;
}

a:hover {
  color: var(--accent-dark) !important;
}

/* ===========================================================
   MENU SUPERIOR E CATEGORIAS
   =========================================================== */
.menu.superior a,
.menu.superior a strong,
.titulo.cor-secundaria,
.header__nav a,
.header__nav-item a,
.header__menu a {
  color: var(--text-color) !important;
}

.menu.superior a:hover,
.menu.superior a:hover strong,
.header__nav a:hover,
.header__menu a:hover {
  color: var(--accent-dark) !important;
}

/* ===========================================================
   BOTÕES GERAIS
   =========================================================== */
button,
.btn,
input[type="submit"],
input[type="button"] {
  background-color: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.3s ease;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--accent-dark) !important;
}

/* ===========================================================
   BADGE DO CARRINHO
   =========================================================== */
.header .cart .badge,
.minicart__count,
.header__cart-badge {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ===========================================================
   ÍCONES DO CABEÇALHO (LUPA, CONTA, CARRINHO)
   =========================================================== */
.header__actions *,
.header__actions a,
.header__actions button,
.header__actions .header__search,
.header__actions .header__account,
.header__actions .header__cart,
.header__actions .header__action-item,
.header__actions .header__icon,
.header__toggle,
.menu-toggle,
.header__toggle *,
.menu-toggle * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove hover rosa */
.header__actions a:hover,
.header__actions button:hover,
.header__toggle:hover,
.menu-toggle:hover,
.header__actions .header__action-item:hover,
.header__actions .header__icon:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ícones rosa */
.header__actions svg,
.header__actions svg path,
.header__toggle svg,
.header__toggle svg path,
.menu-toggle svg,
.menu-toggle svg path,
span.svg-ico svg,
span.svg-ico svg path {
  fill: var(--accent) !important;
  color: var(--accent) !important;
  stroke: none !important;
}

/* Hover rosa escuro */
.header__actions a:hover svg path,
.header__actions button:hover svg path,
.header__toggle:hover svg path,
.menu-toggle:hover svg path,
span.svg-ico:hover svg path {
  fill: var(--accent-dark) !important;
  color: var(--accent-dark) !important;
}

/* Remove pseudo-elementos coloridos */
.header__actions a::before,
.header__actions button::before,
.header__toggle::before,
.menu-toggle::before,
.header__actions .header__action-item::before {
  background: transparent !important;
  content: none !important;
}

/* ===========================================================
   ÍCONE DA LUPA (PESQUISA)
   =========================================================== */
.search-trigger,
.search-trigger svg,
.search-trigger svg path {
  background: transparent !important;
  fill: var(--accent) !important;
  stroke: none !important;
  color: var(--accent) !important;
  border: none !important;
}

.search-trigger:hover svg path {
  fill: var(--accent-dark) !important;
}


/* ===========================================================
   REMOVER TEXTO E EXIBIR ÍCONE PERSONALIZADO — LE CHARM
   =========================================================== */


.flex-next {
  position: center;
  display: inline-block;
  color: transparent !important;  /* torna o texto invisível */
  font-size: 0 !important;        /* remove qualquer renderização de fonte */
  line-height: 0 !important;      /* evita altura residual */
  text-indent: -9999px !important;/* empurra o texto para fora da tela */
  overflow: hidden !important;    /* impede que apareça algo fora do box */
  white-space: nowrap !important; /* evita quebra de linha */
}


/* ========= MENU HAMBÚRGUER AO LADO DA LOGO ========= */

    /* Remove qualquer texto interno, caso exista */
    .menu-trigger.menu-toggle::before {
      content: '';
    }
    
    /* Cria as três barrinhas (ícone hambúrguer) */
    .menu-trigger.menu-toggle::after {
      background-color: #664532; /* cor do ícone (pode ajustar) */
      box-shadow:
        0 6px 0 0 #664532,
        0 -6px 0 0 #664532;
      transition: all 0.3s ease;
    }
    
    /* Animação leve ao passar o mouse */
    .menu-trigger.menu-toggle:hover::after {
      background-color: #7a5843;
      box-shadow:
        0 6px 0 0 #7a5843,
        0 -6px 0 0 #7a5843;
    }
    
    
.container-flex {
  display: flex; /* Ativa o Flexbox */
  justify-content: center; /* Alinha horizontalmente no eixo principal */
  align-items: center; /* Alinha verticalmente no eixo transversal */
  height: 100vh; /* Define a altura total da viewport para centralização vertical na tela toda */
  width: 100vw; /* Define a largura total da viewport */
  /* Garante que o conteúdo caiba na tela */
  box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
  padding: 10px; /* Adiciona um padding para evitar que o conteúdo toque as bordas em telas pequenas */
}

.item {
  /* Estilos do seu item */
  /* max-width pode ser útil para garantir que o item não transborde em telas menores */
  max-width: 100%;
}