/* mach1-theme.css — overlay de re-tema do Patoloco para o design system MACH1.
   Carregado DEPOIS de custom.css. Preserva slugs/estrutura; so re-estilha visualmente.
   Tokens extraidos de H:/machone alternative/mach1/app/globals.css. */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* surfaces (mach1) */
  --bg: #070a0f; --bg-2: #0b0f16;
  --surface: #0f141d; --surface-2: #161c28; --surface-3: #1d2533;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16);
  /* text */
  --text: #eef2f8; --text-2: #aeb9c9; --text-3: #828c9e;
  /* brand */
  --brand: #a6e22e; --brand-bright: #c6f24a; --brand-dim: #6f9a1f;
  --accent: #ff6a1a; --accent-2: #2bd4ff;
  /* struct */
  --radius: 14px; --radius-lg: 22px; --radius-sm: 9px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,0.7);
  --shadow-brand: 0 10px 40px -12px rgba(166,226,46,0.35);
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --maxw: 1240px;
  --carbon-fiber-site:
    linear-gradient(135deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.038) 50%, rgba(255,255,255,0.038) 75%, transparent 75%, transparent),
    linear-gradient(45deg, rgba(0,0,0,0.45) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.34) 50%, rgba(0,0,0,0.34) 75%, transparent 75%, transparent),
    radial-gradient(circle at 50% 0%, rgba(166,226,46,0.055), transparent 44%);
  --carbon-fiber-panel:
    linear-gradient(135deg, rgba(255,255,255,0.07) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.044) 50%, rgba(255,255,255,0.044) 75%, transparent 75%, transparent),
    linear-gradient(45deg, rgba(0,0,0,0.38) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.28) 75%, transparent 75%, transparent);
  --carbon-site-size: 18px 18px, 18px 18px, 960px 960px;
  --carbon-panel-size: 16px 16px, 16px 16px;
  --carbon-position: 0 0, 8px 8px, center top;
  --carbon-panel-position: 0 0, 8px 8px;
  /* patoloco original (referencia) */
  --pat-blue: #171533; --pat-orange: #ff6f4a;
}

/* ---- fundo: fibra de carbono escura e suave ---- */
html {
  background-color: var(--bg) !important;
  background-image: var(--carbon-fiber-site) !important;
  background-size: var(--carbon-site-size) !important;
  background-position: var(--carbon-position) !important;
}
body {
  background-color: var(--bg) !important;
  background-image: var(--carbon-fiber-site) !important;
  background-size: var(--carbon-site-size) !important;
  background-position: var(--carbon-position) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
body::before { display: none; }
body::after { display: none; }

/* ---- tipografia ---- */
h1, h2, h3, h4, h5, h6, .tit, .box-text, .box-title {
  font-family: 'Oxanium', 'Segoe UI', sans-serif !important;
  color: var(--text) !important;
  letter-spacing: 0.2px;
}

/* ---- texto base (wash light) ---- */
p, span, li, td, th, label, small, strong, b, dd, dt, .description, .text-muted {
  color: var(--text-2) !important;
}
.text-muted { color: var(--text-3) !important; }

/* ---- links ---- */
a { color: var(--text-2); transition: color var(--transition); }
a:hover { color: var(--brand-bright); text-decoration: none; }

/* ---- containers / secoes: forca fundo escuro ---- */
.container, section, main, .main, .row, .col-xs-12, .content, #content, .wrapper,
#page, .wrapper-container, .page-wrapper, .content-wrapper, .main-content {
  background: transparent !important;
}

/* ---- header ---- */
.header-horizontal, header, header .middle, header section.middle, nav#menu,
.top-informacao, .topo, .cabecalho {
  background: linear-gradient(180deg, rgba(7,10,15,0.95), rgba(11,15,22,0.92)) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}
header * { color: var(--text) !important; }
nav#menu a:hover { color: var(--brand-bright) !important; }

/* ---- topo de aviso / busca ---- */
.banner-topo, .top-informacao a { color: var(--text-2) !important; }
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
textarea, select, .form-control {
  background: var(--bg) !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important; border-radius: 10px !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important; border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(166,226,46,0.15) !important;
}

