/* ============================================================
   HD Ferragens — site estático
   Gerado a partir do site original (Hostinger) — edite à vontade.
   Estrutura:
   - Tema (fontes, cores, tipografia)
   - Motor de layout (blocos .blk / grade .cv / elementos .el)
   - Componentes (texto, botão, imagem, galeria, formulário…)
   - Cabeçalho e menu responsivo
   ============================================================ */

@font-face {
  font-family: 'Hemi Head Rg Bold Italic';
  src: url('../fonts/hemi-head-rg-bold-italic.woff2') format('woff2');
  font-display: swap;
}

:root {
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --color-accent: rgb(229, 120, 25);
  --content-w: 1224px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-secondary); font-size: 14px; color: #000; background: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- tipografia dos textos ---------- */
.txt { width: 100%; overflow-wrap: break-word; }
.txt p, .txt h1, .txt h2, .txt h3, .txt h4, .txt h5, .txt h6 { margin: 0; }
.txt .h1,.txt h1{font-size:var(--fontSizeDesktop,64px);font-family:var(--font-primary);font-weight:600;font-style:normal;line-height:var(--lineHeightDesktop,1.3);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .h2,.txt h2{font-size:var(--fontSizeDesktop,56px);font-family:var(--font-primary);font-weight:600;font-style:normal;line-height:var(--lineHeightDesktop,1.3);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .h3,.txt h3{font-size:var(--fontSizeDesktop,48px);font-family:var(--font-primary);font-weight:600;font-style:normal;line-height:var(--lineHeightDesktop,1.3);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .h4,.txt h4{font-size:var(--fontSizeDesktop,40px);font-family:var(--font-primary);font-weight:600;font-style:normal;line-height:var(--lineHeightDesktop,1.3);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .h5,.txt h5{font-size:var(--fontSizeDesktop,26px);font-family:var(--font-primary);font-weight:600;font-style:normal;line-height:var(--lineHeightDesktop,1.3);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .h6,.txt h6{font-size:var(--fontSizeDesktop,18px);font-family:var(--font-primary);font-weight:600;font-style:normal;line-height:var(--lineHeightDesktop,1.3);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .body,.txt p.body{font-size:var(--fontSizeDesktop,14px);font-family:var(--font-secondary);font-weight:400;font-style:normal;line-height:var(--lineHeightDesktop,1.5);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .body-large,.txt p.body-large{font-size:var(--fontSizeDesktop,16px);font-family:var(--font-secondary);font-weight:400;font-style:normal;line-height:var(--lineHeightDesktop,1.5);letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;}
.txt .body-small,.txt p.body-small{font-size:var(--fontSizeDesktop,16px);font-family:var(--font-secondary);font-weight:500;font-style:normal;line-height:var(--lineHeightDesktop,1.5);letter-spacing:normal;text-transform:uppercase;text-decoration:none;margin:0;}
.txt a { text-decoration: underline; }

/* ---------- blocos ---------- */
.blk { padding: var(--pad, 16px 0); position: relative; background-image: var(--bg, none); }
.cv { position: relative; width: min(var(--content-w), calc(100% - 32px)); margin: 0 auto; }

@media (min-width: 920px) {
  /* no desktop o original NÃO aplica o padding do bloco:
     as coordenadas dos elementos já são relativas à própria section */
  .blk { padding: 0; }
  .cv {
    display: grid;
    grid-template-columns: var(--gtc);
    grid-template-rows: var(--gtr);
    min-height: var(--minh, 0);
  }
  .el {
    grid-column: var(--gc);
    grid-row: var(--gr);
    z-index: var(--z, 1);
    display: flex;
    flex-direction: column;
    justify-content: var(--align, flex-start);
    align-items: var(--justify, stretch);
    min-width: 0;
  }
  .el > * { width: 100%; }
  .el--socialicons > .soc { width: var(--soc-w, auto); }
  /* botão de layout ocupa exatamente a caixa do elemento, como no site vivo:
     padding 0, texto numa linha só (nowrap), centralizado por flex */
  .el--button > .btn {
    width: 100%; height: 100%; padding: 0; min-height: 0;
    white-space: nowrap; overflow: hidden;
  }
  /* imagem preenche a célula sem esticar a linha da grade (recorte igual ao original) */
  /* card de produto e galeria da página Sobre: no desktop os agrupadores somem
     do layout e o grid posiciona os elementos exatamente como antes */
  .pcard, .about-gallery { display: contents; }
  .el--image { min-height: 0; }
  .el--image .img { position: relative; height: 100%; min-height: 0; overflow: hidden; }
  .el--image .img img, .el--image .img a {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .el--image .img img {
    object-fit: cover;
    transform: scale(var(--crop-s, 1));
    transform-origin: var(--crop-o, 50% 50%);
  }
  .el--hide-d { display: none !important; }
  .blk--hide-d { display: none !important; }
  .txt { text-align: var(--d-text, left); }
  /* primeiro bloco desliza para baixo do cabeçalho transparente (igual ao original) */
  main > .blk:first-child,
  main > .busca-inline:first-child,
  #conteudoProtegido > .blk:first-child {
    padding-top: 182px;
    padding-bottom: 0;
    margin-top: -182px;
  }
}

@media (max-width: 919px) {
  .blk { padding: var(--pad-m, 16px); background-image: var(--bg-m, var(--bg, none)); }
  /* No celular os blocos viram uma coluna simples, então a altura mínima e o
     respiro que vinham do construtor (feitos para a tela grande) só sobram como
     espaço vazio. Padroniza: sem altura fixa e 32px acima/abaixo em todo bloco. */
  .cv { display: flex; flex-direction: column; width: 100%; max-width: 480px; min-height: 0; }
  .blk { padding-block: 32px; }
  .cv > .el:last-child, .cv > .pcard:last-child { margin-bottom: 0; }
  /* card de produto no celular: o nome fica SOBRE a parte de baixo da foto,
     dentro do quadrado arredondado (como aparece no computador) */
  .pcard { display: block; position: relative; margin-bottom: 16px; }
  .pcard > .el--image { margin-bottom: 0; }
  .pcard > .el--button {
    position: absolute; left: 0; right: 0; width: auto; bottom: 14%;
    margin: 0; align-items: center;
    /* ACIMA do véu da imagem (.img::before tem z-index:1, preto 15%). Sem isto
       o véu escurece a caixa branca e ela some no cinza da foto. No desktop
       isso não acontece porque lá a regra .el aplica o z-index do elemento. */
    z-index: 2;
  }
  /* caixa branca de UMA linha que abraça o nome (igual ao site original);
     a fonte encolhe por nome (16px p/ curtos, até 12px p/ longos) via o
     --btn-fs-m gravado em cada botão no HTML */
  .pcard > .el--button > .btn { width: auto; min-width: 185px; max-width: 94%; white-space: nowrap; border-width: 6px; padding: 9px 18px; font-size: var(--btn-fs-m, 16px); }
  /* página Sobre: colagem 2 colunas das fotos das instalações, como no site
     original — foto retrato à esquerda ocupando a altura das duas da direita
     (galpão + caixas), e o logo HD centralizado abaixo */
  .about-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; align-items: start; }
  .about-gallery > .el--image { width: 100%; margin: 0; }
  .about-gallery > .el--image:first-child { grid-row: span 2; }
  .about-gallery > .el--image:last-child { grid-column: 1 / -1; justify-self: center; width: 49%; max-width: 200px; }
  /* o PNG do logo é quadrado (1600x1600) mas o desenho ocupa só 1299x708 —
     sobra 28% de área transparente em cima e embaixo, que virava espaço vazio
     na página. Recorta essa sobra sem mudar o tamanho visível do logo. */
  .about-gallery > .el--image:last-child img { aspect-ratio: 1.8; }
  /* página Sobre: aproxima o logo do título "Localização da HD Ferragens".
     O vão padrão entre blocos (32 embaixo + 32 em cima) ficava grande demais
     nesse ponto específico. Vale só para estes dois blocos. */
  #zB_XTb { padding-bottom: 12px; }
  #zmPTrH { padding-top: 12px; }
  .el {
    width: var(--mw, 100%);
    margin-left: var(--mml, 0);
    margin-right: var(--mmr, 0);
    margin-bottom: var(--mmb, 16px);
    display: flex;
    flex-direction: column;
    align-items: var(--justify, stretch);
  }
  .el > * { width: 100%; }
  .el--button > .btn { width: auto; align-self: center; }
  .el--hide-m { display: none !important; }
  .blk--hide-m { display: none !important; }
  .txt { text-align: var(--m-text, var(--d-text, left)); }
  /* primeiro bloco desliza para baixo do cabeçalho transparente (igual ao original) */
  main > .blk:first-child,
  main > .busca-inline:first-child,
  #conteudoProtegido > .blk:first-child {
    padding-top: 110px;
    margin-top: -110px;
  }
  
.txt .h1,.txt h1{font-size:var(--fontSizeMobile,40px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.3));}
.txt .h2,.txt h2{font-size:var(--fontSizeMobile,36px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.3));}
.txt .h3,.txt h3{font-size:var(--fontSizeMobile,32px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.3));}
.txt .h4,.txt h4{font-size:var(--fontSizeMobile,24px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.3));}
.txt .h5,.txt h5{font-size:var(--fontSizeMobile,20px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.3));}
.txt .h6,.txt h6{font-size:var(--fontSizeMobile,18px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.3));}
.txt .body,.txt p.body{font-size:var(--fontSizeMobile,16px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.5));}
.txt .body-large,.txt p.body-large{font-size:var(--fontSizeMobile,18px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.5));}
.txt .body-small,.txt p.body-small{font-size:var(--fontSizeMobile,14px);line-height:var(--lineHeightMobile,var(--lineHeightDesktop,1.5));}
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 40px;
  font-size: var(--btn-fs, 16px);
  font-family: var(--btn-ff, var(--font-secondary));
  font-weight: var(--btn-fw, 400);
  text-decoration: none; text-align: center; cursor: pointer;
  border-radius: var(--btn-br, 999px);
  border: var(--btn-bw, 0) solid var(--btn-bc, transparent);
  background: var(--btn-bg, rgb(0, 0, 0));
  color: var(--btn-fc, #ffffff);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover {
  /* O padrão é o laranja da marca. Antes era rgb(29,30,32) — um cinza quase
     idêntico ao preto do botão, o que deixava os botões de formulário
     ("Assinar", "Enviar mensagem", "Acessar"…) sem nenhuma reação visível ao
     passar o mouse. Os botões que trazem --btn-bg-h no próprio HTML continuam
     mandando na cor deles. */
  background: var(--btn-bg-h, var(--color-accent));
  color: var(--btn-fc-h, var(--btn-fc, #fff));
  border-color: var(--btn-bc-h, var(--btn-bc, transparent));
}
.btn--secondary {
  background: var(--btn-bg, white);
  color: var(--btn-fc, rgb(0, 0, 0));
}
@media (max-width: 919px) {
  .btn { font-size: var(--btn-fs-m, var(--btn-fs, 16px)); padding: 14px 36px; }
}

/* ---------- imagens ---------- */
.img { height: 100%; overflow: hidden; position: relative; }
/* véu de sobreposição da imagem (igual ao ::before do original) */
.img::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, var(--img-ov, 0)); pointer-events: none;
}
.img img { width: 100%; height: 100%; object-fit: cover; }
.img a { display: block; height: 100%; }
@media (max-width: 919px) {
  .img img { height: auto; aspect-ratio: var(--m-ar, auto); }
}

