/** Shopify CDN: Minification failed

Line 1216:0 Unexpected "}"
Line 1905:14 Expected identifier but found whitespace
Line 1905:16 Expected identifier but found "%"
Line 1905:60 Unexpected "'Anton'"
Line 1905:80 Expected identifier but found "%"
Line 1905:89 Unexpected "{"
Line 1905:90 Unexpected "{"
Line 1905:100 Expected ":"
Line 1905:120 Unexpected "{"
Line 1905:121 Expected identifier but found "%"
... and 6 more hidden warnings

**/
/* 1) cada slide vira contêiner posicionado */
.video-wrapper .video-slide {
  position: relative;
}

/* 2) o bloco de conteúdo fica absolutamente centralizado dentro do slide */
.video-wrapper .video-slide .video-slide-content {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;       /* ou ajuste para o seu layout */
  max-width: 1200px;
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;  /* se quiser que só os botões sejam clicáveis */
}

/* Cabeçalho fixo inteligente com ícones escuros */

header.main-header {
  background-color: white !important;
  transition: transform 0.3s ease;
  z-index: 100;
}

header.main-header.hide-header {
  transform: translateY(-100%);
}


/* Ícones e logo escuros e visíveis */
header.main-header svg,
header.main-header .icon,
header.main-header .header__icon svg,
header.main-header .logo img {
  filter: none !important;
  fill: #111 !important;
  color: #111 !important;
}

#shopify-section-header-banner {
  display: none !important;
}

/* Remove espaço superior do split banner */
.split-banner {
  margin-top: 1px !important;
  padding-top: 1px !important;
}

/* Remove espaço inferior do container de vídeo */
#shopify-section-video-slider {
  margin-bottom: 1px !important;
  padding-bottom: 1px !important;
}

/* Remove espaço entre o container de vídeo e o split banner */
#shopify-section-video-slider + #shopify-section-template--16881140760674__split-banner {
  margin-top: 1px !important;
  padding-top: 1px !important;
}

/* ── Centraliza 1 ou 2 botões no overlay de vídeo ── */
.video-overlay-text .video-buttons {
  /* largura igual à soma dos botões */
  width: max-content !important;  

  /* centraliza horizontalmente dentro do overlay */
  margin: 1em auto 0 !important;  

  /* flex container para gap funcionar */
  display: flex !important;        
  gap: 12px !important;            

  /* (opcional) se tiver padding interno, remova aqui */
  padding: 0 !important;           
}





.privacy-footer {
  text-align: center;
  margin: 2rem 0;
}

/* container do link e alinhamento geral */
.privacy-choices {
  display: inline-flex;
  align-items: center;
  color: #4a4a4a;
  font-size: 0.875rem;
  text-decoration: none;
}

/* evita quebra do texto */
.privacy-choices__text {
  white-space: nowrap;
}

/* wrapper do ícone: define só o espaçamento à direita */
.privacy-choices__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

/* estiliza a imagem carregada */
.privacy-choices__image {
  width: 32px;    /* ajuste esse valor conforme o tamanho real do PNG */
  height: auto;
  display: block;
}

/* 1) força o container a usar flexbox e quebrar linhas */
.footer-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem 1rem; /* espaçamento vertical e horizontal */
  padding: 0.5rem 1rem;  
}

/* 2) cada item não estica além do necessário e pode quebrar linha */
.footer-bar li {
  flex: 0 1 auto !important;
  margin: 0 !important;
}

/* 3) garante que o texto dentro do link possa quebrar em várias linhas */
.footer-bar a {
  white-space: normal !important;
  text-decoration: none;
  color: #555;
  font-size: 13px;
}

/* opcional: hover */
.footer-bar a:hover {
  color: #000;
}
@media (min-width: 959px) {
  /* garante que todo <li> comece alinhado à esquerda */
  .benefits-grid li {
    justify-self: start;
  }

  /* só os “pares” (2ª e 4ª posição) vão para a direita e recebem um nudge */
  .benefits-grid li:nth-child(2n) {
    justify-self: end !important;      /* mantém o alinhamento à direita */
    transform: translateX(-4rem);    /* puxa 0.5rem para a esquerda */
  }
}

/* ------------------------------------------------------------
   Footer – alinha BRL, “Your Privacy Choices” e ícones de pagamento
   ------------------------------------------------------------ */
@media screen and (min-width: 959px) {
  /* 1) Centra verticalmente todo o grupo (seletor, privacy e pagamentos) */
  .footer-black .flex.justify-between {
    align-items: center;
  }

  /* 2) Faz o <localization-form> (seletor BRL) ficar inline e desce um pouco */
  localization-form {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 4px;           /* ajusta verticalmente */
    margin-right: 1.5rem; /* espaço até “Your Privacy Choices” */
  }

  /* 3) Faz o bloco de privacy também inline e desce na mesma medida */
  .privacy-footer {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 4px;
  }
}

@media screen and (max-width: 958px) {
  localization-form,
  .privacy-footer {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 4px;
  }

  localization-form {
    margin-right: 1rem;
  }
}

/* ============================= */
/* COOKIE BANNER — ESTILOS */
/* ============================= */
#cookie-banner {
  display: none; /* exibido via JS */
  position: fixed !important;
  bottom: 100px !important;
  left: 5% !important;
  width: 90%;
  max-width: 420px;
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1), 0 12px 36px rgba(0, 0, 0, 0.14);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2147483000; /* acima de overlays comuns */
}


#cookie-banner .cookie-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ============================= */
/* COOKIE BANNER — ÍCONE + TEXTO EM LINHA */
/* ============================= */
#cookie-banner {
  display: flex;
  flex-direction: column; /* Mantém o layout original para o restante */
  gap: 10px;
}

#cookie-banner .cookie-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px; /* espaço entre ícone e texto */
}

/* Adiciona o texto ao lado do ícone na mesma linha */
/* Parar de desenhar o texto via ::after */
#cookie-banner .cookie-icon-wrapper::after { 
  content: none !important;
}

/* Texto "Adivinha? Utilizamos cookies" branco no dark */
html.dark #cookie-banner .cookie-icon-wrapper::after {
  color: #ffffff !important;
}

/* Mesmo visual do que você tinha no ::after */
#cookie-banner .cookie-icon-wrapper{
  display: flex;
  align-items: center;
  gap: 8px;            /* mesmo gap que você já usa */
}

#cookie-banner .cookie-inline-text{
  font-weight: 600;    /* igual ao 600 que você tinha */
  font-size: 14px;     /* 14px como no print */
  color: #1a1a1a;      /* cor do modo claro */
  white-space: nowrap; /* mantém tudo na mesma linha */
  margin-left: 20px;   /* mesma distância do ícone */
}

/* Modo dark: branco, como já estava */
html.dark #cookie-banner .cookie-inline-text{
  color: #ffffff !important;
}









#cookie-banner .cookie-text strong {
  font-size: 16px;
  line-height: 1.2;
}
#cookie-banner .cookie-text p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
#cookie-banner .cookie-text a {
  color: #0b64d1;
  text-decoration: underline;
}
#cookie-banner .cookie-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#cookie-banner .btn-link {
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  color: #0b64d1;
  cursor: pointer;
}
#cookie-banner .btn-outline {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
#cookie-banner .btn-outline:hover {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
#cookie-banner .btn-solid {
  background: #0b64d1;
  border: 1px solid #0b64d1;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.08s ease;
}
#cookie-banner .btn-solid:active {
  transform: translateY(1px);
}

/* Dark mode básico */
html.dark #cookie-banner {
  background: #171717;
  color: #eaeaea;
  box-shadow: 0 -4px 12px rgba(255,255,255,0.05), 0 12px 36px rgba(255,255,255,0.06);
}
html.dark #cookie-banner .cookie-text a {
  color: #8ab6ff;
}
html.dark #cookie-banner .btn-outline {
  background: transparent;
  color: #eaeaea;
  border-color: rgba(255, 255, 255, 0.28);
}
html.dark #cookie-banner .btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
}
html.dark #cookie-banner .btn-solid {
  background: #2a7bff;
  border-color: #2a7bff;
}

/* ============================= */
/* MODAL DE PREFERÊNCIAS */
/* ============================= */
.cookie-modal {
  display: none; /* toggled via JS */
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(0, 0, 0, 0.42);
}
.cookie-modal__dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 620px);
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 18px;
  outline: none;
}
.cookie-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cookie-modal__close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cookie-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 4px 2px;
  max-height: 60vh;
  overflow: auto;
}
.cookie-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 8px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
}
.cookie-opt__text strong { font-size: 15px; }
.cookie-opt__text p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.cookie-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Botões do modal no mesmo estilo do banner */
.cookie-modal__footer .btn-outline,
.cookie-modal__footer .btn-solid {
  border-radius: 9999px;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.cookie-modal__footer .btn-outline {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: #1a1a1a;
}
.cookie-modal__footer .btn-outline:hover {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cookie-modal__footer .btn-solid {
  background: #0b64d1;
  border: 1px solid #0b64d1;
  color: #ffffff;
}
.cookie-modal__footer .btn-solid:active {
  transform: translateY(1px);
}

/* Dark mode */
html.dark .cookie-modal__footer .btn-outline {
  background: transparent;
  color: #eaeaea;
  border-color: rgba(255, 255, 255, 0.28);
}
html.dark .cookie-modal__footer .btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
}
html.dark .cookie-modal__footer .btn-solid {
  background: #2a7bff;
  border-color: #2a7bff;
}


html.dark .cookie-modal__dialog {
  background: #171717;
  color: #eaeaea;
  border: 1px solid rgba(255,255,255,0.08);
}
html.dark .cookie-opt {
  border-color: rgba(255,255,255,0.12);
}


/* Animação de entrada apenas no eixo Y */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* TEXTO DO BANNER */
/* ============================= */
#cookie-banner .cookie-text {
  margin-bottom: 12px;
}
#cookie-banner .cookie-text strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
#cookie-banner .cookie-text p {
  margin: 0;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.5;
}
#cookie-banner .cookie-text a {
  color: #1a1a1a;
  text-decoration: underline;
}

/* ============================= */
/* BOTÕES DO BANNER */
/* ============================= */
#cookie-banner .cookie-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
#cookie-banner .btn-link {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #0066cc;
  cursor: pointer;
  transition: color 0.2s;
}
#cookie-banner .btn-link:hover {
  color: #004999;
}
#cookie-banner .btn-outline {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
#cookie-banner .btn-outline:hover {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#cookie-banner .btn-solid {
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
#cookie-banner .btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ============================= */
/* ESPAÇO PARA NÃO SER SOBREPÔS */
/* ============================= */
#MainContent {
  padding-bottom: 200px; /* altura do banner + bottom */
}

/* Ajuste exclusivo para mobile */
@media screen and (max-width: 958px) {
  /* Move o banner um pouco mais para baixo no mobile */
  #cookie-banner {
    bottom: 0px !important;  /* ajuste para o valor que preferir */
  }

  /* Reduz o padding-bottom do conteúdo para mobile */
  #MainContent {
    padding-bottom: 140px;    /* banner ~100px + 40px de bottom */
  }
}


/* torna o container relativo para o ::before funcionar */
#cookie-banner {
}

/* Reposiciona o botão "Customizar" à esquerda */
.cookie-actions {
  display: flex;
  justify-content: space-between; /* cria separação */
  align-items: center;
}

