/* Opmaak die alleen op de homepage staat: hero, editorial, banner en tegels.
   Stond tot 11-08-2026 als 572 regels <style> in de <head> van index.html. Dat was twee
   derde van die pagina, bij elk bezoek opnieuw opgehaald omdat HTML met no-cache gaat.
   Als los bestand krijgt het een contentstempel (lib/assetVersie.js) en een week cache.

   Wat hier NIET meer in staat: de regels die de gedeelde header nabouwden. Die header
   komt uit public/js/layout.js, net als op elke andere pagina. */

/* ===== Preview: Coral-template layout in Saene huisstijl ===== */

/* Zwart-wit huisstijl; Clean Girl zit in de opmaak, niet in kleur */
body {
  --cg-ink: var(--ink);
  --cg-ink-soft: #2b2926;
  --cg-alt: var(--bg-alt);
  --cg-bg: var(--bg);
  --cg-gap: clamp(50px, 6.5vw, 96px);
}

/* Shop all-knop rechthoekig, geen afgeronde hoeken */
.btn-hero { border-radius: 0; }

/* Het wordmerk zegt wie we zijn, deze regel zegt wát we verkopen. Zonder deze regel
   staat er boven de vouw geen enkele zin die dat vertelt: de <h1> is visually-hidden
   en de lopende balk is een aanbieding, geen propositie. Bewust rustiger dan de balk
   eronder, anders keert hij de volgorde van aandacht om. */
.hero-proposition {
  margin: clamp(16px, 2.6vh, 26px) auto 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}

/* Lopende tekstbalk ONDER het wordmerk (full-bleed, langzaam links -> rechts) */
.hero-scroll {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(26px, 4.5vh, 60px);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.hero-scroll-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: heroScroll 44s linear infinite;
}
.hero-scroll span {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-right: 0.55em;
  color: var(--ink);
}
@keyframes heroScroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-track { animation: none; }
}

/* Hele hero binnen 1 scherm: wordmerk + lopende balk + knop meteen zichtbaar bij landen */
@media (min-width: 641px) {
  .hero-banner {
    min-height: 0;
    height: calc(100svh - 101px);
    padding: 20px 10px 28px;
  }
  .hero-wordmark {
    width: auto;
    max-width: min(84%, 1180px);
    max-height: calc(100svh - 380px);
    height: auto;
    margin: 0 auto;
  }
  .hero-scroll { margin-top: clamp(14px, 2.4vh, 32px); }
  .btn-hero { margin-top: clamp(14px, 2.4vh, 32px); }
}



/* Ruime crème-witruimte tussen de secties */
section.pv-hero, section.pv-intro, section.pv-products,
section.pv-banner, section.pv-tiles-wrap, section.pv-editorial { padding-block: 0; }
section.pv-hero { margin: var(--cg-gap) 0; }
section.pv-banner { margin: var(--cg-gap) 0; }
section.pv-tiles-wrap { margin: var(--cg-gap) 0; }
section.pv-editorial { margin: var(--cg-gap) 0; }

