/* Relação de produtos: 8 .esp-cat (base.css) numa única linha → itens menores p/ caber no container atual.
   Sobe p/ sobrepor a cauda da wave da faixa (z-index acima do azul). */
.portfolio-cats { position: relative; z-index: 3; margin-top: -7rem; padding-bottom: var(--esp-sec-y);
  --esp-cat-hover-sh: var(--esp-sh-cat-hover); }   /* hover suave (fundo branco), igual negocio */
.portfolio-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1.25rem; }
.portfolio-cats .esp-cat__img { position: relative; width: 100%; height: auto; aspect-ratio: 1; }
.portfolio-cats .esp-cat__link { gap: 0.875rem; }
.portfolio-cats .esp-cat__label { width: auto; font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-body); }
.portfolio-cats .esp-cat.is-active .esp-cat__label { font-weight: 700; color: var(--esp-cyan); }
/* formas: 5-8 = espelho dos 4 primeiros (linha simétrica). base dá 5-8 = shape-3·4·1·2; corrige p/ 1·2·3·4 */
.portfolio-cats .esp-cat:nth-child(5) .esp-cat__img { border-radius: var(--esp-shape-1); }
.portfolio-cats .esp-cat:nth-child(6) .esp-cat__img { border-radius: var(--esp-shape-2); }
.portfolio-cats .esp-cat:nth-child(7) .esp-cat__img { border-radius: var(--esp-shape-3); }
.portfolio-cats .esp-cat:nth-child(8) .esp-cat__img { border-radius: var(--esp-shape-4); }
.portfolio-cats .esp-cat:not(.is-active) .esp-cat__img::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--esp-blue); opacity: 0.4; transition: opacity .3s ease; }
.portfolio-cats .esp-cat:not(.is-active):hover .esp-cat__img::after { opacity: 0; }
/* ≤980: seletor vira faixa horizontal rolável (as 8 colunas quebravam rótulos no meio da palavra).
   full-bleed = rola até a borda (o próximo item espia); o fade nas bordas (has-l/has-r via portfolio.js)
   acompanha a rolagem p/ sinalizar "tem mais" sem apagar o 1º/último item. */
