:root{ --flu-font: 'Outfit', sans-serif; }   /* zentrale Schrift-Variable (Shop, WP-Kontext) */
/* ═══════════════════════════════════════════════════════════
   Fluica Product Modal — Figma Group 111 (pixel-exact rebuild)
   Source: Figma Frame 162:4604 — every dimension, color, font
   here maps directly to a Figma-exported coordinate.
   ═══════════════════════════════════════════════════════════ */

.flu-modal-backdrop {
  --nachtschliff:        #26232D;
  --nachtschliff-02:     #211E2A;
  --schattenwerk:        #8E8EC5;
  --schattenwerk-01:     #393853;
  --neutral-superhell:   #D3D3D9;
  --neutral-hell:        #BABAC4;
  --neutral:             #8D8D99;
  --neutral-dunkel:      #5A5A62;
  --marken-weiss:        #FAFAFA;
  --dornblatt:           #E3DF00;
  --dornblatt-01:        #5C5800;
  --error:               #C0392B;
  --success:             #2E7D5B;

  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: rgba(20, 18, 25, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  font-family: var(--flu-font);
  animation: flu-modal-fade 0.18s ease-out;
}

@keyframes flu-modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Defensive reset against theme bleed — many WP themes uppercase
   button text or add letter-spacing that bloats the visual size.
   We override aggressively (`!important`) because this CSS is
   loaded BEFORE the theme's button rules and would otherwise lose. */
.flu-modal-backdrop *,
.flu-modal-backdrop *::before,
.flu-modal-backdrop *::after {
  box-sizing: border-box;
  font-family: var(--flu-font) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
}

/* Underlines: ONLY the two download links (.flu-modal__download) are
   underlined. Suppress theme-bleed underlines on every other modal element —
   the qty +/- steppers, the "Beschreibung & Material" toggle, the description
   copy and the Add-to-cart button. */
.flu-modal-backdrop *:not(.flu-modal__download) {
  text-decoration: none !important;
}

body.flu-modal-open { overflow: hidden !important; }

/* ── Modal shell ────────────────────────────────────────────
   Figma Rectangle 55: 810.54×790.97, BG #211E2A, 3px solid
   #E3DF00 border, radius 12. Padding chosen to match the
   asymmetric Figma layout (left 18, right 32, top 20, bot 32).
   ─────────────────────────────────────────────────────────── */
.flu-modal {
  position: relative;
  width: 100%;
  /* 815 = Figma rect 810.54 + slight breathing room so the
     buy-row (QTY 70 + gap 18 + ATC 311 = 399) fits the info-col cleanly. */
  max-width: 815px;
  /* Cap to the viewport and scroll INSIDE (.flu-modal__scroll) instead of
     letting the panel grow past the screen. Keeps the ✕ (absolute, below)
     pinned and reachable even with the description open. dvh (with a vh
     fallback line first) so mobile browser chrome doesn't push the panel top —
     and the ✕ — off-screen. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nachtschliff-02);
  border: 3px solid var(--dornblatt);
  border-radius: 12px;
  color: var(--neutral-superhell);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  animation: flu-modal-pop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}

/* Scrollable content area. Padding lives here (moved off .flu-modal) so the
   scrollbar sits at the panel edge and the ✕ stays outside the scroll region.
   min-height:0 is the flexbox idiom that lets an auto-overflow flex child
   actually shrink and scroll. */
.flu-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 32px 32px 18px;
  -webkit-overflow-scrolling: touch;
}

@keyframes flu-modal-pop {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
  to   { transform: none;                          opacity: 1; }
}

/* Close: yellow "X" in the upper-right area (Figma top: 70).
   We pin it to top-right corner for UX rather than the exact
   Figma y because corner is the universal close affordance. */
/* Multi-selector + !important so the lavender X survives WP theme
   `button { color }` bleed. SVG uses currentColor → colour driven here. */
.flu-modal-backdrop .flu-modal__close,
.flu-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0 !important;
  /* Resting chip (panel colour @ 82%) so the ✕ stays clearly visible as a
     tap target over scrolled content — it sits ABOVE .flu-modal__scroll. */
  background: rgba(33, 30, 42, 0.82) !important;
  color: var(--marken-weiss, #fafafa) !important;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.flu-modal-backdrop .flu-modal__close svg,
.flu-modal__close svg {
  width: 24px;
  height: 24px;
  display: block;
}

.flu-modal-backdrop .flu-modal__close:hover,
.flu-modal-backdrop .flu-modal__close:focus-visible,
.flu-modal__close:hover,
.flu-modal__close:focus-visible {
  color: var(--marken-weiss, #fafafa) !important;
  background: rgba(142, 142, 197, 0.15) !important;
  outline: none;
}

/* ── 2-column grid: 300px image col + flex info col, 60px gap ─ */
.flu-modal__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: stretch;
}

/* ── Left column: image-main + image-detail + downloads ───── */
.flu-modal__left {
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

/* Hauptbild: 300×300, BG #D3D3D9 (Neutral super Hell), radius 4 */
.flu-modal__image-main {
  position: relative;
  width: 300px;
  height: 300px;
  background: var(--neutral-superhell);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Detail-Bild: 190×190, same styling, sits 20px below Hauptbild */
.flu-modal__image-detail {
  width: 190px;
  height: 190px;
  background: var(--neutral-superhell);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flu-modal__image-main img,
.flu-modal__image-detail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Modal gallery thumbnail strip (configured view set g,a,b,…).
   Grid of N equal columns spanning the main detail-image width (190px), so the
   thumbnails sit edge-to-edge under the main image regardless of count. The
   column count is passed inline from JS via --flu-thumb-count. */
.flu-modal__gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--flu-thumb-count, 3), 1fr);
  gap: 8px;
  margin-top: 12px;
  width: 190px;            /* == .flu-modal__image-detail width */
  max-width: 100%;
}
.flu-modal__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  /* !important defeats WP/Elementor `button:hover` background bleed (the thumbs
     are <button>s with transparent-PNG images, so the theme's red would show
     through). Same theme-bleed hardening as the modal's other buttons. */
  background: var(--neutral-superhell) !important;
  cursor: pointer;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.12s ease;
}
.flu-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.flu-modal__thumb:hover,
.flu-modal__thumb:focus,
.flu-modal__thumb:active {
  border-color: var(--schattenwerk, #8e8ec5);
  background: var(--neutral-superhell) !important;  /* re-assert: no theme red on hover */
  background-image: none !important;
}
.flu-modal__thumb.is-active { border-color: var(--dornblatt, #e3df00); }
/* Maßzeichnung (SVG) thumbnail on white — reads as a technical drawing.
   Listed after (and with :hover/:focus) so it stays white even on hover. */
.flu-modal__thumb--white,
.flu-modal__thumb--white:hover,
.flu-modal__thumb--white:focus,
.flu-modal__thumb--white:active { background: #fff !important; }

/* ── Detail image: zoom affordance + magnifier cue ───────────────── */
.flu-modal__image-detail { position: relative; cursor: zoom-in; }
/* White backdrop when the detail shows the Maßzeichnung. */
.flu-modal__image-detail--white { background: #fff !important; }
.flu-modal__zoom-cue {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20, 18, 28, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.flu-modal__zoom-cue svg { width: 17px; height: 17px; }
.flu-modal__image-detail:hover .flu-modal__zoom-cue { opacity: 1; }

/* ── Zoom lightbox ───────────────────────────────────────────────── */
.flu-modal__zoom {
  position: fixed;
  inset: 0;
  z-index: 2147483647;  /* above the modal backdrop (2147483600) */
  background: rgba(12, 10, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.flu-modal__zoom.is-zoomed { cursor: zoom-out; }
.flu-modal__zoom.is-grabbing { cursor: grabbing; }
.flu-modal__zoom-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 0.05s linear;
  will-change: transform;
}
.flu-modal__zoom--white .flu-modal__zoom-img { background: #fff; }
.flu-modal__zoom-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.flu-modal__zoom-close svg { width: 22px; height: 22px; }
.flu-modal__zoom-close:hover { background: rgba(255, 255, 255, 0.22); }
.flu-modal__zoom-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 14px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
}

.flu-modal__image-main--placeholder,
.flu-modal__image-detail--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #c8c8d0 0%, #a8a8b0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3D-Viewer mount-point — fills the 300×300 image-main box. Three.js
   appends its WebGL canvas inside; the status overlay covers the box
   while loading and is hidden once GLB load resolves. */
.flu-modal__viewer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.flu-modal__viewer:active { cursor: grabbing; }

.flu-modal__viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.flu-modal__viewer-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-dunkel);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 16px;
  pointer-events: none;
}

.flu-modal__viewer-status--error {
  color: var(--error);
}

.flu-modal__orbit-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  pointer-events: none;
}
.flu-modal__orbit-icon svg {
  width: 44px;
  height: 44px;
}
.flu-modal__orbit-icon path {
  fill: var(--schattenwerk, #8E8EC5);
}

/* Downloads: bottom of left column. margin-top:auto pushes the
   block to the bottom so it aligns with the buy-row on the right. */
.flu-modal__downloads {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.flu-modal__download {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--neutral);
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  display: inline-block;
  align-self: flex-start;
}

.flu-modal__download:hover,
.flu-modal__download:focus-visible {
  color: var(--marken-weiss);
  outline: none;
}

.flu-modal__download--disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.flu-modal__download--disabled:hover {
  color: var(--neutral);
}

/* Gated STEP download: Nutzungsbedingungen checkbox above the (disabled-until-
   accepted) link, warning note below. */
.flu-modal__step-dl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.flu-modal__terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--neutral);
  cursor: pointer;
}

.flu-modal__terms input {
  margin-top: 2px;
  flex: 0 0 auto;
  cursor: pointer;
}

.flu-modal__terms a {
  color: var(--schattenwerk);          /* distinct lavender link colour (not the
                                          grey body text) so it clearly reads as a link */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.flu-modal__terms a:hover {
  color: var(--dornblatt);             /* yellow accent on hover */
  text-decoration: underline;
}

/* Sample/decoy hint shown directly under the STEP download link. Visible, but
   deliberately NOT a link: no underline, smaller, not clickable. */
.flu-modal__download-note {
  display: block;
  align-self: flex-start;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--neutral);
  text-decoration: none;
  margin: 2px 0 10px;
}

/* ── Right column: info stack ─────────────────────────────── */
.flu-modal__right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Title (Schlauchverbinder gerade): Outfit Bold 24/30 — Neutral super Hell */
.flu-modal__title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--neutral-superhell);
}

/* Line 8 — white 2px under title, before dimensions */
.flu-modal__line-white {
  height: 0;
  border: 0;
  border-top: 2px solid var(--neutral-superhell);
  margin: 8px 0 8px;
  flex-shrink: 0;
}

/* Dimensions (28.0 / 31.0 mm): Outfit ExtraBold 48/60 — Dornblatt */
.flu-modal__dimensions {
  margin: 0;
  font-weight: 800;
  font-size: 34px;
  line-height: 44px;
  color: var(--dornblatt);
  letter-spacing: 0;
}

/* Artikelnummer: Outfit Regular 16/27 — Neutral Dunkel */
.flu-modal__article {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  color: var(--neutral-dunkel);
  word-break: break-all;
}

/* Line 9 — dark 2px under article */
.flu-modal__line-dark {
  height: 0;
  border: 0;
  border-top: 2px solid var(--neutral-dunkel);
  margin: 12px 0 16px;
  flex-shrink: 0;
}

/* Section title (Staffelpreise): Outfit Bold 20/25 — Schattenwerk.
   Reduced from 26/33 to free vertical room for the details accordion;
   the tier rows below shrink in step. */
.flu-modal__section-title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: var(--schattenwerk);
}

/* Line 6 / Line 10 — gray 2px around tier rows */
.flu-modal__line-gray {
  height: 0;
  border: 0;
  border-top: 2px solid var(--neutral);
  margin: 12px 0 0;
  flex-shrink: 0;
}

.flu-modal__line-gray + .flu-modal__tiers { margin-top: 6px; }

/* Tier list (5 rows) */
.flu-modal__tiers {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

/* Single tier row: Outfit Regular 18/22, neutral gray. Shrunk from 24/27
   (+ tighter 4px padding) so all six staffel rows take ~66px less height,
   which pays for the details accordion below. */
.flu-modal__tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: var(--neutral);
}

.flu-modal__tier--active {
  color: var(--marken-weiss);
  font-weight: 600;
}

.flu-modal__tier-qty   { white-space: nowrap; }
.flu-modal__tier-price { font-variant-numeric: tabular-nums; text-align: right; }

/* Stueckpreis row (CHF 10.05 + pro Stück) */
.flu-modal__unit-price-row {
  display: flex;
  align-items: baseline;
  margin-top: 18px;
}

/* CHF 10.05: Outfit Bold 40/50 — Dornblatt */
.flu-modal__unit-price {
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  color: var(--dornblatt);
  flex: 1;
  font-variant-numeric: tabular-nums;
}

/* "pro Stück": Outfit Medium 16/20 — Neutral */
.flu-modal__unit-suffix {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--neutral);
  white-space: nowrap;
}

/* Line 11 + Line 12 — double yellow lines under stueckpreis
   Figma: 2px line at y616 + 5px gap + 2px line at y623 = 9px total */
.flu-modal__line-yellow {
  height: 5px;
  border: 0;
  border-top: 2px solid var(--dornblatt);
  border-bottom: 2px solid var(--dornblatt);
  margin: 6px 0 14px;
  background: transparent;
  flex-shrink: 0;
}

/* "Gesamtpreis 123.45 CHF" — small line directly under the yellow line,
   right-aligned to sit under the unit price. Updates live with quantity. */
.flu-modal__total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 6px;
  width: 100%;
}
.flu-modal__total-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--neutral);
}
.flu-modal__total-value {
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--dornblatt);
  font-variant-numeric: tabular-nums;
}

/* "Alle Preise exkl. MwSt." — right-aligned, ABOVE the buy-row */
.flu-modal__tax {
  margin: 0 0 14px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--neutral);
  text-align: right;
  align-self: flex-end;
  width: 100%;
}

/* Shipping-time note — mirrors .flu-pp-ship-note on the fixed product page. */
.flu-modal__ship-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font: 500 14px/18px 'Outfit', sans-serif;
  color: var(--neutral);
}
.flu-modal__ship-note svg { flex: 0 0 auto; width: 17px; height: 17px; stroke: var(--dornblatt); fill: none; }

/* Inline error (fail-closed pricing) */
.flu-modal__error {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(192, 57, 43, 0.12);
  border: 1px solid var(--error);
  border-radius: 6px;
  color: #f3a8a0;
  font-size: 15px;
  line-height: 1.4;
}

/* ── Buy row: qty picker (left) + ATC (right, flush) ──────── */
.flu-modal__buy-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
}

/* "Direkt zum Warenkorb" — secondary nav link directly under the ATC button.
   Right-aligned (align-self) so it sits beneath the right-flushed yellow
   button. Hardened with !important across three selector forms so the WP
   theme's generic `a { ... }` rules can't restyle or underline it. */
.flu-modal-backdrop .flu-modal__go-cart,
.flu-modal__go-cart,
a.flu-modal__go-cart {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  gap: 4px !important;
  width: auto !important;
  margin: 10px 0 0 !important;
  padding: 2px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--schattenwerk) !important;
  font-family: var(--flu-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
}
.flu-modal-backdrop .flu-modal__go-cart:hover,
.flu-modal-backdrop .flu-modal__go-cart:focus-visible,
.flu-modal__go-cart:hover,
.flu-modal__go-cart:focus-visible {
  color: var(--dornblatt) !important;
  text-decoration: underline !important;
  outline: none !important;
}
.flu-modal__go-cart-arrow {
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* ── Details: "Beschreibung & Material" — FULL WIDTH below the grid ──
   Reveals the editorial copy from product_content.py (hydrated via
   /product-info). Open by default (markup ships --open + visible body); the
   header stays a toggle so it can be collapsed. Separated from the grid by a
   full-width top rule. Hidden via [hidden] until content resolves, so a
   product without copy shows nothing. */
.flu-modal__details {
  border-top: 2px solid var(--neutral-dunkel);
  margin-top: 14px;
}
.flu-modal__details[hidden] { display: none; }
.flu-modal-backdrop .flu-modal__details-toggle,
.flu-modal__details-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 14px 0 6px !important;
  margin: 0 !important;
  color: var(--schattenwerk) !important;
  font-family: var(--flu-font) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.flu-modal__details-toggle:hover,
.flu-modal__details-toggle:focus-visible {
  color: var(--marken-weiss) !important;
  outline: none !important;
}
.flu-modal__details-chev {
  color: var(--neutral);
  font-size: 13px;
  transition: transform 0.18s ease;
}
.flu-modal__details--open .flu-modal__details-chev { transform: rotate(180deg); }
.flu-modal__details-body { padding: 2px 0 4px; }
.flu-modal__details-body[hidden] { display: none; }
/* Use the full width: description left, spec list right. */
.flu-modal__details-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px 36px;
  align-items: start;
}
.flu-modal__details-desc {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--neutral-superhell);
}
.flu-modal__spec-list {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 8px;
  column-gap: 10px;
  align-content: start;
}
.flu-modal__spec-list dt { font-size: 14px; color: var(--neutral); }
.flu-modal__spec-list dd { margin: 0; font-size: 14px; color: var(--neutral-superhell); }

/* Titled application note (e.g. Niederdruckanwendung) — brand-yellow accent. */
.flu-modal__note {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--dornblatt);
  background: rgba(227, 223, 0, 0.08);
  border-radius: 4px;
}
.flu-modal__note-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-superhell);
}
.flu-modal__note-text {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral);
}

/* Stack the details columns on narrow screens (matches the modal's mobile
   breakpoint so the description never gets squeezed in a 1-col layout). */
@media (max-width: 760px) {
  .flu-modal__details-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* QTY picker — line-framed [ − n + ] with top/bottom hairlines only, matching
   the WP/WC product-page stepper (.flu-pp-qty-wrap). No box, no rounded border,
   no dividers — just two horizontal rules. Hardened with !important against
   WP-theme `button { … }` rules (Hello-Elementor + Elementor-Pro) that would
   otherwise blow the +/− glyphs up to an unreadable size. Same defensive
   pattern as the ATC button below. */
.flu-modal .flu-modal__qty,
.flu-modal__qty {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: auto !important;
  height: 44px !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-top: 2px solid var(--neutral) !important;
  border-bottom: 2px solid var(--neutral) !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  background: transparent !important;
}

/* "−" / "+" — readable, fixed-size tap targets */
.flu-modal .flu-modal__qty-btn,
.flu-modal__qty-btn,
button.flu-modal__qty-btn {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--neutral) !important;
  font-family: var(--flu-font) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: 42px !important;
  min-width: 42px !important;
  height: auto !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.12s, color 0.12s;
}

.flu-modal__qty-btn:hover:not(:disabled),
.flu-modal__qty-btn:focus-visible {
  color: var(--marken-weiss) !important;
  background: transparent !important;
  outline: none !important;
}

.flu-modal__qty-btn:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }

/* "1" — center number, no dividers (line-frame style like the product page) */
.flu-modal .flu-modal__qty-value,
.flu-modal__qty-value {
  color: var(--neutral) !important;
  font-family: var(--flu-font) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-align: center !important;
  min-width: 34px !important;
  padding: 0 6px !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 0 !important;
  border-right: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Editable quantity: a real <input type=number> — strip the native spinner
   buttons (we have our own +/-), kill the UA border/outline. No dividers in
   the line-frame style; the top/bottom rules live on the .flu-modal__qty wrap. */
input.flu-modal__qty-value,
.flu-modal input.flu-modal__qty-value {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 64px !important;
  margin: 0 !important;
  background: transparent !important;
  outline: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
input.flu-modal__qty-value::-webkit-outer-spin-button,
input.flu-modal__qty-value::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ATC button — hardened with !important against WP-theme button rules
   (Hello-Elementor + Elementor-Pro both have `button { ... }` overrides
   that would otherwise win specifity ties). */
.flu-modal .flu-modal__atc,
.flu-modal__atc,
button.flu-modal__atc {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  max-width: 280px !important;
  min-width: 200px !important;
  height: 44px !important;
  background: var(--dornblatt) !important;
  background-color: var(--dornblatt) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--nachtschliff) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--flu-font) !important;
  transition: background 0.15s, transform 0.05s;
  padding: 0 16px !important;
  box-shadow: none !important;
}

.flu-modal__atc:hover:not(:disabled),
.flu-modal__atc:focus-visible {
  background: #f0ec20;
  outline: none;
}

.flu-modal__atc:active:not(:disabled) { transform: translateY(1px); }

.flu-modal__atc:disabled {
  background: var(--neutral-dunkel);
  color: var(--neutral);
  cursor: not-allowed;
}

/* "Added to cart" confirmation: a brief LAVENDER flash (not green), then the
   base transition fades it back to the yellow default. !important so it wins
   over the disabled grey while the (optimistic) request is in flight. */
/* Specificity must beat the base `.flu-modal .flu-modal__atc` (0,2,0 !important),
   so we mirror that and add the class → 0,3,0, otherwise the yellow !important
   wins and the lavender flash never shows. */
.flu-modal .flu-modal__atc.flu-modal__atc--added,
.flu-modal__atc.flu-modal__atc--added,
button.flu-modal__atc.flu-modal__atc--added {
  background: var(--schattenwerk) !important;
  background-color: var(--schattenwerk) !important;
  color: #fff !important;
  cursor: default !important;
}

/* Cart icon — ultra-defensive pinning. Five different selector forms
   so no WP/Elementor `button svg`, `button *`, `.elementor-button > *`,
   or `[class*="icon"]` rule can override. Also explicit fill/stroke
   resets to neutralize theme color overrides. */
.flu-modal-backdrop .flu-modal__atc svg.flu-modal__atc-cart-icon,
.flu-modal-backdrop svg.flu-modal__atc-cart-icon,
.flu-modal-backdrop button svg.flu-modal__atc-cart-icon,
button.flu-modal__atc > svg.flu-modal__atc-cart-icon,
svg.flu-modal__atc-cart-icon {
  width: 19px !important;
  height: 17px !important;
  min-width: 19px !important;
  max-width: 19px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  flex: 0 0 19px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  fill: currentColor !important;
  stroke: none !important;
  overflow: visible !important;
}

/* Dimensions + star row */
.flu-modal__dim-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* Merkliste star button — inline next to dimensions.
   Lavendel (filled) default, accent-gelb when active. */
.flu-modal .flu-modal__fav,
.flu-modal__fav,
button.flu-modal__fav {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--schattenwerk) !important;
  box-shadow: none !important;
  transition: color 0.15s, transform 0.1s !important;
}
.flu-modal__fav:hover { color: var(--dornblatt) !important; transform: scale(1.12); }
.flu-modal__fav:active { transform: scale(0.94); }
.flu-modal .flu-modal__fav.flu-modal__fav--active,
.flu-modal__fav.flu-modal__fav--active { color: var(--dornblatt) !important; }
.flu-modal-backdrop svg.flu-modal__fav-icon,
button.flu-modal__fav > svg.flu-modal__fav-icon,
svg.flu-modal__fav-icon {
  width: 28px !important;
  height: 27px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Default = Kontur (wie Kachel/Header), Active (gemerkt) = gelb gefüllt.
   fill/stroke am <path> setzen, da das Outline-SVG fill="none" als
   Präsentations-Attribut trägt (svg-Regel würde es nicht überstimmen). */
.flu-modal__fav svg.flu-modal__fav-icon path {
  fill: none !important;
  stroke: currentColor !important;
}
.flu-modal__fav--active svg.flu-modal__fav-icon path {
  fill: currentColor !important;
}

/* ── Mobile: stack to single column, bottom-sheet feel ───── */
@media (max-width: 760px) {
  .flu-modal-backdrop { padding: 0; align-items: flex-end; }

  .flu-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    border-width: 3px 0 0 0;
    /* dvh, NOT vh: on mobile `vh` is the LARGEST viewport (address bar hidden),
       so `94vh` can exceed the actually-visible height. As a bottom-anchored
       sheet (backdrop align-items:flex-end) the overflow pushes the panel TOP —
       the yellow border and the ✕ close button — off the top of the screen,
       leaving the back button as the only exit. `dvh` accounts for the browser
       chrome so the ✕ stays on-screen. `vh` line first as a legacy fallback. */
    max-height: 92vh;
    max-height: 92dvh;
    animation: flu-modal-slide-up 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  /* Scroll wrapper keeps the single scroll container on mobile too; padding
     moves here from .flu-modal so the bottom-sheet ✕ stays pinned. */
  .flu-modal__scroll { padding: 22px 18px 24px; }

  @keyframes flu-modal-slide-up {
    from { transform: translateY(100%); } to { transform: translateY(0); }
  }

  .flu-modal__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .flu-modal__left {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
      "main detail"
      "downloads downloads";
    gap: 12px;
    min-width: 0;
  }

  .flu-modal__image-main   { grid-area: main;     width: 100%; height: auto; aspect-ratio: 1; }
  .flu-modal__image-detail { grid-area: detail;   width: 100%; height: auto; aspect-ratio: 1; margin-top: 0; }
  .flu-modal__downloads    { grid-area: downloads; padding-top: 0; }

  .flu-modal__download      { font-size: 18px; line-height: 22px; }

  .flu-modal__title         { font-size: 20px; line-height: 26px; }
  .flu-modal__dimensions    { font-size: 26px; line-height: 34px; }
  .flu-modal__article       { font-size: 14px; line-height: 22px; }
  .flu-modal__section-title { font-size: 20px; line-height: 26px; }
  .flu-modal__tier          { font-size: 16px; line-height: 22px; padding: 6px 0; }
  .flu-modal__unit-price    { font-size: 26px; line-height: 34px; }

  /* !important here re-asserts mobile layout over the hardened desktop rules
     (which themselves use !important to beat the WP theme). On phones the ATC
     fills the row again next to the compact stepper. */
  .flu-modal__atc           { flex: 1 1 auto !important; width: auto !important; margin-left: 0 !important; min-width: 0 !important; font-size: 17px !important; height: 50px !important; padding: 0 12px !important; gap: 10px; }
  .flu-modal__atc-cart-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .flu-modal__buy-row       { gap: 12px; }
  .flu-modal__qty           { height: 50px !important; }
  .flu-modal__qty-btn       { width: 38px !important; min-width: 38px !important; }
  /* On the stacked mobile layout the ATC button is full-width, so centre the
     secondary link under it instead of pinning it to the right edge. */
  .flu-modal__go-cart       { align-self: center !important; font-size: 16px !important; margin-top: 12px !important; }
}

/* ── Inline-Modus (feste Produktseite /produkt/<slug>/) ──────────────────
   Dieselbe Modal-Karte, aber in den Seitenfluss gemountet statt als Overlay.
   FluicaModal.renderInline() mountet den GANZEN .flu-modal-backdrop (er trägt
   die CSS-Variablen) und hängt hier die Neutralisierungs-Klassen an. */
.flu-modal-backdrop--inline {
  position: static;
  inset: auto;
  z-index: auto;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  display: block;
}
.flu-modal--inline {
  max-width: 1100px;
  max-height: none;      /* im Fluss wachsen, kein innerer Scroll wie im Overlay */
  margin: 0 auto;
  animation: none;       /* kein Pop-in beim Seitenaufbau */
}
.flu-modal--inline .flu-modal__close { display: none; }  /* kein Schließen auf der Seite */
.flu-modal-backdrop--inline .flu-modal__scroll { overflow: visible; }