/* nav/nav.css — jiroo navigation explorations.
   Three desktop directions (A editorial mega · B cascading flyout · C spotlight
   rail) + a matching mobile drawer, all sharing one chrome. Tokens come from
   colors_and_type.css; shop accents from the kit's --gen-* mapping. */

:root {
  --gen-indica: var(--c-lavendel);
  --gen-sativa: var(--c-lorbeer-700);
  --gen-hybrid: var(--c-schiefer-500);
  --jn-accent: var(--c-lavendel);
}

* { box-sizing: border-box; }

/* ============================================================
   HEADER SHELL  (shared by all directions)
   ============================================================ */
.jn {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  transition: transform var(--dur-base) var(--ease-out);
  will-change: transform;
}
.jn[data-hidden="true"] { transform: translateY(-100%); }
.jn[data-scroll="static"] { position: relative; }

/* utility bar — live processing times */
.jn-utility {
  background: var(--c-schiefer); color: var(--c-reinweiss);
  padding: 8px 32px; display: flex; justify-content: space-between; align-items: center;
  font: 400 12.5px/1 var(--font-sans);
  overflow: hidden;
}
.jn-utility .live { align-items: center; color: inherit; display: flex; gap: 10px; text-decoration: none; }
.jn-utility .live:hover { color: var(--c-lavendel); }
.jn-utility .live:hover .meta { color: var(--c-reinweiss); }
.jn-utility .dot { width: 7px; height: 7px; border-radius: 999px; background: #6BBF89; box-shadow: 0 0 0 4px rgba(107,191,137,0.18); flex: none; }
.jn-utility .sep { opacity: 0.4; padding: 0 6px; }
.jn-utility .meta { color: rgba(255,255,255,0.78); }
.jn[data-topbar="false"] .jn-utility { display: none; }
@media (max-width: 640px) {
  .jn-utility { padding: 9px 16px; }
  .jn-utility .live { gap: 6px; white-space: nowrap; }
  .jn-utility .live .sep:nth-of-type(n+2),
  .jn-utility .live .meta:last-child { display: none; }
}

/* promo bar — one or more messages crossfade in place (data-promo-rotate) */
.jn-promo {
  position: relative;
  background: var(--c-lorbeer-hell); color: var(--c-schiefer);
  padding: 10px 32px; text-align: center; font: 400 13px/1.3 var(--font-sans);
  min-height: 1.3em; /* reserve one line so absolutely-stacked items don't collapse it */
}
.jn-promo strong { font-weight: 600; }
.jn-promo a { color: inherit; text-decoration: underline; }
.jn-promo__item { transition: opacity 0.45s ease; }
/* Rotation: stack every item so they overlap, only .is-active is shown. */
.jn-promo[data-promo-rotate] .jn-promo__item {
  position: absolute; left: 32px; right: 32px; top: 10px;
  opacity: 0; pointer-events: none;
}
.jn-promo[data-promo-rotate] .jn-promo__item.is-active {
  position: relative; left: auto; right: auto; top: auto; display: block;
  opacity: 1; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .jn-promo__item { transition: none; }
}

/* main bar */
.jn-bar {
  position: relative;
  padding: 16px 32px; display: flex; align-items: center; gap: 30px;
  border-bottom: 1px solid var(--border);
}
.jn-logo { display: block; flex: none; }
.jn-logo img { height: 28px; width: auto; display: block; }
.jn-spacer { flex: 1; }

.jn-actions { display: flex; align-items: center; gap: 6px; }
.jn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; background: transparent;
  color: var(--c-schiefer); cursor: pointer; border-radius: 999px; position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jn-icon:hover { background: var(--c-lorbeer-hell); color: var(--c-schiefer-500); }
/* logged-in account icon: soft lorbeer rounded-square — calm, persistent "angemeldet" state (ADR-0034 D12) */
.jn-icon--me { background: var(--c-lorbeer-hell); color: var(--c-schiefer); border-radius: 12px; }
.jn-icon--me:hover { background: var(--c-lorbeer-hell); filter: brightness(0.97); }
.jn-cartdot {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--c-schiefer); color: var(--c-reinweiss);
  font: 600 10px/1 var(--font-sans); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
/* display:flex above overrides UA [hidden]; re-assert so empty-cart badge stays invisible */
.jn-cartdot[hidden] { display: none; }
/* anmelden — brand signature: rectangular, sharp corner, 1.5px outline */
.jn-login {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border: 1.5px solid var(--c-schiefer); border-radius: 0;
  background: var(--bg); color: var(--c-schiefer);
  font: 600 13px var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jn-login:hover { background: var(--c-schiefer); color: var(--c-reinweiss); }
.jn-burger { display: none; }

/* ---------- top-level links (shared) ---------- */
.jn-top { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.jn-top__item { position: relative; }
.jn-top__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; font: 400 14.5px var(--font-sans); color: var(--fg);
  text-decoration: none; cursor: pointer; background: none; border: 0; white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.jn-top__link:hover,
.jn-top__item[data-open="true"] .jn-top__link { color: var(--c-schiefer-500); }
/* refined underline — grows from centre */
.jn-top__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--c-schiefer); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.jn-top__link:hover::after,
.jn-top__item[data-open="true"] .jn-top__link::after { transform: scaleX(1); }
.jn-top__chev { transition: transform var(--dur-base) var(--ease-out); }
.jn-top__item[data-open="true"] .jn-top__chev { transform: rotate(180deg); }
.jn-badge {
  font: 700 9px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-schiefer); background: var(--jn-accent);
  padding: 3px 5px; border-radius: 3px; transform: translateY(-1px);
}

/* ============================================================
   PANEL HOST  (absolute, full bleed under the bar)
   ============================================================ */
.jn-panelhost {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; justify-content: center;
  pointer-events: none;
}
.jn-panel {
  pointer-events: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 0;
  box-shadow: var(--shadow-lg);
  animation: jnPanelIn var(--dur-base) var(--ease-out) both;
}
@keyframes jnPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* small dropdown (jiroo / Wissenswertes) — shared by all directions */
.jn-drop {
  position: absolute; top: calc(100% + 6px); left: -14px;
  min-width: 230px; padding: 8px;
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.jn-top__item[data-open="true"] .jn-drop { opacity: 1; transform: translateY(0); pointer-events: auto; }
.jn-drop a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font: 400 14px var(--font-sans); color: var(--fg); text-decoration: none;
  border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jn-drop a:hover { background: var(--c-lorbeer-hell); color: var(--c-schiefer-500); }
.jn-drop a .arr { opacity: 0; transform: translateX(-4px); transition: all var(--dur-fast) var(--ease-out); }
.jn-drop a:hover .arr { opacity: 1; transform: translateX(0); }

.jn-eyebrow {
  font: 600 11px var(--font-sans); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--fg-muted); margin: 0 0 14px;
}

/* ============================================================
   DIRECTION A — EDITORIAL MEGA
   left category rail · centre level-3 columns · right hero + feature
   ============================================================ */
.jnA-mega {
  width: min(1180px, calc(100vw - 48px));
  display: grid; grid-template-columns: 248px 1fr 320px; gap: 0;
}
.jnA-rail { padding: 22px 16px; border-right: 1px solid var(--border); background: var(--c-hellgrau); }
.jnA-cat {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border: 0; background: none; cursor: pointer; border-radius: var(--r-md);
  font: 500 15px var(--font-sans); color: var(--fg);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.jnA-cat .cnt { margin-left: auto; font: 400 12px var(--font-sans); color: var(--fg-muted); }
.jnA-cat .arr { color: var(--fg-muted); opacity: 0; transform: translateX(-6px); transition: all var(--dur-base) var(--ease-out); }
.jnA-cat:hover, .jnA-cat[data-active="true"] { background: var(--bg); color: var(--c-schiefer); padding-left: 18px; box-shadow: var(--shadow-sm); }
.jnA-cat[data-active="true"] .arr { opacity: 1; transform: translateX(0); margin-left: 4px; }
.jnA-cat[data-active="true"] .cnt { display: none; }

.jnA-body { padding: 26px 30px; min-height: 320px; }
.jnA-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.jnA-group h6 { margin: 0 0 4px; }
.jnA-links { list-style: none; margin: 0; padding: 0; }
.jnA-link {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  font: 400 14.5px var(--font-sans); color: var(--fg); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.jnA-link:hover { color: var(--c-schiefer-500); padding-left: 6px; }
.jnA-link .gdot { width: 9px; height: 9px; border-radius: 999px; flex: none; transform: translateY(1px); }
.jnA-link .note { margin-left: auto; font: 400 12.5px var(--font-sans); color: var(--fg-muted); }

.jnA-aside { border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.jnA-hero { position: relative; height: 184px; overflow: hidden; }
.jnA-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.jnA-aside:hover .jnA-hero img { transform: scale(1.04); }
.jnA-feat { padding: 20px 22px; }
.jnA-feat .blurb { font: 300 14px/1.5 var(--font-sans); color: var(--fg); margin: 6px 0 16px; }
.jnA-feat .ttl { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: var(--ls-tight); margin-bottom: 16px; }
.jnA-featlinks { display: flex; flex-direction: column; gap: 10px; }
.jn-cta--block { justify-content: space-between; width: 100%; }

/* feature/CTA button — rectangular brand button */
.jn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 1.5px solid var(--c-schiefer); border-radius: 0;
  background: var(--bg); color: var(--c-schiefer);
  font: 600 13px var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.jn-cta:hover { background: var(--c-schiefer); color: var(--c-reinweiss); gap: 12px; }

/* fade/slide when switching active category */
.jnA-fade { animation: jnFade var(--dur-base) var(--ease-out); }
@keyframes jnFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   DIRECTION B — CASCADING FLYOUT
   compact category list · level-3 flyout to the right with thumb
   ============================================================ */
.jnB-wrap { display: flex; }
.jnB-list { width: 264px; padding: 10px; }
.jnB-cat {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 0; background: none; cursor: pointer; border-radius: var(--r-md);
  font: 500 14.5px var(--font-sans); color: var(--fg);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jnB-cat .cnt { margin-left: auto; font: 400 12px var(--font-sans); color: var(--fg-muted); }
.jnB-cat .chev { margin-left: 6px; color: var(--fg-muted); transition: transform var(--dur-base) var(--ease-out); }
.jnB-cat:hover, .jnB-cat[data-active="true"] { background: var(--c-lorbeer-hell); color: var(--c-schiefer); }
.jnB-cat[data-active="true"] .chev { transform: translateX(3px); }

.jnB-fly {
  width: 360px; border-left: 1px solid var(--border); padding: 22px 24px;
  display: grid; grid-template-rows: auto 1fr; gap: 16px;
}
.jnB-thumb { display: flex; gap: 14px; align-items: center; }
.jnB-thumb .pic { width: 76px; height: 76px; border-radius: var(--r-md); overflow: hidden; flex: none; }
.jnB-thumb .pic img { width: 100%; height: 100%; object-fit: cover; }
.jnB-thumb .ttl { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: var(--ls-tight); }
.jnB-thumb .blurb { font: 300 13px/1.45 var(--font-sans); color: var(--fg-muted); margin-top: 3px; }
.jnB-fly .jnA-links { columns: 1; }
.jnB-grouprow { margin-bottom: 14px; }

/* ============================================================
   DIRECTION C — SPOTLIGHT RAIL
   row of image tiles · sub-items revealed on the active tile
   ============================================================ */
.jnC-mega { width: min(1180px, calc(100vw - 48px)); padding: 24px; }
.jnC-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.jnC-tile {
  position: relative; display: block; overflow: hidden; cursor: pointer;
  border-radius: var(--r-lg); min-height: 260px; text-decoration: none;
  background: var(--c-schiefer);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.jnC-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jnC-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.jnC-tile:hover img { transform: scale(1.06); }
.jnC-tile .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,54,54,0.92) 0%, rgba(10,54,54,0.55) 38%, rgba(10,54,54,0.05) 100%);
}
.jnC-tile .body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px; color: var(--c-reinweiss);
}
  .jnC-tile .cnt { display: block; font: 600 10.5px var(--font-sans); letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgba(255,255,255,0.72); }
  .jnC-tile .ttl { display: block; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.08; margin: 5px 0 0; letter-spacing: var(--ls-tight); }
.jnC-subs { list-style: none; margin: 0; padding: 0; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out); }
.jnC-tile:hover .jnC-subs, .jnC-tile:focus-within .jnC-subs { max-height: 180px; opacity: 1; margin-top: 12px; }
.jnC-subs li { padding: 5px 0; }
.jnC-subs a {
  display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.92);
  font: 400 13.5px var(--font-sans); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.jnC-subs a:hover { color: #fff; gap: 12px; }
.jnC-subs a .gdot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.jnC-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.jnC-foot .txt { font: 300 14px var(--font-sans); color: var(--fg); }
.jnC-foot .txt strong { font-weight: 600; }

/* ============================================================
   MOBILE DRAWER  (matches all directions)
   ============================================================ */
.jn-scrim {
  position: fixed; inset: 0; background: rgba(10,54,54,0.32); z-index: 199;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.jn-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.jn-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 90vw); z-index: 200;
  background: var(--bg); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column;
}
.jn-drawer[data-open="true"] { transform: translateX(0); }
.jn-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.jn-drawer__top img { height: 26px; }
.jn-x { width: 40px; height: 40px; border: 0; background: var(--c-hellgrau); border-radius: 999px; cursor: pointer; color: var(--c-schiefer); display: flex; align-items: center; justify-content: center; }
.jn-drawer__scroll { overflow-y: auto; flex: 1; padding: 8px 12px 24px; }

.jn-acc__row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px 12px; border: 0; background: none; cursor: pointer;
  font: 500 17px var(--font-sans); color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.jn-acc__row .badge { font: 700 9px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-schiefer); background: var(--jn-accent); padding: 3px 5px; border-radius: 3px; }
