/* ═══════════════════════════════════════════════════════════
   NOVES – Cenová ponuka (wizard formulár)
   Používa tokeny a triedy z style.css (--black, --accent, .btn, .form-input...)
   ═══════════════════════════════════════════════════════════ */

/* Klikateľné výberové karty/prvky – zabráni tomu, aby mobilný prehliadač
   pri ťuknutí označil text namiesto zaregistrovania kliknutia (výber sa
   potom nedal urobiť a namiesto toho vyskočilo "Kopírovať / Snímka obrazovky"). */
.qp-product,
.qp-choice,
.qp-type-toggle__btn,
.qp-addon,
.qp-addon__head,
.qp-color-tab,
.qp-color-swatch,
.qp-line-tab,
.qp-mini-swatch {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Úvodné poznámky nad formulárom ── */
.qp-intro {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}
.qp-intro__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
}
.qp-intro p { font-size: 18px; line-height: 1.65; margin-bottom: 26px; color: var(--charcoal); }
.qp-intro-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  background: var(--light-bg);
  border: 1px solid var(--border);
  padding: 28px 32px;
  border-radius: 8px;
}
.qp-intro-list li {
  font-size: 16px;
  color: var(--charcoal);
  padding-left: 24px;
  position: relative;
  line-height: 1.65;
}
.qp-intro-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.qp-intro-list a { color: var(--black); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Compact variant: intro shrinks into a slim two-column strip so the
   interactive panel below starts almost immediately ── */
.qp-intro--compact {
  max-width: 1080px;
  text-align: left;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 0 auto 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.qp-intro--compact .qp-intro__title { font-size: 22px; margin-bottom: 10px; }
.qp-intro--compact .qp-intro__main p { font-size: 15.5px; line-height: 1.6; margin-bottom: 0; color: var(--mid); }
.qp-intro-list--standalone {
  max-width: 980px;
  margin: 0 auto 28px;
}

/* ── Unified configurator panel: stepper + live recap + form all live
   inside one clearly-bounded card, so the tool reads as a single cohesive
   module right away instead of loose stacked sections ── */
.qp-panel {
  max-width: 980px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(26, 42, 94, 0.07);
  padding: 44px 48px 48px;
}
@media (max-width: 700px) {
  .qp-panel { padding: 28px 20px 32px; border-radius: 14px; }
}

/* ── STEPPER ──
   Moderný vzhľad: plynulý "vlákno" spájajúce krúžky (namiesto jednoduchej
   1px čiary), dokončené kroky dostanú fajočku namiesto čísla, aktívny krok
   má jemnú farebnú žiaru + je mierne väčší, hover je "nadnesenie" tieňom
   namiesto strohého scale(). */
.qp-stepper {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 64px;
  position: relative;
}
.qp-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  position: relative;
  flex: 1;
  text-align: center;
}
.qp-stepper__item::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  z-index: 0;
  transition: background var(--transition);
}
.qp-stepper__item:last-child::after { display: none; }
.qp-stepper__item.is-done::after { background: var(--accent); }
.qp-stepper__circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mid);
  position: relative;
  z-index: 1;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.qp-stepper__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  transition: var(--transition);
}
.qp-stepper__item.is-active .qp-stepper__circle {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(26,42,94,0.13), 0 6px 14px rgba(26,42,94,0.22);
}
.qp-stepper__item.is-active .qp-stepper__label { color: var(--black); font-weight: 700; }
.qp-stepper__item.is-done .qp-stepper__circle {
  border-color: var(--accent);
  background: var(--accent);
  color: transparent;
  box-shadow: 0 2px 6px rgba(245,196,0,0.35);
}
.qp-stepper__item.is-done .qp-stepper__circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.qp-stepper__item.is-done .qp-stepper__label { color: var(--black); }
/* Navštívený, ale ešte nevyplnený krok (pozri isStepFilled() v
   cenova-ponuka.js) – krížik namiesto fajky, nech je jasné, že sa tam treba
   vrátiť. */
.qp-stepper__item.is-invalid .qp-stepper__circle {
  border-color: #d64545;
  background: #d64545;
  color: transparent;
  box-shadow: 0 2px 6px rgba(214,69,69,0.35);
}
.qp-stepper__item.is-invalid .qp-stepper__circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.qp-stepper__item.is-invalid .qp-stepper__label { color: #d64545; }
.qp-stepper__item.is-clickable { cursor: pointer; }
.qp-stepper__item:not(.is-clickable) { cursor: default; }
.qp-stepper__item.is-clickable:hover .qp-stepper__circle {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(26,42,94,0.16);
}
.qp-stepper__item.is-clickable.is-active:hover .qp-stepper__circle { transform: scale(1.12) translateY(-2px); }
.qp-stepper__item.is-clickable:hover .qp-stepper__label { color: var(--black); }
.qp-stepper__item.is-clickable:focus-visible { outline: none; }
.qp-stepper__item.is-clickable:focus-visible .qp-stepper__circle {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .qp-stepper__label { display: none; }
  .qp-stepper { display: none; }
}

/* ── Mobilná náhrada steppera (text "Krok X z 11" + progress bar) ── */
.qp-stepper-mobile { display: none; }
@media (max-width: 700px) {
  .qp-stepper-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto 40px;
  }
}
.qp-stepper-mobile__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.qp-stepper-mobile__text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  text-align: center;
}
.qp-stepper-mobile__skip {
  position: absolute;
  right: 0;
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  cursor: pointer;
}
.qp-stepper-mobile__track {
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.qp-stepper-mobile__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--black));
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 9%;
}

/* ── Banner na obnovenie rozpracovaného dopytu (localStorage) ── */
.qp-draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 16px 20px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.qp-draft-banner__text { font-size: 14px; color: var(--black); }
.qp-draft-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.qp-draft-banner__actions .btn { padding: 10px 18px; font-size: 13px; }
@media (max-width: 500px) {
  .qp-draft-banner { flex-direction: column; align-items: stretch; }
  .qp-draft-banner__actions { justify-content: stretch; }
  .qp-draft-banner__actions .btn { flex: 1; }
}

/* ── LIVE SELECTION RECAP (progressively shows what's been clicked) ── */
.qp-live {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: -34px auto 44px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(26, 42, 94, 0.08);
  overflow: hidden;
}
.qp-live__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--light-bg);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
}
.qp-live__head svg { width: 15px; height: 15px; color: var(--black); flex-shrink: 0; }
.qp-live__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--black);
}
.qp-live__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qp-live__empty { font-size: 13px; color: var(--mid); font-style: italic; padding: 16px 22px; }

.qp-live__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  min-width: 0;
  border-top: 1px solid var(--border);
  animation: qpFadeIn 0.3s ease;
}
.qp-live__item:nth-child(-n+2) { border-top: none; }
.qp-live__item:nth-child(odd) { border-right: 1px solid var(--border); }
/* Ak je počet položiek nepárny, posledná by inak stála osamote v ľavom
   stĺpci s "visiacim" pravým okrajom – radšej nech zaberie celý riadok. */
.qp-live__item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
.qp-live__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border), 0 0 0 3px var(--white);
}
/* Farba zvonku/zvnútra sa líši – dve vzorky vedľa seba (mierne prekryté),
   namiesto jednej (predtým zavádzajúcej) vzorky. */
.qp-live__swatch-group { display: flex; flex-shrink: 0; }
.qp-live__swatch-group .qp-live__swatch:not(:first-child) { margin-left: -10px; }
.qp-live__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qp-live__item-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.qp-live__item-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.35;
}

@media (max-width: 700px) {
  .qp-live { margin-top: -24px; border-radius: 14px; }
  .qp-live__head { padding: 12px 18px; }
  .qp-live__items { grid-template-columns: 1fr; }
  .qp-live__item { padding: 12px 18px; border-right: none !important; }
  .qp-live__item:nth-child(-n+2) { border-top: 1px solid var(--border); }
  .qp-live__item:first-child { border-top: none; }
}

/* ── "Uložiť a pokračovať neskôr" – tlačidlo v paneli "Váš výber" +
   modálne okno na zadanie e-mailu (pozri save-draft.php). ── */