.cookie-actions #cookie-customize {
  margin-right: auto; /* empurra os outros botões para a direita */
}




/* ============================= */
/* DARK MODE — ÍCONES Benefits    */
/* ============================= */
/* 1) Alvo o wrapper de Benefits */
html.dark section[id*="benefit"],
html.dark section[class*="benefit"] {
  /* nada aqui além do fundo/texto que você já tem */
}

/* 2) Força todos os <path>, <circle>, <rect> dentro de SVGs */
html.dark section[id*="benefit"] svg path,
html.dark section[class*="benefit"] svg path,
html.dark section[id*="benefit"] svg circle,
html.dark section[class*="benefit"] svg circle,
html.dark section[id*="benefit"] svg rect,
html.dark section[class*="benefit"] svg rect {
  fill: #eee !important;
}

/* 3) Caso seu tema injete o ícone por mask/image */
html.dark section[id*="benefit"] svg,
html.dark section[class*="benefit"] svg {
  filter: brightness(0) invert(1) !important;
}


/* ============================= */
/* DARK MODE — Benefits Section  */
/* ============================= */
/* 1) Section wrapper contendo “benefit” */
html.dark section[id*="benefit"],
html.dark section[class*="benefit"] {
  background-color: #111 !important;  /* fundo escuro */
}

/* 2) Todo texto dentro dela */
html.dark section[id*="benefit"] *,
html.dark section[class*="benefit"] * {
  color: #eee !important;             /* texto claro */
  background-color: transparent !important;
}

/* 3) Ícones SVG apenas mudam fill */
html.dark section[id*="benefit"] svg,
html.dark section[class*="benefit"] svg {
  fill: #eee !important;
  opacity: 0.8 !important;
}

/* 4) Links e botões sólidos só mudam cor, sem tocar no layout */
html.dark section[id*="benefit"] a,
html.dark section[class*="benefit"] a {
  color: #4da6ff !important;
}
html.dark section[id*="benefit"] .btn-solid,
html.dark section[class*="benefit"] .btn-solid {
  background-color: #333 !important;
  color: #fff !important;
}

/* ============================= */
/* DARK MODE — ÍCONES Benefits    */
/* ============================= */

/* SVGs ou PNGs usados como <img> */
html.dark section[id*="benefit"] img,
html.dark section[class*="benefit"] img {
  filter: invert(1) brightness(1.2) contrast(1) !important;
}

/* Caso o ícone seja via background-image */
html.dark section[id*="benefit"] .benefit-item__icon,
html.dark section[class*="benefit"] .benefit-item__icon {
  filter: invert(1) brightness(1.2) contrast(1) !important;
}

/* ============================= */
/* DARK MODE — Image Slider       */
/* ============================= */

/* 1) Wrapper da seção */
html.dark [data-section-type="image-slider"],
html.dark section[class*="image-slider"] {
  background-color: #111 !important;
  color: #eee !important;
}

/* 2) Cada slide/card */
html.dark [data-section-type="image-slider"] .flickity-slider > * ,
html.dark section[class*="image-slider"] .flickity-slider > * {
  background-color: #222 !important;
  color: #eee           !important;
}

/* 3) Títulos dos produtos */
html.dark [data-section-type="image-slider"] .product-card__title,
html.dark section[class*="image-slider"] .product-card__title {
  color: #fff !important;
}

/* 4) Preços ou subtítulos */
html.dark [data-section-type="image-slider"] .product-card__price,
html.dark section[class*="image-slider"] .product-card__price {
  color: #ccc !important;
}

/* 5) Setas de navegação */
html.dark [data-section-type="image-slider"] .flickity-button,
html.dark section[class*="image-slider"] .flickity-button {
  background: rgba(255,255,255,0.2) !important;
  color: #fff                    !important;
}

/* 6) Pontinhos de paginação */
html.dark [data-section-type="image-slider"] .flickity-page-dots .dot,
html.dark section[class*="image-slider"] .flickity-page-dots .dot {
  background: rgba(255,255,255,0.5) !important;
}

/* ============================= */
/* DARK MODE — Countdown Timer    */
/* ============================= */

/* 1) Wrapper da seção */
html.dark [data-section-type="countdown-timer"],
html.dark section[id*="countdown"],
html.dark section[class*="countdown-timer"] {
  background-color: #111 !important;
  color: #eee !important;
  padding: -2rem 0 !important;
}

/* 2) Força texto claro em todos os elementos internos */
html.dark [data-section-type="countdown-timer"] *,
html.dark section[id*="countdown"] *,
html.dark section[class*="countdown-timer"] * {
  color: #eee !important;
  background-color: transparent !important;
}

/* 3) Caixa de cada unidade (Dias, Horas, Minutos, Segundos) */
html.dark [data-section-type="countdown-timer"] .countdown-timer__time,
html.dark section[id*="countdown"] .countdown-timer__time,
html.dark section[class*="countdown-timer"] .countdown-timer__time {
  background-color: #222 !important;
  color: #fff           !important;
  border: none          !important;
}

/* 4) Rótulos (Dias, Horas, Minutos, Segundos) */
html.dark [data-section-type="countdown-timer"] .countdown-timer__label,
html.dark section[id*="countdown"] .countdown-timer__label,
html.dark section[class*="countdown-timer"] .countdown-timer__label {
  color: #ccc !important;
  font-weight: 500 !important;
}

/* 5) Ajuste de bordas para destacar mais */
html.dark [data-section-type="countdown-timer"] .countdown-timer__time,
html.dark section[id*="countdown"] .countdown-timer__time,
html.dark section[class*="countdown-timer"] .countdown-timer__time {
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}

/* ============================= */
/* DARK MODE — Tiles Section FIX */
/* ============================= */
/* 1) Wrapper da seção de Tiles */
html.dark section[id*="tiles"] {
  background-color: #111 !important;
  padding: 0rem 0      !important;
}

/* 2) Força todo texto para claro, sem mudar imagens */
html.dark section[id*="tiles"] * {
  color: #eee           !important;
  background-color: transparent !important;
}

/* 3) Cada card/tile recebe fundo escuro */
html.dark section[id*="tiles"] .tile {
  background-color: #222      !important;
  border-radius: 8px          !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* 4) Garante que as imagens dos tiles NÃO sejam invertidas */
html.dark section[id*="tiles"] .tile img {
  filter: none !important;
}

/* 5) Títulos e descrições específicos */
html.dark section[id*="tiles"] .tile__heading,
html.dark section[id*="tiles"] h3 {
  color: #fff !important;
  margin-top: 1rem !important;
}
html.dark section[id*="tiles"] .tile__text,
html.dark section[id*="tiles"] p {
  color: #ccc !important;
}

/* 6) Links e botões dentro dos tiles */
html.dark section[id*="tiles"] .tile a,
html.dark section[id*="tiles"] .tile button {
  color: #4da6ff    !important;
  background-color: #333 !important;
  border-color: #444     !important;
}


/* ============================ */
/* DARK MODE — Collection Links  */
/* ============================ */
/* 1) Seleciona qualquer section cujo ID contenha “collection” */
html.dark section[id*="collection"] {
  background-color: #111 !important;
  color: #eee       !important;
  padding: 0rem 0   !important;
}

/* 2) Remove estilos claros padrões dentro dela */
html.dark section[id*="collection"] *,
html.dark section[id*="collection"] a,
html.dark section[id*="collection"] li {
  background: none !important;
  color:      #eee !important;
}

/* 3) Links (titulo + seta) ficam alinhados e claros */
html.dark section[id*="collection"] a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1,2rem 1rem !important;
  text-decoration: none !important;
}

/* 4) Hover clareia o fundo só um pouquinho */
html.dark section[id*="collection"] a:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

/* 5) Inverte qualquer SVG (setinha) para branco */
html.dark section[id*="collection"] a svg {
  filter: invert(1) !important;
}



/* ============================= */
/* DARK MODE — Before/After FINAL */
/* ============================= */
/* 1) Wrapper principal */
html.dark [data-section-type="before-after"],
html.dark [data-section-id="before-after"] {
  background-color: #111 !important;
  color: #eee           !important;
}

/* 2) Títulos e descrição */
html.dark [data-section-type="before-after"] h2,
html.dark [data-section-id="before-after"] h2,
html.dark [data-section-type="before-after"] p,
html.dark [data-section-id="before-after"] p {
  color: #eee !important;
}

/* 3) Container interno das imagens */
html.dark [data-section-type="before-after"] .before-after__container,
html.dark [data-section-id="before-after"] .before-after__container {
  background: #222 !important;
  border-radius: 8px !important;
  padding: 1rem !important;
}

/* 4) Linha divisória (divider) */
html.dark [data-section-type="before-after"] .before-after__divider,
html.dark [data-section-id="before-after"] .before-after__divider {
  background-color: #eee !important;
}

/* 5) Handle (bolinha) */
html.dark [data-section-type="before-after"] .before-after__handle,
html.dark [data-section-id="before-after"] .before-after__handle {
  background-color: #eee !important;
  border-color:     #eee !important;
}

/* 6) Imagens sem filtro */
html.dark [data-section-type="before-after"] img,
html.dark [data-section-id="before-after"] img {
  filter: none !important;
}

/* ============================= */
/* DARK MODE — Before/After FIX   */
/* Seletor genérico para “image_compare” */
/* ============================= */

/* Wrapper principal com padding */
html.dark [class*="__image_compare"] {
  background-color: #111 !important;
  color:            #eee !important;
}

/* Container interno que faz o compare (geralmente .section-image-compare ou .image-compare) */
html.dark [class*="__image_compare"] .section-image-compare,
html.dark [class*="__image_compare"] .image-compare {
  background-color: #222 !important;
  border-radius:    8px !important;
  padding:          0rem !important;
}

/* Linha divisória / handle */
html.dark [class*="__image_compare"] .image-compare__divider,
html.dark [class*="__image_compare"] .section-image-compare .relative::before {
  background-color: #eee !important;
}

/* Bolinha do handle */
html.dark [class*="__image_compare"] .image-compare__handle {
  background-color: #eee !important;
  border-color:     #eee !important;
}

/* Imagens dentro do compare: sem filtro para manter cores originais */
html.dark [class*="__image_compare"] img {
  filter: none !important;
}

/* ============================= */
/* DARK MODE — Before/After Subtitle */
/* ============================= */

/* Força o subtítulo/descritivo a ficar claro */
html.dark [class*="__image_compare"] .section__subtext,
html.dark [class*="__image_compare"] .before-after__subtitle,
html.dark [class*="__image_compare"] p {
  color: #eee !important;
}

/* ============================= */
/* DARK MODE — Lookbook Section FIX */
/* ============================= */

/* 1) Wrapper principal (padded section) */
html.dark [class*="__lookbook"] {
  background-color: #111 !important;
  color:            #eee !important;
}

/* 2) Título “Lookbook” */
html.dark [class*="__lookbook"] h2,
html.dark [class*="__lookbook"] h3 {
  color: #fff !important;
}

/* 3) Subtítulo / descrição (se houver) */
html.dark [class*="__lookbook"] p {
  color: #ccc !important;
}

/* 4) Container da imagem principal (“media”) */
html.dark [class*="__lookbook"] .lookbook__media,
html.dark [class*="__lookbook"] .image-wrap {
  background-color: #222 !important;
  border-radius:    8px   !important;
  padding:          0rem  !important;
}

