.navbar-brand-item {
  min-height: 75px;
}

/* Mobile: reduz a logo para o menu sanduíche encaixar ao lado dela (padrão Mark Audio) */
@media (max-width: 575.98px) {
  .navbar > .container {
    flex-wrap: nowrap;
  }

  .navbar .nav.align-items-center {
    flex-wrap: nowrap;
  }

  .navbar-brand {
    margin-right: .5rem !important;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }

  .navbar-brand-item {
    min-height: 50px;
    width: auto;
  }

  .navbar-toggler {
    margin-left: .5rem !important;
  }
}

.card-img {
  max-width: 170px;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-theme {
  color: #ffcb04 !important;
}

.bg-theme {
  background-color: #ffcb04;
  color: #FFF;
}

.btn-theme {
  background-color: #ffcb04;
  color: #000;
}

.btn-theme:hover {
  background-color: var(--bs-primary);
  color: #FFF;
}

.btn-off {
  background-color: #222;
  color: #FFF;
}

.cookies {
  position: fixed;
  bottom: 20px;
  left: -370px;
  max-width: 345px;
  width: 100%;
  background: #FFF;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: left 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.cookies.show {
  left: 20px;
}

.cookies .info {
  margin-top: 16px;
}
.cookies .info p {
  color: #333;
  font-size: 12px;
  margin: 15px auto;
}

.cookies .info p a {
  text-decoration: none;
}

.cookies .info p a:hover {
  text-decoration: underline;
}

.cookies .btns {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cookies .btns .button {
  border: none;
  color: #FFF;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  width: calc(100% / 2 - 10px);
  transition: all 0.2s ease;
}

/* Home - Superfícies */
.surface-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
}

.surface-icon-mask {
  display: block;
  width: 52px;
  height: 52px;
  background-color: var(--bs-primary);
  opacity: .9;
  -webkit-mask: var(--surface-icon-url) center / contain no-repeat;
  mask: var(--surface-icon-url) center / contain no-repeat;
}

.surface-icon-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--bs-primary);
  font-size: 2.65rem;
  line-height: 1;
}

.surface-icon .bi-grid-3x3-gap {
  font-size: 2.5rem;
}

.surface-icon .bi-brush {
  font-size: 2.75rem;
}

.surface-icon .bi-paint-bucket {
  font-size: 2.7rem;
}

/* Produtos - filtros */
.filter-color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .5rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 50%;
  vertical-align: -3px;
}


/* Cores */
.colors-family-section {
  overflow: hidden;
}

.colors-card {
  border-radius: .5rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.colors-card:hover {
  border-color: rgba(var(--bs-primary-rgb), .35) !important;
  box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.colors-card-swatch {
  display: block;
  min-height: 230px;
}

.colors-card-name {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 575.98px) {
  .colors-card-swatch {
    min-height: 240px;
  }
}


.surface-icon-outline {
  display: block;
  width: 52px;
  height: 52px;
  color: var(--bs-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Produto - destaques */
.product-feature-item {
  height: 100%;
  text-align: center;
}

.product-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto .85rem;
  border-radius: 50%;
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), .1);
  font-size: 1.85rem;
  line-height: 1;
}

.product-feature-title {
  display: block;
  margin-bottom: .35rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
}

.product-feature-item p {
  max-width: 150px;
  margin-right: auto;
  margin-left: auto;
  font-size: .82rem;
  line-height: 1.35;
}

@media (max-width: 575.98px) {
  .product-feature-list {
    --bs-gutter-x: .75rem;
  }

  .product-feature-icon {
    width: 48px;
    height: 48px;
    font-size: 1.55rem;
  }

  .product-feature-title {
    font-size: .78rem;
  }

  .product-feature-item p {
    font-size: .72rem;
  }
}


/* Produto - seletor de cores */
.product-color-options {
  gap: .75rem;
}

.product-color-options .product-color-option {
  margin-right: 0 !important;
}

.nav-tabs-radio.product-color-options .nav-link label.btn-icon,
.product-color-options .btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px;
  padding: 4px !important;
  border: 2px solid transparent;
  border-radius: 50%;
}

.nav-tabs-radio.product-color-options .nav-link label.btn-icon span,
.product-color-options .btn-icon span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 42px;
  min-height: 42px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 50%;
}

.product-color-options .btn-check:checked + .btn {
  border-color: transparent !important;
  box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), .22);
}

