@import "variables.css";
@import "skins/editorial.css";
@import "header.css";

/* ==========================================================================
   RESET & BOX-SIZING
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

/* ==========================================================================
   BASE & TYPOGRAPHY
   ========================================================================== */

html {
  overflow-x: clip; /* impede scroll horizontal — safe para position:sticky (clip ≠ hidden) */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Estilo para Títulos Editoriais (Espaçados e Uppercase) */
h1.editorial-heading, h2.editorial-heading, h3.editorial-heading {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.noord-container,
.col-full {
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 30px);
}

@media (max-width: 768px) {
  .noord-container,
  .col-full {
    padding: 0 var(--container-padding-mobile, 15px);
  }
}

/* ==========================================================================
   Widget "Código HTML" (Page Builder) — bloco de HTML livre na home
   ========================================================================== */

.noord-html-block {
	width: 100%;
}

.noord-html-block--pad-none   { padding-top: 0;    padding-bottom: 0; }
.noord-html-block--pad-small  { padding-top: 24px; padding-bottom: 24px; }
.noord-html-block--pad-normal { padding-top: 48px; padding-bottom: 48px; }
.noord-html-block--pad-large  { padding-top: 80px; padding-bottom: 80px; }

/* Conteúdo centralizado (respeita a largura máxima do tema). */
.noord-html-block__inner {
	max-width: var(--container-max-width, 1400px);
	margin: 0 auto;
	padding-left: var(--container-padding, 40px);
	padding-right: var(--container-padding, 40px);
}

/* Largura total — o HTML do lojista controla o próprio miolo. */
.noord-html-block--full {
	width: 100%;
}

@media (max-width: 768px) {
	.noord-html-block__inner {
		padding-left: var(--container-padding-mobile, 20px);
		padding-right: var(--container-padding-mobile, 20px);
	}
	.noord-html-block--pad-large  { padding-top: 56px; padding-bottom: 56px; }
	.noord-html-block--pad-normal { padding-top: 36px; padding-bottom: 36px; }
}