/* Hero: twee beeldvlakken naast elkaar */
.pv-hero { display: grid; grid-template-columns: 1fr 1.1fr; }
.pv-hero-left {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}
.pv-hero-left img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(0.98);
}
.pv-hero-inset {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-38%, -52%);
  width: min(46%, 300px);
  box-shadow: 0 30px 60px rgba(18, 17, 16, 0.22);
}
.pv-hero-inset img { width: 100%; height: auto; display: block; }
.pv-hero-right {
  position: relative;
  min-height: 560px;
  background: var(--cg-alt);
  overflow: hidden;
}
.pv-hero-right img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 18% center;
}
.pv-hero-right::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 82%;
  background: linear-gradient(to left, rgba(250, 249, 246, 1) 0%, rgba(250, 249, 246, 1) 42%, rgba(250, 249, 246, 0.85) 62%, rgba(250, 249, 246, 0) 100%);
  pointer-events: none;
}
.pv-hero-copy { z-index: 1; }
.pv-hero-copy {
  position: absolute;
  right: clamp(24px, 4vw, 60px);
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  max-width: 420px;
}
.pv-hero-copy h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
}
.pv-hero-copy p {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* Editorial tekststrook (voorheen de marquee-balk) */
.pv-tagline {
  text-align: center;
  max-width: 640px;
  margin: var(--cg-gap) auto;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Gecentreerde intro, ruim en editorial */
.pv-intro {
  text-align: center;
  padding: 0 24px;
  max-width: 680px;
  margin: var(--cg-gap) auto;
}
.pv-intro h2 {
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: 22px;
}
.pv-intro h2 em { font-style: italic; }
.pv-intro p {
  max-width: 520px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
}

/* Productenrij */
.pv-products {
  max-width: var(--maxw);
  margin: var(--cg-gap) auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
}
.pv-card { display: flex; flex-direction: column; }
.pv-hero .btn, .pv-card .btn-outline, .pv-banner-copy .btn { border-radius: 0; }

/* Gevulde knoppen: zwart, huisstijl */
.pv-hero-copy .btn {
  background: var(--cg-ink);
  border-color: var(--cg-ink);
}
.pv-hero-copy .btn:hover { background: var(--cg-ink-soft); }
.pv-card .btn-outline { border-color: var(--cg-ink); color: var(--cg-ink); }
.pv-card .btn-outline:hover { background: var(--cg-ink); color: var(--cg-bg); }

.pv-card .frame {
  display: block;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
}
.pv-card .frame img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 7%;
  transition: transform 0.6s var(--ease);
}
.pv-card:hover .frame img { transform: scale(1.04); }
.pv-card h3 {
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.005em;
  margin: 4px 0 5px;
}
.pv-card .pv-price {
  font-size: 12px; color: var(--ink-soft);
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}
.pv-card .btn-outline {
  margin-top: auto;
  width: 100%;
  padding: 13px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Full-width banner */
.pv-banner {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center; justify-content: flex-end;
  text-align: left;
  overflow: hidden;
}
.pv-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
/* Crème-verloop van rechts: de tekst staat op een rustig vlak, het beeld blijft links open */
.pv-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(250, 249, 246, 0.97) 0%, rgba(250, 249, 246, 0.93) 26%, rgba(250, 249, 246, 0.6) 46%, rgba(250, 249, 246, 0) 68%);
}
.pv-banner-copy {
  position: relative; z-index: 1;
  padding: 60px clamp(24px, 5vw, 72px);
  max-width: 440px;
}
.pv-banner-copy h2 {
  color: var(--cg-ink);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 26px;
}
.pv-banner-copy .btn {
  background: var(--cg-ink); color: var(--cg-bg);
  border-color: var(--cg-ink);
}
.pv-banner-copy .btn:hover { background: var(--cg-ink-soft); }
.pv-banner-copy .btn .btn-ic { background: rgba(255, 255, 255, 0.16); }

/* Campagnebeeld naast het merkverhaal */
.pv-editorial { padding: 0 24px; }
.pv-editorial-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.pv-editorial-beeld {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cg-alt);
}
.pv-editorial-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 0.8s var(--ease);
}
.pv-editorial-beeld:hover img { transform: scale(1.05); }
.pv-editorial-copy { max-width: 460px; }
.pv-editorial-copy .pv-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cg-ink);
  opacity: 0.55;
  margin-bottom: 18px;
}
.pv-editorial-copy h2 {
  font-weight: 400;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 20px;
}
.pv-editorial-copy p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--cg-ink);
  opacity: 0.78;
  margin-bottom: 16px;
}
.pv-editorial-copy .btn { margin-top: 12px; }

/* Drie grote tegels op crème vlak */
.pv-tiles-wrap {
  background: var(--cg-bg);
  padding: 0 24px;
}
.pv-tiles-wrap .pv-tiles { max-width: var(--maxw); padding: 0; }
.pv-tiles {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.pv-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
  display: block;
  background: var(--cg-alt);
}
.pv-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.6s var(--ease);
}
.pv-tile:hover img { transform: scale(1.07); }
.pv-tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(250, 249, 246, 0.92) 0%, rgba(250, 249, 246, 0.8) 28%, rgba(250, 249, 246, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.pv-tile span {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: clamp(10px, 2vw, 22px);
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cg-ink);
}

