/*
  bulb-sidebar.css — szuflada doboru żarówek (moduł bulbselection)
  Wydzielone z nc-product.css, żeby działało też na STAREJ karcie produktu.

  bulb-sidebar.tpl (hook modułu bulbselection) renderuje #bulb-sidebar-wrapper
  z klasami nc-bulbs-drawer/nc-bulb-* NIEZALEŻNIE od tego, która karta produktu
  jest aktywna — ale nc-product.css (skąd te reguły pochodzą) ładuje się
  WYŁĄCZNIE na pilotażowych produktach nowej karty (patrz header.tpl), więc na
  starej karcie ta sama szuflada renderowała się zupełnie bez stylu.

  Ten plik ładuje się SITE-WIDE (header.tpl, poza warunkiem pilota), więc musi
  być samowystarczalny — stąd własna, lokalna kopia zmiennych design tokens
  (identyczna z blokiem "DESIGN TOKENS" w nc-product.css) i dwóch drobnych,
  współdzielonych reguł (.nc-chevron, .nc-empty-section) zamiast polegania na
  tym, że nc-product.css akurat też jest załadowany.

  UWAGA przy zmianach: reguły tu i w nc-product.css (sekcje "BULBS DRAWER",
  "FIXUPS v16", "FIXUPS v20") są ŚWIADOMIE zduplikowane — na nowej karcie oba
  pliki się ładują (redundantnie, ale bez konfliktu, bo to te same wartości).
  Zmieniając wygląd szuflady, przenieś zmianę do OBU plików.
*/

/* ─────────────────────────────────────────────
   DESIGN TOKENS — kopia z nc-product.css, scope'owana tylko do elementów
   tej szuflady (żeby nie wyciekało na resztę starej karty).
   ───────────────────────────────────────────── */
.nc-bulbs-drawer,
.nc-drawer-backdrop {
  --nc-bg:          hsl(0 0% 100%);
  --nc-fg:          hsl(0 0% 12%);
  --nc-card:        hsl(0 0% 100%);

  --nc-primary:     hsl(283 76% 43.7%);
  --nc-primary-hover: hsl(283 76% 37.7%);
  --nc-primary-fg:  hsl(0 0% 100%);

  --nc-secondary:   hsl(36 30% 96%);
  --nc-product-bg:  hsl(36 30% 96%);
  --nc-muted:       hsl(30 12% 95%);
  --nc-muted-fg:    hsl(0 0% 38%);
  --nc-success:     hsl(142 60% 35%);
  --nc-border:      hsl(30 10% 88%);
  --nc-radius:      0.5rem;

  --nc-shadow-card: 0 1px 2px 0 hsl(0 0% 0% / .04), 0 4px 12px -2px hsl(0 0% 0% / .06);
  --nc-shadow-sticky: 0 10px 30px -12px hsl(283 30% 20% / .18);
}

/* Współdzielone drobne reguły, których używa markup szuflady, ale które
   normalnie żyją w nc-product.css (tam nieszkodliwie się zdublują). */
.nc-chevron { flex-shrink: 0; color: var(--nc-muted-fg); fill: none !important; stroke: currentColor !important; transition: transform .2s; }
.nc-empty-section { color: var(--nc-muted-fg); font-size: 14px; font-style: italic; }

/* ─────────────────────────────────────────────
   BULBS DRAWER — szuflada doboru żarówek
   (1:1 z sekcją "BULBS DRAWER" w nc-product.css)
   ───────────────────────────────────────────── */
.nc-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: hsl(0 0% 12% / .4);
  cursor: pointer;
}
.nc-drawer-backdrop[hidden] { display: none; }