.qp-save-draft__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 14px 12px 12px;
  padding: 14px 22px;
  border: 1.5px dashed var(--black);
  border-radius: 12px;
  background: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  transition: var(--transition);
}
.qp-save-draft__toggle svg { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--black); }
.qp-save-draft__toggle:hover {
  border-style: solid;
  background: var(--black);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(26, 42, 94, 0.22);
}
.qp-save-draft__toggle:hover svg { stroke: var(--white); }

.qp-save-draft-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 55, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qp-save-draft-modal.is-open { display: flex; animation: qpModalFadeIn 0.2s ease; }
@keyframes qpModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qpModalPopIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.qp-save-draft-modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 20px;
  padding: 36px 32px 32px;
  text-align: center;
  box-shadow: 0 40px 90px rgba(15, 23, 55, 0.32);
  animation: qpModalPopIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qp-save-draft-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent), #ffd84d);
  color: var(--black);
}
.qp-save-draft-modal__icon svg { width: 24px; height: 24px; }
.qp-save-draft-modal__box h3 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--black);
  margin: 0 0 10px;
}
.qp-save-draft-modal__box p { font-size: 14px; color: var(--mid); line-height: 1.65; margin: 0 0 26px; }
.qp-save-draft-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  background: var(--light-bg);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--mid);
  cursor: pointer;
  transition: var(--transition);
}
.qp-save-draft-modal__close:hover { color: var(--black); background: var(--border); transform: rotate(90deg); }

.qp-save-draft-modal .qp-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; text-align: left; }
.qp-save-draft-modal .qp-field label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.qp-save-draft-modal__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.qp-save-draft-modal__input-wrap svg {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  stroke: var(--mid);
  pointer-events: none;
  transition: stroke var(--transition);
}
.qp-save-draft-modal .qp-field input {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 14px 46px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  background: var(--light-bg);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.qp-save-draft-modal .qp-field input::placeholder { color: var(--mid); font-weight: 400; }
.qp-save-draft-modal .qp-field input:focus { border-color: var(--black); background: var(--white); }
.qp-save-draft-modal__input-wrap:has(input:focus) svg { stroke: var(--black); }

.qp-save-draft-modal__msg { font-size: 13px; line-height: 1.5; margin: -10px 0 18px; text-align: left; }
.qp-save-draft-modal__msg.is-error { color: #9A2F26; }
.qp-save-draft-modal__msg.is-success { color: #1a7a3a; }
#qpSaveDraftSend {
  width: 100%;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s var(--transition), box-shadow 0.2s var(--transition), background var(--transition);
}
#qpSaveDraftSend svg { width: 16px; height: 16px; transition: transform 0.2s var(--transition); }
#qpSaveDraftSend:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(245, 196, 0, 0.35); }
#qpSaveDraftSend:hover:not(:disabled) svg { transform: translateX(3px); }

/* ── STEP PANELS ── */
.qp-step { display: none; }
.qp-step.is-active { display: block; animation: qpFadeIn 0.35s ease; }
@keyframes qpFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.qp-step__title { margin-bottom: 8px; }
/* Fokus sa sem pri zmene kroku presúva programovo (goToStep() v JS) kvôli
   prístupnosti pre klávesnicu a čítačky obrazovky – čítačka tak oznámi nový
   nadpis, aj keď sa nič vizuálne nezvýrazňuje. Obrys zámerne vypnutý. */
.qp-step__title:focus { outline: none; }
.qp-step__hint { margin-bottom: 36px; font-size: 14.5px; }

/* ── PRODUCT GRID (step 1) ── */
.qp-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 12px;
  align-items: start;
}
.qp-product {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--border);
  background: var(--white);
  padding: 24px 20px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.qp-product:hover { border-color: var(--mid); }
.qp-product.is-selected { border-color: var(--black); box-shadow: var(--shadow-card); }
.qp-product__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.qp-product.is-selected .qp-product__check { background: var(--black); border-color: var(--black); }
.qp-product__check svg { width: 11px; height: 11px; stroke: var(--white); fill: none; stroke-width: 2.4; opacity: 0; transition: var(--transition); }
.qp-product.is-selected .qp-product__check svg { opacity: 1; }
/* Karta produktu z už uzavretého kola (pridaná v predchádzajúcom prechode
   cez "Pridať ďalší produkt") – v kroku 3 sa má tváriť ako bežná,
   NEVYBRANÁ karta (žiadny zvýraznený rámik, žiadna vyplnená fajočka),
   aj keď je stále (funkčne) súčasťou dopytu. Klik na ňu aj tak pridá
   ďalší kus toho istého typu – len to vizuálne nevyzerá "predkliknuté".*/
.qp-product.is-selected.qp-product--already-added { border-color: var(--border); box-shadow: none; }
.qp-product.is-selected.qp-product--already-added .qp-product__check { background: transparent; border-color: var(--border); }
.qp-product.is-selected.qp-product--already-added .qp-product__check svg { opacity: 0; }
.qp-product.is-selected.qp-product--already-added .qp-product__fields { display: none; }
.qp-product.is-selected.qp-product--already-added .qp-product__options { display: none; }
.qp-product__icon { width: 92px; height: 92px; margin-bottom: 16px; color: var(--black); }
.qp-product__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.qp-product__icon img { width: 100%; height: 100%; object-fit: contain; }

/* Ikonky posuvných systémov (zdvižno-posuvné/PSK/klasické) sú širšie
   (viewBox 200x160) než štvorcové ikony okien/dverí – bez zväčšenia
   pôsobili v rovnakej 92px výške drobno. */
.qp-product[data-id="zdvizno-posuvne"] .qp-product__icon,
.qp-product[data-id="psk"] .qp-product__icon,
.qp-product[data-id="posuvne-klasicke"] .qp-product__icon { width: 130px; height: 104px; }
.qp-product__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 4px; display: block; line-height: 1.3; }
.qp-product__sub { font-size: 12px; color: var(--mid); display: block; line-height: 1.4; }
.qp-product input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

/* Keď má aktuálna kategória iba jeden výrobok (napr. "Dvere"), karta
   zaberie celý riadok mriežky – inak by ostala stlačená v jednom úzkom
   stĺpci so zvyškom riadku prázdny, a rozbalené voľby (kategória dverí,
   smer otvárania...) by pôsobili stiesnene namiesto plynulého rozbalenia
   nadol na plnú šírku. */
.qp-products--single .qp-product { grid-column: 1 / -1; }
.qp-products--single .qp-product__icon,
.qp-products--single .qp-product__title,
.qp-products--single .qp-product__sub { text-align: center; }
.qp-products--single .qp-product__icon { margin-left: auto; margin-right: auto; }

/* Keď je viditeľných menej výrobkov ako stĺpcov v mriežke (napr. 2-3 pri
   kategórii "Posuvné systémy"), karty by inak ostali zarovnané k ľavému
   okraju s prázdnym miestom vpravo – prepneme mriežku na flex a karty
   vycentrujeme. */
.qp-products--few {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.qp-products--few .qp-product { flex: 0 1 260px; }

/* Karta výrobku, pre ktorú pri aktuálne zvolenom materiáli neexistuje
   žiadny profil (napr. PSK + hliníkové) – nedá sa zvoliť, kým sa
   nezmení materiál v kroku 2. */
.qp-product--unavailable { opacity: 0.45; pointer-events: none; filter: grayscale(0.4); }
.qp-product__unavailable-note {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #b45309);
}
.qp-product--unavailable .qp-product__unavailable-note { display: block; }

.qp-product__fields {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.qp-product.is-selected .qp-product__fields { display: grid; }
.qp-product__fields .qp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qp-product__fields label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid); white-space: nowrap; }
.qp-product__fields input {
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 10px 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color var(--transition);
}
.qp-product__fields input:focus { border-color: var(--black); }

