/* ============================================================
   CTLS SHOP – PRODUKT-BUY-BOX
   ------------------------------------------------------------
   Sticky-Kaufbox auf der Produktseite (single-shop).
   Markup + Styling 1:1 nach buybox-reference.html, jedoch:
   - alle Selektoren unter .ctls-buybox gescoped (die Referenz
     nutzt generische Namen wie .price/.cta/.tag, die sonst mit
     bestehenden Theme-Styles kollidieren),
   - Referenz-Tokens (--brand etc.) auf ctls-Werte gemappt.
   Die Live-Staffellogik (Chips/Stepper/Nudge) folgt in Phase 2.
   ============================================================ */

.ctls-buybox,
.ctls-buybox-mobile,
.shop-checkout-summary {
  /* Referenz-Tokens -> Contelos / ctls */
  --bb-brand:      var(--color-primary, #004f9e);
  --bb-brand-ink:  #ffffff;
  --bb-ink:        var(--color-text, #14213d);
  --bb-muted:      #5f6b7a;
  --bb-line:       #e4e8ee;
  --bb-surface:    #ffffff;
  --bb-surface-2:  #f5f7fa;
  --bb-info-bg:    #e8f1fb;
  --bb-info-ink:   #0c447c;
  --bb-radius:     10px;
}

/* === Sticky-Spalte ===
   Die Stickiness sitzt am Grid-Wrapper, NICHT an der Box selbst.
   align-self:start verhindert, dass das Grid den Wrapper auf volle
   Spaltenhöhe streckt – sonst hätte sticky keine Scroll-Reserve.
   top = Höhe des sticky Headers (.global-header-mainbar = 70px) + 24px. */
.shop-sidebar-wrap {
  position: sticky;
  top: 94px;
  align-self: start;
}
@media (max-width: 900px) {
  .shop-sidebar-wrap {
    position: static;
    top: auto;
  }
}

/* === Zwei-Spalten-Layout (Intro + Buy-Box) ===
   Nur dieser Bereich ist zweispaltig; alle weiteren Produkt-
   Segmente rendern darunter in voller Breite (außerhalb des Grids). */
.shop-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3em;
  align-items: start;
}
.shop-intro > :first-child {
  margin-top: 0;
}
@media (max-width: 900px) {
  .shop-product-grid {
    grid-template-columns: 1fr;
    gap: 2em;
  }
}

/* === Checkout: Bestellbox als Karte (Look der Buy-Box) === */
.shop-checkout-summary {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  padding: 20px;
  font-family: var(--font-body);
  color: var(--bb-ink);
  line-height: 1.5;
}
.shop-checkout-summary-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bb-muted);
  margin: 0 0 12px;
}
.shop-checkout-summary h3 {
  color: var(--bb-ink);
}

/* === Box === */
.ctls-buybox {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  padding: 20px;
  font-family: var(--font-body);
  color: var(--bb-ink);
  line-height: 1.5;
}

/* === Preisblock === */
.ctls-buybox .bb-price {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}
.ctls-buybox .bb-price small {
  font-size: 14px;
  font-weight: 400;
  color: var(--bb-muted);
  margin-left: 6px;
}
.ctls-buybox .bb-total {
  font-size: 13px;
  color: var(--bb-muted);
  margin: 2px 0 4px;
}
.ctls-buybox .bb-tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  color: var(--bb-muted);
}

/* === Mengenwahl === */
.ctls-buybox .bb-label {
  font-size: 13px;
  color: var(--bb-muted);
  margin: 14px 0 6px;
}
.ctls-buybox .bb-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ctls-buybox .bb-chip {
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  background: var(--bb-surface);
  color: var(--bb-muted);
  cursor: pointer;
  font-family: inherit;
}
.ctls-buybox .bb-chip.on {
  border-color: var(--bb-brand);
  color: var(--bb-info-ink);
  background: var(--bb-info-bg);
}
.ctls-buybox .bb-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  overflow: hidden;
}
.ctls-buybox .bb-step button {
  border: 0;
  background: var(--bb-surface);
  padding: 7px 14px;
  font-size: 17px;
  cursor: pointer;
  color: var(--bb-ink);
  font-family: inherit;
  line-height: 1;
}
.ctls-buybox .bb-step span {
  padding: 7px 16px;
  min-width: 44px;
  text-align: center;
  font-weight: 600;
  border-left: 1px solid var(--bb-line);
  border-right: 1px solid var(--bb-line);
}

/* === Next-Tier-Nudge === */
.ctls-buybox .bb-nudge {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  background: var(--bb-info-bg);
  color: var(--bb-info-ink);
  padding: 8px 10px;
  border-radius: 8px;
  margin: 12px 0;
}