.nc-bulbs-drawer {
  position: fixed;
  inset: 0;
  z-index: 201;
  background: var(--nc-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nc-bulbs-drawer[hidden] { display: none; }
@media (min-width: 1024px) {
  .nc-bulbs-drawer {
    left: auto;
    width: 460px;
    border-left: 1px solid var(--nc-border);
    box-shadow: -4px 0 40px hsl(0 0% 0% / .12);
  }
}

/* Slide-in animacja */
@media (prefers-reduced-motion: no-preference) {
  .nc-bulbs-drawer { transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
  .nc-bulbs-drawer.is-open { transform: translateX(0); }
  @media (max-width: 1023px) {
    .nc-bulbs-drawer { transform: translateX(0) translateY(100%); }
    .nc-bulbs-drawer.is-open { transform: translateX(0) translateY(0); }
  }
}

.nc-bulbs-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-inline: 1rem;
  height: 3.5rem;
  border-bottom: 1px solid var(--nc-border);
  flex-shrink: 0;
}
@media (min-width: 640px) { .nc-bulbs-drawer-header { padding-inline: 1.25rem; } }

.nc-bulbs-drawer-title-row { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.nc-bulbs-drawer-icon { flex-shrink: 0; color: var(--nc-primary); fill: none !important; stroke: currentColor !important; }
.nc-bulbs-drawer-title { font-size: 15px; font-weight: 700; color: var(--nc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
@media (min-width: 640px) { .nc-bulbs-drawer-title { font-size: 16px; } }

.nc-bulbs-drawer-close {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius);
  border: none;
  background: transparent;
  color: hsl(0 0% 40%);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.nc-bulbs-drawer-close:hover { background: var(--nc-secondary); color: var(--nc-fg); }

/* Filtry barwy */
.nc-bulbs-drawer-filters {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--nc-border);
  background: hsl(36 30% 97%);
  flex-shrink: 0;
}
@media (min-width: 640px) { .nc-bulbs-drawer-filters { padding: 0.75rem 1.25rem; } }

.nc-bulbs-drawer-compat {
  font-size: 12.5px;
  color: hsl(0 0% 25%);
  margin: 0 0 0.625rem;
  line-height: 1.5;
}
.nc-bulbs-drawer-compat strong { color: var(--nc-fg); }

.nc-bulbs-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nc-muted-fg);
  margin: 0 0 0.5rem;
}

.nc-bulbs-temp-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.nc-temp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0.625rem 0.75rem 0.875rem;
  border-radius: var(--nc-radius);
  border: 1px solid var(--nc-border);
  background: var(--nc-card);
  overflow: hidden;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  font-family: inherit;
}
.nc-temp-tab:hover { background: hsl(36 30% 96%); border-color: hsl(0 0% 65%); }
.nc-temp-tab[aria-selected="true"] { background: var(--nc-secondary); border-color: hsl(0 0% 55%); }

.nc-temp-tab-name { font-size: 13px; font-weight: 700; color: var(--nc-fg); line-height: 1.3; }
.nc-temp-tab-desc { font-size: 11px; color: var(--nc-muted-fg); line-height: 1.3; margin-top: 1px; }

.nc-temp-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0;
  opacity: 1;
  transition: opacity .15s;
}
.nc-temp-bar--neutral { background: hsl(0 0% 22%); }
.nc-temp-bar--warm    { background: hsl(32 95% 55%); }
.nc-temp-bar--cold    { background: hsl(210 80% 60%); }

/* Lista żarówek — WYCOFANE ograniczenie max-height "ok. 4,5 wiersza" —
   patrz identyczny, pełny komentarz przy .nc-bulbs-list w nc-product.css:
   stopka szuflady ma margin-top:auto i tak zawsze przykleja się do dołu,
   więc skrócona lista zostawiała pustą przerwę zamiast spójnego wyglądu.
   Z powrotem flex:1 — lista wypełnia całą dostępną wysokość, przewija się
   wewnątrz siebie tylko gdy realnie nie mieści się w tej przestrzeni. */
.nc-bulbs-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
@media (min-width: 640px) { .nc-bulbs-list { padding: 0.75rem 1rem; } }

