:root { --kqf-accent: #ff69b4; --kqf-bg: #0d0d1f; --kqf-soft: #14112a; --kqf-text: #f0eaf8; --kqf-muted: #9a88c0; }
.kqf-quiz-root, .kqf-results-page { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; color: var(--kqf-text); }
@media (min-width: 900px) { .kqf-results-page { max-width: 1100px; padding: 56px 40px 96px; } }
.kqf-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 40px 0; }
.kqf-intro__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--kqf-accent); }
.kqf-intro__title { font-size: 1.8rem; font-weight: 700; line-height: 1.25; }
.kqf-intro__desc { font-size: 15px; line-height: 1.5; color: var(--kqf-muted); max-width: 440px; }
.kqf-intro__meta { font-size: 13px; color: var(--kqf-muted); }
.kqf-progress { height: 5px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 28px; }
.kqf-progress__bar { height: 100%; background: var(--kqf-accent); transition: width .35s ease; }
.kqf-question__title { font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; line-height: 1.35; }
.kqf-answers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.kqf-answer { text-align: left; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: var(--kqf-soft); color: var(--kqf-text); font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.kqf-answer:hover { border-color: var(--kqf-accent); }
.kqf-answer--selected { border-color: var(--kqf-accent); background: rgba(255,105,180,.12); }
.kqf-nav { display: flex; justify-content: space-between; gap: 12px; }
.kqf-btn { padding: 12px 24px; border-radius: 999px; border: none; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; transition: transform .1s; }
.kqf-btn:active { transform: scale(.97); }
.kqf-btn--primary { background: var(--kqf-accent); color: #1a1320; }
.kqf-btn--primary:disabled { opacity: .4; cursor: not-allowed; }
.kqf-btn--ghost { background: transparent; color: var(--kqf-muted); border: 1px solid rgba(255,255,255,.15); }
.kqf-loading, .kqf-error { text-align: center; padding: 40px 0; color: var(--kqf-muted); }
.kqf-results-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 40px; }
.kqf-results-hero__text { display: flex; flex-direction: column; align-items: center; }
.kqf-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--kqf-accent); margin: 0 0 10px; }
.kqf-results-hero__title { font-size: 2rem; color: var(--kqf-accent); margin-bottom: 12px; }
.kqf-results-hero__image img { border-radius: 18px; max-width: 100%; }
.kqf-results-fallback { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.kqf-results-fallback__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--kqf-soft); margin-bottom: 12px; }
.kqf-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.kqf-results-products { margin-bottom: 32px; }
.kqf-results-products h2 { font-size: 1.2rem; margin-bottom: 16px; }
.kqf-results-products__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 16px; }
.kqf-product-card { display: block; text-decoration: none; color: var(--kqf-text); background: var(--kqf-soft); border-radius: 14px; padding: 12px; transition: transform .2s; }
.kqf-product-card:hover { transform: translateY(-2px); }
.kqf-product-card__title { font-size: .9rem; margin: 8px 0 4px; }
.kqf-product-card__price { color: var(--kqf-accent); font-weight: 600; }
.kqf-results-retry { text-align: center; margin-top: 32px; }
@media (min-width: 900px) { .kqf-results-hero { flex-direction: row; text-align: left; gap: 56px; } .kqf-results-hero__text { align-items: flex-start; flex: 1; } .kqf-results-hero__image { flex: 1; order: 1; } .kqf-results-products__grid { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); } }

/* ══════════════════════════════════════════════════════
   KÉP PLACEHOLDER RENDSZER
   Élő oldalon: teljesen láthatatlan (háttérszínnel egyező).
   Preview módban (body.kqf-preview-mode): méretspec látszik.
   ══════════════════════════════════════════════════════ */
