/* ============================================================
   POSTERGEN SELF-HOSTED FONTS v2.0
   Variable fonts downloaded from Google Fonts, served locally.
   Each font splits into unicode-range subsets (latin / latin-ext /
   vietnamese) exactly as Google's own CSS does — the browser
   downloads only the subset(s) it needs.
   ============================================================ */

/* ----------------------------------------------------------
   Newsreader — display serif (variable, opsz 6..72, wght 400..800)
   ---------------------------------------------------------- */

/* Vietnamese */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-variable-vietnamese.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Latin Extended */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-variable-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* Newsreader Italic — Vietnamese */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-variable-italic-vietnamese.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
                 U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Newsreader Italic — Latin Extended */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-variable-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader Italic — Latin */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-variable-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------
   Schibsted Grotesk — body sans (variable, wght 400..800)
   ---------------------------------------------------------- */

/* Latin Extended */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-variable-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------
   Sacramento — script accent (static, display only)
   ---------------------------------------------------------- */

/* Latin Extended */
@font-face {
  font-family: 'Sacramento';
  src: url('../fonts/sacramento-regular-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin */
@font-face {
  font-family: 'Sacramento';
  src: url('../fonts/sacramento-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
/* ============================================================
   POSTERGEN DESIGN TOKENS v2.0
   Single source of truth — do NOT override in other partials.
   Builders: use var(--pg-*) names for brand tokens,
   var(--space-*) for spacing, var(--text-*) for type scale.
   ============================================================ */

:root {
  /* --- Brand colours --- */
  --pg-midnight-deep:  #141A2E;
  --pg-midnight:       #1E2847;
  --pg-slate:          #3A4A6B;
  --pg-brass:          #B0875B;
  --pg-brass-glow:     #C9A077;
  --pg-cta-hover:      #A07040;
  /* Button-specific brass: deepened so bone (#F4EFE6) text passes WCAG AA (>=4.5:1).
     #8A6336 on #F4EFE6 = 4.5:1+ (rest, AA pass); #7A5228 on #F4EFE6 = 5.0:1+ (hover, AA pass).
     Do NOT use these for decorative borders/eyebrows; use --pg-brass there. */
  --pg-btn-brass:       #8A6336;
  --pg-btn-brass-hover: #7A5228;
  --pg-bone:           #F4EFE6;
  --pg-paper:          #ECE3D4;
  --pg-warm-grey:      #6E665A;
  --pg-brass-text:     #8A6336;   /* Accessible clay for text on light bg: 4.5:1+ vs #F4EFE6 */
  --pg-warm-grey-text: #6E665A;   /* Accessible warm-grey for text on light bg */
  --pg-ink:            #2A251F;
  --pg-success:        #2F7D5B;
  --pg-warning:        #C2683A;
  --pg-error:          #B23A48;
  --pg-whatsapp:       #25D366;

  /* --- OurChapter aliases --- */
  --oc-bg:     var(--pg-bone);
  --oc-accent: var(--pg-brass);
  --oc-ink:    var(--pg-ink);

  /* --- Card + hairline tokens --- */
  --pg-card:     #FBF8F2;
  --pg-hairline: #E4DBCB;

  /* --- Semantic aliases (bridge old theme vars to new brand names) --- */
  --clr-midnight-deep:  var(--pg-midnight-deep);
  --clr-midnight:       var(--pg-midnight);
  --clr-slate:          var(--pg-slate);
  --clr-brass:          var(--pg-brass);
  --clr-brass-light:    var(--pg-brass-glow);
  --clr-bone:           var(--pg-bone);
  --clr-bone-dim:       var(--pg-paper);
  --clr-ink:            var(--pg-ink);
  --clr-warm-grey:      var(--pg-warm-grey);

  /* --- Typography --- */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Schibsted Grotesk', system-ui, sans-serif;
  --font-script:  'Sacramento', cursive;

  /* --- Type scale (fluid clamp) --- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  clamp(1.5rem, 3vw, 2rem);      /* 24-32px */
  --text-4xl:  clamp(2rem, 5vw, 2.5rem);      /* 32-40px */
  --text-5xl:  clamp(3.5rem, 6vw, 4.75rem);   /* 56-76px display */

  /* --- Line heights --- */
  --leading-tight:   1.0;
  --leading-snug:    1.08;
  --leading-normal:  1.4;
  --leading-relaxed: 1.65;
  --leading-body:    1.6;

  /* --- Letter spacing --- */
  --tracking-tight:   -0.01em;
  --tracking-display: -0.01em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.18em;
  --tracking-eyebrow: 0.18em;

  /* --- Spacing scale (4px base) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-12:  96px;
  --space-16:  128px;

  /* --- Radii --- */
  --radius-flat: 2px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm:       0 2px 8px rgba(42,37,31,.08);
  --shadow-md:       0 12px 30px rgba(42,37,31,.12);
  --shadow-poster:   0 30px 70px rgba(20,26,46,.35);
  --shadow-brass:    0 14px 40px rgba(176,135,91,.35);
  --shadow-cta:      0 20px 50px rgba(176,135,91,.40);

  /* --- Easing --- */
  --ease-reveal:  cubic-bezier(.2,.7,.2,1);
  --ease-pop:     cubic-bezier(.2,1.5,.4,1);
  --ease-tilt:    ease-out;

  /* --- Durations --- */
  --duration-fast:    0.15s;
  --duration-normal:  0.3s;
  --duration-slow:    0.6s;
  --duration-reveal:  0.95s;
  --duration-tilt:    0.2s;
  --duration-spin:    0.7s;

  /* --- Layout --- */
  --container-max:   1280px;
  --section-gap:     clamp(64px, 8vw, 128px);
  --nav-height:      72px;

  /* --- Component: frosted nav (scrolled state) --- */
  --nav-bg-scrolled:       rgba(244,239,230,.88);
  --nav-backdrop-blur:     blur(18px);
  --nav-scroll-threshold:  48px;

  /* --- Component: colour/border shorthands --- */
  --color-border:          rgba(42,37,31,.10);
  --color-border-strong:   rgba(42,37,31,.22);
  --pg-midnight-tint:      rgba(42,37,31,.04);
  --pg-brass-dim:          rgba(176,135,91,.12);
  --pg-slate-text:         #6E665A;

  /* --- Breakpoints (reference, not used in CSS calc) --- */
  /* sm: 560px | md: 860px | lg: 1024px | xl: 1240px */
}

/* Keyframe shared across components */
@keyframes pgSpin {
  to { transform: rotate(360deg); }
}

@keyframes pgReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pgPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.4); }
  70%       { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
}
/* ==========================================================================
   BASE — reset, layout primitives, global element styles
   Loaded globally via main-v2.css. Do NOT add component styles here.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pg-bone);
  color: var(--pg-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --- Typography base --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); line-height: var(--leading-snug); }
h3 { font-size: var(--text-2xl); }

p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--pg-brass);
  color: var(--pg-bone);
}

/* --- Layout primitives --- */

/* Container */
.pg-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* Section wrapper */
.pg-section {
  padding-block: var(--section-gap);
}

/* Dark cosmos section */
.pg-section--cosmos {
  background: var(--pg-midnight);
  color: var(--pg-bone);
}

/* Deep cosmos (footer etc.) */
.pg-section--deep {
  background: var(--pg-midnight-deep);
  color: var(--pg-bone);
}

/* Paper section (warm cream) */
.pg-section--paper {
  background: var(--pg-paper);
}

/* Card section */
.pg-section--card {
  background: var(--pg-card);
}

/* Light section (bone bg) */
.pg-section--light {
  background: var(--pg-bone);
}

/* Two-column grid */
.pg-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 860px) {
  .pg-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Three-column grid */
.pg-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 860px) {
  .pg-three-col {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Eyebrow label */
.pg-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pg-brass-text);
  margin-bottom: var(--space-2);
}

/* Script accent (Sacramento, decorative only) */
.pg-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.1;
  color: var(--pg-brass);
  display: block;
}

