/* ============================================================
   ZXAXZ — From Zion to God and Back, Through Christ.
   Minimal / cinematic — inspired by igloo.inc's restraint.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Cormorant+Garamond:ital@0;1&family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --navy-950:#050810;
  --navy-900:#0a0f1c;
  --navy-800:#111a2c;
  --mist-100:#eef1f6;
  --mist-300:#c7cede;
  --mist-500:#7d879c;
  --mist-700:#4a5266;
  --gold-100:#faf1cf;
  --gold-300:#f0c85a;
  --gold-500:#d4af37;
  --gold-700:#8f6d1f;
  --serif:'Cinzel', serif;
  --script:'Cormorant Garamond', serif;
  --mono:'Space Mono', monospace;
  --sans:'Inter', sans-serif;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--navy-950);
  color:var(--mist-100);
  font-family:var(--sans);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); letter-spacing:.03em; margin:0; }
p{ line-height:1.75; color:var(--mist-300); }

/* ---------- utility ---------- */
.mono-tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-500);
  display:inline-flex; align-items:center; gap:.5em;
}
.mono-tag::before{ content:'////'; opacity:.5; letter-spacing:0; }
.divider{ width:56px; height:1px; margin:1.4rem 0; background:linear-gradient(90deg,var(--gold-500),transparent); border:none; }
.divider.center{ margin-left:auto; margin-right:auto; }

/* ---------- film grain ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainShift 1s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-1%,1%); }
  50%{ transform:translate(1%,-1%); } 75%{ transform:translate(-1%,-1%); }
  100%{ transform:translate(0,0); }
}

/* ---------- fade-in on load ---------- */
.veil{
  position:fixed; inset:0; z-index:9998; background:var(--navy-950);
  opacity:1; pointer-events:none; transition:opacity 1.1s var(--ease);
}
body.loaded .veil{ opacity:0; }

/* ---------- nav (minimal, transparent) ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:2rem 2.4rem;
  pointer-events:none;
}
.site-nav > *{ pointer-events:auto; }
.site-nav.solid{ background:linear-gradient(to bottom, rgba(5,8,16,.7), transparent); padding-bottom:3.5rem; }
.brand{ display:block; }
.brand .brand-mark{
  font-family:var(--serif); font-weight:700; letter-spacing:.16em; font-size:1.1rem;
  color:var(--mist-100);
}
.brand .brand-sub{
  display:block; margin-top:.4rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.08em; color:var(--mist-500);
}
.nav-links{ display:flex; gap:1.3rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist-300); position:relative; padding-bottom:4px; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-500); transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--gold-300); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links .lang-switch-item{ display:flex; gap:.5rem; }
.nav-links .lang-switch-item .lang-btn{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
  background:none; border:1px solid rgba(240,230,200,.25); color:var(--mist-500);
  padding:.3rem .55rem; border-radius:2px; cursor:pointer; transition:color .3s, border-color .3s;
}
.nav-links .lang-switch-item .lang-btn:hover{ color:var(--gold-300); border-color:rgba(240,230,200,.45); }
.nav-links .lang-switch-item .lang-btn.is-active{ color:var(--navy-950); background:var(--mist-100); border-color:var(--mist-100); }
.nav-toggle{ display:none; }

/* ================= HOME HERO — photo, igloo-style chrome ================= */
.hero{
  position:relative; width:100%; height:100vh; min-height:560px;
  overflow:hidden; background:var(--navy-950);
  display:flex; align-items:center; justify-content:center;
}
/* the image frame is locked to the photo's true aspect ratio, so
   percentage-based hotspots always land exactly on the artwork —
   never cropped/shifted by the viewport's own aspect ratio. */
.hero-frame{
  position:relative;
  width:min(100%, 177.7vh);
  aspect-ratio:1672/941;
  max-height:100%;
  overflow:hidden;
}
.hero-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:kenburns 46s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  50%{ transform:scale(1.06) translate(-0.5%,-0.4%); }
  100%{ transform:scale(1.03) translate(0.4%,0.5%); }
}
.hero-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,16,.55) 0%, rgba(5,8,16,.05) 30%, rgba(5,8,16,.1) 60%, rgba(5,8,16,.75) 100%);
}
/* vignette + particles live inside the frame so they only ever cover
   the photo itself, never the empty letterbox padding around it */
