/* Noa & Dje -- header v3: 1-op-1 naar Angela's "Header voorstel" (HTML, 26-10-2026).
   Eigen ndh-klassen, zodat de oude .announce/.masthead/.menubar-regels in global.css
   er niet tussen kunnen komen. Fonts + --serif/--script/--sans: assets/css/fonts.css.
   JS: assets/js/header-v3.js. */

.ndh-announce, .ndh-bar, .ndh-mnav {
  --ndh-bg:#FFFBF8; --ndh-beige:#E7D9CC; --ndh-rose:#D9B5B0; --ndh-marsala:#955251;
  --ndh-ink:#4a3b38; --ndh-muted:#7b6a66; --ndh-line:#f1e7e1;
  font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ndh-ink);
  -webkit-font-smoothing:antialiased;
}
.ndh-announce *, .ndh-bar *, .ndh-mnav * { box-sizing:border-box; }
.ndh-bar p, .ndh-bar h4, .ndh-bar ul, .ndh-mnav p, .ndh-mnav ul { margin:0; padding:0; }
.ndh-bar a, .ndh-mnav a { color:inherit; text-decoration:none; }
.ndh-bar img, .ndh-mnav img { display:block; width:100%; height:100%; object-fit:cover; max-width:none; border-radius:0; }

/* ---------- Bovenbalk (wisselende berichten) ---------- */
.ndh-announce { background:var(--ndh-marsala); color:#fff; text-align:center; height:42px; position:relative; overflow:hidden; }
.ndh-announce .ndh-msg {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  opacity:0; transition:opacity .6s; font-size:13px; line-height:1.6; letter-spacing:.06em; padding:0 16px; white-space:nowrap; margin:0; color:#fff;
}
.ndh-announce .ndh-msg.is-on { opacity:1; }
.ndh-announce .ndh-msg:not(.is-on) { pointer-events:none; }
.ndh-announce .ndh-sc { font-family:var(--script); font-weight:700; font-size:13px; letter-spacing:.04em; line-height:1; position:relative; top:1px; text-transform:none; }
.ndh-announce .ndh-msg b { font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.ndh-announce .ndh-dot { opacity:.6; }
.ndh-announce .ndh-only-m { display:none; }
@media (prefers-reduced-motion: reduce) { .ndh-announce .ndh-msg { transition:none; } }

/* ---------- Sticky blok: logo-rij + menu ---------- */
.ndh-bar { position:sticky; top:0; z-index:100; background:var(--ndh-bg); }
body.admin-bar .ndh-bar { top:32px; }
@media screen and (max-width:782px) { body.admin-bar .ndh-bar { top:46px; } }
@media screen and (max-width:600px) { body.admin-bar .ndh-bar { top:0; } }
body.nd-search-open .ndh-bar { z-index:10001; }

/* ---------- Logo-rij ---------- */
.ndh-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 36px; background:var(--ndh-bg); }
.ndh-burger { display:none; }
.ndh-hello { display:flex; align-items:center; gap:12px; justify-self:start; }
.ndh-face { width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid var(--ndh-rose); flex:none; display:block; }
.ndh-bar .ndh-face img, .ndh-mnav .ndh-face img { object-position:50% 20%; }
.ndh-hello p { font-size:12.5px; line-height:1.35; color:var(--ndh-muted); }
.ndh-hello p b { display:block; color:var(--ndh-ink); font-weight:600; font-size:13px; transition:color .2s; }
.ndh-hello:hover p b { color:var(--ndh-marsala); }
.ndh-logo { display:block; justify-self:center; }
.ndh-bar .ndh-logo img { width:200px; height:auto; object-fit:contain; }
.ndh-tools { display:flex; justify-content:flex-end; gap:6px; }
.ndh-tool {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 12px; border-radius:12px;
  font-family:var(--sans); font-size:10.5px; line-height:1.6; letter-spacing:.1em; text-transform:uppercase; color:var(--ndh-ink);
  position:relative; background:none; border:0; cursor:pointer;
}
.ndh-tool:hover, .ndh-tool:focus-visible { background:#f3e8e3; color:var(--ndh-marsala); }
.ndh-tool svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; }
.ndh-tool .nd-cart-count { position:absolute; top:2px; right:8px; }
.ndh-tool .nd-cart-count .cart-count {
  position:static; display:block; width:auto; height:auto; border-radius:999px;
  background:var(--ndh-marsala); color:#fff; font-size:10px; line-height:1; padding:3px 5px; font-weight:600; letter-spacing:0;
}

/* ---------- Menu ---------- */
.ndh-nav { background:var(--ndh-beige); position:relative; border-top:1px solid #efe3d9; }
.ndh-nav > ul { list-style:none; display:flex; justify-content:center; align-items:center; gap:6px; padding:0 20px; margin:0; }
.ndh-nav li { position:relative; list-style:none; }
.ndh-nav li > a {
  display:flex; align-items:center; gap:6px; padding:17px 18px;
  font-size:12px; font-weight:500; line-height:1.6; letter-spacing:.16em; text-transform:uppercase; position:relative; color:var(--ndh-ink);
  transition:color .2s;
}
.ndh-nav li > a::after {
  content:""; position:absolute; left:18px; right:18px; bottom:10px; height:2px; background:var(--ndh-marsala);
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.ndh-nav li:hover > a::after, .ndh-nav li.is-open > a::after, .ndh-nav li > a.is-active::after { transform:scaleX(1); }
.ndh-nav li:hover > a, .ndh-nav li.is-open > a, .ndh-nav li > a.is-active { color:var(--ndh-marsala); }
.ndh-nav .ndh-car { width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:2; }
.ndh-nav .ndh-new i { width:7px; height:7px; border-radius:50%; background:var(--ndh-marsala); display:inline-block; }
.ndh-nav .ndh-sale > a { color:var(--ndh-marsala); font-weight:600; }
.ndh-nav .ndh-spaar > a { background:#fff; border-radius:999px; padding:9px 18px; margin-left:10px; color:var(--ndh-marsala); box-shadow:inset 0 0 0 1.5px var(--ndh-marsala); transition:background .2s, color .2s; }
.ndh-nav .ndh-spaar > a::after { display:none; }
.ndh-nav .ndh-spaar > a:hover { background:var(--ndh-marsala); color:#fff; }

/* Uitklappaneel */
.ndh-drop {
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(6px);
  background:var(--ndh-bg); border-radius:0 0 20px 20px; box-shadow:0 18px 40px rgba(80,50,40,.18);
  padding:26px 30px 24px; min-width:560px; opacity:0; visibility:hidden; transition:.2s; z-index:5;
  display:grid; grid-template-columns:1fr 1fr 180px; gap:6px 28px; text-align:left;
}
.ndh-drop::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }
.ndh-nav li:hover > .ndh-drop, .ndh-nav li:focus-within > .ndh-drop, .ndh-nav li.is-open > .ndh-drop { opacity:1; visibility:visible; transform:translateX(-50%); }
.ndh-nav li.is-closed > .ndh-drop { opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px); }
.ndh-drop h4 { grid-column:1/3; font-family:var(--serif); font-weight:600; font-size:22px; line-height:1.1; margin:0 0 6px; color:var(--ndh-ink); letter-spacing:normal; text-transform:none; }
.ndh-drop h4 em { font-family:var(--script); font-style:normal; font-weight:700; color:var(--ndh-marsala); font-size:.78em; }
.ndh-drop a.ndh-c { font-size:14px; line-height:1.6; text-transform:none; letter-spacing:0; padding:3px 0; color:var(--ndh-ink); font-weight:400; display:block; }
.ndh-drop a.ndh-c:hover, .ndh-drop a.ndh-c:focus-visible, .ndh-drop a.ndh-c.is-active { color:var(--ndh-marsala); text-decoration:underline; text-underline-offset:4px; }
.ndh-drop a.ndh-all { grid-column:1/3; margin-top:8px; font-size:12px; line-height:1.6; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ndh-marsala); }
.ndh-drop .ndh-pic { grid-row:1/8; grid-column:3; border-radius:14px; overflow:hidden; min-height:170px; display:block; }
.ndh-drop .ndh-cols { display:contents; }

/* ---------- Mobiel menu (paneel onder de logo-rij) ---------- */
.ndh-mnav { display:none; }

@media (max-width:980px) {
  .ndh-head { grid-template-columns:1fr auto; gap:10px; }
  .ndh-hello { display:none; }
  .ndh-logo { justify-self:start; }
  .ndh-nav > ul { flex-wrap:wrap; gap:0; }
}

@media (max-width:899px) {
  /* Bovenbalk telefoon */
  .ndh-announce { height:35px; }
  .ndh-announce .ndh-msg { font-size:12px; padding:0 10px; gap:5px; letter-spacing:normal; }
  .ndh-announce .ndh-msg b { font-size:11px; letter-spacing:.12em; }
  .ndh-announce .ndh-sc { font-size:12px; top:0; }
  .ndh-announce .ndh-only-d { display:none; }
  .ndh-announce .ndh-only-m { display:flex; }

  /* Logo-rij telefoon: burger | logo | zoeken + mand */
  .ndh-head { grid-template-columns:88px 1fr 88px; gap:0; padding:10px 12px; border-bottom:1px solid var(--ndh-line); }
  .ndh-burger {
    justify-self:start;
    display:block; width:24px; height:16px; padding:0; position:relative; background:none; cursor:pointer;
    border:0; border-top:2px solid var(--ndh-ink); border-bottom:2px solid var(--ndh-ink); border-radius:0;
  }
  .ndh-burger::after { content:""; position:absolute; left:0; right:0; top:5px; border-top:2px solid var(--ndh-ink); }
  .ndh-burger::before { content:""; position:absolute; inset:-14px -10px; }
  .ndh-logo { justify-self:center; }
  .ndh-bar .ndh-logo img { width:130px; margin:0 auto; }
  .ndh-tools { gap:12px; }
  .ndh-tool { padding:0; border-radius:0; font-size:0; gap:0; }
  .ndh-tool:hover, .ndh-tool:focus-visible { background:none; }
  .ndh-tool .ndh-tool-label, .ndh-tool--account { display:none; }
  .ndh-tool .nd-cart-count { top:-6px; right:-8px; }
  .ndh-tool .nd-cart-count .cart-count { font-size:9px; padding:2px 4px; }
  .ndh-nav { display:none; }

  .ndh-mnav {
    display:block; position:fixed; left:0; right:auto; width:var(--ndh-w, 100%); bottom:0; top:var(--ndh-bottom, 96px); z-index:99;
    background:var(--ndh-bg); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .ndh-mnav[hidden] { display:none !important; }
  .ndh-mlist { list-style:none; padding:8px 0 4px; margin:0; }
  .ndh-mlist > li { list-style:none; }
  .ndh-mrow {
    display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 20px;
    font-family:var(--sans); font-size:13px; line-height:1.6; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ndh-ink); border:0; border-bottom:1px solid var(--ndh-line); background:none; text-align:left; cursor:pointer; border-radius:0;
  }
  .ndh-mrow.ndh-sale { color:var(--ndh-marsala); font-weight:600; }
  .ndh-mrow svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; flex:none; }
  .ndh-mrow[aria-expanded="true"] svg { transform:rotate(180deg); }
  .ndh-msub { background:#faf3ee; padding:6px 20px 12px; font-size:14px; line-height:1.6; }
  .ndh-msub[hidden] { display:none; }
  .ndh-msub a { display:inline-block; margin:4px 14px 4px 0; color:var(--ndh-ink); }
  .ndh-msub a.ndh-msub-all { color:var(--ndh-marsala); font-weight:600; }
  .ndh-mnav .ndh-pill {
    margin:14px 20px 8px; display:block; text-align:center; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--ndh-marsala);
    color:var(--ndh-marsala); padding:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; line-height:1.6;
  }
  .ndh-who { margin:6px 20px 18px; display:flex; align-items:center; gap:10px; font-size:12.5px; line-height:1.6; color:var(--ndh-muted); }
  .ndh-who .ndh-face { width:38px; height:38px; }
  .ndh-who b { color:var(--ndh-marsala); font-weight:600; }
  body.ndh-menu-open { overflow:hidden; }
}


/* ---------- Mobiel menu: inloggen / Mijn account bovenaan (29-10-2026) ---------- */
.ndh-mnav .ndh-macc { display:flex; align-items:center; gap:12px; margin:14px 20px 4px; padding:12px 16px; border-radius:14px; background:#f7efea; color:var(--ndh-ink); font-weight:600; font-size:14px; line-height:1.4; }
.ndh-mnav .ndh-macc svg { width:22px; height:22px; flex:none; fill:none; stroke:var(--ndh-marsala); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ndh-mnav .ndh-macc:hover, .ndh-mnav .ndh-macc:focus-visible { background:#f3e8e3; color:var(--ndh-marsala); }