/* 5) Blocos de produto (thumbnails) */
html.dark [class*="__lookbook"] .product-card,
html.dark [class*="__lookbook"] .card {
  background-color: #222 !important;
  color:            #eee !important;
}

/* 6) Título e preço dentro do card */
html.dark [class*="__lookbook"] .product-card__title,
html.dark [class*="__lookbook"] .product-card__price {
  color: #eee !important;
}

/* 7) Imagens no Lookbook: sem filtro para manter a cor original */
html.dark [class*="__lookbook"] img {
  filter: none !important;
}


/* ============================= */
/* DARK MODE — Collapsible Content */
/* ============================= */

/* 1) Wrapper da seção de acordéon/collapsible */
html.dark [class*="__accordions"] {
  background-color: #111 !important;
  color:            #eee !important;
  padding:          4rem 0 !important;
}

/* 2) Título principal da seção */
html.dark [class*="__accordions"] h2,
html.dark [class*="__accordions"] h3 {
  color: #fff !important;
}

/* 3) Cada item (background escuro e borda sutil) */
html.dark [class*="__accordions"] .accordion,
html.dark [class*="__accordions"] .accordion__item {
  background-color: #222 !important;
  border-bottom:    1px solid rgba(255,255,255,0.1) !important;
}

/* 4) Header/trigger do item */
html.dark [class*="__accordions"] .accordion__header,
html.dark [class*="__accordions"] .accordion__button {
  color: #eee !important;
}

/* 5) Ícone de expandir/colapsar (SVG) */
html.dark [class*="__accordions"] .accordion__header svg,
html.dark [class*="__accordions"] .accordion__button svg {
  fill:    #eee !important;
  opacity: 0.8  !important;
}

/* 6) Conteúdo interno do item */
html.dark [class*="__accordions"] .accordion__content,
html.dark [class*="__accordions"] .accordion__panel {
  background: transparent !important;
  color:      #fff       !important;
}

/* 7) Links ou botões dentro do conteúdo */
html.dark [class*="__accordions"] .accordion__content a,
html.dark [class*="__accordions"] .accordion__content .btn-solid {
  color: #4da6ff !important;
}

/* === DARK MODE — Accordion/Collapsible Content === */

/* Torna o texto da resposta branco */
html.dark .accordion-body.rich-text.text-dark-subdued,
html.dark .accordion-body.rich-text.text-dark-subdued p {
  color: #fff !important;
  opacity: 1 !important;
}

/* ============================= */
/* DARK MODE — Promo Tiles (fix definitivo) */
/* ============================= */

/* 1) Alvo: qualquer section com “promo-tiles” no ID, classe ou data-attribute */
html.dark section[id*="promo-tiles"],
html.dark section[class*="promo-tiles"],
html.dark [data-section-type*="promo-tiles"] {
  background-color: #111 !important;
  color:            #fff !important;
  padding:          0rem 0 !important;
}

/* 2) Limpa tudo dentro e reaplica cor branca nos textos */
html.dark section[id*="promo-tiles"] *,
html.dark section[class*="promo-tiles"] *,
html.dark [data-section-type*="promo-tiles"] * {
  color:            #fff    !important;
  background-color: transparent !important;
  border-color:     rgba(255,255,255,0.2) !important;
}

/* 3) Cards (tiles) */
html.dark section[id*="promo-tiles"] .promo-tiles__item,
html.dark section[class*="promo-tiles"] .promo-tiles__item,
html.dark [data-section-type*="promo-tiles"] .promo-tiles__item {
  background-color: #111 !important;
  box-shadow:       0 4px 12px rgba(0,0,0,0.5) !important;
  border:           1px solid rgba(255,255,255,0.1) !important;
  border-radius:    8px !important;
  overflow:         hidden !important;
}

/* 4) Títulos e subtítulos dentro dos cards */
html.dark section[id*="promo-tiles"] .promo-tiles__item-title,
html.dark section[class*="promo-tiles"] .promo-tiles__item-title,
html.dark [data-section-type*="promo-tiles"] .promo-tiles__item-title,
html.dark section[id*="promo-tiles"] .promo-tiles__item-subheading,
html.dark section[class*="promo-tiles"] .promo-tiles__item-subheading,
html.dark [data-section-type*="promo-tiles"] .promo-tiles__item-subheading {
  color: #fff !important;
}

/* 5) Botões/links dos cards */
html.dark section[id*="promo-tiles"] .btn-outline,
html.dark section[class*="promo-tiles"] .btn-outline,
html.dark [data-section-type*="promo-tiles"] .btn-outline,
html.dark section[id*="promo-tiles"] .btn-solid,
html.dark section[class*="promo-tiles"] .btn-solid,
html.dark [data-section-type*="promo-tiles"] .btn-solid {
  background:   rgba(255,255,255,0.1) !important;
  color:        #fff                 !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* 6) Imagens dos cards: mantêm cor normal */
html.dark section[id*="promo-tiles"] .promo-tiles__item img,
html.dark section[class*="promo-tiles"] .promo-tiles__item img,
html.dark [data-section-type*="promo-tiles"] .promo-tiles__item img {
  filter: none !important;
}

/* ============================= */
/* DARK MODE — Newsletter Signup  */
/* ============================= */

/* 1) Wrapper da seção Newsletter */
html.dark section[id*="newsletter"],
html.dark section[class*="newsletter"],
html.dark [data-section-type="newsletter"] {
  background-color: #111 !important;
  color: #eee      !important;
  padding: 0rem 0rem !important;
}

/* 2) Título e lead paragraph */
html.dark section[id*="newsletter"] h2,
html.dark section[class*="newsletter"] h2,
html.dark [data-section-type="newsletter"] h2 {
  color: #fff !important;
}
html.dark section[id*="newsletter"] p,
html.dark section[class*="newsletter"] p,
html.dark [data-section-type="newsletter"] p {
  color: #ccc !important;
}

/* 3) Input de e-mail */
html.dark section[id*="newsletter"] input[type="email"],
html.dark section[class*="newsletter"] input[type="email"],
html.dark [data-section-type="newsletter"] input[type="email"] {
  background-color: #222 !important;
  border: 1px solid #444 !important;
  color: #eee !important;
}

/* placeholder */
html.dark section[id*="newsletter"] input::placeholder,
html.dark section[class*="newsletter"] input::placeholder,
html.dark [data-section-type="newsletter"] input::placeholder {
  color: #777 !important;
}

/* 4) Botão de “Subscribe” */
html.dark section[id*="newsletter"] button,
html.dark section[class*="newsletter"] button,
html.dark [data-section-type="newsletter"] button {
  background-color: #555 !important;
  color: #fff       !important;
  border: 1px solid #666 !important;
}

/* hover do botão */
html.dark section[id*="newsletter"] button:hover,
html.dark section[class*="newsletter"] button:hover,
html.dark [data-section-type="newsletter"] button:hover {
  background-color: #666 !important;
  border-color: #777 !important;
}

/* 5) Feedback / mensagens de sucesso/erro */
html.dark section[id*="newsletter"] .form__message,
html.dark section[class*="newsletter"] .form__message,
html.dark [data-section-type="newsletter"] .form__message {
  color: #4da6ff !important; /* ou #aaffaa para sucesso, #ff6666 para erro */
}

html.dark main#MainContent {
  background-color: #111 !important;
  color: #eee !important;
}

/* ============================= */
/* DARK MODE — Footer            */
/* ============================= */

/* 1) Container geral do footer */
html.dark footer,
html.dark [data-section-type="footer"] {
  background-color: #003153 !important;
  color: #eee !important;
}

/* 2) Logo — inverter cor do SVG */
  html.dark footer img.w-full.max-h-48.object-scale-down {
  filter: invert(1) hue-rotate(180deg);
  }
}

/* 3) Títulos (ex: “Information”) */
html.dark footer .footer__heading,
html.dark [data-section-type="footer"] .footer__heading {
  color: #fff !important;
}

/* === DARK MODE — Footer Information Links === */
html.dark #Information-link_list_Up8W7U,
html.dark #Information-link_list_Up8W7U ul,
html.dark #Information-link_list_Up8W7U li,
html.dark #Information-link_list_Up8W7U a {
  color: #fff !important;
  opacity: 1 !important;
}

/* 4) Links de informação */
html.dark footer .footer__link-list a,
html.dark [data-section-type="footer"] .footer__link-list a {
  color: #FFF !important;
  transition: color 0.2s;
}
html.dark footer .footer__link-list a:hover,
html.dark [data-section-type="footer"] .footer__link-list a:hover {
  color: #FFF !important;
}

/* 5) Linha-divisória acima do copyright */
html.dark footer .footer__divider,
html.dark [data-section-type="footer"] .footer__divider {
  border-color: rgba(255,255,255,0.1) !important;
}

/* 6) Texto de copyright */
/* === DARK MODE — Copyright do footer === */
html.dark p.text-dark-60.break-words {
  color: #fff !important;
  opacity: 1 !important;
}



/* 8) Botão de seleção de moeda */
/* === DARK MODE — Footer Country Button === */
html.dark .btn-outline.show,
html.dark .btn-outline,
html.dark .text-menu.btn {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
}

/* Se quiser que o ícone SVG também fique preto no botão branco: */
html.dark .btn-outline.show svg,
html.dark .btn-outline svg,
html.dark .text-menu.btn svg {
  fill: #000 !important;
}

/* === DARK MODE — Texto "Your Privacy Choices" no footer === */
html.dark .privacy-footer .privacy-choices__text {
  color: #fff !important;
  opacity: 1 !important;
}

/* === DARK MODE — Texto extra do rodapé === */
html.dark p.text-dark-60.text-p-small,
html.dark .text-dark-60.text-p-small {
  color: #fff !important;
  opacity: 1 !important;
}

/* ============================= */
/* DARK MODE — Swap Background Logo */
/* ============================= */

/* 1) Esconde qualquer <img> de logo original */
html.dark .site-header__logo img,
html.dark .header__logo img {
  display: none !important;
}