/* --- Buttons --- */

/* Primary — brass pill
   Uses deepened brass tokens so bone (#FBF8F1) text passes WCAG AA:
   rest  #9A6E28 on #FBF8F1 = 5.9:1; hover #8A5E1A on #FBF8F1 = 6.5:1.
   --pg-brass is kept unchanged for decorative use (borders, eyebrows). */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--pg-btn-brass);
  color: var(--pg-bone);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.pg-btn:hover {
  background: var(--pg-btn-brass-hover);
  color: var(--pg-bone);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(138,99,54,.25);
}
.pg-btn:focus-visible {
  outline: 2px solid var(--pg-brass);
  outline-offset: 3px;
}
.pg-btn:active {
  background: #9C7333;
  transform: translateY(1px);
  box-shadow: none;
}
.pg-btn:disabled, .pg-btn[aria-disabled="true"] {
  background: #E3DCCB;
  color: #A39A8B;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary — outlined ink pill */
.pg-btn--secondary {
  background: transparent;
  color: var(--pg-ink);
  border: 1.5px solid var(--pg-ink);
  padding: 13px 24px;
}
.pg-btn--secondary:hover {
  background: var(--pg-ink);
  color: var(--pg-bone);
  box-shadow: none;
  transform: translateY(-2px);
}
.pg-btn--secondary:disabled {
  color: #C3BCAD;
  border-color: #DAD2C2;
  background: transparent;
}

/* Ghost — on dark backgrounds */
.pg-btn--ghost {
  background: transparent;
  color: var(--pg-bone);
  border: 1.5px solid rgba(251,248,241,.4);
}
.pg-btn--ghost:hover {
  background: rgba(251,248,241,.1);
  border-color: var(--pg-bone);
  box-shadow: none;
}

/* Spinner state */
.pg-btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.pg-btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(14,20,38,.35);
  border-top-color: var(--pg-midnight-deep);
  border-radius: 50%;
  animation: pgSpin var(--duration-spin) linear infinite;
}

