/* konfigurator.css — sekcja "Szybki podgląd dekorów".
   Zastępuje premium-decor.css. Prefiks kf- żeby nie kolidować z resztą serwisu.
   Kolory i typografia z strama.css: --ink --muted --paper --stone --line --blue --navy. */

.kf{--kf-ease:cubic-bezier(.2,.7,.2,1)}
.kf-sekcja{background:#fff;padding:78px 0 84px}

.kf-naglowek{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:end;
             padding-bottom:26px}
.kf-naglowek h2{font-size:clamp(34px,4vw,54px);margin:0}
.kf-naglowek p{color:var(--muted);margin:0;max-width:46ch}

/* ---------- filtry ---------- */
.kf-filtry{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 16px}
.kf-filtry button{background:none;border:1px solid var(--line);padding:8px 14px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);
  transition:color .2s var(--kf-ease),border-color .2s var(--kf-ease),background .2s var(--kf-ease)}
.kf-filtry button:hover{border-color:#a8a79f;color:var(--ink)}
.kf-filtry button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- plansza ---------- */
/* nagłówek serwisu też jest przyklejony (74 px) - plansza musi się pod niego nie wsuwać */
.kf-plansza{display:grid;grid-template-columns:1fr 340px;border:1px solid var(--line);
            background:#fff;position:sticky;top:88px;z-index:2}
.kf-scena{position:relative;overflow:hidden;background:var(--stone)}
.kf-scena::before{content:'';display:block;padding-top:56.25%}
.kf-warstwa{position:absolute;inset:0;opacity:0;transition:opacity .3s var(--kf-ease)}
.kf-warstwa[data-widoczna]{opacity:1}
.kf-warstwa img{width:100%;height:100%;object-fit:cover;display:block}
.kf-warstwa--lupa img{transition:transform .35s var(--kf-ease)}
.kf-scena model-viewer{width:100%;height:100%;--poster-color:transparent;background:var(--paper)}

.kf-widoki{position:absolute;left:16px;top:16px;z-index:3;display:flex;
  background:rgba(255,255,255,.94);border:1px solid var(--line);backdrop-filter:blur(6px)}
.kf-widoki button{background:none;border:0;padding:9px 15px;cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  transition:color .2s var(--kf-ease),background .2s var(--kf-ease)}
.kf-widoki button+button{border-left:1px solid var(--line)}
.kf-widoki button[aria-pressed="true"]{background:var(--navy);color:#fff}

.kf-nawig{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;
  display:grid;place-items:center;padding:0;cursor:pointer;border:1px solid var(--line);
  background:rgba(255,255,255,.93);backdrop-filter:blur(4px);opacity:0;
  transition:opacity .2s var(--kf-ease),background .2s var(--kf-ease)}
.kf-nawig--wstecz{left:14px}
.kf-nawig--dalej{right:14px}
.kf-nawig:hover{background:#fff}
.kf-nawig:active{background:var(--stone);transform:translateY(-50%) scale(.94)}
.kf-scena:hover .kf-nawig,.kf-nawig:focus-visible{opacity:1}
.kf-nawig svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:square}

.kf-licznik{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.92);
  border:1px solid var(--line);padding:5px 10px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.kf-wskazowka{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(255,255,255,.94);
  border:1px solid var(--line);padding:8px 13px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);opacity:0;pointer-events:none;
  transition:opacity .25s var(--kf-ease)}
.kf-wskazowka[data-widoczny]{opacity:1}

/* ---------- karta dekoru ---------- */
.kf-karta{padding:30px 28px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.kf-kategoria{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
              color:var(--blue);margin:0 0 8px}
.kf-karta h3{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.08;
             letter-spacing:-.03em;margin:0 0 4px;text-wrap:balance}
.kf-kod{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
        color:var(--muted);margin:0}
.kf-nota{margin:20px 0 0;font-size:13px;line-height:1.6;color:var(--muted);
         border-top:1px solid var(--line);padding-top:18px}
.kf-akcje{margin-top:26px;display:grid;gap:9px}
.kf-akcje .kf-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 18px;border:1px solid var(--blue);background:var(--blue);color:#fff;
  font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .2s var(--kf-ease),border-color .2s var(--kf-ease)}
.kf-akcje .kf-cta:hover{background:#0d519f;border-color:#0d519f}
.kf-akcje .kf-cta--cichy{background:transparent;color:var(--ink);border-color:#a8a79f}
.kf-akcje .kf-cta--cichy:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.kf-akcje .kf-cta[hidden]{display:none}

/* ---------- próbki ---------- */
.kf-probki{margin:22px 0 0}
.kf-probki h3{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
              color:var(--muted);margin:0 0 12px}
.kf-siatka{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:0;padding:0;list-style:none}
.kf-siatka li[hidden]{display:none}
.kf-kafel{position:relative;display:block;background:#fff;border:1px solid var(--line);padding:0;
  cursor:pointer;text-align:left;width:100%;overflow:hidden;
  transition:border-color .2s var(--kf-ease),box-shadow .2s var(--kf-ease),transform .2s var(--kf-ease)}
.kf-kafel img{aspect-ratio:3/4;object-fit:cover;width:100%;height:auto;display:block}
.kf-kafel span{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;font-size:11.5px;
  font-weight:700;line-height:1.25;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);
  background:linear-gradient(to top,rgba(10,16,22,.80),rgba(10,16,22,.42) 46%,transparent)}
.kf-kafel:hover{border-color:#a8a79f;transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,37,64,.10)}
.kf-kafel[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}

@media (hover:none){
  .kf-nawig{opacity:1}
  .kf-scena{touch-action:pan-y}
}
@media (max-width:1080px){ .kf-siatka{grid-template-columns:repeat(5,1fr)} }
@media (max-width:900px){
  .kf-sekcja{padding:48px 0 56px}
  .kf-naglowek{grid-template-columns:1fr;gap:14px}
  .kf-uklad{display:flex;flex-direction:column}
  .kf-plansza{display:contents}
  .kf-scena{border:1px solid var(--line);order:1}
  .kf-scena::before{padding-top:75%}
  .kf-probki{order:2;margin:14px 0 0}
  .kf-karta{order:3;border:1px solid var(--line);padding:22px 20px}
  .kf-karta h3{font-size:27px}
  .kf-akcje{grid-template-columns:1fr 1fr}
  .kf-widoki{left:12px;top:12px}
  .kf-widoki button{padding:8px 11px;font-size:10.5px}
  .kf-nawig{width:46px;height:46px}
  .kf-nawig--wstecz{left:10px}
  .kf-nawig--dalej{right:10px}
  .kf-licznik{right:10px;bottom:10px}
  .kf-siatka{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;
             scrollbar-width:thin;scrollbar-color:#c6c1b5 transparent}
  .kf-siatka li{flex:0 0 29%;scroll-snap-align:start}
  .kf-kafel:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .kf-kafel span{padding:22px 8px 7px;font-size:10.5px}
}
@media (min-width:601px) and (max-width:900px){ .kf-siatka li{flex:0 0 21%} }
@media (max-width:520px){
  .kf-scena::before{padding-top:100%}
  .kf-siatka li{flex:0 0 34%}
}
@media (prefers-reduced-motion:reduce){
  .kf *,.kf-plansza,.kf-warstwa{transition-duration:.01ms!important}
}

/* Karta dekoru ma teraz jedną akcję („Pobierz dekor”), więc na wąskich ekranach
   nie dzielimy pola na dwie kolumny: samotny przycisk zajmowałby połowę. */
@media (max-width:900px){ .kf-akcje{grid-template-columns:1fr} }