/* 2) Injeta sua logo branca como background no container */
html.dark .site-header__logo,
html.dark .header__logo {
  background-image: url('{{ "logo-white.png" | asset_url }}') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

  html.dark .header__logo-image {
  filter: brightness(0) invert(1) !important;
  }



/* 2) Para desktop, mantém o mesmo empilhamento */
@media (min-width: 959px) {
  .footer__information {
    flex-direction: column !important;
  }
}

/* === DARK MODE — Image With Text (catch-all) === */

/* 1) Section wrapper */
html.dark section[data-section-type="image-with-text"],
html.dark section[id*="image-with-text"],
html.dark section[id*="image_with_text"],
html.dark [class*="image-with-text"],
html.dark [class*="image_with_text"] {
  background-color: #111 !important;
}

/* 2) Títulos (h2.rich-text) */
html.dark section[data-section-type="image-with-text"] h2.rich-text,
html.dark section[id*="image-with-text"] h2.rich-text,
html.dark section[id*="image_with_text"] h2.rich-text {
  color: #fff !important;
}

/* 3) Parágrafos / subtítulos */
html.dark section[data-section-type="image-with-text"] .rich-text p,
html.dark section[id*="image-with-text"] .rich-text p,
html.dark section[id*="image_with_text"] .rich-text p {
  color: #fff !important;
}

/* 4) Botões */
html.dark section[data-section-type="image-with-text"] .btn,
html.dark section[id*="image-with-text"] .btn,
html.dark section[id*="image_with_text"] .btn,
html.dark section[data-section-type="image-with-text"] .btn-outline,
html.dark section[id*="image-with-text"] .btn-outline,
html.dark section[id*="image_with_text"] .btn-outline {
  background-color: #fff !important;
  color: #000 !important;
}
html.dark section[data-section-type="image-with-text"] .btn svg,
html.dark section[id*="image-with-text"] .btn svg,
html.dark section[id*="image_with_text"] .btn svg {
  fill: #000 !important;
}

/* 5) Links */
html.dark section[data-section-type="image-with-text"] a,
html.dark section[id*="image-with-text"] a,
html.dark section[id*="image_with_text"] a {
  color: #4da6ff !important;
}

/* === DARK MODE — Image Banner (catch-all) === */

/* 1) Wrapper da seção */
html.dark section[data-section-type="image-banner"],
html.dark section[id*="__image_banner"],
html.dark section[id*="__image-banner"],
html.dark [class*="image-banner"] {
  background-color: #111 !important;
}

/* 2) Qualquer rich-text dentro dela */
html.dark section[data-section-type="image-banner"] .rich-text *,
html.dark section[id*="__image_banner"] .rich-text *,
html.dark section[id*="__image-banner"] .rich-text *,
html.dark [class*="image-banner"] .rich-text * {
  color: #fff !important;
}

/* 3) Botões */
html.dark section[data-section-type="image-banner"] .btn,
html.dark section[id*="__image_banner"] .btn,
html.dark section[id*="__image-banner"] .btn,
html.dark section[data-section-type="image-banner"] .btn-outline,
html.dark section[id*="__image_banner"] .btn-outline,
html.dark section[id*="__image-banner"] .btn-outline,
html.dark [class*="image-banner"] .btn,
html.dark [class*="image-banner"] .btn-outline {
  background-color: #fff !important;
  color: #111 !important;
}

/* 4) Ícones SVG nos botões */
html.dark section[data-section-type="image-banner"] .btn svg,
html.dark section[id*="__image_banner"] .btn svg,
html.dark section[id*="__image-banner"] .btn svg,
html.dark [class*="image-banner"] .btn svg {
  fill: #000 !important;
}

/* 5) Links “learn more” */
html.dark section[data-section-type="image-banner"] a,
html.dark section[id*="__image_banner"] a,
html.dark section[id*="__image-banner"] a,
html.dark [class*="image-banner"] a {
  color: #4da6ff !important;
}

/* === DARK MODE — Blog Post (ID: __blog_post_) === */

/* Títulos h2/h3 dentro do blog post */
html.dark [id*="__blog_post_"] h2,
html.dark [id*="__blog_post_"] h3 {
  color: #fff !important;
}

/* Data (provavelmente <time>) */
html.dark [id*="__blog_post_"] time,
html.dark [id*="__blog_post_"] .blog-date,  /* alternativa se usar <span> */
html.dark [id*="__blog_post_"] .date {
  color: #fff !important;
}

/* Botão (provavelmente .button) */
html.dark [id*="__blog_post_"] a.button,
html.dark [id*="__blog_post_"] .button {
  background: #fff !important;
  color: #000 !important;
}

/* Ícone dentro do botão */
html.dark [id*="__blog_post_"] a.button svg,
html.dark [id*="__blog_post_"] .button svg {
  fill: #000 !important;
}

/* === DARK MODE — Blog Post Título e Botão (Polyform) === */

/* TÍTULO: texto do h2 dentro da seção blog_post */
html.dark [id*="__blog_post_"] h2,
html.dark [id*="__blog_post_"] h2 *,
html.dark [id*="__blog_post_"] h3,
html.dark [id*="__blog_post_"] h3 * {
  color: #fff !important;
}

/* BOTÃO primário */
html.dark [id*="__blog_post_"] .btn,
html.dark [id*="__blog_post_"] .btn-primary {
  background: #fff !important;
  color: #000 !important;
}

/* ÍCONES dentro do botão */
html.dark [id*="__blog_post_"] .btn svg,
html.dark [id*="__blog_post_"] .btn-primary svg {
  fill: #000 !important;
}

/* === DARK MODE — Information Card (Cards de Informações) === */

/* Texto do cartão */
html.dark .rich-text.text-dark-subdued,
html.dark .rich-text.text-dark-subdued p,
html.dark .rich-text.text-p-small,
html.dark .rich-text.text-p-small p {
  color: #fff !important;
  opacity: 1 !important;
}

html.dark [id*="__product_tabs_"].product-tabs-wrapper,
html.dark [id*="__product-tabs_"].product-tabs-wrapper,
html.dark [class*="product-tabs-wrapper"] {
  background-color: #111 !important;
}

/* === DARK MODE — Product Tabs Buttons === */
html.dark .tab-link,
html.dark .tab-link-dark,
html.dark [class*="tab-link"] {
  color: #fff !important;
  background: transparent !important;
}

/* Opcional: deixa a aba ativa ainda mais visível (ex: negrito ou sublinhado) */
html.dark .tab-link.active,
html.dark .tab-link[aria-selected="true"],
html.dark [class*="tab-link"].active,
html.dark [class*="tab-link"][aria-selected="true"] {
  color: #fff !important;
  font-weight: bold !important;
  /* border-bottom: 2px solid #fff !important; */ /* ative se quiser destaque extra */
}

/* === DARK MODE — Video Banner (todas instâncias, sem afetar botão) === */

/* Força o fundo do vídeo banner para #111 no modo escuro */
html.dark [id*="__video_banner_"] .bg-light-surface,
html.dark [id*="__video_banner_"] .bg-light,
html.dark [class*="video_banner"] .bg-light-surface,
html.dark [class*="video_banner"] .bg-light {
  background-color: #111 !important;
}

/* Garante que overlays absolutos dentro do vídeo banner também fiquem escuros */
html.dark [id*="__video_banner_"] .absolute.bg-light-surface,
html.dark [id*="__video_banner_"] .absolute.bg-light,
html.dark [class*="video_banner"] .absolute.bg-light-surface,
html.dark [class*="video_banner"] .absolute.bg-light {
  background-color: #111 !important;
}

/* Deixa o texto do vídeo banner branco, exceto botões */
html.dark [id*="__video_banner_"],
html.dark [id*="__video_banner_"] *:not(.btn):not(a.btn),
html.dark [class*="video_banner"] {
  color: #fff !important;
}

/* Preserve cor dos botões na Recently Viewed no dark */
html.dark section.recently-viewed-products .btn,
html.dark section.recently-viewed-products .btn-outline,
html.dark section.recently-viewed-products .btn-small,
html.dark section.recently-viewed-products a.btn,
html.dark section.recently-viewed-products a.btn-outline,
html.dark section.recently-viewed-products a.btn-small,
html.dark section.recently-viewed-products .text-caption,
html.dark section.recently-viewed-products [class*="btn-"] {
  color: #222 !important;  /* ou #1a1a1a ou inherit, depende do tema, ajuste conforme necessário */
  background: #fff !important;
  border-color: #ccc !important;
}


/* 4. Preço riscado */
html.dark .price--compare,
html.dark .price__compare,
html.dark s,
html.dark .compare-at-price {
  color: #fff !important;
  opacity: 0.65 !important;
  background: transparent !important;
}

/* 5. Inputs e campos de quantidade */
html.dark input,
html.dark select,
html.dark textarea {
  background: #181818 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

/* 6. Botões principais */
html.dark .btn,
html.dark .btn-primary,
html.dark .product__add-to-cart,
html.dark .shopify-payment-button button {
  background: #222 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

/* 7. Botões selecionados/opção ativa */
html.dark .product__option button[aria-selected="true"],
html.dark .product-form__input--color-swatch .swatch.selected {
  background: #333 !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* 8. Accordions / Show more */
html.dark .accordion__title,
html.dark .accordion__content,
html.dark .collapsible-content,
html.dark .collapsible-content * {
  color: #ccc !important;
  background: #161616 !important;
}

/* 9. Bordas e linhas */
html.dark hr,
html.dark .border,
html.dark .border-t,
html.dark .border-b {
  border-color: #222 !important;
}

/* 10. Recomendações de produto */
html.dark .product-recommendations,
html.dark .product-recommendations * {
  background: #111 !important;
  color: #fff !important;
}

/* 11. Compartilhamento/social row */
html.dark .share-button,
html.dark .share,
html.dark .share * {
  color: #fff !important;
  border-color: #333 !important;
}

/* 12. Detalhes e subtítulos extras */
html.dark .product__subtitle,
html.dark .product__metafield,
html.dark .product__shipping {
  color: #bbb !important;
}

/* 13. Campos de seleção (cor, tamanho) */
html.dark .product__option button,
html.dark .product-form__input--color-swatch .swatch,
html.dark .product-form__input--dropdown select {
  background: #222 !important;
  border: 1px solid #444 !important;
  color: #fff !important;
}

/* 14. Status de estoque */
html.dark .product__inventory {
  color: #8bc34a !important;
}

/* 15. Discount badge */
html.dark .badge,
html.dark .price__badge--sale,
html.dark .discount-badge {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* 16. Show more/Show less links */
html.dark .read-more,
html.dark .show-more,
html.dark .show-less {
  color: #fff !important;
  border-bottom: 1px dotted #fff !important;
}

/* 17. Pagamento PayPal/Shopify extra button (opcional) */
html.dark .shopify-payment-button__button,
html.dark .shopify-payment-button__button--unbranded {
  color: #111 !important;
}

/* 18. Fallback - qualquer texto não coberto */
html.dark .template-product * {
  color: #fff !important;
}

html.dark .js-product-form-input .js-actual-value,
html.dark .js-product-form-input .js-actual-value * {
  color: #fff !important;
  opacity: 1 !important;
}

/* DARK MODE — Recomendações de Produtos — GENÉRICO */
html.dark [class*="product-recommendations-padding"].bg-light-surface {
  background: #101014 !important;
}

html.dark [class*="product-recommendations-padding"].bg-light-surface * {
  color: #e3e3e3 !important;
  border-color: #222 !important;
}

/* Título */
html.dark [class*="product-recommendations-padding"].bg-light-surface h2,
html.dark [class*="product-recommendations-padding"].bg-light-surface .section-heading {
  color: #fff !important;
}
/* mantém o botão de fechar preto no dark mode */
html.dark [data-bs-dismiss="modal"] {
  background-color: #000 !important;
  border-color:     #000 !important;
}
/* garante que o ícone SVG fique visível */
html.dark [data-bs-dismiss="modal"] svg path {
  fill: #fff !important;
}

/* força o “X” branco mantendo o círculo preto */
html.dark [data-bs-dismiss="modal"] {
  background-color: #000 !important;
  border-color:     #000 !important;
}
html.dark [data-bs-dismiss="modal"] svg path {
  fill: #fff !important;
}

/* 2) Controles do slider: preserva o estilo original (fundo e ícones pretos) */
html.dark [data-glide-el="controls"] {
  /* remove qualquer bg escuro aplicado pelo dark mode */
  background-color: transparent !important;
  backdrop-filter: none          !important;
}
html.dark [data-glide-el="controls"] svg path {
  fill: #000 !important;
}


/* 2) Controles do slider: restaura fundo translúcido claro e ícones escuros */
html.dark [data-glide-el="controls"] {
  background-color: rgba(255,255,255,0.75) !important;
  backdrop-filter:   none                 !important;
}
html.dark [data-glide-el="controls"] svg path {
  fill: #000 !important;
}

/* 3) Texto interno do slide: mantém o tom escuro original */
html.dark [data-glide-el="controls"] .text-dark-60 {
  color: rgba(0,0,0,0.6) !important;
}

/* Inverte cores dos controles no dark mode: fundo escuro e ícones/texto claros */
html.dark [data-glide-el="controls"] {
  background-color: rgba(0,0,0,0.75) !important;
}

html.dark [data-glide-el="controls"] svg path {
  fill: #fff !important;
}

html.dark [data-glide-el="controls"] button {
  background: transparent !important;
}

html.dark [data-glide-el="controls"] .text-p-small,
html.dark [data-glide-el="controls"] .text-dark-60 {
  color: #fff !important;
}

/* círculo preto com ícone branco no dark mode */
html.dark #mobile-zoom-button {
  background-color: #000 !important;
  border: none         !important;
}
html.dark #mobile-zoom-button svg path {
  fill: #fff           !important;
}

/* borda externa cinza #111 no dark mode para o modal/zoom de imagem */
html.dark .modal-content,
html.dark .image-zoom__inner,
html.dark .image-zoom__inner picture,
html.dark .image-zoom__inner img {
  border: 1px solid #111 !important;
}

/* modal de zoom: fundo cinza escuro (#111) no dark mode */
html.dark .modal-content,
html.dark .modal-body,
html.dark .image-zoom__inner {
  background-color: #111 !important;
}

/* ícone do sidebar-toggle branco no dark mode */
html.dark svg.text-dark path {
  fill: #fff !important;
}


/* branco apenas dentro dos product-cards */
html.dark .product-card .text-p-small,
html.dark .product-card .text-p-small * {
  color: #fff !important;
}

/* header icons voltam a usar currentColor */
html.dark header svg path,
html.dark .site-header svg path,
html.dark .header__icons svg path {
  fill: currentColor !important;
}

/* ─── Breadcrumbs em branco no dark mode ─── */
html.dark nav.text-dark,
html.dark nav.text-dark * {
  color: #fff !important;
}

/* se algum item da lista vier com text-dark-60 */
html.dark .text-dark-60 {
  color: #fff !important;
}

/* ==== Override genérico para todos os banners no modo dark ==== */
html.dark div.shopify-section[id*="banner"] > div {
  background-color: #003153 !important;
}

/* ==== Dark mode: inverter cores da paginação ==== */
/* 1) Todos os itens “inativos” */
html.dark #pagination ul li > * {
  color: #fff !important;
  background-color: transparent !important;
}
/* 2) Item ativo (tem aria-current) */
html.dark #pagination ul li > *[aria-current] {
  color: #000 !important;
  background-color: #fff !important;
}

/* ==== Dark mode: filtro lateral — inverter branco → preto ==== */
html.dark #filters,
html.dark #FacetFiltersForm,
html.dark #FacetsWrapperDesktop {
  background-color: #000 !important;
  color: #fff !important;
}