/* Hint s min/max rozsahom pod poľom (napr. pri zadávaní rozmerov) */
.qp-field__hint { font-size: 10.5px; color: var(--mid); line-height: 1.3; }
.qp-field--invalid input { border-color: #C6544A; background: #FCEDEB; }
.qp-field--invalid .qp-field__hint { color: #9A2F26; font-weight: 600; }

/* ── "Podstránka" kroku 3 pre Dvojkrídlové okno – po kliknutí na kartu sa
   namiesto rozbalenia v rámci karty zobrazí CELÝ obsah kroku 3 nahradený
   výberom kombinácie krídel (rovnaká vizuálna zmena ako pri prechode medzi
   krokmi, napr. Materiál → Konštrukcia), aj keď formálne ide stále o krok 3
   – pozri updateDvojkridloveSubview() v cenova-ponuka.js. */
.qp-step[data-step="3"].qp-step--subview > .qp-step__title,
.qp-step[data-step="3"].qp-step--subview > .qp-step__hint,
.qp-step[data-step="3"].qp-step--subview .qp-product:not(.is-selected) {
  display: none;
}
/* Odkedy okná zúžili na 3 karty (Jednokrídlové/Dvojkrídlové/Trojkrídlové),
   filterProductsByKategoria()/filterProductsByMaterial() pridávajú na
   #qpProducts triedu .qp-products--few (3 karty = "menej ako 4"), ktorá
   #qpProducts prepína z grid na flex s obmedzenou šírkou karty (flex: 0 1
   260px) – v podstránke to bránilo vybranej karte roztiahnuť sa na celú
   šírku (grid-column nemá vo flex kontajneri žiadny efekt). Kým je
   podstránka aktívna, #qpProducts preto vrátime naspäť na pôvodnú
   4-stĺpcovú grid mriežku bez ohľadu na few/single modifikátor. */
.qp-step[data-step="3"].qp-step--subview #qpProducts.qp-products--few,
.qp-step[data-step="3"].qp-step--subview #qpProducts.qp-products--single {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected {
  grid-column: 1 / -1;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  cursor: default;
}
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected:hover { border-color: transparent; }
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected > .qp-product__check,
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected > .qp-product__icon,
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected > .qp-product__title,
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected > .qp-product__sub,
.qp-step[data-step="3"].qp-step--subview .qp-product.is-selected > .qp-product__unavailable-note {
  display: none;
}
.qp-step[data-step="3"].qp-step--subview .qp-product__options { margin-top: 0; padding-top: 0; border-top: none; }
.qp-step[data-step="3"].qp-step--subview .qp-product__option-group { background: none; border: none; padding: 0; }
/* auto-fit namiesto auto-fill: pri málo dlaždiciach (napr. len 2 – Schéma
   A/C pri posuvných systémoch) auto-fill necháva prázdne, neobsadené
   stĺpce a celá skupina dlaždíc tak "zostane" pri ľavom okraji namiesto
   toho, aby sa rovnomerne roztiahla/vycentrovala na šírku karty; auto-fit
   prázdne stĺpce zbalí a nechá existujúce dlaždice vyplniť priestor. Pri
   grafoch s dostatkom dlaždíc (jednokrídlové okno a pod.) sa správanie
   nemení. */
.qp-step[data-step="3"].qp-step--subview .qp-product__icon-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.qp-step[data-step="3"].qp-step--subview .qp-product__icon-tile { padding: 16px 12px 14px; }
.qp-step[data-step="3"].qp-step--subview .qp-product__icon-tile-icon img { width: 92px; height: 92px; }
/* Schémy posuvných systémov (Konštrukcia – Schéma A/C) sú detailné
   obrázkové nákresy, nie jednoduché líniové ikony – väčšia veľkosť ako
   ostatné dlaždice, s object-fit: contain (pozri base pravidlo vyššie)
   zachovávajúcim pomer strán bez orezania/skreslenia. Namiesto 3 dlaždíc
   v jednom (užšom) riadku sú Schéma A/A-zrkadlovo v prvom riadku (2
   stĺpce) a Schéma C (prípadne ďalšie) samostatne centrovaná v druhom –
   všetky tak môžu byť väčšie. */
.qp-step[data-step="3"].qp-step--subview .qp-product[data-kategoria="posuvne"] .qp-product__icon-grid {
  grid-template-columns: repeat(2, 1fr);
}
.qp-product[data-kategoria="posuvne"] .qp-product__icon-grid .qp-product__icon-tile:nth-child(2n+1):last-child {
  grid-column: 1 / -1;
  justify-self: center;
}
.qp-product[data-kategoria="posuvne"] .qp-product__icon-tile-icon img { width: 420px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; }
.qp-step[data-step="3"].qp-step--subview .qp-product[data-kategoria="posuvne"] .qp-product__icon-tile-icon img { width: 420px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; }
.qp-step[data-step="3"].qp-step--subview .qp-product__icon-tile-label { font-size: 12px; }
.qp-step[data-step="3"].qp-step--subview .qp-product__icon-tile-sub { font-size: 10.5px; }
.qp-product__options-page-head { margin-bottom: 8px; }
.qp-product__options-page-head .qp-step__hint { margin-bottom: 0; }

/* Tlačidlo "Chcem si nastaviť krídla samostatne (konfigurátor)" – rýchly
   výber obľúbených kombinácií (dvoj-/trojkrídlové okno) je vždy viditeľný,
   samotný konfigurátor (mriežky Ľavé/Stredné/Pravé krídlo + živý náhľad,
   .qp-configurator nižšie) je skrytý za týmto tlačidlom, pozri
   bindProductCardListeners() v cenova-ponuka.js. */
.qp-configurator-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  border: 2px dashed var(--black);
  border-radius: 12px;
  background: var(--white);
  padding: 15px 19px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  transition: var(--transition);
}
.qp-configurator-toggle:hover { border-style: solid; border-color: var(--black); color: var(--black); background: var(--light-bg); }
.qp-configurator-toggle.is-open { border-style: solid; border-color: var(--black); color: var(--black); background: var(--light-bg); }
.qp-configurator { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
/* Poistka: [hidden] samo osebe už raz v tomto súbore prehralo na
   špecifickosti s iným pravidlom nastavujúcim display (pozri komentáre pri
   .qp-wing-preview[hidden] vyššie) – radšej vynútiť skryté ako nechať
   konfigurátor zobrazený skôr, než naň zákazník klikne. */
.qp-configurator[hidden] { display: none !important; }

/* Živý náhľad výsledného trojkrídlového okna (mení sa podľa zvolenej
   kombinácie Ľavé/Stredné/Pravé krídlo – pozri updateTrojkridlovePreview()
   v cenova-ponuka.js) – zobrazí sa úplne hore, nad tromi mriežkami výberu. */
.qp-wing-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--light-bg);
  text-align: center;
}
/* [hidden] samo o sebe by tu prehralo na špecifickosti s
   .qp-wing-preview{display:flex} vyššie (pred prvým JS prepočtom je náhľad
   skrytý cez atribút hidden priamo v šablóne). */
.qp-wing-preview[hidden] { display: none; }
.qp-wing-preview__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid); margin-bottom: 14px; }
.qp-wing-preview img { display: block; max-width: 100%; width: auto; height: auto; max-height: 220px; margin: 0 auto; }

/* ── Rozbaliteľné voľby priamo v karte produktu (napr. typ otvárania,
   kombinácia krídel, smer otvárania/kategória a typ krídla pri dverách).
   Každá skupina je samostatná "kartička", nie jeden zlepený blok. ── */
.qp-product--expandable .qp-product__sub { margin-bottom: 2px; }
.qp-product__options {
  display: none;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.qp-product.is-selected .qp-product__options { display: flex; }
.qp-product__option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
}
.qp-product__option-group.is-hidden { display: none; }
/* Generický "show_if" prepínač (updateConditionalGroups() v cenova-ponuka.js)
   sa dá naviazať na ĽUBOVOĽNÝ prvok s data-show-if-name, nielen na
   .qp-product__option-group (napr. rýchly výber/konfigurátor pri Stĺpik/
   Štulp voľbe dvoj-/trojkrídlového okna) – táto dvojtriedová špecifickosť
   spoľahlivo prebije akékoľvek vlastné display:… pravidlo daného prvku. */
