/* ============================================================
   FAKENEW™ — Tema Industrial Streetwear para Drophar
   "The Redacted Archive" — v24 (consolidated: v17+v18+v19+v20+v21+v22+v23)
   Vermelho alerta #ED3237 | Display: Epilogue 900 Italic (logo font)
   ============================================================ */

/* 1. FONTES ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400..900;1,400..900&family=Space+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* 2. VARIÁVEIS DE MARCA ---------------------------------------- */
:root {
  --fn-black:           #0A0A0A;
  --fn-bg:              #131313;
  --fn-surface:         #1c1b1b;
  --fn-surface-high:    #2a2a2a;
  --fn-surface-highest: #353534;
  --fn-white:           #F2F0EB;
  --fn-text:            #e5e2e1;
  --fn-muted:           #8a8a8a;
  --fn-red:             #ED3237;
  --fn-red-dim:         #E63946;
  --fn-red-deep:        #93000a;
  --fn-red-on:          #ffffff;
  --fn-error:           #ffb4ab;

  --font-headline: 'Space Grotesk', Impact, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
}

/* 3. BASE GLOBAL — background escuro em todas as páginas -------- */
html, body,
body.products, body.products.view, body.home, body.view,
body[class*="products"], body[class*="home"], body[class*="page"] {
  background: var(--fn-bg) !important;
  color: var(--fn-text) !important;
  font-family: var(--font-body) !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body, p, span, div, li, td, label {
  font-family: var(--font-body) !important;
}

/* 4. HEADLINES ------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  color: var(--fn-white) !important;
}

/* H1 do produto (PDP) */
h1.name, .product-page h1, main h1 {
  font-family: var(--font-headline) !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em !important;
  color: var(--fn-white) !important;
  line-height: 1 !important;
}

/* 5. LINKS ----------------------------------------------------- */
a {
  color: var(--fn-text);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--fn-red) !important; }

/* 6. BOTÕES — tema Drophar usa .btn-thema como classe primária - */
.btn, .btn-thema, .btn-primary, .btn-success, .btn-danger,
.btn-buy, .btn-comprar, .btn-adquirir, .btn-add-cart,
.btn-finish-order, .btn-go-cart,
[class*="btn-buy"], [class*="btn-comprar"], [class*="btn-adquirir"],
button[type="submit"] {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-headline) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  padding: 14px 28px !important;
  transition: transform 0.1s, filter 0.1s !important;
}
.btn:hover, .btn-thema:hover, .btn-buy:hover,
[class*="btn-buy"]:hover, [class*="btn-comprar"]:hover {
  transform: skewX(-3deg) !important;
  filter: brightness(1.1) !important;
}

/* Botão outline (btn-outline) — secundário escuro */
.btn-outline, .btn-thema.btn-outline {
  background: transparent !important;
  color: var(--fn-red) !important;
  border: 2px solid var(--fn-red) !important;
}
.btn-outline:hover {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
}

/* 7. HEADER — .block-header + estruturas internas -------------- */
.block-header, header.block-header,
header.docked, .header-main, #header {
  background: var(--fn-black) !important;
  border-bottom: 4px solid var(--fn-red) !important;
}

/* TOP BAR (classe real: .topnav) — era cinza claro por padrão */
.block-header .topnav, .topnav {
  background: var(--fn-black) !important;
  color: var(--fn-muted) !important;
  border-bottom: 1px solid var(--fn-surface) !important;
}
.topnav *, .topnav span, .topnav a,
.topnav .phone, .topnav .whatsapp,
.topnav i, .topnav svg {
  color: var(--fn-text) !important;
}
.topnav a:hover { color: var(--fn-red) !important; }
.topnav .phone, .topnav .whatsapp {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Logo — classe .logo é <a>, contém <img> */
.logo, .block-header .logo, a.logo {
  display: inline-block !important;
}
.logo img {
  filter: brightness(1.1) contrast(1.05) !important;
  max-width: 180px !important;
  transition: transform 0.2s !important;
}
.logo:hover img { transform: skewX(-6deg) !important; }

/* Busca header */
.block-header input[type="search"],
.block-header input[type="text"] {
  background: var(--fn-surface) !important;
  color: var(--fn-white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.05em !important;
}
.block-header input::placeholder {
  color: var(--fn-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
}

/* Botão de busca */
.block-header button[type="submit"],
.block-header .btn-search {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  border-radius: 0 !important;
}

/* Ícones do header */
.block-header svg, .block-header i.fa,
.block-header i.fas, .block-header .material-icons,
.block-header .icon, .block-header [class*="icon"] {
  color: var(--fn-red) !important;
}

/* Cart total no header */
.block-header .cart-total h4,
.block-header .cart .count {
  color: var(--fn-white) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}
.block-header .cart .count {
  color: var(--fn-red) !important;
}

/* "Entre / Cadastre-se / para ver seus pedidos" */
.block-header .text a,
.block-header .text-underline {
  color: var(--fn-white) !important;
  font-family: var(--font-headline) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}

/* 8. HERO SLIDER ----------------------------------------------- */
.block-hero-slider, .hero-slider {
  background: var(--fn-black) !important;
}
.block-hero-slider h1, .block-hero-slider h2,
.hero-slider h1, .hero-slider h2 {
  font-family: var(--font-headline) !important;
  color: var(--fn-white) !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
}

/* 9. TÍTULOS DE SEÇÃO (classe real: .title — é DIV não heading) - */
.products .title, .block-produtos-grid .title,
.block-produtos-carrossel .title, .block-banners .title,
main .title {
  font-family: var(--font-headline) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--fn-white) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  letter-spacing: -0.03em !important;
  border-left: 8px solid var(--fn-red) !important;
  padding-left: 20px !important;
  display: inline-block !important;
  margin-bottom: 0 !important;
}
/* Subtítulo da seção (p após title) */
.products .title + p, .block-produtos-grid .title ~ p,
.block-produtos-carrossel .title ~ p {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 11px !important;
}

/* 10. CARDS DE PRODUTO ----------------------------------------- */
/* CRÍTICO: <a class="product"> tem bg branco nativo do tema — anular */
.products .card, .products .item, .product-grid-item,
.product-card, [class*="product-card"], [class*="produto-card"],
a.product, .products a.product, .product-grid-item a.product,
.product-grid-item .product, .products .product {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-high) !important;
  border-radius: 0 !important;
  color: var(--fn-text) !important;
  display: block !important;
  text-decoration: none !important;
  transition: transform 0.2s, border-color 0.2s, background 0.2s !important;
}

/* Hover no card — lift + red border */
.products a.product:hover, .product-grid-item:hover a.product,
.products .card:hover, .product-grid-item:hover .card {
  background: var(--fn-surface-high) !important;
  border-color: var(--fn-red) !important;
  transform: translateY(-2px) !important;
}

.product-grid-item .card, .product-grid-item > div {
  background: var(--fn-surface) !important;
  border-radius: 0 !important;
}

/* Wrapper .info dentro do produto */
.products .info, .product-grid-item .info, a.product .info {
  background: transparent !important;
  padding: 16px !important;
  color: var(--fn-text) !important;
}

/* Imagens dos produtos — natural, sem filter */
.products img, .product-grid-item img, .product-card img,
a.product img, .product .image img {
  border-radius: 0 !important;
}

/* Nome do produto (h3.name) */
.products .name, .product-grid-item .name,
.products h3.name, .products h3, a.product .name, a.product h3 {
  font-family: var(--font-headline) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--fn-white) !important;
  letter-spacing: -0.02em !important;
  font-size: 0.95rem !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Marca do produto (.brand) */
.products .brand, .product-grid-item .brand, a.product .brand {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--fn-red) !important;
  margin-bottom: 8px !important;
}

