/* shop-overrides.css — SSR-only adjustments.

   The design's React Header mounted the mega panel conditionally (openKey === "shop");
   the server renders it always-present in the DOM, so visibility is driven here by the
   parent item's data-open attribute (mirroring how nav.css already toggles .jn-drop). */

/* Guard: prevent display:flex/block from overriding [hidden] attribute on elements
   toggled via JS. Scoped to .shop-main (product-facing pages: catalog, detail, faq, page).
   Existing targeted fixes below cover home-page elements. */
.shop-main [hidden] { display: none !important; }

/* The mega panel spans the full nav bar. The design rendered it as a child of
   .jn-bar (the positioned offset parent); the SSR port nests it inside the narrow
   "Shop" <li>, which is position:relative and would anchor the absolute panel to
   that item's left edge (the overlap bug). The mega item carries no small .jn-drop,
   so making it static is safe and restores .jn-bar as the panel's offset parent. */
.jn-top__item[data-mega] { position: static; }

/* Rail categories are now links (click → category landing, hover → preview); keep
   the button look (no underline) the design's <button> had. */
.jnA-cat { text-decoration: none; }

/* Dismissible Rx notice close button (catalog). */
.rx-note__close {
  margin-left: auto; flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--c-lorbeer-700);
  border-radius: 999px;
}
.rx-note__close:hover { background: rgba(14,70,70,0.08); color: var(--c-schiefer); }

/* visibility:hidden (not just opacity:0) is essential: the always-present panel's
   inner .jn-panel keeps pointer-events:auto, and its box overhangs the hero — at
   opacity:0/visible it still hit-tests, so hovering the hero fires the Shop item's
   mouseenter and opens the menu. visibility:hidden removes it from hit-testing. */