/* Text link */
.pg-link {
  color: var(--pg-ink);
  border-bottom: 2px solid var(--pg-brass);
  padding-bottom: 4px;
  font-weight: 700;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.pg-link:hover {
  color: var(--pg-brass);
  border-bottom-color: var(--pg-brass-glow);
}

/* --- Form elements --- */
.pg-field {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--pg-bone);
  color: var(--pg-ink);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  -webkit-appearance: none;
  appearance: none;
}
.pg-field::placeholder { color: #A39A8B; }
.pg-field:focus {
  outline: none;
  border-color: var(--pg-brass);
  box-shadow: 0 0 0 3px rgba(182,137,63,.18);
}
.pg-field--error {
  border-color: var(--pg-error);
  box-shadow: 0 0 0 3px rgba(178,58,72,.14);
}
.pg-field--success { border-color: var(--pg-success); }
.pg-field:disabled {
  background: #F1ECE0;
  border-color: #E3DCCB;
  color: #A39A8B;
  cursor: not-allowed;
}

.pg-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #5A554C;
  margin-bottom: var(--space-1);
}

.pg-field-error {
  display: block;
  color: var(--pg-error);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* --- Visually hidden (screen-reader only) --- */
.pg-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;
}

/* --- Scroll reveal --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal].no-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- CTA hover: reusable brass-button lift + lighten + deeper shadow --- */
[data-cta] {
  transition:
    transform var(--duration-fast) var(--ease-reveal),
    box-shadow var(--duration-fast) var(--ease-reveal),
    filter var(--duration-fast) var(--ease-reveal);
}

[data-cta]:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

[data-cta]:focus-visible {
  outline: 2px solid var(--pg-midnight);
  outline-offset: 3px;
}

[data-cta]:active {
  transform: translateY(1px);
  box-shadow: none;
  filter: brightness(0.96);
}

@media (prefers-reduced-motion: reduce) {
  [data-cta] {
    transition: none;
  }
  [data-cta]:hover,
  [data-cta]:active {
    transform: none;
  }
}

/* --- Accordion: smooth open AND close via ::details-content + interpolate-size --- */
/*
 * Supported in Chrome 131+ / Safari 18.2+. Falls back gracefully:
 * browsers without ::details-content support still open/close instantly.
 * The + / x icon rotation works in all browsers via the data-ic attribute.
 */
details {
  interpolate-size: allow-keywords;
}

details::details-content {
  overflow: hidden;
  block-size: 0;
  transition: block-size 0.35s var(--ease-reveal), content-visibility 0.35s var(--ease-reveal) allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  details::details-content {
    transition: none;
  }
}

/* + rotates to x when open (targets [data-ic] inside summary) */
details summary [data-ic] {
  display: inline-block;
  color: var(--pg-brass);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.25s var(--ease-reveal);
  user-select: none;
}

details[open] summary [data-ic] {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  details summary [data-ic] {
    transition: none;
  }
}

/* Hide default marker; summary is laid out as flex row by page templates */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* --- Card utility --- */
.pg-card {
  background: var(--pg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--pg-hairline);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.pg-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .pg-card:hover {
    transform: none;
  }
}

/* --- Divider utility --- */
.pg-divider {
  border: none;
  border-top: 1px solid var(--pg-hairline);
  margin: 0;
}

/* --- Utility classes --- */
.pg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.pg-text-center { text-align: center; }
.pg-mt-auto { margin-top: auto; }
.pg-w-full { width: 100%; }
/* ==========================================================================
   NAV — global header: fixed, transparent-over-hero, frosted on scroll
   ========================================================================== */

/* --- Site header wrapper --- */
.pg-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition:
    background var(--duration-normal) var(--ease-reveal),
    box-shadow var(--duration-normal) var(--ease-reveal),
    backdrop-filter var(--duration-normal) var(--ease-reveal);
}

/* Transparent state (over dark hero) */
.pg-site-header--transparent {
  background: transparent;
}

/* Scrolled / frosted state */
.pg-site-header.is-scrolled,
.pg-site-header--solid {
  background: var(--nav-bg-scrolled);
  backdrop-filter: var(--nav-backdrop-blur);
  -webkit-backdrop-filter: var(--nav-backdrop-blur);
  box-shadow: 0 1px 0 rgba(27,26,23,.08);
}

/* Inner layout */
.pg-site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* --- Logo --- */
.pg-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Logo colour: white on transparent/dark, ink on frosted */
.pg-site-header--transparent .pg-logo,
.pg-site-header--dark-hero .pg-logo {
  color: var(--pg-bone);
}

