/* ─────────────────────────────────────────────────────────────────────
   LIVE-PREVIEW VIEWPORT FIT
   Target: header (64px) + content = 100vh total, ~95vh content area
   Root cause: konfigurator.css sets position:sticky + height:100vh
               on .kfg__side and min-height:100vh on .kfg (now scoped)
   ───────────────────────────────────────────────────────────────────── */
body.page-template-page-live-preview .kfg,
body.page-live-preview .kfg {
  height:            calc(95vh - 64px);
  min-height:        0;
  max-height:        calc(95vh - 64px);
  grid-template-rows: 1fr;    /* single row — no products row */
  grid-template-columns: var(--sidebar-w) 1fr;
  padding:           calc(var(--gap) / 2) var(--gap);
  margin-top:        64px;    /* clear fixed header */
  gap:               var(--gap);
  overflow:          hidden;
  align-items:       stretch;
}

/* Sidebar: override sticky + 100vh from konfigurator.css */
body.page-template-page-live-preview .kfg__side,
body.page-live-preview .kfg__side {
  position:   relative;       /* kill sticky — let grid control it */
  top:        auto;
  grid-row:   1;              /* override grid-row:1/3 */
  height:     100%;           /* fill the grid cell exactly */
  max-height: 100%;
  padding:    20px 20px 80px; /* no huge 320px bottom pad */
  overflow-y: auto;
  overflow-x: hidden;
  /* Keep bottom fade only */
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 48px), transparent 100%);
  mask-image:         linear-gradient(to bottom, black 0, black calc(100% - 48px), transparent 100%);
}
body.page-template-page-live-preview .kfg__side.at-bottom,
body.page-live-preview .kfg__side.at-bottom {
  -webkit-mask-image: none;
  mask-image:         none;
}
body.page-template-page-live-preview .kfg__side.at-top,
body.page-live-preview .kfg__side.at-top {
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 48px), transparent 100%);
  mask-image:         linear-gradient(to bottom, black 0, black calc(100% - 48px), transparent 100%);
}

/* Viz card */
body.page-template-page-live-preview .kfg__viz,
body.page-live-preview .kfg__viz {
  grid-row:   1;
  height:     100%;
  max-height: 100%;
  min-height: 0;
}


/* Hero slider inside kfg__viz card */
.lp__hero-slide { position:absolute;inset:0;opacity:0;transition:opacity .7s; }
.lp__hero-slide.is-active { opacity:1; }
.lp__hero-slide img { width:100%;height:100%;object-fit:cover;display:block; }

/* CTA overlay on slider */
.lp__hero-cta {
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to right,rgba(0,0,0,.7) 0%,rgba(0,0,0,.15) 60%,transparent 100%);
  display:flex;align-items:center;padding:48px;pointer-events:none;
}
.lp__hero-cta-inner { max-width:360px;pointer-events:all; }
.lp__hero-cta-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  background:rgba(184,134,11,.2);border:1px solid rgba(184,134,11,.4);
  color:var(--accent);font-size:11px;font-weight:700;margin-bottom:14px;
}
.lp__hero-cta-badge .material-symbols-rounded { font-size:14px; }
.lp__hero-cta-title { font-size:clamp(22px,3vw,32px);font-weight:800;color:#fff;line-height:1.15;margin:0 0 10px; }
.lp__hero-cta-sub { font-size:13px;color:rgba(255,255,255,.7);line-height:1.5;margin:0 0 18px; }
.lp__hero-cta-btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:12px;background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:var(--font);
  box-shadow:0 4px 16px rgba(184,134,11,.4);transition:all .15s;
}
.lp__hero-cta-btn:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(184,134,11,.5); }