.hero-vignette{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(3,5,10,.5) 85%, rgba(3,5,10,.8) 100%);
  pointer-events:none;
}

.hero-corner{
  position:absolute; z-index:5; font-family:var(--mono);
}
.corner-tr{ top:6rem; right:2.4rem; max-width:270px; text-align:right; }
.corner-tr .mono-tag{ justify-content:flex-end; }
.corner-tr p{
  margin-top:.9rem; font-family:var(--mono); font-size:.72rem; line-height:1.85;
  color:var(--mist-300); text-shadow:0 1px 8px rgba(0,0,0,.6);
}

.corner-bl{ bottom:2.2rem; left:2.4rem; display:flex; flex-direction:column; gap:.6rem; }
.scroll-cue{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--mist-300);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.scroll-cue .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-500); animation:dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ opacity:.4; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } }

/* ---- hotspots: thin hairline ring + side caption, quiet ---- */
.hotspot{
  position:absolute; width:7.6%; height:13.6%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:8;
}
.hz-zion-l{ left:13.34%; top:63.76%; }
.hz-christ-l{ left:30.74%; top:64.08%; }
.hz-god{ left:50.54%; top:65.5%; width:10.2%; height:18.4%; }
.hz-christ-r{ left:68.36%; top:64.29%; }
.hz-zion-r{ left:86.72%; top:64.51%; }

.hotspot .ring{
  position:absolute; inset:2%;
  border-radius:50%;
  border:1px solid rgba(240,230,200,.9);
  box-shadow:0 0 0 3px rgba(240,230,200,.08);
  opacity:0; transform:scale(.9);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.hotspot:hover .ring, .hotspot:focus-visible .ring{ opacity:1; transform:scale(1); }
.hotspot .tip{
  position:absolute; left:104%; top:50%; transform:translate(4px,-50%);
  white-space:nowrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mist-100);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.hotspot .tip::before{ content:'— '; color:var(--gold-500); }
.hotspot:hover .tip, .hotspot:focus-visible .tip{ opacity:1; transform:translate(10px,-50%); }
.hz-zion-r .tip, .hz-christ-r .tip{ left:auto; right:104%; transform:translate(-4px,-50%); }
.hz-zion-r .tip::before, .hz-christ-r .tip::before{ content:''; }
.hz-zion-r .tip::after, .hz-christ-r .tip::after{ content:' —'; color:var(--gold-500); }
.hz-zion-r:hover .tip, .hz-christ-r:hover .tip{ transform:translate(-10px,-50%); }
.hotspot:focus-visible{ outline:none; }

/* particles */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:4; }
.particle{
  position:absolute; bottom:-5%; border-radius:50%;
  background:radial-gradient(circle, rgba(240,230,200,.7), rgba(240,230,200,0) 70%);
  animation-name:floatUp; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.35; }
  100%{ transform:translateY(-115vh) translateX(var(--drift,20px)); opacity:0; }
}

/* ================= SUBPAGE HERO ================= */
.page-bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.page-bg img{
  position:absolute; inset:-5%; width:110%; height:110%; object-fit:cover;
  filter:blur(10px) brightness(.32) saturate(1.05);
  animation:kenburns 60s ease-in-out infinite alternate;
}
.page-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,16,.5), rgba(5,8,16,.85) 45%, var(--navy-950) 92%);
}

.page-hero{
  position:relative; padding:10.5rem 6vw 4.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.page-logo{
  width:118px; height:118px; border-radius:50%;
  border:1px solid rgba(240,230,200,.4);
  box-shadow:0 0 0 5px rgba(240,230,200,.05);
  margin-bottom:1.6rem;
}
.page-logo-pair{ display:flex; gap:1.2rem; margin-bottom:1.6rem; }
.page-logo-pair .page-logo{ width:88px; height:88px; margin-bottom:0; }

/* icon-based page logo (video/music/comments — no photo crop exists for these) */
.page-logo.page-logo-icon{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(20,32,54,.55), rgba(5,10,22,.92));
  color:var(--gold-300);
}
.page-logo-icon svg{ width:44%; height:44%; }