/* Kafelek żarówki */
/* height: var(--nc-bulb-row-h) — ustawiane w JS (bulb-drawer-rows.js) tak,
   żeby dokładnie ok. 4,5 wiersza wypełniało dostępną (zmienną, zależną od
   wysokości ekranu) wysokość .nc-bulbs-list, bez pustej przerwy przed
   stopką szuflady (patrz komentarz w bulb-drawer-rows.js — poprzednia
   próba, stały max-height na samej liście, dawała dokładnie taką przerwę).
   display:flex na tym elemencie (razem z .nc-bulb-row-main{flex:1} niżej)
   pozwala treści wiersza ROZCIĄGNĄĆ SIĘ, gdy wymuszona wysokość jest
   większa niż naturalna (wysoki ekran) — przycisk "Szczegóły" i tak
   zostaje przy dolnej krawędzi wiersza. */
.nc-bulb-row {
  border-radius: var(--nc-radius);
  border: 1px solid var(--nc-border);
  background: var(--nc-card);
  overflow: hidden;
  flex-shrink: 0;
  height: var(--nc-bulb-row-h, auto);
  display: flex;
  flex-direction: column;
  transition: border-color .15s;
}
/* Rozwinięte "Szczegóły" muszą móc wyjść poza wymuszoną wysokość wiersza —
   inaczej treść panelu (parametry, skala barwy) byłaby przycięta przez
   overflow:hidden wyżej. Selektor celowo NIE sprawdza atrybutu [hidden] na
   samym panelu — moduł bulbselection (bulb-sidebar.js, ten kontekst)
   przełącza widoczność panelu inline stylem (style="display:none" na
   .bulb-sidebar-properties), NIGDY atrybutem hidden. ":not([hidden])" jest
   więc PRAWDZIWE dla każdego wiersza przez cały czas (nie ma czego
   negować) — reguła nadpisywała height/overflow bezwarunkowo na
   WSZYSTKICH wierszach, przez co JS-owa wysokość wiersza
   (--nc-bulb-row-h, bulb-drawer-rows.js) nigdy realnie nie obowiązywała
   (potwierdzone w DevTools: ta reguła zawsze wygrywała). aria-expanded na
   przycisku "Szczegóły" jest natomiast niezawodne (na nim opiera się już
   działająca rotacja chevronu), więc używamy jego zamiast stanu panelu. */
.nc-bulb-row:has(.nc-bulb-details-toggle[aria-expanded="true"]) {
  height: auto;
  overflow: visible;
}
.nc-bulb-row:hover { border-color: hsl(0 0% 60%); }

/* --nc-bulb-scale — jak bardzo wiersz jest wyższy niż jego naturalna
   wysokość (105px, 1:1 z bazową regułą w nc-product.css). Zamiast
   zostawiać wymuszoną wysokość jako pustą przerwę przed stopką (dawne
   .nc-bulb-row-footer{margin-top:auto} pochłaniało tę różnicę samo, robiąc
   duży odstęp — zgłoszone jako "ten margin") tą różnicą "płacimy" za
   powiększenie treści wiersza: zdjęcia, ceny, przycisku "Dobierz" itd.
   Nadpisane niżej dla kompaktowego #bulb-sidebar-wrapper z własnym,
   mniejszym baseline (patrz FIXUPS v16). */
.nc-bulb-row {
  --nc-bulb-scale: clamp(0.9, calc(var(--nc-bulb-row-h, 105px) / 105px * 0.9), 1.5);
}

.nc-bulb-row-main {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  gap: 0.75rem;
  padding: 0.625rem;
}

.nc-bulb-row-img {
  flex-shrink: 0;
  width: calc(5rem * var(--nc-bulb-scale, 1));
  height: calc(5rem * var(--nc-bulb-scale, 1));
  border-radius: var(--nc-radius);
  background: var(--nc-product-bg);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0.5rem;
}
.nc-bulb-row-img img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }

.nc-bulb-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.nc-bulb-value-badge {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 0.25rem;
}
.nc-bulb-value-badge--recommended { background: hsl(142 60% 35% / .12); color: hsl(142 60% 28%); }
.nc-bulb-value-badge--value       { background: hsl(210 80% 50% / .1);  color: hsl(210 80% 35%); }
.nc-bulb-value-badge--premium     { background: hsl(45 90% 55% / .15);  color: hsl(38 70% 30%); }