.jn-acc__row .plus { margin-left: auto; position: relative; width: 16px; height: 16px; flex: none; color: var(--fg-muted); }
.jn-acc__row .plus::before, .jn-acc__row .plus::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.jn-acc__row .plus::before { left: 0; right: 0; top: 7px; height: 2px; }
.jn-acc__row .plus::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.jn-acc__row[data-open="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.jn-acc__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-out); background: var(--c-hellgrau); }
.jn-acc__panel[data-open="true"] { max-height: 1200px; }
.jn-acc__inner { padding: 6px 12px 14px; }

.jn-sub__row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 13px 10px; border: 0; background: none; cursor: pointer;
  font: 500 15px var(--font-sans); color: var(--fg); text-decoration: none;
}
.jn-sub__row .cnt { margin-left: auto; font: 400 12px var(--font-sans); color: var(--fg-muted); }
.jn-sub__row .plus { margin-left: auto; position: relative; width: 14px; height: 14px; flex: none; color: var(--fg-muted); }
.jn-sub__row .plus::before, .jn-sub__row .plus::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.jn-sub__row .plus::before { left: 0; right: 0; top: 6px; height: 2px; }
.jn-sub__row .plus::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.jn-sub__row[data-open="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.jn-sub__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-out); }
.jn-sub__panel[data-open="true"] { max-height: 600px; }
.jn-leaf {
  display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 18px;
  font: 400 14.5px var(--font-sans); color: var(--fg); text-decoration: none;
}
.jn-leaf .gdot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.jn-leaf .note { margin-left: auto; font: 400 12px var(--font-sans); color: var(--fg-muted); }
.jn-leaf:active { background: var(--c-lorbeer-hell); }
.jn-acc__head { font: 600 11px var(--font-sans); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); padding: 12px 10px 4px; }
.jn-drawer__cta { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.jn-drawer__cta .jn-login { flex: 1; justify-content: center; }
.jn-drawer__acct { padding: 8px 12px; border-top: 1px solid var(--border); }
.jn-drawer__account { display: block; padding: 8px 10px 4px; font: 600 13px var(--font-sans); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.jn-cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 96vw); z-index: 200;
  background: var(--bg); box-shadow: -6px 0 48px rgba(10,54,54,0.13);
  transform: translateX(100%); transition: transform var(--dur-slow, .32s) var(--ease-out);
  display: flex; flex-direction: column; overflow: hidden;
}
.jn-cart[data-open="true"] { transform: translateX(0); }

