/* ============================================
   CORES CUSTOMIZADAS - CDW THEME
   ============================================ */

/* Variáveis CSS */
:root {
  /* Principal da loja */
  --primary-color: #E79EB1;   /* Rosa */
  --secondary-color: #B580AE; /* Roxo — usado nos estados hover do principal */
  --accent-color: #00B3C7;    /* Ciano */

  /* Cores de destaque, para pontos específicos (menu, itens do topo, banners) */
  --destaque-roxo: #B580AE;
  --destaque-rosa: #E79EB1;
  --destaque-ciano: #00B3C7;
  --destaque-laranja: #F0AA88;
  --success-color: #5CAB36;
  --white: #FFFFFF;
  --black: #000000;
  --text-primary: #2B2B2B;
  --text-secondary: #838383;
  --text-light: #BEC1CC;
  --text-white: #FFFFFF;
  --text-success: #5CAB36;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-dark: #000000;
  --bg-accent: #00B3C7;
  --bg-success: #5CAB36;
  --link-color: #2B2B2B;
  --link-hover: #B580AE;
  --btn-primary: #2B2B2B;
  --btn-secondary: #B580AE;
  --btn-accent: #00B3C7;
  --btn-success: #5CAB36;
  --border-primary: #2B2B2B;
  --border-light: #E5E5E5;
  --border-dark: #000000;

  /* Landing page / títulos display */
  --lp-font-display: var(--font-headings, inherit);
}

/* Cores de Texto */
.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-light {
  color: var(--text-light) !important;
}

.text-white {
  color: var(--text-white) !important;
}

.text-success {
  color: var(--text-success) !important;
}

/* Cores de Fundo */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-accent {
  background-color: var(--accent-color) !important;
}

