/* ============================================================
   FBG CAIXA FECHADA — Camada de redesign (aditiva)
   Arquivo proprio, carregado apos o tema "vista".
   Rollback: remover a linha de <link> no header.tpl.
   v1.0 — 2026-09-01
   ============================================================ */

:root {
  --fbg-yellow: #FFC805;
  --fbg-yellow-deep: #EFB400;
  --fbg-yellow-soft: rgba(255, 200, 5, 0.12);
  --fbg-ink: #171511;
  --fbg-ink-2: #23211C;
  --fbg-text: #2B2924;
  --fbg-muted: #75726A;
  --fbg-line: #E8E5DD;
  --fbg-bg: #F7F6F2;
  --fbg-card: #FFFFFF;
  --fbg-radius: 14px;
  --fbg-radius-sm: 10px;
  --fbg-shadow-1: 0 1px 2px rgba(35, 33, 28, 0.06), 0 4px 14px rgba(35, 33, 28, 0.06);
  --fbg-shadow-2: 0 6px 16px rgba(35, 33, 28, 0.10), 0 16px 40px rgba(35, 33, 28, 0.10);
  --fbg-ease: cubic-bezier(0.2, 0.6, 0.25, 1);
}

/* ---------- Base ---------- */

body {
  background-color: var(--fbg-bg) !important;
}

::selection {
  background: var(--fbg-yellow);
  color: var(--fbg-ink);
}

:focus-visible {
  outline: 2px solid var(--fbg-yellow-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Tipografia ---------- */

h1, h2, h3, h4,
.heading-1, .heading-2, .heading-3,
nav.menu a,
.btn-default,
.itembox-title {
  font-family: "Outfit", "Lato", sans-serif;
}

h1, .heading-1 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.15 !important;
  color: var(--fbg-ink-2) !important;
  text-wrap: balance;
}

h2, .heading-2 {
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: var(--fbg-ink-2) !important;
  text-wrap: balance;
}

/* ---------- Header v2 ---------- */

header.header {
  background: #fff;
}

/* Barra de utilidades no topo: escura, com acento amarelo */
.header__top {
  background: var(--fbg-ink) !important;
  border-bottom: none !important;
}

.header__top .header__top-text,
.header__top a,
.header__top span {
  color: #E9E6DF !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.18s var(--fbg-ease);
}

.header__top a:hover,
.header__top a:hover span {
  color: var(--fbg-yellow) !important;
}

.header__top i {
  color: var(--fbg-yellow) !important;
}

/* Logo: usa o arquivo original sem recompressao (via JS) e exibe menor = mais nitido */
header.header .header__main img {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--fbg-yellow), 0 6px 18px rgba(35, 33, 28, 0.14);
  transition: transform 0.25s var(--fbg-ease);
}

header.header .header__main img:hover {
  transform: scale(1.03) rotate(-1deg);
}

/* Area principal mais compacta */
.header__main > .container-fluid {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Busca maior, estilo pill */
.js-header__search-container input[type="text"] {
  height: 48px !important;
  font-size: 15px !important;
  padding-left: 22px !important;
  border-radius: 999px !important;
}

/* Conta / carrinho */
.header__main-text {
  font-family: "Outfit", "Lato", sans-serif;
  font-weight: 600;
  border-radius: var(--fbg-radius-sm);
  transition: background-color 0.18s var(--fbg-ease);
}

.header__main-text:hover {
  background-color: var(--fbg-yellow-soft);
}

/* Filete amarelo de marca entre header e nav */
nav.menu {
  border-top: 3px solid var(--fbg-yellow);
}

header.header input[type="text"] {
  border: 1.5px solid var(--fbg-line) !important;
  background: #fff !important;
  transition: border-color 0.2s var(--fbg-ease), box-shadow 0.2s var(--fbg-ease);
}

header.header input[type="text"]:focus {
  border-color: var(--fbg-yellow-deep) !important;
  box-shadow: 0 0 0 3px var(--fbg-yellow-soft) !important;
  outline: none;
}

.header__search-btn.dark,
button.header__search-btn {
  background-color: var(--fbg-yellow) !important;
  color: var(--fbg-ink) !important;
  border: none !important;
  transition: background-color 0.2s var(--fbg-ease), transform 0.15s var(--fbg-ease);
}

.header__search-btn.dark:hover,
button.header__search-btn:hover {
  background-color: var(--fbg-yellow-deep) !important;
}

.header__search-btn.dark:active {
  transform: scale(0.94);
}

.notification-badge,
.notification-badge-custom-color {
  background-color: var(--fbg-yellow) !important;
  color: var(--fbg-ink) !important;
  font-weight: 700 !important;
}

/* ---------- Navegacao ---------- */

nav.menu {
  background-color: var(--fbg-ink) !important;
  position: sticky;
  top: 0;
  z-index: 980;
  transition: box-shadow 0.25s var(--fbg-ease);
}

nav.menu.fbg-stuck {
  box-shadow: 0 8px 24px rgba(20, 18, 14, 0.28);
}

nav.menu > ul > li > a,
nav.menu a {
  font-weight: 600;
  font-size: 13px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.18s var(--fbg-ease), background-color 0.18s var(--fbg-ease);
}

nav.menu > ul > li > a:hover,
nav.menu a:hover {
  color: var(--fbg-yellow) !important;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Dropdowns do menu */
nav.menu ul ul {
  border-radius: 0 0 var(--fbg-radius-sm) var(--fbg-radius-sm);
  box-shadow: var(--fbg-shadow-2);
  overflow: hidden;
}

/* ---------- Superficies / cards ---------- */

.paper {
  border-radius: var(--fbg-radius) !important;
  border: 1px solid rgba(35, 33, 28, 0.07) !important;
  box-shadow: var(--fbg-shadow-1) !important;
}

/* ---------- Card de produto ---------- */

.itembox.paper {
  background: var(--fbg-card) !important;
  transition: transform 0.22s var(--fbg-ease), box-shadow 0.22s var(--fbg-ease), border-color 0.22s var(--fbg-ease);
  will-change: transform;
}

.itembox.paper:hover {
  transform: translateY(-4px);
  box-shadow: var(--fbg-shadow-2) !important;
  border-color: rgba(35, 33, 28, 0.12) !important;
}

.itembox-image-link {
  overflow: hidden;
  border-radius: var(--fbg-radius-sm);
  display: block;
}

.itembox-image-link img {
  transition: transform 0.45s var(--fbg-ease);
}

.itembox.paper:hover .itembox-image-link img {
  transform: scale(1.045);
}

.itembox-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--fbg-ink-2) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.005em;
  transition: color 0.18s var(--fbg-ease);
}