/* Produto - remove borda preta original do template no swatch selecionado */
.nav-tabs-radio.product-color-options .nav-link .btn-check:checked + .btn,
.nav-tabs-radio.product-color-options .nav-link .btn-check:focus + .btn,
.nav-tabs-radio.product-color-options .nav-link .btn:focus,
.nav-tabs-radio.product-color-options .nav-link .btn:active {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), .22) !important;
}

.nav-tabs-radio.product-color-options .nav-link .btn-check:checked + .btn span {
  border-color: rgba(0, 0, 0, .14) !important;
}


/* Produto - bloco de cores (faixa de largura total): imagem da embalagem
   a esquerda, carrossel com poucas cores visiveis, setas no canto direito */
.product-color-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}

.product-color-media {
  flex: 0 0 auto;
}

.product-color-media img {
  width: 150px;
  max-width: 40vw;
  height: auto;
}

.product-color-main {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 35rem;
}

.product-color-carousel {
  max-width: 100%;
}

.product-color-navigation {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.product-color-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .55rem .45rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.product-color-scroll::-webkit-scrollbar {
  display: none;
}

.product-color-scroll .product-color-options {
  display: inline-flex;
  flex-wrap: nowrap;
  min-width: max-content;
}

.product-color-scroll .product-color-option {
  flex: 0 0 auto;
}

/* Setas de navegacao das cores: mesmo padrao das demais setas da pagina
   (nas demais setas o estado "desabilitada" nao esmaece, apenas impede o clique) */
.product-color-arrow:disabled {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .product-color-scroll {
    max-width: 100%;
  }

  .product-color-block {
    gap: 1rem;
  }

  .product-color-main {
    flex: 1 1 auto;
    max-width: none;
  }

  .product-color-media img {
    width: 96px;
  }
}

/* Produto - pontos clicáveis da imagem */
.product-hero-image {
  min-height: 420px;
}

.product-hero-image > img {
  position: relative;
  z-index: 1;
}

.product-hotspot-wrap {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
}

.product-hotspot {
  position: relative;
  width: 42px;
  height: 42px;
}



.product-hotspot-1 {
  top: 18%;
  left: 18%;
  transform: translate(-50%, -50%);
}

.product-hotspot-2 {
  top: 34%;
  right: 8%;
  transform: translate(50%, -50%);
}

.product-hotspot-3 {
  bottom: 24%;
  left: 22%;
  transform: translate(-50%, 50%);
}

.product-hotspot-4 {
  right: 12%;
  bottom: 12%;
  transform: translate(50%, 50%);
}





@media (max-width: 575.98px) {
  .product-hero-image {
    min-height: 340px;
  }

  .product-hotspot-wrap,
  .product-hotspot {
    width: 36px;
    height: 36px;
  }
}

/* Produto - cards de embalagens */
.product-package-title {
  font-size: .95rem;
  line-height: 1.25;
}

/* Produto - setas de carrosseis */
.product-carousel-arrow {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}


/* Produto - nome da cor selecionada */
.product-color-name {
  font-size: .95rem;
}


/* Produto - texto rico de especificações (campo itemEspecificacoes) */
.product-spec-richtext {
  margin-top: 2rem;
  color: var(--bs-body-color);
}

.product-spec-subtitle,
.product-spec-richtext h6 {
  margin: 1.35rem 0 .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-heading-color, #212529);
}

.product-spec-richtext .product-spec-subtitle:first-child,
.product-spec-richtext h6:first-child {
  margin-top: 0;
}

.product-spec-richtext p {
  margin-bottom: .65rem;
  color: var(--bs-secondary-color, #6c757d);
}


/* Produto - ferramentas de pintura (dentro das especificações) */
.product-tools-list {
  margin-top: .25rem;
}

.product-tool-item {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-weight: 500;
  color: var(--bs-body-color);
}

.product-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
}


/* ===== Header / barra de menu fixa (movido do inline) ===== */
	/* Barra de menu fixa no topo */
	:root { --telha-menubar-h: 46px; }
	@media (max-width: 991.98px) { :root { --telha-menubar-h: 42px; } }

	.telha-menubar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1040;
		display: flex;
		align-items: center;
		min-height: var(--telha-menubar-h);
		background-color: var(--bs-primary);
	}
	.telha-menubar > .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.telha-menubar-nav {
		display: flex;
		align-items: center;
		gap: 0;
		list-style: none;
		margin: 0 0 0 -.85rem;
		padding: 0;
	}
	.telha-menubar-nav > li { position: relative; display: flex; align-items: center; }
	.telha-menubar-nav > li + li::before {
		content: "";
		display: block;
		width: 1px;
		height: 15px;
		margin: 0 .4rem;
		background-color: rgba(255, 255, 255, .4);
	}
	.telha-menubar-nav > li > a {
		color: #fff;
		font-size: .8rem;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		text-decoration: none;
		display: flex;
		align-items: center;
		height: var(--telha-menubar-h);
		padding: 0 .85rem;
		transition: background-color .18s ease, color .18s ease;
	}
	.telha-menubar-nav > li > a:hover,
	.telha-menubar-nav > li.show > a {
		background-color: #fff;
		color: var(--bs-primary);
	}
	.telha-menubar-contact {
		display: flex;
		align-items: center;
		gap: .5rem;
		color: #fff;
		font-size: .8rem;
	}
	.telha-menubar-contact a { color: #fff; font-weight: 600; text-decoration: underline; }
	body { padding-top: var(--telha-menubar-h); }

	/* Dropdown de PRODUTOS dentro da barra fixa (fora do navbar, precisa do min-width) */
	.telha-menubar-nav .dropdown-menu-size-lg { min-width: 35rem; }
	.telha-menubar-nav .dropdown-menu { top: calc(100% + 10px) !important; transform: none !important; }
	.telha-menubar-nav .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
	.telha-menubar-nav .dropdown-menu-center.dropdown-menu-size-lg { left: 0; right: auto; }
	.dropdown-menu-contact { min-width: 15rem; }
	.dropdown-menu-contact .dropdown-item {
		font-size: 1rem;
		font-weight: 600;
		padding: .25rem .75rem;
	}

	/* Menu do navbar: usa apenas no mobile (no desktop o menu fica na barra fixa) */
	@media (min-width: 992px) {
		.navbar .navbar-collapse.telha-mobile-menu { display: none !important; }
	}


/* ===== Footer / ações flutuantes (movido do inline) ===== */
.float-actions{position:fixed;right:40px;top:220px;z-index:99;display:flex;flex-direction:column;gap:.75rem}
.float-actions a{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;color:#fff;text-decoration:none;border-radius:10%;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .3s ease-in-out,transform .2s ease}
.float-actions a:hover{transform:translateX(-2px)}
.float-actions a .fa-ico{font-size:1.6rem;line-height:1}
.float-actions .fa-wa{background:#25d366}
.float-actions .fa-wa:hover{background:#1ebe5b}
.float-actions .fa-sac{background:var(--bs-primary,#b92523)}
.float-actions .fa-sac:hover{background:var(--bs-link-hover-color,#b92523)}
.float-actions .fa-label{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:10px;background:#212529;color:#fff;font-size:.8rem;padding:4px 10px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}
.float-actions a:hover .fa-label,.float-actions a:focus-visible .fa-label{opacity:1;visibility:visible}
@media (max-width: 767.98px){
  .float-actions{right:10px;top:150px;gap:.6rem}
  .float-actions a{width:52px;height:52px}
  .float-actions a .fa-ico{font-size:1.35rem}
}
@media (prefers-reduced-motion: reduce){
  .float-actions a{transition:none}
}


/* ===== Sobre (movido do inline) ===== */
		.sobre-hero-media { position: relative; }
		.sobre-hero-media img { filter: drop-shadow(0 24px 48px rgba(0,0,0,.16)); }
		.sobre-seal {
			position: absolute; top: -18px; right: -8px;
			width: 108px; height: 108px; border-radius: 50%;
			background: var(--bs-primary); color: #fff;
			display: flex; flex-direction: column; align-items: center; justify-content: center;
			text-align: center; line-height: 1.05; box-shadow: 0 12px 30px rgba(var(--bs-primary-rgb), .35);
		}
		.sobre-seal .n { font-size: 1.7rem; font-weight: 700; }
		.sobre-seal .t { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }

		.sobre-stats { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }
		.sobre-stat .n { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1; }
		.sobre-stat .l { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }

		.sobre-media-frame { border-radius: 1rem; overflow: hidden; }
		.sobre-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

		.sobre-quote { border-left: 4px solid var(--bs-primary); }

		.sobre-value .icon {
			flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
			background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary);
			display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
		}

		@media (max-width: 575.98px) {
			.sobre-seal { width: 84px; height: 84px; top: -12px; right: 0; }
			.sobre-seal .n { font-size: 1.3rem; }
		}
	

/* ===== Header / botão Televendas ===== */
.telha-menubar-contact .telha-televendas-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  color: var(--bs-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  padding: .38rem .8rem;
  border-radius: var(--bs-border-radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.telha-menubar-contact .telha-televendas-btn i { font-size: .85rem; }
.telha-menubar-contact .telha-televendas-btn:hover,
.telha-menubar-contact .telha-televendas-btn:focus-visible {
  background: var(--bs-primary);
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

/* ===== Escala global dos títulos =====
   Texto em CAIXA ALTA ocupa mais largura horizontal. Este único parâmetro
   reduz/expande TODOS os títulos do site proporcionalmente (1 = original).
   Ajuste apenas --heading-scale para afetar tudo. */
:root { --heading-scale: .85; }

h1, .h1 { font-size: calc((1.485rem + 2.82vw) * var(--heading-scale)); }
h2, .h2 { font-size: calc((1.4rem + 1.8vw) * var(--heading-scale)); }
h3, .h3 { font-size: calc((1.363rem + 1.356vw) * var(--heading-scale)); }
h4, .h4 { font-size: calc((1.325rem + 0.9vw) * var(--heading-scale)); }
h5, .h5 { font-size: calc((1.275rem + 0.3vw) * var(--heading-scale)); }
h6, .h6 { font-size: calc(1.2rem * var(--heading-scale)); }

.display-1 { font-size: calc((1.725rem + 5.7vw) * var(--heading-scale)); }
.display-2 { font-size: calc((1.675rem + 5.1vw) * var(--heading-scale)); }
.display-3 { font-size: calc((1.625rem + 4.5vw) * var(--heading-scale)); }
.display-4 { font-size: calc((1.575rem + 3.9vw) * var(--heading-scale)); }
.display-5 { font-size: calc((1.525rem + 3.3vw) * var(--heading-scale)); }
.display-6 { font-size: calc((1.475rem + 2.7vw) * var(--heading-scale)); }

@media (min-width: 1200px) {
  h1, .h1 { font-size: calc(3.6rem * var(--heading-scale)); }
  h2, .h2 { font-size: calc(2.75rem * var(--heading-scale)); }
  h3, .h3 { font-size: calc(2.38rem * var(--heading-scale)); }
  h4, .h4 { font-size: calc(2rem * var(--heading-scale)); }
  h5, .h5 { font-size: calc(1.5rem * var(--heading-scale)); }
  .display-1 { font-size: calc(6rem * var(--heading-scale)); }
  .display-2 { font-size: calc(5.5rem * var(--heading-scale)); }
  .display-3 { font-size: calc(5rem * var(--heading-scale)); }
  .display-4 { font-size: calc(4.5rem * var(--heading-scale)); }
  .display-5 { font-size: calc(4rem * var(--heading-scale)); }
  .display-6 { font-size: calc(3.5rem * var(--heading-scale)); }
}

/* Utility: neutraliza uppercase herdado (ex.: botões dentro de área text-uppercase) */
.text-transform-none { text-transform: none !important; }

/* Bloco de Filtros: títulos com fonte menor (ajustável por um só parâmetro) */
:root { --filter-title-size: 1rem; }
#offcanvasSidebar .offcanvas-title,
#offcanvasSidebar .accordion-button { font-size: var(--filter-title-size); }

/* Bloco de Filtros: opções (labels) com fonte menor */
:root { --filter-option-size: .875rem; }
#offcanvasSidebar .form-check-label { font-size: var(--filter-option-size); }

/* Título da página /produtos — tamanho próprio (ajustável) */
:root { --page-title-size: 2rem; }
h1.page-title-produtos { font-size: var(--page-title-size); }

/* Mega-menu PRODUTOS: coluna de categorias mais larga no desktop (>=1200px), onde o layout tem 2 colunas */
@media (min-width: 1200px) {
  .telha-menubar-nav .dropdown-menu-size-lg { min-width: 44rem; max-width: calc(100vw - 2rem); }
}


/* Cards de produto: swatches de cor (atributo "Cores"), padrão visual dos cards Perfmax */
.color-check-radio .form-check-input {
  width: 1.5em;
  height: 1.5em;
  background-image: none;
  border: 3px solid var(--bs-body-bg);
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.color-check-radio .form-check-input:checked {
  border: 3px solid #fff !important;
  box-shadow: 0 0.125rem 0.25rem rgba(29, 58, 83, .3);
}
.color-check-radio > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}

/* Filtro /produtos: swatch de cor antes do nome (atributo "Cores") — padrão Perfmax */
.filter-color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .5rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 50%;
  vertical-align: -3px;
}

/* Produto — seletor de cores (swatches), padrão da página de produto Perfmax */
/* Produto - seletor de cores */
.product-color-options {
  gap: .75rem;
}

.product-color-options .product-color-option {
  margin-right: 0 !important;
}

.nav-tabs-radio.product-color-options .nav-link label.btn-icon,
.product-color-options .btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px;
  padding: 4px !important;
  border: 2px solid transparent;
  border-radius: 50%;
}

.nav-tabs-radio.product-color-options .nav-link label.btn-icon span,
.product-color-options .btn-icon span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 42px;
  min-height: 42px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 50%;
}

.product-color-options .btn-check:checked + .btn {
  border-color: transparent !important;
  box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), .22);
}

/* Produto - remove borda preta original do template no swatch selecionado */
.nav-tabs-radio.product-color-options .nav-link .btn-check:checked + .btn,
.nav-tabs-radio.product-color-options .nav-link .btn-check:focus + .btn,
.nav-tabs-radio.product-color-options .nav-link .btn:focus,
.nav-tabs-radio.product-color-options .nav-link .btn:active {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), .22) !important;
}

.nav-tabs-radio.product-color-options .nav-link .btn-check:checked + .btn span {
  border-color: rgba(0, 0, 0, .14) !important;
}


/* Produto - bloco de cores (faixa de largura total): imagem da embalagem
   a esquerda, carrossel com poucas cores visiveis, setas no canto direito */
.product-color-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}

.product-color-media {
  flex: 0 0 auto;
}

.product-color-media img {
  width: 150px;
  max-width: 40vw;
  height: auto;
}

.product-color-main {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 35rem;
}

.product-color-carousel {
  max-width: 100%;
}

.product-color-navigation {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.product-color-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .55rem .45rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.product-color-scroll::-webkit-scrollbar {
  display: none;
}

.product-color-scroll .product-color-options {
  display: inline-flex;
  flex-wrap: nowrap;
  min-width: max-content;
}

.product-color-scroll .product-color-option {
  flex: 0 0 auto;
}

/* Setas de navegacao das cores: mesmo padrao das demais setas da pagina
   (nas demais setas o estado "desabilitada" nao esmaece, apenas impede o clique) */
.product-color-arrow:disabled {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .product-color-scroll {
    max-width: 100%;
  }

  .product-color-block {
    gap: 1rem;
  }

  .product-color-main {
    flex: 1 1 auto;
    max-width: none;
  }

  .product-color-media img {
    width: 96px;
  }
}


/* Cards de produto: tags dos atributos de texto (padrão tag de e-commerce) */
.product-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .35rem;
  margin-top: .7rem;
  margin-bottom: 1.5rem;
}
.product-tag-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-body-color, #212529);
  margin-right: .1rem;
}
.product-tag {
  display: inline-block;
  padding: .2rem .6rem;
  font-size: .8rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--bs-primary, #b92523);
  background-color: rgba(var(--bs-primary-rgb, 185, 37, 35), .1);
  border: 1px solid rgba(var(--bs-primary-rgb, 185, 37, 35), .35);
  border-radius: 999px;
}
.product-tag-more {
  color: var(--bs-secondary-color, #6c757d);
  background-color: transparent;
  border-color: rgba(0, 0, 0, .15);
}

/* Produto — atributos de texto no padrão do bloco de cores (imagem + título + tags) */
.product-attribute-block {
  align-items: center;
}
.product-attribute-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.product-attribute-tags .product-tag {
  padding: .4rem 1rem;
  font-size: 1rem;
}

/* ===== Sobre — cards das linhas de produto ===== */
.sobre-linha {
  border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sobre-linha img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sobre-linha .h6 {
  color: var(--bs-body-color);
  transition: color .2s ease;
}
.sobre-linha:hover {
  transform: translateY(-2px);
}
.sobre-linha:hover .h6 {
  color: var(--bs-primary);
}

/* Fullbanner (home) — mantém a proporção da arte (1920x750) no desktop/tablet,
   sem corte em nenhuma largura. No mobile (<768px) a imagem própria define a altura. */
@media (min-width: 768px) {
  .banner-hero {
    aspect-ratio: 1920 / 750;
  }
}