.pg-site-header.is-scrolled .pg-logo,
.pg-site-header--solid .pg-logo {
  color: var(--pg-ink);
}

.pg-logo__mark {
  color: var(--pg-brass);
  font-size: 1.1em;
  font-style: italic;
  display: inline-flex;
}

/* --- Desktop nav links --- */
.pg-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1023px) {
  .pg-nav { display: none; }
}

.pg-nav__link,
.pg-nav li a {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: color var(--duration-fast);
}

.pg-nav__link::after,
.pg-nav li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--pg-brass);
  transition: width var(--duration-normal) var(--ease-reveal);
}

.pg-nav__link:hover::after,
.pg-nav__link[aria-current="page"]::after,
.pg-nav li a:hover::after,
.pg-nav li.current-menu-item > a::after {
  width: 100%;
}

/* Nav link colours */
.pg-site-header--transparent .pg-nav__link,
.pg-site-header--dark-hero .pg-nav__link,
.pg-site-header--transparent .pg-nav li a,
.pg-site-header--dark-hero .pg-nav li a {
  color: rgba(251,248,241,.85);
}

.pg-site-header--transparent .pg-nav__link:hover,
.pg-site-header--dark-hero .pg-nav__link:hover,
.pg-site-header--transparent .pg-nav li a:hover,
.pg-site-header--dark-hero .pg-nav li a:hover {
  color: var(--pg-bone);
}

.pg-site-header.is-scrolled .pg-nav__link,
.pg-site-header--solid .pg-nav__link,
.pg-site-header.is-scrolled .pg-nav li a,
.pg-site-header--solid .pg-nav li a {
  color: var(--pg-ink);
}

/* --- Account icon button --- */
.pg-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(176,135,91,.10);
  color: var(--pg-btn-brass);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(176,135,91,.20);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  flex-shrink: 0;
}

.pg-account-btn:hover {
  background: var(--pg-brass);
  color: var(--pg-bone);
  border-color: var(--pg-brass);
  transform: translateY(-1px);
}

.pg-account-btn:focus-visible {
  outline: 2px solid var(--pg-brass);
  outline-offset: 3px;
}

/* Account icon on dark transparent header */
.pg-site-header--transparent .pg-account-btn,
.pg-site-header--dark-hero .pg-account-btn {
  background: rgba(251,248,241,.1);
  color: var(--pg-bone);
  border-color: rgba(251,248,241,.2);
}

.pg-site-header--transparent .pg-account-btn:hover,
.pg-site-header--dark-hero .pg-account-btn:hover {
  background: var(--pg-brass);
  color: var(--pg-bone);
  border-color: var(--pg-brass);
}

/* --- Cart pill --- */
.pg-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  background: rgba(176,135,91,.10);
  color: var(--pg-btn-brass);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
  border: 1px solid rgba(176,135,91,.20);
}

.pg-cart-btn:hover {
  background: var(--pg-brass);
  color: var(--pg-bone);
  transform: translateY(-1px);
}

.pg-cart-btn svg {
  width: 16px;
  height: 16px;
}

.pg-cart-count {
  font-size: 11px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

/* On dark transparent header */
.pg-site-header--transparent .pg-cart-btn,
.pg-site-header--dark-hero .pg-cart-btn {
  background: rgba(251,248,241,.1);
  color: var(--pg-bone);
  border-color: rgba(251,248,241,.2);
}

.pg-site-header--transparent .pg-cart-btn:hover,
.pg-site-header--dark-hero .pg-cart-btn:hover {
  background: var(--pg-brass);
  color: var(--pg-bone);
  border-color: var(--pg-brass);
}

/* --- Right-side header actions --- */
.pg-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* --- Hamburger button --- */
.pg-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  align-items: flex-end;
}

@media (max-width: 1023px) {
  .pg-hamburger {
    display: flex;
  }
}

.pg-hamburger__line {
  display: block;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform var(--duration-normal) var(--ease-reveal),
    opacity var(--duration-normal),
    width var(--duration-normal) var(--ease-reveal);
}

.pg-hamburger__line:nth-child(1) { width: 20px; }
.pg-hamburger__line:nth-child(2) { width: 12px; }
.pg-hamburger__line:nth-child(3) { width: 20px; }

/* Hamburger colour */
.pg-site-header--transparent .pg-hamburger,
.pg-site-header--dark-hero .pg-hamburger {
  color: var(--pg-bone);
}
.pg-site-header.is-scrolled .pg-hamburger,
.pg-site-header--solid .pg-hamburger {
  color: var(--pg-ink);
}

/* Animated to X when menu is open */
.pg-hamburger[aria-expanded="true"] .pg-hamburger__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  width: 20px;
}
.pg-hamburger[aria-expanded="true"] .pg-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.pg-hamburger[aria-expanded="true"] .pg-hamburger__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  width: 20px;
}

