/* Druck und Zauber — Konfigurator Fidget Clicker (baut auf base.css / shop.css auf) */

.configurator .product-layout { grid-template-columns: 52fr 48fr; }
.fc-preview-col { position: sticky; top: 88px; }
@media (max-width: 900px) { .fc-preview-col { position: static; } }

.fc-preview {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: center; min-height: 220px;
}
.fc-preview svg { width: 100%; max-width: 560px; height: auto; display: block; overflow: visible; }
.fc-svg-key { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); transform-box: fill-box; transform-origin: center; }
@media (hover: hover) { .fc-svg-key:hover { transform: translateY(-2px); } }
.fc-svg-key:focus-visible { outline: none; }
.fc-svg-key:focus-visible rect:first-child { stroke: var(--mint-deep); stroke-width: 3; }
.fc-hint { font-size: 0.85rem; color: var(--gray-mid); margin-top: 0.7rem; }
.fc-summary { font-weight: 700; color: var(--mint-text); margin-top: 0.3rem; }

.fc-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.3rem 0 0.5rem; }

/* Farbfelder */
.fc-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fc-swatch {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); color: var(--black);
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
@media (hover: hover) { .fc-swatch:hover { border-color: var(--mint); } }
.fc-swatch:active { transform: scale(0.97); }
.fc-swatch.is-active { background: var(--mint-pale); border-color: var(--mint-deep); color: var(--mint-text); box-shadow: inset 0 0 0 1px var(--mint-deep); }
.fc-swatch:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.fc-swatch svg { flex: 0 0 auto; }

/* Tastenliste */
.fc-keylist { display: grid; gap: 0.6rem; }
.fc-key { border: 1px solid var(--border); border-radius: 14px; background: var(--white); overflow: hidden; }
.fc-key.is-active { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.fc-key-head {
  display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.6rem 0.9rem; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--black);
}
.fc-key.is-active .fc-key-head { background: var(--mint-pale); }
.fc-key-head:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.fc-key-no { font-weight: 700; font-size: 0.85rem; color: var(--gray); }
.fc-key-ch { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--white); border: 1px solid var(--border); font-weight: 800; font-size: 1.15rem; }
.fc-key-dots { display: inline-flex; gap: 2px; }
.fc-key-meta { font-size: 0.8rem; color: var(--gray-mid); justify-self: end; }
.fc-key-body { padding: 0.6rem 0.9rem 0.9rem; border-top: 1px solid var(--border); display: grid; gap: 0.8rem; }
.fc-sub-title { font-size: 0.8rem; font-weight: 700; color: var(--gray); margin-bottom: 0.35rem; }
.fc-letter-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fc-letter-grid .chip { padding: 0.3rem 0; width: 2.2rem; justify-content: center; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; }
.fc-tools { margin-top: 0.7rem; }
.btn-sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.fc-qty { max-width: 140px; }
.fc-note { color: #C0392B; margin-top: 0.6rem; }
.fc-details { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.fc-details summary { cursor: pointer; font-weight: 700; color: var(--mint-text); }
.fc-details p { margin-top: 0.6rem; font-size: 0.92rem; }
@media (max-width: 560px) {
  .fc-key-head { grid-template-columns: auto auto 1fr; }
  .fc-key-meta { grid-column: 1 / -1; justify-self: start; }
}