.nc-bulb-row-name {
  font-size: calc(13px * var(--nc-bulb-scale, 1));
  font-weight: 600;
  color: var(--nc-fg);
  line-height: 1.3;
  margin-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nc-bulb-row-meta { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; font-size: calc(11px * var(--nc-bulb-scale, 1)); color: var(--nc-muted-fg); }
.nc-bulb-row-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--nc-border); display: inline-block; }

.nc-bulb-row-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.375rem;
  margin-top: auto;
}

.nc-bulb-row-price-wrap {}
.nc-bulb-row-price-label { font-size: 10px; color: var(--nc-muted-fg); }
.nc-bulb-row-price { font-size: calc(15px * var(--nc-bulb-scale, 1)); font-weight: 800; color: var(--nc-primary); line-height: 1.1; }
.nc-bulb-row-price-unit { font-size: calc(11px * var(--nc-bulb-scale, 1)); font-weight: 400; color: var(--nc-muted-fg); }

.nc-bulb-badge {
  align-self: flex-start;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  border: 1px solid transparent;
}
.nc-bulb-badge--polecane   { background: hsl(4 90% 96%);   color: hsl(4 70% 42%);   border-color: hsl(4 70% 85%); }
.nc-bulb-badge--popularne  { background: hsl(4 90% 96%);   color: hsl(4 70% 42%);   border-color: hsl(4 70% 85%); }
.nc-bulb-badge--dobra-cena { background: hsl(142 55% 95%); color: hsl(142 60% 28%); border-color: hsl(142 45% 80%); }
.nc-bulb-badge--cena-jakość { background: hsl(142 55% 95%); color: hsl(142 60% 28%); border-color: hsl(142 45% 80%); }
.nc-bulb-badge--premium    { background: hsl(38 55% 93%);  color: hsl(30 45% 32%);  border-color: hsl(38 45% 78%); }

.nc-bulb-add-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: calc(2.25rem * var(--nc-bulb-scale, 1));
  padding-inline: calc(0.75rem * var(--nc-bulb-scale, 1));
  border-radius: var(--nc-radius);
  border: none;
  font-size: calc(12px * var(--nc-bulb-scale, 1));
  font-weight: 600;
  cursor: pointer;
  background: var(--nc-primary);
  color: var(--nc-primary-fg);
  transition: background .15s;
  font-family: inherit;
}
.nc-bulb-add-btn:hover { background: var(--nc-primary-hover); }
.nc-bulb-add-btn.is-added { background: hsl(142 60% 35%); }

/* Szczegóły — rozwijane */
.nc-bulb-details-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-top: 1px solid var(--nc-border);
  border: none;
  border-top: 1px solid var(--nc-border);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: hsl(0 0% 35%);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s;
}
.nc-bulb-details-toggle:hover { background: var(--nc-secondary); }
.nc-bulb-details-toggle[aria-expanded="true"] .nc-chevron { transform: rotate(180deg); }

.nc-bulb-details-panel {
  padding: 0.75rem;
  border-top: 1px solid var(--nc-border);
  background: hsl(36 30% 97%);
}
.nc-bulb-details-panel[hidden] { display: none; }

.nc-bulb-specs-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 12px;
  margin: 0 0 0.75rem;
}
.nc-bulb-specs-dt { color: var(--nc-muted-fg); }
.nc-bulb-specs-dd { font-weight: 600; color: var(--nc-fg); text-align: right; margin: 0; }

/* Skala barwy */
.nc-bulb-scale-wrap { margin-bottom: 0.75rem; }
.nc-bulb-scale-label { font-size: 11px; color: var(--nc-muted-fg); margin-bottom: 0.25rem; }
.nc-bulb-scale-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
}
.nc-bulb-scale-track--kelvin {
  background: linear-gradient(to right, #FFA94D 0%, #FFE9B0 40%, #FFFEF5 55%, #DCEEFF 75%, #6FA8DC 100%);
}
.nc-bulb-scale-track--lumens { background: var(--nc-border); opacity: .6; }

.nc-bulb-scale-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 14px;
  background: var(--nc-fg);
  border-radius: 999px;
  transform: translateX(-50%);
}
.nc-bulb-scale-value {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}
.nc-bulb-scale-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--nc-radius);
  border: 1px solid var(--nc-border);
  background: var(--nc-card);
  font-size: 11px;
  font-weight: 700;
  color: var(--nc-fg);
}