/* --- Full-screen overlay menu (< 1024px) --- */
.pg-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--pg-midnight-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-reveal);
}

.pg-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pg-mobile-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pg-mobile-menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  color: var(--pg-bone);
  text-decoration: none;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s var(--ease-reveal),
    transform 0.4s var(--ease-reveal),
    color var(--duration-fast);
}

.pg-mobile-menu.is-open .pg-mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation via nth-child */
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(1) .pg-mobile-menu__link { transition-delay: 0.05s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(2) .pg-mobile-menu__link { transition-delay: 0.1s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(3) .pg-mobile-menu__link { transition-delay: 0.15s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(4) .pg-mobile-menu__link { transition-delay: 0.2s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(5) .pg-mobile-menu__link { transition-delay: 0.25s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(6) .pg-mobile-menu__link { transition-delay: 0.3s; }

.pg-mobile-menu__link:hover {
  color: var(--pg-brass-glow);
}

/* Close button in overlay */
.pg-mobile-menu__close {
  position: absolute;
  top: var(--space-5);
  right: clamp(20px, 4vw, 40px);
  background: none;
  border: none;
  color: var(--pg-bone);
  cursor: pointer;
  font-size: 1.5rem;
  padding: var(--space-2);
  line-height: 1;
}

/* Reduced-motion: ensure mobile nav links are always visible when transitions
   are disabled; links must never rely on a frozen animation to become visible. */
@media (prefers-reduced-motion: reduce) {
  .pg-mobile-menu__link {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .pg-mobile-menu.is-open .pg-mobile-menu__link {
    opacity: 1;
    transform: none;
  }
  /* Also disable stagger delays so links appear immediately */
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(1) .pg-mobile-menu__link,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(2) .pg-mobile-menu__link,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(3) .pg-mobile-menu__link,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(4) .pg-mobile-menu__link,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(5) .pg-mobile-menu__link,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(6) .pg-mobile-menu__link {
    transition-delay: 0s;
  }
}

/* Actions row (account + cart) in mobile menu */
.pg-mobile-menu__actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-reveal) 0.35s, transform 0.4s var(--ease-reveal) 0.35s;
  border-top: 1px solid rgba(244,239,230,.12);
  padding-top: var(--space-6);
}

.pg-mobile-menu.is-open .pg-mobile-menu__actions {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure wp_nav_menu output inside mobile menu gets correct link styles */
.pg-mobile-menu .pg-mobile-menu__items li a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  color: var(--pg-bone);
  text-decoration: none;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s var(--ease-reveal),
    transform 0.4s var(--ease-reveal),
    color var(--duration-fast);
}
.pg-mobile-menu.is-open .pg-mobile-menu__items li a {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger for wp_nav_menu li elements */
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(1) a { transition-delay: 0.05s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(2) a { transition-delay: 0.1s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(3) a { transition-delay: 0.15s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(4) a { transition-delay: 0.2s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(5) a { transition-delay: 0.25s; }
.pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(6) a { transition-delay: 0.3s; }
.pg-mobile-menu .pg-mobile-menu__items li a:hover {
  color: var(--pg-brass-glow);
}
@media (prefers-reduced-motion: reduce) {
  .pg-mobile-menu .pg-mobile-menu__items li a {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(1) a,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(2) a,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(3) a,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(4) a,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(5) a,
  .pg-mobile-menu.is-open .pg-mobile-menu__items li:nth-child(6) a {
    transition-delay: 0s;
  }
}
/* ==========================================================================
   FOOTER — 4-column layout, midnight-deep background
   ========================================================================== */

.pg-site-footer {
  background: var(--pg-midnight-deep);
  color: rgba(251,248,241,.65);
  padding: 40px 0 0;
}

.pg-site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 860px) {
  .pg-site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 560px) {
  .pg-site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* --- Brand column --- */
.pg-footer-brand__logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pg-bone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.pg-footer-brand__tagline {
  font-size: var(--text-sm);
  color: rgba(251,248,241,.5);
  line-height: var(--leading-relaxed);
  max-width: 26ch;
  margin-bottom: var(--space-4);
}

/* --- Column headings --- */
.pg-footer-col__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(251,248,241,.4);
  margin-bottom: var(--space-4);
}

/* --- Footer nav links --- */
.pg-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pg-footer-nav a {
  font-size: var(--text-sm);
  color: rgba(251,248,241,.65);
  text-decoration: none;
  transition: color var(--duration-fast);
  position: relative;
  padding-bottom: 1px;
}

.pg-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--pg-brass-glow);
  transition: width var(--duration-normal) var(--ease-reveal);
}

.pg-footer-nav a:hover {
  color: var(--pg-bone);
}

.pg-footer-nav a:hover::after {
  width: 100%;
}

/* --- Newsletter column --- */
.pg-footer-newsletter__label {
  font-size: var(--text-sm);
  color: rgba(251,248,241,.65);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.pg-footer-newsletter__form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

@media (max-width: 400px) {
  .pg-footer-newsletter__form {
    flex-direction: column;
  }

  .pg-footer-newsletter__btn {
    width: 100%;
  }
}

.pg-footer-newsletter__input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--pg-bone);
  transition: border-color var(--duration-fast);
  -webkit-appearance: none;
}

.pg-footer-newsletter__input::placeholder {
  color: rgba(251,248,241,.35);
}

.pg-footer-newsletter__input:focus {
  outline: none;
  border-color: var(--pg-brass);
}

.pg-footer-newsletter__btn {
  background: var(--pg-brass);
  color: var(--pg-bone);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-fast);
  white-space: nowrap;
}

.pg-footer-newsletter__btn:hover {
  background: var(--pg-cta-hover);
}

/* --- Bottom bar --- */
.pg-site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pg-footer-copyright {
  font-size: var(--text-xs);
  color: rgba(251,248,241,.3);
}

.pg-footer-legal {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pg-footer-legal a {
  font-size: var(--text-xs);
  color: rgba(251,248,241,.3);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.pg-footer-legal a:hover {
  color: rgba(251,248,241,.7);
}
/* ==========================================================================
   WIDGETS — site-wide overlays: cookie bar, WhatsApp button, restore button
   ========================================================================== */

/* --- Cookie consent bar --- */
#pg-cookie-bar {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9999;
  width: min(880px, calc(100vw - 32px));
  background: var(--pg-bone);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(14,20,38,.16);
  padding: var(--space-4);
  transition: transform 0.4s var(--ease-reveal), opacity 0.4s var(--ease-reveal);
}

#pg-cookie-bar.is-hidden {
  transform: translateX(-50%) translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}

.pg-cookie-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pg-cookie-bar__text {
  flex: 1;
  min-width: 200px;
}

.pg-cookie-bar__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--pg-ink);
  margin-bottom: var(--space-1);
}

.pg-cookie-bar__desc {
  font-size: var(--text-sm);
  color: var(--pg-warm-grey-text);
  line-height: var(--leading-relaxed);
}

.pg-cookie-bar__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Categorieën panel (hidden by default) */
.pg-cookie-categories {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.pg-cookie-categories.is-hidden {
  display: none;
}

.pg-cookie-category {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.pg-cookie-category__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pg-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.pg-cookie-category__desc {
  font-size: 11px;
  color: var(--pg-warm-grey-text);
  margin-top: 2px;
  line-height: 1.4;
}

/* --- WhatsApp button --- */
#pg-wa-btn {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 9998;
  width: 56px;
  height: 56px;
  background: var(--pg-whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(7,94,42,.38);
  text-decoration: none;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
  animation: pgPulse 2.5s ease-out 3s infinite;
}

#pg-wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 36px rgba(7,94,42,.5);
  animation: none;
}

#pg-wa-btn svg {
  width: 28px;
  height: 28px;
  color: #fff;
  fill: #fff;
}

/* Tooltip */
#pg-wa-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--pg-ink);
  color: var(--pg-bone);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast);
}

#pg-wa-btn:hover::before {
  opacity: 1;
}