.page-hero .mono-tag{ margin-bottom:1rem; }
.page-hero h1{
  font-size:clamp(2.4rem,6.6vw,4.2rem); font-weight:700; letter-spacing:.08em;
  color:var(--mist-100);
}
.page-tagline{
  font-family:var(--script); font-style:italic; color:var(--mist-100);
  font-size:clamp(1.05rem,2.2vw,1.4rem); margin-top:.9rem; max-width:640px;
}
.verse-badges{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.8rem; }
.verse-badge{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--mist-300); border:1px solid rgba(240,230,200,.25); border-radius:2px;
  padding:.45rem 1rem;
}

/* ================= CONTENT ================= */
main{ position:relative; z-index:1; }
.section{ padding:4.5rem 0; }
.section.narrow{ max-width:720px; margin:0 auto; padding-left:6vw; padding-right:6vw; }
.section h2{
  font-size:clamp(1.5rem,3.2vw,2.1rem); color:var(--mist-100); font-weight:600;
  margin-bottom:1.1rem;
}
.section p + p{ margin-top:1.1rem; }

.verse-block{
  position:relative; margin:3rem auto; max-width:760px;
  padding:2.2rem 3rem; text-align:center;
  border-top:1px solid rgba(240,230,200,.18); border-bottom:1px solid rgba(240,230,200,.18);
}
.verse-block q{
  font-family:var(--script); font-style:italic; font-size:clamp(1.2rem,2.5vw,1.6rem);
  color:var(--mist-100); quotes:none; display:block;
}
.verse-block cite{
  display:block; margin-top:1rem; font-family:var(--mono); font-style:normal;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500);
}

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.two-col .icon-feature{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; }
.two-col .icon-feature img{ width:96px; height:96px; border-radius:50%; border:1px solid rgba(240,230,200,.3); }
.two-col .icon-feature h3{ color:var(--mist-100); font-size:1rem; letter-spacing:.06em; font-weight:600; }

/* journey */
.journey{ padding:5rem 0 7rem; text-align:center; }
.journey .mono-tag{ justify-content:center; margin-bottom:.8rem; }
.journey h2{ margin-bottom:2.6rem; }
.journey-track{ display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.journey-node{
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  padding:1.2rem 1.4rem; border-radius:4px; transition:transform .35s var(--ease), background .35s;
  text-align:center; width:140px;
}
.journey-node img{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(240,230,200,.3); transition:border-color .3s; }
.journey-node span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-300); }
.journey-node.is-link:hover{ background:rgba(240,230,200,.04); transform:translateY(-4px); }
.journey-node.is-link:hover img{ border-color:var(--gold-500); }
.journey-node.is-link:hover span{ color:var(--gold-300); }
.journey-node.current{ border:1px solid rgba(212,175,55,.4); }
.journey-node.current span{ color:var(--gold-300); }
.journey-arrow{ color:var(--mist-500); font-size:1.1rem; }

.btn{
  display:inline-block; margin-top:1rem; padding:.8rem 2rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-950); background:var(--mist-100);
  border-radius:2px; transition:transform .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:var(--gold-300); }
.btn.ghost{ background:transparent; border:1px solid rgba(240,230,200,.35); color:var(--mist-100); }
.btn.ghost:hover{ background:rgba(240,230,200,.08); color:var(--gold-300); }