/* Footer szuflady */
.nc-bulbs-drawer-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--nc-border);
  background: hsl(36 30% 97%);
  font-size: 12px;
  color: hsl(0 0% 35%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.nc-bulbs-drawer-footer svg { flex-shrink: 0; color: var(--nc-primary); fill: none !important;}
.nc-bulbs-drawer-footer strong { color: var(--nc-fg); font-weight: 700; }

/* Wskazówka — po ostatniej żarówce */
.nc-bulbs-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-shrink: 0;
  margin: 0.25rem 0 0;
  padding: 0.75rem 0;
  border-radius: var(--nc-radius);
  font-size: 11px;
  line-height: 1.5;
}
.nc-bulbs-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--nc-muted-fg); }
.nc-bulbs-hint strong { color: var(--nc-fg); font-weight: 600; }

/* ═══════════════════════════════════════════════
   FIXUPS v16 — sidebar żarówek (moduł bulbselection)
   Mapowanie klasy .active (bulb-sidebar.js) na nc-bulbs-drawer
   (1:1 z sekcją "FIXUPS v16" w nc-product.css)
   ═══════════════════════════════════════════════ */

/* Overlay — ukryty dopóki nieaktywny; nad topbarem/navbarem/wyszukiwarką */
#bulb-sidebar-overlay.nc-drawer-backdrop { display: none !important; z-index: 2147483646 !important; }
#bulb-sidebar-overlay.nc-drawer-backdrop.active { display: block !important; }

/* Panel — bazowo poza ekranem (z prawej), .active wsuwa; nad wszystkim */
#bulb-sidebar-wrapper.nc-bulbs-drawer {
  display: flex !important;
  flex-direction: column !important;
  z-index: 2147483647 !important;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  visibility: hidden;
  right: 0;
  left: auto;
}
#bulb-sidebar-wrapper.nc-bulbs-drawer.active {
  transform: translateX(0);
  visibility: visible;
}
/* Mobile: wsuwanie z dołu (pełny ekran) */
@media (max-width: 1023px) {
  #bulb-sidebar-wrapper.nc-bulbs-drawer { transform: translateY(100%); }
  #bulb-sidebar-wrapper.nc-bulbs-drawer.active { transform: translateY(0); }
}

/* Reset stylów linków wewnątrz kart żarówek (nazwa, obraz) */
#bulb-sidebar-wrapper .nc-bulb-row-name a,
#bulb-sidebar-wrapper .nc-bulb-row-img a { text-decoration: none !important; color: inherit !important; display: block; }
#bulb-sidebar-wrapper .nc-bulb-add-btn { text-decoration: none !important; }
/* Rozwinięte szczegóły (moduł toggluje display:block inline) */
#bulb-sidebar-wrapper .bulb-sidebar-properties.nc-bulb-details-panel { padding: 0.75rem; }

/* Bez paddingu 20px z CSS modułu — wewnętrzne sekcje mają własne odstępy */
#bulb-sidebar-wrapper.nc-bulbs-drawer { padding: 0 !important; }

/* Wymuszenie scrollowania listy żarówek — stary bulb-sidebar.css (moduł)
   ustawia na tym samym elemencie (.bulb-sidebar-wrapper) własną wysokość
   (height:100%, bez top/bottom:0) i nie ma pewności co do kolejności
   ładowania arkuszy względem tego pliku, więc wymuszamy tu jawnie
   ograniczoną wysokość szuflady i scroll wewnętrzny na liście — inaczej
   po rozwinięciu "Szczegółów" treść po prostu rośnie poza widoczny obszar
   bez możliwości scrollowania.

   100vh na mobile Chrome/Safari to wysokość "dużego" viewportu (jakby pasek
   adresu był schowany) — gdy pasek jest widoczny, szuflada i tak rezerwuje
   sobie pełne 100vh, więc jej dolna krawędź (stopka "Kupujesz więcej lamp?")
   ląduje POD spodem realnie widocznego ekranu, zasłonięta przez pasek
   adresu (zgłoszone: stopka znika, dopóki pasek adresu nie schowa się po
   przewinięciu). 100dvh ("dynamic viewport height") śledzi RZECZYWISTĄ,
   aktualnie widoczną wysokość i kurczy/rośnie razem z pokazywaniem/
   chowaniem paska — pierwsza deklaracja (100vh) zostaje jako fallback dla
   starszych przeglądarek bez obsługi dvh (nieznana jednostka = cała
   deklaracja ignorowana, więc bezpiecznie spada z powrotem na 100vh). */