/* Wrapper .value (preço + parcelas) */
.products .value, .product-grid-item .value, a.product .value {
  color: var(--fn-text) !important;
  display: block !important;
  margin-top: 8px !important;
}

/* Preço */
.products .price, .product-grid-item .price,
a.product .price, .price, .valor, .product-price {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  color: var(--fn-white) !important;
  letter-spacing: 0.02em !important;
  font-size: 1.25rem !important;
  display: block !important;
}

/* Parcelamento (.price-cc é a classe real do Drophar) */
.price-cc, .products .price-cc, a.product .price-cc,
.product-grid-item .price-cc,
.products .price small, .product-grid-item small,
a.product small, a.product .value small,
.em-parcelas, .installment {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
}
.price-cc b, .price-cc strong,
.products .price-cc b, .products .price-cc strong,
a.product .price-cc b, a.product .price-cc strong,
.products small strong, .product-grid-item small strong,
a.product small strong {
  color: var(--fn-red) !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
}

/* Preço antigo / de */
.price-old, .preco-de, .price-from, [class*="price-old"] {
  color: var(--fn-muted) !important;
  text-decoration: line-through !important;
}

/* Desconto / badges */
.discount, .desconto, .badge-discount, .flag,
[class*="desconto"], [class*="discount"], [class*="flag"] {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 10px !important;
}

/* 11. PÁGINA DO PRODUTO (PDP) ---------------------------------- */
body.products.view, body.view {
  background: var(--fn-bg) !important;
  color: var(--fn-text) !important;
}
.product-page, .produto-page {
  background: var(--fn-bg) !important;
}

/* Código/SKU e Marca */
.product-code, .product-brand,
[class*="codigo"], [class*="marca"] {
  font-family: var(--font-mono) !important;
  color: var(--fn-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
}
.product-code strong, .product-brand strong {
  color: var(--fn-red) !important;
}

/* Box de preço na PDP */
.product-price-box, .box-price, .product-buy-box,
.buy-box, [class*="buy-box"] {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-high) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}

/* Seletores de cor/tamanho (swatches) */
.variation, .variacao, .swatch, [class*="swatch"],
[class*="variation"], [class*="variacao"] {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-highest) !important;
  border-radius: 0 !important;
  color: var(--fn-text) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}
.variation.active, .variation.selected,
.swatch.active, .swatch.selected,
[class*="variation"].active, [class*="variation"].selected {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  border-color: var(--fn-red) !important;
}

/* Labels "Cor:" "Tamanho:" "Quantidade:" */
.product-page label, .produto-page label,
main label, .variation-label {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
  color: var(--fn-muted) !important;
}

/* Input de quantidade */
.quantity-input, input[type="number"] {
  background: var(--fn-surface) !important;
  color: var(--fn-white) !important;
  border: 1px solid var(--fn-surface-highest) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Botão +/- quantidade */
.qty-btn, .quantity-btn, [class*="qty"] button {
  background: var(--fn-surface) !important;
  color: var(--fn-red) !important;
  border: 1px solid var(--fn-surface-highest) !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
}

/* 12. BREADCRUMBS (classe real: .breadcrumbs) ------------------ */
.breadcrumbs, .breadcrumb {
  background: transparent !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--fn-muted) !important;
  padding: 16px 0 !important;
}
.breadcrumbs a, .breadcrumb a {
  color: var(--fn-red) !important;
}
.breadcrumbs a:hover, .breadcrumb a:hover {
  color: var(--fn-white) !important;
  text-decoration: underline !important;
}
.breadcrumbs > *:last-child, .breadcrumb > *:last-child {
  color: var(--fn-white) !important;
}

/* 13. FOOTER --------------------------------------------------- */
.block-footer, footer.block-footer, footer {
  background: var(--fn-black) !important;
  color: var(--fn-muted) !important;
  border-top: 4px solid var(--fn-red) !important;
  font-family: var(--font-mono) !important;
}