/* ================= VIDEO ================= */
.media-frame{
  max-width:900px; margin:2.5rem auto 0; border:1px solid rgba(240,230,200,.18);
  padding:.6rem; background:rgba(255,255,255,.02);
}
.media-frame video{ display:block; width:100%; height:auto; background:#000; }
.media-frame iframe{ display:block; width:100%; aspect-ratio:16/9; height:auto; background:#000; border:0; }
.media-caption{
  margin-top:.9rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--mist-500); text-align:center;
}
.media-error{
  max-width:640px; margin:1.2rem auto 0; padding:1rem 1.4rem;
  border:1px solid rgba(240,180,120,.35); background:rgba(240,180,120,.06);
  font-size:.85rem; line-height:1.7; color:var(--mist-100); text-align:center;
}
.media-error code{
  font-family:var(--mono); font-size:.85em; color:var(--gold-300);
  background:rgba(240,230,200,.08); padding:.1em .4em; border-radius:2px;
}

/* ---- video gallery: thumbnail grid, click to play in the featured frame ---- */
.video-gallery{ padding:4rem 6vw 2rem; text-align:center; }
.video-gallery p{ font-size:.92rem; }
.video-gallery code{
  font-family:var(--mono); font-size:.85em; color:var(--gold-300);
  background:rgba(240,230,200,.08); padding:.1em .4em; border-radius:2px;
}
.video-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.4rem; max-width:940px; margin:2.4rem auto 0;
}
.video-card{
  all:revert; display:block; width:100%; padding:0; margin:0; text-align:left;
  background:rgba(255,255,255,.02); border:1px solid rgba(240,230,200,.18);
  cursor:pointer; transition:border-color .3s var(--ease), transform .3s var(--ease);
  font:inherit; color:inherit;
}
.video-card:hover, .video-card:focus-visible{ border-color:var(--gold-500); transform:translateY(-3px); outline:none; }
.video-card.is-active{ border-color:var(--gold-300); }
.video-card.is-active .card-title{ color:var(--gold-300); }
.thumb-wrap{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#04060c; overflow:hidden;
}
.thumb-wrap.is-loading{
  background:linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%);
  background-size:200% 100%; animation:shimmer 1.6s linear infinite;
}
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.thumb-wrap canvas, .thumb-wrap img{ display:block; width:100%; height:100%; object-fit:cover; }
.play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,8,16,.2); opacity:0; transition:opacity .3s var(--ease);
}
.video-card:hover .play-badge, .video-card:focus-visible .play-badge{ opacity:1; }
.play-badge svg{ width:36px; height:36px; color:#fdfaf1; filter:drop-shadow(0 2px 10px rgba(0,0,0,.7)); }
.card-title{
  display:block; padding:.75rem 1rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.05em; color:var(--mist-100);
}
.video-grid-empty{
  grid-column:1 / -1; font-family:var(--mono); font-size:.75rem; color:var(--mist-500); padding:2rem 0;
}

/* ================= PLACEHOLDER (e.g. Music — coming soon) ================= */
.placeholder-panel{
  max-width:600px; margin:2.5rem auto 0; padding:3rem 2rem; text-align:center;
  border:1px dashed rgba(240,230,200,.25);
}
.placeholder-panel .glyph{
  width:56px; height:56px; margin:0 auto 1.2rem; color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
}
.placeholder-panel .glyph svg{ width:100%; height:100%; }
.placeholder-panel h3{ color:var(--mist-100); font-size:1.1rem; font-weight:600; letter-spacing:.04em; }
.placeholder-panel p{ margin-top:.6rem; }

/* ================= SHOP ================= */
.shop-gallery{ padding:4rem 6vw 3rem; }
.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:2rem; max-width:1100px; margin:0 auto;
}
.shop-card{
  background:rgba(255,255,255,.02); border:1px solid rgba(240,230,200,.18);
  display:flex; flex-direction:column; transition:border-color .3s var(--ease);
}
.shop-card:hover{ border-color:var(--gold-500); }
.shop-carousel{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#04060c;
}
.shop-carousel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease;
}
.shop-carousel img.is-active{ opacity:1; }
.shop-card-body{ padding:1.2rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.shop-card-name{ font-family:var(--serif); font-size:1.1rem; color:var(--mist-100); }
.shop-price{ font-family:var(--mono); font-size:.9rem; color:var(--gold-300); }
.shop-size-select{
  background:rgba(255,255,255,.03); border:1px solid rgba(240,230,200,.22);
  color:var(--mist-100); font-family:var(--sans); font-size:.85rem;
  padding:.6rem .8rem; border-radius:2px;
}
.shop-card-actions{ display:flex; gap:.8rem; margin-top:auto; }
.shop-card-actions .btn{ margin-top:0; flex:1; text-align:center; border:none; cursor:pointer; }

.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(5,8,16,.8);
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  position:relative; max-width:480px; width:100%; background:var(--navy-950);
  border:1px solid rgba(240,230,200,.25); padding:2rem;
}
.modal-close{
  position:absolute; top:.8rem; right:1rem; background:none; border:none;
  color:var(--mist-300); font-size:1.6rem; cursor:pointer; line-height:1;
}
.modal-close:hover{ color:var(--gold-300); }
.modal-box h3{ font-family:var(--serif); font-size:1.3rem; color:var(--mist-100); margin-right:2rem; }
.modal-box p{ margin-top:1rem; color:var(--mist-300); line-height:1.7; }