[data-show-if-name].is-hidden.is-hidden { display: none; }
/* Štulpový stĺpik: vedľajšie krídlo dvojice nesmie byť Sklopné ani
   Otváravo-sklopné – dané dlaždice sa skryjú (pozri applyWingRestriction()
   v cenova-ponuka.js). */
.qp-product__opt-btn--restricted { display: none; }
.qp-product__option-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.qp-product__radio-row { display: flex; flex-direction: column; gap: 8px; }
.qp-product__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--charcoal);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--white);
  box-sizing: border-box;
}
.qp-product__radio::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  transition: var(--transition);
}
.qp-product__radio:hover { border-color: var(--mid); }
.qp-product__opt-btn input { position: absolute; opacity: 0; pointer-events: none; }
/* Skryté pomocné pole (napr. trojkridlove_stulpove_side) – slúži iba na
   riadenie show_if podmienok v JS, nikdy nie je vidno ani klikateľné. */
.qp-visually-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qp-product__radio:has(input:checked),
.qp-product__radio.is-checked { border-color: var(--black); background: var(--black); color: var(--white); }
.qp-product__radio:has(input:checked)::before,
.qp-product__radio.is-checked::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--black); }

/* Segmentovaný prepínač (2 veľké možnosti s ikonou – Kategória, Smer otvárania) */
.qp-product__segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qp-product__segmented-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  text-align: center;
}
.qp-product__segmented-btn:hover { border-color: var(--mid); }
.qp-product__segmented-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qp-product__segmented-icon img { width: 22px; height: 22px; object-fit: contain; }
.qp-product__segmented-btn span:last-child { font-size: 12.5px; font-weight: 600; }
.qp-product__segmented-btn:has(input:checked),
.qp-product__segmented-btn.is-checked { border-color: var(--black); background: var(--black); color: var(--white); }

/* Štulpové vyhotovenie dvoj-/trojkrídlového okna je konštrukčne dostupné
   iba pre plastové profily – pri hliníkovom materiáli sa táto možnosť
   rovno zablokuje (pozri material listener v cenova-ponuka.js), nech na
   ňu zákazník ani neklikne namiesto toho, aby zvolený produkt po chvíli
   sám zmizol z ponuky. */
.qp-product__segmented-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: var(--light-bg);
}
.qp-product__segmented-btn.is-disabled:hover { border-color: var(--border); }

/* Mriežka ikon (Typ krídla – viac možností s náhľadovou ikonkou).
   Pevné 2 stĺpce (nie auto-fill podľa šírky) – karta produktu je len
   1/4 riadku, takže pri auto-fill s minmax(108px,…) by sa pri užších
   kartách (napr. Trojkrídlové okno s 3 skupinami × 4 dlaždice) mriežka
   zbalila do jedného stĺpca a celá karta by sa neprirodzene naťahovala
   nadol – pozri qp-product__option-group nižšie. */
.qp-product__icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* Rýchly výber trojkrídlového štulpového okna – 16 dlaždíc = 4 typy × 4
   varianty voľného krídla (Otváravé/Otváravo-sklopné/Sklopné/Pevné).
   Vynútené 4 stĺpce, aby každý riadok zobrazoval presne jeden Typ (Typ 1
   riadok 1, Typ 2 riadok 2 atď.) namiesto toho, aby sa auto-fill mriežka
   (pozri .qp-step--subview nižšie) natiahla na iný počet stĺpcov a
   poprepletala varianty rôznych typov naprieč riadkami. Scopnuté len na
   kartu "trojkridlove" – dvojkrídlové štulpové okno používa rovnaký
   data-role="preset-grid-stulp", ale má len 4 dlaždice (Typ 1-4, žiadne
   varianty), kde by vynútenie 4 stĺpcov znamenalo jeden riadok namiesto
   pôvodnej mriežky. */
.qp-product[data-id="trojkridlove"] [data-role="preset-grid-stulp"] .qp-product__icon-grid { grid-template-columns: repeat(4, 1fr); }
.qp-step[data-step="3"].qp-step--subview .qp-product[data-id="trojkridlove"] [data-role="preset-grid-stulp"] .qp-product__icon-grid { grid-template-columns: repeat(4, 1fr); }
.qp-product__icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 6px 8px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  background: var(--white);
}
.qp-product__icon-tile:hover { border-color: var(--mid); }
.qp-product__icon-tile-icon svg { width: 68px; height: 68px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qp-product__icon-tile-icon img { width: 68px; height: 68px; object-fit: contain; }

/* Väčšie ikonky typu krídla len pri dverách (kvôli čitateľnosti bočných/horných svetlíkov) */
.qp-product[data-kategoria="dvere"] .qp-product__icon-tile-icon svg { width: 100px; height: 100px; }
.qp-product[data-kategoria="dvere"] .qp-product__icon-tile-icon img { width: 100px; height: 100px; }
.qp-product__icon-tile-label { font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.qp-product__icon-tile-sub { font-size: 9.5px; line-height: 1.25; opacity: .7; }
.qp-product__icon-tile:has(input:checked) .qp-product__icon-tile-sub,
.qp-product__icon-tile.is-checked .qp-product__icon-tile-sub { opacity: .85; }
.qp-product__icon-tile:has(input:checked),
.qp-product__icon-tile.is-checked { border-color: var(--black); background: var(--black); color: var(--white); }

/* Vedľajšie (nehlavné) krídlo štulpového okna – namiesto výberu zo 4
   ikoniek sa zobrazí len jedna pevná (Otváravé), keďže iné aj tak nie sú
   povolené. Karta stratí interaktívny vzhľad (bez rámika/hoveru/kurzora),
   ikona sa podľa strany zrkadlovo otočí (viď .qp-product__opt-btn--mirrored). */
.qp-product__icon-tile.qp-product__opt-btn--locked-single {
  cursor: default;
  border-color: transparent;
  background: none;
  padding: 4px 6px 8px;
}
.qp-product__icon-tile.qp-product__opt-btn--locked-single:hover { border-color: transparent; }
.qp-product__icon-tile.qp-product__opt-btn--locked-single .qp-product__icon-tile-icon svg {
  width: 32px;
  height: 32px;
}
.qp-product__icon-tile.qp-product__opt-btn--locked-single.qp-product__opt-btn--mirrored .qp-product__icon-tile-icon svg {
  transform: scaleX(-1);
}

/* Kompaktnejšia "kartička" skupiny volieb, keď je vo vnútri viac skupín
   za sebou (napr. 3× Ľavé/Stredné/Pravé krídlo pri trojkrídlovom okne) –
   menší padding a medzera šetria výšku. */
.qp-product__options:has(.qp-product__option-group + .qp-product__option-group + .qp-product__option-group) .qp-product__option-group {
  padding: 10px 12px 12px;
  gap: 7px;
}
.qp-product__options:has(.qp-product__option-group + .qp-product__option-group + .qp-product__option-group) { gap: 10px; }

.qp-product__select {
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--charcoal);
  background: var(--white);
  width: 100%;
  outline: none;
  transition: border-color var(--transition);
}
.qp-product__select:focus { border-color: var(--black); }

@media (max-width: 560px) {
  .qp-product__segmented { grid-template-columns: 1fr 1fr; }
  .qp-product__icon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) { .qp-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .qp-products { grid-template-columns: 1fr; }
  /* Šírka + Výška vedľa seba (prirodzená dvojica), Počet pod nimi na
     celú šírku – pôvodných 3 stĺpce vedľa seba boli na mobile príliš
     úzke, hint text ("Min. 400 mm · Max. 2400 mm") sa škaredo lámal. */
  .qp-product__fields { grid-template-columns: repeat(2, 1fr); }
  .qp-product__fields .qp-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .qp-product__fields { grid-template-columns: 1fr; }
  .qp-product__fields .qp-field:last-child { grid-column: auto; }
}

/* ── CHOICE GRID (step 2 – materiál, kontakt preferencia) ── */
.qp-type-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.qp-type-toggle__btn {
  display: block;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  padding: 40px 28px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.3s var(--transition), box-shadow 0.3s var(--transition), border-color var(--transition), background var(--transition);
}
.qp-type-toggle__btn:hover { border-color: var(--mid); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(26,42,94,0.1); }
.qp-type-toggle__btn.is-selected { border-color: var(--black); background: var(--black); box-shadow: 0 20px 40px rgba(26,42,94,0.16); }
.qp-type-toggle__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--light-bg);
  margin: 0 auto 20px;
  transition: background var(--transition);
}
.qp-type-toggle__btn.is-selected .qp-type-toggle__icon-wrap { background: var(--white); }
.qp-type-toggle__icon { display: block; width: 72px; height: 72px; color: var(--charcoal); }
.qp-type-toggle__btn.is-selected .qp-type-toggle__icon { color: var(--black); }
.qp-type-toggle__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.qp-type-toggle__icon img { width: 100%; height: 100%; object-fit: contain; }