/* Shift up when cookie bar is visible on narrow screens */
@media (max-width: 560px) {
  #pg-wa-btn.cookie-visible {
    bottom: calc(var(--space-5) + 120px);
  }
}

/* --- Cookie restore button (bottom-left) --- */
#pg-cookie-restore {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  /* Above the hero/parallax stacking context so the button stays clickable
     on the homepage (E2E found .pg-home-hero intercepting at z 9997). */
  z-index: 10001;
  width: 42px;
  height: 42px;
  background: var(--pg-bone);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(14,20,38,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

#pg-cookie-restore.is-visible {
  opacity: 1;
  pointer-events: auto;
}

#pg-cookie-restore:hover {
  transform: scale(1.08);
}

#pg-cookie-restore svg {
  width: 18px;
  height: 18px;
  color: var(--pg-brass);
}

/* --- Related posters block (shared: landings + sublandings) --- */
.pg-related { padding: clamp(56px, 8vw, 96px) 0; }
.pg-related__head { text-align: center; max-width: 600px; margin: 0 auto clamp(36px, 5vw, 52px); }
.pg-related__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.08;
	color: var(--pg-ink);
	margin: 6px 0 0;
	text-wrap: balance;
}
.pg-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 32px);
	max-width: 760px;
	margin: 0 auto;
}
.pg-related__card {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 28px);
	text-decoration: none;
	background: var(--pg-bone);
	border: 1px solid rgba(27, 26, 23, .08);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(27, 26, 23, .05);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pg-related__poster {
	position: relative;
	flex-shrink: 0;
	width: 84px;
	aspect-ratio: 3 / 4;
	border-radius: 3px;
	overflow: hidden;
	padding: 7px;
	box-shadow: 0 14px 30px rgba(8, 11, 24, .28);
}
.pg-related__card--dark .pg-related__poster { background: #14110d; }
.pg-related__card--light .pg-related__poster { background: var(--pg-bone); border: 1px solid rgba(27,26,23,.1); }
.pg-related__poster .pg-poster-preview { position: absolute; inset: 7px; width: auto; height: auto; }
.pg-related__poster .pg-poster-preview__svg { width: 100%; height: 100%; object-fit: cover; }
.pg-related__edge { position: absolute; inset: 12px; border: 1px solid rgba(217,201,168,.26); pointer-events: none; }
.pg-related__card--light .pg-related__edge { border-color: rgba(27,26,23,.1); }
.pg-related__meta { display: flex; flex-direction: column; gap: 4px; }
.pg-related__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #5A6280;
}
.pg-related__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(20px, 3vw, 26px);
	color: var(--pg-ink);
	line-height: 1.1;
}
.pg-related__arrow { color: var(--pg-brass-text); transition: transform .25s ease; }
.pg-related__all {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: clamp(32px, 4vw, 44px) auto 0;
	width: max-content;
	font-weight: 700;
	font-size: 15px;
	color: var(--pg-brass-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(138, 98, 30, .35);
	padding-bottom: 2px;
}
.pg-related__all .pg-related__arrow { color: inherit; }
@media (hover: hover) {
	.pg-related__card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(27,26,23,.14); border-color: rgba(182,137,63,.3); }
	.pg-related__card:hover .pg-related__arrow { transform: translateX(4px); }
	.pg-related__all:hover .pg-related__arrow { transform: translateX(4px); }
}
@media (min-width: 620px) { .pg-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
	.pg-related__card, .pg-related__arrow { transition: none; }
}