/* ---------- shop cart ---------- */
.cart-fab{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:60;
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(240,230,200,.3);
  background:var(--navy-900); color:var(--mist-100); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.4); transition:border-color .3s, transform .2s;
}
.cart-fab:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.cart-fab-count{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--gold-500); color:var(--navy-950);
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.cart-items{ margin-top:1rem; max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:1rem; }
.cart-item{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; border-bottom:1px solid rgba(240,230,200,.12); padding-bottom:.8rem; }
.cart-item-info{ flex:1; min-width:140px; }
.cart-item-name{ color:var(--mist-100); font-size:.9rem; }
.cart-item-price{ color:var(--gold-300); font-family:var(--mono); font-size:.78rem; margin-top:.2rem; }
.cart-item-qty{ display:flex; align-items:center; gap:.5rem; }
.cart-item-qty button{
  width:26px; height:26px; border:1px solid rgba(240,230,200,.3); background:none;
  color:var(--mist-100); cursor:pointer; border-radius:2px; font-size:1rem; line-height:1;
}
.cart-item-qty button:hover{ border-color:var(--gold-500); color:var(--gold-300); }
.cart-item-qty span{ min-width:1.4rem; text-align:center; font-family:var(--mono); font-size:.85rem; }
.cart-item-remove{
  background:none; border:none; color:var(--mist-500); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
}
.cart-item-remove:hover{ color:var(--gold-300); }
.cart-subtotal{ margin-top:1.2rem; font-family:var(--mono); font-size:.95rem; color:var(--mist-100); text-align:right; }
#cart-checkout-btn{ width:100%; margin-top:1rem; }
#cart-checkout-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ================= COMMENTS ================= */
.comment-note{
  max-width:600px; margin:0 auto 2rem; text-align:center;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--mist-500);
  line-height:1.7;
}
.comment-form{
  max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:1rem;
}
.comment-form input, .comment-form textarea{
  width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(240,230,200,.22);
  color:var(--mist-100); font-family:var(--sans); font-size:.92rem;
  padding:.8rem 1rem; border-radius:2px; resize:vertical;
  transition:border-color .3s;
}
.comment-form input:focus, .comment-form textarea:focus{
  outline:none; border-color:var(--gold-500);
}
.comment-form textarea{ min-height:110px; }
.comment-form .btn{ align-self:flex-start; border:none; cursor:pointer; }
.comment-status{
  font-family:var(--mono); font-size:.7rem; color:var(--gold-300);
  min-height:1.2em; letter-spacing:.04em;
}
.comment-list{
  max-width:600px; margin:3rem auto 0; display:flex; flex-direction:column; gap:1.2rem;
}
.comment-item{
  border-top:1px solid rgba(240,230,200,.14); padding-top:1.2rem;
}
.comment-item .comment-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--gold-500);
  text-transform:uppercase;
}
.comment-item .comment-head time{ color:var(--mist-500); text-transform:none; letter-spacing:.02em; }
.comment-item p{ margin-top:.5rem; color:var(--mist-100); line-height:1.7; }
.comment-empty{
  text-align:center; font-family:var(--mono); font-size:.72rem; color:var(--mist-500);
  padding:1rem 0;
}
.comment-actions{ margin-top:.6rem; display:flex; align-items:center; gap:1.2rem; }
.comment-reply-btn{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  background:none; border:none; color:var(--gold-500); cursor:pointer; padding:0;
}
.comment-reply-btn:hover{ color:var(--gold-300); }
.comment-reply-form{
  margin-top:.8rem; display:flex; flex-direction:column; gap:.6rem;
}
.comment-reply-form input, .comment-reply-form textarea{
  width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(240,230,200,.22);
  color:var(--mist-100); font-family:var(--sans); font-size:.88rem;
  padding:.6rem .8rem; border-radius:2px; resize:vertical;
  transition:border-color .3s;
}
.comment-reply-form input:focus, .comment-reply-form textarea:focus{
  outline:none; border-color:var(--gold-500);
}
.comment-reply-form textarea{ min-height:70px; }
.comment-reply-form .btn{ align-self:flex-start; border:none; cursor:pointer; }
.comment-replies{
  margin-top:1rem; padding-left:1.2rem; border-left:1px solid rgba(240,230,200,.14);
  display:flex; flex-direction:column; gap:1rem;
}
.comment-load-more{
  align-self:center; cursor:pointer;
}