.itembox.paper:hover .itembox-title {
  color: #000 !important;
}

.itembox-description {
  color: var(--fbg-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.45;
}

.itembox-price {
  font-family: "Outfit", "Lato", sans-serif;
  font-weight: 700;
  color: var(--fbg-ink-2);
  font-variant-numeric: tabular-nums;
}

/* Botao de lupa (quick view) sobre a imagem */
.itembox-btn-detail {
  border-radius: 999px !important;
  background: rgba(23, 21, 17, 0.82) !important;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s var(--fbg-ease), transform 0.2s var(--fbg-ease), background-color 0.2s var(--fbg-ease);
}

.itembox.paper:hover .itembox-btn-detail {
  opacity: 1;
  transform: translateY(0);
}

.itembox-btn-detail:hover {
  background: var(--fbg-ink) !important;
}

@media (hover: none) {
  .itembox-btn-detail { opacity: 1; transform: none; }
}

/* Stepper de quantidade: sem caixa dupla — so o campo central tem borda */
.itembox-btn.btn-down,
.itembox-btn.btn-up,
button.js-btn-qtd,
.js-product-container-action .btn-down,
.js-product-container-action .btn-up {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--fbg-muted) !important;
  border-radius: 8px !important;
  transition: background-color 0.18s var(--fbg-ease), color 0.18s var(--fbg-ease), transform 0.12s var(--fbg-ease);
}

.itembox-btn.btn-down:hover,
.itembox-btn.btn-up:hover,
button.js-btn-qtd:hover {
  background: var(--fbg-yellow-soft) !important;
  color: var(--fbg-ink) !important;
}

.itembox-btn.btn-down:active,
.itembox-btn.btn-up:active {
  transform: scale(0.92);
}

.itembox-actions input[type="text"],
.itembox-actions input[type="number"] {
  border: 1.5px solid var(--fbg-line) !important;
  border-radius: var(--fbg-radius-sm) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fbg-ink-2) !important;
}

/* ---------- Botoes de compra ---------- */

.itembox-actions .btn-default.dark,
.btn-cart,
.btn-cart.dark {
  background-color: var(--fbg-yellow) !important;
  color: var(--fbg-ink) !important;
  border: none !important;
  border-radius: var(--fbg-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(239, 180, 0, 0.35);
  transition: background-color 0.18s var(--fbg-ease), transform 0.15s var(--fbg-ease), box-shadow 0.18s var(--fbg-ease);
}

.itembox-actions .btn-default.dark:hover,
.btn-cart:hover {
  background-color: var(--fbg-yellow-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 180, 0, 0.45);
}

.itembox-actions .btn-default.dark:active,
.btn-cart:active {
  transform: translateY(0) scale(0.98);
}

/* Botoes escuros genericos: refinamento leve */
.btn-default {
  border-radius: var(--fbg-radius-sm) !important;
  transition: background-color 0.18s var(--fbg-ease), transform 0.15s var(--fbg-ease), box-shadow 0.18s var(--fbg-ease);
}

.btn-default:active {
  transform: scale(0.98);
}

/* ---------- Sidebar de categorias (tema claro) ---------- */

.aside-filter,
.aside-filter.cc-sm-bg {
  background: #fff !important;
  border: 1px solid var(--fbg-line) !important;
  border-radius: var(--fbg-radius) !important;
  box-shadow: var(--fbg-shadow-1) !important;
}

.aside-filter,
.aside-filter a,
.aside-filter span,
.aside-filter div,
.aside-filter li,
.aside-filter label,
.aside-filter h1, .aside-filter h2, .aside-filter h3, .aside-filter h4 {
  color: var(--fbg-text) !important;
}

.aside-filter a {
  border-radius: 8px;
  transition: background-color 0.16s var(--fbg-ease), color 0.16s var(--fbg-ease), padding-left 0.16s var(--fbg-ease);
}

.aside-filter a:hover {
  background-color: var(--fbg-yellow-soft) !important;
  color: var(--fbg-ink) !important;
}

.aside-filter i {
  color: var(--fbg-muted) !important;
}

/* ---------- Selects, inputs, paginacao ---------- */

select {
  border: 1.5px solid var(--fbg-line);
  border-radius: var(--fbg-radius-sm);
  background-color: #fff;
  color: var(--fbg-text);
  transition: border-color 0.18s var(--fbg-ease);
}

select:hover, select:focus {
  border-color: var(--fbg-yellow-deep);
}

/* ---------- Pagina de produto ---------- */

/* Sem a moldura externa na area de compra (pedido do Milton) */
.js-product-container-action.paper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- Titulos de secao da home ---------- */

.heading-product-list-title {
  font-family: "Outfit", "Lato", sans-serif !important;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--fbg-ink-2) !important;
}