/* CRÍTICO: .contacts tem bg branco por padrão do tema */
.contacts, .block-footer .contacts, footer .contacts {
  background: var(--fn-black) !important;
  border-top: 1px solid var(--fn-surface) !important;
  border-bottom: 1px solid var(--fn-surface) !important;
  padding: 24px 0 !important;
}
.contacts .element {
  border-right: 1px solid var(--fn-surface) !important;
  padding: 8px 24px !important;
}
.contacts .element:last-child { border-right: none !important; }
.contacts .element h3 {
  color: var(--fn-red) !important;
  font-family: var(--font-mono) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}
.contacts .element span {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.contacts .element a {
  color: var(--fn-red) !important;
}
.contacts .element a:hover {
  color: var(--fn-white) !important;
  text-decoration: underline !important;
}
.block-footer h3, .block-footer h4,
footer h3, footer h4 {
  color: var(--fn-red) !important;
  font-family: var(--font-headline) !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
}
.block-footer a, footer a { color: var(--fn-muted) !important; }
.block-footer a:hover, footer a:hover { color: var(--fn-red) !important; }

/* Newsletter no footer */
.block-footer input[type="email"],
.block-footer input[type="text"],
footer input[type="email"], footer input[type="text"] {
  background: var(--fn-surface) !important;
  color: var(--fn-white) !important;
  border: none !important;
  border-bottom: 2px solid var(--fn-red) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
}

/* Título da newsletter */
.newsletter h3, .newsletter h4,
[class*="newsletter"] h3, [class*="newsletter"] h4 {
  color: var(--fn-red) !important;
}
.newsletter p, [class*="newsletter"] p {
  color: var(--fn-muted) !important;
}

/* 14. CARRINHO (página) ---------------------------------------- */
body.cart, body.carrinho, body.page-cart {
  background: var(--fn-bg) !important;
  color: var(--fn-text) !important;
}
.cart-item, .carrinho-item, [class*="cart-item"] {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-high) !important;
  border-radius: 0 !important;
}

/* 15. CHECKOUT ------------------------------------------------- */
body.checkout, body.page-checkout {
  background: var(--fn-bg) !important;
  color: var(--fn-text) !important;
}
.checkout-step, [class*="checkout-"] {
  background: var(--fn-surface) !important;
  border-radius: 0 !important;
}

/* 16. FORMULÁRIOS GERAIS --------------------------------------- */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="password"], input[type="number"],
textarea, select {
  background: var(--fn-surface) !important;
  color: var(--fn-white) !important;
  border: 1px solid var(--fn-surface-highest) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  padding: 12px 14px !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--fn-red) !important;
}
::placeholder {
  color: var(--fn-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
}

/* 17. CARDS E CONTAINERS GENÉRICOS ------------------------------ */
.card, .box, .panel, .container-box {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-high) !important;
  border-radius: 0 !important;
  color: var(--fn-text) !important;
}

/* 18. SELEÇÃO DE TEXTO + SCROLLBAR ------------------------------ */
::selection {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
}
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: var(--fn-black); }
::-webkit-scrollbar-thumb   { background: var(--fn-red); }
::-webkit-scrollbar-thumb:hover { background: var(--fn-error); }

/* 19. ICONES SOCIAIS / LINKS CONTATO NO TOP BAR ----------------- */
.topnav [href*="whatsapp"],
.topnav [href*="facebook"],
.topnav [href*="instagram"] {
  color: var(--fn-red) !important;
}
.topnav svg, .topnav i {
  color: var(--fn-red) !important;
}

/* 20. OVERRIDES — paleta azul padrão Drophar → vermelho FAKENEW  */
/* Tema do Drophar usa #002732 como primary. Substituindo tudo */
[style*="#002732"], [style*="rgb(0, 39, 50)"] {
  background-color: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
}
[style*="color: #002732"], [style*="color:#002732"] {
  color: var(--fn-white) !important;
}


/* 21. SAFETY NET — elementos do tema com bg branco nativo ---- */
.block-banners .banner, .banner-item,
.section-contato, .block-contato,
.institucional, .block-institucional,
.depoimentos, .block-depoimentos,
.block-feature, .features,
[class*="block-"][class*="white"] {
  background: var(--fn-bg) !important;
  color: var(--fn-text) !important;
}

/* 22. AJUSTES FINOS NO PRODUTO CARD --------------------------- */
.product-grid-item .product, .products a.product {
  text-align: left !important;
}
.product-grid-item .image, a.product .image {
  background: var(--fn-surface-high) !important;
  overflow: hidden !important;
}
.product-grid-item img, a.product img {
  transition: transform 0.4s ease !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.product-grid-item:hover img, .products a.product:hover img {
  transform: scale(1.05) !important;
}

/* 23. HERO SLIDER — dots/arrows navigation -------------------- */
.slick-dots li button, .slick-dots li button:before {
  background: var(--fn-muted) !important;
  color: var(--fn-muted) !important;
  border-radius: 0 !important;
}
.slick-dots li.slick-active button, .slick-dots li.slick-active button:before {
  background: var(--fn-red) !important;
  color: var(--fn-red) !important;
}
.slick-prev, .slick-next {
  background: var(--fn-black) !important;
  color: var(--fn-red) !important;
  border-radius: 0 !important;
}
.slick-prev:before, .slick-next:before {
  color: var(--fn-red) !important;
}


/* 24. CART HEADER BUTTON + DROPDOWN --------------------------- */
/* O botão .cart do header estava azul petróleo — forçar vermelho */
.block-header .cart, #header-cart, .cart#header-cart {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  position: relative !important;
  cursor: pointer !important;
}
.block-header .cart:hover {
  background: var(--fn-red-deep) !important;
  filter: brightness(1.05) !important;
}
.block-header .cart i,
.block-header .cart .fas,
.block-header .cart i.fa-shopping-cart {
  color: var(--fn-red-on) !important;
  font-size: 1.1rem !important;
}
.block-header .cart .count, #cart-counter {
  background: var(--fn-white) !important;
  color: var(--fn-red) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  margin-left: 8px !important;
  border-radius: 0 !important;
  font-size: 12px !important;
}