/* ---- precos: override da cor inline #ff6f4a -> brand ---- */
[style*="ff6f4a"], [style*="#ff6f4a"],
.price-new, .price-new *, .price .text-success, .h1.text-success, .price-container .text-success {
  color: var(--brand-bright) !important;
}
.price-old del, .price-old, del.text-muted { color: var(--text-3) !important; text-decoration: line-through; }
.price-installment, .payment-installment { color: var(--text-2) !important; }
.price-installment .text-success, .payment-installment .text-success { color: var(--brand) !important; }

/* ---- botoes: lime gradient ---- */
.btn-success, .btn-theme, .btn-primary, .btn-comprar, button.btn-success {
  background: linear-gradient(135deg, var(--brand-bright), var(--brand)) !important;
  color: #0a1505 !important;
  border: none !important;
  box-shadow: var(--shadow-brand) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  transition: transform var(--transition), filter var(--transition) !important;
}
.btn-success:hover, .btn-theme:hover, .btn-primary:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 16px 44px -10px rgba(166,226,46,0.55) !important;
}
.btn-default, .btn-ghost {
  background: rgba(255,255,255,0.04) !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}
.btn-default:hover { border-color: var(--brand) !important; color: var(--brand-bright) !important; }

/* ---- cards de produto ---- */
.product, .product-carousel, .product-info,
.list-products .product, .product-list .product {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid #2a3342 !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 22px -12px rgba(0,0,0,0.65) !important;
  margin-bottom: 14px !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
}
.product, .product-carousel,
.list-products .product, .product-list .product {
  isolation: isolate;
  overflow: visible !important;
  position: relative !important;
}
.product::after, .product-carousel::after,
.list-products .product::after, .product-list .product::after {
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(198,242,74,0.88),
    inset 0 0 28px rgba(166,226,46,0.16),
    0 0 0 1px rgba(166,226,46,0.32),
    0 0 34px rgba(166,226,46,0.34);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--transition), box-shadow var(--transition);
  z-index: 4;
}
.product > *, .product-carousel > *,
.list-products .product > *, .product-list .product > * {
  position: relative;
  z-index: 1;
}
/* gap entre cards no grid (listagem de categoria/busca = CSS grid responsivo com gap) */
.product-list:not(.product-list-carousel) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 16px !important;
}
.product-list:not(.product-list-carousel).clearfix::before,
.product-list:not(.product-list-carousel).clearfix::after {
  content: none !important;
  display: none !important;
}
.product-list:not(.product-list-carousel) > div.clearfix,
.product-list:not(.product-list-carousel) > br {
  display: none !important;
}
.product-list:not(.product-list-carousel) > .product,
.product-list:not(.product-list-carousel) > .product-carousel {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  grid-column: auto !important;
}
.product:hover, .product-carousel:hover {
  transform: translateY(-6px);
  border-color: var(--brand-dim) !important;
  box-shadow: 0 24px 70px -24px rgba(166,226,46,0.5) !important;
}
.product:hover::after, .product-carousel:hover::after,
.list-products .product:hover::after, .product-list .product:hover::after {
  opacity: 1;
}

/* FOTOS de produto: INTACTAS (originais, fundo branco). Container com tile branco
   pra seamless (foto branca = tile branco, sem contorno) e evitar glow verde
   quando imagem demora a carregar. Sem object-fit/cover/multiply. */
.product-image, .owl-fotos .item, .gallery-photo-swipe .item,
.owl-fotos-miniaturas .item, .caixa-imagem, .product-galeria {
  background: #ffffff !important;
  border-radius: 8px !important;
}
.product .product-image,
.product-carousel .product-image {
  overflow: hidden !important;
}
.product .product-image > img,
.product-carousel .product-image > img {
  position: relative;
  transform: scale(1);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), filter 0.32s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}
.product:hover .product-image > img,
.product-carousel:hover .product-image > img {
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.15);
}
.product .product-image .tags,
.product-carousel .product-image .tags {
  position: absolute;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .product .product-image > img,
  .product-carousel .product-image > img {
    transition: none !important;
  }
  .product:hover .product-image > img,
  .product-carousel:hover .product-image > img {
    transform: none !important;
  }
}