/* Ikona Posuvné systémy je reálna fotka (nie kreslená SVG) – kruh je preto
   väčší a fotka ho vyplní celý (object-fit: cover) namiesto dopasovania. */
.qp-type-toggle__icon-wrap--photo { width: 150px; height: 150px; overflow: hidden; }
.qp-type-toggle__icon--photo { width: 100%; height: 100%; }
.qp-type-toggle__icon--photo img { object-fit: cover; border-radius: 50%; }
.qp-type-toggle__title { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--black); margin-bottom: 6px; }
.qp-type-toggle__btn.is-selected .qp-type-toggle__title { color: var(--white); }
.qp-type-toggle__sub { display: block; font-size: 12.5px; color: var(--mid); }
.qp-type-toggle__btn.is-selected .qp-type-toggle__sub { color: rgba(255,255,255,0.55); }
.qp-step__title--sub { font-size: 19px; margin-bottom: 20px; }
@media (max-width: 900px) { .qp-type-toggle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .qp-type-toggle { grid-template-columns: 1fr; } }

.qp-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 640px; margin: 0 auto; }
/* Krok Montáž/Demontáž nemá medzi nadpisom a voľbami žiadny .qp-step__hint
   (na rozdiel od ostatných krokov, kde ten odstup vytvára) – doplníme ho
   priamo. */
#qpMontazGrid { margin-top: 24px; }

/* Variant s 3 možnosťami vedľa seba (napr. otázka demontáže) */
.qp-choice-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 880px; }

/* Variant so 4 možnosťami vedľa seba (výplň dverí: Dvojsklo / Trojsklo /
   Panel / GAVA) */
.qp-choice-grid--four { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }

.qp-choice {
  display: block;
  border: 1.5px solid var(--border);
  background: var(--white);
  padding: 28px 22px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.qp-choice:hover { border-color: var(--mid); }
.qp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.qp-choice.is-selected { border-color: var(--black); background: var(--black); }
.qp-choice.is-selected .qp-choice__title,
.qp-choice.is-selected .qp-choice__sub { color: var(--white); }
.qp-choice.is-selected .qp-choice__sub { color: rgba(255,255,255,0.55); }
.qp-choice__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--black); display: block; margin-bottom: 6px; }
.qp-choice__sub { font-size: 12.5px; color: var(--mid); display: block; }

/* Krok "Vyberte materiál" – Plastové/Hliníkové sú len dve veľké karty na
   celý riadok, nadpis preto môže byť výraznejšie väčší ako pri bežných
   voľbách (montáž a pod.), ktoré zdieľajú rovnakú .qp-choice triedu. */
.qp-choice[data-group="material"] .qp-choice__title { font-size: 22px; margin-bottom: 8px; }
.qp-choice[data-group="material"] .qp-choice__sub { font-size: 14px; }

@media (max-width: 700px) { .qp-choice-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) and (min-width: 701px) { .qp-choice-grid--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) and (min-width: 701px) { .qp-choice-grid--four { grid-template-columns: repeat(2, 1fr); } }

/* ── Per-produkt bloky (kroky 4–6: Typ/profil, Rozmery, Sklo) – tieto
   kroky sa nastavujú samostatne pre KAŽDÝ zvolený produkt z kroku 3,
   preto sa jeho výber opakuje v samostatnej "kartičke" so záhlavím. ── */
.qp-per-product { margin-bottom: 36px; }
.qp-per-product:last-child { margin-bottom: 0; }
.qp-per-product__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Rozmery mimo karty produktu (krok 5) – rovnaký vzhľad polí, len bez
   podmieneného display:none naviazaného na .qp-product.is-selected. */
.qp-product__fields--standalone {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 560px) {
  .qp-product__fields--standalone { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .qp-product__fields--standalone .qp-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .qp-product__fields--standalone { grid-template-columns: 1fr; }
  .qp-product__fields--standalone .qp-field:last-child { grid-column: auto; }
}

/* Voliteľné potvrdenie neštandardných rozmerov (krok 5) – pod trojicou
   polí šírka/výška/počet, rovnaký vzhľad ako GDPR checkbox nižšie vo
   formulári (form-group--checkbox v style.css). */
.qp-field__override { margin-top: 22px; }
.qp-field__override input[type="checkbox"] { width: 18px; height: 18px; }
.qp-field__override label { font-size: 14.5px; font-weight: 600; color: var(--black); line-height: 1.5; }

/* "Nepoznám presné rozmery – prosím o zameranie" (krok 8) – zvýraznené
   tlačidlo/prepínač nad poľami šírka/výška; po zaškrtnutí sa polia šírka,
   výška a checkbox "mimo limitu" skryjú (viď .qp-per-product--zameranie
   nižšie), keďže ich vyplnenie stráca zmysel. */
.qp-zameranie-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.qp-zameranie-row .qp-zameranie-toggle { flex: 1 1 220px; margin-bottom: 0; }
.qp-zameranie-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--light-bg);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--black);
  transition: border-color var(--transition), background var(--transition);
}
.qp-zameranie-toggle:hover { border-color: var(--mid); }
.qp-zameranie-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.qp-zameranie-toggle input[type="checkbox"]:hover { border-color: var(--mid); }
.qp-zameranie-toggle input[type="checkbox"]:checked {
  background: var(--black);
  border-color: var(--black);
}
.qp-zameranie-toggle input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.qp-per-product--zameranie .qp-zameranie-toggle { border-color: var(--black); background: var(--white); box-shadow: 0 4px 14px rgba(26,42,94,0.08); }
.qp-per-product--zameranie [data-role="dims-fields"] [data-role="width-field"],
.qp-per-product--zameranie [data-role="dims-fields"] [data-role="height-field"],
.qp-per-product--zameranie [data-role="override-group"] { display: none; }
.qp-per-product--zameranie [data-role="rozna-sirka-toggle-wrap"],
.qp-per-product--zameranie [data-role="wing-widths"] { display: none; }

/* Dvojkrídlové/trojkrídlové okná – prepínač "Krídla majú rôznu šírku"
   (krok 8) nahradí jedno pole "Šírka" 2–3 poľami podľa krídla; súčet sa
   dopočíta automaticky (pozri recalcWingWidths() v cenova-ponuka.js).
   Zámerne prepínané cez triedu na .qp-per-product (rovnaký princíp ako
   .qp-per-product--zameranie vyššie), NIE cez atribút [hidden] – ten by tu
   prehral na špecifickosti s .qp-product__fields--standalone/.qp-field
   (obe nastavujú display), takže by sa nezobrazoval/skrýval spoľahlivo. */
.qp-per-product--rozna-sirka [data-role="rozna-sirka-toggle-wrap"] { border-color: var(--black); background: var(--white); box-shadow: 0 4px 14px rgba(26,42,94,0.08); }
.qp-wing-widths.qp-wing-widths { display: none; }
.qp-per-product--rozna-sirka [data-role="dims-fields"] [data-role="width-field"] { display: none; }
/* Pri "Krídla majú rôznu šírku" tvoria Výška/Počet a Ľavé/Pravé krídlo
   jeden vizuálne súvislý celok (spoločný rámček) namiesto dvoch
   samostatných políčok nad sebou – pole Šírka je skryté (nahradené
   súčtom krídel), takže v hornej časti ostávajú len Výška a Počet. */
