/* ==========================================================================
   Base – Novadecor
   ========================================================================== */

:root {
  --font-inter: 'Inter', system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #171717;
  background-color: #fff;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

#main-content,
main,
.collection-page,
.page-product {
  flex: 1 0 auto;
}

/* Header staat in de documentflow (position: sticky in header.css). Geen extra
   padding-top hier — anders dubbele witruimte onder de header (collecties, home, …). */
main,
.page-product,
.collection-page {
  padding-top: 0;
}

/* Optioneel: alleen als een template inline --header-height op main/wrapper zet. */
main[style*="--header-height"],
.page-product[style*="--header-height"],
.collection-page[style*="--header-height"] {
  padding-top: var(--header-height, 0px);
}

/* Productpagina: body EN inner div hebben beide .page-product → dubbele spacer.
   Alleen body krijgt de spacer; nested div.page-product niet. */
body.page-product > .page-product {
  padding-top: 0;
}

[data-header-placeholder]:empty,
[data-search-modal-placeholder]:empty,
[data-mobile-menu-placeholder]:empty,
[data-footer-placeholder]:empty {
  min-height: 0;
}

.min-h-screen {
  min-height: 100vh;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}