/* Cart dropdown flutuante — era branco */
.cart-float, .cart .cart-float, #header-cart .cart-float {
  background: var(--fn-black) !important;
  color: var(--fn-text) !important;
  border: 1px solid var(--fn-red) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}
.cart-float #cart-content, .cart-float .cart-scroll {
  background: transparent !important;
  color: var(--fn-text) !important;
}
.cart-float .cart-total {
  background: var(--fn-surface) !important;
  border-top: 1px solid var(--fn-surface-high) !important;
  padding: 16px !important;
}
.cart-float .cart-total h4 {
  color: var(--fn-white) !important;
  font-family: var(--font-mono) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 12px !important;
}
.cart-float .btn-go-cart, .cart-float .btn-outline {
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--fn-red) !important;
  border: 2px solid var(--fn-red) !important;
  padding: 10px 20px !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  font-family: var(--font-headline) !important;
  font-weight: 900 !important;
}
.cart-float .btn-go-cart:hover {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
}

/* Mensagem "carrinho vazio" dentro do dropdown */
.cart-float .empty-cart, .cart-float p, .cart-float span {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 11px !important;
}

/* 25. SEARCH DROPDOWN / POPOVER (era bg branco) --------------- */
.block-header .search, .search-dropdown, .search-results,
.search-popover, .header-search {
  background: var(--fn-black) !important;
  border: 1px solid var(--fn-surface) !important;
  color: var(--fn-text) !important;
  border-radius: 0 !important;
}
.search .result, .search-results .item {
  background: transparent !important;
  color: var(--fn-text) !important;
  border-bottom: 1px solid var(--fn-surface) !important;
  padding: 12px !important;
}
.search .result:hover {
  background: var(--fn-surface) !important;
  color: var(--fn-red) !important;
}

/* 26. SWIPER/SLICK SLIDER CONTAINERS -------------------------- */
/* Slides não precisam de bg branco — deixar transparent */
.swiper-slide, .slick-slide {
  background: transparent !important;
}
.swiper-container, .swiper-wrapper, .slick-list, .slick-track {
  background: transparent !important;
}
/* Swiper navigation */
.swiper-button-next, .swiper-button-prev {
  color: var(--fn-red) !important;
  background: rgba(10, 10, 10, 0.6) !important;
  border-radius: 0 !important;
}
.swiper-pagination-bullet {
  background: var(--fn-muted) !important;
  opacity: 0.5 !important;
  border-radius: 0 !important;
  width: 14px !important;
  height: 4px !important;
}
.swiper-pagination-bullet-active {
  background: var(--fn-red) !important;
  opacity: 1 !important;
  width: 28px !important;
}


/* 27. HERO BANNER HEIGHT LIMIT (banners quadrados 1:1) -------- */
/* Container outer — altura fixa, overflow hidden */
.block-hero-slider, .hero-slider {
  max-height: 620px !important;
  height: clamp(320px, 65vh, 620px) !important;
  overflow: hidden !important;
  background: var(--fn-black) !important;
  position: relative !important;
}

/* Swiper container interno herda a altura do pai */
.block-hero-slider .swiper,
.block-hero-slider .swiper-container,
.block-hero-slider .swiper-wrapper {
  height: 100% !important;
  max-height: 620px !important;
  background: var(--fn-black) !important;
}

/* Slides — flex centralizando imagem, altura fixa via min-height */
.block-hero-slider .swiper-slide, .hero-slider .swiper-slide {
  min-height: clamp(320px, 65vh, 620px) !important;
  max-height: 620px !important;
  background: var(--fn-black) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Imagem — largura total, altura contain no slide */
.block-hero-slider .swiper-slide img,
.hero-slider .swiper-slide img,
.block-hero-slider img, .hero-slider img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: clamp(320px, 65vh, 620px) !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  position: static !important;
}

/* Mobile: altura menor */
@media (max-width: 768px) {
  .block-hero-slider, .hero-slider {
    max-height: 420px !important;
    height: clamp(280px, 55vh, 420px) !important;
  }
}

/* Swiper pagination dots dentro do hero */
.block-hero-slider .swiper-pagination, .hero-slider .swiper-pagination {
  bottom: 16px !important;
  z-index: 10 !important;
  position: absolute !important;
}