.jn-cart__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border); flex: none;
}
.jn-cart__title { font: 600 16px var(--font-sans); color: var(--c-schiefer); }
.jn-cart__cnt { font-weight: 400; color: var(--fg-muted); }

/* free-shipping bar */
.jn-cart__ship {
  padding: 12px 24px; background: var(--c-lorbeer-hell);
  border-bottom: 1px solid rgba(14,70,70,0.08); flex: none;
}
.jn-cart__ship__txt { font: 400 13px var(--font-sans); color: var(--c-schiefer); margin: 0 0 8px; }
.jn-cart__ship__txt strong { font-weight: 600; }
.jn-cart__ship__ok { color: var(--c-lorbeer-700); }
.jn-cart__ship__track {
  height: 4px; background: rgba(14,70,70,0.12); border-radius: 999px; overflow: hidden;
}
.jn-cart__ship__fill {
  height: 100%; background: var(--c-lorbeer-700); border-radius: 999px;
  transition: width .5s var(--ease-out);
}

/* items */
.jn-cart__items { flex: 1; overflow-y: auto; }
.jn-cart__item {
  display: flex; gap: 14px; padding: 16px 24px;
  border-bottom: 1px solid var(--c-schiefer-100);
}
.jn-cart__img {
  width: 72px; height: 72px; flex: none; overflow: hidden;
  background: var(--c-lorbeer-hell);
}
.jn-cart__img img { width: 100%; height: 100%; object-fit: cover; }
.jn-cart__meta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.jn-cart__meta__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.jn-cart__name { font: 600 14px var(--font-sans); color: var(--c-schiefer); line-height: 1.3; }
.jn-cart__remove {
  width: 26px; height: 26px; background: none; border: 0; cursor: pointer; flex: none;
  color: var(--fg-muted); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.jn-cart__remove:hover { background: var(--c-hellgrau); color: var(--c-schiefer); }
.jn-cart__strain { font: 300 12.5px var(--font-sans); color: var(--fg-muted); }
.jn-cart__tag {
  font: 500 11px var(--font-sans); letter-spacing: 0.03em;
  color: var(--c-schiefer); background: var(--c-schiefer-100);
  padding: 2px 7px; display: inline-block; align-self: flex-start;
}
.jn-cart__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px;
}
.jn-cart__price { font: 600 14px var(--font-sans); color: var(--c-schiefer); }
.jn-cart__qty {
  display: flex; align-items: center; border: 1px solid var(--c-schiefer-100);
}
.jn-cart__qty button {
  width: 28px; height: 28px; background: none; border: 0; cursor: pointer;
  color: var(--c-schiefer); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.jn-cart__qty button:hover { background: var(--c-lorbeer-hell); }
.jn-cart__qty__n {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-width: 26px; text-align: center;
  font: 600 13px var(--font-sans); color: var(--c-schiefer);
  border-left: 1px solid var(--c-schiefer-100);
  border-right: 1px solid var(--c-schiefer-100);
}

/* prescription notice */
.jn-cart__rx {
  padding: 12px 24px; flex: none;
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--c-lorbeer-hell); border-top: 1px solid rgba(14,70,70,0.08);
  font: 300 12px/1.5 var(--font-sans); color: var(--c-schiefer);
}
.jn-cart__rx svg { flex: none; color: var(--c-lorbeer-700); margin-top: 2px; }
.jn-cart__rx strong { font-weight: 600; }

