/* Vila Bossa Oficial: global tokens and existing component geometry. */
:root {
  --color-primary: #75574A;
  --color-secondary: #A88A7A;
  --color-background: #F8F5F4;
  --color-background-secondary: #E4DCD4;
  --color-text: #2D2522;
  --color-surface: #FFFFFF;
  --color-primary-hover: #60463B;
  --color-error: #8A443B;
  --color-error-background: #F6ECE8;
  --color-overlay: rgba(45, 37, 34, .48);
  --color-focus: rgba(168, 138, 122, .3);
  --brand: var(--color-primary) !important;
  --brand2: var(--color-secondary) !important;
  --accent: var(--color-primary) !important;
  --blue: var(--color-primary) !important;
  --blue-dark: var(--color-primary) !important;
  --teal: var(--color-primary) !important;
  --green: var(--color-primary) !important;
  --bg: var(--color-background) !important;
  --text: var(--color-text) !important;
  --muted: var(--color-primary) !important;
  --line: var(--color-background-secondary) !important;
  --soft: var(--color-background-secondary) !important;
}

:root {
  --fortek-yellow: var(--color-primary);
  --fortek-yellow-hover: var(--color-primary-hover);
  --fortek-black: var(--color-text);
  --fortek-white: var(--color-surface);
  --fortek-line: var(--color-background-secondary);
  --blue: var(--color-primary) !important;
  --teal: var(--color-primary) !important;
  --blue-dark: var(--color-primary) !important;
  --bg: var(--color-background) !important;
  --text: var(--color-text) !important;
}

html,
body {
  background: var(--fortek-white) !important;
  color: var(--fortek-black) !important;
}


.topbar,
header.top,
body > header,
.checkout-header {
  background: var(--fortek-black) !important;
  background-image: none !important;
  color: var(--fortek-yellow) !important;
  border-color: var(--fortek-yellow) !important;
}

.topbar .menu-btn,
.topbar .cep,
.topbar .cep b,
.topbar .cart,
.top .secure,
.top .secure span,
.top .safe-top,
.top .safe-top span,
body > header h1,
body > header .sub,
body > header .pill {
  color: var(--fortek-yellow) !important;
}

.topbar .search button {
  background: var(--fortek-black) !important;
  color: var(--fortek-yellow) !important;
}


.topbar,
body > header:not(.top) {
  background: var(--fortek-yellow) !important;
  background-image: none !important;
  color: var(--fortek-black) !important;
  border-color: var(--fortek-black) !important;
}

.topbar .menu-btn,
.topbar .cep,
.topbar .cep b,
.topbar .cart,
body > header:not(.top) h1,
body > header:not(.top) .sub,
body > header:not(.top) .pill {
  color: var(--fortek-black) !important;
}


.site-logo,
.logo-img,
.menu-logo-box img,
.foot img:first-child,
.foot-brand img {
  content: url('/images/assets/vila-bossa-logo.webp');
  width: auto !important;
  height: auto !important;
  max-width: 260px !important;
  max-height: 74px !important;
  object-fit: contain !important;
}

