/* ================================================================
   HomeCenter — Filter Sprites
   Sprite sheets 50×50 para ilustrar opções de filtro (Material,
   Acabamentos, Cores). Tamanhos não têm sprite.
   Sprites em image/catalog/hc_filters/.
   ================================================================ */

.sprite-filter {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 4px;
}

/* PNGs estão em alta resolução (~1400-1600px de largura).
   Forçamos background-size para que cada célula caiba em 50px,
   independente do tamanho real do PNG (mantém nitidez em retina). */

/* ---- ACABAMENTO DA SUPERFICIE (12 WEBPs individuais, dexco asset_v=20260519b) ----
   Substituiu o antigo sprite sheet acabamentos_a1.png pros valores Acetinado/Brilhante/
   Hard/Lux/Madeira Leve/Matte/Matte-Lux/Mix/Natural/Polido/Rustico/Satin (filter_group 42).
   Legacy classes do Acabamento Lateral (.acabamento-bold, .acabamento-retificado)
   permanecem mais abaixo usando o sprite sheet velho (filter_group 72). */
.sprite-acabamento {
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.acabamento-acetinado{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/acetinado.webp');}
.acabamento-brilhante{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/brilhante.webp');}
.acabamento-hard{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/hard.webp');}
.acabamento-lux{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/lux.webp');}
.acabamento-madeira-leve{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/madeira-leve.webp');}
.acabamento-matte{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/matte.webp');}
.acabamento-matte-lux{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/matte-lux.webp');}
.acabamento-mix{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/mix.webp');}
.acabamento-natural{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/natural.webp');}
.acabamento-polido{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/polido.webp');}
.acabamento-rustico{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/rustico.webp');}
.acabamento-satin{background-image:url('../../../../../image/catalog/hc_filters/icons/acabamento/satin.webp');}

/* Legacy: Acabamento Lateral (filter_group 72) ainda usa sprite sheet antigo.
   Mantemos só as 2 classes que estao no DB pra nao quebrar — bold e retificado. */
.acabamento-bold,
.acabamento-retificado {
  background-image: url('../../../../../image/catalog/hc_filters/acabamentos_a1.png');
  background-size: 250px auto;
}
.acabamento-retificado { background-position: -100px -150px; }
.acabamento-bold       { background-position: -150px -150px; }

/* ---- MATERIAIS (5×3) ---- */
.sprite-material {
  background-image: url('../../../../../image/catalog/hc_filters/materiais_a1.png');
  background-size: 250px auto;  /* 5 colunas × 50px */
}
.material-ceramica             { background-position:   0px    0px; }
.material-porcelanato          { background-position: -50px    0px; }
.material-cimento-cimenticio   { background-position: -100px   0px; }
.material-concreto             { background-position: -150px   0px; }
.material-marmore              { background-position: -200px   0px; }

.material-granito              { background-position:   0px  -50px; }
.material-ardosia              { background-position: -50px  -50px; }
.material-quartzito            { background-position: -100px -50px; }
.material-travertino           { background-position: -150px -50px; }
.material-pedra-mineira        { background-position: -200px -50px; }

.material-canjiquinha          { background-position:   0px  -100px; }
.material-madeira-macica       { background-position: -50px  -100px; }
.material-taco                 { background-position: -100px -100px; }
.material-assoalho             { background-position: -150px -100px; }
.material-vinilico             { background-position: -200px -100px; }

/* ---- CORES (10×9, 89 cores; cells 300×300 no source, exibidas em 50×50) ----
   Asset: dexco_cores_a1.webp — 1.5MB (vs 12.5MB do PNG raw), b1 re-render
   com hex codes mais saturados/realistas. Mesmo grid e mesmos slugs do a1
   original, então CSS positions abaixo e oc_hc_filter_sprite NÃO mudam. */
.sprite-cor {
  background-image: url('../../../../../image/catalog/hc_filters/dexco_cores_a1.webp');
  background-size: 500px auto;  /* 10 colunas × 50px display (source real é 3000×2700) */
}
.cor-aco-polido{background-position:0 0;}
.cor-almond{background-position:-50px 0;}
.cor-amendoa{background-position:-100px 0;}
.cor-amendoa-fosco{background-position:-150px 0;}
.cor-antracite{background-position:-200px 0;}
.cor-azul{background-position:-250px 0;}
.cor-barbante{background-position:-300px 0;}
.cor-bege{background-position:-350px 0;}
.cor-black{background-position:-400px 0;}
.cor-black-matte{background-position:-450px 0;}
.cor-black-noir{background-position:0 -50px;}
.cor-blue{background-position:-50px -50px;}
.cor-branco{background-position:-100px -50px;}
.cor-branco-fosco{background-position:-150px -50px;}
.cor-brown{background-position:-200px -50px;}
.cor-brown-matte{background-position:-250px -50px;}
.cor-bruto{background-position:-300px -50px;}
.cor-camurca{background-position:-350px -50px;}
.cor-canela{background-position:-400px -50px;}
.cor-caramelo{background-position:-450px -50px;}
.cor-carrara{background-position:0 -100px;}
.cor-chumbo{background-position:-50px -100px;}
.cor-cinza{background-position:-100px -100px;}
.cor-cinza-fosco{background-position:-150px -100px;}
.cor-cobre{background-position:-200px -100px;}
.cor-colorido{background-position:-250px -100px;}
.cor-concrete{background-position:-300px -100px;}
.cor-corten{background-position:-350px -100px;}
.cor-cream{background-position:-400px -100px;}
.cor-creme{background-position:-450px -100px;}
.cor-cromado{background-position:0 -150px;}
.cor-dark-antracite{background-position:-50px -150px;}
.cor-dark-brown{background-position:-100px -150px;}
.cor-dark-gray{background-position:-150px -150px;}
.cor-dark-green{background-position:-200px -150px;}
.cor-dark-grey{background-position:-250px -150px;}
.cor-dark-purple{background-position:-300px -150px;}
.cor-darkblue{background-position:-350px -150px;}
.cor-dynamic-blue{background-position:-400px -150px;}
.cor-dynamic-gold{background-position:-450px -150px;}
.cor-dynamic-lilac{background-position:0 -200px;}
.cor-dynamic-peach{background-position:-50px -200px;}
.cor-dynamic-white{background-position:-100px -200px;}
.cor-ebano{background-position:-150px -200px;}
.cor-ebano-fosco{background-position:-200px -200px;}
.cor-estanho{background-position:-250px -200px;}
.cor-gold{background-position:-300px -200px;}
.cor-gold-matte{background-position:-350px -200px;}
.cor-gray{background-position:-400px -200px;}
.cor-green{background-position:-450px -200px;}
.cor-greige{background-position:0 -250px;}
.cor-grey{background-position:-50px -250px;}
.cor-inox{background-position:-100px -250px;}
.cor-kale-green{background-position:-150px -250px;}
.cor-marquina{background-position:-200px -250px;}
.cor-marrom{background-position:-250px -250px;}
.cor-marrom-fosco{background-position:-300px -250px;}
.cor-mix{background-position:-350px -250px;}
.cor-mocha{background-position:-400px -250px;}
.cor-multicolorido{background-position:-450px -250px;}
.cor-noce{background-position:0 -300px;}
.cor-off-white{background-position:-50px -300px;}
.cor-opala{background-position:-100px -300px;}
.cor-orange{background-position:-150px -300px;}
.cor-pink{background-position:-200px -300px;}
.cor-pistache{background-position:-250px -300px;}
.cor-preto{background-position:-300px -300px;}
.cor-preto-fosco{background-position:-350px -300px;}
.cor-red{background-position:-400px -300px;}
.cor-red-gold{background-position:-450px -300px;}
.cor-salvia{background-position:0 -350px;}
.cor-soft-antracite{background-position:-50px -350px;}
.cor-soft-bege{background-position:-100px -350px;}
.cor-soft-blue{background-position:-150px -350px;}
.cor-soft-gray{background-position:-200px -350px;}
.cor-soft-green{background-position:-250px -350px;}
.cor-soft-grey{background-position:-300px -350px;}
.cor-soft-pink{background-position:-350px -350px;}
.cor-soft-white{background-position:-400px -350px;}
.cor-softbege{background-position:-450px -350px;}
.cor-stone-especial{background-position:0 -400px;}
.cor-summer-gold{background-position:-50px -400px;}
.cor-taupe{background-position:-100px -400px;}
.cor-terracota{background-position:-150px -400px;}
.cor-verde{background-position:-200px -400px;}
.cor-vermelho{background-position:-250px -400px;}
.cor-volcano{background-position:-300px -400px;}
.cor-white{background-position:-350px -400px;}
.cor-yellow{background-position:-400px -400px;}

/* ---- AMBIENTES INDICADOS (36 icons SVG individuais, dexco asset_v=20260519b) ----
   Diferente de cores/materiais/acabamentos (sprite sheet), cada ambiente eh um SVG
   separado em /image/catalog/hc_filters/icons/ambientes/. Isso permite icons
   detalhados sem dependencia de grid fixo. */
.sprite-ambiente {
  background-image: none; /* override do sprite-cor base; cada .ambiente-* injeta sua url */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.ambiente-ambientes-comerciais-alto-trafego{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/ambientes-comerciais-alto-trafego.svg');}
.ambiente-ambientes-comerciais-medio-trafego{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/ambientes-comerciais-medio-trafego.svg');}
.ambiente-ambientes-internos{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/ambientes-internos.svg');}
.ambiente-area-externa{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/area-externa.svg');}
.ambiente-area-gourmet{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/area-gourmet.svg');}
.ambiente-areas-com-grande-circulacao{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/areas-com-grande-circulacao.svg');}
.ambiente-areas-comerciais-com-grande-circulacao{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/areas-comerciais-com-grande-circulacao.svg');}
.ambiente-areas-comerciais-de-media-circulacao{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/areas-comerciais-de-media-circulacao.svg');}
.ambiente-areas-internas-e-secas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/areas-internas-e-secas.svg');}
.ambiente-areas-residenciais{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/areas-residenciais.svg');}
.ambiente-areas-residenciais-de-grande-circulacao{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/areas-residenciais-de-grande-circulacao.svg');}
.ambiente-banheiro{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/banheiro.svg');}
.ambiente-banheiros-box{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/banheiros-box.svg');}
.ambiente-banheiros-fora-do-box{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/banheiros-fora-do-box.svg');}
.ambiente-calcadas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/calcadas.svg');}
.ambiente-churrasqueiras{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/churrasqueiras.svg');}
.ambiente-cozinhas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/cozinhas.svg');}
.ambiente-escadas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/escadas.svg');}
.ambiente-fachadas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/fachadas.svg');}
.ambiente-garagens{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/garagens.svg');}
.ambiente-hidraulica{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/hidraulica.svg');}
.ambiente-lareiras{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/lareiras.svg');}
.ambiente-lavanderia{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/lavanderia.svg');}
.ambiente-paineis-decorados{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/paineis-decorados.svg');}
.ambiente-paredes-internas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/paredes-internas.svg');}
.ambiente-piscinas-entorno{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/piscinas-entorno.svg');}
.ambiente-piscinas-interior{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/piscinas-interior.svg');}
.ambiente-quartos{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/quartos.svg');}
.ambiente-rampa{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/rampa.svg');}
.ambiente-rampa-inclinacao-menor-que-10{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/rampa-inclinacao-menor-que-10.svg');}
.ambiente-rampas-inclinacao-menor-que-10{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/rampas-inclinacao-menor-que-10.svg');}
.ambiente-rodapes{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/rodapes.svg');}
.ambiente-sacadas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/sacadas.svg');}
.ambiente-salas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/salas.svg');}
.ambiente-uso-publico{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/uso-publico.svg');}
.ambiente-varandas{background-image:url('../../../../../image/catalog/hc_filters/icons/ambientes/varandas.svg');}

/* ---- APLICACAO (12 icons SVG individuais, dexco asset_v=20260519a) ----
   Cada Aplicacao tem SVG separado em /image/catalog/hc_filters/icons/aplicacao/. */
.sprite-aplicacao {
  background-image: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.aplicacao-a-face{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/a-face.svg');}
.aplicacao-apoio{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/apoio.svg');}
.aplicacao-bancada{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/bancada.svg');}
.aplicacao-embutir{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/embutir.svg');}
.aplicacao-mesa{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/mesa.svg');}
.aplicacao-parede{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/parede.svg');}
.aplicacao-piso{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/piso.svg');}
.aplicacao-rodape{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/rodape.svg');}
.aplicacao-semi-encaixe{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/semi-encaixe.svg');}
.aplicacao-sobrepor{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/sobrepor.svg');}
.aplicacao-suspensa{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/suspensa.svg');}
.aplicacao-teto{background-image:url('../../../../../image/catalog/hc_filters/icons/aplicacao/teto.svg');}

/* ---- FORMATO DO PRODUTO (8 SVGs, dexco asset_v=20260519a) ----
   Geometrias: cilindrico, hexagono, losango, oblongo, oval, quadrado, redondo, retangulo. */
.sprite-formato {
  background-image: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.formato-cilindrico{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/cilindrico.svg');}
.formato-hexagono{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/hexagono.svg');}
.formato-losango{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/losango.svg');}
.formato-oblongo{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/oblongo.svg');}
.formato-oval{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/oval.svg');}
.formato-quadrado{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/quadrado.svg');}
.formato-redondo{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/redondo.svg');}
.formato-retangulo{background-image:url('../../../../../image/catalog/hc_filters/icons/formato/retangulo.svg');}

/* ---- Variante inline pequena (32×32) para chips/tags ---- */
.sprite-filter--sm {
  width: 32px;
  height: 32px;
  background-size: 160px auto;  /* escala 5 colunas em 160px */
}
.sprite-filter--sm.sprite-cor { background-size: 320px auto; }  /* 10 colunas × 32px */
.sprite-filter--sm.sprite-ambiente { background-size: contain; }  /* SVGs individuais escalam */
.sprite-filter--sm.sprite-aplicacao { background-size: contain; }
.sprite-filter--sm.sprite-formato { background-size: contain; }
.sprite-filter--sm.sprite-acabamento { background-size: cover; }