/* === Staffelliste === */
.ctls-buybox .bb-tiers {
  margin: 12px 0 18px;
}
.ctls-buybox .bb-tier {
  display: flex;
  justify-content: space-between;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
.ctls-buybox .bb-tier .bb-tier-range {
  color: var(--bb-muted);
}
.ctls-buybox .bb-tier.on {
  background: var(--bb-info-bg);
  border-color: var(--bb-brand);
}
.ctls-buybox .bb-tier.on,
.ctls-buybox .bb-tier.on .bb-tier-range {
  color: var(--bb-info-ink);
}

/* === CTAs === */
.ctls-buybox .bb-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--bb-brand);
  font-family: inherit;
  line-height: 1.2;
}
.ctls-buybox .bb-cta.primary {
  background: var(--bb-brand);
  color: var(--bb-brand-ink);
}
.ctls-buybox .bb-cta.secondary {
  background: transparent;
  color: var(--bb-ink);
  border-color: var(--bb-line);
  margin-top: 8px;
}
.ctls-buybox .bb-cta svg {
  vertical-align: -3px;
  margin-right: 6px;
}
.ctls-buybox .bb-link-cta {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: var(--bb-info-ink);
  text-decoration: none;
  cursor: pointer;
}
.ctls-buybox .bb-hint {
  text-align: center;
  font-size: 12px;
  color: var(--bb-muted);
  margin-top: 8px;
}

/* .bb-cta hat display:block → [hidden] muss explizit greifen. */
.ctls-buybox .bb-cta[hidden] { display: none; }

/* "Angebot anfragen" wird primär, wenn Kaufen/Testen entfallen (Auf Anfrage). */
.ctls-buybox .bb-link-cta.is-primary {
  background: var(--bb-brand);
  color: var(--bb-brand-ink);
  border: 1px solid var(--bb-brand);
  border-radius: 9px;
  padding: 12px;
  font-weight: 600;
  font-size: 15px;
  margin-top: 0;
}

/* === Unternehmenslizenz (Staffel, separater Posten) === */
.ctls-buybox .bb-company {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--bb-ink);
  padding: 9px 11px;
  margin: 0 0 14px;
  border: 1px dashed var(--bb-line);
  border-radius: 8px;
}

/* === Add-ons (je eigener Stepper, eigene Menge) === */
.ctls-buybox .bb-addons {
  margin: 4px 0 16px;
  border-top: 1px solid var(--bb-line);
  padding-top: 12px;
}
.ctls-buybox .bb-addon {
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ctls-buybox .bb-addon.is-active {
  border-color: var(--bb-brand);
  background: var(--bb-info-bg);
}
.ctls-buybox .bb-addon-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.ctls-buybox .bb-addon-name {
  font-weight: 600;
  font-size: 14px;
}
.ctls-buybox .bb-addon-price {
  font-size: 13px;
  white-space: nowrap;
  color: var(--bb-ink);
}
.ctls-buybox .bb-addon-price small {
  color: var(--bb-muted);
  margin-left: 3px;
}
.ctls-buybox .bb-addon-desc {
  font-size: 12px;
  color: var(--bb-muted);
  margin: 6px 0 0;
  line-height: 1.45;
}
.ctls-buybox .bb-addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.ctls-buybox .bb-addon-step button {
  padding: 5px 12px;
  font-size: 16px;
}
.ctls-buybox .bb-addon-step span {
  padding: 5px 14px;
  min-width: 38px;
}
.ctls-buybox .bb-addon-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-info-ink);
}

/* === Fallback, wenn keine Preisdaten vorliegen === */
.shop-sidebar-empty {
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, #e4e8ee);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.shop-sidebar-empty p {
  color: #5f6b7a;
  margin: 0 0 14px;
}

/* === Info-Box (Download/Key-Ablauf) === */
.ctls-buybox .bb-infobox {
  display: flex;
  gap: 9px;
  font-size: 12px;
  color: var(--bb-muted);
  background: var(--bb-surface-2);
  padding: 11px 12px;
  border-radius: 8px;
  margin-top: 14px;
  line-height: 1.55;
}
.ctls-buybox .bb-infobox svg {
  flex: none;
  margin-top: 1px;
}
.ctls-buybox .bb-trust {
  font-size: 12px;
  color: var(--bb-muted);
  margin-top: 10px;
}
.ctls-buybox .bb-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--bb-muted);
  margin-top: 6px;
}