.qp-per-product--rozna-sirka [data-role="dims-fields"] {
  padding: 18px 18px 14px;
  border: 1.5px solid var(--black);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--white);
}
.qp-per-product--rozna-sirka [data-role="wing-widths"].qp-wing-widths {
  display: grid;
  margin-top: 0;
  padding: 4px 18px 16px;
  background: var(--white);
  border: 1.5px solid var(--black);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 14px rgba(26, 42, 94, 0.06);
}
.qp-wing-widths .qp-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid); }
.qp-wing-widths__total {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--light-bg);
  font-size: 13.5px;
  color: var(--mid);
}
.qp-wing-widths__total strong { color: var(--black); font-family: var(--font-display); }
.qp-wing-widths__total--invalid { color: #9A2F26; font-weight: 600; background: #FBEAE8; }
.qp-wing-widths__total--invalid strong { color: #9A2F26; }
.qp-wing-widths__hint { color: #9A2F26; font-weight: 600; }

/* Sklo (krok 6) – rovnaká dvojstĺpcová voľba ako .qp-choice-grid, len
   o niečo kompaktnejšia, keďže sa môže opakovať pre viac produktov. */
.qp-choice-grid--sklo { max-width: none; margin: 0; gap: 14px; }
.qp-choice-grid--sklo .qp-choice { padding: 20px 18px; }

/* Typ (vzor) skla – podnadpis vnútri kartičky produktu + swatch grid
   zhodný s výberom farby (krok 5), len bez centrovania (max-width: none),
   keďže sa opakuje pre každý produkt zvlášť. */
.qp-per-product__subtitle {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin: 22px 0 6px;
}
.qp-glass-grid { justify-content: flex-start; max-width: none; margin-bottom: 0; }
.qp-glass-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--mid);
}
.qp-glass-current__label strong { color: var(--black); }
.qp-glass-current__change {
  flex-shrink: 0;
  border: 1.5px solid var(--black);
  background: var(--white);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  transition: var(--transition);
}
.qp-glass-current__change:hover { background: var(--black); color: var(--white); }
.qp-gava-link { margin-top: 6px; }
.qp-glass-swatch__frame--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--off-white, #f4f4f4);
  border: 1px dashed var(--border);
  font-size: 11px;
  color: var(--charcoal);
  text-align: center;
  padding: 6px;
}

/* Keď je k dispozícii iba jedna možnosť (napr. profil Genesis 75 – iba
   trojsklo), nech je vycentrovaná ako kompaktná kartička namiesto toho,
   aby zostala pritlačená k ľavému okraju dvojstĺpcovej mriežky. */
.qp-choice-grid--single { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }

/* Profil/typ s fotkou (krok 4) */
.qp-profile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.qp-profile-card {
  display: block;
  flex: 0 1 200px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 14px 14px 16px;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qp-profile-card:hover { border-color: var(--mid); }
.qp-profile-card.is-selected { border-color: var(--black); box-shadow: var(--shadow-card); }
.qp-profile-card input { position: absolute; opacity: 0; pointer-events: none; }
.qp-profile-card__frame {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--light-bg);
  margin-bottom: 12px;
}
.qp-profile-card__frame img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.qp-profile-card__title { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.qp-profile-card__sub { display: block; font-size: 11.5px; color: var(--mid); line-height: 1.4; }
.qp-profile-card.is-selected .qp-profile-card__title { color: var(--black); }

@media (max-width: 700px) {
  .qp-profile-card { flex-basis: calc(50% - 8px); }
  .qp-choice-grid--sklo { grid-template-columns: 1fr; }
}

/* ── COLOR STEP (step 3) – reuses .color-swatch-grid / .color-swatch ── */
.qp-color-swatch { position: relative; display: block; }
.qp-color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.qp-color-swatch .color-swatch__frame {
  display: block;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,30,70,0.08);
  transition: var(--transition);
}
.qp-color-swatch:hover .color-swatch__frame { box-shadow: 0 6px 18px rgba(20,30,70,0.16); }
.qp-color-swatch.is-selected .color-swatch__frame { box-shadow: 0 0 0 2px var(--black), 0 6px 18px rgba(20,30,70,0.16); }
.qp-color-swatch.is-selected .color-swatch__name { color: var(--black); font-weight: 700; }

/* Lupa (zväčšovacie sklo) zo style.css je v strede a veľká a je to len
   dekoratívny ::after (nedá sa naň kliknúť) – preto tu nefungovala.
   Na tejto stránke ju schovávame a namiesto nej používame skutočné
   klikateľné tlačidlo .color-swatch__zoom (rovnaký princíp ako funkčná
   .qp-mini-swatch__zoom), malé, v pravom hornom rohu. Na iných stránkach
   (napr. okna-plastove.php) ostáva pôvodná veľká centrovaná lupa. */
.qp-color-swatch .color-swatch__frame::after {
  content: none;
}
.qp-color-swatch .color-swatch__frame {
  position: relative;
}
.color-swatch__zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(20,30,70,0.25);
  color: var(--charcoal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: var(--transition);
}
.qp-color-swatch:hover .color-swatch__zoom { transform: scale(1); }
.color-swatch__zoom:hover { background: var(--white); color: var(--black); }
.color-swatch__zoom svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Na zariadeniach so skutočným hoverom (myš na PC/notebooku) je lupa
   viditeľná až pri prejdení myšou nad vzorkou – na dotykových zariadeniach
   (mobil/tablet, kde hover nefunguje) ostáva vždy viditeľná ako doteraz,
   inak by ju tam používateľ nemal ako objaviť. */
@media (hover: hover) and (pointer: fine) {
  .color-swatch__zoom { opacity: 0; transform: scale(0.85); }
  .qp-color-swatch:hover .color-swatch__zoom { opacity: 1; transform: scale(1); }
}

/* Na dotykových zariadeniach nemá zmysel zmenšovať tlačidlo lupy na 26px
   (ako pri myši, kde je vždy dobre "mieriteľné") – prst potrebuje väčší
   cieľ, inak sa ľahko netrafí alebo sa omylom klikne na susednú vzorku. */
@media (hover: none) and (pointer: coarse) {
  .color-swatch__zoom { width: 36px; height: 36px; top: 6px; right: 6px; transform: none; }
  .color-swatch__zoom svg { width: 16px; height: 16px; }
}

.color-swatch__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  line-height: 1.4;
}
.qp-color-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  row-gap: 20px;
  margin-bottom: 4px;
}
.qp-color-grid .qp-color-swatch {
  flex: 0 1 calc((100% - 5 * 14px) / 6);
  max-width: calc((100% - 5 * 14px) / 6);
}
.color-swatch__name { min-height: 26px; font-size: 12px; }
@media (max-width: 900px) {
  .qp-color-grid .qp-color-swatch { flex-basis: calc((100% - 3 * 14px) / 4); max-width: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 560px) {
  .qp-color-grid { gap: 10px; row-gap: 16px; }
  .qp-color-grid .qp-color-swatch { flex-basis: calc((100% - 2 * 10px) / 3); max-width: calc((100% - 2 * 10px) / 3); }
}
.qp-color-check-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: var(--transition);
}
.qp-color-check-inline svg { width: 9px; height: 9px; stroke: var(--black); fill: none; stroke-width: 3.4; }
.qp-color-swatch.is-selected .qp-color-check-inline { opacity: 1; transform: scale(1); }
.qp-color-note { font-size: 13px; color: var(--mid); margin-top: -8px; margin-bottom: 20px; }

