/* Knobs Quiz - "Dopasowane do Ciebie". Paleta sklepu (jasna), okna 14px, spojne z rotatorem. */
.knobs-quiz{
  --kq-bg:#f7f6f3; --kq-card:#fff; --kq-ink:#1b1a18; --kq-muted:#6f6a61;
  --kq-line:#e7e3db; --kq-brass:#b08d57; --kq-brass-d:#8a6b3d; --kq-r:14px;
  max-width:1300px; margin:36px auto; padding:0 16px; color:var(--kq-ink);
  font-family:inherit; box-sizing:border-box;
}
.knobs-quiz *,.knobs-quiz *::before,.knobs-quiz *::after{box-sizing:border-box}

.knobs-quiz__head{text-align:center; max-width:640px; margin:0 auto 22px}
.knobs-quiz__eyebrow{margin:0 0 6px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--kq-brass-d); font-weight:600}
.knobs-quiz__title{margin:0 0 8px; font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.12; font-weight:600; text-wrap:balance}
.knobs-quiz__lead{margin:0; color:var(--kq-muted); font-size:1rem; line-height:1.5}

.knobs-quiz__stage{
  background:var(--kq-bg); border:1px solid var(--kq-line); border-radius:calc(var(--kq-r) + 4px);
  padding:clamp(18px,3vw,34px);
}

.knobs-quiz__stephead{text-align:center; margin-bottom:20px}
.knobs-quiz__progress{display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kq-muted); margin-bottom:8px}
.knobs-quiz__q{margin:0; font-size:clamp(1.15rem,2.4vw,1.55rem); font-weight:600; line-height:1.2; text-wrap:balance}

.knobs-quiz__opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; max-width:900px; margin:0 auto}
.knobs-quiz__opts.is-swatch{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.knobs-quiz__opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  background:var(--kq-card); border:1px solid var(--kq-line); border-radius:var(--kq-r);
  padding:16px 18px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s;
  min-height:78px; width:100%; font:inherit; color:inherit;
}
.knobs-quiz__opt:hover{border-color:var(--kq-brass); box-shadow:0 4px 18px rgba(27,26,24,.07)}
.knobs-quiz__opt:active{transform:translateY(1px)}
.knobs-quiz__opt:focus-visible{outline:2px solid var(--kq-brass); outline-offset:2px}
.knobs-quiz__opt-t{font-size:1.02rem; font-weight:600}
.knobs-quiz__opt-d{font-size:.83rem; color:var(--kq-muted); line-height:1.35}

.knobs-quiz__opts.is-swatch .knobs-quiz__opt{align-items:center; text-align:center; gap:10px; min-height:auto}
.knobs-quiz__sw{width:46px; height:46px; border-radius:50%; border:1px solid rgba(0,0,0,.12); box-shadow:inset 0 0 0 3px #fff, 0 1px 3px rgba(0,0,0,.12)}

.knobs-quiz__foot{display:flex; justify-content:center; margin-top:18px; min-height:20px}
.knobs-quiz__link{background:none; border:none; color:var(--kq-brass-d); font:inherit; font-size:.9rem; cursor:pointer; padding:6px 10px; border-radius:8px}
.knobs-quiz__link:hover{text-decoration:underline}
.knobs-quiz__link:focus-visible{outline:2px solid var(--kq-brass); outline-offset:2px}

/* Wynik */
.knobs-quiz__loading{text-align:center; padding:40px 0; color:var(--kq-muted); font-size:1rem}
.knobs-quiz__spin{display:inline-block; width:16px; height:16px; vertical-align:-2px; margin-right:6px;
  border:2px solid var(--kq-line); border-top-color:var(--kq-brass); border-radius:50%; animation:kqspin .7s linear infinite}
@keyframes kqspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.knobs-quiz__spin{animation:none}}

.knobs-quiz__reshead{text-align:center; margin-bottom:14px}
.knobs-quiz__reslabel{margin:0 0 2px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kq-muted)}
.knobs-quiz__profile{margin:0; font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:600}
.knobs-quiz__note{margin:8px 0 0; font-size:.85rem; color:var(--kq-muted)}

.knobs-quiz__types{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:0 0 18px}
.knobs-quiz__types-lbl{font-size:.85rem; color:var(--kq-muted); margin-right:2px}
.knobs-quiz__chip{background:var(--kq-card); border:1px solid var(--kq-line); border-radius:999px; padding:6px 14px;
  font:inherit; font-size:.85rem; cursor:pointer; color:var(--kq-ink); transition:border-color .15s, background .15s}
.knobs-quiz__chip:hover{border-color:var(--kq-brass)}
.knobs-quiz__chip.is-on{background:var(--kq-ink); color:#fff; border-color:var(--kq-ink)}
.knobs-quiz__chip:focus-visible{outline:2px solid var(--kq-brass); outline-offset:2px}

/* Siatka kart - wlasny grid (nie zalezymy od klas body sklepu). */
.knobs-quiz__grid.products{display:grid !important; grid-template-columns:repeat(4,1fr); gap:18px; margin:0 !important; padding:0 !important; list-style:none}
.knobs-quiz__grid.products::before,.knobs-quiz__grid.products::after{display:none !important}
.knobs-quiz__grid.products li.product{width:auto !important; margin:0 !important; float:none !important; padding:0 !important}
@media (max-width:1024px){.knobs-quiz__grid.products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.knobs-quiz__grid.products{grid-template-columns:repeat(2,1fr); gap:12px}}

.knobs-quiz__resfoot{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; margin-top:24px}
.knobs-quiz__more{display:inline-block; background:var(--kq-ink); color:#fff; text-decoration:none;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:.95rem; transition:background .15s}
.knobs-quiz__more:hover{background:#000}
.knobs-quiz__more:focus-visible{outline:2px solid var(--kq-brass); outline-offset:3px}
.knobs-quiz__empty{text-align:center; color:var(--kq-muted); padding:30px 0}

@media (max-width:640px){
  .knobs-quiz{margin:24px auto}
  .knobs-quiz__opts{grid-template-columns:1fr}
  .knobs-quiz__opts.is-swatch{grid-template-columns:repeat(3,1fr)}
  .knobs-quiz__opts.is-swatch .knobs-quiz__opt{padding:12px 8px}
}