@media (max-width: 900px) {
  .pv-products { grid-template-columns: repeat(2, 1fr); }
  .pv-editorial-inner { grid-template-columns: 1fr; }
  .pv-editorial-copy { max-width: none; }
  .pv-hero { grid-template-columns: 1fr; }
  .pv-hero-left { min-height: 420px; }
  .pv-hero-right { min-height: 480px; }
  .pv-hero-copy { right: 24px; }
}
@media (max-width: 720px) {
  /* Smal scherm: beeld bovenin, tekst onderin op crème. Een verloop van rechts
     werkt hier niet, de tekstkolom is dan zo breed als het beeld zelf. */
  .pv-banner { align-items: flex-end; justify-content: center; text-align: center; min-height: 520px; }
  .pv-banner img { object-position: center; }
  .pv-banner::after {
    background: linear-gradient(to bottom, rgba(250, 249, 246, 0) 0%, rgba(250, 249, 246, 0.55) 44%, rgba(250, 249, 246, 0.95) 72%, rgba(250, 249, 246, 0.99) 100%);
  }
  .pv-banner-copy { max-width: none; padding: 0 24px 44px; }
  .pv-tiles { grid-template-columns: 1fr; }
  .pv-tile { aspect-ratio: 4 / 3; }
  .pv-hero-copy {
    left: 24px; right: 24px; max-width: none;
    top: auto; bottom: 32px; transform: none;
  }
  .pv-hero-right::after {
    width: 100%;
    background: linear-gradient(to top, rgba(250, 249, 246, 0.96) 0%, rgba(250, 249, 246, 0.78) 40%, rgba(250, 249, 246, 0) 75%);
  }
  .pv-hero-right img { object-position: center 20%; }
}
/* ===== Mobiele optimalisatie (best-practice DTC skincare) ===== */
@media (max-width: 640px) {
  /* Tightere, app-achtige ritmiek tussen secties */
  body { --cg-gap: clamp(36px, 8vw, 54px); }


  /* Hero vult het eerste scherm: balk (36px) + header (65px) + hero = 100svh.
     Wordmerk + tagline + knop blijven verticaal gecentreerd in dat vlak. */
  .hero-banner {
    min-height: calc(100vh - 101px);
    min-height: calc(100svh - 101px);
    padding: 24px 22px;
  }
  .hero-stage { max-width: 440px; }
  .hero-wordmark { width: 84%; margin: 0 auto; }
  /* De hero moet op één scherm blijven passen (zie de rekensom hierboven), dus de
     propositie krijgt hier krappere marges dan op desktop. */
  .hero-proposition {
    margin-top: 14px;
    max-width: 28ch;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .hero-banner-content { margin-top: 22px; gap: 16px; }
  .hero-banner-tagline {
    color: var(--ink-soft, #2b2926);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  /* Shop all: strakke omlijnde knop (transparant, dun kader), zoals gevraagd */
  .btn-hero {
    margin-top: 6px;
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    padding: 0.62em 1.9em;
    font-size: 1.05rem;
    letter-spacing: normal;
    text-transform: none;
  }
  .btn-hero:hover, .btn-hero:active { background: rgba(18, 17, 16, 0.06); }

  /* 2e beeld (crème-textuur): geen crème-balk erboven, pot gecentreerd */
  section.pv-hero { margin-top: 0; }
  .hero-banner { padding-bottom: 0; }
  .pv-hero-inset {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(56%, 280px);
  }

  /* Split-beeldsectie compacter */
  .pv-hero-left { min-height: 320px; }
  .pv-hero-right { min-height: 420px; }
  .pv-hero-copy h2 { font-size: 2rem; }
  .pv-hero-copy p { font-size: 14px; margin-bottom: 18px; }

  /* Intro strakker */
  .pv-intro h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .pv-intro p { font-size: 14.5px; }

  /* Categorie-tegels: 2 vierkant boven, 1 brede band eronder
     (i.p.v. drie manshoge tegels = eindeloos scrollen) */
  .pv-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pv-tile { aspect-ratio: 3 / 4; }
  .pv-tile:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .pv-tile span { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .pv-tile::after { height: 58%; }

  /* Banner: hoog genoeg om het beeld te laten ademen boven de tekst */
  .pv-banner { min-height: 480px; }
  .pv-banner-copy { padding: 0 22px 38px; }
}

/* 480 staat NA 640, en dat is geen willekeur: bij gelijke specificiteit wint de
   laatste regel. Stond dit blok ervoor, dan zou een regel die in allebei voorkomt
   op een kleine telefoon door de 640-versie worden overschreven — precies de
   fijnafstemming die dit blok bedoelt te doen. Vandaag botst er niets, maar de
   volgende regel die je hier toevoegt zou het stil verliezen. */
@media (max-width: 480px) {
  .pv-products { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pv-card .btn-outline { padding: 11px 10px; font-size: 12px; }
}