/* imagem clicável: leve mudança de tom no hover (igual ao original) */
.img a, .gal a { transition: filter .2s ease; }
.img a:hover, .gal a:hover { filter: contrast(.8); }

/* ---------- galeria ---------- */
.gal { display: grid; grid-template-columns: repeat(var(--g-cols, 3), 1fr); gap: var(--g-gap, 24px); }
.gal img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 919px) {
  .gal { grid-template-columns: repeat(var(--g-cols-m, 1), 1fr); gap: var(--g-gap-m, 12px); }
}

/* ---------- vídeo / mapa / embed ---------- */
.vid, .map { position: relative; width: 100%; height: 100%; min-height: 200px; }
.vid iframe, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 919px) {
  .vid, .map { aspect-ratio: 16 / 9; height: auto; }
  .map { aspect-ratio: auto; min-height: 300px; }
}
.embed iframe { width: 100%; }

/* ---------- redes sociais ---------- */
/* Cada elemento define tamanho/cor/espaçamento via variáveis (--soc-*) */
.soc {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--soc-gap, 14px);
  justify-content: var(--soc-just, flex-start);
  width: var(--soc-w, auto);
}
.soc a {
  display: inline-flex;
  width: var(--soc-size, 24px); height: var(--soc-size, 24px);
  color: var(--soc-color, #000); transition: color .2s;
}
.soc a:hover { color: var(--soc-color-h, var(--color-accent)); }
.soc svg { width: 100%; height: 100%; }

/* ---------- formulários ---------- */
/* formulários: campos EMPILHADOS em largura total, como no site publicado
   (medido no vivo: rótulo 13px + 10px, campo 53px, 9px entre campos) */
.form {
  display: flex; flex-direction: column;
  font-family: var(--f-ff, var(--font-secondary));
  font-weight: var(--f-fw, 400);
}
.form-field { display: block; margin-bottom: var(--f-vspace, 0px); }
.form-field:last-of-type { margin-bottom: 0; }
/* rótulo como no original: zona = max(fonte×1.22, 18px) + 5px (medido no site publicado) */
.f-label {
  display: block; min-height: 18px; line-height: 1.22; margin-bottom: 5px;
  font-size: var(--f-ls, 10px); color: var(--f-lc, #1d1e20);
}
/* grupo de opções (radio) */
.f-radios { display: flex; flex-direction: column; }
.f-radio-opt {
  display: flex; align-items: center; gap: 6px; min-height: 28px;
  font-size: var(--f-fs, 14px); color: var(--f-fc, #1a1a1a); cursor: pointer;
}
.f-radio-opt input { width: 13px; height: 13px; margin: 0; accent-color: #1d1e20; flex-shrink: 0; }
.form input, .form textarea, .form select {
  font: inherit; font-size: var(--f-fs, 15px); line-height: normal; padding: 16px;
  background: var(--f-bg, #fff); color: var(--f-fc, #1a1a1a);
  border: var(--f-bw, 1px) solid var(--f-bc, #1a1a1a); border-radius: 0;
  width: 100%;
}
.form textarea { height: 96px; resize: vertical; }
/* lista suspensa: mesma caixa dos demais campos + seta própria (o padrão do
   navegador ignora a fonte e destoa do resto do formulário) */
.form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
/* enquanto nada foi escolhido, o texto fica esmaecido como um placeholder */
.form select:invalid { color: var(--f-fc, #727586); opacity: .5; }
.form select option { color: var(--f-fc, #1a1a1a); opacity: 1; }
/* radios não herdam o width/padding dos campos de texto */
.form input[type="radio"] {
  width: 13px; height: 13px; padding: 0; margin: 0;
  border: none; background: none; accent-color: #1d1e20; flex-shrink: 0;
}
.form ::placeholder { color: var(--f-fc, #727586); opacity: .5; }
.form input:hover, .form textarea:hover, .form select:hover { background: var(--f-bg-h, var(--f-bg, #fff)); }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
/* dica curta abaixo do campo, explicando o formato esperado */
.f-hint {
  display: block; margin-top: 5px; line-height: 1.35;
  font-size: max(12px, calc(var(--f-ls, 10px) + 2px));
  color: var(--f-fc, #1a1a1a); opacity: .65;
}
/* campo de anexos (upload de arquivo) */
.form input[type="file"] {
  font: inherit; font-size: var(--f-fs, 15px); width: 100%;
  padding: 12px; cursor: pointer;
  background: var(--f-bg, #fff); color: var(--f-fc, #1a1a1a);
  border: var(--f-bw, 1px) dashed var(--f-bc, #1a1a1a); border-radius: 0;
}
.form input[type="file"]::file-selector-button {
  font: inherit; margin-right: 12px; padding: 8px 14px; cursor: pointer;
  border: none; border-radius: 0; background: #1a1a1a; color: #fff;
}
.form input[type="file"]:hover::file-selector-button { background: #333; }
/* lista dos arquivos escolhidos */
.f-files {
  display: block; margin-top: 8px; line-height: 1.5;
  font-size: max(12px, calc(var(--f-ls, 10px) + 2px));
  color: #1b7d38; word-break: break-word;
}
.f-files strong { display: block; margin-bottom: 4px; }
.f-file-item {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 6px 6px 0; padding: 3px 6px 3px 9px;
  background: #eef6ef; border: 1px solid #cfe6d4; border-radius: 3px;
  max-width: 100%;
}
.f-file-x {
  border: none; background: none; cursor: pointer;
  padding: 0 2px; font-size: 14px; line-height: 1; color: #1b7d38;
}
.f-file-x:hover { color: #c62828; }
/* página Sobre: sobe o parágrafo de intro p/ centralizá-lo entre o título
   e a logo (só no desktop; no mobile o espaço é curto e encavalaria).
   transform em vez de margin: move só o texto, sem puxar a logo. */
@media (min-width: 920px) {
  .about-intro-up { transform: translateY(-33px); }
}
/* campo reprovado na validação */
.form-field--err input, .form-field--err textarea, .form-field--err select {
  border-color: #c62828; background: #fff6f6;
}
.form-field--err .f-label { color: #c62828; opacity: 1; }
.form-actions { display: flex; justify-content: var(--f-btn-align, flex-start); margin-top: max(6px, var(--f-vspace, 0px)); }
.form-msg { margin: 8px 0 0; font-size: 15px; }
@media (max-width: 919px) {
  .form-actions { justify-content: var(--f-btn-align-m, var(--f-btn-align, flex-start)); }
}
.form-msg.ok { color: #1b7d38; }
.form-msg.err { color: #c62828; }
/* honeypot anti-spam: invisível para pessoas, visível para robôs */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- cabeçalho (layout "desktop-5" / "mobile-3" do original) ----------
   Transparente no topo da página (o fundo do primeiro bloco aparece atrás);
   fica branco com transição suave ao rolar — igual ao site original. */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background-color: transparent;
  transition: background-color .3s ease-in-out, box-shadow .15s linear;
}
.site-header--solid {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header-in {
  display: grid; align-items: center;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo logo logo" "social nav right";
  gap: 20px;
  width: min(1240px, 100%); margin: 0 auto; padding: 22px 16px;
}
.logo { grid-area: logo; justify-self: center; line-height: 0; }
.logo img { width: 150px; height: auto; }
.header-social { grid-area: social; display: flex; margin-right: 16px; }
.header-social .soc { gap: 10px; justify-content: flex-start; width: auto; flex-wrap: nowrap; }
.header-social .soc a { width: 20px; height: 20px; }
.nav-extra .soc { gap: 20px; justify-content: flex-start; width: auto; }
.nav-extra .soc a { width: 23px; height: 23px; }
.nav { grid-area: nav; }
.nav-list { display: flex; align-items: center; justify-content: center; gap: 29px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  font-family: 'Hemi Head Rg Bold Italic', var(--font-secondary);
  font-size: 26px; line-height: 1; color: rgb(0, 0, 0);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s;
}
.nav-link:hover, .nav-link[aria-current="page"] {
  color: rgb(229, 120, 25);
  text-decoration: underline; text-underline-offset: 7px;
}
.header-right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; margin-left: 20px; }
.nav-search { display: flex; align-items: center; }
.nav-search .search-toggle { padding: 0; }
.header-right .btn { white-space: nowrap; }

/* ---------- busca de produtos ---------- */
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 3px; cursor: pointer;
  color: #000; transition: color .2s;
}
.search-toggle:hover { color: var(--color-accent); }
.search-toggle svg { width: 32px; height: 32px; }
.search-toggle--mobile { display: none; }
/* selo Pequeno Príncipe: sempre o círculo completo (nunca cortar) */
.el--image .img img[src*="selo-parceria"] { object-fit: contain; }
.busca-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.busca-painel {
  width: min(640px, 100%); background: #fff; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden;
  display: flex; flex-direction: column; max-height: 76vh;
}
.busca-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eee; }
.busca-lupa { color: #888; flex-shrink: 0; }
.busca-input {
  flex: 1; border: 0; outline: none; font: inherit; font-size: 17px; color: #1a1a1a;
  background: transparent;
}
.busca-fechar {
  background: none; border: 0; font-size: 17px; color: #999; cursor: pointer; padding: 4px 6px;
}
.busca-fechar:hover { color: #000; }
.busca-lista { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.busca-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  text-decoration: none; color: #1a1a1a;
}
.busca-item:hover, .busca-lista li.ativo .busca-item { background: #f4f4f4; }
.busca-item img, .busca-sem-img {
  width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: #f0f0f0; flex-shrink: 0;
}
.busca-nome { flex: 1; font-size: 15px; font-weight: 600; }
.busca-nome small { font-weight: 400; color: #888; margin-left: 6px; }
.busca-cat { font-size: 12px; color: #999; white-space: nowrap; }
.busca-vazio { padding: 18px 16px; margin: 0; color: #777; font-size: 14px; }
/* "38 resultados" acima da lista; some quando não há texto */
.busca-contagem {
  padding: 9px 16px; margin: 0; flex-shrink: 0;
  font-size: 12px; color: #999; border-bottom: 1px solid #f2f2f2;
}
.busca-contagem:empty { display: none; }
/* quebra de linha exclusiva do celular; no desktop não quebra (ver @media) */
.br-m { display: none; }
/* agrupador foto+nome do card de produto: no celular vira o quadro que ancora
   o nome sobre a foto (ver @media max-width:919px); no desktop ele "some" do
   layout (display:contents, dentro do @media min-width:920px) para o grid
   continuar posicionando imagem e nome como antes. */

/* busca embutida no topo da página Produtos
   z-index alto: os elementos dos blocos usam --z até ~40, o cabeçalho é 1000;
   a barra fica acima do conteúdo mas abaixo do cabeçalho e do modal (3000) */
.busca-inline { position: relative; z-index: 500; padding: 20px 16px 8px; }
.busca-inline-bar {
  display: flex; align-items: center; gap: 10px;
  width: min(600px, 100%); margin: 0 auto;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 999px;
  padding: 13px 22px; box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: box-shadow .2s, border-color .2s;
}
.busca-inline:focus-within .busca-inline-bar { border-color: var(--color-accent); box-shadow: 0 8px 26px rgba(0,0,0,.14); }
.busca-inline-bar .busca-lupa { color: #999; flex-shrink: 0; }
.busca-inline-input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: #1a1a1a;
}
.busca-inline-drop {
  display: none; position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% - 2px); width: min(600px, calc(100% - 32px));
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16); overflow: hidden;
  max-height: 60vh; z-index: 21;
}
.busca-inline.aberto .busca-inline-drop { display: block; }
.busca-inline-lista { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; max-height: calc(60vh - 56px); }
@media (max-width: 919px) {
  .search-toggle--mobile { display: inline-flex; grid-area: x; justify-self: end; }
  .nav-search { display: none; }
  .busca-overlay { padding: 12px; }
  .busca-painel { max-height: 84vh; }
  .busca-inline { padding: 8px 16px 4px; }
  .busca-inline-bar { padding: 12px 18px; }
}
.has-sub { position: relative; }
.sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  list-style: none; margin: 0; padding: 10px 0; min-width: 240px;
  display: none; z-index: 1001; max-height: calc(100vh - 200px); overflow: auto;
}
.sub .nav-link { font-size: 18px; padding: 8px 20px; display: block; }
.has-sub:hover > .sub, .has-sub.open > .sub { display: block; }
.nav-extra { display: none; }
.burger { display: none; }

@media (max-width: 919px) {
  /* mobile-3: hambúrguer à esquerda, logo centralizado */
  .header-in {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "burger logo x";
    padding: 27px 16px; gap: 0;
  }
  .burger {
    grid-area: burger; justify-self: start;
    display: inline-flex; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: 8px 8px 8px 0; cursor: pointer;
  }
  .burger span { width: 24px; height: 2px; background: #000; transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .logo { justify-self: center; }
  .logo img { width: 132px; }
  .header-social, .header-right { display: none; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: flex-start;
    padding: 24px 16px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.35);
    max-height: 60vh; overflow: auto;
  }
  .nav.open { display: flex; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-list > li { width: 100%; }
  .nav-link { font-size: 16px; padding: 13px 0; width: 100%; }
  .nav-link:hover, .nav-link[aria-current="page"] { text-underline-offset: 5px; }
  .sub { position: static; transform: none; display: none; border: 0; box-shadow: none; padding: 0 0 8px 16px; max-height: none; }
  .has-sub.open > .sub { display: block; }
  /* seta do submenu: junto da palavra "Produtos" e com área de toque generosa
     (a palavra leva à página; a seta abre/fecha o submenu — ver site.js) */
  .has-sub > .nav-link { width: auto; }
  .caret { margin-left: 0; padding: 12px 12px 12px 6px; margin-block: -12px; box-sizing: content-box; }
  /* quebra de linha que só vale no celular (rodapé: e-mail/telefone e endereço) */
  .br-m { display: inline; }
  .nav-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 18px 0 4px; width: 100%; }
}

/* ---------- link do rodapé e página legal ---------- */
/* link de privacidade no rodapé (legível, alinhado à esquerda) */
.privacy-link { max-width: min(1240px, 100%); margin: 0 auto; padding: 2px 16px 22px; text-align: left; }
.privacy-link a { color: #cfcfcf; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.privacy-link a:hover { color: #fff; }

/* páginas legais (política de privacidade) — leitura confortável e responsiva */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 20px 88px; color: #333; }
.legal h1 { font-family: var(--font-primary); font-size: clamp(26px, 6vw, 36px); line-height: 1.15; margin: 0 0 6px; color: #111; }
.legal h1::after { content: ""; display: block; width: 64px; height: 4px; background: rgb(229, 120, 25); border-radius: 2px; margin: 14px 0 0; }
.legal .atualizacao { color: #8a8a8a; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 20px 0 28px; }
.legal .lead { font-size: 17px; line-height: 1.7; color: #444; margin: 0 0 8px; }
.legal h2 { font-family: var(--font-primary); font-size: clamp(18px, 4vw, 22px); line-height: 1.25; color: #111; margin: 40px 0 12px; padding-top: 26px; border-top: 1px solid #ececec; }
.legal p, .legal li { font-size: 16px; line-height: 1.75; color: #333; margin: 0 0 14px; }
.legal ul { padding-left: 20px; margin: 0 0 14px; }
.legal li { margin: 0 0 10px; }
.legal strong { color: #111; }
.legal a { color: rgb(229, 120, 25); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: rgb(196, 96, 12); }
@media (max-width: 600px) { .legal { padding: 40px 18px 64px; } }

/* ---------- página com senha ---------- */
.password-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 16px; gap: 14px; }
.password-heading { font-family: var(--font-primary); font-size: 32px; margin: 0; }
.password-sub { margin: 0; font-size: 16px; color: #444; }
.password-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.password-form input { font: inherit; font-size: 15px; padding: 14px 16px; border: 1px solid #1a1a1a; width: 262px; }
.password-err { color: #c62828; margin: 0; }
.password-back { color: #666; font-size: 14px; margin-top: 18px; }

/* ---------- animação de entrada (mesma do original: slide 20%, 0.65s, atraso 0.1s) ---------- */
.anim { opacity: 0; transform: translateY(20%); transition: opacity .65s ease .1s, transform .65s ease .1s; }
.anim.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anim { opacity: 1; transform: none; transition: none; } }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; padding: 4vmin;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 12px; right: 18px; font-size: 40px; line-height: 1;
  background: none; border: 0; color: #fff; cursor: pointer;
}


/* ---------- acessibilidade ---------- */

/* Pular para o conteúdo: fica escondido até receber o foco pelo teclado.
   Sem ele é preciso passar pelos 23 links do menu em toda página. */
.pular {
  position: absolute; left: 12px; top: -100px; z-index: 100000;
  background: #fff; color: #1a1a1a; border: 2px solid var(--color-accent);
  border-radius: 8px; padding: 12px 18px; font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.pular:focus { top: 12px; }
main:focus { outline: none; }   /* o alvo do "pular" não precisa de moldura */

/* Foco visível. Antes só os campos de formulário mostravam onde o teclado
   estava — em links e botões não havia indicação nenhuma.
   A moldura é aplicada no :focus (funciona em qualquer navegador) e removida
   quando o foco NÃO veio do teclado — assim o clique de mouse não desenha
   moldura, mas navegadores sem :focus-visible continuam acessíveis. */
a:focus,
button:focus,
summary:focus,
[tabindex]:not([tabindex="-1"]):focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) { outline: none; }
/* sobre fundo escuro o laranja some: usa branco */
.blk--escuro a:focus,
.blk--escuro button:focus,
.site-header--solid .nav a:focus { outline-color: currentColor; }

/* Contraste: em bloco de fundo escuro o rótulo quase preto do formulário
   ficava em 2,45:1 (o mínimo é 4,5:1). */
.blk--escuro .f-label,
.blk--escuro .f-files { color: #fff; }
.blk--escuro .form-msg { color: #fff; }