/* ==========================================================================
   shell.css - shell responsivo das paginas de produto
   --------------------------------------------------------------------------
   As paginas de produto foram desenhadas so para celular (nenhuma tem @media
   nem prefixo sm:/md:/lg:). Sem isto, no desktop o layout estica de ponta a
   ponta: a galeria ocupa a tela inteira, a barra de compra fica com 1440px e
   o titulo/preco cai abaixo da dobra.

   A partir de 640px o conteudo passa a ser uma coluna centralizada com
   largura de celular, que e exatamente o layout para o qual as paginas foram
   feitas. Abaixo de 640px nada muda: o mobile continua identico.
   ========================================================================== */

:root {
  --shell-width: 480px;
}

@media (min-width: 640px) {
  html {
    background: #f1f3f5;
  }

  /* "html body" e proposital: varias paginas trazem um `body { margin: 0 }`
     em <style> inline, que vem depois deste arquivo no cascade. */
  html body {
    max-width: var(--shell-width);
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    background: #fff;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  }

  /* Barras fixas (topo e rodape de compra) sao posicionadas pela viewport,
     nao pelo body - precisam ser centralizadas na mao para acompanhar o shell. */
  html body .fixed:not(.inset-0) {
    max-width: var(--shell-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* Overlays de modal continuam cobrindo a tela inteira. */
  html body .fixed.inset-0 {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Imagem nunca estoura o shell. */
  html body img,
  html body video {
    max-width: 100%;
  }
}