/* Basis-Position als Kasten (gleiche Optik wie Add-ons); Stückzahl tippbar */
.ctls-buybox .bb-step input {
  width: 56px;
  padding: 7px 4px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  border: 0;
  border-left: 1px solid var(--bb-line);
  border-right: 1px solid var(--bb-line);
  background: var(--bb-surface, #fff);
  appearance: textfield;
  -moz-appearance: textfield;
}
.ctls-buybox .bb-step input::-webkit-outer-spin-button,
.ctls-buybox .bb-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Staffel = Paketpreise: die Stufenliste IST die Auswahl */
.ctls-buybox .bb-tiers-select .bb-tier { cursor: pointer; }
.ctls-buybox .bb-tiers-select .bb-tier:hover { border-color: var(--bb-muted, #9b9fa6); }
.ctls-buybox .bb-tiers-select .bb-tier:focus-visible { outline: 2px solid #1e2a35; outline-offset: 1px; }

/* === Sticky-Kaufleiste ===
   Schlanke Leiste mit Produktname, Preis und CTAs. Erscheint per JS
   (.is-visible), sobald die Buy-Box den Viewport verlässt (Intersection-
   Observer). Mobil unten fixiert, Desktop oben (unter dem 70px-Header).
   Inhalt auf Container-Breite zentriert. */
.ctls-buybox-mobile {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;                       /* mobil: unten */
  background: var(--bb-surface);
  border-top: 1px solid var(--bb-line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 9px 0;
  align-items: center;
  z-index: 120;
  font-family: var(--font-body);
  transform: translateY(110%);     /* mobil: nach unten ausgeblendet */
  transition: transform 0.25s ease;
  will-change: transform;
}
.ctls-buybox-mobile.is-visible {
  transform: translateY(0);
}

/* Desktop: oben fixiert, exakt unter dem sticky Header. Die Header-Höhe wird
   per JS gemessen und als --ctls-bar-top gesetzt (Fallback 71px), damit die
   Leiste NIE mit .global-header-mainbar kollidiert – egal wie hoch der Header
   real ist (Logo/Zoom/Plugin/Admin-Bar). z-index UNTER dem Header (z200),
   damit die Leiste sauber hinter dem Header hervorgleitet. */
@media (min-width: 901px) {
  .ctls-buybox-mobile {
    top: var(--ctls-bar-top, 71px);
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--bb-line);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(calc(-100% - 90px)); /* nach oben ausgeblendet */
  }
  .ctls-buybox-mobile.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctls-buybox-mobile { transition: none; }
}

.ctls-buybox-mobile .bb-m-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--global-gutter, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}

/* Linke Seite: Produktname + Preiszeile (gestapelt) */
.ctls-buybox-mobile .bb-m-info {
  display: flex;
  flex-direction: column;
  min-width: 0;                    /* erlaubt Ellipsis */
  line-height: 1.25;
}
.ctls-buybox-mobile .bb-m-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--bb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctls-buybox-mobile .bb-m-price-line {
  white-space: nowrap;
}
.ctls-buybox-mobile .bb-m-price {
  font-weight: 600;
}
.ctls-buybox-mobile .bb-m-unit {
  font-size: 11px;
  color: var(--bb-muted);
  margin-left: 4px;
}
/* Kompakter Stepper in der Leiste – gebunden an denselben qty-State
   wie die Haupt-Box, Staffelpreis rechnet live mit. */
.ctls-buybox-mobile .bb-m-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bb-line);
  border-radius: 8px;
  overflow: hidden;
  flex: none;
}
.ctls-buybox-mobile .bb-m-qty button {
  border: 0;
  background: var(--bb-surface);
  padding: 6px 11px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--bb-ink);
  font-family: inherit;
}
.ctls-buybox-mobile .bb-m-qty span {
  padding: 6px 10px;
  min-width: 34px;
  text-align: center;
  font-weight: 600;
  border-left: 1px solid var(--bb-line);
  border-right: 1px solid var(--bb-line);
}
.ctls-buybox-mobile .bb-m-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: none;
}
.ctls-buybox-mobile .bb-m-trial {
  font-size: 13px;
  color: var(--bb-info-ink);
  text-decoration: none;
  white-space: nowrap;
}
.ctls-buybox-mobile .bb-cta {
  display: inline-block;
  width: auto;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--bb-brand);
  background: var(--bb-brand);
  color: var(--bb-brand-ink);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* Schmale Screens: sekundären "Testen"-Link weglassen, Button kompakter,
   damit "Jetzt kaufen" nie abgeschnitten wird. */
@media (max-width: 600px) {
  .ctls-buybox-mobile .bb-m-trial { display: none; }
  .ctls-buybox-mobile .bb-m-inner { gap: 12px; }
  .ctls-buybox-mobile .bb-cta { padding: 9px 14px; }
}