/* ================= LANGUAGE SWITCH (EN / NL) ================= */
/* Both languages live in the DOM as sibling spans; only display toggles.
   These spans never carry their own layout — display:inline is always a safe
   "shown" value since the surrounding element (p, li, label, mono-tag...)
   owns the real layout and simply blockifies/flexifies its children as needed. */
[data-i18n-nl]{ display:none; }
html[data-lang="nl"] [data-i18n-en]{ display:none; }
html[data-lang="nl"] [data-i18n-nl]{ display:inline; }

.lang-switch{
  display:inline-flex; gap:.5rem; margin-bottom:1.6rem;
}
.lang-btn{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist-500); background:transparent; border:1px solid rgba(240,230,200,.25);
  padding:.45rem 1rem; border-radius:2px; cursor:pointer; transition:color .3s, border-color .3s, background .3s;
}
.lang-btn:hover{ color:var(--gold-300); border-color:rgba(240,230,200,.45); }
.lang-btn.is-active{ color:var(--navy-950); background:var(--mist-100); border-color:var(--mist-100); }

/* ================= TESTIMONY (getuigenis) ================= */
.testimony-intro{ max-width:680px; margin:0 auto; }
.testimony-intro p{ font-size:1.02rem; }
.testimony-help{
  max-width:680px; margin:2.6rem auto 0; padding:1.6rem 1.8rem;
  border:1px solid rgba(240,230,200,.18); background:rgba(255,255,255,.02);
}
.testimony-help p{ font-size:.96rem; }
.testimony-help ol{
  margin:1rem 0; padding-left:1.3rem; color:var(--mist-100); line-height:1.85; font-size:.98rem;
}
.testimony-help ol li + li{ margin-top:.35rem; }
.testimony-help .field-hint{ margin-top:1rem; font-family:var(--mono); font-size:.72rem; color:var(--gold-500); letter-spacing:.03em; }