/* 28. SWATCHES .option.circle (selectors reais do Drophar PDP) - */
.product-variation, .variation-select-circles, .variation-select-squares {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-high) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  border-radius: 0 !important;
}
.circle-radio, .square-radio {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Size/Color swatches — circular buttons */
.circle-radio .option,
.circle-radio .option.circle,
.option.circle,
.variation-select-circles .option,
.square-radio .option {
  background: var(--fn-surface) !important;
  color: var(--fn-text) !important;
  border: 2px solid var(--fn-surface-highest) !important;
  border-radius: 50% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.circle-radio .option:hover, .option.circle:hover {
  border-color: var(--fn-red) !important;
  color: var(--fn-red) !important;
  background: var(--fn-surface-high) !important;
}
.circle-radio .option.selected,
.circle-radio .option.active,
.circle-radio .option.checked,
.option.circle.selected,
.option.circle.active,
.option.circle.checked,
input:checked + .option,
input:checked ~ .option,
label.active .option {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  border-color: var(--fn-red) !important;
}

/* Square variant if exists */
.square-radio .option {
  border-radius: 0 !important;
}

/* Color swatch — show color circle inside */
.variation-select-circles.cor .option,
.circle-radio.cor .option {
  position: relative !important;
  overflow: hidden !important;
}

/* Label (Cor:, Tamanho:, etc) */
.product-variation > label, .product-variation .label,
.variation-label {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  margin-bottom: 12px !important;
}


/* 29. HEADER CHECKOUT (página de carrinho/checkout) ----------- */
.header-checkout, header.header-checkout, .block-header-checkout {
  background: var(--fn-black) !important;
  border-bottom: 4px solid var(--fn-red) !important;
  color: var(--fn-text) !important;
}
.header-checkout .logo img, .header-checkout img {
  filter: brightness(1.1) !important;
}
.header-checkout i, .header-checkout .fas, .header-checkout svg {
  color: var(--fn-red) !important;
}
.header-checkout p, .header-checkout span, .header-checkout h5 {
  color: var(--fn-text) !important;
}
.header-checkout h5 {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--fn-red) !important;
}
.header-checkout .breadcrumb, .header-checkout .steps {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.header-checkout .breadcrumb-item {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--fn-muted) !important;
}
.header-checkout .breadcrumb-item.active,
.header-checkout .breadcrumb-item[aria-current="page"] {
  color: var(--fn-white) !important;
  font-weight: 700 !important;
}
.header-checkout .breadcrumb-item + .breadcrumb-item::before {
  color: var(--fn-muted) !important;
  content: "/" !important;
}

/* 30. FOOTER CHECKOUT refinements ----------------------------- */
.footer-checkout {
  background: var(--fn-black) !important;
  color: var(--fn-muted) !important;
  border-top: 4px solid var(--fn-red) !important;
  font-family: var(--font-mono) !important;
}
.footer-checkout h5 {
  color: var(--fn-red) !important;
  font-family: var(--font-headline) !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em !important;
}
.footer-checkout i, .footer-checkout .fas {
  color: var(--fn-red) !important;
}
.footer-checkout p {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* 31. CART EMPTY MESSAGE -------------------------------------- */
.cart-empty, .empty-cart, [class*="empty"] {
  color: var(--fn-muted) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 40px !important;
  text-align: center !important;
}


/* 32. CONTATO PAGE CARDS (.others / .bg-extension) ------------ */
.others, .bg-extension,
.contato .others, .contato .bg-extension,
[class*="contact"] .others {
  background: var(--fn-surface) !important;
  border: 1px solid var(--fn-surface-high) !important;
  color: var(--fn-text) !important;
  padding: 20px 24px !important;
  border-radius: 0 !important;
}
.others h1, .others h2, .others h3, .others h4,
.others .title, .others strong, .others b {
  color: var(--fn-red) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.others p, .others span, .others div {
  color: var(--fn-text) !important;
}
.others a {
  color: var(--fn-red) !important;
  font-family: var(--font-mono) !important;
}
.others a:hover {
  color: var(--fn-white) !important;
  text-decoration: underline !important;
}
.others i, .others .fab, .others .fas {
  color: var(--fn-red) !important;
}

/* 33. H1 de páginas instit. (sobre, politica, duvidas) -------- */
main > h1, .container > h1, 
body.sobre h1, body.politica h1, body.duvidas h1 {
  border-left: 8px solid var(--fn-red) !important;
  padding-left: 24px !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  margin: 32px 0 !important;
  font-family: var(--font-headline) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em !important;
  color: var(--fn-white) !important;
}

/* 34. Select dropdown (Ordenar por) --------------------------- */
select {
  background: var(--fn-surface) !important;
  color: var(--fn-text) !important;
  border: 1px solid var(--fn-surface-highest) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}
select:focus {
  outline: none !important;
  border-color: var(--fn-red) !important;
}
option {
  background: var(--fn-surface) !important;
  color: var(--fn-text) !important;
}

/* 35. Category/search result title ---------------------------- */
.category-header h1, .search-header h1,
.products-list h1, .listagem h1 {
  font-family: var(--font-headline) !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: var(--fn-white) !important;
  border-left: 8px solid var(--fn-red) !important;
  padding-left: 20px !important;
}


/* 36. ACCORDION DÚVIDAS (collapse) --------------------------- */
.accordion, .collapse-list, [class*="faq"] {
  border: 1px solid var(--fn-surface-high) !important;
  border-radius: 0 !important;
}
.accordion .card, .accordion-item,
.collapse-item, .faq-item {
  background: var(--fn-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--fn-surface-high) !important;
  border-radius: 0 !important;
}
.accordion .card-header, .accordion-header,
[class*="collapse-header"], [data-bs-toggle="collapse"] {
  background: var(--fn-surface-high) !important;
  color: var(--fn-white) !important;
  font-family: var(--font-headline) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: 0 !important;
  padding: 16px 24px !important;
  border: none !important;
  border-left: 4px solid var(--fn-red) !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all 0.15s !important;
}
.accordion .card-header:hover, .accordion-header:hover,
[data-bs-toggle="collapse"]:hover {
  background: var(--fn-red) !important;
  color: var(--fn-red-on) !important;
  border-left-color: var(--fn-white) !important;
}
.accordion .card-body, .accordion-body,
.collapse-body, .faq-body {
  background: var(--fn-bg) !important;
  color: var(--fn-text) !important;
  padding: 20px 24px !important;
  border-left: 4px solid var(--fn-surface-high) !important;
}

/* 37. INPUT DATE/TIME (forçar dark) --------------------------- */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  background: var(--fn-surface) !important;
  color: var(--fn-white) !important;
  border: 1px solid var(--fn-surface-highest) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-family: var(--font-mono) !important;
  color-scheme: dark !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer !important;
}

/* 38. RADIO BUTTONS / CHECKBOXES ------------------------------- */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--fn-red) !important;
  width: 18px !important;
  height: 18px !important;
}
input[type="radio"] + label, input[type="checkbox"] + label {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 12px !important;
  color: var(--fn-text) !important;
  margin-left: 8px !important;
  cursor: pointer !important;
}

