/* Semantic colors override legacy component rules without changing layout. */
html, body, main, section, .hero, .section, .login-screen {
  background: var(--color-surface) !important;
  color: var(--color-text);
}
.topbar, header.top, body > header, body > header:not(.top), .checkout-header,
.menu-logo-box, .side-menu {
  background: var(--color-background) !important;
  color: var(--color-text) !important;
  border-color: var(--color-background-secondary) !important;
}
.topbar .menu-btn, .topbar .cart, .topbar .cep, .topbar .cep b,
.top .secure, .top .secure span, .top .safe-top, .top .safe-top span,
.safe-top svg, .secure svg, body > header:not(.top) h1,
body > header:not(.top) .sub, body > header:not(.top) .pill {
  color: var(--color-primary) !important;
}
.topbar .search button {
  background: var(--color-primary) !important;
  color: var(--color-surface) !important;
}
.about, main > section:nth-of-type(even):not(.card):not(.bar) {
  background: var(--color-surface) !important;
}
.hello,
.trust, .hot, .hot-pill, .loading, .pix-loading, .pix-box {
  background: var(--color-background-secondary) !important;
  color: var(--color-text) !important;
  border-color: var(--color-background-secondary) !important;
}
.product, .card, .info-card, .review, .faq-card, .gallery-main, .photo,
.shipping-option, .upsell, .paybox, .pix-payment-card, .qr-box, .qrbox {
  background: var(--color-surface) !important;
  border-color: var(--color-background-secondary) !important;
  box-shadow: none !important;
}
h1, h2, h3, .info h3, .title, .pname, .trust-title {
  color: var(--color-text) !important;
}
.title h2, .about h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: .01em; }
.muted, .old, .old-price, .lead, .trust-text, .shipping-time,
.stars, .rev-stars, .price-off, .off, .fprice, .free, .price strong,
.new-price, .value, .total strong:last-child, .title-icon, .pix-success-title {
  color: var(--color-primary) !important;
}
.buy, .buy-btn, #buyBtnSticky, .product-cta, .btn, .copy-btn, .upsell-btn,
.freight-row button, .freight-form button, .gateway-save, .login-card button,
.filter-actions .primary, .calendar-toggle, .tab.active, .scope-tab.active,
.gateway-btn.active, .quick button.active, .badge, .tag, .check, .bar,
.hot-pill .ck, .countdown .digits .d, .countdown .digits .ms,
.step.active .num, .bubble, .pix-tag {
  background: var(--color-primary) !important;
  color: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}
.buy:hover, .buy-btn:hover, #buyBtnSticky:hover, .product-cta:hover,
.btn:hover, .copy-btn:hover, .upsell-btn:hover, .freight-row button:hover,
.freight-form button:hover, .gateway-save:hover, .login-card button:hover,
.filter-actions .primary:hover, .calendar-toggle:hover, .topbar .search button:hover {
  background: var(--color-primary-hover) !important;
  color: var(--color-surface) !important;
}
.btn.secondary, .btn.light {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-background-secondary) !important;
}
.btn.secondary:hover, .btn.light:hover, .menu-list a:hover, .menu-close {
  background: var(--color-background-secondary) !important;
  color: var(--color-primary) !important;
}
.btn:disabled, .copy-btn:disabled { background: var(--color-secondary) !important; }
.variant.active, .shipping-option.active, .gateway-btn.selected, .thumb.active,
.upsell.selected, input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-focus) !important;
}
input, select, textarea, .variant, .qty, .thumb {
  border-color: var(--color-background-secondary);
  accent-color: var(--color-primary);
}
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--color-error) !important;
  background: var(--color-error-background) !important;
}
.field-error, .pix-error { color: var(--color-error) !important; }
.pix-error { background: var(--color-error-background) !important; }
input.valid, select.valid { border-color: var(--color-secondary) !important; }
.menu-overlay { background: var(--color-overlay); }
.side-menu { box-shadow: none; }
.menu-list a::after, .stars span { color: var(--color-secondary) !important; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-secondary); outline-offset: 3px;
}
footer, footer .copy { background: var(--color-primary) !important; color: var(--color-background) !important; }
footer h3, footer h4, footer a, footer p, footer .copy { color: var(--color-background) !important; }
footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
footer .site-logo, .foot-brand img, .foot > div:first-child > img {
  content: url('/images/assets/vila-bossa-logo.webp');
}
.top .brand img, .top img.logo { content: url('/images/assets/vila-bossa-logo.webp'); }
/* Payment provider badges and QR images retain their original pixels. */

/* Original supplied logo, with a light surface for contrast in the footer. */
.fortek-footer-brand img, footer .site-logo, .foot-brand img,
.foot > div:first-child > img {
  background: var(--color-background);
  padding: 12px 18px;
  border-radius: 2px;
}