.testimony-form{
  max-width:680px; margin:2.6rem auto 0; display:flex; flex-direction:column; gap:1.6rem;
}
.testimony-field{ display:flex; flex-direction:column; gap:.55rem; }
.testimony-field label, .testimony-field legend{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mist-300); padding:0;
}
.testimony-field .field-note{
  font-family:var(--sans); font-size:.82rem; color:var(--mist-500); text-transform:none; letter-spacing:normal;
}
.testimony-field input[type="email"],
.testimony-field input[type="text"],
.testimony-field select,
.testimony-field textarea{
  width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(240,230,200,.22);
  color:var(--mist-100); font-family:var(--sans); font-size:1.05rem; line-height:1.6;
  padding:1rem 1.1rem; border-radius:3px; resize:vertical;
  transition:border-color .3s;
}
.testimony-field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d4af37'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:1.1rem;
  padding-right:2.8rem;
}
.testimony-field input:focus, .testimony-field select:focus, .testimony-field textarea:focus{
  outline:none; border-color:var(--gold-500);
}
.testimony-field textarea{ min-height:220px; }
.testimony-field textarea#testimony-remark{ min-height:120px; }
.char-counter{
  align-self:flex-end; font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--mist-500);
}
.char-counter.is-invalid{ color:#e8927c; }

.radio-group{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.radio-option{
  display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:1rem; color:var(--mist-100);
  cursor:pointer;
}
.radio-option input[type="radio"]{
  width:1.2rem; height:1.2rem; accent-color:var(--gold-500); cursor:pointer; margin:0;
}

.consent-group{
  display:flex; flex-direction:column; gap:1.1rem; padding:0; margin:0; border:none;
}
.consent-item{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1rem 1.1rem; border:1px solid rgba(240,230,200,.18); border-radius:3px;
  background:rgba(255,255,255,.015);
}
.consent-item input[type="checkbox"]{
  flex-shrink:0; width:1.35rem; height:1.35rem; margin:.1rem 0 0; accent-color:var(--gold-500); cursor:pointer;
}
.consent-item label{
  font-family:var(--sans); font-size:.94rem; line-height:1.6; color:var(--mist-100); cursor:pointer;
}

.testimony-form .btn{
  align-self:flex-start; border:none; cursor:pointer; font-size:.78rem; padding:1rem 2.4rem;
}
.testimony-form .btn:disabled{
  opacity:.4; cursor:not-allowed; transform:none; background:var(--mist-100);
}
.testimony-error{
  font-family:var(--mono); font-size:.75rem; color:#e8927c; letter-spacing:.02em; min-height:1.2em;
}
.testimony-privacy-note{
  max-width:680px; margin:1.6rem auto 0; text-align:center;
  font-family:var(--mono); font-size:.72rem; color:var(--mist-500);
}
.testimony-privacy-note a{ color:var(--gold-500); text-decoration:underline; text-underline-offset:3px; }
.testimony-privacy-note a:hover{ color:var(--gold-300); }

.testimony-thanks{
  max-width:640px; margin:3rem auto 0; padding:2.6rem 2.2rem; text-align:center;
  border:1px solid rgba(240,230,200,.25); background:rgba(255,255,255,.02);
}
.testimony-thanks h2{ color:var(--mist-100); }
.testimony-thanks p{ margin-top:1rem; font-size:1rem; }
.testimony-thanks .verse-block{ margin-bottom:0; }

/* honeypot: kept out of view for people, but present for bots that fill every field */
.testimony-hp{
  position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;
}

@media (max-width:640px){
  .testimony-help{ padding:1.3rem 1.2rem; }
  .consent-item{ padding:.9rem; }
}

/* ================= FOOTER ================= */
footer{ position:relative; padding:4rem 6vw 2.2rem; text-align:center; border-top:1px solid rgba(240,230,200,.12); }
.footer-verse{ max-width:720px; margin:0 auto 2.2rem; padding:1.5rem 2rem; border:1px solid rgba(240,230,200,.18); }
.footer-verse p{ font-family:var(--script); font-style:italic; color:var(--mist-100); font-size:1.1rem; }
.footer-verse cite{ display:block; margin-top:.6rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; color:var(--gold-500); font-style:normal; }
.footer-support{ margin-bottom:2rem; }
.footer-links{ display:flex; gap:1.8rem; justify-content:center; margin-bottom:1.4rem; list-style:none; padding:0; }
.footer-links a{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-300); }
.footer-links a:hover{ color:var(--gold-300); }
.copyright{ font-family:var(--mono); font-size:.68rem; color:var(--mist-700); letter-spacing:.04em; }

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,300px);
    background:var(--navy-900); flex-direction:column; align-items:center; justify-content:center; gap:2rem;
    transform:translateX(100%); transition:transform .4s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.5);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
    z-index:80; padding:6px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--mist-100); display:block; border-radius:1px; }
  .two-col{ grid-template-columns:1fr; }
  .journey-node{ width:112px; padding:1rem; }
  .corner-tr{ max-width:200px; }
  .corner-tr p{ font-size:.66rem; line-height:1.7; }
}
/* Portrait orientation (not just narrow width) is the real trigger:
   this poster is landscape-shaped, so any tall/narrow viewport —
   a phone, or a tablet held upright — leaves large empty letterbox
   gaps if forced into the full 100vh cinematic frame. */
@media (orientation:portrait){
  .corner-tr{ display:none; }
  .hotspot .tip{ display:none; }

  /* collapse the hero from a full-bleed 100vh backdrop into a compact
     stacked poster — on a narrow/tall screen, forcing 100vh around a
     wide image just leaves huge empty gaps above and below it. The
     fixed site-nav now overlays the top, same as every other page,
     so this needs the same clearance .page-hero uses. */
  .hero{
    height:auto; min-height:0; overflow:visible;
    display:flex; flex-direction:column; padding:10.5rem 0 0;
  }
  .hero-frame{ order:1; width:100%; max-height:none; }
  .hero-vignette{ display:none; }
  .particles{ display:none; }
  .hero-corner{ position:static; z-index:auto; max-width:none; }
  .corner-bl{ order:2; padding:1.2rem 1.4rem 0; }
}
@media (max-width:480px){
  .site-nav{ padding:1.6rem 1.4rem; }
}