/* 39. TICKER "BREAKING NEWS" - estático no topo da home */
body.home::before {
  content: "▶ STATUS: NÃO AUTORIZADO // COLEÇÃO SOURCE_CODE // 20.1 HEAVY JERSEY DISPONÍVEL // VERIFY NOTHING // A VERDADE É SUPERESTIMADA // PROTOCOLO DE EXCLUSIVIDADE ATIVADO ◀" !important;
  display: block !important;
  background: var(--fn-black) !important;
  color: var(--fn-error) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding: 8px 16px !important;
  border-bottom: 2px solid var(--fn-red) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

/* 40. GLITCH hover effect nos CTAs principais ----------------- */
.btn-primary:hover, .btn-thema:hover, .btn-buy:hover,
.btn-add-cart:hover, [class*="btn-comprar"]:hover,
[class*="btn-buy"]:hover {
  text-shadow: 2px 0 var(--fn-red), -2px 0 var(--fn-error) !important;
  animation: fnGlitch 0.3s infinite !important;
}
@keyframes fnGlitch {
  0%, 100% { transform: translate(0) skewX(-3deg); }
  25% { transform: translate(-1px, 1px) skewX(-3deg); }
  50% { transform: translate(1px, -1px) skewX(-3deg); }
  75% { transform: translate(-1px, -1px) skewX(-3deg); }
}


/* ============================================================
   v18 PDP DESCRIPTION TAB FIX
   ============================================================ */


/* ============================================================
   v19-v23 CONSOLIDATED EXTRAS
   ============================================================ */
/* ==== v19 (nav, newsletter, footer, PDP description from v18) ==== */

/* v19 — nav, newsletter, footer overrides */
/* Block navigation bar (Feminina/Infantil/Masculina/Unissex) */
.block-navigation, .navigation, nav.block-navigation,
header .navigation, .block-navigation.navigation {
  background: #0A0A0A !important;
  border: none !important;
  border-top: 1px solid #2a2a2a !important;
  border-bottom: 2px solid #ED3237 !important;
}
.block-navigation a, .navigation a, 
.block-navigation .nav-link, .navigation .nav-link,
.block-navigation ul li a, .navigation ul li a {
  color: #F2F0EB !important;
  background: transparent !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  border: none !important;
}
.block-navigation a:hover, .navigation a:hover,
.block-navigation .nav-link:hover, .navigation .nav-link:hover,
.block-navigation li:hover > a {
  color: #ED3237 !important;
  background: transparent !important;
}
.block-navigation .active a, .block-navigation li.active > a,
.navigation .active a {
  color: #ED3237 !important;
  background: transparent !important;
}

/* Megamenu / dropdown inside navigation */
.block-navigation .dropdown-menu, .block-navigation .megamenu,
.navigation .dropdown-menu, .navigation .megamenu,
.block-navigation .sub-menu {
  background: #131313 !important;
  border: 1px solid #ED3237 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8) !important;
}
.block-navigation .dropdown-menu a, .block-navigation .megamenu a,
.navigation .dropdown-menu a {
  color: #e5e2e1 !important;
}
.block-navigation .dropdown-menu a:hover,
.navigation .dropdown-menu a:hover {
  color: #ED3237 !important;
  background: #201f1f !important;
}

/* "Todos os Departamentos" button */
.block-navigation .dept-btn, .block-navigation .all-departments,
.block-navigation > ul > li:first-child {
  background: #ED3237 !important;
  color: #fff !important;
}

/* Newsletter block */
.block-newsletter, .footer-newsletter, 
[class*="newsletter"] {
  background: #0A0A0A !important;
  border-top: 2px solid #ED3237 !important;
  border-bottom: 2px solid #ED3237 !important;
}
.block-newsletter h3, .footer-newsletter h3, [class*="newsletter"] h3 {
  color: #ED3237 !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.block-newsletter p, .footer-newsletter p, [class*="newsletter"] p {
  color: #8a8a8a !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}
.block-newsletter input, .footer-newsletter input, [class*="newsletter"] input {
  background: #201f1f !important;
  color: #F2F0EB !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.03em !important;
}
.block-newsletter input::placeholder, 
.footer-newsletter input::placeholder, 
[class*="newsletter"] input::placeholder {
  color: #555 !important;
  text-transform: uppercase !important;
}
.block-newsletter button, .footer-newsletter button,
[class*="newsletter"] button {
  background: #ED3237 !important;
  color: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* Footer main wrapper */
footer, .block-footer, .footer {
  background: #0A0A0A !important;
  border-top: 2px solid #2a2a2a !important;
  color: #e5e2e1 !important;
}
footer h3, footer h4, .footer h3, .footer h4 {
  color: #ED3237 !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  text-transform: uppercase !important;
}
footer a, .footer a { color: #e5e2e1 !important; }
footer a:hover, .footer a:hover { color: #ED3237 !important; }

/* Footer contacts section — was blue */
.block-footer-contacts, .footer-contacts, [class*="contacts"] {
  background: #131313 !important;
  border-top: 1px solid #2a2a2a !important;
}
.block-footer-contacts h3, .footer-contacts h3 {
  color: #ED3237 !important;
}
.block-footer-contacts span, .footer-contacts span {
  color: #8a8a8a !important;
}

/* Copyright section */
.copyright, .footer-copyright {
  background: #0A0A0A !important;
  color: #8a8a8a !important;
  border-top: 1px solid #2a2a2a !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

/* PDP description tab petroleo fix (from v18) */
.nav-tabs, .nav.nav-tabs, #nav-tab, .nav-pills {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #2a2a2a !important;
}
.nav-tabs .nav-link, .nav-tabs a.nav-link, .nav-pills .nav-link,
#nav-home-tab, #nav-profile-tab, #nav-contact-tab,
a#nav-home-tab.nav-link, a.nav-link.active {
  background: transparent !important;
  color: #8a8a8a !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  position: relative !important;
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active,
#nav-home-tab.active, a#nav-home-tab.active.nav-link {
  background: transparent !important;
  color: #ED3237 !important;
}
.nav-tabs .nav-link.active::after, .nav-pills .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;
  height: 3px !important;
  background: #ED3237 !important;
}
#nav-tabContent, .tab-content, .tab-pane,
#nav-product-text, #nav-product-info, #nav-product-shipping {
  background: transparent !important;
  color: #e5e2e1 !important;
}
.product-page, .product-details, .product-info,
.product-info-wrapper, .product-text, .product-description,
section.product, .block-product, #product, main.product {
  background: transparent !important;
  color: #e5e2e1 !important;
}


/* ==== v20 (megamenu dropdown fix) ==== */

/* v20 — megamenu dropdown FAKENEW fix + nav overrides */

/* Megamenu outer container (stays dark) */
.megamenu {
  background: #0A0A0A !important;
}

/* Megamenu white content panel */
.megamenu .mega-content {
  background: #0A0A0A !important;
  color: #F2F0EB !important;
  border: 2px solid #ED3237 !important;
  border-top: 3px solid #ED3237 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8) !important;
}

/* Container inside mega-content */
.megamenu .mega-content .container {
  background: transparent !important;
}

/* Pills/tabs inside megamenu (department selector) */
.megamenu .pills, 
.megamenu .pills .nav-tabs,
.megamenu #responsive-tabs {
  background: #131313 !important;
  border: none !important;
  border-bottom: 2px solid #2a2a2a !important;
}