/* ── Prepínač: rovnaká farba zvnútra aj zvonku ── */
.qp-color-same {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.qp-color-same__label { font-size: 15px; font-weight: 700; color: var(--black); }
.qp-color-same__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.qp-color-same__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: 24px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qp-color-same__opt:hover { border-color: var(--mid); }
.qp-color-same__opt input { position: absolute; opacity: 0; pointer-events: none; }
.qp-color-same__opt:has(input:checked),
.qp-color-same__opt.is-checked { border-color: var(--black); background: var(--black); color: var(--white); box-shadow: 0 8px 20px rgba(26,42,94,0.18); }

.qp-color-side { display: none; margin-bottom: 0; }
.qp-color-side.is-active-side { display: block; animation: qpFadeIn 0.25s ease; }
.qp-color-side__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.qp-color-side__title--standalone { display: none; margin: 0 0 20px; }
.qp-color-side__title--standalone.is-active-side { display: block; }
.qp-color-side__note {
  display: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--mid);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}
.qp-color-side__note.is-visible { display: inline; }

/* ── Prepínač Zvonku / Zvnútra (viditeľná vždy len jedna paleta) ── */
.qp-color-side-switch { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }
.qp-color-side-switch.is-hidden { display: none; }
.qp-color-side-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
  transition: var(--transition);
}
.qp-color-side-switch__btn:hover { border-color: var(--mid); }
.qp-color-side-switch__btn.is-active { border-color: var(--black); background: var(--black); color: var(--white); box-shadow: 0 10px 24px rgba(26,42,94,0.18); }
.qp-color-side-switch__check {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  transition: var(--transition);
}
.qp-color-side-switch__check svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 3.4; opacity: 0; }
.qp-color-side-switch__check.is-filled { opacity: 1; border-color: var(--accent); background: var(--accent); color: var(--black); }
.qp-color-side-switch__btn.is-active .qp-color-side-switch__check.is-filled { color: var(--black); }
.qp-color-side-switch__check.is-filled svg { opacity: 1; }
@media (max-width: 500px) {
  .qp-color-side-switch { flex-direction: column; }
  .qp-color-side-switch__btn { width: 100%; justify-content: center; }
}

/* ── Color preview panel ── */
.qp-color-preview-group {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}
.qp-color-preview {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  transition: var(--transition);
}
@media (max-width: 700px) {
  .qp-color-preview-group { flex-direction: column; }
}
.qp-color-preview__empty {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--mid);
}
.qp-color-preview__empty-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.qp-color-preview__empty-text { display: flex; flex-direction: column; gap: 4px; }
.qp-color-preview__empty-text .qp-color-preview__label { margin-bottom: 0; }
.qp-color-preview__empty-desc { line-height: 1.5; }
.qp-color-preview__empty-icon svg { width: 15px; height: 15px; stroke: var(--mid); fill: none; stroke-width: 1.6; }
.qp-color-preview__swatch {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(20,30,70,0.12);
}
.qp-color-preview__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qp-color-preview__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); margin-bottom: 3px; display: block; }
.qp-color-preview__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--black); display: block; }
.qp-color-preview__group { font-size: 12px; color: var(--mid); margin-top: 1px; display: block; }

/* ── Category tabs (vizuálne zladené s .qp-color-side-switch__btn vyššie) ── */
.qp-color-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.qp-color-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.qp-color-tab:hover { border-color: var(--mid); background: var(--white); color: var(--charcoal); }
.qp-color-tab.active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(26,42,94,0.18);
}
.qp-color-tab__count {
  display: inline-block;
  opacity: 0.6;
  font-weight: 500;
}

/* ── Category panels ── */
.qp-color-panel { display: none; }
.qp-color-panel.is-active { display: block; animation: qpFadeIn 0.3s ease; }
.qp-color-grid { margin-bottom: 8px; }

@media (max-width: 700px) {
  .qp-color-preview { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ── ADDONS (step 4) ── */
.qp-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; }
/* Poradie doplnkov (podľa poradia v $doplnky, riadok po riadku, 2 stĺpce):
   1) vonkajšie/vnútorné parapety, 2) vnútorné/vonkajšie žalúzie a rolety,
   3) kľučka / sieťky proti hmyzu. */
.qp-addon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px solid var(--border);
  padding: 18px 20px;
  cursor: pointer;
  transition: var(--transition);
}
.qp-addon:hover { border-color: var(--mid); }
.qp-addon.is-selected { border-color: var(--black); background: var(--light-bg); }
.qp-addon input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--black); flex-shrink: 0; }
.qp-addon__title { font-size: 14px; font-weight: 600; color: var(--black); display: block; margin-bottom: 3px; }
.qp-addon__sub { font-size: 12.5px; color: var(--mid); display: block; }
@media (max-width: 700px) { .qp-addons { grid-template-columns: 1fr; } }

/* ── Kovanie kľučky (dvere, krok 8) ── */
.qp-addon-section { margin-bottom: 32px; }
.qp-addon-section__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 14px;
}

/* ── Expandable addons (Vonkajšie / Vnútorné parapety) ──
   Bežne stoja vedľa seba v mriežke (rovnako ako ostatné doplnky) a na celú
   šírku riadku sa roztiahnu až po zaškrtnutí, keď sa otvorí panel s farbami. */
.qp-addon--expandable {
  display: block;
  padding: 0;
  cursor: default;
}
.qp-addon--expandable.is-selected {
  grid-column: 1 / -1;
}
.qp-addon--expandable .qp-addon__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
}
.qp-addon--expandable.is-selected .qp-addon__head { border-bottom: 1px solid var(--border); }
.qp-addon--expandable .qp-addon__head input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--black); flex-shrink: 0; }

.qp-addon__panel {
  display: none;
  padding: 22px 20px 26px;
  background: var(--light-bg);
}
.qp-addon--expandable.is-selected .qp-addon__panel { display: block; animation: qpFadeIn 0.3s ease; }
.qp-addon__panel-hint { font-size: 13px; color: var(--mid); margin-bottom: 18px; }

.qp-line-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.qp-line-tab {
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: var(--transition);
}
.qp-line-tab:hover { border-color: var(--mid); }
.qp-line-tab.active { background: var(--black); border-color: var(--black); color: var(--white); }

.qp-line-panel { display: none; }
.qp-line-panel.is-active { display: block; animation: qpFadeIn 0.3s ease; }
.qp-line-panel__desc { font-size: 12.5px; color: var(--mid); margin-bottom: 16px; line-height: 1.6; }

.qp-mini-color-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.qp-mini-swatch {
  flex: 0 1 calc((100% - 4 * 16px) / 5);
  max-width: calc((100% - 4 * 16px) / 5);
}
.qp-mini-swatch { position: relative; display: block; cursor: pointer; text-align: center; }
.qp-mini-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.qp-mini-swatch__frame {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,30,70,0.08);
  transition: var(--transition);
  margin-bottom: 8px;
}
.qp-mini-swatch__frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.qp-mini-swatch__zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(20,30,70,0.25);
  color: var(--charcoal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.qp-mini-swatch__zoom:hover { background: var(--white); color: var(--black); transform: scale(1.08); }
.qp-mini-swatch__zoom svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.qp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,20,35,0.86);
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.qp-lightbox.is-visible { display: flex; animation: qpFadeIn 0.2s ease; }
.qp-lightbox__figure { margin: 0; max-width: min(90vw, 900px); text-align: center; }
.qp-lightbox__figure img { max-width: 100%; max-height: 80vh; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.qp-lightbox__figure figcaption { color: var(--white); font-size: 14px; margin-top: 14px; }
.qp-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.qp-lightbox__close:hover { background: rgba(255,255,255,0.24); }
.qp-lightbox__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.qp-ral-custom {
  display: none;
  margin-top: 20px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.qp-ral-custom.is-visible { display: block; animation: qpFadeIn 0.25s ease; }
.qp-ral-custom label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 8px;
}
.qp-ral-custom input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  transition: var(--transition);
}
.qp-ral-custom input[type="text"]:focus { outline: none; border-color: var(--black); }
.qp-mini-swatch:hover .qp-mini-swatch__frame { box-shadow: 0 6px 16px rgba(20,30,70,0.16); }
.qp-mini-swatch.is-selected .qp-mini-swatch__frame { box-shadow: 0 0 0 2px var(--black), 0 6px 16px rgba(20,30,70,0.16); }
.qp-mini-swatch__name { font-size: 11.5px; color: var(--mid); line-height: 1.35; display: block; }
.qp-mini-swatch.is-selected .qp-mini-swatch__name { color: var(--black); font-weight: 700; }