/* todo elemento branco vira preto */
html.dark #filters [class*="bg-light"],
html.dark #filters [class*="bg-light-surface"],
html.dark #filters [class*="bg-light-material"] {
  background-color: #000 !important;
}

/* bordas claras ficam escuras */
html.dark #filters [class*="border-light"],
html.dark #filters [class*="border-light-material"] {
  border-color: #333 !important;
}

/* inputs, selects e botões no filtro */
html.dark #filters input,
html.dark #filters select,
html.dark #filters button {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* garante que rótulos e spans fiquem legíveis */
html.dark #filters label,
html.dark #filters span {
  color: #fff !important;
}

/* ==== Dark mode: fundo preto no footer do painel de filtros ==== */
html.dark  
  facet-filters-form#filters  
  > form  
  > footer {
    background-color: #000 !important;
    border-top-color: #333 !important; /* borda superior escura */
  }

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-icon {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}

.icon-sun, .icon-moon {
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.icon-moon {
  opacity: 0;
  transform: scale(0.5) rotate(-45deg);
}

/* Quando em modo escuro, inverte com animação */
html.dark .icon-sun {
  opacity: 0;
  transform: scale(0.5) rotate(45deg);
}

html.dark .icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg) translate(-1px, 2px);
}

/* Aplica Anton quando selecionado no painel */
body {
  font-family: {% if settings.site_font_choice == 'anton' %}'Anton', sans-serif{% else %}{{ settings.font_body | json }}{% endif %};
}


.video-wrapper .video-slide .video-title,
.hero-title,
h1, .h1 {
  font-family: 'League Spartan', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
}


/* assets/theme.css (ou seu CSS global) */
.video-wrapper .video-slide .video-slide-content .video-title {
  /* mantém sua config desktop aqui… */
}

/* só para telas até 768px de largura */
@media screen and (max-width: 958px) {
  .video-wrapper .video-slide .video-slide-content {
    top: 40%; /* abaixa um pouco menos que no desktop */
  }

  .video-wrapper .video-slide .video-slide-content .video-title {
    /* font-size responsivo: mínimo 46px, máximo 64px, 8vw no meio */
    font-size: clamp(46px, 8vw, 64px) !important;
    /* linha um pouco mais “arejada” */
    line-height: 1 !important;
    /* deixa o navegador quebrar onde achar melhor também */
    white-space: normal !important;
    /* diminui o espaçamento de letras para caber melhor */
    letter-spacing: -1px !important;
  }

  .video-wrapper .video-slide .video-slide-content .video-subtitle {
    margin-top: 1rem !important;
  }
}

/* Força o mobile menu sempre branco e texto preto, mesmo em dark mode */
html[data-theme="dark"] #mobile-menu,
.dark #mobile-menu {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html[data-theme="dark"] #mobile-menu a,
.dark #mobile-menu a,
html[data-theme="dark"] #mobile-menu .js-sidebar-toggle,
.dark #mobile-menu .js-sidebar-toggle {
  color: #000000 !important;
  fill: #000000 !important;
}


/*  Ajuste de posição do BEST Currency Converter  */
#bcc-floating-widget,
.bcc-floating-widget {
  position: fixed !important;
  bottom: 100px !important;   /* aumenta a distância do rodapé */
  right: 20px  !important;    /* afasta da lateral direita */
  left: auto   !important;
  z-index: 9999 !important;   /* garante que fique acima de tudo */
}

/* === Selos no footer – sem quebra de linha === */
.trust-icons-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rem;
  margin: 2rem auto 1rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

.trust-icons-footer .trust-icon {
  /* valor alterado de 30px para 40px */
  max-height: 40px;
  width: auto;
  flex-shrink: 1;
}

/* mobile continua menor */
@media (max-width: 480px) {
  .trust-icons-footer .trust-icon {
    max-height: 25px;
    max-width: 45%;
    gap: 6rem; /* ajuste aqui para o valor que preferir */
  }
  }

/* === Ajustes para mobile: mostrar todos os selos === */
@media (max-width: 480px) {
  .trust-icons-footer {
    /* move o gap para cá e diminui para caber 3 ícones */
    gap: 1rem !important;
    /* distribui os ícones pelas extremidades e centro */
    justify-content: space-between;
    /* permite que nada seja cortado */
    overflow: visible;
  }

  .trust-icons-footer .trust-icon {
    /* mantém a altura pequena */
    max-height: 25px !important;
    /* cada ícone ocupa até 30% da largura do container */
    max-width: 30% !important;
    width: auto;
    /* não encolhe além do max-width */
    flex-shrink: 0;
  }
}
  /* === Forçar margem embaixo dos selos === */
.trust-icons-footer {
  margin-bottom: 2rem !important;
}

/* === Acrescentar padding-bottom no rodapé geral === */
footer,
.site-footer,
.footer {
  padding-bottom: 2rem !important;
}

/* ==== Ícones brancos em Dark Mode ==== */
html.dark .trust-icons-footer .trust-icon,
body.dark-mode .trust-icons-footer .trust-icon,
html[data-theme="dark"] .trust-icons-footer .trust-icon {
  /* inverte preto→branco e garante brilho */
  filter: invert(100%) brightness(200%) !important;
}