/* Slider nav arrows + dots (inside kfg__viz) */
.lp__slider-nav {
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.lp__slider-nav:hover { background:rgba(255,255,255,.3); }
.lp__slider-nav--prev { left:14px; }
.lp__slider-nav--next { right:14px; }
.lp__slider-nav .material-symbols-rounded { font-size:16px; }
.lp__slider-dots {
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:5;
}
.lp__slider-dot {
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
  border:none;cursor:pointer;transition:all .2s;padding:0;
}
.lp__slider-dot.is-active { background:#fff;width:16px;border-radius:3px; }

/* Upload zone */
.lp__upload-zone {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:20px 14px;border:2px dashed var(--border);border-radius:12px;
  cursor:pointer;text-align:center;transition:all .15s;background:var(--card-inner);
}
.lp__upload-zone:hover,.lp__upload-zone.is-dragover { border-color:var(--accent);background:rgba(184,134,11,.04); }
/* Vehicle color swatches — single flex row */
.lp__vehicle-colors-grid {
  display:flex;flex-wrap:nowrap;gap:8px;padding:4px 0;
  overflow-x:auto;scrollbar-width:none;
}
.lp__vehicle-colors-grid::-webkit-scrollbar { display:none; }
.lp__vcolor-swatch {
  width:28px;height:28px;min-width:28px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:border-color .12s,box-shadow .12s;
  padding:0;outline:none;flex-shrink:0;
}
.lp__vcolor-swatch:hover { border-color:rgba(255,255,255,.4); }
.lp__vcolor-swatch.is-active {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(184,134,11,.3);
}
.lp__vcolor-name { display:none !important; } /* name only via native title tooltip */
.lp__upload-label { font-size:12px;font-weight:600;color:var(--text); }
.lp__upload-hint { font-size:10px;color:var(--text3); }

/* Tab row */
.lp__tab-row { display:flex;gap:6px;margin-bottom:10px; }
.lp__tab {
  flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:7px;border-radius:8px;border:1.5px solid var(--border);background:var(--card-inner);
  font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;font-family:inherit;transition:all .12s;
}
.lp__tab .material-symbols-rounded { font-size:15px; }
.lp__tab.is-active { border-color:var(--accent);color:var(--accent);background:rgba(184,134,11,.06); }
.lp__tab-panel.is-hidden { display:none; }

/* Catalog — text-only list, no image preview */
.lp__catalog-list { display:flex;flex-direction:column;gap:4px; }
.lp__catalog-btn {
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--card-inner);cursor:pointer;font-size:12px;
  font-family:inherit;color:var(--text);text-align:left;transition:all .12s;
}
.lp__catalog-btn .material-symbols-rounded { font-size:16px;color:var(--text3);flex-shrink:0; }
.lp__catalog-btn:hover { border-color:var(--accent);background:rgba(184,134,11,.04); }
.lp__catalog-btn.is-selected { border-color:var(--accent);background:rgba(184,134,11,.08); }
.lp__catalog-item.is-selected { border-color:var(--accent);background:rgba(184,134,11,.06); }

/* Photo thumb confirm */
.lp__photo-thumb { width:48px;height:48px;border-radius:8px;object-fit:cover; }
.lp__photo-confirm {
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:var(--card-inner);margin-bottom:8px;
}
.lp__photo-confirm-label { font-size:11px;color:var(--text2); }

/* Generate button wrapper — normal spacing below last step */
.lp__generate-wrap {
  padding: 20px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
/* Ensure kfg__btn--primary disabled state is clear */
.lp__generate-wrap .kfg__btn:disabled { opacity:.35;cursor:not-allowed; }

/* Result area inside bottom card */
.lp__result-img-wrap {
  position:relative;background:#0a0a0a;min-height:300px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);overflow:hidden;
}
.lp__result-img { max-width:100%;max-height:60vh;object-fit:contain;display:none; }
.lp__result-img.is-loaded { display:block; }
.lp__result-loading {
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:rgba(255,255,255,.7);text-align:center;font-size:13px;line-height:1.5;
}
.lp__spinner {
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);
  animation:lp-spin 1s linear infinite;
}
@keyframes lp-spin { to { transform:rotate(360deg); } }

/* Status bar in bottom card */
.lp__status-bar {
  display:flex;align-items:center;gap:8px;padding:10px 0;
  font-size:11px;color:var(--text3);border-top:1px solid var(--border);margin-top:16px;
}

/* Wheel model grid inside sidebar */
.lp__wheel-model-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:6px; }
.lp__wheel-model-btn {
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 4px;border-radius:10px;border:1px solid var(--border);background:var(--card-inner);
  cursor:pointer;font-size:11px;font-weight:700;color:var(--text);font-family:inherit;transition:all .12s;
}
.lp__wheel-model-btn img { width:56px;height:56px;object-fit:contain; }
.lp__wheel-model-btn:hover,.lp__wheel-model-btn.is-active { border-color:var(--accent);background:rgba(184,134,11,.06); }

/* Color dots inside serie buttons */
.lp__model-swatches {
  display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:4px;
}
.lp__model-swatch {
  display:inline-block;width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(0,0,0,.15);flex-shrink:0;
}

/* Color items */
.lp__color-list { display:flex;flex-direction:column;gap:4px; }
.lp__color-item {
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
  border:1px solid var(--border);background:var(--card-inner);cursor:pointer;
  font-size:12px;color:var(--text);font-family:inherit;transition:all .12s;
}
.lp__color-dot { width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1); }
.lp__color-item img { width:28px;height:28px;object-fit:contain;border-radius:4px; }
.lp__color-item:hover,.lp__color-item.is-active { border-color:var(--accent); }

@media (max-width:768px) {
  .lp__hero-cta { padding:20px; }
  .lp__hero-cta-inner { max-width:100%; }
}