/* Mariana Rui, telas de categoria no desenho do prototipo, 22/10.
   Entra depois do mr-loja.css. Par do static/js/mr-telas.js. */

/* cabeca de Joias e dos tipos: rotulo cinza, titulo, sem migalhas */
.mr-joias-cabeca{padding:48px var(--margem) 32px}
.mr-joias-cabeca .titulo{margin-top:12px}
.mr-joias-cabeca + .js-category-controls + .category-controls-sticky-detector + .mr-filtros-env{padding-top:0}
.mr-joias-conta{margin-bottom:24px}

/* cabeca de colecao: rotulo Coleção, titulo e contagem logo abaixo */
.mr-colecao-cabeca{padding:48px 0 32px;max-width:56ch}
.mr-colecao-cabeca .titulo{margin:12px 0 16px}
.mr-colecao-cabeca .contagem{margin-top:16px}
.mr-colecao > .apoio{margin-bottom:var(--e6)}

/* colecao com foto ao lado do texto, igual ao prototipo */
.colecao-topo{display:grid;gap:0 var(--e8);margin-bottom:var(--e6)}
.colecao-texto{min-width:0}
.colecao-foto{margin:0 0 var(--e5);overflow:hidden;background:var(--nevoa, #EFEFEF);border-radius:22px}
.colecao-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;aspect-ratio:3/2}
.colecao-foto-peca{background:#fff;border:1px solid var(--linha);display:grid;place-items:center;padding:18px}
.colecao-foto-peca img{object-fit:contain;object-position:center;aspect-ratio:1;background:#fff;height:auto}
@media (min-width:900px){
  .colecao-topo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
  .colecao-foto{margin:48px 0 var(--e6)}
  .colecao-foto img{aspect-ratio:auto;min-height:100%}
  .colecao-foto-peca img{aspect-ratio:1;min-height:0;height:auto;max-height:520px}
}
@media (max-width:899px){
  .colecao-topo{display:flex;flex-direction:column}
  .colecao-texto{display:contents}
  .colecao-texto > :first-child{order:1;padding-bottom:var(--e5) !important}
  .colecao-foto{order:2}
  .colecao-texto > .apoio{order:3}
}

/* Personalizados: o alfabeto como tela, e a grade so com ?ver=pecas */
.mr-alfabeto-tela{border-bottom:0}
.mr-alfabeto-tela .alfabeto-cabeca{max-width:none;margin-bottom:0}
html:not(.mr-ver-pecas) .mr-so-pecas{display:none !important}
.mr-ver-pecas [data-mr-tela-alfabeto]{display:none !important}

/* Material e Presentes dentro de /produtos/ */
.mr-tela-material .mr-so-lista,.mr-tela-presentes .mr-so-lista{display:none !important}
.mr-tela-banho .category-body:not(.mr-pronta){visibility:hidden}
[data-mr-tela]:empty{display:none}
.mr-tela-cabeca{padding:48px 0 32px;max-width:56ch}
.mr-tela-cabeca .titulo{margin:12px 0 16px}
.mr-tela-material [data-mr-tela]{padding-bottom:var(--e8)}
.mr-presentes-conta{margin-bottom:24px}
.mr-presentes-lista{min-height:200px}

/* Ver mais N pecas, no lugar das setas */
.mr-ver-mais{display:grid;place-items:center;margin-top:56px}
.mr-ver-mais .botao-vazado[disabled]{opacity:.5;cursor:default}
.mr-grade > .js-item-product[hidden]{display:none !important}

/* vazio */
.vazio .botao-vazado{display:inline-flex}