.heading-product-list-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--fbg-yellow);
  margin: 10px auto 0;
}

.heading-product-list-subtitle {
  color: var(--fbg-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Rodape / links genericos ---------- */

footer a {
  transition: color 0.18s var(--fbg-ease);
}

footer a:hover {
  color: var(--fbg-yellow) !important;
}

/* ---------- Entrada animada dos cards (progressivo, so Chrome novo) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .itembox.paper {
      animation: fbg-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

@keyframes fbg-rise {
  from {
    opacity: 0.25;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Barra de rolagem discreta (WebKit) ---------- */

::-webkit-scrollbar {
  width: 11px;
}

::-webkit-scrollbar-track {
  background: var(--fbg-bg);
}

::-webkit-scrollbar-thumb {
  background: #C9C5BA;
  border-radius: 8px;
  border: 2px solid var(--fbg-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #ABA79B;
}

/* Mobile: logo pequeno e discreto, header compacto (v3) */
@media (max-width: 991px) {
  header.header .header__main img {
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--fbg-yellow), 0 3px 10px rgba(35, 33, 28, 0.12);
  }
  header.header .header__main img:hover { transform: none; }
  .header__main > .container-fluid { padding-top: 8px !important; padding-bottom: 8px !important; }
  .header__main-text { font-size: 14px; }
}

/* Mobile: topbar compacta em linha (v4) */
@media (max-width: 991px) {
  .header__top .flex.flex-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .header__top .header__top-text {
    padding: 5px 8px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.03em;
  }
}

/* Mobile: topbar ainda mais compacta (v5) */
@media (max-width: 991px) {
  .header__top i { display: none !important; }
  .header__top .header__top-text {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.02em;
  }
  .header__top > .container-fluid > .flex.flex-row.between-xs,
  .header__top .flex.flex-row {
    justify-content: center !important;
    flex-wrap: wrap;
  }
}

/* Mobile: topbar em fluxo unico, 2 linhas (v6) */
@media (max-width: 991px) {
  .header__top > .container-fluid > .flex.flex-row.between-xs > .flex.flex-row {
    display: contents;
  }
}

/* Mobile: topbar abaixo do header principal (v7) */
@media (max-width: 991px) {
  header.header.js-header {
    display: flex;
    flex-direction: column;
  }
  header.header.js-header .header__top { order: 2; }
  header.header.js-header .header__main { order: 1; }
}

/* ===== App-like (v8): stepper em pilula, FAB, banner arredondado, raios maiores ===== */
:root {
  --fbg-radius: 18px;
  --fbg-radius-sm: 12px;
  --fbg-track: #F1EFE9;
}

/* Stepper: trilho em pilula, sem contorno no numero */
.itembox-quantity-control,
.js-fator {
  background: var(--fbg-track) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 3px !important;
  display: flex;
  align-items: center;
  gap: 2px;
}

.itembox-quantity-control input,
.js-fator input,
.itembox-actions input[type="text"],
input.js-quantity {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: center;
  font-family: "Outfit", "Lato", sans-serif;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--fbg-ink-2) !important;
}

.itembox-quantity-control .itembox-btn,
.js-fator .btn-down,
.js-fator .btn-up {
  background: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fbg-ink-2) !important;
  box-shadow: 0 1px 3px rgba(35,33,28,0.12);
  flex: none;
}

.itembox-quantity-control .itembox-btn:hover,
.js-fator .btn-down:hover,
.js-fator .btn-up:hover {
  background: var(--fbg-yellow) !important;
  color: var(--fbg-ink) !important;
}

.itembox-quantity-control .itembox-btn i,
.js-fator .btn-down i,
.js-fator .btn-up i {
  font-size: 11px;
}