.jn-top__item[data-mega] .jn-panelhost {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
.jn-top__item[data-mega][data-open="true"] .jn-panelhost {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.jn-top__item[data-mega][data-open="true"] .jn-panel {
  pointer-events: auto;
}

/* Catalog genetik segmented control as a no-JS radio group. Mirrors the design's
   `.seg button` look (shop.css) but applied to label-wrapped radios so the filter
   works with plain form submission; shop.js auto-submits on change as enhancement. */
.seg--radio { display: flex; gap: 6px; }
.seg--radio .seg__opt {
  flex: 1; padding: 9px 6px; border: 1.5px solid var(--c-schiefer-100); background: #fff;
  border-radius: var(--r-sm); cursor: pointer; font: 600 12.5px var(--font-sans);
  color: var(--c-schiefer); display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.seg--radio .seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg--radio .seg__opt .gendot { width: 8px; height: 8px; border-radius: 999px; }
.seg--radio .seg__opt:hover { border-color: var(--c-schiefer-300); }
.seg--radio .seg__opt.is-on { border-color: var(--c-schiefer); background: var(--c-schiefer); color: #fff; }
.seg--radio .seg__opt:has(input:checked) { border-color: var(--c-schiefer); background: var(--c-schiefer); color: #fff; }
/* ADR-0022: multi-select chip groups (Genetik, Terpene) wrap instead of stretching
   each chip to equal width, so many values stay legible. */
.seg--wrap { flex-wrap: wrap; }
.seg--wrap .seg__opt { flex: 0 0 auto; }
/* ADR-0022 slice 4: per-option count beside a chip's label (subtle on both the
   default and the checked/schiefer states). */
.seg__count { margin-left: 5px; font-weight: 400; font-size: 11px; opacity: 0.6; }

/* ADR-0022: long facet lists (Hersteller, Herkunftsland) scroll within the group
   instead of pushing the sidebar arbitrarily tall. */
.filt__body--scroll { max-height: 230px; overflow-y: auto; }

/* ADR-0022 slice 3: noUiSlider skin for the THC/CBD/Preis range facets — match the
   schiefer theme (the vendored nouislider.min.css supplies the base mechanics). */
.filt-range { margin: 14px 6px 4px; }
/* The number-input fallback is .filt-thc (display:flex), which would override the UA
   [hidden] rule — so re-assert display:none when JS hides it behind the live slider. */
.filt-range__inputs[hidden] { display: none; }

/* Cart drawer sections set display:flex, which overrides the UA [hidden] rule —
   so the JS-toggled empty state leaked onto a populated cart (and the Rx note +
   footer would leak onto an empty cart). Re-assert display:none when hidden. */
.jn-cart__empty[hidden],
.jn-cart__rx[hidden],
.jn-cart__ft[hidden] { display: none; }

/* Reserve form sections set display:flex, which overrides the UA [hidden] rule —
   so JS-toggled reserve form and confirmation panel would remain visible when hidden. */
.jn-cart__reserve[hidden],
.jn-cart__reserved[hidden] { display: none; }
.filt-range.noUi-target { height: 4px; border: 0; border-radius: 999px; box-shadow: none; background: var(--c-schiefer-100); }
.filt-range .noUi-connect { background: var(--c-schiefer); }
.filt-range .noUi-handle {
  box-sizing: border-box;
  width: 18px; height: 18px; aspect-ratio: 1;
  right: -9px; top: 50%; transform: translateY(-50%);
  border: 1.5px solid var(--c-schiefer); background: #fff; cursor: grab;
  box-shadow: 0 1px 3px rgba(14, 70, 70, 0.18);
}
.filt-range .noUi-handle:active { cursor: grabbing; }
/* Drop noUiSlider's default grip lines on the handle. */
.filt-range .noUi-handle::before, .filt-range .noUi-handle::after { display: none; }
.filt-range .noUi-handle:focus-visible { outline: 2px solid var(--c-schiefer); outline-offset: 2px; }

/* THC min/max number inputs (the design's dual range slider needs JS; the API takes
   discrete min_thc/max_thc, so a no-JS numeric pair is the faithful functional port). */
.filt-thc { display: flex; gap: 10px; }
.filt-thc__field {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  font: 600 11px var(--font-sans); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--fg-muted);
}
.filt-thc__field input {
  padding: 9px 10px; border: 1.5px solid var(--c-schiefer-100); border-radius: var(--r-sm);
  font: 400 14px var(--font-sans); color: var(--c-schiefer); background: #fff;
}
.filt-thc__field input:focus { outline: none; border-color: var(--c-schiefer); }

/* Add-to-cart button on .pc cards (ADR-0020 slice 2): full-width footer action,
   reusing the jk-btn-filled schiefer look. The card root is an <a>, so shop.js
   stops the click from navigating; here we just lay it out and dim when disabled. */
.pc__add { width: 100%; }
.pc__add:disabled { opacity: 0.45; cursor: not-allowed; }
.pc__add:disabled:hover { background: var(--c-schiefer); border-color: var(--c-schiefer); }

/* ADR-0022 slice 2: foot + add-to-cart share one slot at the bottom of the card.
   Default (touch / no-hover pointers): stacked, both visible — the faithful no-JS
   layout. The wrapper is the flex item that pins the block to the card bottom. */
.pc__action { margin-top: auto; }
.pc__action .pc__add { margin-top: 12px; }

/* Hover-capable pointers only: collapse foot + add into one fixed-height slot so
   the add button reveals on card hover IN PLACE of the foot — no layout shift
   (the slot height never changes), smooth cross-fade. Touch keeps both visible. */
@media (hover: hover) and (pointer: fine) {
  .pc__action { position: relative; min-height: 30px; padding-top: 14px; }
  .pc__action > .pc__foot,
  .pc__action > .pc__add {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .pc__action > .pc__foot { padding-top: 0; }
  .pc__action > .pc__add { opacity: 0; transform: translateY(6px); pointer-events: none; }
  /* Reveal only when the card is hoverable AND the add button is enabled; disabled
     cards keep foot/stock only (the :has guard stops the foot from fading out). */
  .pc:hover .pc__action:has(.pc__add:not(:disabled)) > .pc__foot {
    opacity: 0; transform: translateY(-6px);
  }
  .pc:hover .pc__add:not(:disabled) {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
}

.jn-cart__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jn-cart__btn:disabled:hover { background: var(--c-schiefer); }
.jn-cart__note { font: 300 12px/1.4 var(--font-sans); color: var(--fg-muted); text-align: center; margin: 0; }

/* Reserve form (ADR-0020 slice 3b) — email-only hold, revealed by the CTA. */
.jn-cart__reserve { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.jn-cart__reserve__intro { font: 300 12.5px/1.5 var(--font-sans); color: var(--fg-muted); margin: 0; }
.jn-cart__reserve__lbl {
  display: flex; flex-direction: column; gap: 5px;
  font: 600 11px var(--font-sans); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--fg-muted);
}
.jn-cart__reserve__lbl span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.jn-cart__reserve__lbl input {
  padding: 10px 12px; border: 1.5px solid var(--c-schiefer-100); border-radius: var(--r-sm);
  font: 400 14px var(--font-sans); color: var(--c-schiefer); background: #fff;
}
.jn-cart__reserve__lbl input:focus { outline: none; border-color: var(--c-schiefer); }
.jn-cart__reserve__err { font: 600 12.5px/1.4 var(--font-sans); color: var(--c-danger, #b3261e); margin: 0; }

/* Reservation confirmation panel. */
.jn-cart__reserved { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; text-align: center; }
.jn-cart__reserved p { font: 300 14px/1.6 var(--font-sans); color: var(--c-schiefer); margin: 0; }

/* ============================================================
   Reservation page (ADR-0024) — /shop/<pharmacy>/reservierung/
   Checkout-style layout: grey canvas, white cards, schiefer.
   ============================================================ */

/* Page canvas — hellgrau fills the full <main> viewport. */
.jn-reservation {
  min-height: 70vh;
  background: var(--bg-muted);
  padding: 32px 20px 60px;
}

/* Centered column: every direct child caps at 680px and auto-centers. */
.jn-reservation > * {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Page header (back link + h1) --- */
.jn-reservation__hd {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
}

.jn-reservation__back {
  font: 400 13px var(--font-sans);
  color: var(--fg-muted);
  text-decoration: none;
}
.jn-reservation__back:hover { color: var(--c-schiefer); }

.jn-reservation__title {
  font: 700 22px/1.2 var(--font-display);
  color: var(--c-schiefer);
  margin: 0;
}

/* --- Intro / Rx notice (light laurel background) --- */
.jn-reservation__intro {
  font: 300 13.5px/1.6 var(--font-sans);
  color: var(--c-schiefer);
  margin: 0 auto 20px; /* keep auto left/right so > * centering isn't overridden */
  padding: 14px 18px;
  background: var(--bg-laurel);
  border-radius: var(--r-sm);
}

/* --- Item list card --- */
.jn-reservation__items {
  background: #fff;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
}

.jn-reservation__line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

/* The subtotal row is the last child of items, so remove the last line's bottom border. */
.jn-reservation__line:last-of-type { border-bottom: none; }

.jn-reservation__line__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.jn-reservation__line__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--c-lorbeer-hell);
}

.jn-reservation__line__name {
  display: block;
  font: 500 14px var(--font-sans);
  color: var(--c-schiefer);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jn-reservation__line__mfr {
  display: block;
  font: 400 12px var(--font-sans);
  color: var(--fg-muted);
  margin-top: 2px;
}

.jn-reservation__line__qty {
  font: 400 13px var(--font-sans);
  color: var(--fg-muted);
  white-space: nowrap;
}

.jn-reservation__line__price {
  font: 600 14px var(--font-sans);
  color: var(--c-schiefer);
  white-space: nowrap;
  min-width: 58px;
  text-align: right;
}

/* Subtotal row — sits inside .jn-reservation__items */
.jn-reservation__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  border-top: 1.5px solid var(--border);
  font: 600 14px var(--font-sans);
  color: var(--c-schiefer);
  background: #fff;
}

.jn-reservation__empty {
  padding: 24px 20px;
  font: 300 14px var(--font-sans);
  color: var(--fg-muted);
  margin: 0;
}

/* --- Rezeptart segmented selector (ADR-0024 amendment) --- */
.jn-rxseg { margin: 0 auto 16px; }
.jn-rxseg__label {
  font: 600 11px var(--font-sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px;
}
.jn-rxseg__track {
  display: flex; gap: 3px; background: var(--c-hellgrau);
  border-radius: var(--r-md); border: 1px solid var(--border); padding: 4px;
}
.jn-rxseg__track button {
  flex: 1; border: 0; background: none; cursor: pointer;
  padding: 10px 8px; border-radius: 7px; min-height: 44px;
  font: 500 13px var(--font-sans); color: var(--c-schiefer-300); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast);
}
.jn-rxseg__track button:hover:not(.is-on) { color: var(--c-schiefer); }
.jn-rxseg__track button.is-on { background: #fff; color: var(--c-schiefer); box-shadow: var(--shadow-sm); }
.jn-rxseg__hint {
  font: 300 12.5px/1.4 var(--font-sans); color: var(--fg-muted);
  margin: 8px 4px 0;
}
.jn-rxseg[hidden] { display: none; }

/* Estimate label next to Zwischensumme */
.jn-reservation__est {
  font: 400 11px var(--font-sans); color: var(--fg-muted);
  text-transform: none; letter-spacing: 0;
}

/* --- Form card --- */
.jn-reservation__form {
  background: #fff;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Contact fields — same rhythm as the checkout / Konto .set-field pattern:
   roomy 46px inputs, 7px label→input gap, generous gap between fields. */
.jn-reservation__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* One label+input pair — mirrors account.css .set-field. */
.jn-reservation__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Two-column row: Vorname | Nachname */
.jn-reservation__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

.jn-reservation__lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 11px var(--font-sans);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.jn-reservation__req,
.jn-reservation__opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Match account.css .set-field input sizing so reservation fields read identically. */
.jn-reservation__input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--c-schiefer-100);
  border-radius: var(--r-sm);
  font: 400 15px var(--font-sans);
  color: var(--c-schiefer);
  background: #fff;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.jn-reservation__input::placeholder { color: var(--c-schiefer-300); }
.jn-reservation__input:focus {
  outline: none;
  border-color: var(--c-schiefer);
  box-shadow: 0 0 0 3px rgba(14, 70, 70, 0.10);
}

/* --- Guest login affordance (ADR-0034 D5) at the top of the "Ihre Daten" card --- */
.jn-reservation__login-note {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--fg-muted);
  margin: 0 0 4px;
}
.jn-reservation__login-note a {
  color: var(--c-schiefer);
  font-weight: 600;
  text-decoration: underline;
}
.jn-reservation__login-note a:hover { opacity: 0.75; }

/* --- Acceptance note (ADR-0034 D9/D10): click = acceptance, no checkboxes --- */
.jn-reservation__accept {
  font: 400 12.5px/1.6 var(--font-sans);
  color: var(--fg-muted);
  margin: 10px 0 18px;
}
.jn-reservation__accept a {
  color: var(--c-schiefer);
  text-decoration: underline;
}
.jn-reservation__accept a:hover { opacity: 0.75; }

/* --- Inline error --- */
.jn-reservation__error {
  font: 600 12.5px/1.4 var(--font-sans);
  color: var(--c-danger, #b3261e);
  margin: 0;
}
.jn-reservation__error[hidden] { display: none; }

/* --- Submit — inherits jn-cart__btn schiefer fill; force full-width --- */
.jn-reservation__submit { width: 100%; }

/* --- Confirmation panel (revealed by JS on 201) --- */
.jn-reservation__done {
  background: #fff;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* !important so the [hidden] attr beats the element's inline display:flex
   (inline styles override a non-important stylesheet rule). Without it the
   confirmation panel renders on page load instead of only after submit. */
.jn-reservation__done[hidden] { display: none !important; }

.jn-reservation__done p {
  font: 300 15px/1.6 var(--font-sans);
  color: var(--c-schiefer);
  margin: 0;
  max-width: 42ch;
}

/* --- File uploader (Rezept / Arztausweis, ADR-0024 amendment) --- */
.jn-upload { margin-bottom: 4px; }

.jn-upload__lbl {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

.jn-upload__zone {
  border: 1.5px dashed var(--c-schiefer-100);
  border-radius: var(--r-md);
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--bg-muted);
  min-height: 140px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.jn-upload__zone:hover,
.jn-upload__zone.is-over {
  border-color: var(--c-schiefer);
  background: #fff;
}

.jn-upload__prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  text-align: center;
}
.jn-upload__icon {
  width: 36px; height: 36px;
  color: var(--c-schiefer-300);
}
.jn-upload__text {
  font: 500 13px var(--font-sans);
  color: var(--c-schiefer);
}
.jn-upload__drag-hint {
  font-weight: 400;
  color: var(--fg-muted);
}
.jn-upload__sub {
  font: 400 11.5px var(--font-sans);
  color: var(--fg-muted);
}

.jn-upload__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* [hidden] attribute must win over display:flex — same pattern as .jn-reservation__done[hidden] */
.jn-upload__preview[hidden] { display: none !important; }
.jn-upload__thumb[hidden]   { display: none !important; }
.jn-upload__thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.jn-upload__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jn-upload__name {
  font: 500 13px var(--font-sans);
  color: var(--c-schiefer);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jn-upload__size {
  font: 400 11.5px var(--font-sans);
  color: var(--fg-muted);
}
.jn-upload__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--fg-muted);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.jn-upload__remove:hover { color: var(--c-schiefer); }

.jn-upload__error {
  font: 600 12.5px/1.4 var(--font-sans);
  color: var(--c-danger, #b3261e);
  margin: 6px 4px 0;
}
.jn-upload__error[hidden] { display: none; }

/* ============================================================
   Account / OTP login pages (ADR-0034 Slice 3)
   Mirrors the reservation page layout: hellgrau canvas,
   white card, schiefer typography.
   ============================================================ */

/* Page canvas */
.shop-account {
  min-height: 70vh;
  background: var(--bg-muted);
  padding: 48px 20px 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Centered card */
.shop-account__card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 36px 32px 40px;
  box-shadow: var(--shadow-card);
}

.shop-account__title {
  font: 500 26px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--c-schiefer);
  margin: 0 0 10px;
}

.shop-account__subtitle {
  font: 300 14.5px/1.55 var(--font-sans);
  color: var(--fg-muted);
  margin: 0 0 24px;
}

/* Flash messages */
.shop-account__messages {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-account__message {
  font: 400 13.5px/1.4 var(--font-sans);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-muted);
  color: var(--c-schiefer);
  border: 1px solid var(--border);
}
.shop-account__message--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.shop-account__message--success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

/* ── Storefront-wide flash / toast region (ADR-0034) ──────────────────────── */
.shop-flash {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(520px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* let clicks through the gaps; items re-enable below */
}
.shop-flash__item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 14px/1.45 var(--font-sans);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--c-schiefer);
  box-shadow: var(--shadow-card);
  animation: shop-flash-in 0.22s ease both;
}
.shop-flash__item--success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
.shop-flash__item--info {
  background: #eff6ff;
  border-color: #93c5fd;
  color: var(--c-info);
}
.shop-flash__item--warning {
  background: #fffbeb;
  border-color: #fcd34d;
  color: var(--c-warning);
}
.shop-flash__item--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.shop-flash__text { flex: 1; }
.shop-flash__close {
  flex: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.6;
}
.shop-flash__close:hover { opacity: 1; }
.shop-flash__item.is-leaving {
  animation: shop-flash-out 0.2s ease both;
}
@keyframes shop-flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shop-flash-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 560px) {
  .shop-flash { top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-flash__item,
  .shop-flash__item.is-leaving { animation: none; }
}

/* Form */
.shop-account__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-account__label {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}

.shop-account__form input[type="email"],
.shop-account__form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid var(--c-schiefer-100);
  border-radius: var(--r-sm);
  font: 400 15px var(--font-sans);
  color: var(--c-schiefer);
  background: #fff;
  margin-bottom: 4px;
  transition: border-color var(--dur-fast);
}
.shop-account__form input:focus {
  outline: none;
  border-color: var(--c-schiefer);
  box-shadow: 0 0 0 3px rgba(14, 70, 70, 0.08);
}

.shop-account__error {
  font: 400 12.5px var(--font-sans);
  color: var(--c-danger, #b3261e);
  margin: 0 0 6px;
}

/* Submit button — reuses jk-btn-filled, force full-width */
.shop-account__button {
  width: 100%;
  margin-top: 10px;
}

/* Secondary actions row (verify page) */
.shop-account__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.shop-account__link {
  font: 400 13.5px var(--font-sans);
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.shop-account__link:hover { color: var(--c-schiefer); }

.shop-account__text-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 500 13.5px var(--font-sans);
  color: var(--c-schiefer);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.shop-account__text-button:hover { color: var(--c-lorbeer-700); }

/* Responsive */
@media (max-width: 480px) {
  .shop-account { padding: 24px 12px 60px; }
  .shop-account__card { padding: 28px 20px 32px; }
  .shop-account__title { font-size: 22px; }
}

/* --- Responsive (375px mobile) --- */
@media (max-width: 480px) {
  .jn-reservation { padding: 20px 12px 40px; }
  .jn-reservation__title { font-size: 19px; }
  .jn-reservation__line { padding: 12px 14px; gap: 10px; }
  .jn-reservation__subtotal { padding: 12px 14px; }
  .jn-reservation__form { padding: 20px 14px; }
  .jn-reservation__row { grid-template-columns: 1fr; }
  .jn-reservation__done { padding: 32px 14px; }
  .jn-upload__zone { padding: 28px 16px; min-height: 120px; }
  /* 4 rx buttons at 390px — shrink font so "Zuzahlungsbefreit" fits without wrapping */
  .jn-rxseg__track button { font-size: 11px; padding: 9px 5px; }
}

/* Touch targets: bump the primary shop controls to >=44px tall on phones.
   "In den Warenkorb" was 36px, the Filter button 29px — below the 44px
   comfortable-tap minimum. */
@media (max-width: 640px) {
  .jk-btn { min-height: 44px; }
  .pdp-amt__opt { min-height: 44px; }
  .cat-bar__filterbtn,
  .view-toggle__btn { min-height: 40px; }
}