.no-invert {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ==============================
   Mantém o card totalmente fixo
   (remove rotações, escalas e traduções)
   ============================== */
.custom-image-slider .slider-item,
.custom-image-slider .slider-item:active,
.custom-image-slider .slider-item:hover,
.custom-image-slider .slider-item:focus {
  transform: none !important;
  transition: none !important; /* também cancela animações de transição */
}

/* Força menu de desktop em larguras a partir de 959px, mesmo em aparelhos touch */
@media (min-width: 959px) {
  /* Some com o botão de hambúrguer e qualquer gaveta */
  .menu-icon-wrapper,
  .js-sidebar-toggle[data-sidebar-target="mobile-menu"],
  #mobile-menu {
    display: none !important;
  }

  /* Exibe o conteúdo de navegação do header pensado para desktop */
  .header-nav,
  .header-desktop,
  .nav-desktop,
  .main-nav,
  .menu--desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ===== Header: força layout de desktop a partir de 768px ===== */
@media (min-width: 959px) {
  /* Mostra o menu inline de desktop */
  .header__inline-menu,
  .menu--desktop,
  .header-desktop,
  .main-nav,
  .nav-desktop,
  .site-nav,
  .list-menu--inline {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Se algum veio [hidden], ignora */
  .header__inline-menu[hidden],
  .nav-desktop[hidden],
  .site-nav[hidden] {
    display: flex !important;
  }

  /* Some com o hambúrguer e a gaveta mobile */
  .header__icon--menu,
  .menu-icon-wrapper,
  .icon-hamburger,
  .menu-drawer,
  .menu-drawer__inner,
  #mobile-menu,
  .js-sidebar-toggle[data-sidebar-target="mobile-menu"] {
    display: none !important;
  }
}

/* Contraste dos links (se ficarem claros demais) */
.header__inline-menu a,
.nav-desktop a,
.list-menu--inline a,
.menu--desktop a {
  color: #111 !important;
}





/* Header SEM limite de largura (não usa container centrada) */
@media (min-width: 959px) {
  .shopify-section-header .container {
    max-width: none !important; /* se escapar alguma container interna */
  }
  .shopify-section-header .page-width,
  .shopify-section-header .header__container {
    max-width: none !important;
    width: 100% !important;
  }
  /* Announcement bar com a mesma largura do header */
  .announcement-bar,
  .announcement-bar .container,
  .announcement-bar .page-width {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (min-width: 959px) {
  .header__inline-menu,
  .menu--desktop,
  .list-menu--inline { white-space: nowrap !important; min-width: 0 !important; }

  .list-menu--inline ul,
  .menu--desktop ul { flex-wrap: nowrap !important; gap: 28px !important; }

  .site-header__logo, .header__logo,
  .site-header__icons, .header__icons { flex-shrink: 0 !important; }
}


/* Header usando sticky (suave, sem tremor) */
.main-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Quando travado perto do topo, neutraliza o translateY do timer */
body.sticky-lock .main-header {
  transform: translateY(0) !important;
}

/* Se você tinha colocado antes padding-top via with-header-offset, remova-o: */
body.with-header-offset { padding-top: 0 !important; }













/* Enquanto a busca estiver aberta, não esconda o cabeçalho/menus */
html[data-search-open="1"] .js-header-hide {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Se a lupa for <svg> dentro do botão/link, passe o clique para o pai */
.js-open-search svg,
.js-icon-search svg,
[data-open="search"] svg {
  pointer-events: none;
}






/* alinha como os outros ícones */
.header-icon { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
}

/* esconde texto direto dentro do <a>, sem afetar svg nem o badge */
.js-wishlist-link { font-size: 0; line-height: 0; }
.js-wishlist-link svg { width: 24px; height: 24px; }
.js-wishlist-link .wishlist-count-badge { font-size: 11px; line-height: 1; }

.wishlist-count-badge{
  position:absolute; top:-6px; right:-10px;
  min-width:18px; height:18px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; border-radius:999px;
  background:#000; color:#fff; font-weight:700;
}


/* Evita salto de layout: só troca opacidade/visibilidade */
.wishlist-count-badge { opacity: 0; visibility: hidden; }
body.has-wishlist-items .wishlist-count-badge { opacity: 1; visibility: visible; }


/* Mais espaço entre coração e ícone do sol */
.js-wishlist-link {
  margin-right: 14px; /* Aumente para 20px se quiser mais espaço */
  margin-left: 14px;
}

/* Apenas o ícone de favoritos (coração) */
.header-icon.js-wishlist-link svg path {
  fill: none !important;      /* sem preenchimento */
  stroke: currentColor;       /* segue a cor do texto (funciona no dark mode) */
  stroke-width: 2.1;          /* mantém espessura */
}

/* Só no desktop */
@media (min-width: 959px) {
  .nvk-logo-adjust {
    margin-left: 20px; /* ajuste fino */
  }
}



/* ===========================================
   NVK — Wishlist = mesmo visual do botão Share
   (círculo branco sólido, borda e sombras)
   =========================================== */

:root{
  --nvk-fab-right: 12px;       /* mesma coluna do share */
  --nvk-heart-active: #ff2d55; /* vermelho quando ativo */
  --nvk-shadow-outer: 0 6px 18px rgba(15,23,42,.14);
  --nvk-shadow-inset: inset 0 0 1px rgba(0,0,0,.04);
  --nvk-border: 1px solid rgba(0,0,0,.10);
}

/* CARD / GALERIA */
.wishlist-toggle{
  position: absolute;
  top: 10px;
  right: var(--nvk-fab-right);
  width: 40px; height: 40px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* copiar exatamente o do share */
  background-color: #fff !important;     /* branco sólido */
  border: var(--nvk-border) !important;  /* mesma borda do share */
  box-shadow: var(--nvk-shadow-outer), var(--nvk-shadow-inset) !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;

  z-index: 6;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wishlist-toggle:is(:hover,:focus-visible){
  transform: scale(1.06);
  box-shadow:
    0 10px 26px rgba(15,23,42,.18),   /* hover um pouco mais forte */
    var(--nvk-shadow-inset) !important;
}
.wishlist-toggle .wishlist-heart{ width: 22px; height: 22px; transition: transform .2s ease; }

/* PDP (sobre a imagem grande) */
.wishlist-toggle--pdp{
  position: absolute;
  top: 12px;
  right: var(--nvk-fab-right);
  width: 40px; height: 40px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* MESMO look do share */
  background-color: #fff !important;
  border: var(--nvk-border) !important;
  box-shadow: var(--nvk-shadow-outer), var(--nvk-shadow-inset) !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;

  z-index: 6;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wishlist-toggle--pdp:is(:hover,:focus-visible){
  transform: scale(1.06);
  box-shadow:
    0 10px 26px rgba(15,23,42,.18),
    var(--nvk-shadow-inset) !important;
}

/* Tamanho maior no desktop (PDP) */
@media (min-width: 1024px){
  .gallery-wrapper .wishlist-toggle.wishlist-toggle--pdp{
    width: 52px !important;
    height: 52px !important;
  }
  .gallery-wrapper .wishlist-toggle.wishlist-toggle--pdp .wishlist-heart{
    width: 28px !important;
    height: 28px !important;
  }
}

/* Estados do ícone */
.wishlist-toggle svg,
.wishlist-toggle--pdp svg{
  fill: none !important;
  stroke: #000 !important; /* contorno no tema claro */
}

/* Ativo = vermelho (claro e escuro) */
.wishlist-toggle.is-active svg,
.wishlist-toggle--pdp.is-active svg{
  fill: var(--nvk-heart-active) !important;
  stroke: var(--nvk-heart-active) !important;
}

/* Dark mode — mantém o círculo branco igual ao share */
html.dark .wishlist-toggle,
html.dark .wishlist-toggle--pdp{
  background-color: #fff !important;
  border: var(--nvk-border) !important;
  box-shadow: var(--nvk-shadow-outer), var(--nvk-shadow-inset) !important;
}

/* Dark mode — contorno branco quando inativo */
html.dark .wishlist-toggle svg,
html.dark .wishlist-toggle--pdp svg{
  fill: none !important;
  stroke: #fff !important;
}

/* Dark mode — ativo continua VERMELHO */
html.dark .wishlist-toggle.is-active svg,
html.dark .wishlist-toggle--pdp.is-active svg{
  fill: var(--nvk-heart-active) !important;
  stroke: var(--nvk-heart-active) !important;
}

/* Acessibilidade/UX: remover highlight azul no mobile */
.wishlist-toggle--pdp,
.wishlist-toggle--pdp:focus,
.wishlist-toggle--pdp:active,
.wishlist-toggle--pdp:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}






/* === CART badge — idêntico ao wishlist badge === */
.header-cart { position: relative; } /* garante referência p/ posicionamento */

/* Seletores amplos para cobrir variações do Polyform */
#cart-icon-bubble > div,
.header-cart .js-cart-count,
.header-cart .cart-count-sup,
.header-icons .js-cart-count,
.header-icons .cart-count-sup,
.header-icons .cart-bubble,
.cart-count,
.cart-bubble {
  position: absolute;
  right: -0px;       /* idem */
  min-width: 16px;    /* mesmo diâmetro que você deixou no coração */
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  font-size: 11px;    /* número do mesmo tamanho */
  font-weight: 700;
  background: var(--brand, #111);                 /* círculo escuro */
  color: var(--brand-text-contrast, #fff);        /* número branco */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30);          /* aro leve igual */
  transition: transform .15s ease, opacity .15s ease;
  opacity: 0;                                      /* anim como no coração */
  transform: scale(.9);
}

/* Estados de visibilidade — espelha o comportamento do coração */
#cart-icon-bubble > div:not(.hidden),
.header-cart .js-cart-count.is-visible,
.header-cart .cart-count-sup.is-visible,
.header-icons .js-cart-count.is-visible,
.header-icons .cart-count-sup.is-visible,
.cart-count--visible,
.cart-bubble--visible {
  opacity: 1;
  transform: none;
}




/* === Wishlist badge: mesmo estilo da bolha do carrinho === */
.header-wishlist { position: relative; } /* já está, mas garantimos */

.header-wishlist .js-wishlist-count,
.header-wishlist .wishlist-count-sup {
  position: absolute;
  top: -10px;      /* ajuste fino para alinhar com seu ícone */
  right: -13px;    /* ajuste fino */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  font-size: 11px;          /* cart usa “p-mini”; aqui equivalente */
  font-weight: 700;
  background: var(--brand, #111);       /* mesma cor de fundo do cart-bubble */
  color: var(--brand-text-contrast, #fff);  /* como o carrinho (texto claro) */
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);    /* leve contorno como no cart */
  transform: none !important;
  opacity: 0;
}

.header-wishlist .js-wishlist-count.is-visible,
.header-wishlist .wishlist-count-sup.is-visible {
  opacity: 1 !important;
  transform: scale(1);
}

/* Caso algum estilo do tema oculte quando vazio */
.header-wishlist .js-wishlist-count[hidden],
.header-wishlist .wishlist-count-sup[hidden] { display: inline; }
'


/* ≤ 1180px */
@media (max-width: 1180px) {
  .nvk-desktop-nav .nvk-menu-link { font-size: 16px; }
  .nvk-desktop-nav ul { gap: 20px; }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
  .nvk-desktop-nav .nvk-menu-link { font-size: 15px; }
  .nvk-desktop-nav ul { gap: 16px; }
}

/* ≤ 900px (desktop-forçado no celular) */
@media (max-width: 900px) {
  .nvk-desktop-nav .nvk-menu-link { font-size: 14px; }
  .nvk-desktop-nav ul { gap: 12px; }
}



/* Esconde corações só na Home */
.template-index .wishlist-toggle,
.template-index .wishlist-heart,
.template-index [data-wishlist-handle]{
  display: none !important;
}




/* ===== Reset total do botão de wishlist nos cards ===== */

/* Tira fundo, raio e sombra */
.product-card .wishlist-toggle {
  all: unset !important;              /* reseta absolutamente tudo */
  cursor: pointer !important;         /* devolve o cursor de clique */
  display: inline-flex !important;    /* centraliza o ícone */
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  z-index: 5;
}

/* Mata qualquer pseudo-elemento que esteja criando o círculo */
.product-card .wishlist-toggle::before,
.product-card .wishlist-toggle::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* SVG do coração */
.product-card .wishlist-heart {
  width: 20px;
  height: 20px;
  stroke: currentColor !important;
  fill: transparent !important;
  transition: fill .2s ease, transform .15s ease;
}

/* Estado ativo (favoritado) */
.product-card .wishlist-toggle.is-active .wishlist-heart,
.product-card .wishlist-toggle[aria-pressed="true"] .wishlist-heart {
  fill: currentColor !important;
}

/* Dark mode: cor clara */
html.dark .product-card .wishlist-heart {
  stroke: #fff !important;
}




/* HOME apenas: esconder QUALQUER botão de wishlist dentro do Featured Product,
   incluindo o overlay sobre a imagem, quick-view e variantes do tema */
.template-index section[class*="featured"][class*="product"] .wishlist-toggle,
.template-index section[class*="featured_product"] .wishlist-toggle,
.template-index .featured-product .wishlist-toggle,
.template-index .section-featured-product .wishlist-toggle,
.template-index .featured_product .wishlist-toggle,
.template-index [data-section-type*="featured"][data-section-type*="product"] .wishlist-toggle,
.template-index .product-media-gallery .wishlist-toggle,
.template-index .gallery-wrapper .wishlist-toggle,
.template-index .product-gallery .wishlist-toggle,
.template-index .media-gallery .wishlist-toggle,
.template-index .wishlist-toggle--pdp {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Evita o callout/seleção só em mídias (não afeta textos/links) */
img, picture, video, canvas, svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}






/* ===== NAEVOKK — Wishlist sem “22” (só mostra data-count) ===== */
.wishlist-count-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9999px;

  /* esconde QUALQUER texto do <span> (evita duplicar com ::after) */
  font-size: 0 !important;      /* o texto do node vira largura 0 */
  line-height: 1;
  transform: none !important;
  transition: none !important;
  font-variant-numeric: tabular-nums;
}

/* reserva espaço para 2 dígitos sem piscar/encolher */
.wishlist-count-badge::before{
  content: '99';
  opacity: 0;
}

/* o número visível vem SÓ daqui */
.wishlist-count-badge::after{
  content: attr(data-count);
  font-size: 11px;              /* tamanho real do número */
  line-height: 1;
}

/* quando 0, mantemos o espaço (sem display:none) */
.wishlist-count-badge.is-empty{
  opacity: 1;
}






/* ===========================
   LIGHT MODE — Contact Form
   =========================== */
html:not(.dark) #ContactForm input,
html:not(.dark) #ContactForm textarea,
html:not(.dark) #ContactForm select,
html:not(.dark) form[action*="/contact"] input,
html:not(.dark) form[action*="/contact"] textarea,
html:not(.dark) form[action*="/contact"] select,
html:not(.dark) .contact form input,
html:not(.dark) .contact form textarea,
html:not(.dark) .contact form select {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #d1d5db !important; /* cinza-300 */
  border-radius: 2px !important;
  height: 52px;
  padding: 12px 16px;
  filter: none !important;        /* neutraliza qualquer invert herdado */
  box-shadow: none !important;
}

html:not(.dark) #ContactForm textarea,
html:not(.dark) form[action*="/contact"] textarea,
html:not(.dark) .contact form textarea {
  min-height: 160px;
}

html:not(.dark) #ContactForm ::placeholder,
html:not(.dark) form[action*="/contact"] ::placeholder,
html:not(.dark) .contact form ::placeholder {
  color: #6b7280 !important; /* cinza médio */
  opacity: 1 !important;
}

/* Foco acessível */
html:not(.dark) #ContactForm input:focus,
html:not(.dark) #ContactForm textarea:focus,
html:not(.dark) #ContactForm select:focus,
html:not(.dark) form[action*="/contact"] input:focus,
html:not(.dark) form[action*="/contact"] textarea:focus,
html:not(.dark) form[action*="/contact"] select:focus {
  outline: none !important;
  border-color: #111111 !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, .15) !important; /* anel sutil */
}

/* Corrige autofill amarelo do Chrome/Android */
html:not(.dark) #ContactForm input:-webkit-autofill,
html:not(.dark) form[action*="/contact"] input:-webkit-autofill,
html:not(.dark) .contact form input:-webkit-autofill {
  -webkit-text-fill-color: #111111 !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* Wrappers que às vezes pintam o fundo */
html:not(.dark) .contact .field,
html:not(.dark) .contact .form-field,
html:not(.dark) [class*="contact"] .field {
  background: transparent !important;
}

/* Botão - mantém contraste no claro */
html:not(.dark) #ContactForm [type="submit"],
html:not(.dark) form[action*="/contact"] [type="submit"] {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}



<script>
  (function () {
    const sel = 'input[type="search"], .predictive-search__input';
    document.addEventListener('input', function (e) {
      const el = e.target.closest(sel);
      if (!el) return;
      clearTimeout(el._nvkDeb);
      el._nvkDeb = setTimeout(() => {
        // Dispara evento 'change' que o tema/app já escuta
        el.dispatchEvent(new Event('change', { bubbles: true }));
      }, 350); // ajuste entre 300–500ms
    }, { passive: true });
  })();
</script>


/* BLOQUEIO TOTAL DE CALL OUT / SELEÇÃO / PRINT */
html, body {
  -webkit-touch-callout: none;  /* bloqueia menu de toque longo no iOS/Android */
  -webkit-user-select: none;
  user-select: none;
}

/* Desativa seleção e arrasto nas mídias */
img, picture, video, canvas, svg {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* Mata impressão da página (Ctrl+P / Print) */
@media print {
  html, body { display: none !important; }
}



/* HOTFIX: impedir barra horizontal por overflow-x */
html, body {
  max-width: 100%;
  overflow-x: clip; /* use hidden se algo muito antigo reclamar */
}

/* Wrappers comuns que costumam “vazar” */
.header, .site-header, .announcement-bar,
.page-width, .container, .section, .grid, .wrapper,
.footer, .video-slider, .video-slider-test, .slider, .carousel {
  overflow-x: clip;
}

/* 100vw seguro: evita contar a barra vertical do Windows */
:root {
  --vw-safe: calc(100vw - (100vw - 100%));
}
.w-100vw, [data-full-bleed="true"], .full-bleed {
  width: var(--vw-safe);
  max-width: 100%;
}















/* =======================
   SCROLLBAR GLOBAL
   (cole em global-custom.css)
   ======================= */

/* 1) Paleta por tema */
:root {
  --sb-width: 12px;               /* largura da barra */
  --sb-track: #f2f2f5;            /* trilho no tema claro */
  --sb-thumb: #b8b8c2;            /* “pino” no claro */
  --sb-thumb-hover: #9a9aaa;      /* hover claro */
  --sb-corner: transparent;       /* canto (quando tem x e y) */
}

html.dark {
  --sb-track: #0f0f13;            /* trilho no dark */
  --sb-thumb: #3b3b47;            /* pino no dark */
  --sb-thumb-hover: #555569;      /* hover dark */
}

/* 2) Chrome/Edge/Safari (pseudo-elementos WebKit) */
*::-webkit-scrollbar {
  width: var(--sb-width);
  height: var(--sb-width); /* também estiliza a horizontal */
}
*::-webkit-scrollbar-track {
  background: var(--sb-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  /* “folga” entre o thumb e o track para visual premium */
  border: 3px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
}
*::-webkit-scrollbar-corner {
  background: var(--sb-corner);
}

/* 3) Firefox (propriedades padrão) */
* {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* 4) Evita “pular” layout quando a barra aparece/desaparece (Chromium/Firefox) */
html {
  scrollbar-gutter: stable both-edges;
}

/* 5) Acessibilidade: em alto contraste, volta para o padrão do sistema */
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
}

/* 6) Exemplo de barra mais fininha em contêineres específicos (opcional) */
cart-drawer,
.splide__track {
  scrollbar-width: thin;
}
cart-drawer::-webkit-scrollbar,
.splide__track::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* ===== Scrollbar: MOBILE com paleta/espessura reduzida ===== */
@media (max-width: 958.98px), (hover: none), (pointer: coarse) {
  :root{
    --sb-width: 3px;                 /* mais fina no mobile */
    --sb-track: rgba(0,0,0,.04);     /* trilho bem sutil no claro */
    --sb-thumb: rgba(0,0,0,.18);     /* pino discreto no claro */
    --sb-thumb-hover: rgba(0,0,0,.28);
    --sb-corner: transparent;
  }
  html.dark{
    --sb-track: rgba(255,255,255,.06); /* trilho sutil no dark */
    --sb-thumb: rgba(255,255,255,.24); /* pino discreto no dark */
    --sb-thumb-hover: rgba(255,255,255,.36);
  }

  /* Ajuste de “folga” do pino p/ ficar mais minimal no mobile */
  *::-webkit-scrollbar-thumb { border-width: 2px; }

  /* Firefox Android usa estas propriedades */
  * { scrollbar-width: thin; }
}

@font-face {
  font-family: 'League Spartan';
  src: url('{{ "LeagueSpartan-ExtraBold.woff2" | asset_url }}') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'League Spartan';
  src: url('{{ "LeagueSpartan-SemiBold.woff2" | asset_url }}') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* As outras famílias (DM Sans / Libre Caslon) não precisam preload.
   Mantenha só os @font-face normais com font-display: swap. */


 









/* ===========================
   COLEÇÃO / GRID DE PRODUTOS
   Mostrar coração APENAS quando favoritado
   =========================== */

/* Esconde por padrão no grid da coleção */
#ProductGridContainer .product-card .wishlist-toggle,
#ProductGridContainer .product-card [data-wishlist-handle],
#ProductGridContainer .product-card .wishlist-heart,
#product-grid .product-card .wishlist-toggle,
#product-grid .product-card [data-wishlist-handle],
#product-grid .product-card .wishlist-heart {
  display: none !important;
}

/* Mostra somente quando ativo (favoritado) */
#ProductGridContainer .product-card .wishlist-toggle.is-active,
#ProductGridContainer .product-card .wishlist-toggle[aria-pressed="true"],
#ProductGridContainer .product-card [data-wishlist-handle].is-active,
#ProductGridContainer .product-card [data-wishlist-handle][aria-pressed="true"],
#product-grid .product-card .wishlist-toggle.is-active,
#product-grid .product-card .wishlist-toggle[aria-pressed="true"],
#product-grid .product-card [data-wishlist-handle].is-active,
#product-grid .product-card [data-wishlist-handle][aria-pressed="true"] {
  display: inline-flex !important;
}




/* ===========================
   Coração com contorno branco
   =========================== */

:root{
  --nvk-wl-stroke: 2.4px;   /* espessura do contorno */
  --nvk-wl-gap: 10px;       /* posição já usada antes */
  --nvk-wl-size: 28px;      /* tamanho da área clicável */
}

/* mantém posicionamento no topo-direito da FOTO */
.product-card .card-image,
.product-card .media,
.product-card [class*="card-image"]{ position: relative !important; }

.product-card [class*="wishlist" i],
.product-card [data-wishlist],
.product-card [data-favorite]{
  position: absolute !important;
  top: var(--nvk-wl-gap) !important;
  right: var(--nvk-wl-gap) !important;
  width: var(--nvk-wl-size);
  height: var(--nvk-wl-size);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  z-index: 20 !important;
  background: transparent !important; /* sem pastilha */
  box-shadow: none !important;
  border: 0 !important;
}

/* ===== A) Ícones SVG inline (melhor resultado) ===== */
/* aplica um stroke branco ao próprio desenho do coração */
.product-card [class*="wishlist" i] svg,
.product-card [data-wishlist] svg,
.product-card [data-favorite] svg,
.product-card [class*="wishlist" i] svg *,
.product-card [data-wishlist] svg *,
.product-card [data-favorite] svg *{
  stroke: #fff !important;
  stroke-width: var(--nvk-wl-stroke) !important;
  paint-order: stroke fill;            /* desenha contorno antes do preenchimento */
  vector-effect: non-scaling-stroke;   /* contorno consistente em zoom */
}

/* ===== B) Fallback p/ fonte/emoji (sem SVG) ===== */
/* cria “falso contorno” com sombras no texto */
.product-card [class*="wishlist" i]::before,
.product-card [data-wishlist]::before,
.product-card [data-favorite]::before,
.product-card [class*="wishlist" i] i,
.product-card [data-wishlist] i,
.product-card [data-favorite] i{
  text-shadow:
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 3px #fff;
}











/* ===== NVK — MENU FIXO NO VIEWPORT (MOBILE) ===== */
@media (max-width: 958px) {
  :root {
    /* Ajuste se quiser painel parcial: 88vw, 92vw…; 100vw = tela inteira */
    --nvk-drawer-width: 100vw;
  }

  /* Considera os estados mais comuns de “menu aberto” no Polyform/Dawn */
  #mobile-menu.active,
  #mobile-menu[aria-hidden="false"],
  .menu-drawer.is-open,
  details.menu-drawer[open] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;       /* ancora na DIREITA */
    left: auto !important;
    bottom: 0 !important;

    width: var(--nvk-drawer-width) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 99999 !important;

    background: #ffffff !important;   /* fundo claro */
    transform: translateZ(0);          /* evita tremidas em mobile */
    box-shadow: -24px 0 48px rgba(0,0,0,.24); /* sombra opcional do lado esq. */
  }

  html.dark #mobile-menu.active,
  html.dark #mobile-menu[aria-hidden="false"],
  html.dark .menu-drawer.is-open,
  html.dark details.menu-drawer[open] {
  }

  /* Se houver “inner”, empurra para a direita */
  #mobile-menu.active .menu-drawer__inner,
  #mobile-menu[aria-hidden="false"] .menu-drawer__inner,
  .menu-drawer.is-open .menu-drawer__inner,
  details.menu-drawer[open] .menu-drawer__inner {
    margin-left: auto !important;
  }

  /* Bloqueia o scroll do conteúdo atrás do menu — só com CSS moderno */
  body:has(#mobile-menu.active),
  body:has(#mobile-menu[aria-hidden="false"]),
  body:has(.menu-drawer.is-open),
  body:has(details.menu-drawer[open]) {
    overflow: hidden !important;
    height: 100dvh !important;
  }
}






/* ===========================
   NVK — SHARE BUTTON (ML style)
   =========================== */

:root {
  --nvk-share-size: 44px;
  --nvk-share-bg: #ffffff
  --nvk-share-border: rgba(0,0,0,0.14);
  --nvk-share-icon: #1E6BFF; /* azul Naevokk */
  --nvk-share-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

html.dark {
  --nvk-share-bg: rgba(0,0,0,0.62);
  --nvk-share-border: rgba(255,255,255,0.10);
  --nvk-share-icon: #5AA0FF; /* leve variação no dark */
}

.nvk-share-toggle {
  position: absolute;
  top: 88px;             /* fica logo ABAIXO do coração (que costuma estar em 10px/top) */
  right: 10px;
  width: var(--nvk-share-size);
  height: var(--nvk-share-size);
  border-radius: 999px;
  background: var(--nvk-share-bg);
  border: 1px solid var(--nvk-share-border);
  box-shadow: var(--nvk-share-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nvk-share-icon);
  z-index: 4;            /* acima da imagem e do coração, se precisar suba para 8 */
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  cursor: pointer;
}

.nvk-share-toggle:focus-visible,
.nvk-share-toggle:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
  outline: none;
}

.nvk-share-icon { pointer-events: none; display: block; }

/* Garante independência do coração (se ele usar .wishlist-toggle) */
.wishlist-toggle + .nvk-share-toggle { top: 88px; right: 10px; }

/* Regras para cartões compactos (mini-cards) */
.card--tight .nvk-share-toggle,
.product-card--compact .nvk-share-toggle { top: 56px; right: 8px; }

/* MOBILE — mantém proporção e dedo confortável */
@media (max-width: 768px) {
  :root { --nvk-share-size: 42px; }
  .nvk-share-toggle { top: 180px; right: 11px; }
}

/* Toast mínimo para feedback do fallback */
.nvk-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: 16px;
  background: rgba(20,20,24,.92);
  color: #fff;
  font: 500 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 10px 14px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.nvk-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
html.dark .nvk-toast { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12) }


/* ===== NVK — SHARE 100% OPAQUE (CLARO & DARK) ===== */

/* 1) Força opacidade total do próprio botão */
.nvk-share-toggle{
  background-color: #ffffff !important;     /* branco sólido */
  border: 1px solid rgba(0,0,0,0.16) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.14) !important; /* contraste */
}

/* 2) No tema escuro, mantém círculo branco sólido e borda visível */
html.dark .nvk-share-toggle{
  background-color: #ffffff !important;     /* mantém branco no dark, como no ML */
  border-color: rgba(255,255,255,0.22) !important;  /* borda mais perceptível no dark */
  color:rgb(0, 106, 255) !important;
}

/* 3) Garante que o ícone não fique esmaecido */
.nvk-share-toggle .nvk-share-icon{
  opacity: 1 !important;
}

/* (Opcional) se quiser ainda mais recorte em fotos claríssimas */
.nvk-share-toggle{
  box-shadow:
    0 6px 18px rgba(15,23,42,0.14),
    inset 0 0 0 1px rgba(0,0,0,0.04) !important; /* leve halo interno */
}





/* ========== NVK — SOMBRA/DESTAQUE DO CORAÇÃO ========== */
/* Força pegar o botão certo e vencer overrides do tema */
.product-gallery .wishlist-toggle,
.gallery .wishlist-toggle,
button.wishlist-toggle {
  position: absolute;            /* preserva o layout atual */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Fundo “vidro” sempre visível (inclusive no dark) */
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: saturate(180%) blur(6px);

  /* 💡 Sombra forte o bastante para você ver na hora */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16),
              0 2px  6px rgba(0, 0, 0, 0.10) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
  z-index: 3;
}

.product-gallery .wishlist-toggle:hover,
.gallery .wishlist-toggle:hover,
button.wishlist-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.20),
              0  3px  8px rgba(0,0,0,0.12) !important;
}

/* Garante fundo branco no tema escuro também */
html.dark .wishlist-toggle {
  background: rgb(255, 255, 255) !important;
}

/* 🔧 Evita que a sombra seja cortada pela galeria */
.product-gallery,
.product-gallery .gallery-wrapper,
.gallery-wrapper,
.product__media,
.product-media-container {
  overflow: visible !important;
}



/* ===== NVK — Coração no DARK: estados separados ===== */

/* NÃO FAVORITADO (somente contorno preto) */
html.dark .wishlist-toggle:not(.is-active):not(.active):not([aria-pressed="true"]):not([data-active="true"]):not([data-favorited="true"])
  .wishlist-heart {
  color: #111 !important;   /* currentColor do stroke */
  stroke: #111 !important;
  fill: none !important;    /* só o contorno */
}

/* FAVORITADO (preenche vermelho, sem contorno preto) */
html.dark .wishlist-toggle.is-active .wishlist-heart,
html.dark .wishlist-toggle.active .wishlist-heart,
html.dark .wishlist-toggle[aria-pressed="true"] .wishlist-heart,
html.dark .wishlist-toggle[data-active="true"] .wishlist-heart,
html.dark .wishlist-toggle[data-favorited="true"] .wishlist-heart {
  color: #e11d48 !important;
  stroke: #e11d48 !important;
  fill: #e11d48 !important;
}




/* === NVK — SHARE BUTTON (abaixo do coração, sem pulo) === */
:root{
  --nvk-share-size: 44px;
  --nvk-share-bg: #ffffff;
  --nvk-share-border: rgba(0,0,0,0.14);
  --nvk-share-icon: #1E6BFF;
  --nvk-share-shadow: 0 6px 18px rgba(15,23,42,.12);
}
html.dark{
  --nvk-share-bg: rgba(0,0,0,.62);
  --nvk-share-border: rgba(255,255,255,.10);
  --nvk-share-icon: #5AA0FF;
}

.nvk-share-toggle{
  position:absolute;      /* coordenadas via JS */
  width:var(--nvk-share-size);
  height:var(--nvk-share-size);
  border-radius:999px;
  background:var(--nvk-share-bg);
  border:1px solid var(--nvk-share-border);
  box-shadow:var(--nvk-share-shadow);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--nvk-share-icon);
  z-index: 6;
  cursor:pointer;

  /* evita pulo no 1º paint */
  opacity:0; visibility:hidden;
  transform: translateY(0); /* base neutra */
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .12s ease;
}
.nvk-share-toggle.is-ready{
  opacity:1; visibility:visible;
}

.nvk-share-toggle:hover,
.nvk-share-toggle:focus-visible{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  outline:none;
}

@media (max-width:768px){
  :root{ --nvk-share-size: 42px; }
}




/* =============== */
/* NVK — SHARE ≥1024: igual ao coração */
/* =============== */
@media (min-width: 1024px) {
  .nvk-share-toggle {
    /* ajuste este valor para o MESMO diâmetro do coração no desktop */
    --nvk-share-size: 52px;

    width: var(--nvk-share-size);
    height: var(--nvk-share-size);
    border-radius: 999px;
    padding: 0;
    line-height: 1;
  }

  /* garante que o ícone cresça junto do círculo */
  .nvk-share-toggle svg,
  .nvk-share-toggle .nvk-share-icon {
    width: calc(var(--nvk-share-size) * 0.48);
    height: calc(var(--nvk-share-size) * 0.48);
    display: block;
  }
}






/* ================================
   NVK — CART DRAWER (TEMA CLARO)
   ================================ */

/* 1) Número do meio = texto BRANCO no tema claro */
#CartDrawer quantity-input .quantity > input[type="number"],
#CartDrawer input#Drawer-quantity,
#CartDrawer .quantity__input {
  color: #fff !important;               /* número branco */
  /* mantém o fundo que você já usa; se quiser escurecer: */
  /* background-color: #222 !important; */
}

/* Placeholders do input, caso apareçam */
#CartDrawer quantity-input .quantity > input::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* ===================================================== */
/* 2A) OPÇÃO RECOMENDADA: NOTAS BRANCO + TEXTO PRETO     */
/* (use ESTA OU a 2B abaixo — não as duas juntas)        */
/* ===================================================== */
#CartDrawer-Note,
#CartDrawer textarea[name="note"] {
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
#CartDrawer-Note::placeholder,
#CartDrawer textarea[name="note"]::placeholder {
  color: rgba(0,0,0,0.45) !important;
}

/* ===================================================== */
/* 2B) ALTERNATIVA: NOTAS ESCURAS + TEXTO BRANCO         */
/* (se preferir essa, comente o bloco 2A e descomente)   */
/* ===================================================== */
/*
#CartDrawer-Note,
#CartDrawer textarea[name="note"] {
  background-color: #222 !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
}
#CartDrawer-Note::placeholder,
#CartDrawer textarea[name="note"]::placeholder {
  color: rgba(255,255,255,0.6) !important;
}
*/











/* ================================
   NVK — QUANTITY FIX (persistente)
   ================================ */

/* Centro (número) — nossa classe dedicada */
#CartDrawer .nvk-qty-center {
  background-color: #2a2a2a !important;  /* fundo escuro no tema claro */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  outline: none !important;
}

/* Tema escuro mantém coerência (se você usa dark) */
html.dark #CartDrawer .nvk-qty-center {
  background-color: rgba(25,25,25,0.88) !important;
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Placeholders (se existirem) */
#CartDrawer .nvk-qty-center::placeholder { color: rgba(255,255,255,0.6) !important; }
html.dark #CartDrawer .nvk-qty-center::placeholder { color: rgba(255,255,255,0.6) !important; }

/* Laterais (– e +) — no claro seguem brancas; no dark ficam escuras */
html:not(.dark) #CartDrawer .nvk-qty-btn {
  background-color: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
html.dark #CartDrawer .nvk-qty-btn {
  background-color: rgba(25,25,25,0.88) !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Não deixe o hover clarear no dark */
html.dark #CartDrawer .nvk-qty-btn:hover {
  background-color: rgba(255,255,255,0.08) !important;
}









/* BLOQUEIO TOTAL DE CALL OUT / SELEÇÃO / PRINT */
html, body {
  -webkit-touch-callout: none;  /* bloqueia menu de toque longo no iOS/Android */
  -webkit-user-select: none;
  user-select: none;
}

/* Desativa seleção e arrasto nas mídias */
img, picture, video, canvas, svg {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* Mata impressão da página (Ctrl+P / Print) */
@media print {
  html, body { display: none !important; }
}







/* NVK — Correção fina do menu entre 959px e 1023px */
@media (min-width: 959px) and (max-width: 1023px) {
  /* cancela o empurrão negativo só nesse range */
  #nvk-menu {
    left: 0 !important;
  }

  /* ====== ESCOLHA UMA DAS DUAS LINHAS ABAIXO ====== */

  /* A) Centralizar o menu nesse intervalo */
  #nvk-menu { justify-self: center !important; }