@media (max-width: 980px) {
  .portfolio-cats__grid { display: flex; gap: 1rem; overflow-x: auto;
    margin-inline: calc(-1 * var(--esp-gutter)); padding-inline: var(--esp-gutter); scrollbar-width: none; }
  .portfolio-cats__grid::-webkit-scrollbar { display: none; }
  .portfolio-cats .esp-cat { flex: 0 0 auto; width: 6.5rem; }
  .portfolio-cats__grid.has-r { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
  .portfolio-cats__grid.has-l:not(.has-r) { -webkit-mask-image: linear-gradient(to right, transparent, #000 20%); mask-image: linear-gradient(to right, transparent, #000 20%); }
  .portfolio-cats__grid.has-l.has-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }
}
/* tablet: sem o -7rem inteiro (o texto da intro não tem essa folga; encavalava no carrossel);
   item mais largo que no mobile p/ "Diciclopentadieno" não quebrar no meio */
@media (min-width: 769px) and (max-width: 980px) {
  .portfolio-cats { margin-top: -3rem; }
  .portfolio-cats .esp-cat { width: 8rem; }
}

.portfolio-detail { padding-bottom: var(--esp-sec-y); }
.portfolio-panel { padding: 3rem; background: var(--esp-bg-soft); border-radius: var(--esp-radius-xl) var(--esp-radius-2xl) var(--esp-radius-xl) var(--esp-radius-2xl); }
.portfolio-panel[hidden] { display: none; }
.portfolio-panel__grid { display: grid; grid-template-columns: minmax(0, 17.25rem) minmax(0, 1fr); gap: 2.75rem; align-items: start; }
.portfolio-panel__media { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
/* mesmo tamanho e shape da foto do box intro (.esp-hero-band__card) */
.portfolio-panel__photo { width: 100%; height: auto; display: block; border-radius: var(--esp-shape-card); }
.portfolio-panel__logo { max-width: 11rem; height: auto; }
.portfolio-panel__title { margin: 1rem 0 0; font: 700 var(--fs-h2)/1.2 var(--esp-font); color: var(--esp-gray); }
.portfolio-panel__desc { margin: 1.25rem 0 0; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.portfolio-panel__desc strong { color: var(--esp-gray); }
.portfolio-panel__cta { margin-top: 1.75rem; }

.portfolio-catalogs { margin-top: 2.5rem; }
.portfolio-catalogs__title { margin: 0 0 1.5rem; font: 700 var(--fs-h3)/1.2 var(--esp-font); color: var(--esp-gray); }
.portfolio-catalogs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.portfolio-catalog { display: flex; align-items: center; gap: 1.25rem; }
.portfolio-catalog__thumb { position: relative; flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: var(--esp-shape-1); overflow: hidden; }
.portfolio-catalog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* repouso = foto limpa; overlay + ícone de download aparecem no hover/foco do item inteiro.
   Touch (hover:none) mantém overlay+ícone estáticos — sem hover não haveria pista de download. */
.portfolio-catalog__thumb::before { content: ""; position: absolute; inset: 0; background: var(--esp-blue); opacity: 0; transition: opacity .25s ease; }
.portfolio-catalog__thumb::after { content: ""; position: absolute; inset: 0; background: url(../assets/icon-download.svg) center / 2.5rem no-repeat;
  opacity: 0; transform: scale(.82); transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.portfolio-catalog:hover .portfolio-catalog__thumb::before,
.portfolio-catalog:focus-visible .portfolio-catalog__thumb::before { opacity: 0.4; }
.portfolio-catalog:hover .portfolio-catalog__thumb::after,
.portfolio-catalog:focus-visible .portfolio-catalog__thumb::after { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .portfolio-catalog__thumb::before { opacity: 0.4; }
  .portfolio-catalog__thumb::after { opacity: 1; transform: scale(1); }
}
.portfolio-catalog__label { font: 400 var(--fs-body)/1.2 var(--esp-font); color: var(--esp-body); }
.portfolio-catalog:hover .portfolio-catalog__label,
.portfolio-catalog:focus-visible .portfolio-catalog__label { font-weight: 700; }

/* vídeo: mesmo elemento/tamanho da Sustentabilidade (44rem, 16/9) */
.portfolio-panel__video { max-width: 44rem; margin: 2.5rem auto 0; aspect-ratio: 16 / 9; border-radius: var(--esp-radius-xl); overflow: hidden; position: relative; }

@media (max-width: 900px) {
  .portfolio-panel { padding: 2rem; }
  .portfolio-catalogs__grid { grid-template-columns: 1fr; }
}
/* só no mobile a foto empilha (no tablet as 2 colunas seguram o tamanho da foto) */
@media (max-width: 768px) {
  .portfolio-panel__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Busca de Produtos: veste o módulo de produtos do CMS (views cms/produto/*) */
.portfolio-search { padding-bottom: var(--esp-sec-y); }
.portfolio-search__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: 1.75rem; }
.portfolio-search__field { display: flex; flex-direction: column; gap: 0.75rem; }
.portfolio-search__label { font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-muted); }
.portfolio-search__control { position: relative; }
.portfolio-search__input { width: 100%; border: 0; border-bottom: 0.0625rem solid var(--esp-border); background: transparent;
  padding: 0.5rem 2rem 0.5rem 0; font: 700 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-blue); }
.portfolio-search__input:focus { outline: none; border-bottom-color: var(--esp-cyan); }
.portfolio-search .esp-select__toggle { border-bottom: 0.0625rem solid var(--esp-border); padding: 0.5rem 0.25rem 0.5rem 0; font: 700 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-blue); }
.portfolio-search .esp-select.is-open .esp-select__toggle,
.portfolio-search .esp-select__toggle:focus-visible { border-bottom-color: var(--esp-cyan); outline: none; }
.portfolio-search__ico, .portfolio-search__submit::before {
  -webkit-mask: url(../assets/icon-busca.svg) center/contain no-repeat; mask: url(../assets/icon-busca.svg) center/contain no-repeat; }
.portfolio-search__ico { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem;
  background: var(--esp-gray); pointer-events: none; }
/* ícone em ::before: o módulo troca o conteúdo do botão por texto (Buscar/Buscando) */
.portfolio-search__submit::before { content: ""; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; background: #fff; }
.portfolio-search__clear { display: inline-block; margin-top: 1.25rem; font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-gray); text-decoration: underline; }
.portfolio-search__clear:hover { color: var(--esp-blue); }
.portfolio-search__hint { margin: 3rem 0 1.5rem; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-muted); }
/* autocomplete (jQuery UI): mesmo painel do .esp-select; os inline top/left/width do plugin são sobrescritos */
.portfolio-search__menu { position: absolute; left: 0; right: 0; top: 100%; }
.portfolio-search .ui-autocomplete { position: absolute; top: 0.5rem !important; left: 0 !important; width: 100% !important; z-index: 40;
  margin: 0; padding: 0.375rem; list-style: none; background: #fff; border-radius: var(--esp-radius-md); box-shadow: var(--esp-sh-drop); max-height: 18rem; overflow-y: auto; }
.portfolio-search .ui-autocomplete li a { display: block; padding: 0.625rem 0.75rem; border-radius: var(--esp-radius-sm); font: 400 var(--fs-body)/1.2 var(--esp-font); color: var(--esp-ink-2); cursor: pointer; }
.portfolio-search .ui-autocomplete li.ui-state-active a, .portfolio-search .ui-autocomplete li a.ui-state-active { background: var(--esp-bg-soft); }
.ui-helper-hidden-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portfolio-results__empty { padding: 2rem; text-align: center; background: var(--esp-bg-soft); border-radius: var(--esp-radius-md); font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-muted); }

.portfolio-results { display: flex; flex-direction: column; gap: 1.5rem; }
.portfolio-group { border-radius: var(--esp-radius-md); overflow: hidden; box-shadow: var(--esp-sh-card); }
.portfolio-group__heading { margin: 0; }
.portfolio-group__head { width: 100%; display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 2rem;
  background: var(--esp-blue); border: 0; cursor: pointer; text-align: left; color: #fff; }   /* blue (não cyan): AA 5.5:1 c/ branco */
.portfolio-group__name { font: 700 var(--fs-lead)/1.2 var(--esp-font); }
.portfolio-group__count { margin-left: auto; font: 400 var(--fs-body)/1 var(--esp-font); white-space: nowrap; }
.portfolio-group__count b { font-weight: 700; }
.portfolio-group__cat { display: inline-block; margin-left: 0.75rem; padding: 0.2rem 0.6rem; border-radius: var(--esp-radius-pill); background: rgba(255, 255, 255, .18); font: 600 var(--fs-xs)/1.2 var(--esp-font); vertical-align: middle; }
/* chevron: aponta p/ baixo (fechado) → cima (aberto) */
.portfolio-group__chevron { flex: 0 0 auto; width: 0.85rem; height: 0.85rem;
  border-right: 0.1875rem solid var(--esp-yellow); border-bottom: 0.1875rem solid var(--esp-yellow);
  transform: translateY(-0.2rem) rotate(45deg); transition: transform .3s ease; }
.portfolio-group.is-open .portfolio-group__chevron { transform: translateY(0.15rem) rotate(-135deg); }
/* max-height é teto-mole (> a maior tabela); overflow clipa no colapso */
.portfolio-group__panel { overflow: hidden; max-height: 0; transition: max-height .45s ease; }
.portfolio-group.is-open .portfolio-group__panel { max-height: 200rem; }
.portfolio-group__scroll { overflow-x: auto; }

/* fixed: a coluna Produto tem largura própria e as de atributo dividem o resto por igual (título quebra) */
.portfolio-table { width: 100%; min-width: 48rem; table-layout: fixed; border-collapse: collapse; background: var(--esp-bg); }
.portfolio-table th:first-child { width: 16rem; }
.portfolio-table th { padding: 0.875rem 1.25rem; background: var(--esp-gray); color: #fff; font: 600 var(--fs-sm)/1.2 var(--esp-font); text-align: left; vertical-align: top; }
.portfolio-table__unit { display: block; margin-top: 0.25rem; font-weight: 400; color: rgba(255, 255, 255, .75); }   /* .75 = AA 5.2:1 sobre --esp-gray */
.portfolio-table td { padding: 1.25rem; border-bottom: 0.0625rem solid var(--esp-border); font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); vertical-align: middle; }
.portfolio-table tbody tr:last-child td { border-bottom: 0; }
.portfolio-table td.portfolio-table__prod { font-size: var(--fs-body); color: var(--esp-gray); overflow-wrap: anywhere; }   /* 1 degrau acima das outras células */
.portfolio-table__logo { display: block; width: 8rem; height: auto; margin-top: 0.5rem; }
/* linha inteira abre o detalhe (tr--item do módulo) */
.portfolio-table .tr--item { cursor: pointer; transition: background .2s ease; }
.portfolio-table .tr--item:hover { background: var(--esp-blue-mist); }
.portfolio-table .tr--item:hover .portfolio-table__prod { font-weight: 700; }
/* colunas ordenáveis (Script do módulo: aria-sort no th) */
.portfolio-table--sortable th { cursor: pointer; }
.portfolio-table--sortable th:focus-visible { outline: 0.125rem solid var(--esp-cyan); outline-offset: -0.125rem; }
.portfolio-table__sort { display: inline-block; position: relative; width: 0.5rem; height: 0.75rem; margin-left: 0.375rem; vertical-align: middle; }
.portfolio-table__sort::before, .portfolio-table__sort::after { content: ""; position: absolute; left: 0; border-left: 0.25rem solid transparent; border-right: 0.25rem solid transparent; opacity: 0.35; }
.portfolio-table__sort::before { top: 0; border-bottom: 0.3125rem solid currentColor; }
.portfolio-table__sort::after { bottom: 0; border-top: 0.3125rem solid currentColor; }
.portfolio-table th[aria-sort="ascending"] .portfolio-table__sort::before { opacity: 1; }
.portfolio-table th[aria-sort="descending"] .portfolio-table__sort::after { opacity: 1; }

@media (max-width: 768px) {
  .portfolio-search__form { grid-template-columns: 1fr; gap: 1.5rem; }
  .portfolio-search__submit { justify-self: start; }
}

/* Modal do produto: casca do Bootstrap (JS já na master), visual da busca (#esp-search). Sem o CSS do Bootstrap:
   .modal fica display:none até o JS abrir; .show/.fade só alimentam as transições; o backdrop é criado pelo JS. */
.modal-produto { position: fixed; inset: 0; z-index: 520; display: none; overflow-y: auto; padding: var(--esp-gutter); outline: 0; transition: visibility .3s; }   /* transition: o Bootstrap lê a duração p/ esperar a saída do dialog */
.modal-backdrop { position: fixed; inset: 0; z-index: 510; background: var(--esp-blue); opacity: 0; transition: opacity .25s ease; }
.modal-backdrop.show { opacity: .97; }
.modal-produto__dialog { position: relative; width: min(72rem, 100%); margin: 2rem auto; opacity: 0; transform: translateY(0.75rem); transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.modal-produto.show .modal-produto__dialog { opacity: 1; transform: none; }
.modal-produto__box { position: relative; background: var(--esp-bg); border-radius: var(--esp-radius-xl); box-shadow: var(--esp-sh-modal); }
.modal-produto__body { padding: 3rem; }
.modal-produto__close { position: absolute; right: 0.25rem; top: -3.25rem; width: 2.25rem; height: 2.25rem; border: 0; cursor: pointer; background: url(../assets/icon-close.svg) center/1.25rem no-repeat; }
.modal-produto--sm { z-index: 530; background: rgba(63, 77, 88, .6); }   /* aninhada no #modalProduto (stacking context): escurece por conta própria; o 2º backdrop do Bootstrap fica atrás, inerte */
.modal-produto--sm .modal-produto__dialog { width: min(32rem, 100%); }
.modal-produto--sm .modal-produto__box { padding: 2.5rem; }
.modal-produto--sm .modal-produto__close { top: 1rem; right: 1rem; background-image: url(../assets/icon-close2.svg); }

/* mesmo tratamento do título do painel de produto (.esp-tick + .portfolio-panel__title) */
.modal-produto__title { margin: 0 0 1.75rem; padding-right: 1rem; font: 700 var(--fs-h2)/1.2 var(--esp-font); color: var(--esp-gray); }
.modal-produto__title::before { content: ""; display: block; width: 3rem; height: 0.5rem; margin-bottom: 1.125rem; border-radius: var(--esp-radius-pill); background: var(--esp-yellow); }
.modal-produto--sm .modal-produto__title { font-size: var(--fs-h3); }
.modal-produto__title span { display: block; }
.modal-produto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: start; }
.modal-produto__col { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }   /* colunas independentes: esq. texto+specs, dir. documentos+newsletter */
.modal-produto__txt { margin: 0 0 1rem; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.modal-produto__txt strong { color: var(--esp-gray); }
.modal-produto__infos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.modal-produto__info p { margin: 0; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); }
.modal-produto__info strong { color: var(--esp-gray); }
.modal-produto__scroll { overflow-x: auto; }
.table-details { width: 100%; border-collapse: collapse; }
.table-details th { padding: 0.75rem 1rem; background: var(--esp-gray); color: #fff; font: 600 var(--fs-sm)/1.2 var(--esp-font); text-align: left; }
.table-details td { padding: 0.75rem 1rem; border-bottom: 0.0625rem solid var(--esp-border); font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); vertical-align: top; }
.table-details td.table-details__prop { font-weight: 700; color: var(--esp-gray); }

/* abas de documentos: Bootstrap tab (JS) com o visual das abas da Sustentabilidade */
.modal-produto__tabs { display: flex; gap: 0.25rem; }
/* as abas dividem a coluna por igual (rótulo longo quebra dentro da aba, não a linha de abas) */
.modal-produto__tab { flex: 1 1 0; min-width: 0; padding: 0.75rem 0.5rem; border: 0.0625rem solid var(--esp-border); border-bottom: 0; border-radius: var(--esp-radius-md) var(--esp-radius-md) 0 0;
  background: var(--esp-bg); cursor: pointer; text-align: center; font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-gray); }
.modal-produto__tab.active { background: var(--esp-bg-soft); border-color: transparent; font-weight: 700; color: var(--esp-ink); }
.modal-produto__panes { padding: 1rem 1.25rem; background: var(--esp-bg-soft); border-radius: 0 var(--esp-radius-md) var(--esp-radius-md) var(--esp-radius-md); }
.modal-produto__panes > .tab-pane { display: none; }
.modal-produto__panes > .tab-pane.active { display: block; }
.modal-produto__documento { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font: 600 var(--fs-sm)/1.3 var(--esp-font); color: var(--esp-blue); }
.modal-produto__documento::before { content: ""; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; background: var(--esp-blue);
  -webkit-mask: url(../assets/icon-download.svg) center/contain no-repeat; mask: url(../assets/icon-download.svg) center/contain no-repeat; }
.modal-produto__documento:hover { text-decoration: underline; }

/* formulários (newsletter, autenticação de download): campos no padrão da Contato */
.modal-produto__form-title { margin: 0 0 0.5rem; font: 300 var(--fs-h3)/1.2 var(--esp-font); color: var(--esp-gray); }
.modal-produto__form-title strong { font-weight: 700; }
.modal-produto__form-txt { margin: 0 0 1.25rem; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); }
.modal-produto__form .form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.modal-produto__form label { font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-body); }
.modal-produto__form .form-control { width: 100%; padding: 0.75rem 1.25rem; border: 0.0625rem solid var(--esp-border); border-radius: var(--esp-radius-pill); background: #fff;
  font: 400 var(--fs-body)/1.2 var(--esp-font); color: var(--esp-gray); }