/* Carrinho: botao circular estilo FAB */
.itembox-actions .btn-cart,
.itembox-actions .btn-default.btn-cart {
  border-radius: 999px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Botao Adicionar da pagina de produto: pilula */
.js-product-container-action .btn-cart {
  border-radius: 999px !important;
}

/* Banner com cantos de app */
.carousel-container.slide-home,
.slide-home {
  border-radius: var(--fbg-radius);
  overflow: hidden;
}

@media (max-width: 991px) {
  .carousel-container.slide-home,
  .slide-home {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 8px;
  }
}

/* Fix overflow do FAB no card (v9) */
.itembox-actions .flex.nowrap-xs.full-width {
  gap: 8px;
  align-items: center;
}

.itembox-actions .itembox-quantity-control,
.itembox-actions .js-fator {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: space-between;
  width: auto !important;
}

.itembox-quantity-control input,
.js-fator input,
input.js-quantity {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto;
  padding: 0 2px !important;
}

.itembox-actions .btn-cart,
.itembox-actions .btn-default.btn-cart {
  margin-left: 0 !important;
}

/* Numero com largura fixa no stepper (v10) */
.itembox-quantity-control input,
.js-fator input,
input.js-quantity {
  width: 52px !important;
  min-width: 36px !important;
  max-width: 64px;
  flex: 0 1 52px !important;
  overflow: visible;
}

/* Pilula compacta de largura fixa + FAB a direita (v11) */
.itembox-actions .flex.nowrap-xs.full-width .itembox-quantity-control,
.itembox-actions .flex.nowrap-xs.full-width .js-fator,
div.itembox-quantity-control.js-fator {
  flex: 0 0 auto !important;
  width: 134px !important;
  min-width: 134px !important;
  max-width: 134px !important;
  justify-content: space-between !important;
  overflow: hidden;
}

.itembox-actions .flex.nowrap-xs.full-width .btn-cart {
  margin-left: auto !important;
}

/* Stepper responsivo definitivo (v12): pilula flexivel, botoes 28px, numero flexivel */
.itembox-actions .flex.nowrap-xs.full-width .itembox-quantity-control,
.itembox-actions .flex.nowrap-xs.full-width .js-fator,
div.itembox-quantity-control.js-fator {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.itembox-quantity-control .itembox-btn,
.js-fator .btn-down,
.js-fator .btn-up {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: none !important;
}

.itembox-quantity-control input,
.js-fator input,
input.js-quantity {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 0px !important;
  font-size: 14px !important;
  padding: 0 !important;
}

@media (max-width: 991px) {
  .itembox-actions .btn-cart,
  .itembox-actions .btn-default.btn-cart {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}

/* Pilula com largura confortavel na pagina de produto (v13) */
.js-product-container-action .js-fator,
.js-product-container-action .itembox-quantity-control {
  min-width: 160px !important;
  flex: 0 1 auto !important;
}

.js-product-container-action input.js-quantity {
  font-size: 15px !important;
}

/* Especificidade acima da v12 para a pagina de produto (v14) */
.js-product-container-action div.itembox-quantity-control.js-fator {
  min-width: 160px !important;
  width: 160px !important;
  max-width: 160px !important;
  flex: 0 0 auto !important;
}

/* ===== v15: logo vetorial (sem circulo) + largura util no desktop ===== */
:root { --fbg-container: 88rem; }

header.header .header__main img,
header.header .header__main img.fbg-logo-svg {
  width: auto !important;
  height: 46px !important;
  max-width: 220px;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain;
  transition: opacity 0.2s var(--fbg-ease);
}

header.header .header__main img:hover {
  transform: none !important;
  opacity: 0.82;
}

@media (max-width: 991px) {
  header.header .header__main img,
  header.header .header__main img.fbg-logo-svg {
    height: 30px !important;
    max-width: 148px;
    box-shadow: none !important;
  }
}

@media (min-width: 992px) {
  header.header .header__top > .container-fluid,
  header.header .header__main > .container-fluid,
  nav.menu > .container-fluid,
  #content > .container-fluid,
  #content > .container {
    width: min(100%, var(--fbg-container)) !important;
    max-width: var(--fbg-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .js-header__search-container .content-box {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* (v16) */
/* v16: troca do logo via CSS (o tema reescreve o src) */
header.header .header__main img {
  content: url("/catalog/view/theme/vista/stylesheet/fbg-logo.svg") !important;
}

/* (v17) */
/* ===== v17: carrinho como gaveta lateral (direita, altura total) ===== */
.header__dropdown.header__dropdown--right {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(420px, 92vw) !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: -18px 0 52px rgba(23, 21, 17, 0.22) !important;
  z-index: 1200 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.34s var(--fbg-ease), opacity 0.22s var(--fbg-ease);
}

.header__dropdown.header__dropdown--right.hidden {
  display: block !important;
  transform: translateX(102%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fbg-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: rgba(23, 21, 17, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--fbg-ease), visibility 0.28s;
}

.fbg-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.header__dropdown.header__dropdown--right .btn-default {
  min-height: 44px;
}

@media (max-width: 991px) {
  .header__dropdown.header__dropdown--right {
    width: min(400px, 94vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__dropdown.header__dropdown--right { transition: none; }
}

/* (v18) */
/* ===== v18: corrige escopo do logo (so #logo) e organiza a gaveta ===== */

/* desfaz o override generico que atingia as miniaturas do carrinho */
header.header .header__main img {
  content: normal !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  border-radius: inherit;
}

/* logo: apenas o elemento #logo */
header.header img#logo {
  content: url("/catalog/view/theme/vista/stylesheet/fbg-logo.svg") !important;
  width: auto !important;
  height: 46px !important;
  max-width: 220px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain;
}

@media (max-width: 991px) {
  header.header img#logo {
    height: 30px !important;
    max-width: 148px !important;
  }
}

/* ---- interior da gaveta ---- */
.header__dropdown.header__dropdown--right {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}

.header__dropdown.header__dropdown--right.hidden {
  display: flex !important;
}

.header__dropdown.header__dropdown--right::before {
  content: "Meu carrinho";
  order: 0;
  flex: none;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fbg-line);
  color: var(--fbg-ink-2);
  font-family: "Outfit", "Lato", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* lista de itens no meio, rolavel */
.header__dropdown.header__dropdown--right > .product-container {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0 !important;
  overflow-y: auto;
}

/* acoes fixas no rodape da gaveta */
.header__dropdown.header__dropdown--right > .flex.flex-row.nowrap-xs {
  order: 3;
  flex: none;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--fbg-line);
}

/* miniatura do item */
.header__dropdown.header__dropdown--right .product-container img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  border-radius: 10px;
  background: var(--fbg-bg);
}

.header__dropdown.header__dropdown--right .product-container > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
}

.header__dropdown.header__dropdown--right .product-container a {
  color: var(--fbg-ink-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* (v19) */
/* ===== v19: titulo da gaveta (o tema usava ::before como setinha) + botao fechar ===== */
.header__dropdown.header__dropdown--right::before {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 44px 12px 0 !important;
  border-bottom: 1px solid var(--fbg-line) !important;
  background: none !important;
  position: static !important;
  display: block !important;
}

.header__dropdown.header__dropdown--right::after {
  display: none !important;
}

.fbg-cart-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fbg-bg);
  color: var(--fbg-ink-2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s var(--fbg-ease), transform 0.14s var(--fbg-ease);
}

.fbg-cart-close:hover { background: var(--fbg-yellow); }
.fbg-cart-close:active { transform: scale(0.92); }

/* (v20) */
/* ===== v20: conserta miniatura e quantidade dentro da gaveta ===== */

/* coluna da miniatura nao pode colapsar */
.header__dropdown.header__dropdown--right .product-container .flex-auto {
  flex: 0 0 64px !important;
  width: 64px !important;
  min-width: 64px !important;
}

.header__dropdown.header__dropdown--right .product-container .flex-auto a {
  display: block;
  width: 64px;
}

.header__dropdown.header__dropdown--right .product-container img {
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
}

/* stepper da gaveta precisa de largura propria */
.header__dropdown.header__dropdown--right .itembox-quantity-control,
.header__dropdown.header__dropdown--right .quantity-controls {
  width: auto !important;
  min-width: 132px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 3px !important;
}

.header__dropdown.header__dropdown--right .itembox-quantity-control input,
.header__dropdown.header__dropdown--right input.quantity-input {
  width: auto !important;
  min-width: 46px !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  padding: 0 4px !important;
  font-size: 14px !important;
}

/* linha do item: nome em cima, controles embaixo */
.header__dropdown.header__dropdown--right .product-container > div > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.header__dropdown.header__dropdown--right .product-container .top-margin-x-small {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* (v21) */
/* ===== v21: contem o texto dentro da gaveta (sem rolagem horizontal) ===== */
.header__dropdown.header__dropdown--right {
  overflow-x: hidden !important;
}

.header__dropdown.header__dropdown--right .product-container,
.header__dropdown.header__dropdown--right .product-container * {
  max-width: 100%;
  min-width: 0;
}

.header__dropdown.header__dropdown--right .product-container > div > div:last-child > a {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal !important;
  float: none !important;
}

.header__dropdown.header__dropdown--right .product-container .product-item {
  float: none !important;
}

/* (v22) */
/* ===== v22: itens da gaveta empilhados a partir do topo ===== */
.header__dropdown.header__dropdown--right > .product-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px;
}

.header__dropdown.header__dropdown--right > .product-container > div {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fbg-line);
}

.header__dropdown.header__dropdown--right > .product-container > div:last-child {
  border-bottom: 0;
}

/* (v23) */
/* ===== v23: cada .product-container e a LINHA de um item ===== */
.header__dropdown.header__dropdown--right > .product-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  gap: 12px;
  margin-top: 0 !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fbg-line);
}

.header__dropdown.header__dropdown--right > .product-container:last-of-type {
  border-bottom: 0;
}

/* empurra as acoes para o rodape mesmo com poucos itens */
.header__dropdown.header__dropdown--right > .flex.flex-row.nowrap-xs {
  margin-top: auto !important;
}

/* (v24) */
/* ===== v24: card "Minha conta" acima do menu + botoes no amarelo FBG ===== */

/* o painel abria atras do menu preto sticky (nav z-index 980) escondendo o botao Entrar */
.header__dropdown.header__dropdown--left {
  z-index: 1150 !important;
}

.header__dropdown.header__dropdown--left.padding-medium {
  min-width: 264px;
  padding: 18px !important;
  border: 1px solid var(--fbg-line) !important;
  border-radius: var(--fbg-radius) !important;
  box-shadow: var(--fbg-shadow-2) !important;
}

.header__dropdown.header__dropdown--left.padding-medium .btn-default {
  min-height: 44px;
  border: none !important;
  border-radius: 999px !important;
  background-color: var(--fbg-yellow) !important;
  color: var(--fbg-ink) !important;
  font-weight: 700 !important;
}

.header__dropdown.header__dropdown--left.padding-medium .btn-default:hover {
  background-color: var(--fbg-yellow-deep) !important;
}

.header__dropdown.header__dropdown--left.padding-medium a.visible-block {
  border-radius: 8px;
  text-align: center;
}

.header__dropdown.header__dropdown--left.padding-medium a.visible-block:hover {
  background: var(--fbg-yellow-soft);
}

/* botoes da gaveta do carrinho no padrao FBG */
.header__dropdown.header__dropdown--right .btn-proceed-checkout,
.btn-proceed-checkout {
  border: none !important;
  border-radius: 999px !important;
  background-color: var(--fbg-yellow) !important;
  color: var(--fbg-ink) !important;
  font-weight: 700 !important;
}

.header__dropdown.header__dropdown--right .btn-proceed-checkout:hover,
.btn-proceed-checkout:hover {
  background-color: var(--fbg-yellow-deep) !important;
}

.header__dropdown.header__dropdown--right .btn-outline {
  border: 1.5px solid var(--fbg-line) !important;
  border-radius: 999px !important;
  color: var(--fbg-text) !important;
  font-weight: 600 !important;
}

.header__dropdown.header__dropdown--right .btn-outline:hover {
  border-color: var(--fbg-ink) !important;
  color: var(--fbg-ink) !important;
}

/* (v25) */
/* ===== v25: barra do menu 100% preta + mega-menu legivel ===== */

/* 1. tira a segunda cor da faixa (o wrapper vinha rgb(51,49,40)) e o filete amarelo */
nav.menu {
  border-top: 0 !important;
}

@media (min-width: 992px) {
  nav.menu > .menu__wrapper,
  nav.menu .menu__wrapper.js-menu__wrapper {
    background-color: transparent !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: center;
  }

  /* 2. mega-menu: cabe na tela, em colunas */
  nav.menu .submenu {
    width: min(980px, calc(100vw - 40px)) !important;
    max-width: none !important;
    overflow: hidden !important;
    border: 1px solid var(--fbg-line) !important;
    border-radius: 0 0 var(--fbg-radius) var(--fbg-radius) !important;
    box-shadow: var(--fbg-shadow-2) !important;
  }

  nav.menu .submenu__content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(64vh, 520px);
    padding: 14px 18px 18px !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
    gap: 2px 20px;
    overflow-y: auto;
  }

  nav.menu .submenu__content > .submenu__item-wrapper {
    flex: 0 0 calc(25% - 15px) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  nav.menu .submenu__item--back {
    display: none !important;
  }

  nav.menu .submenu__item--header {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 6px;
    padding-bottom: 9px !important;
    border-bottom: 1px solid var(--fbg-line);
  }

  nav.menu .submenu a.submenu__item--header {
    color: var(--fbg-ink-2) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  nav.menu .submenu a {
    display: block;
    padding: 7px 8px !important;
    border-radius: 8px;
    color: var(--fbg-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    overflow-wrap: anywhere;
  }

  nav.menu .submenu a:hover {
    background: var(--fbg-yellow-soft) !important;
    color: var(--fbg-ink) !important;
  }
}

/* (v26) */
/* ===== v26: mega-menu em grade de 4 colunas (o tema usava flex-direction: column) ===== */
@media (min-width: 992px) {
  nav.menu .submenu__content {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: min(62vh, 500px) !important;
    align-items: flex-start;
    align-content: flex-start;
  }

  nav.menu .submenu__content > .submenu__item-wrapper {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    height: auto !important;
  }
}

/* (v27) */
/* ===== v27: nomes longos quebram dentro da coluna (tema usava nowrap) ===== */
@media (min-width: 992px) {
  nav.menu .submenu a,
  nav.menu .submenu__item-wrapper a,
  nav.menu .submenu__item-wrapper span {
    white-space: normal !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  nav.menu .submenu__content > .submenu__item-wrapper {
    overflow: hidden !important;
  }
}

/* (v28) */
/* ===== v28: altura livre para itens de duas linhas (nada cortado) ===== */
@media (min-width: 992px) {
  nav.menu .submenu__content > .submenu__item-wrapper {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  nav.menu .submenu a,
  nav.menu .submenu__item-wrapper a,
  nav.menu .submenu__item-wrapper span {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  nav.menu .submenu__content {
    row-gap: 4px;
  }
}

/* (v29) */
/* ===== v29: logo do header fixo, cabecalho amarelo, mega-menu ancorado ===== */

/* 1. o logo circular voltava no cabecalho compacto (img sem id dentro de .header__logo) */
header.header .header__logo img,
.header__logo img,
.js-header__logo img {
  content: url("/catalog/view/theme/vista/stylesheet/fbg-logo.svg") !important;
  width: auto !important;
  height: 34px !important;
  max-width: 160px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain;
}

/* 2. faixa principal do cabecalho em amarelo FBG (logo preto = variante oficial da marca) */
.header__main {
  background: var(--fbg-yellow) !important;
}

.header__main .header__main-text,
.header__main .header__main-text span,
.header__main a {
  color: var(--fbg-ink) !important;
}

.header__main .header__main-text i {
  color: var(--fbg-ink) !important;
}

.header__main .header__main-text:hover {
  background-color: rgba(23, 21, 17, 0.08) !important;
}

/* busca: branca para contrastar com o amarelo */
.header__main input[type="text"],
.js-header__search-container input[type="text"] {
  background: #fff !important;
  border-color: rgba(23, 21, 17, 0.16) !important;
}

.header__main input[type="text"]:focus,
.js-header__search-container input[type="text"]:focus {
  border-color: var(--fbg-ink) !important;
  box-shadow: 0 0 0 3px rgba(23, 21, 17, 0.14) !important;
}

/* botao da lupa e badge do carrinho invertem para preto */
.header__main .header__search-btn,
.header__main button.header__search-btn,
.header__search-btn.dark {
  background-color: var(--fbg-ink) !important;
  color: var(--fbg-yellow) !important;
}

.header__main .header__search-btn:hover,
.header__search-btn.dark:hover {
  background-color: var(--fbg-ink-2) !important;
}

.header__main .notification-badge,
.header__main .notification-badge-custom-color {
  background-color: var(--fbg-ink) !important;
  color: var(--fbg-yellow) !important;
}

/* (v30) */
/* ===== v30: painel ancorado ao item (o tema marca com .right e reposiciona via JS) ===== */
@media (min-width: 992px) {
  nav.menu .submenu.right {
    left: auto !important;
    right: 0 !important;
  }
}


/* ===== v31: CORRECAO CRITICA - gaveta do carrinho em loja com cabecalho fixo =====
   Quando a loja usa o cabecalho fixo do tema (.header__main--fixed), o tema aplica
   transform no .header__main. Um ancestral com transform vira o bloco de contencao
   de qualquer descendente position:fixed, entao a gaveta do carrinho ficava presa
   dentro da faixa do cabecalho (78px) e o cliente nao alcancava o botao Finalizar.
   Altura em unidades de viewport resolve nos dois cenarios. */
.header__dropdown.header__dropdown--right {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

/* com o carrinho aberto, o cabecalho fixo fica ancorado no topo para a gaveta
   nao subir junto caso o tema esconda o cabecalho durante a rolagem */
body.fbg-cart-open .header__main--fixed {
  transform: translateY(0) !important;
}


/* ===== v32: CORRECAO - carrinho embaralhado quando aberto na tela do carrinho =====
   O tema tem DUAS variantes de linha de item no dropdown do carrinho:
     fora da tela do carrinho -> div.top-margin-large.product-container
     na tela do carrinho      -> a.flex.flex-row.middle-xs.nowrap-xs.top-margin-large
   A regra de rodape da v23 usava .flex.flex-row.nowrap-xs, que casava tambem com a
   variante <a>: cada item ganhava margin-top:auto, os itens se espalhavam pelo meio
   da gaveta e os botoes Ver orcamento / Finalizar apareciam no topo.
   Agora o rodape e identificado pela tag <div> (e pelo botao que ele contem),
   e as linhas de item ficam empilhadas a partir do topo. */

/* linhas de item (variante da tela do carrinho): empilhadas, sem esticar */
.header__dropdown.header__dropdown--right > a.flex.flex-row.nowrap-xs {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fbg-line);
}

.header__dropdown.header__dropdown--right > a.flex.flex-row.nowrap-xs:last-of-type {
  border-bottom: 0;
}

.header__dropdown.header__dropdown--right > a.flex.flex-row.nowrap-xs img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  border-radius: 8px;
  background: var(--fbg-bg);
}

/* rodape de acoes: somente a linha <div>, que e a que carrega os botoes */
.header__dropdown.header__dropdown--right > div.flex.flex-row.nowrap-xs {
  order: 9 !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--fbg-line);
}

/* reforco independente de markup: a linha que contem o botao Finalizar vai ao rodape */
.header__dropdown.header__dropdown--right > *:has(> .btn-proceed-checkout) {
  order: 9 !important;
  margin-top: auto !important;
}


/* ===== v33: fundo do carrinho sem desfoque =====
   O desfoque (backdrop-filter) deixava a tela atras do carrinho com aspecto
   embacado, e o proprio tema ja aplica um escurecimento (.overlay-black-1).
   Fica apenas o escurecimento, mais leve e sem custo de renderizacao. */
.fbg-cart-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(23, 21, 17, 0.38) !important;
}


/* ===== v34: Termos & Condicoes do checkout mais claros =====
   O tema mostrava o texto vermelho "E necessario concordar..." ANTES de o cliente
   fazer qualquer coisa, e a caixa de marcar era pequena. Agora: caixa grande,
   destaque, e o aviso so aparece quando o cliente tenta avancar sem marcar. */
label.checkbox:has(> input[name="agree"]) {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--fbg-line);
  border-radius: 12px;
  background: #fff;
  margin: 8px 0 14px;
  transition: border-color .2s, background-color .2s;
}
label.checkbox:has(> input[name="agree"]) > input.checkbox-entry {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  margin: 0 !important;
  accent-color: var(--fbg-yellow);
  cursor: pointer;
}
label.checkbox:has(> input[name="agree"]) .checkbox-text { font-weight: 700; }
#js-checkbox-agree:not(:has(a)) { display: none !important; }
label.checkbox.fbg-agree-missing { border-color: #d0342c !important; background: #fff6f5 !important; animation: fbgShake .35s; }
label.checkbox.fbg-agree-missing #js-checkbox-agree:not(:has(a)) { display: inline !important; }
@keyframes fbgShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }


/* ===== v35: Termos & Condicoes - ajuste a estrutura real do tema =====
   O input do tema fica oculto (a caixinha e desenhada pelo tema), o texto
   "Li e concordo com" e um span flex, e o aviso vermelho fica num
   div.left-padding-large que tambem contem o link dos Termos. */
label.checkbox:has(> input[name="agree"]) {
  flex-wrap: wrap;
  cursor: pointer;
}
label.checkbox:has(> input[name="agree"]) > .checkbox-text {
  flex: 1 1 100%;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  white-space: normal;
  font-size: 15px;
}
label.checkbox:has(> input[name="agree"]) > .checkbox-text a {
  display: inline !important;
  width: auto !important;
  text-decoration: underline;
}
/* aviso oculto ate o cliente tentar avancar sem marcar */
label.checkbox:has(> input[name="agree"]) > div.left-padding-large {
  display: none !important;
  flex: 1 1 100%;
  padding-left: 0 !important;
  margin-top: 6px;
}
label.checkbox.fbg-agree-missing > div.left-padding-large {
  display: block !important;
}
label.checkbox.fbg-agree-missing #js-checkbox-agree {
  display: inline !important;
  color: #b3261e !important;
  font-weight: 600;
}


/* ===== v36: estado de erro dos Termos com especificidade acima das regras base (v34/v35) ===== */
label.checkbox.fbg-agree-missing:has(> input[name="agree"]) { border-color: #d0342c !important; background: #fff6f5 !important; }
label.checkbox.fbg-agree-missing:has(> input[name="agree"]) > div.left-padding-large { display: block !important; }
label.checkbox.fbg-agree-missing:has(> input[name="agree"]) #js-checkbox-agree { display: inline !important; color: #b3261e !important; font-weight: 600; }


/* ===== v37: pedido minimo visivel dentro do carrinho e na tela de orcamento =====
   Abaixo do minimo, o "Finalizar" da gaveta voltava para o orcamento sem explicar nada. */
.header__dropdown.header__dropdown--right > .fbg-min-aviso {
  order: 8; flex: 0 0 auto; margin-top: auto;
  background: #fff4d6; border: 1.5px solid #f2c14e; border-radius: 12px;
  padding: 12px 14px; font-size: 14px; line-height: 1.35; color: #4a3b00;
}
.header__dropdown.header__dropdown--right > .fbg-min-aviso b { color: #171511; }
.header__dropdown.header__dropdown--right > .fbg-min-aviso span { display: block; margin-top: 4px; }
.header__dropdown.header__dropdown--right > .fbg-min-aviso + div.flex.flex-row.nowrap-xs { margin-top: 0 !important; }
.header__dropdown.header__dropdown--right .btn-proceed-checkout.fbg-finalizar-bloqueado { background: #e6e2d8 !important; color: #7a746a !important; }
.min-value-container > div { background: #fff4d6; border: 1.5px solid #f2c14e !important; border-radius: 12px; padding: 14px 16px !important; margin-top: 14px; }
.min-value-container .text-gray { color: #4a3b00 !important; font-size: 15px !important; }
.min-value-container b { color: #171511; font-size: 17px; }
.min-value-container .progress-bar-container { background: #f2e7c9; border-radius: 999px; height: 8px; overflow: hidden; }
.min-value-container .progress-bar { background: #FFC805; height: 8px; }
.fbg-min-hint { text-align: center; color: #b3261e; font-weight: 600; font-size: 13px; margin-top: 8px; }