:root {
    --hout: #17110d; --papier: #f3e9d4; --inkt: #1d1712; --rood: #c8102e; --rood-donker: #9c0c23;
    --goud: #d6a85a; --zacht: #6e6152; --licht: #cbbda4;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; color: var(--papier); font: 16px/1.65 "Zen Kaku Gothic New", system-ui, sans-serif;
    background-color: var(--hout);
    background-image:
      repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 140px);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  [hidden] { display: none !important; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

  .noren { position: sticky; top: 0; z-index: 20; background: var(--rood); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
  .noren .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
  .noren::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
    background: repeating-linear-gradient(90deg, var(--rood) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); }
  .logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--papier); white-space: nowrap; }
  .logo-jp { font-family: "Yuji Syuku", serif; font-size: 26px; line-height: 1; }
  .logo-nl { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 19px; letter-spacing: .02em; }
  .noren nav { display: flex; gap: 26px; font-weight: 500; font-size: 15px; }
  .noren nav a { text-decoration: none; opacity: .9; }
  .noren nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
  .kop-knop { background: var(--papier); color: var(--inkt); text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 4px; font-size: 14px; white-space: nowrap; }
  .kop-knop b { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--rood); color: #fff; text-align: center; font-size: 12px; }
  @media (max-width: 860px) { .noren nav { display: none; } }
  @media (max-width: 480px) { .logo-nl { font-size: 16px; } .logo-jp { font-size: 22px; } }

  .hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 84px 0 72px; }
  .lantaarns { position: absolute; top: 0; left: 0; display: flex; gap: 22px; }
  .lantaarn { position: relative; width: 46px; height: 64px; margin-top: 12px; }
  .lantaarn::before { content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 12px; background: #000; }
  .lantaarn span { position: absolute; inset: 0; border-radius: 50% / 42%;
    background: radial-gradient(ellipse at 50% 45%, #ff5a4f 0%, var(--rood) 55%, #6d0716 100%);
    box-shadow: 0 0 32px rgba(255,80,60,.55), inset 0 0 0 1px rgba(0,0,0,.25);
    display: grid; place-items: center; font-family: "Yuji Syuku", serif; color: #1a0c08; font-size: 18px; }
  .lantaarn span::before, .lantaarn span::after { content: ""; position: absolute; left: 22%; right: 22%; height: 5px; background: #111; border-radius: 2px; }
  .lantaarn span::before { top: -2px; }
  .lantaarn span::after { bottom: -2px; }
  .kicker { color: var(--goud); letter-spacing: .18em; text-transform: uppercase; font-size: 13px; font-weight: 700; margin: 0 0 16px; }
  .hero h1 { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.08; margin: 0 0 20px; }
  .hero h1 em { font-style: normal; color: var(--rood); text-shadow: 0 0 24px rgba(200,16,46,.35); }
  .hero p.lead { color: var(--licht); font-size: 18px; max-width: 46ch; margin: 0 0 30px; }
  .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
  .knop { display: inline-block; padding: 14px 24px; border-radius: 4px; font-weight: 700; text-decoration: none; border: 1px solid var(--papier); }
  .knop.rood { background: var(--rood); border-color: var(--rood); color: #fff; }
  .knop.rood:hover { background: var(--rood-donker); border-color: var(--rood-donker); }
  .knop:not(.rood):hover { background: var(--papier); color: var(--inkt); }
  .lijst { padding: 14px; background: linear-gradient(135deg, #5a3d26, #2c1d12); border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
  .lijst img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }
  @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 40px; padding: 96px 0 48px; } }

  .strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(243,233,212,.15); border-bottom: 1px solid rgba(243,233,212,.15); }
  .strip div { padding: 20px; border-right: 1px solid rgba(243,233,212,.15); }
  .strip div:last-child { border-right: 0; }
  .strip b { display: block; font-family: "Shippori Mincho B1", serif; font-size: 17px; }
  .strip span { color: var(--licht); font-size: 14px; }
  @media (max-width: 860px) { .strip { grid-template-columns: 1fr 1fr; } .strip div:nth-child(2) { border-right: 0; } .strip div:nth-child(-n+2) { border-bottom: 1px solid rgba(243,233,212,.15); } }

  section { padding: 80px 0; }
  .kop { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
  .kop .jp { font-family: "Yuji Syuku", serif; color: var(--rood); font-size: 30px; }
  h2 { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: clamp(30px, 4vw, 42px); margin: 0; }
  .intro { color: var(--licht); margin: 0 0 32px; max-width: 62ch; }

  .fudas { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 18px; margin-bottom: 18px; scrollbar-width: none; }
  .fudas::-webkit-scrollbar { display: none; }
  .fuda { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 104px; padding: 12px 14px 10px; text-decoration: none; color: var(--inkt); background: linear-gradient(180deg, #e6cfa3, #cfb27c); border-radius: 3px 3px 10px 10px; box-shadow: 0 6px 12px rgba(0,0,0,.35); font-size: 13px; font-weight: 700; position: relative; }
  .fuda::before { content: ""; position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--hout); }
  .fuda-jp { font-family: "Yuji Syuku", serif; font-size: 17px; color: var(--rood-donker); margin-top: 6px; font-weight: 400; }
  .menu-raster { columns: 2 480px; column-gap: 24px; }
  .papier { break-inside: avoid; display: flex; gap: 18px; margin: 0 0 24px; padding: 28px 22px 22px 18px; color: var(--inkt);
    background: var(--papier); background-image: radial-gradient(rgba(120,90,50,.07) 1px, transparent 1px); background-size: 5px 5px;
    border-radius: 3px; box-shadow: 0 18px 36px -18px rgba(0,0,0,.8); scroll-margin-top: 90px; }
  .cat-jp { writing-mode: vertical-rl; font-family: "Yuji Syuku", serif; color: var(--rood); font-size: 26px; letter-spacing: .1em; border-left: 2px solid var(--rood); padding-left: 10px; flex: none; }
  .cat-inhoud { flex: 1; min-width: 0; }
  .papier h3 { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 25px; margin: 0; }
  .cat-sub { margin: 2px 0 0; color: var(--zacht); font-size: 14px; }
  .papier ul { list-style: none; padding: 0; margin: 18px 0 0; }
  .papier li { padding: 10px 0; border-top: 1px dashed rgba(29,23,18,.18); }
  .papier li:first-child { border-top: 0; padding-top: 0; }
  .regel { display: flex; align-items: center; gap: 8px; }
  .naam { font-weight: 700; }
  .stip { flex: 1; border-bottom: 2px dotted rgba(29,23,18,.3); min-width: 16px; }
  .prijs { font-family: "Shippori Mincho B1", serif; font-weight: 800; white-space: nowrap; }
  .prijs::before { content: "\20AC\00a0"; font-weight: 600; font-size: .9em; }
  .papier li p { margin: 2px 40px 0 0; color: var(--zacht); font-size: 14px; }
  .tag { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 11px; font-weight: 700; border-radius: 10px; vertical-align: 2px; text-transform: uppercase; letter-spacing: .04em; }
  .tag.pittig { background: #f6d3cf; color: var(--rood-donker); }
  .tag.vega { background: #dcebd2; color: #2f5d1f; }
  .menu-noot { color: var(--licht); font-size: 14px; margin-top: 4px; }
  .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--rood); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .1s, background .15s; }
  .plus:hover { background: var(--rood-donker); }
  .plus:active { transform: scale(.9); }
  .plus.ok { background: #2f7d32; }

  .galerij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .galerij img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
  @media (max-width: 720px) { .galerij { grid-template-columns: repeat(2, 1fr); } }

  .stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .stap { border-top: 1px solid rgba(243,233,212,.25); padding-top: 18px; }
  .stap .nr { font-family: "Yuji Syuku", serif; color: var(--rood); font-size: 34px; line-height: 1; }
  .stap h3 { font-family: "Shippori Mincho B1", serif; margin: 10px 0 6px; font-size: 20px; }
  .stap p { margin: 0; color: var(--licht); }
  @media (max-width: 860px) { .stappen { grid-template-columns: 1fr; } }

  .betalen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .betaal { display: flex; gap: 20px; align-items: flex-start; padding: 26px; color: var(--inkt); background: var(--papier); border-radius: 3px; box-shadow: 0 18px 36px -18px rgba(0,0,0,.8); }
  .kaartje { flex: none; width: 84px; height: 54px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .06em; font-size: 14px; }
  .kaartje.vvv { background: linear-gradient(135deg, #17357a, #2c64cf); }
  .kaartje.eigen { background: linear-gradient(135deg, var(--rood-donker), #e0413a); font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 22px; letter-spacing: 0; }
  .betaal h3 { font-family: "Shippori Mincho B1", serif; font-size: 21px; margin: 0 0 6px; }
  .betaal p { margin: 0; color: var(--zacht); }
  @media (max-width: 720px) { .betalen { grid-template-columns: 1fr; } }

  .gegevens-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 30px; color: var(--inkt); background: var(--papier); border-radius: 3px; }
  .gegevens-blok h3 { font-family: "Shippori Mincho B1", serif; margin: 0 0 12px; font-size: 20px; }
  dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 15px; }
  dt { font-weight: 700; }
  dd { margin: 0; color: var(--zacht); }
  @media (max-width: 720px) { .gegevens-blok { grid-template-columns: 1fr; padding: 22px; } dl { grid-template-columns: 1fr; gap: 0; } dd { margin-bottom: 10px; } }

  .wagenbalk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: none; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; background: var(--papier); color: var(--inkt); border-radius: 999px; box-shadow: 0 16px 40px rgba(0,0,0,.55); text-decoration: none; font-weight: 700; white-space: nowrap; }
  .wagenbalk.zichtbaar { display: flex; }
  .wagenbalk .ga { background: var(--rood); color: #fff; padding: 9px 16px; border-radius: 999px; }

  .bestel-kop { padding: 56px 0 8px; }
  .bestel { display: grid; grid-template-columns: 1fr 390px; gap: 28px; align-items: start; padding: 24px 0 110px; }
  .bestel .menu-raster { columns: 1; }
  .wagen { position: sticky; top: 90px; color: var(--inkt); background: var(--papier); border-radius: 3px; padding: 24px; box-shadow: 0 18px 36px -18px rgba(0,0,0,.8); max-height: calc(100vh - 110px); overflow-y: auto; scroll-margin-top: 90px; }
  .wagen h2 { font-size: 26px; margin: 0 0 2px; }
  .wagen .leeg { color: var(--zacht); margin: 10px 0 0; }
  .wagen ul { list-style: none; margin: 12px 0 0; padding: 0; }
  .wagen li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 0; border-top: 1px dashed rgba(29,23,18,.18); font-size: 15px; }
  .wagen li:first-child { border-top: 0; }
  .wagen li .bedrag { font-weight: 700; text-align: right; }
  .aantal { display: inline-flex; align-items: center; gap: 8px; color: var(--zacht); font-size: 14px; }
  .aantal button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(29,23,18,.3); background: #fff; cursor: pointer; font-size: 15px; line-height: 1; color: var(--inkt); }
  .bezorgregel { display: flex; justify-content: space-between; font-size: 15px; padding: 10px 0 2px; border-top: 1px dashed rgba(29,23,18,.18); }
  .totaal { display: flex; justify-content: space-between; font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 20px; padding: 14px 0 4px; border-top: 2px solid var(--inkt); margin-top: 6px; }
  .wagen .noot { color: var(--zacht); font-size: 13px; margin: 0 0 16px; }
  .wagen form { display: grid; gap: 10px; margin-top: 14px; }
  .wagen label { font-size: 13px; font-weight: 700; display: grid; gap: 4px; }
  .wagen input, .wagen select, .wagen textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 10px 12px; border: 1px solid rgba(29,23,18,.25); border-radius: 4px; background: #fff; color: var(--inkt); width: 100%; }
  .wagen textarea { min-height: 60px; resize: vertical; }
  .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .betaalkeuze { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
  .betaalkeuze legend { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .betaalkeuze label { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; padding: 10px 12px; border: 1px solid rgba(29,23,18,.2); border-radius: 4px; background: #fff; cursor: pointer; }
  .betaalkeuze input { width: auto; margin: 0; }
  .verstuur { margin-top: 4px; border: 0; cursor: pointer; background: #1fa855; color: #fff; font: inherit; font-weight: 700; font-size: 16px; padding: 14px; border-radius: 4px; }
  .verstuur:hover { background: #188a45; }
  .fout { color: var(--rood-donker); font-size: 14px; margin: 0; }
  .fout:empty { display: none; }
  @media (max-width: 960px) { .bestel { grid-template-columns: 1fr; } .wagen { position: static; max-height: none; } }

  footer { padding: 30px 0 46px; border-top: 1px solid rgba(243,233,212,.15); color: var(--licht); font-size: 14px; }
  footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }