/* Konfigurator-/Preisbox-Styles — EINE Quelle für zwei Wege:
   1. Als Bundle-Global in widget.js injiziert (Shop-Widget + PIM-Vorschau, self-contained).
   2. Als /configurator/widget.css vom Service ausgeliefert und vom PHP-Plugin auf ALLEN Produktseiten
      enqueued — so tragen auch Nicht-Konfigurator-Produkte dieselbe Preisbox, ohne das JS-Bundle zu laden
      (Pflichtangaben bleiben serverseitig, kein Service-Abhängigkeit).
   --jsk-accent wird pro Produkt vom Widget/PHP gesetzt (Avada-Akzent). */

.jsk {
  --jsk-accent: #26374d;
  --jsk-accent-soft: #34506f;
  --jsk-border: #d7dde5;
  --jsk-muted: #5b6473;
  --jsk-ink: #1f2733;
  --jsk-price-bg: #f7f9fc;
  --jsk-price-border: #e3e8ef;
  --jsk-ok: #1f7a4d;
  margin: 1rem 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--jsk-ink);
}

.jsk-row { margin: 1rem 0; }
.jsk-label { display: block; font-weight: 700; margin-bottom: .5rem; color: var(--jsk-ink); }

/* Länge: Slider auf eigener Zeile (volle Breite), darunter Zahlenfeld + Einheit inline nebeneinander. */
.jsk-length-slider { display: block; width: 100%; accent-color: var(--jsk-accent); margin: .1rem 0 .7rem; }
.jsk-length-field { display: flex; align-items: center; gap: .6rem; }
.jsk-num {
  width: 7rem; padding: .55rem .65rem; border: 1px solid var(--jsk-border); border-radius: 9px;
  font-size: 1.05rem; font-variant-numeric: tabular-nums; background: #fff; color: var(--jsk-ink);
}
.jsk-unit { color: var(--jsk-muted); font-size: .95rem; }
.jsk-hint { color: var(--jsk-muted); font-size: .82rem; margin-top: .5rem; }

/* Richten + Endenbearbeitung nebeneinander. */
.jsk-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1rem 0; }
.jsk-two-col .jsk-row { margin: 0; }
@media (max-width: 480px) { .jsk-two-col { grid-template-columns: 1fr; } }

/* Segmented-Buttons (Richten Nein/Ja, Endenbearbeitung) im Avada-Look — echte Radios/Checkboxen darunter. */
.jsk-seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.jsk-seg-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: .5rem .9rem; border: 1px solid var(--jsk-border); border-radius: 9px;
  background: #fff; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--jsk-ink);
  transition: background .12s, border-color .12s, color .12s;
}
.jsk-seg-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.jsk-seg-btn:hover { border-color: var(--jsk-accent); }
.jsk-seg-btn.is-on { background: var(--jsk-accent); border-color: var(--jsk-accent); color: #fff; }
.jsk-seg-btn:focus-within { outline: 2px solid var(--jsk-accent); outline-offset: 2px; }
.jsk-seg-btn small { font-weight: 500; opacity: .8; margin-left: .35rem; }

/* Preisbox — Figuren links (Stückpreis, Gesamt, Grundpreis), Meta rechts (Art.-Nr., Lieferzeit). */
.jsk-price {
  margin-top: 1.25rem; border: 1px solid var(--jsk-price-border); border-radius: 14px;
  background: var(--jsk-price-bg); overflow: hidden;
}
.jsk-price-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.05rem 1.15rem .9rem; }
.jsk-price-figures { min-width: 0; }
.jsk-price-main { font-size: 1.7rem; font-weight: 800; letter-spacing: -.015em; color: var(--jsk-ink); line-height: 1.1; }
.jsk-price-main .jsk-per { font-size: .95rem; font-weight: 600; color: var(--jsk-muted); }
.jsk-price-total { margin-top: .35rem; font-size: 1rem; font-weight: 700; color: var(--jsk-accent-soft); }
.jsk-price-base { margin-top: .4rem; font-size: .82rem; color: var(--jsk-muted); }
/* Germanized-Pflichthinweise (Block-Elemente) in EINE Zeile zwingen: „exkl. MwSt · zzgl. Versandkosten". */
.jsk-legal, .jsk-legal * { display: inline !important; margin: 0 !important; }
.jsk-legal br { display: none !important; }
.jsk-legal .jsk-sep { color: var(--jsk-muted); }
.jsk-price-meta { flex: 0 0 auto; display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; text-align: right; }
.jsk-price-sku { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--jsk-ink); font-variant-numeric: tabular-nums; }
.jsk-price-lead { font-size: .78rem; color: var(--jsk-muted); display: inline-flex; align-items: center; gap: .35rem; }
.jsk-price-lead .jsk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jsk-ok); flex: 0 0 auto; }
.jsk-price-foot { border-top: 1px dashed var(--jsk-price-border); padding: .55rem 1.15rem; }
.jsk-price-foot:empty { display: none; }

/* Einklappbare Preis-Aufschlüsselung. */
.jsk-details > summary { cursor: pointer; color: var(--jsk-muted); font-size: .82rem; list-style: none; }
.jsk-details > summary::-webkit-details-marker { display: none; }
.jsk-details > summary::before { content: "\25B8  Preis-Details"; }
.jsk-details[open] > summary::before { content: "\25BE  Preis-Details"; }
.jsk-breakdown { margin: .5rem 0 0; padding: 0; list-style: none; font-size: .82rem; color: var(--jsk-muted); }
.jsk-breakdown li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }

.jsk-hidden { display: none !important; }

/* Options-Zeilen im Mini-Cart (außerhalb von .jsk gerendert -> keine --jsk-Variablen, feste dezente Werte). */
.jsk-mini-options { margin-top: .25rem; font-size: .78rem; line-height: 1.35; color: #5b6473; }