@import "variables.css";
@import "skins/editorial.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;
}

/* Controles discretos não herdam o retângulo cinza do hover global do Storefront. */
body :is(
  .noord-announcement-close, .noord-search-icon, .noord-menu-toggle,
  .noord-drawer-close, .noord-drawer-submenu-toggle, .dropdown-toggle,
  .side-cart-trigger, .side-cart__close, .side-cart__item-remove, .side-cart__qty-btn,
  .side-cart__action-btn, .cart-item__qty-btn, .cart-item__remove,
  .cart-frete__toggle-btn, .cart-coupon__toggle, .checkout-step__edit,
  .search-overlay__clear, .search-overlay__close, .shop-grid-btn, .shop-filter__clear,
  .product-lightbox__close, .product-lightbox__prev, .product-lightbox__next,
  .size-guide-trigger, .size-guide-modal__close,
  .noord-categories-prev, .noord-categories-next, .noord-hero-prev, .noord-hero-next,
  .noord-trending-prev, .noord-trending-next,
  .login-tab, .show-password-input, .pwl__link, .login-pw-back,
  .review-helpful-btn, .star-input-btn, .noord-consent__settings-head button
):is(:hover, :active) {
  background: transparent !important;
  box-shadow: none !important;
}

body :is(.side-cart__qty-btn, .cart-item__qty-btn, .side-cart__close, .cart-item__remove, .shop-grid-btn):hover {
  color: var(--color-text, #111111);
}

body :is(.noord-primary-nav .sub-menu a, .main-navigation .sub-menu a, .myaccount-nav__link:not(.is-active), .myaccount-order-row, .myaccount-btn:not(.myaccount-btn--primary)):hover {
  background-color: transparent !important;
}

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

html {
  overflow-x: hidden; /* fallback para navegadores sem suporte a clip */
  overflow-x: clip; /* impede scroll horizontal — safe para position:sticky (clip ≠ hidden) */
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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;
  overflow-x: clip;
}

/* Evita o zoom automático de foco no iOS, sem bloquear a ampliação manual. */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}

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; }
}