.modal-produto__form .form-control:focus { outline: none; border-color: var(--esp-cyan); }
/* newsletter: cartão isolado (não é conteúdo do produto) — borda + cantos folha, campos só com linha inferior */
.modal-produto__section--news { padding: 2rem; border: 0.0625rem solid var(--esp-border); border-radius: var(--esp-radius-leaf-rev); }
.modal-produto__section--news .form-control { padding: 0.5rem 0; border-width: 0 0 0.0625rem; border-radius: 0; background: transparent; }
.modal-produto__form .form-control.is-invalid { border-color: var(--esp-error); }
.modal-produto__form .g-recaptcha { margin: 0.5rem 0 1rem; }
.modal-produto__form .border-error { outline: 0.125rem solid var(--esp-error); border-radius: var(--esp-radius-sm); }
.modal-produto__form .alert { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--esp-radius-md); font: 400 var(--fs-sm)/1.5 var(--esp-font); }
.modal-produto__form .alert-success { background: var(--esp-blue-mist); color: var(--esp-blue); }
.modal-produto__form .alert-danger { background: var(--esp-bg-soft); color: var(--esp-error); }
.modal-produto__submit { margin-top: 0.5rem; }
.modal-produto__actions { margin-top: 1.5rem; }

/* mobile: cada propriedade vira um bloco (nome + método/unidade/valor empilhados); data-label vem da view */
@media (max-width: 768px) {
  .modal-produto__scroll { overflow: visible; }
  /* do cabeçalho só sobrevive o título da especificação (1º th), como subtítulo dos blocos */
  .table-details thead, .table-details thead tr { display: block; }
  .table-details thead th { display: none; }
  .table-details thead th:first-child { display: block; }   /* mantém a caixa cinza do desktop */
  .table-details, .table-details tbody, .table-details tr, .table-details td { display: block; }
  .table-details tr { padding: 0.5rem 0 0.75rem; border-bottom: 0.0625rem solid var(--esp-border); }
  .table-details td { padding: 0.2rem 0; border: 0; }
  .table-details td.table-details__prop { padding-bottom: 0.4rem; }
  .table-details td[data-label]::before { content: attr(data-label) ": "; color: var(--esp-muted); }
}
@media (max-width: 900px) {
  .modal-produto { padding: 1.25rem; }
  .modal-produto__dialog { margin: 2.75rem auto 1rem; }
  .modal-produto__body { padding: 2rem 1.5rem; }
  .modal-produto__close { top: -2.75rem; right: 0; }
  .modal-produto__grid, .modal-produto__infos { grid-template-columns: minmax(0, 1fr); }
}