/* ============================================================
   LUMIESTA - Dobierz lampe (finder) v1.0.0 - assets/dobor.css
   Style sekcji home, kafli/chipow kreatora, kart wynikow,
   przycisku headera i dymka (popover / dolny arkusz na mobile).
   Hexy na sztywno (produkcyjny :root ma tylko podzbior tokenow):
   ink #17181A, muted #6B6C6A, line #E4E1D9, mosiadz #8B6D3F,
   mosiadz hover #6F5631, surface #F1EFE9, bg #FBFAF7.
   Breakpointy: 900px (siatki), 689.98px (header/arkusz).
   ============================================================ */

/* ---------- sekcja na home (blok wp:html nie dostaje constrained
   layoutu - kontener robimy sami, jak pas USP) ---------- */
.lm-dobor-sekcja{max-width:1280px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}
.lm-dobor-sekcja .lm-eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:#8B6D3F;font-weight:600;margin:0 0 10px}
.lm-dobor-h2{font-family:'Cormorant SC',serif;font-weight:600;font-size:clamp(2rem,3.2vw,2.625rem);letter-spacing:.02em;color:#17181A;margin:0 0 10px}
.lm-dobor-lead{font-family:'Work Sans',sans-serif;font-size:16px;line-height:1.65;color:#6B6C6A;max-width:52ch;margin:0 0 26px}

/* rezerwa wysokosci: podmiana fallbacku na widget bez skoku strony */
.lm-dobor{min-height:340px}
@media(max-width:689.98px){.lm-dobor{min-height:420px}}

/* fallback no-JS: 6 linkow uppercase z mosiezna kreska */
.lm-dobor-fallback{display:flex;flex-wrap:wrap;gap:14px 26px}
.lm-dobor-fallback a{font-family:'Work Sans',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#17181A !important;text-decoration:none !important;border-bottom:1px solid #8B6D3F;padding-bottom:4px}
.lm-dobor-fallback a:hover{color:#6F5631 !important}

/* ---------- pasek: krok + postep + wstecz ---------- */
.lm-dobor-app{font-family:'Work Sans',sans-serif;color:#17181A}
.lm-dobor-pasek{display:flex;align-items:center;gap:16px;min-height:28px;margin-bottom:14px}
.lm-dobor-krok{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6B6C6A}
.lm-dobor-postep{display:inline-flex;gap:6px}
.lm-dobor-postep i{display:block;width:28px;height:2px;background:#E4E1D9}
.lm-dobor-postep i.ok{background:#8B6D3F}
.lm-dobor-wstecz{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 8px 6px 0;margin:0;cursor:pointer;font-family:'Work Sans',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6B6C6A}
.lm-dobor-wstecz svg{stroke:currentColor;fill:none;stroke-width:1.8}
.lm-dobor-wstecz:hover{color:#17181A}

/* ---------- pytanie kroku ---------- */
.lm-dobor-pyt{font-family:'Cormorant SC',serif;font-weight:600;font-size:clamp(20px,2.2vw,26px);letter-spacing:.02em;color:#17181A;margin:0 0 18px}
.lm-dobor-pyt:focus{outline:none}
.lm-dobor-pyt:focus-visible{outline:2px solid #8B6D3F;outline-offset:4px}

/* ---------- opcje: kafle i chipy ---------- */
.lm-dobor-opcje[data-siatka="typ"]{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.lm-dobor-opcje[data-siatka="pom"],
.lm-dobor-opcje[data-siatka="budzet"]{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lm-dobor-opcje[data-siatka="styl"]{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:900px){
  .lm-dobor-opcje[data-siatka="typ"]{grid-template-columns:repeat(3,1fr)}
  .lm-dobor-opcje[data-siatka="pom"],
  .lm-dobor-opcje[data-siatka="budzet"]{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:689.98px){
  .lm-dobor-opcje[data-siatka="typ"],
  .lm-dobor-opcje[data-siatka="pom"],
  .lm-dobor-opcje[data-siatka="budzet"]{grid-template-columns:repeat(2,1fr)}
}

.lm-dobor-opcja{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:20px 12px;background:#fff;border:1px solid #E4E1D9;border-radius:2px;cursor:pointer;font-family:'Work Sans',sans-serif;text-align:center;transition:border-color .18s ease,box-shadow .18s ease}
.lm-dobor-opcja svg{stroke:#8B6D3F;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lm-dobor-opcja-tekst{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#17181A;line-height:1.45}
.lm-dobor-opcja:hover{border-color:#8B6D3F;box-shadow:0 1px 2px rgba(23,24,26,.05),0 10px 28px rgba(23,24,26,.07)}
.lm-dobor-opcja[aria-pressed="true"]{border-color:#17181A;box-shadow:inset 0 0 0 1px #17181A}
.lm-dobor-opcja:focus-visible{outline:2px solid #8B6D3F;outline-offset:2px}
.lm-dobor-dowolne{background:transparent}
.lm-dobor-dowolne .lm-dobor-opcja-tekst{color:#6B6C6A}

/* chipy stylu */
.lm-dobor-chip{flex-direction:row;min-height:0;padding:11px 18px}
.lm-dobor-chip .lm-dobor-opcja-tekst{font-size:12.5px;letter-spacing:.06em;text-transform:none;font-weight:400}
.lm-dobor-chip[aria-pressed="true"]{background:#17181A;border-color:#17181A;box-shadow:none}
.lm-dobor-chip[aria-pressed="true"] .lm-dobor-opcja-tekst{color:#FBFAF7}

/* ---------- wyniki ---------- */
.lm-dobor-podsum{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6B6C6A;margin:-8px 0 18px}
.lm-dobor-nota{font-size:12.5px;color:#6B6C6A;line-height:1.6;margin:0 0 14px;max-width:64ch}
.lm-dobor-czekaj-tekst{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6B6C6A;margin:0 0 14px}

.lm-dobor-siatka-kart{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.lm-dobor-siatka-kart{grid-template-columns:repeat(2,1fr)}}

.lm-dobor-szkielet{aspect-ratio:3/4;background:#F1EFE9;border-radius:2px;animation:lm-dobor-puls 1.4s ease-in-out infinite}
@keyframes lm-dobor-puls{0%,100%{opacity:1}50%{opacity:.55}}

.lm-dobor-karta{display:block;background:#fff;border:1px solid #E4E1D9;border-radius:2px;overflow:hidden;text-decoration:none !important;transition:box-shadow .18s ease,border-color .18s ease}
.lm-dobor-karta:hover{border-color:#8B6D3F;box-shadow:0 1px 2px rgba(23,24,26,.06),0 14px 34px rgba(23,24,26,.10)}
.lm-dobor-karta:focus-visible{outline:2px solid #8B6D3F;outline-offset:2px}
/* twarda regula marki: packshoty ZAWSZE na czystej bieli */
.lm-dobor-karta-foto{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center}
.lm-dobor-karta-foto img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.lm-dobor-karta-meta{padding:12px 14px 16px}
.lm-dobor-karta-kol{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#8B6D3F;font-weight:600;margin-bottom:5px}
.lm-dobor-karta-nazwa{font-family:'Cormorant SC',serif;font-weight:600;font-size:17px;letter-spacing:.03em;color:#17181A;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lm-dobor-karta-cena{font-size:13px;color:#6B6C6A;margin-top:6px}
/* badge dostepnosci (produkt instock, nie backorder) */
.lm-dobor-karta-mag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#3D4A3E;margin-top:5px}

/* CTA: jeden primary (ink) + link "od nowa" z mosiezna kreska */
.lm-dobor-cta-rzad{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:22px}
.lm-dobor-cta{display:inline-block;background:#17181A !important;color:#FBFAF7 !important;font-family:'Work Sans',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:15px 34px;border:0;border-radius:2px;cursor:pointer;text-decoration:none !important;transition:background .18s ease}
.lm-dobor-cta:hover{background:#000 !important}
.lm-dobor-odnowa{display:inline-block;background:none;border:0;padding:0 0 4px;margin:0;cursor:pointer;font-family:'Work Sans',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#17181A !important;text-decoration:none !important;border-bottom:1px solid #8B6D3F}
.lm-dobor-odnowa:hover{color:#6F5631 !important}

/* ---------- krok 4: suwak budzetu (dwa nalozone input[type=range];
   tor rysujemy sami, kciuki lapane przez pointer-events tylko na thumbie) ---------- */
.lm-dobor-budzet{max-width:520px}
.lm-dobor-suwak{position:relative;height:44px;margin:10px 2px 0}
.lm-dobor-suwak-tor{position:absolute;left:0;right:0;top:21px;height:2px;background:#E4E1D9}
.lm-dobor-suwak-zakres{position:absolute;top:0;bottom:0;background:#8B6D3F}
.lm-dobor-suwak input[type="range"]{position:absolute;left:0;top:0;width:100%;height:44px;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;z-index:2}
.lm-dobor-suwak input[type="range"]:focus{outline:none}
.lm-dobor-suwak input[type="range"]::-webkit-slider-runnable-track{height:44px;background:transparent}
.lm-dobor-suwak input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:11px;border-radius:50%;background:#fff;border:1px solid #17181A;box-shadow:0 1px 3px rgba(23,24,26,.18);cursor:grab}
.lm-dobor-suwak input[type="range"]::-moz-range-track{height:44px;background:transparent}
.lm-dobor-suwak input[type="range"]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #17181A;box-shadow:0 1px 3px rgba(23,24,26,.18);cursor:grab}
.lm-dobor-suwak input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #FBFAF7,0 0 0 4px #8B6D3F}
.lm-dobor-suwak input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #FBFAF7,0 0 0 4px #8B6D3F}
/* oba kciuki przy prawym skraju: dolny (min) na wierzch, inaczej nie do zlapania */
.lm-dobor-suwak.lm-min-gora .lm-dobor-suwak-min{z-index:3}
.lm-dobor-suwak-info{font-family:'Work Sans',sans-serif;font-size:13.5px;font-weight:500;color:#17181A;margin:8px 0 0}
.lm-dymek .lm-dobor-budzet{max-width:none}

/* ---------- przycisk headera (element HTML kreatora Blocksy);
   currentColor = dziala w stanie transparent (front page) i sticky ---------- */
.ct-header .lm-dobor-otworz{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:6px 0;margin:0;color:currentColor;font-family:'Work Sans',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
/* etykieta 1:1 jak sasiednie Konto/Ulubione: Blocksy styluje .ct-label
   globalnie (nadpisuje dziedziczenie z buttona), stad twardy nadpis */
.ct-header .lm-dobor-otworz .ct-label{font-family:'Work Sans',sans-serif !important;font-size:12px !important;font-weight:500 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:currentColor !important}
.ct-header .lm-dobor-otworz svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-header .lm-dobor-otworz:hover .ct-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* PL/EN w jednym HTML przycisku headera */
.lm-dobor-otworz .lm-en{display:none}
html[lang^="en"] .lm-dobor-otworz .lm-pl,
html.lm-en .lm-dobor-otworz .lm-pl,
.lm-dobor-otworz[data-lang="en"] .lm-pl{display:none}
html[lang^="en"] .lm-dobor-otworz .lm-en,
html.lm-en .lm-dobor-otworz .lm-en,
.lm-dobor-otworz[data-lang="en"] .lm-en{display:inline}
.ct-header .lm-dobor-otworz:focus-visible{outline:2px solid #8B6D3F;outline-offset:2px}

/* przycisk w panelu off-canvas: primary (ink) pod szukajka - ma byc
   wyraznym CTA, nie druga "szukajka" (feedback klienta: zlewal sie) */
#offcanvas .lm-dobor-panel{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:16px 0 6px;padding:15px 16px;background:#17181A !important;border:1px solid #17181A;border-radius:2px;cursor:pointer;transition:background .18s ease}
#offcanvas .lm-dobor-panel svg{stroke:#B99A5F;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
#offcanvas .lm-dobor-panel .lm-dobor-otworz-tekst{font-family:'Work Sans',sans-serif !important;font-size:11.5px !important;font-weight:500 !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:#FBFAF7 !important}
#offcanvas .lm-dobor-panel:hover{background:#000 !important}
#offcanvas .lm-dobor-panel:focus-visible{outline:2px solid #8B6D3F;outline-offset:2px}
/* dubel z kreatora Blocksy: gdy element HTML headera laduje TAKZE w panelu
   (strefa offcanvas kreatora / element "poza wierszem"), chowamy go -
   jedynym wejsciem w panelu jest przycisk wstrzykiwany przez JS */
#offcanvas .lm-dobor-otworz:not(.lm-dobor-panel){display:none !important}
#offcanvas .ct-header-text:has(.lm-dobor-otworz:not(.lm-dobor-panel)){display:none !important}

/* ---------- dymek (popover) ---------- */
.lm-dymek{position:fixed;z-index:100001;width:min(460px,calc(100vw - 32px));background:#FBFAF7;border:1px solid #E4E1D9;border-radius:2px;box-shadow:0 4px 12px rgba(23,24,26,.10),0 24px 64px rgba(23,24,26,.16);padding:22px 20px 24px}
.lm-dymek::before{content:"";position:absolute;top:-6px;right:var(--lm-dymek-caret,32px);width:10px;height:10px;background:#FBFAF7;border-top:1px solid #E4E1D9;border-left:1px solid #E4E1D9;transform:rotate(45deg)}
.lm-dymek-zamknij{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;border:1px solid #E4E1D9;border-radius:50%;cursor:pointer;color:#17181A}
.lm-dymek-zamknij svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.lm-dymek-zamknij:hover{border-color:#8B6D3F}
.lm-dymek-zamknij:focus-visible{outline:2px solid #8B6D3F;outline-offset:2px}
.lm-dymek-tresc{max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;padding-right:4px}

/* kompaktowe siatki wewnatrz dymka */
.lm-dymek .lm-dobor-pyt{font-size:20px;padding-right:40px}
.lm-dymek .lm-dobor-opcje[data-siatka="typ"]{grid-template-columns:repeat(3,1fr);gap:10px}
.lm-dymek .lm-dobor-opcje[data-siatka="pom"],
.lm-dymek .lm-dobor-opcje[data-siatka="budzet"]{grid-template-columns:repeat(2,1fr);gap:10px}
.lm-dymek .lm-dobor-opcja{padding:14px 10px;gap:9px}
.lm-dymek .lm-dobor-chip{padding:10px 15px}
.lm-dymek .lm-dobor-siatka-kart{grid-template-columns:repeat(2,1fr);gap:10px}
.lm-dymek .lm-dobor-karta-nazwa{font-size:15px}
.lm-dymek .lm-dobor-karta-meta{padding:10px 12px 13px}
.lm-dymek .lm-dobor-cta{padding:13px 24px}
.lm-dymek .lm-dobor-cta-rzad{gap:18px}

/* tlo i blokada scrolla (arkusz mobile) */
.lm-dymek-tlo{position:fixed;inset:0;z-index:100000;background:rgba(16,17,19,.44)}
html.lm-dymek-blokada{overflow:hidden}

/* dolny arkusz < 690px */
@media(max-width:689.98px){
  .lm-dymek.lm-dymek-arkusz{top:auto !important;right:0 !important;left:0;bottom:0;width:auto;max-height:88vh;border-radius:2px 2px 0 0;border-left:0;border-right:0;border-bottom:0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));animation:lm-dymek-wjazd .22s ease}
  .lm-dymek.lm-dymek-arkusz::before{display:none}
  .lm-dymek.lm-dymek-arkusz .lm-dymek-tresc{max-height:calc(88vh - 44px)}
}
@keyframes lm-dymek-wjazd{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* reduced motion: bez pulsu i wjazdu */
@media(prefers-reduced-motion:reduce){
  .lm-dobor-szkielet{animation:none}
  .lm-dymek.lm-dymek-arkusz{animation:none}
}

/* 1.4: kwota wpisywana bez precyzyjnego celowania w suwak. */
.lm-dobor-kwoty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:20px}
.lm-dobor-kwoty label{font:13px/1.5 'Work Sans',sans-serif;color:#53544F}
.lm-dobor-kwoty input{display:block;width:100%;min-width:0;min-height:48px;margin-top:6px;padding:10px 12px;border:1px solid #9A9484;border-radius:2px;background:#fff;color:#17181A;font:16px/1.5 'Work Sans',sans-serif}
.lm-dobor-kwoty input:focus-visible{outline:2px solid #8B6D3F;outline-offset:2px}
.lm-dobor-karta-powod{font:12px/1.5 'Work Sans',sans-serif;color:#53544F;margin:8px 0 0}
.lm-dobor-wstecz,.lm-dobor-odnowa{min-height:44px}