#bulb-sidebar-wrapper.nc-bulbs-drawer {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Nagłówek/filtry/stopka nie mogą się ściskać — tylko lista poniżej scrolluje */
#bulb-sidebar-wrapper .nc-bulbs-drawer-header,
#bulb-sidebar-wrapper .nc-bulbs-drawer-filters,
#bulb-sidebar-wrapper .nc-bulbs-drawer-footer {
  flex-shrink: 0 !important;
}
#bulb-sidebar-wrapper .nc-bulbs-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Header — kompaktowy, żeby zostawić więcej miejsca liście żarówek */
#bulb-sidebar-wrapper .nc-bulbs-drawer-header {
  height: 4.25rem !important;
}

/* Pasek filtrów — kompaktowy */
#bulb-sidebar-wrapper .nc-bulbs-drawer-filters {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
#bulb-sidebar-wrapper .nc-bulbs-drawer-compat { margin-bottom: 0.375rem !important; }
#bulb-sidebar-wrapper .nc-bulbs-filter-label { margin-bottom: 0.25rem !important; }

/* Filtry barwy — na całą szerokość, docelowo 3 kolumny tej samej szerokości. */
#bulb-sidebar-wrapper .nc-bulbs-temp-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
#bulb-sidebar-wrapper .nc-temp-tab {
  flex: 0 0 calc((100% - 2 * 0.5rem) / 3) !important;
  min-width: 0 !important;
  padding: 0.35rem 0.5rem 0.45rem !important;
}
#bulb-sidebar-wrapper .nc-temp-tab-name {
  line-height: 1.1 !important;
}

/* Karty żarówek — niższe, żeby zmieścić min. 4 na ekran desktop */
#bulb-sidebar-wrapper .nc-bulb-row-main { padding: 0.625rem !important; }
/* Kompaktowy baseline (92px) zamiast ogólnego 105px z bazowej reguły
   ".nc-bulb-row" wyżej — tutaj kafelki startują mniejsze (obrazek 4.25rem,
   nie 5rem), więc przy tej samej wymuszonej wysokości wiersza
   (--nc-bulb-row-h) powiększenie ma wychodzić z mniejszego punktu
   startowego, żeby proporcje zostały spójne z bazowym rozmiarem. */
#bulb-sidebar-wrapper .nc-bulb-row {
  --nc-bulb-scale: clamp(0.9, calc(var(--nc-bulb-row-h, 92px) / 92px * 0.9), 1.5);
}
#bulb-sidebar-wrapper .nc-bulb-row-img {
  width: calc(4.25rem * var(--nc-bulb-scale, 1)) !important;
  height: calc(4.25rem * var(--nc-bulb-scale, 1)) !important;
}
#bulb-sidebar-wrapper .nc-bulbs-list { gap: 0.5rem !important; }
#bulb-sidebar-wrapper .nc-bulb-details-toggle {
  padding: 0.375rem 0.625rem !important;
  font-size: 11px !important;
}
#bulb-sidebar-wrapper .nc-bulb-details-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

/* Przycisk "Do koszyka" — kompaktowy, ale też rośnie razem z resztą treści
   wiersza (patrz --nc-bulb-scale wyżej) — inaczej "Dobierz" zostawałby
   maleńki obok wyraźnie większego zdjęcia/ceny na wysokim ekranie. */