.topbar .logo-img,
.top .site-logo,
.top img.logo {
  max-width: 240px !important;
  max-height: 62px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.topbar .logo-img,
body > header:not(.top) .admin-logo {
  content: url('/images/assets/vila-bossa-logo.webp');
}

.menu-logo-box {
  background: var(--fortek-black) !important;
}

.menu-logo-box .site-logo,
.menu-logo-box img {
  content: url('/images/assets/vila-bossa-logo.webp');
  max-width: 210px !important;
  max-height: 64px !important;
}

.side-menu {
  background: var(--fortek-white) !important;
  color: var(--fortek-black) !important;
}

.menu-logo-box {
  background: var(--fortek-yellow) !important;
  border: 1px solid var(--fortek-yellow) !important;
}

.menu-close {
  background: var(--color-background) !important;
  color: var(--fortek-black) !important;
  border: 1px solid var(--color-background-secondary) !important;
}

.hello {
  background: var(--fortek-white) !important;
  color: var(--fortek-black) !important;
  border-left: 4px solid var(--fortek-yellow) !important;
}

.hello strong,
.hello b,
.hello span {
  color: var(--fortek-black) !important;
}

.hello span {
  font-size: 0 !important;
}

.hello span::after {
  content: 'Bem-vindo(a) à Vila Bossa Oficial';
  font-size: 14px;
}

.menu-list a {
  background: var(--fortek-white) !important;
  color: var(--fortek-black) !important;
}

.menu-list a:hover {
  background: var(--color-background-secondary) !important;
}

.menu-list a::after {
  color: var(--fortek-yellow-hover) !important;
}

.admin-logo { flex: 0 1 250px; }

.footer-logo,
footer .site-logo,
footer .foot img:first-child,
footer .foot-brand img {
  display: block;
  width: min(320px, 82vw) !important;
  max-width: 320px !important;
  max-height: 108px !important;
  margin: 0 auto 22px !important;
}

.brand-footer {
  margin: 28px 0 0 !important;
  padding: 28px 16px !important;
  text-align: center;
}

.bar,
.menu-logo-box,
.badge,
.check,
.hot-pill .ck,
.countdown .digits .d,
.countdown .digits .ms,
.step.active .num,
.bubble {
  background: var(--fortek-yellow) !important;
  background-image: none !important;
  color: var(--fortek-black) !important;
  border-color: var(--fortek-black) !important;
}


main,
section,
.hero,
.section,
.side-menu,
.hello,
.gallery-main,
.photo,
.info-card,
.review,
.faq-card,
.card,
.scope-panel,
.gateway-panel,
.filters,
.calendar-panel,
.empty,
.trust,
.shipping-option,
.pix-box,
.pix-loading,
.upsell,
.login-screen,
.frow,
.perk {
  background-color: var(--fortek-white) !important;
  background-image: none !important;
}


.gallery-main,
.photo,
.thumb,
.review img,
.review-photos img,
.media-img {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.gallery-main > img,
.photo > img,
.thumb img,
.review img,
.review-photos img,
.media-img {
  width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--fortek-white) !important;
}

.gallery-main > img,
.photo > img,
.thumb img {
  height: 100% !important;
}

.review img,
.review-photos img,
.media-img {
  height: auto !important;
  display: block !important;
}


.buy,
.product-cta,
.freight-row button,
.btn,
.copy-btn,
.upsell-btn,
.gateway-save,
.login-card button,
.filter-actions .primary,
.calendar-toggle,
.tab.active,
.scope-tab.active,
.gateway-btn.active {
  background: var(--fortek-yellow) !important;
  color: var(--fortek-black) !important;
  border-color: var(--fortek-black) !important;
  box-shadow:none;
}

.buy:hover,
.product-cta:hover,
.freight-row button:hover,
.btn:hover,
.copy-btn:hover,
.upsell-btn:hover {
  background: var(--fortek-yellow-hover) !important;
  color: var(--fortek-black) !important;
}


.buy,
.product-cta,
.buy-btn,
#buyBtnSticky,
.freight-row button,
.freight-form button {
  background: var(--fortek-yellow) !important;
  color: var(--fortek-black) !important;
  border-color: var(--fortek-yellow) !important;
  box-shadow:none;
}

.buy:hover,
.product-cta:hover,
.buy-btn:hover,
#buyBtnSticky:hover,
.freight-row button:hover,
.freight-form button:hover {
  background: var(--fortek-yellow-hover) !important;
  color: var(--fortek-black) !important;
}


.variant.active,
.shipping-option.active,
.gateway-btn.selected,
.thumb.active,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fortek-black) !important;
  box-shadow:none;
}

.variant.active {
  background: var(--fortek-white) !important;
  color: var(--fortek-black) !important;
  border: 2px solid var(--fortek-yellow) !important;
  box-shadow:none;
}

.stars,
.rev-stars,
.price-off,
.off,
.fprice,
.free,
.total strong:last-child,
.title-icon,
.pix-success-title,
.title,
.value,
.faq summary::after,
.countdown,
.hot-pill {
  color: var(--fortek-black) !important;
}

.price-off,
.pix-tag,
.hot,
.hot-pill,
.quick button.active {
  background: var(--fortek-yellow) !important;
  color: var(--fortek-black) !important;
  border-color: var(--fortek-black) !important;
}

.hot,
.hot-pill {
  background: var(--color-primary) !important;
  color: var(--fortek-black) !important;
  border-color: var(--fortek-black) !important;
}

input,
select,
textarea,
.menu-list a,
.variant,
.qty,
.thumb,
.paybox,
.qrbox {
  background: var(--fortek-white) !important;
  color: var(--fortek-black) !important;
}

footer {
  background: var(--fortek-black) !important;
  color: var(--fortek-white) !important;
}

footer h3,
footer a,
footer p,
footer .copy {
  color: var(--fortek-white) !important;
}

footer .copy {
  background: var(--fortek-black) !important;
  border-top: 1px solid var(--fortek-yellow) !important;
}

.login-screen {
  background: var(--fortek-yellow) !important;
}

@media (max-width: 760px) {
  body {
    background: var(--fortek-white) !important;
  }

  .topbar .logo-img,
  .top .site-logo,
  .top img.logo {
    max-width: 155px !important;
    max-height: 48px !important;
  }

  .admin-logo { max-width: 190px !important; }
}