/* cp-builder — v1 test styling (neutral; final design comes later, user leads) */
cp-builder { display: block; font-family: Poppins, Arial, sans-serif; color: #333; }

.cpb {
  display: grid;
  grid-template-columns: minmax(320px, 640px) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .cpb { grid-template-columns: 1fr; }
}

/* ---- stage (preview) ---- */
.cpb-stage-wrap { position: sticky; top: 12px; }
/* M1 fix: in the single-column mobile layout the sticky preview would keep
   floating over the options below it (worse in landscape) -> let it scroll away.
   Must come AFTER the base rule above to win at equal specificity. */
@media (max-width: 860px) {
  .cpb-stage-wrap { position: static; top: auto; }
}
.cpb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  overflow: hidden;
}
.cpb-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
img.cpb-layer { object-fit: contain; }
.cpb-layer-mask {
  /* tinted motif: PNG as mask, metal gradient as fill */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.cpb-layer-logo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cpb-layer-logo img { width: 100%; height: 100%; object-fit: contain; }
.cpb-layer-text {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre;          /* lines only where the customer pressed Enter (fitText) */
  overflow: visible;
  color: #1a1a1a;
  pointer-events: none;
  line-height: 1.1;
}

.cpb-price { margin-top: 10px; font-size: 20px; font-weight: 700; color: #0060b1; }
.cpb-price small { font-weight: 400; color: #666; font-size: 13px; }

/* ---- panel ---- */
.cpb-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: #0060b1;
  line-height: 1.2;
}

/* availability / tax / SKU block below the headline (mirrors the live shop) */
.cpb-status-unit { margin: 0 0 20px; max-width: 450px; }
.cpb-main-info {
  display: flex; align-items: center; gap: 15px;
  padding-bottom: 4px; border-bottom: 1px solid #eee;
}
.cpb-avail {
  display: flex; align-items: center;
  color: #28a745; font-weight: 700; font-size: 14px;
}
.cpb-dot {
  width: 6px; height: 6px; background: #28a745; border-radius: 50%;
  margin-right: 8px; position: relative; flex: 0 0 auto;
}
.cpb-dot::after {
  content: ''; position: absolute; width: 100%; height: 100%;
  background: #28a745; border-radius: 50%;
  animation: cpb-ping 2s infinite;
}
@keyframes cpb-ping {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(3); opacity: 0; }
}
.cpb-delivery {
  display: flex; align-items: center; gap: 6px;
  color: #222; font-size: 13.5px;
}
.cpb-delivery i { color: #666; font-size: 15px; }
.cpb-tax-line { padding-top: 4px; font-size: 11.5px; color: #666; line-height: 1.2; }
.cpb-tax-line a { color: #0060b1; text-decoration: none; font-weight: 600; }
.cpb-tax-line a:hover { text-decoration: underline; }
.cpb-sku-line { margin: 6px 0 0; font-size: 12px; color: #666; }
@media (max-width: 480px) {
  .cpb-main-info { flex-direction: column; align-items: flex-start; gap: 4px; }
}
/* option sections grouped as subtle cards for clearer visual hierarchy */
.cpb-panel section {
  margin-bottom: 14px; padding: 16px;
  background: #fff; border: 1px solid #e9edf1; border-radius: 12px;
}
.cpb-panel section.cpb-hidden { display: none; }

/* ===== SAMPLE "Premium & ruhig" — scoped to the band section for sign-off ===== */
/* ===== unified builder look: compact premium cards, clear hierarchy ===== */
.cpb-panel section {
  margin-bottom: 12px; padding: 15px 16px 17px;
  background: #fff; border: 1px solid #e7ebf1; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(18,42,66,.04), 0 8px 20px -14px rgba(18,42,66,.12);
  animation: cpb-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
/* staggered reveal on load (one orchestrated page-load motion) */
.cpb-panel section:nth-of-type(1) { animation-delay: .03s; }
.cpb-panel section:nth-of-type(2) { animation-delay: .08s; }
.cpb-panel section:nth-of-type(3) { animation-delay: .13s; }
.cpb-panel section:nth-of-type(4) { animation-delay: .18s; }
.cpb-panel section:nth-of-type(5) { animation-delay: .23s; }
.cpb-panel section:nth-of-type(6) { animation-delay: .28s; }
.cpb-panel section:nth-of-type(7) { animation-delay: .33s; }
.cpb-panel section:nth-of-type(8) { animation-delay: .38s; }
@keyframes cpb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cpb-panel section { animation: none !important; }
}
.cpb-panel section.cpb-hidden { display: none; }

/* eyebrow-style title with a fine gold hairline accent */
.cpb-cat-title {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #0060b1; margin: 0 0 12px;
}
.cpb-cat-title::after {
  content: ''; display: block; width: 28px; height: 2px; margin: 8px 0 0;
  background: linear-gradient(90deg, #f0ad4e, #f7c877); border-radius: 2px;
}
.cpb-cat-title .cpb-req { color: #cc2a20; }
/* spec line under the category title (e.g. "Bandbreite: 22 mm") */
.cpb-cat-note { margin: -4px 0 12px; font-size: 12.5px; color: #8a94a0; letter-spacing: .01em; }
.cpb-hidden { display: none !important; }

.cpb-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cpb-group-title {
  width: 100%;
  font-size: 13px; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: .4px;
  margin: 8px 0 2px; padding-bottom: 2px;
  border-bottom: 1px solid #e1e1e1;
}
.cpb-grid .cpb-group-title:first-child { margin-top: 0; }
/* group tabs (ribbons: Einfarbig | Zweifarbig | Mehrfarbig) — !important against Porto button styles */
.cpb-tabs { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.cpb-tab,
.cpb-tab:active, .cpb-tab:focus {
  padding: 8px 16px !important;
  border: 1px solid #e2e7ec !important; border-radius: 999px !important;
  background: #fff !important; color: #5a6472 !important;
  font: inherit !important; font-size: 12.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important;
  line-height: 1.2 !important; height: auto !important;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cpb-tab:hover { border-color: #cdd5dd !important; color: #0060b1 !important; }
.cpb-tab.active {
  border-color: #0060b1 !important; background: #0060b1 !important; color: #fff !important;
  box-shadow: 0 5px 14px -4px rgba(0,96,177,.45) !important;
}
/* round color swatches (options with icon, e.g. ribbons) */
.cpb-opt.cpb-opt--icon {
  width: 46px; height: 46px; padding: 0;
  border: 2px solid #d7dbe0; border-radius: 50%;
  overflow: hidden; flex-direction: row;
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cpb-opt.cpb-opt--icon img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.cpb-opt.cpb-opt--icon .cpb-swatch {
  width: 100%; height: 100%; border-radius: 50%;
}
.cpb-opt.cpb-opt--icon:hover {
  border-color: #9bbfe0; transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px #fff, 0 7px 16px -5px rgba(18,42,66,.30);
}
.cpb-opt.cpb-opt--icon.sel {
  border-color: #0060b1;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(0,96,177,.18), 0 5px 14px -4px rgba(0,96,177,.42);
}
/* "ohne …" opt-out swatch: empty circle with a red no-entry slash */
.cpb-swatch--none {
  background:
    linear-gradient(135deg, transparent calc(50% - 1.5px), #cc2a20 calc(50% - 1.5px),
      #cc2a20 calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    #fff !important;
  border-radius: 50%;
}
.cpb-sel-card .cpb-swatch--none.cpb-sel-card-icon {
  width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px;
  box-sizing: border-box; border: 2px solid #d7dbe0;
}
.cpb-opt {
  border: 1px solid #e4e8ee; border-radius: 10px; background: #fff;
  padding: 5px; cursor: pointer; width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cpb-opt img { width: 62px; height: 62px; object-fit: contain; display: block; }
.cpb-opt span { font-size: 10px; text-align: center; line-height: 1.2; overflow: hidden; max-height: 24px; }
.cpb-opt:hover { border-color: #b7c6d6; transform: translateY(-2px); box-shadow: 0 7px 16px -6px rgba(18,42,66,.28); }
.cpb-opt.sel { border-color: #0060b1; box-shadow: 0 0 0 2px rgba(0,96,177,.16), 0 5px 14px -5px rgba(0,96,177,.35); }

/* motif tiles: larger, emblem fills the tile
 * min-width + flex:0 0 auto: Porto squeezes flex imgs below their width */
[data-grid="motif"] .cpb-opt { width: 104px; }
[data-grid="motif"] .cpb-opt img {
  width: 88px; height: 88px;
  min-width: 88px; min-height: 88px; flex: 0 0 auto;
  object-fit: contain;
}
[data-grid="motif"] .cpb-opt span { font-size: 11px; max-height: 28px; }

/* collapsed selection card (collapseOnSelect, e.g. ribbon) */
.cpb-sel-card {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid #0060b1; border-radius: 8px; background: #fff;
  padding: 10px 16px; max-width: 320px;
  box-shadow: 0 0 0 2px rgba(0,96,177,.10);
  overflow: hidden;
}
.cpb-sel-card img {
  width: 56px; height: 56px;
  min-width: 56px; max-width: 56px; min-height: 56px; max-height: 56px;
  flex: 0 0 56px; box-sizing: border-box;
  object-fit: contain; display: block;
}
.cpb-sel-card img.cpb-sel-card-icon {
  width: 44px; height: 44px;
  min-width: 44px; max-width: 44px; min-height: 44px; max-height: 44px;
  flex: 0 0 44px;
  box-sizing: border-box; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 50%; border: 2px solid #d7dbe0;
}
.cpb-sel-card-info { display: flex; flex-direction: column; gap: 4px; }
.cpb-sel-card-info strong { font-size: 14px; line-height: 1.25; }
.cpb-sel-card-actions { display: flex; gap: 12px; }
.cpb-link,
.cpb-link:active, .cpb-link:focus {
  /* !important: Porto forces borders/padding/uppercase onto plain buttons */
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; height: auto !important;
  line-height: 1.4 !important; text-transform: none !important;
  color: #0060b1 !important; font-size: 13px !important;
  text-decoration: underline !important; font-family: inherit !important;
  font-weight: 400 !important; letter-spacing: normal !important;
  cursor: pointer;
}
.cpb-link:hover { color: #004f92 !important; background: none !important; }

/* font picker: each tile shows the font name in its own typeface */
.cpb-font-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px; max-width: 420px;
}
.cpb-font-opt,
.cpb-font-opt:active, .cpb-font-opt:focus {
  padding: 11px 13px !important;
  border: 1px solid #e2e7ec !important; border-radius: 10px !important;
  background: #fff !important; color: #333 !important;
  font-size: 17px !important; line-height: 1.25 !important;
  text-transform: none !important; letter-spacing: normal !important;
  height: auto !important; box-shadow: none !important; font-weight: 400 !important;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cpb-font-opt:hover { border-color: #b7c6d6 !important; transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(18,42,66,.26) !important; }
/* collapsed font selection: single card spans the grid */
.cpb-font-grid--card { display: block; }
.cpb-sel-card-font {
  font-size: 22px; line-height: 1.2; color: #333;
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpb-font-opt.sel {
  border-color: #0060b1 !important; color: #0060b1 !important;
  background: #eef5fb !important;
  box-shadow: 0 0 0 2px rgba(0,96,177,.12) !important;
}

.cpb-select, .cpb-textarea, .cpb-file {
  width: 100%; max-width: 420px; padding: 11px 12px;
  border: 1px solid #d7dde3; border-radius: 10px; font: inherit; font-size: 14px;
  background: #fff; box-sizing: border-box;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cpb-select:hover, .cpb-textarea:hover { border-color: #b7c6d6; }
.cpb-select:focus, .cpb-textarea:focus {
  outline: none; border-color: #0060b1;
  box-shadow: 0 0 0 3px rgba(0,96,177,.14);
}
.cpb-textarea {
  min-height: 84px; resize: vertical; box-sizing: border-box;
  /* mirror the engraving preview: text centered, padding keeps it visually middle */
  text-align: center; padding-top: 22px; padding-bottom: 22px;
}
.cpb-counter { font-size: 12px; color: #666; margin-top: 2px; }
.cpb-cart-msg { margin-top: 10px; font-size: 14px; min-height: 0; }
.cpb-cart-msg--error {
  color: #cc2a20; background: #fdf0ef; border: 1px solid #f0c4c0;
  border-radius: 6px; padding: 10px 14px;
}
.cpb-cart-msg--ok {
  display: flex; align-items: center; gap: 8px;
  color: #1e7e34; background: #eef8f0; border: 1px solid #bfe3c8;
  border-radius: 6px; padding: 11px 14px; font-weight: 600;
}
.cpb-cart-msg--ok a { color: #0060b1; font-weight: 700; margin-left: auto; white-space: nowrap; }
.cpb-cart-ok-ic {
  flex: 0 0 20px; width: 20px; height: 20px; min-width: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1e7e34; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700;
}
/* fade in/out for the auto-hiding toast */
.cpb-cart-msg--ok {
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.cpb-cart-msg--ok.cpb-cart-msg--show { opacity: 1; transform: none; }

.cpb-radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cpb-radio-row label { display: flex; gap: 6px; align-items: center; cursor: pointer; font-size: 14px; }

/* segmented toggle (e.g. engraving yes/no), Shopify-configurator style */
.cpb-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; max-width: 420px; }
.cpb-toggle-btn,
.cpb-toggle-btn:active, .cpb-toggle-btn:focus {
  flex: 1 1 0; min-width: 140px;
  padding: 12px 14px !important;
  border: 1px solid #e2e7ec !important; border-radius: 10px !important;
  background: #fff !important; color: #5a6472 !important;
  font: inherit !important; font-size: 14px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important;
  line-height: 1.2 !important; height: auto !important; box-shadow: none !important;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cpb-toggle-btn:hover { border-color: #cdd5dd !important; color: #0060b1 !important; }
.cpb-toggle-btn.active {
  border-color: #0060b1 !important; color: #0060b1 !important;
  background: #eef5fb !important;
  box-shadow: 0 0 0 2px rgba(0,96,177,.12) !important;
}

.cpb-hint { font-size: 12px; color: #666; margin-top: 6px; }
/* styled logo upload button (native input visually hidden, label acts as button) */
.cpb-file--hidden {
  position: absolute !important; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.cpb-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 2px dashed #c2c8d0; border-radius: 10px;
  background: #f7f9fb; color: #0060b1; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.cpb-upload-btn:hover { border-color: #0060b1; background: #eef5fb; }
.cpb-file--hidden:focus-visible + .cpb-upload-btn { outline: 3px solid #9bc4e8; outline-offset: 2px; }
.cpb-upload-btn svg { width: 18px; height: 18px; }
.cpb-upload-sub { font-size: 12px; color: #777; margin-top: 6px; }
.cpb-upload-err {
  margin-top: 8px; font-size: 13px; color: #cc2a20;
  background: #fdf0ef; border: 1px solid #f0c4c0; border-radius: 6px; padding: 8px 12px;
}
.cpb-upload-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cpb-upload-preview img { width: 56px; height: 56px; object-fit: contain; border: 1px solid #e1e1e1; border-radius: 6px; background: #fff; }
.cpb-remove { background: none; border: none; color: #cc2a20; cursor: pointer; font-size: 13px; text-decoration: underline; }

/* logo transform bar (move / zoom / rotate / reset) */
.cpb-tf-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 10px;
  background: #f4f7fa; border: 1px solid #d7dbe0; border-radius: 8px;
  max-width: 420px;
}
.cpb-tf-label { font-size: 13px; font-weight: 700; color: #333; margin-right: 2px; }
.cpb-tf-btn {
  width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px;
  border: 1px solid #c2c8d0; border-radius: 6px; background: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; color: #333;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cpb-tf-btn:hover { border-color: #0060b1; color: #0060b1; }
.cpb-tf-reset {
  background: none; border: none; color: #0060b1; cursor: pointer;
  font-size: 13px; text-decoration: underline; font-family: inherit; padding: 0 4px;
}
.cpb-tf-bar .cpb-hint { width: 100%; margin-top: 2px; }

.cpb-actions {
  margin-top: 12px; padding: 16px;
  background: #fff; border: 1px solid #e7ebf1; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(18,42,66,.04), 0 8px 20px -14px rgba(18,42,66,.12);
}

/* prominent qty stepper */
.cpb-qty-wrap { margin-bottom: 16px; }
.cpb-qty-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.cpb-qty-row { display: inline-flex; align-items: stretch; }
.cpb-qty-btn,
.cpb-qty-btn:active, .cpb-qty-btn:focus {
  /* !important: Porto forces its own button styles (incl. width/height) */
  width: 48px !important; height: 52px !important;
  min-width: 48px !important; flex: 0 0 48px !important; box-sizing: border-box !important;
  background: #f4f6f8 !important; color: #222 !important;
  border: 2px solid #c2c8d0 !important; border-radius: 0 !important;
  font-size: 22px !important; line-height: 1 !important; font-weight: 400 !important;
  padding: 0 !important; margin: 0 !important; text-transform: none !important;
  box-shadow: none !important; cursor: pointer;
}
.cpb-qty-btn:first-child { border-radius: 8px 0 0 8px !important; border-right: none !important; }
.cpb-qty-row .cpb-qty-btn:last-child { border-radius: 0 8px 8px 0 !important; border-left: none !important; }
.cpb-qty-btn:hover { background: #e8edf2 !important; }
.cpb-qty,
.cpb-qty:focus {
  width: 90px !important; height: 52px !important;
  min-width: 90px !important; max-width: 90px !important; flex: 0 0 90px !important;
  padding: 0 6px !important; margin: 0 !important; box-sizing: border-box !important;
  border: 2px solid #c2c8d0 !important; border-radius: 0 !important; font: inherit;
  font-size: 18px !important; font-weight: 700; text-align: center; color: #222;
  -moz-appearance: textfield; appearance: textfield;
}
.cpb-qty::-webkit-outer-spin-button, .cpb-qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cpb-qty:focus { outline: none; border-color: #0060b1 !important; }

/* qty stepper (left) + prominent price (right) on one row */
.cpb-buy-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cpb-buy-top .cpb-qty-wrap { margin-bottom: 0; }
.cpb-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin: 0; }
.cpb-price-amount { font-size: 34px; font-weight: 800; color: #0060b1; line-height: 1; }
.cpb-price-note { font-size: 12px; color: #666; font-weight: 400; margin-top: 4px; }
.cpb-price-note a { color: #0060b1; text-decoration: underline; }

/* full-width buy button so it no longer floats alone next to the price */
/* !important throughout: Porto forces bg/border/color/uppercase on every <button> */
.cpb-add,
.cpb-add:hover, .cpb-add:focus, .cpb-add:active {
  display: block !important; width: 100% !important; margin-top: 16px !important;
  background: #0060b1 !important; color: #fff !important; border: none !important;
  border-radius: 10px !important;
  padding: 17px 24px !important; font: inherit; font-weight: 700 !important; font-size: 17px !important;
  text-transform: none !important; letter-spacing: .3px !important; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(0,96,177,.38) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cpb-add:hover { background: #004f92 !important; transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(0,96,177,.48) !important; }
.cpb-add:active { transform: translateY(0); }
.cpb-add:focus-visible { outline: 3px solid #9bc4e8 !important; outline-offset: 2px; }
.cpb-add:disabled { opacity: .6 !important; cursor: wait; transform: none !important; }

/* trust / reassurance section under the buy button */
.cpb-trust {
  margin-top: 12px; padding: 18px 16px;
  background: #f8fafc; border: 1px solid #e7ebf1; border-radius: 14px;
}
.cpb-trust-head {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #111; margin-bottom: 12px;
}
.cpb-pay-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cpb-pay-row img {
  height: 30px !important; width: auto !important; min-width: auto !important;
  flex: 0 0 auto !important; box-sizing: border-box;
  border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; padding: 3px 6px;
  object-fit: contain;
}
.cpb-pay-badge {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid #d5dae0; border-radius: 6px; background: #fff;
  font-size: 13px; font-weight: 700; color: #333;
}
.cpb-trust-usp { margin-top: 22px; }
.cpb-usp-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px;
}
.cpb-usp-grid li { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.cpb-usp-ic {
  flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eaf2fb; color: #0060b1; border-radius: 50%;
}
.cpb-usp-ic svg { width: 18px; height: 18px; display: block; }
.cpb-usp-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cpb-usp-txt strong { font-size: 14px; font-weight: 700; color: #111; }
.cpb-usp-txt small { font-size: 12px; color: #777; }
/* ---- mobile buy area ---- */
@media (max-width: 560px) {
  .cpb-buy-top { align-items: center; gap: 12px; }
  .cpb-price-amount { font-size: 30px; }
  /* qty stepper a touch more compact so price never wraps */
  .cpb-qty-btn, .cpb-qty-btn:active, .cpb-qty-btn:focus {
    width: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; height: 48px !important;
  }
  .cpb-qty, .cpb-qty:focus {
    width: 60px !important; min-width: 60px !important; max-width: 60px !important;
    flex: 0 0 60px !important; height: 48px !important;
  }
  .cpb-add { padding: 16px 20px !important; font-size: 16px !important; }
  .cpb-usp-grid { grid-template-columns: 1fr; gap: 14px; }
  .cpb-pay-row { gap: 8px; }
}
/* ---- sticky mobile buy-bar (Welle 1.2) ---- */
/* hidden by default; only shown on mobile while the real buy area is off-screen */
.cpb-stickybar { display: none; }
@media (max-width: 860px) {
  .cpb-stickybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #e1e1e1;
    box-shadow: 0 -4px 16px rgba(0,0,0,.10);
    transform: translateY(110%);
    transition: transform .25s ease;
    pointer-events: none;
  }
  .cpb-stickybar.cpb-stickybar--show { transform: translateY(0); pointer-events: auto; }
  .cpb-mini-stage {
    position: relative; flex: 0 0 46px; width: 46px; height: 46px; min-width: 46px;
    background: #fff; border: 1px solid #e1e1e1; border-radius: 8px; overflow: hidden;
  }
  .cpb-mini-stage .cpb-layer, .cpb-mini-stage .cpb-layer-logo, .cpb-mini-stage .cpb-layer-text {
    pointer-events: none;
  }
  .cpb-sticky-info { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
  .cpb-sticky-price { font-size: 20px; font-weight: 800; color: #0060b1; }
  .cpb-sticky-sub { font-size: 11px; color: #1e7e34; font-weight: 600; }
  .cpb-sticky-add,
  .cpb-sticky-add:hover, .cpb-sticky-add:focus, .cpb-sticky-add:active {
    /* !important: Porto forces bg/border/color/uppercase on every <button> */
    flex: 0 0 auto; min-height: 48px !important;
    background: #0060b1 !important; color: #fff !important; border: none !important;
    border-radius: 8px !important; padding: 0 20px !important;
    font: inherit; font-weight: 700 !important; font-size: 15px !important;
    text-transform: none !important; letter-spacing: .2px !important; cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,96,177,.25) !important;
  }
  .cpb-sticky-add:hover { background: #004f92 !important; }
  .cpb-sticky-add:focus-visible { outline: 3px solid #9bc4e8 !important; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpb-stickybar { transition: none; }
}
/* while the buy-bar is visible, lift the theme's back-to-top arrow above it */
@media (max-width: 860px) {
  body.cpb-bar-open #totop {
    bottom: 84px !important;
    transition: bottom .25s ease;
  }
}

.cpb-payload { margin-top: 14px; }
.cpb-payload pre {
  background: #f6f8fa; border: 1px solid #e1e1e1; border-radius: 6px;
  padding: 10px; font-size: 11px; overflow: auto; max-height: 320px;
}
.cpb-snapshot { margin-top: 10px; max-width: 280px; border: 1px solid #e1e1e1; border-radius: 6px; }

/* ===== guided steps (2026-07-19): numbers, done-checks, current-step frame, accordion ===== */
/* header becomes a flex row: number/check | title | chevron — clickable to fold the card */
.cpb-cat-title {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none;
}
.cpb-cat-title:focus-visible { outline: 2px solid #0060b1; outline-offset: 3px; border-radius: 6px; }
/* the gold hairline moves from the h3 onto the title text (h3 is a flex row now) */
.cpb-cat-title::after { content: none; }
.cpb-cat-title-text::after {
  content: ''; display: block; width: 28px; height: 2px; margin: 7px 0 0;
  background: linear-gradient(90deg, #f0ad4e, #f7c877); border-radius: 2px;
}
.cpb-step-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #0060b1; color: #0060b1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0;
}
.cpb-done-badge {
  display: none; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #1e9e4a; align-items: center; justify-content: center;
}
.cpb-sec--done .cpb-done-badge { display: flex; }
.cpb-sec--done .cpb-step-num { display: none; }
.cpb-chevron { margin-left: auto; display: flex; color: #8a94a0; transition: transform .18s ease; }
.cpb-sec--closed .cpb-chevron { transform: rotate(-90deg); }
/* folded card: only the header row stays */
.cpb-panel section.cpb-sec--closed > *:not(.cpb-cat-title) { display: none; }
.cpb-sec--closed .cpb-cat-title { margin-bottom: 0; }
/* clearer frames overall + strong blue frame on the current step */
.cpb-panel section { border-color: #d5dce4; }
.cpb-panel section.cpb-sec--active {
  border-color: #0060b1;
  box-shadow: 0 0 0 1px #0060b1, 0 8px 20px -14px rgba(18,42,66,.18);
}
@media (prefers-reduced-motion: reduce) {
  .cpb-chevron { transition: none; }
}

/* ===== modern finish (2026-07-19, /frontend-design pass — CI: Blau/Gold/Poppins) ===== */
/* preview stage: soft atmospheric backdrop instead of flat white — the medal
   floats on a light radial wash with a whisper of gold falling from the top */
.cpb-stage {
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(240,173,78,.07), rgba(240,173,78,0) 42%),
    radial-gradient(140% 120% at 50% 115%, #eef3f8 0%, #ffffff 58%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(18,42,66,.05),
    0 18px 40px -28px rgba(18,42,66,.25);
}
/* price: crisp tabular digits with a deep-blue gradient sheen */
.cpb-price-amount {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #0072d1, #0060b1 55%, #00477f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #0060b1; /* fallback */
}
/* buy button: gradient depth + light sweep on hover */
.cpb-add, .cpb-add:focus {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0072d1 0%, #0060b1 55%, #00538f 100%) !important;
}
.cpb-add::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: skewX(-18deg);
}
.cpb-add:hover { background: linear-gradient(150deg, #0068c2 0%, #00549c 55%, #004479 100%) !important; }
.cpb-add:hover::after { animation: cpb-sheen .7s ease; }
.cpb-add:active { transform: translateY(0) scale(.985); }
@keyframes cpb-sheen { from { left: -70%; } to { left: 130%; } }
/* selection feedback: chosen tile/swatch gives a tiny confirming pop */
.cpb-opt.sel, .cpb-opt.cpb-opt--icon.sel, .cpb-font-opt.sel {
  animation: cpb-pop .22s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes cpb-pop { 0% { transform: scale(1); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* active tab picks up the same gradient depth as the CTA */
.cpb-tab.active {
  background: linear-gradient(150deg, #0072d1, #0060b1 70%) !important;
}
/* cards react gently to the pointer (desktop only) */
@media (hover: hover) {
  .cpb-panel section { transition: border-color .18s ease, box-shadow .18s ease; }
  .cpb-panel section:hover {
    border-color: #c9d3de;
    box-shadow: 0 2px 4px rgba(18,42,66,.05), 0 14px 30px -20px rgba(18,42,66,.2);
  }
  .cpb-panel section.cpb-sec--active:hover {
    border-color: #0060b1;
    box-shadow: 0 0 0 1px #0060b1, 0 14px 30px -20px rgba(18,42,66,.24);
  }
}
/* the current step's number fills solid blue — one glance shows where you are */
.cpb-sec--active .cpb-step-num {
  background: #0060b1; color: #fff;
  box-shadow: 0 0 0 4px rgba(0,96,177,.14);
}
/* mobile sticky buy-bar becomes frosted glass */
@media (max-width: 860px) {
  .cpb-stickybar {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    border-top: 1px solid rgba(18,42,66,.08);
    box-shadow: 0 -6px 24px rgba(18,42,66,.12);
  }
  .cpb-mini-stage { border-radius: 10px; border-color: #dfe6ee; }
  .cpb-sticky-add, .cpb-sticky-add:focus {
    background: linear-gradient(150deg, #0072d1 0%, #0060b1 60%) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpb-add::after { animation: none !important; }
  .cpb-opt.sel, .cpb-opt.cpb-opt--icon.sel, .cpb-font-opt.sel { animation: none !important; }
}

/* ===== cp-builder-ux-20260912 — Runde 1: Akkordeon, Fortschritt, Schrift im Textschritt, Vorschau-Zoom, kompaktere Optik ===== */

/* progress line above the steps */
.cpb-progress { margin: 4px 0 14px; }
.cpb-progress-text { font-size: 12.5px; font-weight: 600; color: #5a6472; margin-bottom: 6px; letter-spacing: .01em; }
.cpb-progress-bar { height: 6px; border-radius: 999px; background: #e9edf1; overflow: hidden; }
.cpb-progress-bar span { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #0060b1, #2b8ae0); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.cpb-progress--done .cpb-progress-text { color: #1e7e34; }
.cpb-progress--done .cpb-progress-bar span { background: linear-gradient(90deg, #1e7e34, #34a853); }

/* compact cards */
.cpb-panel section { margin-bottom: 10px; padding: 12px 14px 14px; border-radius: 12px; }
.cpb-panel section.cpb-sec--active { border-color: #0060b1; box-shadow: 0 0 0 1px rgba(0,96,177,.18), 0 10px 24px -16px rgba(0,96,177,.45); }

/* header as a single row: number/check · title · summary · chevron */
.cpb-cat-title { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; user-select: none; }
.cpb-cat-title::after { display: none; }
.cpb-cat-title-text { flex: 0 0 auto; }
.cpb-sum {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpb-sec--done .cpb-sum::before { content: ''; }
.cpb-chevron { flex: 0 0 auto; color: #8a94a0; transition: transform .2s ease; }
.cpb-sec--closed .cpb-chevron { transform: rotate(-90deg); }
.cpb-panel section:not(.cpb-sec--closed) .cpb-cat-title { margin-bottom: 12px; }

/* collapsed step: only the header remains */
.cpb-sec--closed .cpb-sec-body, .cpb-sec--closed .cpb-cat-note { display: none; }
.cpb-sec--closed { padding-bottom: 12px; }
.cpb-sec--closed:hover { border-color: #b7c6d6; }

/* sub label inside a step (e.g. Schriftart under the text field) */
.cpb-sublabel { margin: 14px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5a6472; }
.cpb-counter { display: flex; justify-content: space-between; gap: 12px; max-width: 420px; }
.cpb-counter-hint { color: #8a94a0; }

/* colour swatches larger, keyboard focus visible */
[data-grid="color"] .cpb-opt--icon .cpb-swatch { width: 52px; height: 52px; }
.cpb-opt:focus-visible, .cpb-toggle-btn:focus-visible, .cpb-tab:focus-visible, .cpb-chip:focus-visible, .cpb-cat-title:focus-visible {
  outline: 3px solid #9bc4e8 !important; outline-offset: 2px;
}

/* preview: clickable + hint */
.cpb-stage { cursor: zoom-in; }
.cpb-stage-hint { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: #8a94a0; }
.cpb-stage-hint-zoom { color: #5a6472; font-weight: 600; }
.cpb-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(17,24,39,.72); opacity: 0; transition: opacity .2s ease; cursor: zoom-out;
}
.cpb-lightbox--show { opacity: 1; }
.cpb-lightbox-inner { position: relative; width: min(92vw, 92vh, 900px); }
.cpb-stage--zoom { width: 100%; cursor: default; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.cpb-lightbox-close,
.cpb-lightbox-close:hover, .cpb-lightbox-close:focus, .cpb-lightbox-close:active {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; min-width: 40px;
  border-radius: 50% !important; border: none !important; background: #fff !important; color: #111 !important;
  font: inherit; font-size: 26px !important; line-height: 40px !important; padding: 0 !important; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* motif search + group chips (preview flags) */
.cpb-search-wrap { width: 100%; margin-bottom: 8px; }
.cpb-search { width: 100%; max-width: 100%; padding: 11px 14px; border: 1px solid #d7dde3; border-radius: 999px;
  font: inherit; font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.cpb-search:focus { outline: none; border-color: #0060b1; box-shadow: 0 0 0 3px rgba(0,96,177,.14); }
.cpb-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cpb-chip,
.cpb-chip:active, .cpb-chip:focus {
  flex: 0 0 auto; padding: 8px 14px !important; border: 1px solid #e2e7ec !important; border-radius: 999px !important;
  background: #fff !important; color: #5a6472 !important; font: inherit !important; font-size: 12.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important; height: auto !important; cursor: pointer;
  white-space: nowrap;
}
.cpb-chip:hover { border-color: #cdd5dd !important; color: #0060b1 !important; }
.cpb-chip.active { border-color: #0060b1 !important; background: #0060b1 !important; color: #fff !important; }

@media (max-width: 560px) {
  .cpb-sum { max-width: 46%; font-size: 12px; }
  .cpb-stage-hint { flex-direction: column; gap: 2px; }
}

/* ux round 1: no hairline under the step title (header is a single row now) */
.cpb-cat-title-text::after, .cpb-cat-title::after { display: none !important; }

/* ux round 1b: mobile - no sticky bar; the preview is repeated right above the buy row instead */
.cpb-stickybar, .cpb-stickybar.cpb-stickybar--show { display: none !important; }
.cpb-buy-preview { display: none; }
@media (max-width: 860px) {
  .cpb-buy-preview {
    display: block; width: 100%; max-width: 360px; margin: 6px auto 12px;
    cursor: default; border-radius: 12px;
  }
}

/* ux: motif groups as tiles + dropdown */
.cpb-group-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .cpb-group-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cpb-group-tile,
.cpb-group-tile:active, .cpb-group-tile:focus {
  display: flex !important; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px !important; border: 1px solid #e2e7ec !important; border-radius: 12px !important;
  background: #fff !important; color: #333 !important; font: inherit !important; font-size: 12px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important; height: auto !important;
  cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cpb-group-tile img { width: 56px; height: 56px; min-width: 56px; object-fit: contain; display: block; }
.cpb-group-tile span { text-align: center; }
.cpb-group-tile:hover { border-color: #b7c6d6 !important; transform: translateY(-2px); box-shadow: 0 7px 16px -6px rgba(18,42,66,.28); }
.cpb-group-tile.sel { border-color: #0060b1 !important; box-shadow: 0 0 0 2px rgba(0,96,177,.16) !important; }
.cpb-group-select { margin-top: 2px; }

/* ux round 2: summary icons, searchable group combobox inside the motif step */
.cpb-sum { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cpb-sum-ic { width: 26px; height: 26px; min-width: 26px; object-fit: contain; display: inline-block; }
.cpb-sum .cpb-swatch.cpb-sum-ic { border-radius: 50%; border: 1px solid #d7dbe0; }
.cpb-sum-ic--round { border-radius: 50%; object-fit: cover; border: 1px solid #d7dbe0; }
.cpb-combo { position: relative; max-width: 420px; margin-bottom: 12px; }
.cpb-combo-input { width: 100%; padding: 11px 40px 11px 14px; border: 1px solid #d7dde3; border-radius: 10px; font: inherit; font-size: 14px; background: #fff; box-sizing: border-box; }
.cpb-combo-input:focus { outline: none; border-color: #0060b1; box-shadow: 0 0 0 3px rgba(0,96,177,.14); }
.cpb-combo-chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8a94a0; cursor: pointer; line-height: 0; }
.cpb-combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #e2e7ec; border-radius: 12px; box-shadow: 0 14px 34px -12px rgba(18,42,66,.35); max-height: 320px; overflow-y: auto; }
.cpb-combo-list[hidden] { display: none; }
.cpb-combo-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.cpb-combo-item img { width: 30px; height: 30px; min-width: 30px; object-fit: contain; }
.cpb-combo-item:hover { background: #f2f6fa; }
.cpb-combo-item.sel { background: #eaf2fb; color: #0060b1; font-weight: 600; }
.cpb-combo-empty { padding: 8px 10px; color: #8a94a0; font-size: 13px; }

/* ux: fly-to-cart feedback */
.cpb-fly .cpb-layer, .cpb-fly .cpb-layer-text, .cpb-fly .cpb-layer-logo { pointer-events: none; }
.cpb-cart-bump { animation: cpb-bump .6s cubic-bezier(.2,.7,.2,1); }
@keyframes cpb-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
.cpb-add.cpb-add--done, .cpb-add.cpb-add--done:hover { background: #1e7e34 !important; box-shadow: 0 10px 22px -6px rgba(30,126,52,.5) !important; }
@media (prefers-reduced-motion: reduce) { .cpb-cart-bump { animation: none; } }

/* ux: no child may widen the layout on small screens (min-width:auto of grid items was the culprit) */
.cpb > * { min-width: 0; }
@media (max-width: 860px) {
  .cpb { grid-template-columns: minmax(0, 1fr); }
  cp-builder, .cpb, .cpb-panel, .cpb-stage-wrap { max-width: 100%; overflow-x: clip; }
  .cpb-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpb-font-opt, .cpb-font-opt:active, .cpb-font-opt:focus { min-width: 0 !important; width: auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cpb-sel-card { max-width: 100%; }
  .cpb-combo { max-width: 100%; }
}

/* ux: collapsed step header on narrow screens - title may shrink/wrap, summary keeps its ellipsis on the right */
@media (max-width: 560px) {
  .cpb-cat-title { gap: 8px; letter-spacing: .06em; font-size: 11px; }
  .cpb-cat-title-text { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.25; }
  .cpb-sum { flex: 0 1 auto; max-width: 48%; text-align: left; direction: ltr; }
  .cpb-sum > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}
@media (max-width: 560px) {
  /* single long words in step titles (e.g. Rückseitenbeschriftung) hyphenate instead of colliding with the summary */
  .cpb-cat-title-text { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .cpb-sum { max-width: 44%; }
}

/* cp-builder-combo-mobile-20260913: on phones the group list opens in flow (pushes steps 4/5 down)
   instead of floating over the following steps and the preview */
@media (max-width: 860px) {
  .cpb-combo-list { position: static; margin-top: 6px; max-height: 260px; box-shadow: none; }
  .cpb-combo-chevron { top: 21px; }
}

/* cp-builder-ux-r3-20260913 — Variante A "Klar": sichtbare, ruhige Rahmen (1.5px Grau), klare Fokus-/Auswahlzustände */
.cpb { --cpb-line: #c3ccd6; --cpb-line-strong: #a9b5c2; --cpb-line-input: #9fabb8; --cpb-blue: #0060b1; --cpb-blue-soft: #eef5fb; --cpb-ring: 0 0 0 3px rgba(0,96,177,.16); }
/* cards */
.cpb-panel section { border: 1.5px solid var(--cpb-line) !important; box-shadow: 0 1px 2px rgba(18,42,66,.05), 0 10px 24px -18px rgba(18,42,66,.18); }
.cpb-panel section.cpb-sec--active { border-color: var(--cpb-blue) !important; box-shadow: 0 0 0 1px var(--cpb-blue), 0 12px 28px -16px rgba(0,96,177,.35); }
.cpb-actions, .cpb-trust { border: 1.5px solid var(--cpb-line) !important; }
.cpb-stage { border: 1.5px solid var(--cpb-line) !important; }
/* inputs: textarea, select, combo search */
.cpb-select, .cpb-textarea, .cpb-file, .cpb-combo-input {
  border: 1.5px solid var(--cpb-line-input) !important; background: #fff; color: #1a1a1a;
  box-shadow: inset 0 1px 2px rgba(18,42,66,.06);
}
.cpb-select:hover, .cpb-textarea:hover, .cpb-combo-input:hover { border-color: #6f8196 !important; }
.cpb-select:focus, .cpb-textarea:focus, .cpb-combo-input:focus { border-color: var(--cpb-blue) !important; box-shadow: var(--cpb-ring), inset 0 1px 2px rgba(18,42,66,.04) !important; }
.cpb-textarea::placeholder, .cpb-combo-input::placeholder { color: #7a8794; }
.cpb-combo-list { border: 1.5px solid var(--cpb-line-strong); box-shadow: 0 16px 36px -14px rgba(18,42,66,.35); }
.cpb-combo-item { border: 1px solid transparent; }
.cpb-combo-item:hover { background: var(--cpb-blue-soft); border-color: #cfe0f1; }
.cpb-combo-item.sel { border-color: var(--cpb-blue); }
.cpb-combo-chevron { color: #5a6472; }
/* tiles: options, motif groups, fonts, tabs, toggles */
.cpb-opt, .cpb-group-tile, .cpb-group-tile:active, .cpb-group-tile:focus,
.cpb-font-opt, .cpb-font-opt:active, .cpb-font-opt:focus,
.cpb-toggle-btn, .cpb-toggle-btn:active, .cpb-toggle-btn:focus,
.cpb-tab, .cpb-tab:active, .cpb-tab:focus { border: 1.5px solid var(--cpb-line) !important; }
.cpb-opt:hover, .cpb-group-tile:hover, .cpb-font-opt:hover, .cpb-toggle-btn:hover, .cpb-tab:hover { border-color: var(--cpb-line-input) !important; }
.cpb-opt.sel, .cpb-group-tile.sel, .cpb-font-opt.sel, .cpb-toggle-btn.active { border: 2px solid var(--cpb-blue) !important; background: var(--cpb-blue-soft) !important; }
.cpb-opt.cpb-opt--icon { border-width: 2px; border-color: var(--cpb-line-strong); }
.cpb-opt.cpb-opt--icon.sel { border-color: var(--cpb-blue); }
.cpb-sel-card { border: 2px solid var(--cpb-blue); }
/* upload area + quantity */
.cpb-upload-btn { border: 2px dashed var(--cpb-line-input); background: #fbfcfd; }
.cpb-qty-btn, .cpb-qty-btn:active, .cpb-qty-btn:focus, .cpb-qty, .cpb-qty:focus { border-color: var(--cpb-line-input) !important; }
.cpb-qty:focus { border-color: var(--cpb-blue) !important; }
/* press feedback + focus ring everywhere */
.cpb-opt:active, .cpb-group-tile:active, .cpb-font-opt:active, .cpb-toggle-btn:active, .cpb-tab:active { transform: scale(.98) !important; }
.cpb-opt:focus-visible, .cpb-group-tile:focus-visible, .cpb-font-opt:focus-visible, .cpb-toggle-btn:focus-visible, .cpb-tab:focus-visible { outline: none; box-shadow: var(--cpb-ring) !important; }
/* helper texts more legible */
.cpb-hint, .cpb-counter, .cpb-upload-sub, .cpb-cat-note { color: #5a6472; }

/* cp-builder-ux-r3b-20260913: Porto's global button:hover (#0088cc + white text) leaked onto the option
   tiles (motifs, ribbons). Own, calm states: white tile, soft grey-blue hover, light blue when selected. */
.cpb-opt, .cpb-opt:focus, .cpb-opt:active { background: #fff !important; color: #333 !important; }
.cpb-opt:hover { background: #f6f9fc !important; color: #0060b1 !important; border-color: var(--cpb-line-input, #9fabb8) !important; }
.cpb-opt.sel, .cpb-opt.sel:hover { background: var(--cpb-blue-soft, #eef5fb) !important; color: #0060b1 !important; }
.cpb-opt span { color: inherit; font-weight: 500; }
.cpb-opt.cpb-opt--icon, .cpb-opt.cpb-opt--icon:hover, .cpb-opt.cpb-opt--icon.sel { background: #fff !important; }

/* cp-builder-choice-20260913: "Ihre Wahl" line under open step titles + inclusive note under the price */
.cpb-choice { margin: -6px 0 12px; font-size: 13px; color: #5a6472; }
.cpb-choice--empty { display: none; }
.cpb-sec--closed .cpb-choice { display: none; }
.cpb-price-incl { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #1e7e34; text-align: right; }
.cpb-price-incl::before { content: '\2713\00a0'; }
.cpb-panel section:not(.cpb-sec--closed) .cpb-sum { display: none; }

/* cp-builder-r5-20260913: delivery box under CTA, bigger filled yes/no pills, 56px ribbon swatches, tier prices */
.cpb-delivery-box { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: #eef8f0; border: 1.5px solid #bfe3c8; color: #1e7e34; font-size: 13.5px; line-height: 1.35; }
.cpb-delivery-box svg { flex: 0 0 auto; }
.cpb-toggle-btn, .cpb-toggle-btn:active, .cpb-toggle-btn:focus { padding: 14px 18px !important; border-radius: 999px !important; font-size: 15px !important; }
.cpb-toggle-btn.active, .cpb-toggle-btn.active:hover { background: #0060b1 !important; color: #fff !important; border-color: #0060b1 !important;
  box-shadow: 0 6px 16px -6px rgba(0,96,177,.5) !important; }
.cpb-opt.cpb-opt--icon { width: 56px; height: 56px; }
.cpb-tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 14px; }
.cpb-tiers-label { font-size: 12.5px; color: #5a6472; margin-right: 2px; }
.cpb-tier, .cpb-tier:active, .cpb-tier:focus { padding: 5px 10px !important; border: 1.5px solid #c3ccd6 !important; border-radius: 999px !important;
  background: #fff !important; color: #333 !important; font: inherit !important; font-size: 12px !important; line-height: 1.2 !important;
  height: auto !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; cursor: pointer; }
.cpb-tier b { color: #1e7e34; font-weight: 700; }
.cpb-tier:hover { border-color: #0060b1 !important; color: #0060b1 !important; }
.cpb-tier.active { border-color: #1e7e34 !important; background: #eef8f0 !important; }
.cpb-price-unit { display: block; margin-top: 4px; font-size: 12.5px; color: #5a6472; text-align: right; }
.cpb-price-unit em { font-style: normal; color: #1e7e34; font-weight: 600; }

/* cp-builder-premium-20260913: surcharge badge on premium ribbon swatches */
.cpb-opt { position: relative; }
.cpb-opt-plus { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px;
  background: #f0ad4e; color: #1a1a1a; border: 1.5px solid #fff; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.28); pointer-events: none; }
[data-grid="ribbon"] .cpb-opt.cpb-opt--icon { margin-bottom: 10px; }
.cpb-premium-note { width: 100%; margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: #fff8ec; border: 1.5px solid #f0ad4e;
  color: #333; font-size: 13px; line-height: 1.4; }
.cpb-premium-note b { color: #1a1a1a; }
.cpb-opt.cpb-opt--icon { overflow: visible; }
.cpb-opt.cpb-opt--icon img, .cpb-opt.cpb-opt--icon .cpb-swatch { border-radius: 50%; }

/* cp-builder-boxes-20260913: step cards and yes/no pills with clearly visible frames on 1x screens */
.cpb-panel section { border: 2px solid #b3bec9 !important; }
.cpb-panel section.cpb-sec--active { border-color: #0060b1 !important; box-shadow: 0 0 0 1px #0060b1, 0 12px 28px -16px rgba(0,96,177,.35) !important; }
.cpb-actions, .cpb-trust, .cpb-stage { border: 2px solid #b3bec9 !important; }
.cpb-toggle-btn, .cpb-toggle-btn:active, .cpb-toggle-btn:focus { border: 2px solid #9fabb8 !important; }
.cpb-toggle-btn:hover { border-color: #0060b1 !important; }
.cpb-select, .cpb-textarea, .cpb-file, .cpb-combo-input { border-width: 2px !important; }

/* cp-builder-boxes-20260913b: black frames (owner request) */
.cpb-panel section { border-color: #1a1a1a !important; box-shadow: none !important; }
.cpb-panel section.cpb-sec--active { border-color: #0060b1 !important; box-shadow: 0 0 0 1px #0060b1 !important; }
.cpb-actions, .cpb-trust, .cpb-stage { border-color: #1a1a1a !important; }
.cpb-toggle-btn, .cpb-toggle-btn:active, .cpb-toggle-btn:focus { border-color: #1a1a1a !important; }
.cpb-select, .cpb-textarea, .cpb-file, .cpb-combo-input { border-color: #1a1a1a !important; }
.cpb-select:focus, .cpb-textarea:focus, .cpb-combo-input:focus { border-color: #0060b1 !important; }

/* cp-builder-swatchframe-20260913: round swatches (ribbons, colours) with an anthracite frame */
.cpb-opt.cpb-opt--icon { border: 2px solid #2b2b2b !important; box-shadow: inset 0 0 0 2px #fff; }
.cpb-opt.cpb-opt--icon:hover { border-color: #0060b1 !important; }
.cpb-opt.cpb-opt--icon.sel { border-color: #0060b1 !important; box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(0,96,177,.22) !important; }
.cpb-sel-card img.cpb-sel-card-icon, .cpb-sel-card .cpb-swatch--none.cpb-sel-card-icon, .cpb-sum .cpb-sum-ic--round, .cpb-sum .cpb-swatch.cpb-sum-ic { border-color: #2b2b2b; }