#bulb-sidebar-wrapper .nc-bulb-add-btn {
  height: calc(2.75rem * var(--nc-bulb-scale, 1)) !important;
  padding-inline: calc(0.875rem * var(--nc-bulb-scale, 1)) !important;
  font-size: calc(12px * var(--nc-bulb-scale, 1)) !important;
}

/* Footer — przyklejony do dołu, wyśrodkowany, bez ikony */
#bulb-sidebar-wrapper .nc-bulbs-drawer-footer {
  margin-top: auto !important;
  justify-content: center !important;
  text-align: center !important;
  padding-block: 1rem !important;
}

/* ═══════════════════════════════════════════════
   FIXUPS v20 — bulb sidebar (#bulb-sidebar-wrapper, modules/bulbselection)
   typography, matched against the Lovable reference component.
   (1:1 z sekcją "FIXUPS v20" w nc-product.css)
   ═══════════════════════════════════════════════ */

.nc-bulbs-drawer-title {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: -0.3px !important;
  color: #1F1F1F !important;
}
.nc-bulbs-drawer-compat {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  line-height: 15.8px !important;
  letter-spacing: -0.1px !important;
  color: #1F1F1F !important;
}
.nc-bulbs-drawer-compat strong {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: #1F1F1F !important;
}
.nc-bulbs-filter-label {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 15px !important;
  letter-spacing: 0.3px !important;
  color: #616161 !important;
}
.nc-temp-tab-name {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  line-height: 14.4px !important;
  letter-spacing: -0.1px !important;
  color: rgba(31, 31, 31, .9) !important;
}
.nc-temp-tab-desc {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  line-height: 12.5px !important;
  letter-spacing: -0.1px !important;
  color: #616161 !important;
}
.nc-bulb-badge {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  line-height: 13.5px !important;
  letter-spacing: 0.2px !important;
}
.nc-bulb-badge--polecane,
.nc-bulb-badge--popularne {
  background: hsl(283 76% 43.7% / .1) !important;
  color: var(--nc-primary) !important;
  border-color: hsl(283 76% 43.7% / .3) !important;
}
.nc-bulb-row-name {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: calc(12px * var(--nc-bulb-scale, 1)) !important;
  line-height: 16.5px !important;
  letter-spacing: normal !important;
  color: #1F1F1F !important;
}
@media (min-width: 1024px) {
  .nc-bulb-row-name {
    font-size: calc(11.5px * var(--nc-bulb-scale, 1)) !important;
    line-height: 15.8px !important;
  }
}
.nc-bulb-row-meta {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: calc(10.5px * var(--nc-bulb-scale, 1)) !important;
  letter-spacing: -0.1px !important;
  color: #616161 !important;
  text-transform: lowercase !important;
}
.nc-bulb-row-price {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: calc(14px * var(--nc-bulb-scale, 1)) !important;
  line-height: 16.9px !important;
  letter-spacing: -0.1px !important;
}
@media (min-width: 1024px) {
  .nc-bulb-row-price { font-size: calc(13.5px * var(--nc-bulb-scale, 1)) !important; }
}
.nc-bulb-row-price-unit {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: calc(10px * var(--nc-bulb-scale, 1)) !important;
  letter-spacing: -0.1px !important;
  color: #616161 !important;
}
.nc-bulb-details-toggle {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  line-height: 16.5px !important;
  letter-spacing: -0.1px !important;
  color: rgba(31, 31, 31, .75) !important;
}
@media (min-width: 1024px) {
  .nc-bulb-details-toggle { font-size: 11px !important; }
}
.nc-bulb-specs-dt {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 11.5px !important;
  line-height: 17.3px !important;
  letter-spacing: -0.1px !important;
  color: #616161 !important;
}
.nc-bulb-specs-dd {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  line-height: 17.3px !important;
  letter-spacing: -0.1px !important;
  color: #1F1F1F !important;
}
.nc-bulbs-drawer-footer {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  line-height: 15.8px !important;
  letter-spacing: -0.1px !important;
  color: #616161 !important;
}
.nc-bulbs-drawer-footer strong {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: #1F1F1F !important;
}