@media (max-width: 700px) {
  .qp-mini-swatch { flex-basis: calc((100% - 2 * 16px) / 3); max-width: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 460px) {
  .qp-mini-swatch { flex-basis: calc((100% - 1 * 16px) / 2); max-width: calc((100% - 1 * 16px) / 2); }
}

/* ── SUMMARY (step 5) ── */
.qp-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(20, 30, 70, 0.08);
}
.qp-summary h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  margin: 0;
  padding: 15px 24px;
  background: var(--black);
  color: var(--white);
}
.qp-summary h3 small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}
.qp-summary__empty { font-size: 13px; color: var(--mid); padding: 18px 24px; }
#qpSummaryContent { padding: 2px 24px 18px; }
/* Upozornenie na zhrnutí, keď sa sem zákazník dostane cez stepper (teraz
   klikateľný na ktorýkoľvek krok) bez toho, aby vyplnil všetko potrebné –
   pozri getMissingFieldsForProduct() v cenova-ponuka.js. */
.qp-summary__warning { margin: 14px 0; padding: 14px 16px; background: #FFF7E6; border: 1px solid #F0C36D; border-radius: 8px; font-size: 13px; color: #6B4B00; }
.qp-summary__warning strong { display: block; margin-bottom: 6px; color: #4a3300; }
.qp-summary__warning ul { margin: 0; padding: 0; list-style: none; }
.qp-summary__warning li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(240, 195, 109, 0.5); }
.qp-summary__warning li:first-child { border-top: none; }
.qp-summary__warning-fix { flex-shrink: 0; border: 1px solid #F0C36D; background: #ffffff; color: #6B4B00; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: var(--transition); }
.qp-summary__warning-fix:hover { background: #F0C36D; }
.qp-summary__group { padding: 14px 0; border-bottom: 1px solid var(--border); }
.qp-summary__group:first-child { padding-top: 14px; }
.qp-summary__group:last-child { border-bottom: none; padding-bottom: 0; }
.qp-summary__group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 9px;
}
.qp-summary__group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.qp-summary__group-icon svg { width: 8px; height: 8px; stroke: var(--black); stroke-width: 3; fill: none; }
.qp-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--charcoal);
  padding: 8px 0;
}
.qp-summary__row + .qp-summary__row { border-top: 1px dashed var(--border); }
.qp-summary__row-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qp-summary__row span:first-child { font-weight: 600; color: var(--black); }
.qp-summary__swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border), 0 0 0 3px var(--white);
}
.qp-summary__sub { font-weight: 400; color: var(--mid); font-size: 11.5px; }
.qp-summary__pill {
  flex-shrink: 0;
  background: var(--light-bg);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--black);
  white-space: nowrap;
}
.qp-summary__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}
.qp-summary__note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
  white-space: pre-line;
}
.qp-summary__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.qp-summary__tag {
  font-size: 11.5px;
  background: var(--light-bg);
  border-radius: 20px;
  padding: 6px 13px;
  color: var(--black);
  font-weight: 600;
}
@media (max-width: 560px) {
  .qp-summary h3 { padding: 14px 20px; }
  #qpSummaryContent { padding: 2px 20px 16px; }
  .qp-summary__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .qp-summary__pill { white-space: normal; }
}

/* ── ZHRNUTIE: tlačidlo "Pridať ďalší produkt" – umiestnené pod celým
   zhrnutím, rovnako ako tlačidlá Späť/Ďalej (.qp-nav) nižšie. ── */
.qp-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.qp-summary-actions:empty { margin-top: 0; }
.qp-summary-actions__add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.qp-summary-actions__add .btn {
  border-color: var(--accent);
  color: var(--accent);
}
.qp-summary-actions__add .btn:hover {
  background: var(--accent);
  color: var(--white);
}
.qp-summary-actions .btn--small {
  padding: 10px 18px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.qp-summary-actions .btn--small svg { width: 14px; height: 14px; flex-shrink: 0; }
.qp-summary-actions .btn--danger {
  border-color: #e0b4ae;
  color: #c0392b;
}
.qp-summary-actions .btn--danger:hover {
  border-color: #c0392b;
  background: #c0392b;
  color: var(--white);
}

/* ── ZHRNUTIE: karty jednotlivých produktov ("Produkt 1", "Produkt 2"...)
   v skladacom (accordion) formáte – pri jednom produkte sa zobrazí bez
   klikacej hlavičky, pri viacerých je predvolene rozbalený iba prvý, aby
   zhrnutie nebolo pri väčšom počte produktov príliš dlhé. ── */
.qp-summary-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.qp-summary-product {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.qp-summary-product__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--light-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.qp-summary-product__head[disabled] { cursor: default; }
.qp-summary-product__badge {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 20px;
  padding: 4px 10px;
}
.qp-summary-product__title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qp-summary-product__dims {
  flex-shrink: 0;
  font-size: 8pt;
  font-weight: 700;
  color: var(--mid);
  white-space: nowrap;
}
.qp-summary-product__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--mid);
  transition: transform 0.18s ease;
}
.qp-summary-product.is-open .qp-summary-product__chevron { transform: rotate(180deg); }
.qp-summary-product__body {
  display: none;
  padding: 4px 14px 12px;
}
.qp-summary-product.is-open .qp-summary-product__body { display: block; }
.qp-summary-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.qp-summary-product__actions .btn--small {
  padding: 8px 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qp-summary-product__actions .btn--small svg { width: 13px; height: 13px; flex-shrink: 0; }
.qp-summary-product__actions .btn--danger {
  border-color: #e0b4ae;
  color: #c0392b;
}
.qp-summary-product__actions .btn--danger:hover {
  border-color: #c0392b;
  background: #c0392b;
  color: var(--white);
}
@media (max-width: 560px) {
  .qp-summary-product__title { white-space: normal; }
  .qp-summary-product__head { flex-wrap: wrap; }
}

/* ── NAV BUTTONS ── */
.qp-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.qp-nav__spacer { flex: 1; }
.qp-error {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 16px;
  background: #FCEDEB;
  border: 1px solid #F3C6C0;
  border-radius: 10px;
  color: #9A2F26;
  font-size: 13.5px;
  line-height: 1.5;
  animation: qpFadeIn 0.25s ease;
}
.qp-error.is-visible { display: flex; }
.qp-error__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.qp-error__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.qp-error__text { padding-top: 1px; }

/* ── GDPR checkbox row (reuse .form-group--checkbox pattern) ── */
.qp-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 28px 0 8px;
}
.qp-gdpr input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--black); flex-shrink: 0; }
.qp-gdpr label { font-size: 13px; color: var(--mid); line-height: 1.6; }
.qp-gdpr label a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }

/* ── THANK YOU STATE ── */
.qp-thankyou { display: none; text-align: center; padding: 60px 20px; }
.qp-thankyou.is-visible { display: block; }
.qp-thankyou__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
}
.qp-thankyou__icon svg { width: 28px; height: 28px; stroke: var(--black); fill: none; stroke-width: 2.4; }
.qp-thankyou h2 { margin-bottom: 14px; }
.qp-thankyou p { max-width: 480px; margin: 0 auto; font-size: 15px; }

.qp-form-wrap.is-hidden { display: none; }

/* ── Step 5 contact layout (reuses .contact-layout / .contact-info / .contact-form-box) ── */
.qp-contact-layout { margin-top: 8px; }
.qp-contact-layout .contact-form-box .btn--full { margin-top: 8px; }
@media (max-width: 860px) {
  .qp-contact-layout.contact-layout { grid-template-columns: 1fr; border-radius: 20px; }
}
/* Rozpis otváracích hodín po dňoch v karte "Otváracie hodiny" (fallback,
   ak by .contact-card__value--hours / .hours-row neboli definované v
   spoločnom style.css). */
.contact-card__value--hours { display: flex; flex-direction: column; gap: 2px; }