/* icones/banners avulsos (menu, marca): chip branco com padding */
.dropdown-menu img[src*="imagecache"],
.navbar-nav img[src*="imagecache"], .yamm-content img[src*="imagecache"],
.submenu-produtos img, .marca-img img, .lista-marca img {
  background: #ffffff !important;
  padding: 5px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.product-info .tit { color: var(--text) !important; }
.product-info .description { color: var(--text-3) !important; }

/* ---- tags de desconto (badges pequenos tipo -25%) ---- */
.tag:not(.imagem):not(.img), .tags .tag:not(.imagem):not(.img) {
  background: linear-gradient(135deg, var(--brand), var(--brand-dim)) !important;
  color: #0a1505 !important; font-weight: 700 !important;
  border-radius: 6px !important;
}
/* tags que sao containers de imagem (.tag.imagem/.tag.img, 243x243) — NAO verde */
.tag.imagem, .tag.img, .tag.imagem.img {
  background: transparent !important;
  background-image: none !important;
}

/* ---- breadcrumb ---- */
.breadcrumb, .breadcrumb li a { color: var(--text-3) !important; background: transparent !important; }
.breadcrumb li.active { color: var(--text) !important; }

/* ---- boxes / panels ---- */
.box, .box-default, .box-primary, .box-secondary, .box-info, .box-success,
.box-warning, .box-danger, .panel, .panel-default, .well, .box-produto, .caixa, .alert {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
.box-title, .box-text, .panel-heading { color: var(--text) !important; border-color: var(--border) !important; }

/* ---- ICONES do sprite (bandeiras de pagamento, selos, social) — o sprite.png
   tem logos coloridos sobre FUNDO BRANCO, que viravam caixas brancas no tema
   escuro. Usar sprite-dark.png (branco -> transparente) mantem a posicao do
   sprite, so troca a imagem: logos coloridos limpos no fundo escuro. ---- */
[class^="icon-"], [class*=" icon-"] {
  background-image: url(../img/min/sprite-dark.png) !important;
}

/* ---- footer ---- */
footer, .contentinfo, .rodape {
  background: linear-gradient(180deg, var(--bg-2), #05070b) !important;
  border-top: 1px solid var(--border) !important;
}
footer, footer * { color: var(--text-2) !important; }
/* containers do rodapé (pagamento/certificados) com bg branco -> transparente (footer ja e escuro) */
.seals-icons, .basefooter, .payment-icons, .formas-pagamento, .certificados,
.footer-payments, .footer-seals, .pagamento, .footer-bottom, .footer-top {
  background: transparent !important;
  color: var(--text-2) !important;
}
.seals-icons h4, .basefooter h4, .payment-icons h4,
.formas-pagamento h4, .certificados h4 { color: var(--text) !important; }
/* containers brancos no footer -> transparente, mas SEM tocar background-image
   (preserva os sprites de bandeira/certificados: .icon-visa-32 etc) */
footer .box, footer .panel, footer .well, footer .card, footer .jumbotron,
footer .caixa, footer [style*="background-color: #fff"],
footer [style*="background-color:#fff"], footer [style*="background:#fff"] {
  background-color: transparent !important;
}
footer h4, footer .tit { color: var(--text) !important; font-family: 'Oxanium', sans-serif !important; }
footer a { color: var(--text-2) !important; }
footer a:hover { color: var(--brand-bright) !important; }

/* ---- formas de pagamento / selos ---- */
.certificados { filter: saturate(0.9); }
.payment-icons, .payment-icons * {
  filter: none !important;
  opacity: 1 !important;
}
.payment-icons [class^="icon-"],
.payment-icons [class*=" icon-"] {
  background-image: url(../img/min/sprite.png) !important;
}

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #232c3a; border-radius: 8px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-dim); }

/* ---- carousel dots (owl) ---- */
.owl-theme .owl-dots .owl-dot span { background: var(--surface-3) !important; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--brand) !important; }

/* ---- dropdowns / mega-menu (bg branco -> escuro) ---- */
.dropdown-menu, .yamm, .yamm-content, .second-level, .dropdown-carrinho,
.mega-menu, .menu-dropdown, .navbar-collapse {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
}
.dropdown-menu a, .yamm-content a, .dropdown-menu li, .yamm-content li {
  color: var(--text-2) !important; background: transparent !important;
}
.dropdown-menu a:hover, .yamm-content a:hover, .dropdown-menu li:hover {
  background: var(--surface-2) !important; color: var(--brand-bright) !important;
}

/* ---- carousel container (bg branco) ---- */
.product-list, .product-list-carousel, .list-products, .carousel-products,
.owl-carousel, .owl-stage-outer { background: transparent !important; }

/* ---- panel heading border laranja ---- */
.panel-heading { border-bottom-color: var(--brand-dim) !important; }

/* ---- jumbotron (carrinho/checkout/conta/login) ---- */
.jumbotron, .jumbotron-fluid {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron p { color: var(--text) !important; }

/* ---- panel-title (FAQ accordion, panels) ---- */
.panel-title, .panel-title a, .panel-title .name, .panel-heading .panel-title {
  color: var(--text) !important;
}
.panel-title a:hover { color: var(--brand-bright) !important; }

/* ---- parcelamento / descontos / bold (produto) ---- */
.parcelamento-tit, .parcelamento-opcoes, .economia { color: var(--text) !important; }
.parcelamento-tit { background: var(--surface-2) !important; }
.parcelamento-opcoes, .parcelamento-opcoes li, .parcelamento-opcoes span, .price-container > span, .wapper-product-price > span, .price-installment, .price-old, .price-new { background: transparent !important; }
.bold, strong.bold { color: var(--text) !important; }
.panel-collapse, .panel-body, .accordion-body { color: var(--text-2) !important; background: var(--surface) !important; }

/* ---- panel-heading (FAQ accordion + panels) bg claro -> escuro ---- */
.panel-heading, .panel-footer {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.panel-default > .panel-heading { background: var(--surface-2) !important; }

/* ---- seguranca: sem scroll horizontal ---- */
html, body { overflow-x: hidden; }

/* ---- CONTEUDO principal + MODAL do configurador de PC (Dilera/etc) ---- */
.conteudo, #conteudo, .main-content, .content-wrapper, .container-conteudo {
  background: transparent !important;
  color: var(--text) !important;
}
.modal-content, .modal-produto, .modal-dialog .modal-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8) !important;
}
.modal-header, .modal-body, .modal-footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modal-title, .modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4,
.modal-produto h1, .modal-produto h2, .modal-produto h3, .modal-produto h4 {
  color: var(--text) !important;
  font-family: 'Oxanium', sans-serif !important;
}
.modal-content label, .modal-content .label, .modal-content p, .modal-content small,
.modal-content li, .modal-content span, .modal-produto label, .modal-produto .label,
.modal-produto p, .modal-produto small, .modal-produto li, .modal-produto span,
.conteudo label, .conteudo small { color: var(--text-2) !important; }
.modal-content a, .modal-produto a, .conteudo a, .rating-link, .title-font { color: var(--text) !important; }
.modal-content a:hover, .modal-produto a:hover, .conteudo a:hover { color: var(--brand-bright) !important; }
.modal-content .close, .modal-produto .close, button.close { color: var(--text) !important; opacity: 0.7 !important; text-shadow: none !important; }
.text-info, .modal-content .text-info { color: var(--accent-2) !important; }
.text-success { color: var(--brand-bright) !important; }
.text-warning { color: var(--accent) !important; }
.text-danger { color: #ff6b6b !important; }
.text-primary { color: var(--brand-bright) !important; }

/* ---- BADGES / LABELS Bootstrap (configurador, tags de status) ---- */
.label, .badge, .label-default, .badge-default {
  background: var(--surface-3) !important; color: var(--text) !important;
}
.label-success, .badge-success, .label-primary, .badge-primary {
  background: var(--brand-dim) !important; color: #0a1505 !important;
}
.label-info, .badge-info { background: rgba(43,212,255,0.18) !important; color: var(--accent-2) !important; }
.label-warning, .badge-warning { background: rgba(255,106,26,0.18) !important; color: var(--accent) !important; }
.label-danger, .badge-danger { background: rgba(255,107,107,0.18) !important; color: #ff6b6b !important; }

.modal-backdrop, .modal-backdrop.in, .modal-backdrop.show { background: rgba(0,0,0,0.75) !important; opacity: 1 !important; }
/* tabelas do configurador (opcoes de peças) */
.modal-content table, .conteudo table, .modal-produto table { background: var(--surface) !important; }
.modal-content .list-group-item, .modal-content .panel,
.conteudo .list-group-item, .conteudo .panel { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* ---- cards bootstrap / panels / listas ---- */
.card, .card-default, .panel, .panel-default, .panel-body, .card-body,
.list-group-item, .thumbnail, .table, .well {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.list-group-item:hover { background: var(--surface-2) !important; color: var(--brand-bright) !important; }
.table > thead > tr > th { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.table > tbody > tr > td { border-color: var(--border) !important; color: var(--text-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface) !important; }
.table-hover > tbody > tr:hover { background: var(--surface-2) !important; }
hr { border-color: var(--border) !important; }

/* ---- animacoes ---- */
@keyframes patFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.product { animation: patFadeInUp 0.4s ease both; }

/* ===== FIX ABRANGENTE: todos elementos brancos/claros restantes (header, botoes, dropdowns, tabs, boxes) ===== */
/* icones de servico do header (carrinho, rastrear, whatsapp) — fundo branco -> transparente */
.service-icon, .service-icon *, .header-servicos, .top-servicos, .servicos-topo { background: transparent !important; }
.service-icon img { filter: brightness(0) invert(1) opacity(0.85); } /* icone branco visivel no escuro */

/* botao "+ categorias" / botoes default / touchspin — centralizado, escuro */
.btn-default, .btn-secondary, .open-all-categories, .btn-bootstrap-touchspin, .bootstrap-touchspin .btn {
  background: var(--surface-2) !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important; text-align: center !important;
}
.open-all-categories { display: flex !important; align-items: center !important; justify-content: center !important; }
.btn-default:hover, .open-all-categories:hover, .bootstrap-touchspin .btn:hover {
  background: var(--surface-3) !important; border-color: var(--brand) !important; color: var(--brand-bright) !important;
}

/* tabs do produto (descricao, caracteristicas) */
.aba, .nav-tabs > li > a, .nav-pills > li > a, .nav-tabs > li > a:hover {
  background: var(--surface-2) !important; color: var(--text-2) !important; border-color: var(--border) !important;
}
.nav-tabs > li.active > a, .aba.active, .nav-pills > li.active > a {
  background: var(--surface) !important; color: var(--brand-bright) !important; border-bottom-color: var(--surface) !important;
}
.nav-tabs { border-bottom-color: var(--border) !important; }
.tab-content, .tab-pane { background: var(--surface) !important; color: var(--text-2) !important; }

/* inputs / addons / selects (filtros, frete, quantidade) */
.input-group-addon { background: var(--surface-2) !important; color: var(--text-2) !important; border-color: var(--border-strong) !important; }
.form-control, select.form-control, .touch-spin, .form-control:focus {
  background: var(--bg) !important; color: var(--text) !important; border-color: var(--border-strong) !important;
}
option, optgroup { background: var(--surface) !important; color: var(--text) !important; }
.input-group { background: transparent !important; }

/* boxes/panels/card com bordas claras -> borda escura + bg escuro */
.panel, .panel-default, .panel-heading, .panel-body, .panel-title, .panel-footer,
.box, .box-default, .box-primary, .box-secondary, .box-info, .box-success, .box-warning, .box-danger,
.card, .well, .list-group, .page-header, .form-filter {
  border-color: var(--border) !important;
}
.page-header { border-bottom: 1px solid var(--border) !important; }
.page-header h1, .page-header h2, .page-header h3 { color: var(--text) !important; }

/* header / menu / navbar borders */
.header-horizontal, header, .top-informacao, .yamm, #menu-desktop, .navbar, .navbar-default, .navbar-collapse {
  border-color: var(--border) !important;
}

/* DROPDOWN garantido escuro inclusive em hover/open (menu branco no hover) */
.dropdown-menu, .dropdown-menu li, .yamm-content, .yamm-content li,
.dropdown-menu > li > a, .yamm-content > li > a, .dropdown-submenu > a {
  background: var(--surface) !important; color: var(--text-2) !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.yamm-content > li > a:hover, .yamm-content a:hover,
.dropdown-menu li:hover, .dropdown-submenu:hover > a, .open > .dropdown-menu {
  background: var(--surface-2) !important; color: var(--brand-bright) !important;
}
.dropdown-menu .divider, .dropdown-divider { background: var(--border) !important; }

/* promocoes especiais borda + box titles */
#promocao-especial, .promocao-especial { border-color: var(--brand-dim) !important; background: transparent !important; }
.panel-heading:has(.imagem_carrossel_especial) {
  overflow: hidden;
  transform: translateZ(0);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), filter var(--transition);
}
.panel-heading:has(.imagem_carrossel_especial)::before {
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.18) 46%, rgba(198,242,74,0.34) 50%, transparent 58%);
  content: "";
  inset: -70% auto -70% -45%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: skewX(-18deg) translateX(-110%);
  width: 42%;
  z-index: 0;
}
.panel-heading:has(.imagem_carrossel_especial):hover {
  border-bottom-color: var(--brand-bright) !important;
  box-shadow: 0 16px 42px -24px rgba(255,106,26,0.75), 0 0 26px rgba(166,226,46,0.18);
  filter: saturate(1.08);
  transform: translateY(-2px);
}
.panel-heading:has(.imagem_carrossel_especial):hover::before {
  animation: patPromoSweep 0.85s cubic-bezier(0.4,0,0.2,1) forwards;
  opacity: 1;
}
.panel-heading:has(.imagem_carrossel_especial) > * {
  position: relative;
  z-index: 1;
}
.imagem_carrossel_especial {
  display: inline-block;
  transform-origin: left center;
  transition: transform var(--transition), filter var(--transition);
}
.panel-heading:has(.imagem_carrossel_especial):hover .imagem_carrossel_especial {
  filter: drop-shadow(0 0 10px rgba(255,106,26,0.6)) drop-shadow(0 0 14px rgba(166,226,46,0.22));
  transform: translateX(4px) scale(1.045) !important;
}
.link_nome_carrossel a,
.link_nome_carrossel .fa {
  transition: color var(--transition), text-shadow var(--transition), transform var(--transition);
}
.panel-heading:has(.imagem_carrossel_especial):hover .link_nome_carrossel a {
  color: var(--brand-bright) !important;
  text-shadow: 0 0 14px rgba(166,226,46,0.45);
}
.panel-heading:has(.imagem_carrossel_especial):hover .link_nome_carrossel .fa {
  transform: translateX(5px);
}
@keyframes patPromoSweep {
  from { transform: skewX(-18deg) translateX(-110%); }
  to { transform: skewX(-18deg) translateX(420%); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-heading:has(.imagem_carrossel_especial),
  .panel-heading:has(.imagem_carrossel_especial)::before,
  .imagem_carrossel_especial,
  .link_nome_carrossel a,
  .link_nome_carrossel .fa {
    animation: none !important;
    transition: none !important;
  }
  .panel-heading:has(.imagem_carrossel_especial):hover,
  .panel-heading:has(.imagem_carrossel_especial):hover .imagem_carrossel_especial,
  .panel-heading:has(.imagem_carrossel_especial):hover .link_nome_carrossel .fa {
    transform: none !important;
  }
}
.box-title, .box-text { color: var(--text) !important; border-color: var(--border) !important; }

/* menus mobile / off-canvas (mmenu) */
.mm-page, .mm-slideout, .mm-wrapper, .mmenu, .mm-panel, .mm-listview {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
.mm-listview > li, .mm-listview > li > a { color: var(--text-2) !important; }

/* paginacao (Anterior/Proximo/numeros) — bg branco -> escuro */
.pagination, .pager, .pagination > li > a, .pagination > li > span,
.pager li > a, .pager li > span {
  background: var(--surface-2) !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pager li > a:hover {
  background: var(--surface-3) !important; color: var(--brand-bright) !important;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover {
  background: var(--brand-dim) !important; color: #0a1505 !important;
  border-color: var(--brand) !important;
}
.pagination > .disabled > a, .pagination > .disabled > span { color: var(--text-3) !important; background: var(--surface) !important; }

/* ---- textura fibra de carbono sutil (site inteiro) ---- */
html, body {
  background-color: #070a0f !important;
  background-image: var(--carbon-fiber-site) !important;
  background-size: var(--carbon-site-size) !important;
  background-position: var(--carbon-position) !important;
}

.header-horizontal, header, header .middle, header section.middle, nav#menu,
.top-informacao, .topo, .cabecalho,
footer, .contentinfo, .rodape {
  background-color: rgba(7,10,15,0.94) !important;
  background-image:
    var(--carbon-fiber-panel),
    linear-gradient(180deg, rgba(7,10,15,0.96), rgba(11,15,22,0.92)) !important;
  background-size: var(--carbon-panel-size), 100% 100% !important;
  background-position: var(--carbon-panel-position), 0 0 !important;
  background-blend-mode: normal, normal !important;
}

.product, .product-carousel, .product-info,
.list-products .product, .product-list .product,
.box, .box-default, .box-primary, .box-secondary, .box-info, .box-success,
.box-warning, .box-danger, .panel, .panel-default, .well, .box-produto, .caixa, .alert,
.card, .card-default, .panel-body, .card-body, .list-group-item, .thumbnail,
.jumbotron, .jumbotron-fluid, .modal-content, .modal-produto, .modal-header,
.modal-body, .modal-footer, .dropdown-menu, .yamm, .yamm-content, .second-level,
.dropdown-carrinho, .mega-menu, .menu-dropdown, .navbar-collapse, .tab-content,
.tab-pane, .mm-page, .mm-slideout, .mm-wrapper, .mmenu, .mm-panel, .mm-listview {
  background-color: var(--surface) !important;
  background-image:
    var(--carbon-fiber-panel),
    linear-gradient(180deg, rgba(22,28,40,0.96), rgba(15,20,29,0.98)) !important;
  background-size: var(--carbon-panel-size), 100% 100% !important;
  background-position: var(--carbon-panel-position), 0 0 !important;
  background-blend-mode: normal, normal !important;
}

.product-image, .owl-fotos .item, .gallery-photo-swipe .item,
.owl-fotos-miniaturas .item, .caixa-imagem, .product-galeria,
.dropdown-menu img[src*="imagecache"], .navbar-nav img[src*="imagecache"],
.yamm-content img[src*="imagecache"], .submenu-produtos img, .marca-img img,
.lista-marca img {
  background-color: #ffffff !important;
  background-image: none !important;
}

@media (min-width: 768px) {
  .product-list-carousel .carousel-products.owl-carousel .owl-wrapper:has(> .owl-item:nth-child(4)):not(:has(> .owl-item:nth-child(5))) {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    left: 0 !important;
    transform: none !important;
  }
  .product-list-carousel .carousel-products.owl-carousel .owl-wrapper:has(> .owl-item:nth-child(4)):not(:has(> .owl-item:nth-child(5))) > .owl-item {
    float: none !important;
    flex: 0 0 auto !important;
  }
}

/* ---- banner full-width (quebra container, preenche viewport) ---- */
#carousel-banner.banner-full,
#banner-paginas-especiais.banner-full {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid var(--brand-dim) !important;
  overflow: hidden !important;
}
#carousel-banner.banner-full .item a,
#banner-paginas-especiais.banner-full .item a {
  display: block !important;
  width: 100% !important;
}
#carousel-banner.banner-full img,
#banner-paginas-especiais.banner-full img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* ---- layout dinamico: mais itens e espacamento em telas grandes ---- */
/* Bootstrap custom.css usa width:Xpx em .container — precisa de width + max-width */
@media (min-width: 1200px) {
  .container {
    width: 1240px !important;
    max-width: 1240px !important;
  }
  .product-list:not(.product-list-carousel) {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 18px !important;
  }
  .product { margin-bottom: 16px !important; }
}
@media (min-width: 1400px) {
  .container {
    width: 1360px !important;
    max-width: 1360px !important;
  }
  .product-list:not(.product-list-carousel) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 22px !important;
  }
  .product { margin-bottom: 18px !important; }
}
@media (min-width: 1600px) {
  .container {
    width: 1520px !important;
    max-width: 1520px !important;
  }
  .product-list:not(.product-list-carousel) {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    gap: 24px !important;
  }
}
@media (min-width: 1800px) {
  .container {
    width: 1700px !important;
    max-width: 1700px !important;
  }
  .product-list:not(.product-list-carousel) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 28px !important;
  }
  .product { margin-bottom: 22px !important; }
}
@media (min-width: 2200px) {
  .container {
    width: 2000px !important;
    max-width: 2000px !important;
  }
  .product-list:not(.product-list-carousel) {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 34px !important;
  }
}

/* secoes da landing com mais respiro */
main[role="main"] > section,
main[role="main"] > div {
  margin-bottom: 8px;
}
@media (min-width: 1200px) {
  main[role="main"] > section,
  main[role="main"] > div {
    margin-bottom: 14px;
  }
}

/* borda verde no banner ao inves de cinza */
#carousel-banner.banner-full .owl-controls .owl-page span {
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
}
#carousel-banner.banner-full .owl-controls .owl-page.active span {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}