/* footer totals + CTA */
.jn-cart__ft {
  padding: 18px 24px 28px; border-top: 1px solid var(--border); flex: none;
  display: flex; flex-direction: column; gap: 10px;
}
.jn-cart__subtot {
  display: flex; justify-content: space-between;
  font: 300 13.5px var(--font-sans); color: var(--fg-muted);
}
.jn-cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--c-schiefer-100);
  font: 600 15px var(--font-sans); color: var(--c-schiefer);
}
.jn-cart__total__amt { font-size: 20px; letter-spacing: -0.015em; }
.jn-cart__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; background: var(--c-schiefer); color: #fff;
  border: 0; cursor: pointer; text-decoration: none;
  font: 600 15px var(--font-sans); letter-spacing: -0.005em;
  transition: background var(--dur-base);
}
.jn-cart__btn:hover { background: #0a3535; }
.jn-cart__cont {
  background: none; border: 0; cursor: pointer; width: 100%; text-align: center;
  font: 400 13px var(--font-sans); color: var(--fg-muted); padding: 4px;
  transition: color var(--dur-fast);
}
.jn-cart__cont:hover { color: var(--c-schiefer); text-decoration: underline; }

/* empty state */
.jn-cart__empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px; gap: 14px;
}
.jn-cart__empty svg { color: var(--c-schiefer-100); }
.jn-cart__empty p { font: 300 15px var(--font-sans); color: var(--fg-muted); margin: 0; }