.megamenu .pills .nav-tabs li,
.megamenu #responsive-tabs li {
  background: transparent !important;
  border: none !important;
}

.megamenu .pills .nav-tabs li a,
.megamenu #responsive-tabs li a,
.megamenu .pills .nav-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #8a8a8a !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 14px 24px !important;
  position: relative !important;
}

.megamenu .pills .nav-tabs li a:hover,
.megamenu #responsive-tabs li a:hover {
  color: #ED3237 !important;
  background: transparent !important;
}

.megamenu .pills .nav-tabs li.active a,
.megamenu #responsive-tabs li.active a,
.megamenu .pills .nav-tabs li.active > a,
.megamenu .nav-tabs .active a {
  color: #ED3237 !important;
  background: transparent !important;
  border: none !important;
}

.megamenu .pills .nav-tabs li.active a::after,
.megamenu #responsive-tabs li.active a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;
  height: 3px !important;
  background: #ED3237 !important;
}

/* Tab content panels */
.megamenu .tabs,
.megamenu .tab-content,
.megamenu .tab-pane {
  background: transparent !important;
  color: #F2F0EB !important;
  padding: 24px !important;
}

/* Headings inside tab panels (department name) */
.megamenu .tab-pane h3 {
  color: #ED3237 !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-left: 4px solid #ED3237 !important;
  padding-left: 12px !important;
  margin-bottom: 20px !important;
}

/* Subcategory lists */
.megamenu .tab-pane ul,
.megamenu .tab-pane .row ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.megamenu .tab-pane li {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
}

.megamenu .tab-pane a,
.megamenu .tab-pane li a {
  color: #e5e2e1 !important;
  background: transparent !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 4px 0 !important;
  border-left: 2px solid transparent !important;
  padding-left: 8px !important;
  transition: all 0.15s ease !important;
}

.megamenu .tab-pane a:hover,
.megamenu .tab-pane li a:hover {
  color: #ED3237 !important;
  border-left: 2px solid #ED3237 !important;
  transform: translateX(2px) !important;
}

/* Column containers */
.megamenu .tab-pane .row,
.megamenu .tab-pane .col-lg-3,
.megamenu .tab-pane [class*="col-"] {
  background: transparent !important;
  color: #F2F0EB !important;
}

/* Accordion version for mobile */
.megamenu .panel-group,
.megamenu .panel,
.megamenu .panel-heading,
.megamenu .panel-body {
  background: #131313 !important;
  color: #e5e2e1 !important;
  border: none !important;
}

.megamenu .panel-heading a {
  color: #F2F0EB !important;
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  text-transform: uppercase !important;
}

/* "Todos os Departamentos" toggle button itself */
.block-navigation .dropdown > a,
.block-navigation li.dropdown > a,
.block-navigation li.departments > a {
  background: transparent !important;
  color: #F2F0EB !important;
}


/* ==== v21 (fa-bars hamburger icon fix) ==== */

/* v21 — hamburger icon + blue remnants fix */

/* fa-bars hamburger icon in navigation (was #193877 petroleum blue) */
.block-navigation i.fa-bars,
.block-navigation i.far.fa-bars,
.block-navigation i.fas.fa-bars,
.block-navigation .fa-bars,
.megamenu i.fa-bars,
.megamenu .fa-bars {
  color: #ED3237 !important;
  background: transparent !important;
}

/* All FontAwesome icons inside navigation block should be white or red, never blue */
.block-navigation i,
.block-navigation svg,
.block-navigation .icon,
.megamenu i,
.megamenu svg,
.megamenu .icon {
  color: inherit !important;
}

/* Specific: the "Todos os Departamentos" toggle icon */
.megamenu > ul > li:first-child i,
.megamenu .mega-link > a > i,
.megamenu .mega-link i {
  color: #ED3237 !important;
}

/* Kill any remaining blue (#193877 / #24478e / #002732) across theme */
.block-navigation *[style*="#193877"],
.block-navigation *[style*="#24478e"],
.block-navigation *[style*="#002732"],
[style*="color:#193877"],
[style*="color: #193877"] {
  color: #ED3237 !important;
  background: transparent !important;
  border-color: #ED3237 !important;
}

/* Hamburger icon in hero slider / PDP buttons */
i.fa-bars, .fa-bars { color: inherit !important; }


/* ==== v22 (Epilogue Bold Italic display headlines) ==== */

/* v22 — Epilogue Bold Italic as display font (matches FAKENEW logo) */
:root {
  --fn-font-display: 'Epilogue', 'Space Grotesk', Impact, sans-serif;
}