.bg-success {
  background-color: var(--bg-success) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-dark {
  background-color: var(--black) !important;
}

/* Cores de Links */
.link-primary {
  color: var(--link-color) !important;
}

.link-primary:hover {
  color: var(--link-hover) !important;
}

/* Cores de Botões */
.btn-primary {
  background-color: var(--btn-primary) !important;
  color: var(--white) !important;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}

.btn-secondary {
  background-color: var(--btn-secondary) !important;
  color: var(--white) !important;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}

.btn-success {
  background-color: var(--btn-success) !important;
  color: var(--white) !important;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-success:hover {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}

/* Cores de Bordas */
.border-primary {
  border-color: var(--border-primary) !important;
}

.border-light {
  border-color: var(--border-light) !important;
}

.border-dark {
  border-color: var(--border-dark) !important;
}

/* Opacidade */
.opacity-80 {
  opacity: 0.8 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

/* Transições */
.transition-colors {
  transition: color 0.3s ease, background-color 0.3s ease !important;
}

.transition-all {
  transition: all 0.3s ease !important;
}

/* ============================================
   SLICK CAROUSEL CUSTOM
   ============================================ */
.slick-track {
  padding-bottom: 1rem;
}

/* Depoimentos: cards com mesma altura e rodapé alinhado na base */
.depoimento-slider-3-itens .slick-track {
  display: flex !important;
  align-items: stretch !important;
}
.depoimento-slider-3-itens .slick-slide {
  height: auto !important;
  display: flex !important;
}
.depoimento-slider-3-itens .slick-slide > .cdw-depoimento-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.depoimento-slider-3-itens article {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

/* Blog: cards com mesma altura e link alinhado na base */
.blog-slider-3-itens .slick-track {
  display: flex !important;
  align-items: stretch !important;
}
.blog-slider-3-itens .slick-slide {
  height: auto !important;
  display: flex !important;
}
.blog-slider-3-itens .slick-slide > .cdw-blog-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.blog-slider-3-itens article {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

/* ============================================
   TIPOGRAFIA - TÍTULOS
   O plugin Olympus Google Fonts carrega a fonte e publica --font-headings,
   mas não aplica em nenhum seletor. Esta regra faz a ligação: só os títulos
   trocam de fonte, o corpo do texto continua com a fonte base.
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings, inherit);
  /* Lilita One só tem peso 400; font-bold (700) deixa os títulos artificiais e pesados */
  font-weight: 400 !important;
}

.lp-h1 {
  font-family: var(--lp-font-display);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

/* ============================================
   CORES DE DESTAQUE
   Quatro cores para uso pontual: a barra de categorias do menu e os
   itens de destaque abaixo do banner.
   ============================================ */
.destaque-roxo    { color: var(--destaque-roxo) !important; }
.destaque-rosa    { color: var(--destaque-rosa) !important; }
.destaque-ciano   { color: var(--destaque-ciano) !important; }
.destaque-laranja { color: var(--destaque-laranja) !important; }

.bg-destaque-roxo    { background-color: var(--destaque-roxo) !important; }
.bg-destaque-rosa    { background-color: var(--destaque-rosa) !important; }
.bg-destaque-ciano   { background-color: var(--destaque-ciano) !important; }
.bg-destaque-laranja { background-color: var(--destaque-laranja) !important; }

/* Menu de categorias — estilo do site antigo: texto colorido, caixa alta e
   barrinha contínua de 8px na base de cada item. */
.cdw-header-categorias {
  position: relative;
}

/* Faixa multicolorida — 100% da largura da tela (desktop e mobile) */
.cdw-header-color-bar {
  display: flex;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 8px;
  line-height: 0;
  flex-shrink: 0;
}

.cdw-header-color-bar__seg {
  flex: 1 1 0;
  min-width: 0;
  height: 8px;
  display: block;
}

.cdw-menu-categorias-nav > li.cdw-menu-categoria-item {
  display: flex;
  align-items: stretch;
}

.cdw-menu-categorias-nav > li.cdw-menu-categoria-item::after {
  content: none;
}

.cdw-menu-categorias-nav > li > a.cdw-menu-categoria {
  color: var(--cdw-cor-categoria, var(--primary-color)) !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cdw-menu-categorias-nav > li > a.cdw-menu-categoria:hover {
  opacity: 0.85;
}

.cdw-menu-categorias-nav > li > a.cdw-menu-categoria .fa-chevron-down {
  color: inherit;
}

/* Dropdown das categorias com filhos */
.cdw-menu-categorias-nav > li.cdw-menu-categoria-item > ul,
li.group > ul {
  /* fecha o vão entre o link e o submenu, para o mouse não perder o hover */
  margin-top: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 1px solid #EFEFEF;
  overflow: hidden;
}
li.group > ul a {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Selo de prazo de entrega nos cards de produto.
   Verde do layout de referência — trocar por var(--destaque-ciano) se
   preferir manter só as quatro cores da marca. */
.cdw-selo-entrega {
  background-color: #6FA83C;
}

/* ============================================
   SEM SCROLL LATERAL (sem cortar padding direito)
   ============================================ */
html {
  scrollbar-gutter: stable;
}

body {
  overflow-x: hidden;
  width: 100%;
}

main,
.cdw-header-site,
.cdw-header-announcement,
.cdw-header-categorias {
  width: 100%;
}

.cdw-header-announcement,
.cdw-header-announcement .card-container-top {
  overflow-x: hidden;
}

.cdw-header-announcement__msg {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Sliders Slick — slides contidos; dots sempre visíveis */
.card-container-1,
.card-container-top,
.card-container-resp,
.slider-4-itens,
.depoimento-slider-3-itens,
.blog-slider-3-itens,
.marcas-produtos-slider,
.cdw-promocao-slider {
  width: 100%;
  overflow: visible;
}

/* Promoção — mobile: grade 2x2 quando o Slick desliga (<900px) */
@media (max-width: 899px) {
  .cdw-promocao-slider:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }

  .cdw-promocao-slider:not(.slick-initialized) > .cdw-card-slider,
  .cdw-promocao-slider:not(.slick-initialized) > .px-3 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    height: auto;
  }

  .cdw-promocao-slider:not(.slick-initialized) .p-4 {
    padding: 0.75rem;
  }
}

/* Cards da seção de promoção — bordas coloridas da marca */
.cdw-promocao-produtos li.product {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cdw-promocao-produtos li.product > div {
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: 0 4px 14px rgba(183, 128, 174, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cdw-promocao-produtos li.product > div:hover {
  box-shadow: 0 6px 18px rgba(183, 128, 174, 0.2);
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 1) > div {
  border-color: var(--destaque-roxo) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 2) > div {
  border-color: var(--destaque-rosa) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 3) > div {
  border-color: var(--destaque-ciano) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 4) > div {
  border-color: var(--destaque-laranja) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 1) > div > a.border-b {
  border-bottom-color: var(--destaque-roxo) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 2) > div > a.border-b {
  border-bottom-color: var(--destaque-rosa) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 3) > div > a.border-b {
  border-bottom-color: var(--destaque-ciano) !important;
}

.cdw-promocao-produtos li.product:nth-of-type(4n + 4) > div > a.border-b {
  border-bottom-color: var(--destaque-laranja) !important;
}

.slick-slider {
  overflow: visible !important;
  margin-bottom: 0;
}

.slick-slider .slick-list {
  overflow: hidden !important;
}

.slick-slider .slick-dots {
  position: relative;
  bottom: auto;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px !important;
  margin-bottom: 4px;
  padding: 0;
  width: 100%;
}

.slick-slider .slick-dots li {
  margin: 0;
  width: 12px;
  height: 12px;
}

.slick-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
}

.slick-slider .slick-prev {
  left: 8px !important;
  z-index: 2;
}

.slick-slider .slick-next {
  right: 8px !important;
  z-index: 2;
}

@media (max-width: 768px) {
  .slick-slider .slick-prev {
    left: 4px !important;
  }

  .slick-slider .slick-next {
    right: 4px !important;
  }
}

/* Banners home — visíveis no mobile antes e depois do Slick */
.cdw-home-banners {
  width: 100%;
  margin-bottom: 0;
  line-height: 0;
}

.cdw-home-banners .card-container-1.slick-slider {
  position: relative;
  margin-bottom: 0;
}

.cdw-home-banners .card-container-1 .slick-list,
.cdw-home-banners .card-container-1 .slick-track {
  margin-bottom: 0;
  padding-bottom: 0 !important;
}

.cdw-home-banners .card-container-1:not(.slick-initialized) > .cdw-banner-slide:not(:first-child) {
  display: none;
}

.cdw-home-banners .cdw-banner-slide {
  line-height: 0;
}

.cdw-home-banners .cdw-banner-slide picture,
.cdw-home-banners .cdw-banner-slide img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.cdw-home-banners .card-container-1 .slick-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin-top: 0 !important;
  margin-bottom: 0;
  width: 100%;
}

.cdw-home-banners .slick-dots li button:before {
  color: #fff;
  opacity: 0.85;
}

/* Faixa de benefícios — espaçamento equilibrado (desktop e mobile) */
.cdw-home-benefits {
  margin-top: 0;
}

.cdw-home-benefits .cdw-benefit-item {
  align-items: center;
}

.cdw-home-benefits .cdw-benefit-item p {
  margin-bottom: 0;
}

.cdw-home-benefits + .cdw-home-lancamentos {
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .cdw-home-benefits + .cdw-home-lancamentos {
    padding-top: 1.25rem;
  }
}

/* Faixa de benefícios — compacta no mobile */
@media (max-width: 767px) {
  .cdw-home-benefits {
    padding-top: 10px;
    padding-bottom: 6px;
  }

  .cdw-home-benefits .card-container-resp .slick-list {
    padding-bottom: 0 !important;
  }

  .cdw-home-benefits .card-container-resp .slick-slide > div {
    padding: 0 4px;
  }

  .cdw-home-benefits .cdw-benefit-item {
    gap: 10px;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
  }

  .cdw-home-benefits .cdw-benefit-item .col-span-1 {
    font-size: 1.35rem;
    line-height: 1;
  }

  .cdw-home-benefits .cdw-benefit-item h3 {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .cdw-home-benefits .cdw-benefit-item p {
    font-size: 0.8rem;
    line-height: 1.25;
    margin: 0;
  }

  .cdw-home-benefits .card-container-resp .slick-dots {
    margin-top: 8px !important;
    margin-bottom: 6px;
    position: relative;
    bottom: auto;
  }

  .cdw-home-benefits .card-container-resp .slick-dots li button {
    border-color: var(--destaque-rosa);
  }

  .cdw-home-benefits .card-container-resp .slick-dots li.slick-active button {
    background: var(--destaque-rosa);
    border-color: var(--destaque-rosa);
  }
}