/* ============================================================
   ACCOUNT DRAWER (ADR-0034 D12) — clones the cart-drawer slide-in
   ============================================================ */
.jn-acct {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 96vw); z-index: 200;
  background: var(--bg); box-shadow: -6px 0 48px rgba(10,54,54,0.13);
  transform: translateX(100%); transition: transform var(--dur-slow, .32s) var(--ease-out);
  display: flex; flex-direction: column; overflow: hidden;
}
.jn-acct[data-open="true"] { transform: translateX(0); }
.jn-acct__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--border); flex: none;
}
.jn-acct__greet { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jn-acct__eyebrow { font: 600 11px var(--font-sans); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
.jn-acct__email { font: 600 15px var(--font-sans); color: var(--c-schiefer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-acct__nav { flex: 1; overflow-y: auto; padding: 8px 12px; }
.jn-acct__link {
  display: flex; align-items: center; gap: 14px; padding: 16px 12px;
  font: 500 16px var(--font-sans); color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.jn-acct__link svg { flex: none; color: var(--c-lorbeer-700); }
.jn-acct__link .arr { margin-left: auto; color: var(--fg-muted); display: flex; }
.jn-acct__link:hover { background: var(--c-hellgrau); }
.jn-acct__ft { padding: 16px 20px; border-top: 1px solid var(--border); flex: none; }
.jn-acct__ft form { margin: 0; }
.jn-acct__logout {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px var(--font-sans); color: var(--c-reinweiss); background: var(--c-schiefer);
}
.jn-acct__logout:hover { background: #0a3535; }

/* ============================================================
   RESPONSIVE — collapse desktop nav into burger
   ============================================================ */
.jn[data-view="mobile"] .jn-top,
.jn[data-view="mobile"] .jn-login,
.jn[data-view="mobile"] .jn-panelhost { display: none; }
.jn[data-view="mobile"] .jn-burger { display: inline-flex; }
.jn[data-view="mobile"] .jn-utility .live .meta:not(:first-of-type),
.jn[data-view="mobile"] .jn-utility .sep,
.jn[data-view="mobile"] .jn-utility > .meta { display: none; }
.jn[data-view="mobile"] .jn-utility { justify-content: center; }
.jn[data-view="mobile"] .jn-utility .live { gap: 8px; font-size: 12px; }

@media (max-width: 920px) {
  .jn-top, .jn-login, .jn-panelhost { display: none; }
  .jn-burger { display: inline-flex; }
  /* Tighten the bar so the logo + city selector + action icons fit 375px.
     Desktop padding (32px) and gap (30px) alone ate ~150px of the width. */
  .jn-bar { padding: 0 16px; gap: 12px; }
  .jn-city-btn { padding: 6px 6px; }
}

/* ============================================================
   SEARCH SLOT  (inline header search, wide form)
   ============================================================ */
.jn-search-slot {
  flex: 0 520px; min-width: 0; flex-shrink: 1; flex-basis: 520px;
}
@media (max-width: 1100px) { .jn-search-slot { display: none; } }

.filt-search { position: relative; }
.filt-search svg {
  color: var(--fg-muted); pointer-events: none;
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
}
.filt-search input[type="search"] {
  border: 1px solid var(--c-schiefer-100); border-radius: var(--r-sm);
  width: 100%; height: 40px;
  font: 400 14px var(--font-sans); color: var(--c-schiefer);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none; padding: 0 14px 0 38px;
  background: transparent; appearance: none; -webkit-appearance: none;
}
.filt-search input[type="search"]::placeholder { color: var(--fg-muted); }
.filt-search input[type="search"]:focus {
  border-color: var(--c-schiefer);
  box-shadow: 0 0 0 3px rgba(14,70,70,0.08);
}

/* ============================================================
   PHARMACY / CITY SELECTOR
   ============================================================ */
.jn-city-wrap { flex: none; position: relative; }
/* City / pharmacy selector stays visible on mobile — it sits next to the logo
   once the nav links and search slot collapse into the burger drawer. */

.jn-city-btn {
  color: var(--fg); font: 400 13px var(--font-sans); cursor: pointer;
  border-radius: var(--r-sm); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
  background: none; border: 0;
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
}
.jn-city-btn:hover { background: var(--c-lorbeer-hell); }
.jn-city-btn .chev { display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.jn-city-wrap[data-open="true"] .jn-city-btn .chev { transform: rotate(180deg); }

.jn-city-drop {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  min-width: 160px; box-shadow: var(--shadow-lg); z-index: 50;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  padding: 8px; position: absolute; top: calc(100% + 6px); left: 0;
  transform: translateY(6px);
}
.jn-city-wrap[data-open="true"] .jn-city-drop {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.jn-city-drop__title {
  font: 600 11px var(--font-sans); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--fg-muted); padding: 4px 8px 8px;
}
.jn-city-drop button[role="menuitem"] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 9px 10px;
  font: 400 14px var(--font-sans); color: var(--fg);
  background: none; border: 0; cursor: pointer; border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jn-city-drop button[role="menuitem"]:hover { background: var(--c-lorbeer-hell); color: var(--c-schiefer-500); }
.jn-city-drop button[data-active="true"] { font-weight: 500; }

/* Accessibility: visually-hidden text for icon-only actions */
.jn-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;
}