/* Werbekönig Product Preview V2 – isolated STAGING component */
.wkpd-preview {max-width:1280px;margin:0 auto;padding:30px 22px 68px;color:#1e2937;box-sizing:border-box}
.wkpd-preview * {box-sizing:border-box}
.wkpd-preview a {color:#aa5518}
.wkpd-kicker {font-weight:750;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:#c67728}
.wkpd-preview-badge {display:inline-flex;margin:0 0 18px;border:1px solid #e6cba9;background:#fff7e9;border-radius:99px;padding:6px 11px;color:#80511e;font-size:12px;letter-spacing:.04em;font-weight:700}
.wkpd-hero {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,4vw,48px);align-items:start}
.wkpd-media {margin:0;min-width:0;position:sticky;top:18px}
.wkpd-image-frame {display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#f8f9fb;border:1px solid #e6e8ec;border-radius:20px;overflow:hidden}
.wkpd-image-frame img {width:100%;height:100%;object-fit:contain;display:block}
.wkpd-image-caption {display:flex;gap:10px;justify-content:space-between;align-items:center;padding:13px 3px 0;font-size:13px;color:#66758a}
.wkpd-image-caption strong {color:#253045}
.wkpd-summary {min-width:0}
.wkpd-summary h1 {font-size:clamp(29px,3.3vw,43px);line-height:1.11;letter-spacing:-.035em;margin:8px 0 16px;color:#182333}
.wkpd-description {font-size:15px;line-height:1.65;color:#586579;margin-bottom:20px}
.wkpd-price-note {padding:15px 17px;border-radius:13px;background:#fff7ed;border:1px solid #f1dbc2;display:grid;gap:5px;margin:18px 0 22px}
.wkpd-price-note strong {font-size:14px;color:#805123}
.wkpd-price-note span {font-size:13px;line-height:1.45;color:#7a6d5e}
.wkpd-step {border-top:1px solid #e6eaf0;padding-top:19px;margin-top:22px}
.wkpd-stephead {display:flex;gap:11px;align-items:center;margin:0 0 13px}
.wkpd-stepnum {width:27px;height:27px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#f6e4cc;color:#9b530e;font-weight:750;font-size:13px}
.wkpd-stephead h2 {font-size:19px;line-height:1.25;color:#24344a;margin:0}
.wkpd-swatches {display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wkpd-swatch {border:1px solid #d6dde7;border-radius:10px;min-height:39px;display:flex;align-items:center;gap:7px;padding:8px 11px;background:#fff;color:#374960;cursor:pointer;font:inherit;font-size:13px;line-height:1.2}
.wkpd-swatch:hover {border-color:#b98a48;background:#fffaf1}
.wkpd-swatch.is-selected,.wkpd-swatch[aria-pressed="true"] {background:#fff4e4;border-color:#c47b24;box-shadow:inset 0 0 0 1px #c47b24;color:#7d4714}
.wkpd-swatch:focus-visible,.wkpd-preview select:focus-visible,.wkpd-copy:focus-visible {outline:3px solid #ffaf5a;outline-offset:2px}
.wkpd-dot {width:15px;height:15px;border:1px solid rgba(0,0,0,.15);border-radius:50%;background:#cad3df;display:inline-block;flex-shrink:0}
.wkpd-selected {margin-top:12px;font-size:13px;color:#566477}
.wkpd-selected strong {color:#26344c}
.wkpd-select-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.wkpd-select-grid label {display:grid;gap:7px;font-weight:750;font-size:12px;color:#5d6a7c}
.wkpd-select-grid label.wkpd-wide {grid-column:1/-1}
.wkpd-select-grid select {max-width:100%;width:100%;height:43px;background:#fff;border:1px solid #d9dfe6;border-radius:10px;padding:8px 12px;color:#253246;font:inherit;font-size:13px}
.wkpd-select-grid select:disabled {color:#9ba4af;background:#f4f6f8;cursor:not-allowed}
.wkpd-detail {background:#f7f9fc;border:1px solid #e3e9f0;border-radius:14px;padding:15px 17px}
.wkpd-detail dl {display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin:0}
.wkpd-detail dl dt {font-size:12px;color:#718096;margin:0 0 2px}
.wkpd-detail dl dd {font-size:13px;font-weight:650;color:#1e324a;margin:0}
.wkpd-availability {font-size:12px;color:#566a7c;margin:11px 0}
.wkpd-copy {border:1px solid #bd7c30;border-radius:10px;background:#fff9f0;color:#865018;padding:10px 14px;cursor:pointer;font-weight:700;font-size:12px}
.wkpd-copy:hover {background:#ffe9ca}
.wkpd-copy:disabled {opacity:.45;cursor:default}
.wkpd-feedback {display:inline-block;font-size:12px;margin-left:9px;color:#36703e}
.wkpd-subsection {padding-top:24px;margin-top:29px;border-top:1px solid #e7eaf0}
.wkpd-subsection h2 {font-size:23px;margin:0 0 14px}
.wkpd-note {background:#f5f7fa;border-radius:12px;border:1px solid #e4e8f0;padding:13px 16px;line-height:1.5;font-size:13px;color:#58647a;margin:22px 0 0}
.wkpd-specs {display:grid;grid-template-columns:1fr 1fr;gap:11px}
.wkpd-specs>div {border:1px solid #e6ebf0;border-radius:10px;padding:11px 14px}
.wkpd-specs dt {font-size:12px;color:#6b7788}
.wkpd-specs dd {margin:5px 0 0;font-weight:600}
.wkpd-muted {color:#7d8997;font-size:13px;line-height:1.5}
@media(max-width:820px){
  .wkpd-hero {grid-template-columns:1fr;gap:23px}
  .wkpd-media {position:static}
  .wkpd-image-frame {max-height:460px}
}
@media(max-width:540px){
 .wkpd-preview {padding:20px 15px 48px}
 .wkpd-summary h1 {font-size:29px}
 .wkpd-select-grid,.wkpd-detail dl,.wkpd-specs {grid-template-columns:1fr}
 .wkpd-stephead h2 {font-size:17px}
 .wkpd-swatch {font-size:12px}
 .wkpd-image-frame {aspect-ratio:1/1}
 .wkpd-feedback {display:block;margin:8px 0 0}
}

/* Higher specificity than the main theme heading rules. */
.wkpd-preview .wkpd-stephead h2{font-size:21px;line-height:1.2;font-weight:750;margin:0}
.wkpd-preview .wkpd-subsection h2{font-size:23px;line-height:1.3;margin:0 0 15px}
