/* ============================================================================
 * cp-options.css
 * ----------------------------------------------------------------------------
 * Styling für Custom Product Options.
 *
 * Alle Selektoren mit "cp-" prefixiert – kollisionssicher.
 * Werte über CSS-Variablen, damit Themes leicht anpassen können.
 * ============================================================================ */

/* ---------- Live-Gesamtpreis ---------- */
.cp-live-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--cp-bg-soft, #f6f8fc), #ffffff);
  border: 1.5px solid var(--cp-accent-soft, #e6e7fb);
  border-radius: var(--cp-radius, 14px);
  box-shadow: var(--cp-shadow, 0 6px 22px rgba(31,41,95,.08));
}
.cp-live-price__label {
  font-family: var(--cp-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-muted, #6b7280);
}
.cp-live-price__value {
  font-family: var(--cp-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cp-accent, #6366f1);
  font-variant-numeric: tabular-nums;
  transition: color 150ms ease, transform 150ms ease;
}

/* ---------- Info-Block (Text / Bild / Trennlinie) ---------- */
.cp-info {
  font-family: var(--cp-font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cp-muted, #6b7280);
}
.cp-info p { margin: 0 0 8px; }
.cp-info p:last-child { margin-bottom: 0; }
.cp-info img {
  max-width: 100%;
  height: auto;
  border-radius: var(--cp-radius-sm, 10px);
  display: block;
  margin: 6px auto;
  box-shadow: 0 2px 12px rgba(31, 41, 95, 0.07);
}
.cp-info hr {
  border: 0;
  border-top: 1px solid var(--cp-border, #e6e8ee);
  margin: 12px 0;
}
.cp-info strong {
  color: var(--cp-text, #1d1c1c);
  font-family: var(--cp-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* „Reine Überschrift"-Info (nur ein fettes Wort, z. B. „Eingaben bestätigen")
   bekommt etwas mehr Gewicht und Abstand als Abschnitts-Titel. */
.cp-info p > span > strong { font-size: 15px; }

/* ---------- Felder UNTER dem Tab-Container (Footer-Bereich) ---------- */
.cp-notab-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1.5px solid var(--cp-border, #e6e8ee);
}
.cp-notab-row > .cp-field { margin: 0; }

/* ---------- Konfiguration teilen / laden ---------- */
.cp-share { margin-top: 16px; }
/* Haupt-Button „Konfiguration teilen" */
.cp-share__main {
  width: 100%; border: 0; cursor: pointer;
  padding: 14px 18px;
  border-radius: var(--cp-pill, 100px);
  background: var(--cp-accent-grad, linear-gradient(135deg,#667eea 0%,#764ba2 100%)); color: #fff;
  font-family: var(--cp-font-display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--cp-shadow, 0 6px 22px rgba(31,41,95,.08));
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cp-share__main:hover {
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-hover, 0 10px 30px rgba(99,102,241,.16));
  filter: brightness(1.03);
}
/* Ausklapp-Panel mit den Teilen-Optionen */
.cp-share__panel {
  margin-top: 10px;
  border: 1.5px solid var(--cp-border, #e6e8ee);
  border-radius: var(--cp-radius, 14px);
  background: var(--cp-bg, #fff);
  padding: 16px 18px;
  animation: cpFade .22s ease;
}
.cp-share__panel[hidden] { display: none; }
.cp-share__hint {
  margin: 0 0 12px;
  font-size: 13px; line-height: 1.4;
  color: var(--cp-muted, #6b7280);
}
.cp-share__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.cp-share__opt {
  border: 1.5px solid var(--cp-border, #e6e8ee); cursor: pointer;
  padding: 11px 14px;
  border-radius: var(--cp-radius-sm, 10px);
  background: var(--cp-bg-soft, #f6f8fc); color: var(--cp-text);
  font-family: var(--cp-font-display); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cp-share__opt:hover {
  transform: translateY(-1px);
  border-color: var(--cp-accent-soft, #e6e7fb);
  box-shadow: var(--cp-shadow, 0 6px 22px rgba(31,41,95,.08));
}
.cp-share__opt--primary {
  grid-column: 1 / -1;
  background: var(--cp-accent-grad, linear-gradient(135deg,#667eea 0%,#764ba2 100%)); color: #fff; border-color: transparent;
}
.cp-share__opt--whatsapp:hover { border-color: #25d366; color: #128c4b; }
.cp-share__opt--telegram:hover { border-color: #29a9eb; color: #1c87c9; }
.cp-share__opt--instagram:hover { border-color: #d6249f; color: #c1278e; }

/* ---------- Moderner Tabs-Container (Card mit Segment-Control) ---------- */
.cp-tabs {
  background: linear-gradient(180deg, #ffffff, var(--cp-bg-soft, #f6f8fc));
  border: 1px solid var(--cp-border, #e6e8ee);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--cp-shadow, 0 6px 22px rgba(31,41,95,.08));
}
@media (max-width: 600px) { .cp-tabs { padding: 16px; border-radius: 18px; } }

/* Tab-Leiste oben als „Segmented Control".
   Bei wenigen Tabs füllen sie die Breite (flex:1). Werden es mehr, als in eine
   Reihe passen, brechen sie sauber um (flex-wrap) – der Text wird nie
   abgeschnitten (white-space:nowrap + min-width:fit-content). */
.cp-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--cp-track, #f1f1f7);
  padding: 4px;
  border-radius: var(--cp-pill, 100px);
  margin-bottom: 22px;
}
/* Mehrzeilige Tabs: moderate Rundung statt riesiger Pillen-Rundung am hohen Container */
.cp-tabs__nav--wrapped { border-radius: var(--cp-radius, 14px); }
.cp-tabs__tab {
  appearance: none;
  flex: 1 1 auto;
  min-width: fit-content;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: var(--cp-pill, 100px);
  padding: 11px 16px;
  font: inherit;
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--cp-muted, #6b7280);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cp-tabs__tab:hover { color: var(--cp-accent, #6366f1); }
.cp-tabs__tab.is-active {
  color: #ffffff;
  background: var(--cp-accent-grad, linear-gradient(135deg,#667eea 0%,#764ba2 100%));
  box-shadow: 0 4px 12px rgba(99,102,241,.34);
  transform: translateY(-0.5px);
}
.cp-tabs__tab.is-active:hover { color: #ffffff; }
/* Viele Tabs / sehr schmal: Umbruch nutzen, kompakteres Padding,
   damit alle Tabs lesbar bleiben. */
@media (max-width: 600px) {
  .cp-tabs__tab { padding: 10px 13px; font-size: 13px; }
}
/* Fehler-Indikator am Tab: roter Punkt + Akzentfarbe, wenn ein Pflichtfeld
   in diesem Tab fehlt. */
.cp-tabs__tab--error { color: var(--cp-error, #dc2626); }
.cp-tabs__tab--error.is-active { color: #ffffff; }
.cp-tabs__tab--error::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cp-error, #dc2626);
  flex: 0 0 auto;
}
.cp-tabs__panel { display: none; grid-template-columns: repeat(12, 1fr); gap: var(--cp-gap, 16px); align-content: start; }
.cp-tabs__panel.is-active { display: grid; animation: cpFade .22s ease; }
@keyframes cpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Select mit Bild (cp-imgsel) ---------- */
.cp-imgsel { position: relative; }
.cp-imgsel__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  min-height: 52px;
  background: var(--cp-bg, #fff);
  border: 1.5px solid var(--cp-border, #e6e8ee);
  border-radius: var(--cp-radius-sm, 10px);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cp-imgsel__button:focus,
.cp-imgsel.is-open .cp-imgsel__button {
  outline: none;
  border-color: var(--cp-accent, #6366f1);
  box-shadow: 0 0 0 4px var(--cp-accent-soft, #e6e7fb);
}
.cp-imgsel__current { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-imgsel__placeholder { color: #6b6b6b; }
.cp-imgsel__thumb {
  width: 32px; height: 32px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.cp-imgsel__label {
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-imgsel__caret {
  width: 0; height: 0; flex-shrink: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #555;
  transition: transform 150ms ease;
}
.cp-imgsel.is-open .cp-imgsel__caret { transform: rotate(180deg); }
.cp-imgsel__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: none;
  padding: 4px;
}
.cp-imgsel.is-open .cp-imgsel__list { display: block; }
.cp-imgsel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.cp-imgsel__item:hover { background: #f4f4f4; }
.cp-imgsel__item.is-selected { background: #eef3f1; font-weight: 600; }

.cp-options {
  /* Design-Tokens – abgestimmt auf die PupStyle „Produkt-Umschalt-Tabs" (Indigo/Violett) */
  --cp-text:        #11131c;
  --cp-muted:       #4b5563;
  --cp-border:      #e6e8ee;
  --cp-border-focus:#6366f1;
  --cp-bg:          #ffffff;
  --cp-bg-soft:     #f6f7fd;
  --cp-accent:      #6366f1;
  --cp-accent-2:    #764ba2;
  --cp-accent-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --cp-accent-soft: #e6e7fb;
  --cp-track:       #f1f1f7;
  --cp-error:       #ef4444;
  --cp-radius:      14px;       /* weiche Card-Ecken wie in den ps-Sections */
  --cp-radius-sm:   10px;
  --cp-pill:        100px;      /* runde Pills */
  --cp-gap:         16px;
  --cp-font:        var(--ps-font-body, inherit);
  --cp-font-display:var(--ps-font-display, var(--ps-font-body, inherit));
  --cp-shadow:      0 6px 22px rgba(31, 41, 95, 0.08);
  --cp-shadow-hover:0 10px 30px rgba(99, 102, 241, 0.22);
  --cp-shadow-sel:  0 4px 14px rgba(99, 102, 241, 0.28);

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--cp-gap);
  align-items: start;
  font-family: var(--cp-font);
  color: var(--cp-text);
}
/* Strukturelle Blöcke im Root spannen immer die volle Breite. */
.cp-options > .cp-tabs,
.cp-options > .cp-notab-row { grid-column: 1 / -1; }

/* ---------- Feld-Wrapper ---------- */
.cp-field {
  /* Layout: Spalten-Span im 12er-Grid (Default volle Breite). */
  grid-column: span var(--cp-span, 12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Auf Mobil: eigene Mobil-Breite (Standard volle Breite). */
@media (max-width: 600px) {
  .cp-field { grid-column: span var(--cp-span-m, 12); }
}
.cp-field--hidden {
  display: none;
}
.cp-field__label {
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cp-field__help {
  font-size: 12px;
  color: var(--cp-muted);
  line-height: 1.4;
}
.cp-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cp-error);
  min-height: 0;
  line-height: 1.4;
}
.cp-field__error::before {
  content: '!';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cp-error);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.cp-field__error:empty {
  display: none;
}

/* ---------- Text / Number / Email / Tel ---------- */
.cp-input,
.cp-select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--cp-text);
  background: var(--cp-bg);
  border: 1.5px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cp-input:focus,
.cp-select:focus {
  outline: none;
  border-color: var(--cp-border-focus);
  box-shadow: 0 0 0 4px var(--cp-accent-soft);
}
.cp-input--textarea {
  resize: vertical;
  min-height: 80px;
}

/* Counter unter Textareas */
.cp-textarea-wrap {
  position: relative;
}
.cp-counter {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: var(--cp-muted);
  pointer-events: none;
}

/* ---------- Choice-Groups (Radio / Checkbox) ---------- */
.cp-choice-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-choice-group--visual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cp-card-min, 94px), 1fr));
  gap: 10px;
}

.cp-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid var(--cp-border);
  border-radius: var(--cp-radius);
  cursor: pointer;
  background: var(--cp-bg);
  transition: border-color .18s ease, background .18s ease,
              box-shadow .18s ease, transform .18s ease;
  user-select: none;
}
.cp-choice:hover {
  border-color: #c7d2fe;
  box-shadow: var(--cp-shadow);
  transform: translateY(-1px);
}
.cp-choice input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--cp-accent);
}
/* Ausgewählter Zustand (über :has, modern unterstützt) */
.cp-choice:has(input:checked) {
  border-color: var(--cp-accent);
  background: var(--cp-bg-soft);
  box-shadow: var(--cp-shadow-sel);
}
.cp-choice__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
}

/* ----- Visuell (Bild / Farbe) Cards ----- */
.cp-choice--visual {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 8px 9px;
  gap: 8px;
}
/* Kein Radio-/Checkbox-Punkt bei Bild-/Farb-Cards – nur die Umrandung
   signalisiert die Auswahl. Input bleibt klick-/tastaturerreichbar. */
.cp-choice--visual input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
/* In Bild-/Farb-Cards: Text kleiner, damit das Bild dominiert (Größe einstellbar) */
.cp-choice--visual .cp-choice__text {
  font-size: var(--cp-opt-font, 12px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--cp-muted);
}
.cp-choice--visual:has(input:checked) .cp-choice__text {
  color: var(--cp-text);
}
.cp-choice--visual:has(input:checked) {
  border-color: var(--cp-accent);
  border-width: 2px;
  background: var(--cp-bg-soft);
  box-shadow: var(--cp-shadow-sel);
}
/* Fallback ohne :has() – wir setzen .cp-choice--active per JS-Klasse ohne :has? */
/* :has() ist seit Mitte 2023 in allen Evergreens; Fallback per .checked-Klasse */

/* ----- Größenauswahl: kompakte Buttons (S / M / L / XL …) ----- */
.cp-choice-group--size {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-size-gap, 8px);
}
.cp-choice-group--size .cp-choice {
  flex: 0 0 auto;
  min-width: var(--cp-size-min, 48px);
  min-height: var(--cp-size-min, 48px);
  padding: 8px 14px;
  justify-content: center;
  text-align: center;
  border-radius: var(--cp-radius-sm, 10px);
}
/* Radio/Checkbox-Punkt ausblenden – nur der Button signalisiert die Auswahl */
.cp-choice-group--size .cp-choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.cp-choice-group--size .cp-choice__text {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--cp-opt-font, 15px);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.cp-choice-group--size .cp-choice:has(input:checked) {
  border-color: var(--cp-accent);
  border-width: 2px;
  background: var(--cp-bg-soft);
  box-shadow: var(--cp-shadow-sel);
}

/* CLS-Reserve: Mindesthöhe für den Mount, bis die Engine fertig gerendert hat.
   .cp-options wird beim erfolgreichen Render gesetzt -> Reserve fällt weg. */
.cp-options-mount:not(.cp-options) { min-height: 480px; display: block; }
@media (max-width: 600px) { .cp-options-mount:not(.cp-options) { min-height: 620px; } }

/* Geräte-Sichtbarkeit: Felder/Info-Blöcke je Gerät ausblenden */
@media (min-width: 601px) { .cp-field.cp-only-mobile { display: none !important; } }
@media (max-width: 600px) { .cp-field.cp-only-desktop { display: none !important; } }

/* Desktop-Seitenspalte: Feld als Spalte links/rechts über mehrere Zeilen.
   Die folgenden Felder im Grid stapeln sich automatisch daneben. */
@media (min-width: 601px) {
  .cp-field[data-col-side] { grid-row: span var(--cp-col-rows, 2); align-self: start; }
  .cp-field[data-col-side="left"]  { grid-column: 1 / span var(--cp-col-span, 6); }
  .cp-field[data-col-side="right"] { grid-column: span var(--cp-col-span, 6) / -1; }
  /* Begleiter-Felder daneben (Restbreite) */
  .cp-field[data-col-companion="left"]  { grid-column: span var(--cp-comp-span, 6) / -1; }
  .cp-field[data-col-companion="right"] { grid-column: 1 / span var(--cp-comp-span, 6); }
  /* Seitenspalte vertikal mittig (Bild zentriert neben den Optionen) */
  .cp-field[data-col-side].cp-col-vcenter { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
}

/* Trennlinie in Info-Abschnitten */
.cp-field--info hr, .cp-options hr { border: 0; border-top: 1px solid var(--cp-border, #e6e8ee); margin: 16px 0; }

/* Kompakte Hinweise + einklappbares Akkordeon (für Info-Blöcke / Kleingedrucktes) */
.cp-fineprint { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--cp-muted, #6b7280); }
.cp-note { margin: 0; display: flex; gap: 7px; align-items: flex-start; }
.cp-note--warn { color: #92600a; }
.cp-acc { border: 1px solid var(--cp-border, #e6e8ee); border-radius: 9px; background: var(--cp-bg, #fff); }
.cp-acc > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 13px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--cp-text, #1d1c1c); }
.cp-acc > summary::-webkit-details-marker { display: none; }
.cp-acc > summary::after { content: '⌄'; font-size: 14px; transition: transform .2s ease; }
.cp-acc[open] > summary::after { transform: rotate(180deg); }
.cp-acc > .cp-acc__body { padding: 0 12px 11px; font-size: 12px; line-height: 1.5; color: var(--cp-muted, #6b7280); }

/* ----- Anordnung der Optionen (pro Feld einstellbar) ----- */
/* Untereinander: jede Option als volle Zeile */
.cp-field[data-opt-layout="stack"] .cp-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--cp-gap, 8px);
}
.cp-field[data-opt-layout="stack"] .cp-choice-group .cp-choice {
  width: 100%;
  flex: 0 0 auto;
  justify-content: flex-start;
}
/* Nebeneinander in EINER Zeile: gleich breite Blöcke (schrumpfen mit, auch mobil) */
.cp-field[data-opt-layout="row"] .cp-choice-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--cp-gap, 8px);
}
.cp-field[data-opt-layout="row"] .cp-choice-group .cp-choice {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Nebeneinander, aber UMBRECHEND (2+ Zeilen, wenn nötig) */
.cp-field[data-opt-layout="row-wrap"] .cp-choice-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--cp-gap, 8px);
}
.cp-field[data-opt-layout="row-wrap"] .cp-choice-group .cp-choice {
  flex: 1 1 auto;
  min-width: 64px;
  justify-content: center;
  text-align: center;
}
/* Mobil: Ein-Zeilen-Anordnung schrumpft – Padding/Mindestbreite reduzieren */
@media (max-width: 600px) {
  .cp-field[data-opt-layout="row"] .cp-choice-group .cp-choice { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .cp-field[data-opt-layout="row"] .cp-choice-group--size .cp-choice { min-width: 0; padding: 8px 5px; }
  .cp-field[data-opt-layout="row"] .cp-choice-group .cp-choice__text { font-size: 13px; }
}

.cp-swatch {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
.cp-swatch--image {
  width: var(--cp-img-w, 100%);
  max-width: var(--cp-img-maxw, 96px);
  height: var(--cp-img-h, auto);
  aspect-ratio: var(--cp-img-ar, 1 / 1);
  border-radius: var(--cp-radius-sm, 10px);
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--cp-img-pad, 0);
}
.cp-swatch--image img {
  width: 100%;
  height: 100%;
  object-fit: var(--cp-img-fit, cover);
  display: block;
}
/* Basis-Maße = MOBIL. Auf DESKTOP (ab 601px) gelten die abweichenden Desktop-Werte. */
@media (min-width: 601px) {
  .cp-swatch--image {
    width: var(--cp-img-w-m, var(--cp-img-w, 100%));
    max-width: var(--cp-img-maxw-m, var(--cp-img-maxw, 96px));
    height: var(--cp-img-h-m, var(--cp-img-h, auto));
    aspect-ratio: var(--cp-img-ar-m, var(--cp-img-ar, 1 / 1));
  }
  .cp-choice-group--visual {
    grid-template-columns: repeat(auto-fill, minmax(var(--cp-card-min-m, var(--cp-card-min, 94px)), 1fr));
  }
}
/* Sicherheit: Bilder in Info-Abschnitten nie über die Blockbreite hinaus (auch Desktop) */
.cp-field--info img { max-width: 100%; height: auto; }
/* Info-Block: Breite + Schriftgröße einstellbar (Desktop) */
.cp-field--info { max-width: var(--cp-info-maxw, 100%); margin-inline: auto; font-size: var(--cp-info-font, inherit); }
@media (min-width: 601px) {
  .cp-field--info {
    max-width: var(--cp-info-maxw-m, var(--cp-info-maxw, 100%));
    font-size: var(--cp-info-font-m, var(--cp-info-font, inherit));
  }
}
/* Bild-Dropdown (select-image): Vorschau-Thumbs ebenfalls einstellbar */
.cp-imgsel__item img.cp-imgsel__thumb { width: var(--cp-img-thumb-w, 40px); height: var(--cp-img-thumb-h, 40px); object-fit: var(--cp-img-fit, cover); }

/* ---------- Checkbox-Row (Einzel-Bestätigung) ---------- */
.cp-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.cp-checkbox-row input {
  margin-top: 3px;
  accent-color: var(--cp-accent);
}
.cp-checkbox-row__label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cp-text);
}

/* ---------- File Upload ---------- */
.cp-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cp-file-input {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0);
}
.cp-file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--cp-accent-grad, linear-gradient(135deg,#667eea 0%,#764ba2 100%));
  color: #fff;
  border: 0;
  border-radius: var(--cp-pill, 100px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cp-font-display);
  box-shadow: var(--cp-shadow-sel, 0 4px 14px rgba(99,102,241,.22));
  transition: transform .18s ease, box-shadow .18s ease;
}
.cp-file-trigger:hover {
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-hover, 0 10px 30px rgba(99,102,241,.16));
}
.cp-file-meta {
  font-size: 13px;
  color: var(--cp-muted);
}

/* ---------- Fehlerzustand ---------- */
.cp-field--invalid .cp-input,
.cp-field--invalid .cp-select,
.cp-field--invalid .cp-choice {
  border-color: var(--cp-error);
}

/* ---------- Cart-Seite ---------- */
.cp-cart-options {
  margin-top: 6px;
  font-size: 12px;
  color: var(--cp-muted);
  list-style: none;
  padding: 0;
}
.cp-cart-options li {
  display: block;
  line-height: 1.4;
}
.cp-cart-options .cp-cart-key {
  font-weight: 600;
  color: var(--cp-text);
}

/* ---------- Bundle-Gruppierung im Warenkorb ---------- */
/* Aufpreis-Items komplett unsichtbar – sie bleiben im Cart/Checkout,
   aber der Kunde sieht sie nur dort. */
.cp-cart-item--addon {
  display: none !important;
}

/* Bundle-Eltern: kleiner Block mit Aufpreis-Liste unter den Item-Infos */
.cp-bundle-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border-top: 1px dashed rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.025);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
}
.cp-bundle-summary__head {
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
}
.cp-bundle-summary__list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.cp-bundle-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.cp-bundle-summary__label {
  flex: 1;
}
.cp-bundle-summary__label em {
  font-style: normal;
  color: #333;
  font-weight: 500;
}
.cp-bundle-summary__price {
  white-space: nowrap;
  color: #333;
  font-variant-numeric: tabular-nums;
}
.cp-bundle-summary__total {
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: right;
  color: #222;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .cp-choice-group--visual {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .cp-input,
  .cp-select {
    font-size: 16px; /* iOS Zoom-Schutz */
  }
}

/* ---------- Eigener Warenkorb-Button ---------- */
.cp-atc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 14px 0 0;
  padding: 16px 22px;
  border: none; border-radius: var(--cp-pill, 100px);
  background: var(--cp-accent-grad, linear-gradient(135deg,#667eea 0%,#764ba2 100%)); color: #fff;
  font-family: var(--cp-font-display); font-weight: 700; font-size: 16px; line-height: 1.2;
  letter-spacing: .2px; cursor: pointer;
  box-shadow: var(--cp-shadow, 0 6px 22px rgba(31,41,95,.12));
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.cp-atc-btn:hover { transform: translateY(-1px); box-shadow: var(--cp-shadow-hover, 0 10px 30px rgba(99,102,241,.22)); }
.cp-atc-btn:active { transform: translateY(0); }
.cp-atc-btn[hidden] { display: none; }
.cp-atc-btn--loading { opacity: .7; cursor: progress; pointer-events: none; }
.cp-atc-btn__spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: cp-atc-spin .7s linear infinite;
}
.cp-atc-btn__spinner[hidden] { display: none; }
@keyframes cp-atc-spin { to { transform: rotate(360deg); } }

/* ---------- „Nach oben"-Button (nur Mobil) ---------- */
.cp-to-top { display: none; }
@media (max-width: 600px) {
  .cp-to-top:not([hidden]) {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    grid-column: 1 / -1;
    width: max-content; max-width: 100%;
    margin: 12px auto 2px; padding: 5px 12px;
    border: 1px solid var(--cp-border, #e6e8ee); border-radius: var(--cp-pill, 100px);
    background: transparent; color: var(--cp-muted, #6b7280);
    font-family: var(--cp-font-display); font-weight: 600; font-size: 12px; line-height: 1.2; cursor: pointer;
  }
  .cp-to-top:not([hidden]):hover { color: var(--cp-text, #1d1c1c); border-color: var(--cp-accent, #6366f1); }
  .cp-to-top:active { transform: translateY(1px); }
}

/* ---------- Reduzierte Animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .cp-input, .cp-select, .cp-choice {
    transition: none;
  }
  .cp-atc-btn { transition: none; }
  .cp-atc-btn__spinner { animation-duration: 1.4s; }
}