/* --- Shared CTA starfield (paints via canvas[data-pg-starfield]) --- */
.pg-cta-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pg-cm-cta, .pg-sckc-cta, .pg-gbmn-cta, .pg-stp-cta { position: relative; overflow: hidden; }
.pg-cm-cta__wrap, .pg-sckc-cta__wrap, .pg-gbmn-cta__wrap, .pg-stp-cta__wrap { position: relative; z-index: 1; }
.pg-coll-cta__glow { z-index: 0; }

/* ============================================================
   WooCommerce notices (cart / checkout / account / shop)
   Warm card with a left accent stripe instead of WC's grey bar +
   navy top border. Loaded globally via main-v2 so every WC page matches.
   ============================================================ */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
ul.woocommerce-error {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--pg-card, #FBF8F2);
  border: 1px solid var(--pg-hairline, #E4DBCB);
  border-left: 3px solid var(--pg-brass, #B0875B);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
  list-style: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--pg-ink, #2A251F);
  box-shadow: 0 2px 10px rgba(42, 37, 31, 0.06);
}

/* Kill WC's absolutely-positioned ::before glyph (overlapped the text) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
ul.woocommerce-error li::before {
  content: none !important;
  display: none !important;
}

/* Success — green accent + faint green wash */
.woocommerce-message {
  border-left-color: var(--pg-success, #2F7D5B);
  background: rgba(47, 125, 91, 0.06);
}

/* Info — brass wash */
.woocommerce-info {
  border-left-color: var(--pg-brass, #B0875B);
  background: rgba(176, 135, 91, 0.07);
}

/* Error — soft red, stacked */
.woocommerce-error,
ul.woocommerce-error {
  border-left-color: var(--pg-error, #B23A48);
  background: rgba(178, 58, 72, 0.06);
  color: var(--pg-ink, #2A251F);
  flex-direction: column;
  align-items: flex-start;
}

ul.woocommerce-error li {
  list-style: none;
  margin: 0;
}

/* Action link inside a notice (e.g. "Bekijk winkelwagen") */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  flex: 0 0 auto;
  background: transparent;
  color: var(--pg-ink, #2A251F);
  border: 1px solid rgba(27, 26, 23, 0.22);
  padding: 8px 16px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  border-color: var(--pg-brass, #B0875B);
  color: var(--pg-brass-text, #8A6336);
  background: rgba(176, 135, 91, 0.06);
}
/* ==========================================================================
   CONFIGURATOR RESKIN TOKENS
   Scoped overrides that make the poster-designer plugin adopt the new
   midnight/brass/bone visual language without touching plugin code.

   MAPPING REFERENCE:
   Plugin var                     -> Theme token
   --pd-bg                        -> var(--pg-bone)
   --pd-bg-dark                   -> var(--pg-midnight)
   --pd-accent                    -> var(--pg-brass)
   --pd-accent-hover              -> var(--pg-brass-glow)
   --pd-text                      -> var(--pg-ink)
   --pd-text-muted                -> var(--pg-warm-grey)
   --pd-border                    -> var(--color-border)
   --pd-radius                    -> var(--radius-sm)
   --pd-font-body                 -> var(--font-body)
   --pd-font-display              -> var(--font-display)
   --pd-step-active-bg            -> var(--pg-brass)
   --pd-step-done-bg              -> var(--pg-midnight)
   --pd-step-todo-border          -> var(--color-border)
   --pd-card-selected-border      -> var(--pg-brass)
   --pd-chip-selected-bg          -> var(--pg-brass)
   --pd-chip-selected-color       -> var(--pg-bone)
   --pd-btn-primary-bg            -> var(--pg-brass)
   --pd-btn-primary-color         -> var(--pg-bone)
   --pd-btn-primary-hover         -> var(--pg-brass-glow)
   ========================================================================== */

/* Scope all overrides inside the plugin's root container.
   The plugin uses .pd-configurator as its outermost wrapper. */
.pd-configurator {
  /* Brand palette */
  --pd-bg:               var(--pg-bone);
  --pd-bg-panel:         var(--pg-bone);
  --pd-bg-dark:          var(--pg-midnight);
  --pd-accent:           var(--pg-brass);
  --pd-accent-hover:     var(--pg-brass-glow);
  --pd-accent-dim:       rgba(182,137,63,.12);

  /* Typography */
  --pd-text:             var(--pg-ink);
  --pd-text-muted:       var(--pg-warm-grey-text);
  --pd-font-body:        var(--font-body);
  --pd-font-display:     var(--font-display);

  /* Borders & radii */
  --pd-border:           var(--color-border);
  --pd-border-selected:  var(--pg-brass);
  --pd-radius:           var(--radius-sm);
  --pd-radius-pill:      var(--radius-pill);

  /* Shadows */
  --pd-shadow-poster:    var(--shadow-poster);
  --pd-shadow-brass:     var(--shadow-brass);

  /* Step indicator */
  --pd-step-active-bg:   var(--pg-brass);
  --pd-step-active-text: var(--pg-bone);
  --pd-step-done-bg:     var(--pg-midnight);
  --pd-step-done-text:   var(--pg-bone);
  --pd-step-todo-bg:     #fff;
  --pd-step-todo-border: var(--color-border);
  --pd-step-todo-text:   var(--pg-warm-grey-text);
  --pd-step-line-active: var(--pg-brass);
  --pd-step-line-todo:   var(--color-border);

  /* Cards (shape picker, palette picker) */
  --pd-card-bg:          #fff;
  --pd-card-border:      var(--color-border);
  --pd-card-selected-bg: #fff;
  --pd-card-selected-border: var(--pg-brass);

  /* Chips (quick-select) */
  --pd-chip-bg:          #fff;
  --pd-chip-border:      var(--color-border);
  --pd-chip-text:        var(--pg-ink);
  --pd-chip-selected-bg: var(--pg-brass);
  --pd-chip-selected-border: var(--pg-brass);
  --pd-chip-selected-text: var(--pg-bone);

  /* Toggle rows */
  --pd-toggle-on-border: var(--pg-brass);
  --pd-toggle-check-bg:  var(--pg-brass);
  --pd-toggle-check-text: var(--pg-midnight);

  /* Buttons */
  --pd-btn-primary-bg:    var(--pg-brass);
  --pd-btn-primary-text:  var(--pg-bone);
  --pd-btn-primary-hover: var(--pg-brass-glow);
  --pd-btn-ghost-border:  var(--color-border);
  --pd-btn-ghost-text:    var(--pg-ink);

  /* Badge */
  --pd-badge-bg:          var(--pg-brass);
  --pd-badge-text:        var(--pg-bone);

  /* Stepper qty */
  --pd-qty-border:       var(--color-border);
  --pd-qty-text:         var(--pg-ink);
}

/* --- Force correct fonts on plugin elements --- */
.pd-configurator,
.pd-configurator * {
  font-family: var(--font-body);
}

.pd-configurator h1,
.pd-configurator h2,
.pd-configurator h3,
.pd-configurator .pd-poster-title,
.pd-configurator .pd-step-title {
  font-family: var(--font-display);
}

/* --- Ensure brass accent on selected states --- */
.pd-configurator [data-selected="true"],
.pd-configurator .is-selected,
.pd-configurator .pd-card--selected {
  border-color: var(--pg-brass) !important;
  outline-color: var(--pg-brass) !important;
}

.pd-configurator input:focus,
.pd-configurator select:focus,
.pd-configurator textarea:focus {
  border-color: var(--pg-brass) !important;
  box-shadow: 0 0 0 3px rgba(182,137,63,.18) !important;
  outline: none !important;
}

/* --- Override any hardcoded background on the poster-designer topbar --- */
.pd-configurator .pd-topbar {
  background: var(--pg-bone) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--pg-ink) !important;
}

/* --- My designs tab in account --- */
.pd-account-designs {
  font-family: var(--font-body) !important;
  color: var(--pg-ink) !important;
}