.kqf-img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; width: 100%; padding: 0; text-align: center;
  background: var(--kqf-placeholder-bg, var(--kqf-bg, #0d0d1f));
  border: none; border-radius: 14px;
}
.kqf-img-placeholder__icon { display: none; }
.kqf-img-placeholder__size { display: none; }

body.kqf-preview-mode .kqf-img-placeholder {
  background: var(--kqf-placeholder-bg, #12102a);
  border: 2px dashed rgba(255,105,180,.3);
  padding: 20px; gap: 8px;
}
body.kqf-preview-mode .kqf-img-placeholder__icon { display: block; font-size: 28px; }
body.kqf-preview-mode .kqf-img-placeholder__size { display: block; font-size: 12px; color: #9a88c0; line-height: 1.5; }
body.kqf-preview-mode .kqf-img-placeholder__size strong { color: #ff69b4; display: block; font-size: 14px; }

.kqf-img-placeholder--sm      { min-height: 120px; border-radius: 10px; }
.kqf-img-placeholder--circle  { border-radius: 50%; width: 200px; height: 200px; }
.kqf-img-placeholder--portrait { min-height: 300px; }
.kqf-img-placeholder--fullwidth { border-radius: 0; min-height: 200px; }

/* ── Közös rács és szekció stílusok ── */
.kqfl-section-title { font-size: 1.1rem; font-weight: 600; color: var(--kqf-text); margin-bottom: 16px; }
.kqfl-section-title--center { text-align: center; }

.kqfl-product-grid { display: grid; gap: 16px; }
.kqfl-product-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kqfl-product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kqfl-product-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .kqfl-product-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .kqfl-product-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .kqfl-product-grid--2,
  .kqfl-product-grid--3,
  .kqfl-product-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════
   LAYOUT 1: HERO SPLIT
   ══════════════════════════════════════════════════════ */
.kqfl-herosplit { max-width: 100%; padding: 0; }

.kqfl-hs-banner {
  position: relative; width: 100%; height: 360px; overflow: hidden;
  background: var(--kqf-soft);
}
.kqfl-hs-banner__img { width: 100%; height: 100%; object-fit: cover; }
.kqfl-hs-banner__placeholder { height: 360px; border-radius: 0; border: none; background: #12102a; }
.kqfl-hs-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,20,.85) 0%, rgba(8,8,20,.2) 60%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px 40px;
}
.kqfl-hs-banner__title { font-size: 2.4rem; font-weight: 700; color: #fff; margin: 8px 0 0; line-height: 1.1; }

.kqfl-hs-body {
  display: flex; gap: 48px; align-items: flex-start;
  max-width: 1200px; margin: 0 auto; padding: 40px 32px 64px;
}
.kqfl-hs-body__text { flex: 0 0 300px; }
.kqfl-hs-body__desc { font-size: 15px; line-height: 1.6; color: var(--kqf-muted); }
.kqfl-hs-body__products { flex: 1; }

@media (max-width: 800px) {
  .kqfl-hs-body { flex-direction: column; gap: 24px; }
  .kqfl-hs-body__text { flex: none; }
  .kqfl-hs-banner { height: 220px; }
  .kqfl-hs-banner__title { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════════════
   LAYOUT 2: MAGAZINE
   ══════════════════════════════════════════════════════ */
.kqfl-magazine { max-width: 100%; padding: 0; }

.kqfl-mag-hero {
  display: flex; align-items: stretch; gap: 0;
  max-width: 1200px; margin: 0 auto; padding: 40px 32px;
  gap: 48px;
}
.kqfl-mag-hero__image {
  flex: 0 0 380px; position: relative; overflow: hidden; border-radius: 20px;
}
.kqfl-mag-hero__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.kqf-img-placeholder--portrait { height: 520px; }
.kqfl-mag-hero__content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.kqfl-mag-hero__title { font-size: 2rem; font-weight: 700; color: var(--kqf-text); margin: 8px 0 16px; line-height: 1.15; }
.kqfl-mag-hero__desc { font-size: 15px; line-height: 1.6; color: var(--kqf-muted); margin-bottom: 8px; }

.kqfl-mag-more { max-width: 1200px; margin: 0 auto; padding: 0 32px 48px; }

@media (max-width: 800px) {
  .kqfl-mag-hero { flex-direction: column; }
  .kqfl-mag-hero__image { flex: none; height: 300px; }
  .kqfl-mag-hero__image img, .kqf-img-placeholder--portrait { height: 300px; }
}

/* ══════════════════════════════════════════════════════
   LAYOUT 3: MINIMAL
   ══════════════════════════════════════════════════════ */
.kqfl-minimal { max-width: 860px; padding: 48px 24px 64px; }

.kqfl-min-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 16px; }
.kqfl-min-hero__img-wrap { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 3px solid var(--kqf-accent); margin-bottom: 8px; }
.kqfl-min-hero__img { width: 100%; height: 100%; object-fit: cover; }
.kqf-img-placeholder--circle { width: 200px; height: 200px; border-radius: 50%; }
.kqfl-min-hero__title { font-size: 2rem; font-weight: 700; color: var(--kqf-text); margin: 4px 0; }
.kqfl-min-hero__desc { font-size: 15px; line-height: 1.6; color: var(--kqf-muted); max-width: 560px; }
.kqfl-min-divider { height: 1px; background: rgba(255,255,255,.08); margin: 28px 0; }
.kqfl-min-products { }
.kqf-product-card--sm .kqf-product-card__title { font-size: .85rem; }

/* ══════════════════════════════════════════════════════
   LAYOUT 4: IMMERSIVE
   ══════════════════════════════════════════════════════ */
.kqfl-immersive { max-width: 100%; padding: 0; }

.kqfl-imm-hero {
  position: relative; width: 100%; min-height: 520px;
  background-size: cover; background-position: center;
  background-color: var(--kqf-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.kqfl-imm-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(8,8,20,.75) 0%, rgba(8,8,20,.55) 100%);
}
.kqfl-imm-hero__content {
  position: relative; z-index: 1; text-align: center;
  max-width: 680px; padding: 48px 32px;
}
.kqfl-imm-hero__title { font-size: 2.8rem; font-weight: 700; color: #fff; margin: 8px 0 16px; line-height: 1.1; }
.kqfl-imm-hero__desc { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.75); }

.kqfl-imm-products { max-width: 1200px; margin: 0 auto; padding: 36px 24px 0; }
.kqfl-imm-products__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kqfl-imm-products__all { font-size: 13px; color: var(--kqf-accent); text-decoration: none; }

.kqfl-imm-strip {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px;
  scrollbar-width: thin; scrollbar-color: #2a1a3a transparent;
}
.kqfl-imm-card {
  flex: 0 0 200px; text-decoration: none; color: var(--kqf-text);
  background: var(--kqf-soft); border-radius: 14px; padding: 12px;
  transition: transform .2s;
}
.kqfl-imm-card:hover { transform: translateY(-3px); }
.kqfl-imm-card__img { border-radius: 10px; overflow: hidden; height: 176px; background: #1a1535; margin-bottom: 10px; }
.kqfl-imm-card__img img { width: 100%; height: 100%; object-fit: cover; }
.kqfl-imm-card__name { font-size: .88rem; line-height: 1.4; margin-bottom: 4px; }
.kqfl-imm-card__price { font-weight: 600; color: var(--kqf-accent); font-size: .9rem; }

@media (max-width: 700px) {
  .kqfl-imm-hero__title { font-size: 1.8rem; }
  .kqfl-imm-hero { min-height: 380px; }
}


/* Kvíz navigáció – jól látható vissza gomb minden kérdésnél */
.kqf-nav .kqf-btn { min-width: 118px; }
.kqf-btn--ghost {
  background: rgba(255,255,255,.06);
  color: var(--kqf-text);
  border-color: rgba(255,105,180,.55);
}
.kqf-btn--ghost:hover,
.kqf-btn--ghost:focus-visible {
  background: rgba(255,105,180,.12);
  border-color: var(--kqf-accent);
  outline: none;
}
@media (max-width: 420px) {
  .kqf-nav .kqf-btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; }
}