/*
Theme Name: DoceLar
Description: Tema clássico enxuto do marketplace DoceLar — o miolo de cada tela vem dos shortcodes do plugin doce-lar; este tema só cuida do shell (header/footer).
Author: Vime Digital
Author URI: https://agenciavime.com
Version: 0.1.0
Text Domain: doce-lar-tema
*/

/* Em camada, acima dos componentes: o shell só complementa o Header/Título do
   DS; sem camada, qualquer regra daqui venceria o componente (lição 13 §23). */
@layer dl-tema {

/* O fundo mora também no html: com o teclado aberto a página encolhe e o que
   sobra embaixo pinta com a cor do html — sem isto aparece uma faixa branca. */
html,
body {
    background: var(--dl-cinza-claro);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

/* O Header/Título centra um título; no shell o centro é o logo. */
/* stretch: o link ocupa os 52 do header (logo 58×44 do Menu 134608:6932 + respiro de 4). */
.dl-header__logo {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-decoration: none;
}

.dl-header__logo img,
.dl-header__acao img {
    display: block;
}

.dl-header__logo img {
    width: auto;
    height: 44px;
}

/* Só o <main> do tema (classe exata): o respiro vertical é de cada tela, e uma
   tela que traga a própria classe junto mantém o seu padding. */
main[class="dl-container"] {
    padding-block: 0;
}

}

/* Fora da camada: nas telas do Woo (checkout, pedido) o body ganha .woocommerce-page e o
   `.woocommerce-page img { height: auto }` dele, sem camada, venceria os 44 de dentro da
   camada — o logo abria no tamanho do SVG por cima do stepper. */
.woocommerce-page .dl-header__logo img {
    height: 44px;
}

/* 404 [TELA-NOVA:2026-09-28] — botão grande do DS (335 de largura), centrado no desktop. */
.dl-pagina-404 .dl-botao {
    display: flex;
    max-width: 335px;
    margin-inline: auto;
}