/* DISPLAY / HERO headlines — use Epilogue Bold Italic like the logo */
.block-hero-slider h1, .block-hero-slider h2,
.hero-slider h1, .hero-slider h2,
body.home .block-hero-slider h1,
.fn-content .fn-hero h1,
.display-lg, .display-md, .headline-xl {
  font-family: 'Epilogue', 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-stretch: condensed !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

/* PDP product title (H1) — mais discreto, keep Space Grotesk */
h1.name, .product-page h1, main h1 {
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

/* MANIFESTO hero (sobre-nos, contato etc) — usa Epilogue Italic tipo logo */
.fn-content .fn-hero h1 {
  font-family: 'Epilogue', 'Space Grotesk', Impact, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.03em !important;
  line-height: 0.92 !important;
}

/* CTA gigantes / banner principais — também Epilogue italic */
.block-hero-slider .slide h1,
.block-hero-slider .slide h2,
.block-hero-slider [class*="title"] {
  font-family: 'Epilogue', Impact, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
}

/* Headlines normais (section titles) — mantém Space Grotesk para distinção */
.products .title, .block-produtos-grid .title,
.block-produtos-carrossel .title, .block-banners .title,
main .title, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', Impact, sans-serif !important;
  font-style: normal !important;
}

/* Brand book note: logo usa Epilogue 900 italic (match #1 Gesta Bold Italic / #8 Epilogue 700italic) */


/* ==== v23 (red swap #ff535b -> #ED3237) ==== */

/* v23 — swap red from #ff535b (coral) to #ED3237 (alerta puro) */
:root {
  --fn-red: #ED3237 !important;
  --fn-red-dim: #E63946 !important;
  --fn-red-deep: #931014 !important;
}
.btn, .btn-thema, .btn-primary, .btn-success, .btn-danger,
.btn-buy, .btn-comprar, .btn-adquirir, .btn-add-cart,
.btn-finish-order, .btn-go-cart,
[class*="btn-buy"], [class*="btn-comprar"], [class*="btn-adquirir"],
button[type="submit"],
.block-navigation, .navigation, nav.block-navigation,
header.block-header, #header,
.block-newsletter button, .footer-newsletter button,
[class*="newsletter"] button,
.fn-content .fn-cta {
  background: #ED3237 !important;
}
.btn:hover, .btn-thema:hover { background: #ED3237 !important; filter: brightness(1.1) !important; }
.block-header, header.block-header, #header {
  background: #0A0A0A !important;
  border-bottom: 4px solid #ED3237 !important;
}
.block-navigation, .navigation, nav.block-navigation {
  background: #0A0A0A !important;
  border-bottom: 2px solid #ED3237 !important;
}
.block-hero-slider h1, .block-hero-slider h2,
.hero-slider h1, .hero-slider h2,
.fn-content .fn-hero h1,
.fn-content h3,
.fn-content strong,
.fn-content .fn-hero .fn-label,
.fn-content .fn-contact-card .fn-label,
.products .title, .block-produtos-grid .title,
.block-produtos-carrossel .title, .block-banners .title,
main .title,
.topnav a:hover, .block-header a:hover,
.logo, a.logo,
footer h3, footer h4, .footer h3, .footer h4,
.block-footer-contacts h3, .footer-contacts h3,
.block-newsletter h3, .footer-newsletter h3, [class*="newsletter"] h3,
.nav-tabs .nav-link.active, .nav-pills .nav-link.active,
#nav-home-tab.active, a#nav-home-tab.active.nav-link,
.breadcrumb a, .breadcrumbs a,
.breadcrumb .home, .breadcrumb .moda,
.block-navigation a:hover,
.megamenu .tab-pane h3,
.megamenu .pills .nav-tabs li.active a,
.megamenu #responsive-tabs li.active a,
.megamenu .tab-pane a:hover,
body.home::before,
[style*="color:#ff535b"], [style*="color: #ff535b"] {
  color: #ED3237 !important;
}
.nav-tabs .nav-link.active::after,
.nav-pills .nav-link.active::after,
.megamenu .pills .nav-tabs li.active a::after,
.megamenu #responsive-tabs li.active a::after {
  background: #ED3237 !important;
}
.block-hero-slider, .hero-slider {
  border-top: 2px solid #ED3237 !important;
  border-bottom: 2px solid #ED3237 !important;
}
.megamenu .mega-content {
  border: 2px solid #ED3237 !important;
  border-top: 3px solid #ED3237 !important;
}
.megamenu .tab-pane h3 {
  border-left: 4px solid #ED3237 !important;
}
.megamenu .tab-pane a:hover,
.megamenu .tab-pane li a:hover {
  border-left: 2px solid #ED3237 !important;
}
.fn-content .fn-hero,
.fn-content .fn-card,
.fn-content .fn-contact-card {
  border-left-color: #ED3237 !important;
}
.fn-content .fn-hero {
  background: linear-gradient(90deg, rgba(237,50,55,0.12) 0%, transparent 100%) !important;
}
.fn-content h2 {
  border-left: 4px solid #ED3237 !important;
}
.fn-content ul li::before { color: #ED3237 !important; }
.fn-content a { color: #ED3237 !important; }
.fn-content .fn-cta { background: #ED3237 !important; }
.block-navigation i.fa-bars,
.block-navigation .fa-bars,
.megamenu .fa-bars,
.block-navigation .cart .count,
.block-navigation svg,
.block-navigation i {
  color: #ED3237 !important;
}
body.home::before {
  border-bottom-color: #ED3237 !important;
}
.slick-dots li.slick-active button,
.slick-dots li.slick-active button:before,
.slick-prev, .slick-next,
.slick-prev:before, .slick-next:before {
  color: #ED3237 !important;
}
/* Ticker animation */
.copyright {
  border-top: 2px solid #ED3237 !important;
}
footer, .block-footer, .footer {
  border-top: 2px solid #2a2a2a !important;
}