- . Ten sam rozmiar/interlinia/
kolor co bullet pointy wyżej, bez left-paddingu (nie ma kropki do
zrobienia miejsca). */
.nc-desc-highlights > p,
.nc-desc-highlights-text > p {
font-size: 15.5px;
line-height: 1.55;
color: hsl(0 0% 25%);
margin: 0;
}
.nc-desc-highlights li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--nc-primary);
}
.nc-desc-highlights strong,
.nc-desc-highlights b {
font-weight: 600;
color: var(--nc-fg);
}
.nc-desc-highlights a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
.nc-desc-highlights a:hover {
color: var(--nc-primary);
}
}
/* Wariant ze zdjęciem obok (zabranym z sąsiedniej kolumny siatki PSE) */
.nc-desc-highlights.nc-desc-highlights--with-media {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
/* center, nie stretch — gdy tekst jest krótszy niż zdjęcie (które ma
własny min-height, patrz .nc-desc-highlights-media niżej), blok tekstu
ma się wyśrodkować w pionie względem wysokości wiersza (wyznaczonej
przez zdjęcie) zamiast rozciągać się na całą jej wysokość z pustym
miejscem u dołu. */
align-items: center;
background: transparent;
border: none;
padding: 0;
}
@media (min-width: 768px) {
.nc-desc-highlights.nc-desc-highlights--with-media {
grid-template-columns: 0.85fr 1.15fr;
}
.nc-desc-highlights-media { min-height: 550px; }
}
/* Mobile: zdjęcie zostaje widoczne, tylko jako osobny wiersz siatki POD
tekstem (grid-template-columns:1fr w bazowej regule wyżej już je stackuje
pionowo w kolejności z markupu: tekst, potem zdjęcie) — własna wysokość
zamiast dziedziczonej przez align-items:stretch z sąsiedniej kolumny na
desktopie. */
@media (max-width: 767px) {
.nc-desc-highlights-media {
height: 220px;
min-height: 320px !important;
}
}
.nc-desc-highlights-text {
padding: 1.25rem 1.5rem;
background: var(--nc-secondary);
border: 1px solid var(--nc-border);
border-radius: var(--nc-radius);
}
.nc-desc-highlights-media {
position: relative;
border-radius: var(--nc-radius);
overflow: hidden;
height: 100%;
/* min-height: 220px; */
}
/* Obrazek jako position:absolute — nie może wpływać na auto-wysokość wiersza siatki
(bez tego zdjęcie samo ustalało wysokość kolumny przez swój naturalny format,
przez co blok tekstowy obok nie dorównywał mu wysokością).
!important konieczne — moduł pshoweditor ładuje własny CSS z regułą
".pse-div img, .pse-figure img { height: auto !important }" bez wymogu
przodka .pse-grid, więc nadpisuje zwykłe reguły nawet po przeniesieniu
obrazka przez JS poza .pse-grid. */
#nc-product-page .nc-desc-highlights-media .pse-figure,
#nc-product-page .nc-desc-highlights-media .pse-div {
position: absolute !important;
inset: 0 !important;
}
#nc-product-page .nc-desc-highlights-media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: none !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
border-radius: var(--nc-radius) !important;
}
/* Siatka PSE, z której zabrano kolumnę ze zdjęciem — pozostała kolumna na całą szerokość */
.pse-grid.nc-pse-grid--single {
grid-template-columns: 1fr !important;
}
/* PSE grid (PrestaShow Editor) — 2 kolumny z wyrównaniem
Każdy selektor niżej (aż do końca bloku "Plain HTML z TinyMCE") jest
PODWÓJNIE scope'owany: ".nc-description" ORAZ "#nc-desc-full .nc-tab-content"
naraz. Powód: opis produktu renderuje się DWIEMA różnymi ścieżkami
(product-tabs.tpl), które dają RÓŻNY markup:
- Hook::exec('DisplayProductAdditionalDesc1') (rzeczywista, używana
ścieżka) →
— BEZ klasy .nc-description,
- fallback $product->description (gdy hook nic nie zwróci) →
— z klasą.
Scope'owanie WYŁĄCZNIE przez ".nc-description" (jak było wcześniej)
działa więc tylko dla fallbacku, który w praktyce prawie nigdy się nie
uruchamia — cała typografia PSE (nagłówki/akapity/listy) milczkiem nie
miała żadnego efektu na realnych kartach produktów (widoczne np. jako
dziedziczony, obcy styl `p { font-size:14px; letter-spacing:.8px }`
zamiast naszego). "#nc-desc-full .nc-tab-content" (ten sam selektor,
którego JS initDescHighlights w nc-product.js już używa do namierzenia
treści opisu) pokrywa ścieżkę hookową. */
#nc-product-page .nc-description .pse-grid,
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
/* margin-top i -bottom (nie sam margin-bottom) — .pse-grid jest zwykłym
blokiem w przepływie, więc jego margin-top KOLIDUJE (collapse) z
margin-bottom poprzedzającego akapitu (.pse-p: 0.5rem) zamiast się
do niego dodawać, dając symetryczny odstęp góra/dół niezależnie od
tego, czy sąsiad ma własny margines. Wcześniej (sam margin-bottom)
odstęp NAD wierszem-obrazkiem (np. baner "Kolekcja DORA") sprowadzał
się do samego 0.5rem akapitu nad nim, a POD nim był pełne 2.5rem —
stąd rażąca asymetria zgłoszona na zrzucie. */
margin: 1.25rem 0 !important;
align-items: center !important;
}
@media (min-width: 768px) {
#nc-product-page .nc-description .pse-grid,
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid {
grid-template-columns: 1fr 1fr !important;
gap: 2rem !important;
}
/* Wiersze PSE bywają 3- albo 4-kolumnowe (np. karty "zdjęcie + nagłówek +
opis" x3 w jednym rzędzie) — sztywne "1fr 1fr" wyżej dawało wtedy 2
kolumny + 3. element zepchnięty samotnie do nowego wiersza (rozjazd na
2 nierówne rzędy). ":has()" liczy realną liczbę kolumn w KONKRETNYM
.pse-grid i dobiera do niej siatkę, więc 2-kolumnowy zygzak (tekst/
zdjęcie) zostaje bez zmian, a rząd z 3+ kolumnami dostaje tyle torów,
ile faktycznie ma dzieci.
Ogólny kombinator sąsiedztwa (~), NIE :nth-child() — na produkcji
rozszerzenie Grammarly wstrzykuje własne jako
RODZEŃSTWO .column wewnątrz .pse-grid (przed pierwszą kolumną), co
przesuwało numerację :nth-child i selektor nigdy nie trafiał. "~"
liczy tylko wcześniejsze .column, ignorując cokolwiek wstrzyknięte
pomiędzy nimi przez rozszerzenia przeglądarki. */
/* align-items: start (nie odziedziczone "center" z bazowej reguły) —
przy 3+ kolumnach każda to osobna "karta" zdjęcie+nagłówek+tekst, a
"center" wyśrodkowywało całą kolumnę względem najwyższej (różna
długość tekstu pod zdjęciem), przez co same zdjęcia lądowały na
różnej wysokości od góry zamiast równo w linii. */
#nc-product-page .nc-description .pse-grid:has(> .column ~ .column ~ .column),
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid:has(> .column ~ .column ~ .column) {
grid-template-columns: repeat(3, 1fr) !important;
align-items: start !important;
}
#nc-product-page .nc-description .pse-grid:has(> .column ~ .column ~ .column ~ .column),
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid:has(> .column ~ .column ~ .column ~ .column) {
grid-template-columns: repeat(4, 1fr) !important;
align-items: start !important;
}
}
#nc-product-page .nc-description .pse-grid .column,
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid .column {
width: 100% !important;
float: none !important;
padding: 0 !important;
/* Moduł PSE (front.css) ładuje własne ".pse-grid .column-N { grid-column-end:
span N }" na podstawie SWOJEJ 12-kolumnowej siatki (grid-template-columns:
repeat(12, 1fr) w PSE) — bez !important, więc nic dotąd z nią nie
konkurowało. Nasz grid ma tylko 2 kolumny (1fr 1fr), więc np. "column-6"
próbujące zająć 6 torów zajmowało cały dostępny wiersz, spychając drugą
kolumnę na nowy wiersz siatki — stąd zdjęcie i tekst stackowały się mimo
poprawnego grid-template-columns. Reset do "1 kolumna = 1 tor". */
grid-column: auto !important;
}
/* Wymuszenie kolejności Tekst -> Zdjęcie w wierszach opisu na mobile,
niezależnie od kolejności źródłowej HTML (edytor PSE) — inaczej naprzemienny
układ (zygzak) na desktopie po zwinięciu do jednej kolumny daje np.
tekst -> zdjęcie -> zdjęcie -> tekst. */
@media (max-width: 767px) {
#nc-product-page .nc-description .pse-grid .column:has(img, .pse-figure, video, iframe),
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid .column:has(img, .pse-figure, video, iframe) {
order: 2;
}
#nc-product-page .nc-description .pse-grid .column:not(:has(img, .pse-figure, video, iframe)),
#nc-product-page #nc-desc-full .nc-tab-content .pse-grid .column:not(:has(img, .pse-figure, video, iframe)) {
order: 1;
}
}
/* Duplikat tytułu produktu (H1) + akapit "Kod produktu:" — edytor PSE
wstawia je automatycznie jako pierwszy blok opisu, ale tytuł produktu i
tak wyświetla się już osobno jako h1.nc-product-title nad galerią.
[data-arx-first-level] istnieje TYLKO w DOM-ie edytora (tryb
contenteditable w adminie) — nie jest zapisywane do treści produktu, więc
na froncie nigdy nie ma jak trafić w ten atrybut. Element do ukrycia
(akapit "Kod produktu:") jest więc wykrywany po TREŚCI w JS
(initDescHighlights, nc-product.js — dopasowanie tekstu, nie da się tego
zrobić czystym CSS) i oznaczany tą klasą. Technika "visually hidden" (jak
.nc-sr-only wyżej w tym pliku), NIE display:none — element zostaje w
źródle HTML/DOM (dostępny dla wyszukiwarek i czytników ekranu jako
metadane), po prostu nie zajmuje miejsca ani nie jest widoczny dla
klienta. */
.nc-desc-meta-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* PSE zdjęcia */
#nc-product-page .nc-description .pse-figure,
#nc-product-page #nc-desc-full .nc-tab-content .pse-figure {
margin: 0 !important;
border-radius: var(--nc-radius) !important;
overflow: hidden !important;
}
/* max-height — ten sam powód co przy .nc-description img wyżej w tym pliku
(bardzo wysokie/portretowe zdjęcia w opisie rozciągały całą sekcję) —
object-fit:contain zamiast ucinania, bez wymuszonego tła letterboxu. */
#nc-product-page .nc-description .pse-img,
#nc-product-page #nc-desc-full .nc-tab-content .pse-img {
width: 100% !important;
height: auto !important;
max-height: 700px !important;
object-fit: contain !important;
display: block !important;
border-radius: var(--nc-radius) !important;
}
@media (max-width: 639px) {
#nc-product-page .nc-description .pse-img,
#nc-product-page #nc-desc-full .nc-tab-content .pse-img {
max-height: 500px !important;
}
}
/* PSE nagłówki — ta sama skala co .nc-desc-highlights-text (kafelek "W
skrócie"): akapit/li = 15.5px to punkt odniesienia dla całej reszty
opisu, nagłówki proporcjonalnie większe wg poziomu (h1 > h2 > h3 > h4,
każdy wyraźnie ponad 15.5px, malejąco). .pse-h2 zdefiniowane PRZED
.pse-h1 — realne treściowe nagłówki w PSE (np. "Kolor i materiał")
noszą WYŁĄCZNIE klasę .pse-h2; edytor dokleja .pse-h1 tylko do
duplikatu tytułu produktu na samym początku opisu (element wtedy ma
OBIE klasy naraz: class="pse-h2 pse-h1") — ale ten duplikat i tak jest
trwale ukrywany jako metadana (patrz .nc-desc-meta-hidden, initDescHighlights
w nc-product.js), więc w praktyce widoczny jest zawsze tylko .pse-h2.
Kolejność (.pse-h1 na końcu) zostaje wyłącznie jako zabezpieczenie na
przyszłość — przy równej specyficzności i obu klasach na jednym
elemencie wygrywa reguła zdefiniowana później w pliku, więc to .pse-h1
(właściwy, większy rozmiar) miałby pierwszeństwo, gdyby kiedyś jednak
coś z klasą .pse-h1 zostało pokazane. */
#nc-product-page .nc-description .pse-h2,
#nc-product-page #nc-desc-full .nc-tab-content .pse-h2 {
font-size: 19.5px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 1.25rem 0 0.75rem !important;
line-height: 1.3 !important;
text-transform: none !important;
}
#nc-product-page .nc-description .pse-h2:first-child,
#nc-product-page #nc-desc-full .nc-tab-content .pse-h2:first-child {
margin-top: 0 !important;
}
#nc-product-page .nc-description .pse-h1,
#nc-product-page #nc-desc-full .nc-tab-content .pse-h1 {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 0 0 0.5rem !important;
line-height: 1.3 !important;
text-transform: none !important;
}
/* PSE akapity — 15.5px/1.55, identycznie jak tekst w kafelku "W skrócie"
(.nc-desc-highlights li) — jeden wspólny rozmiar bazowy dla całego opisu. */
#nc-product-page .nc-description .pse-p,
#nc-product-page #nc-desc-full .nc-tab-content .pse-p {
font-size: 15.5px !important;
line-height: 1.55 !important;
color: hsl(0 0% 25%) !important;
margin: 0 0 0.5rem !important;
}
/* PSE listy — ta sama typografia co paragrafy wyżej */
#nc-product-page .nc-description .pse-ul,
#nc-product-page #nc-desc-full .nc-tab-content .pse-ul {
list-style: disc !important;
padding-left: 1.25rem !important;
margin: 0 0 0.75rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
#nc-product-page .nc-description .pse-li,
#nc-product-page #nc-desc-full .nc-tab-content .pse-li {
font-size: 15.5px !important;
line-height: 1.55 !important;
color: hsl(0 0% 25%) !important;
padding-left: 0.25rem !important;
}
#nc-product-page .nc-description .pse-strong,
#nc-product-page #nc-desc-full .nc-tab-content .pse-strong,
#nc-product-page .nc-description .pse-b,
#nc-product-page #nc-desc-full .nc-tab-content .pse-b {
font-weight: 600 !important;
color: var(--nc-fg) !important;
}
/* cvProductAdditionalDesc wrapper — reset marginesów */
#nc-product-page .nc-description .cvProductAdditionalDesc,
#nc-product-page #nc-desc-full .nc-tab-content .cvProductAdditionalDesc {
font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}
/* ── Plain HTML z TinyMCE (h1-h4/p/ul/a) — bez PSE ──
Ta sama skala co blok PSE wyżej i kafelek "W skrócie": akapit/li bazowo
15.5px, nagłówki proporcjonalnie większe malejąco wg poziomu (h1 22px >
h2 19.5px > h3 18px > h4 16.5px), wszystkie wyraźnie ponad tekstem
akapitu, żeby hierarchia była czytelna niezależnie od tego, ile
poziomów nagłówków dany opis faktycznie wykorzystuje. */
#nc-product-page .nc-description h1,
#nc-product-page #nc-desc-full .nc-tab-content h1,
#nc-product-page .nc-description-short h1 {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 1.25rem 0 0.625rem !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#nc-product-page .nc-description h2,
#nc-product-page #nc-desc-full .nc-tab-content h2,
#nc-product-page .nc-description-short h2 {
font-size: 19.5px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 1.25rem 0 0.625rem !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#nc-product-page .nc-description h3,
#nc-product-page #nc-desc-full .nc-tab-content h3,
#nc-product-page .nc-description-short h3 {
font-size: 18px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 1.25rem 0 0.625rem !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#nc-product-page .nc-description h4,
#nc-product-page #nc-desc-full .nc-tab-content h4,
#nc-product-page .nc-description-short h4 {
font-size: 16.5px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 1.25rem 0 0.625rem !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#nc-product-page .nc-description h1:first-child,
#nc-product-page #nc-desc-full .nc-tab-content h1:first-child,
#nc-product-page .nc-description h2:first-child,
#nc-product-page #nc-desc-full .nc-tab-content h2:first-child,
#nc-product-page .nc-description h3:first-child,
#nc-product-page #nc-desc-full .nc-tab-content h3:first-child,
#nc-product-page .nc-description h4:first-child,
#nc-product-page #nc-desc-full .nc-tab-content h4:first-child,
#nc-product-page .nc-description-short h1:first-child,
#nc-product-page .nc-description-short h2:first-child,
#nc-product-page .nc-description-short h3:first-child,
#nc-product-page .nc-description-short h4:first-child { margin-top: 0 !important; }
#nc-product-page .nc-description p,
#nc-product-page #nc-desc-full .nc-tab-content p,
#nc-product-page .nc-description-short p {
font-size: 15.5px !important;
line-height: 1.55 !important;
margin: 0 0 0.625rem !important;
color: hsl(0 0% 25%) !important;
}
#nc-product-page .nc-description ul,
#nc-product-page #nc-desc-full .nc-tab-content ul,
#nc-product-page .nc-description ol,
#nc-product-page #nc-desc-full .nc-tab-content ol {
list-style: disc !important;
padding-left: 1.25rem !important;
margin: 0 0 1rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.375rem !important;
}
#nc-product-page .nc-description li,
#nc-product-page #nc-desc-full .nc-tab-content li {
font-size: 15.5px !important;
line-height: 1.55 !important;
color: hsl(0 0% 25%) !important;
padding-left: 0.25rem !important;
}
#nc-product-page .nc-description strong,
#nc-product-page #nc-desc-full .nc-tab-content strong,
#nc-product-page .nc-description b,
#nc-product-page #nc-desc-full .nc-tab-content b {
font-weight: 600 !important;
color: var(--nc-fg) !important;
}
#nc-product-page .nc-description a,
#nc-product-page #nc-desc-full .nc-tab-content a,
#nc-product-page .nc-description-short a {
color: var(--nc-primary) !important;
text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-description a:hover,
#nc-product-page #nc-desc-full .nc-tab-content a:hover,
#nc-product-page .nc-description-short a:hover { text-decoration: underline !important; }
}
/* Pokaż pełny opis — toggle */
.nc-desc-full-wrap {
margin-top: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--nc-border);
}
#section-opis .nc-desc-highlights--visible + .nc-desc-full-wrap { margin-top: 0.5rem; }
/* Mgła na boksie "Najważniejsze parametry" — mask-image zamiast gradientu
na osobnym ::after. Maskuje CAŁY box (treść + border + box-shadow) naraz,
więc obramowanie znika razem z resztą zamiast prześwitywać spod warstwy
nałożonej tylko na wnętrze — to był źródłowy problem poprzedniego podejścia
(::after nie mógł zakryć border/box-shadow rodzica, bo są rysowane na jego
krawędzi, poza obszarem, na którym leżał pseudoelement).
8rem = 80px strefy zanikania (przy zmierzonej wysokości wiersza 36.8px to
ponad 2 wiersze), reszta od góry w pełni widoczna (czarna maska = widoczne). */
.nc-specs-box {
-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 8rem), transparent 100%);
mask-image: linear-gradient(to bottom, black calc(100% - 8rem), transparent 100%);
}
.nc-specs.is-expanded .nc-specs-box {
-webkit-mask-image: none;
mask-image: none;
}
/* Mgła na opisie krótkim */
.nc-description-short {
position: relative;
}
.nc-description-short::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3rem;
background: linear-gradient(to bottom, transparent, var(--nc-bg));
pointer-events: none;
border-radius: 0 0 var(--nc-radius) var(--nc-radius);
transition: opacity .3s;
}
.nc-desc-full-wrap.is-expanded ~ .nc-description-short::after,
section.is-expanded .nc-description-short::after {
opacity: 0;
}
.nc-desc-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: auto;
margin: 1.25rem auto 0;
padding: 1rem 2.5rem;
border: 1px solid var(--nc-border);
border-radius: var(--nc-radius);
background: var(--nc-secondary);
font-size: 14px;
font-weight: 600;
color: var(--nc-fg);
cursor: pointer;
transition: background .15s, border-color .15s;
font-family: inherit;
}
.nc-desc-toggle[data-nc-toggle="nc-specs-extra"] { padding: 1rem 2.5rem; }
@media (hover: hover) and (pointer: fine) {
.nc-desc-toggle:hover { background: hsl(36 25% 92%); border-color: hsl(0 0% 70%); }
}
.nc-desc-toggle[aria-expanded="true"] .nc-chevron { transform: rotate(180deg); }
/* Płynna animacja rozwijania */
.nc-desc-full,
.nc-specs-extra {
overflow: hidden;
transition: max-height .4s ease, opacity .3s ease;
max-height: 0;
opacity: 0;
}
.nc-desc-full.is-open,
.nc-specs-extra.is-open {
opacity: 1;
}
.nc-desc-full[hidden],
.nc-specs-extra[hidden] {
display: block !important;
max-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
}
.nc-desc-full { margin-bottom: 1rem; }
/* Tabela specyfikacji — styl React
Bez overflow-x:auto — per spec CSS Overflow, gdy jedna oś ma overflow inny
niż visible, przeglądarka wymusza auto na DRUGIEJ osi (nie da się mieć
overflow-x:auto + overflow-y:visible), stąd nieoczekiwany pionowy scrollbar
gdy zawartość przekroczyła wysokość kontenera o parę pikseli. .nc-specs-box
ma już overflow:hidden, więc pozioma treść i tak nie ucieknie. */
.nc-specs {
overflow: visible;
}
.nc-specs-box {
box-shadow: inset 0 0 0 1px var(--nc-border);
border-radius: var(--nc-radius);
overflow: hidden;
margin-bottom: 1.75rem;
border: 1px solid rgba(217, 219, 221, 0.5);
}
.nc-specs-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.nc-specs-table + .nc-specs-table { margin-top: 0; }
.nc-specs-group-header {
background: var(--nc-secondary) !important;
border-top: 1px solid var(--nc-border) !important;
border-bottom: 1px solid var(--nc-border) !important;
padding: 0.75rem 1rem 0.375rem !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
color: var(--nc-fg) !important;
}
.nc-specs-table:first-child .nc-specs-group-header {
border-top: none !important;
}
.nc-specs-row:nth-child(odd) { background: var(--nc-bg); }
.nc-specs-row:nth-child(even) { background: hsl(36 25% 97%); }
.nc-specs-key {
width: 40%;
padding: 0.75rem 1rem;
font-weight: 400;
color: var(--nc-muted-fg);
border-bottom: none;
text-align: left;
vertical-align: top;
font-size: 14px;
}
.nc-specs-val {
padding: 0.75rem 1rem;
color: var(--nc-fg);
font-weight: 600;
border-bottom: none;
border: 1px solid rgba(217, 219, 221, 0.5);
vertical-align: top;
font-size: 14px;
}
.nc-accordion { display: flex; flex-direction: column; }
.nc-accordion-item { border-bottom: 1px solid var(--nc-border); }
.nc-accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
background: transparent;
border: none;
font-size: 15px;
font-weight: 600;
color: var(--nc-fg);
cursor: pointer;
text-align: left;
}
@media (hover: hover) and (pointer: fine) {
.nc-accordion-trigger:hover { color: var(--nc-primary); }
}
.nc-accordion-trigger[aria-expanded="true"] .nc-chevron { transform: rotate(180deg); }
.nc-accordion-panel { padding-bottom: 1rem; }
.nc-accordion-panel p { font-size: 14px; line-height: 1.7; color: hsl(0 0% 20%); margin: 0; }
.nc-accordion-panel[hidden] { display: none; }
/* ─────────────────────────────────────────────
ŻARÓWKI
───────────────────────────────────────────── */
.nc-bulbs {}
.nc-bulbs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media (min-width: 640px) { .nc-bulbs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nc-bulbs-grid { grid-template-columns: repeat(4, 1fr); } }
.nc-bulb-tile {
display: flex;
flex-direction: column;
border: 1px solid var(--nc-border);
border-radius: var(--nc-radius);
overflow: hidden;
text-decoration: none;
color: var(--nc-fg);
background: var(--nc-card);
transition: box-shadow .15s;
}
@media (hover: hover) and (pointer: fine) {
.nc-bulb-tile:hover { box-shadow: var(--nc-shadow-card); }
}
.nc-bulb-img-wrap { aspect-ratio: 1; background: var(--nc-product-bg); }
.nc-bulb-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nc-bulb-info { padding: 0.625rem; display: flex; flex-direction: column; gap: 0.25rem; }
.nc-bulb-name { font-size: 12px; font-weight: 500; }
.nc-bulb-price { font-size: 14px; font-weight: 700; color: var(--nc-primary); }
/* ─────────────────────────────────────────────
MODAL (Zapytaj o produkt)
───────────────────────────────────────────── */
.nc-modal {
position: fixed;
inset: 0;
z-index: 900;
display: flex;
align-items: flex-end;
justify-content: center;
}
.nc-modal[hidden] { display: none; }
@media (min-width: 640px) { .nc-modal { align-items: center; } }
.nc-modal-backdrop {
position: absolute;
inset: 0;
background: hsl(0 0% 12% / .4);
cursor: pointer;
/* Przyciemnienie wchodzi płynnie razem z panelem — .is-open jest
ustawiane na rodzicu (.nc-modal), patrz initAskModal/initAskFormModal
w nc-product.js (ten sam wzorzec co initBulbsDrawer: hidden=false →
rAF dodaje .is-open → transitionend zdejmuje hidden przy zamykaniu).
Nasłuch transitionend celowo wisi na TYM elemencie (nie na panelu) —
ta reguła obowiązuje na WSZYSTKICH szerokościach, więc zawsze się
odpali, w przeciwieństwie do transform panelu, który na desktopie
się nie zmienia (patrz .nc-modal-panel niżej). */
opacity: 0;
transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.nc-modal.is-open .nc-modal-backdrop { opacity: 1; }
.nc-modal-panel {
z-index: 1;
background: var(--nc-card);
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* Mobile: "bottom sheet" — panel jest SAM position:fixed, przyklejony do
dołu viewportu, niezależnie od flex/align-items na rodzicu (.nc-modal) —
position:fixed liczy się od viewportu (żaden przodek w tym poddrzewie
nie ma transform/filter/perspective, patrz initAskModal — modal jest
portalowany do właśnie po to, by to zagwarantować). */
@media (max-width: 639px) {
.nc-modal-panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100%;
max-width: 100%;
height: auto;
max-height: 90vh;
border-radius: 20px 20px 0 0;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.nc-modal.is-open .nc-modal-panel {
transform: translateY(0);
}
/* Uchwyt "drag handle" — czysto wizualny (przeciąganie gestem nie jest
zaimplementowane), sygnalizuje bottom-sheet; ten sam dla obu modali
("Zapytaj o produkt" i sub-panelu "Formularz kontaktowy"). */
.nc-modal-panel::before {
content: '';
flex-shrink: 0;
display: block;
width: 38px;
height: 4px;
border-radius: 999px;
background: #d1d5db;
margin: 8px auto 4px;
}
}
/* Desktop: wycentrowany dialog */
@media (min-width: 640px) {
.nc-modal-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(560px, calc(100vw - 2rem));
border-radius: 12px;
border: 1px solid var(--nc-border);
box-shadow: 0 20px 60px hsl(0 0% 0% / .2);
}
}
.nc-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1rem 0.75rem;
border-bottom: 1px solid var(--nc-border);
flex-shrink: 0;
}
@media (min-width: 640px) { .nc-modal-header { padding: 1.25rem 1.5rem 0.75rem; } }
.nc-modal-title { font-size: 17px; font-weight: 700; color: var(--nc-fg); margin: 0 0 0.25rem; line-height: 1.3; }
@media (min-width: 640px) { .nc-modal-title { font-size: 18px; } }
.nc-modal-subtitle { font-size: 12.5px; color: var(--nc-muted-fg); line-height: 1.5; margin: 0; }
@media (min-width: 640px) { .nc-modal-subtitle { font-size: 13px; } }
.nc-modal-close {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--nc-radius);
border: 1px solid hsl(0 0% 0% / .1);
background: var(--nc-card);
box-shadow: 0 1px 3px hsl(0 0% 0% / .06);
display: grid;
place-items: center;
cursor: pointer;
color: var(--nc-fg);
transition: background .12s;
}
@media (hover: hover) and (pointer: fine) {
.nc-modal-close:hover { background: var(--nc-secondary); }
}
/* ─────────────────────────────────────────────
MODAL "ZAPYTAJ O PRODUKT" — wybór formy kontaktu
Bottom-sheet na mobile / wycentrowany na desktopie, jak każdy .nc-modal
(patrz reguły .nc-modal-panel wyżej) — align-items tu bez realnego efektu
(panel jest position:fixed, poza flow rodzica), zostaje z przyzwyczajenia
do wcześniejszej wersji. z-index bardzo wysoki (999999) — ma wygrywać z
absolutnie wszystkim na stronie (sticky nav, header itd.), scroll strony
w tle NIE jest blokowany (patrz initAskModal w nc-product.js — świadomie
bez body.overflow:hidden).
───────────────────────────────────────────── */
.nc-ask-modal {
align-items: center !important;
z-index: 999999;
}
.nc-ask-modal .nc-modal-backdrop {
background: rgba(0, 0, 0, 0.4);
}
.nc-ask-modal .nc-modal-header {
padding: 24px 24px 16px;
border-bottom: none;
}
/* Sub-panel "Formularz kontaktowy" — pozycjonowanie/animacja (mobile
bottom-sheet, desktop wycentrowany dialog) dziedziczy z generycznych
reguł .nc-modal-panel (patrz wyżej, przy .nc-modal) — te same co kafelek
wyboru formy kontaktu (#nc-ask-modal). Jedyna różnica: węższy dialog na
desktopie. */
@media (min-width: 640px) {
#nc-ask-form-modal .nc-modal-panel { width: min(520px, calc(100vw - 2rem)); }
}
#nc-ask-form-modal .nc-modal-header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 16px 12px;
border-bottom: 1px solid var(--nc-border);
}
@media (min-width: 640px) {
#nc-ask-form-modal .nc-modal-header { padding: 16px 20px 12px; }
}
#nc-ask-form-back,
#nc-ask-form-close,
#nc-ask-close {
border-radius: 8px;
border-color: var(--nc-border);
}
#nc-ask-form-back { width: 36px; height: 36px; }
#nc-ask-form-close,
#nc-ask-close { width: 40px; height: 40px; box-shadow: 0 1px 2px hsl(0 0% 0% / .06); }
#nc-ask-form-back svg,
#nc-ask-form-close svg,
#nc-ask-close svg { width: 18px; height: 18px; }
#nc-ask-form-modal .nc-modal-title { line-height: 1.25 !important; }
#nc-ask-form-modal .nc-modal-subtitle {
margin-top: 2px !important;
font-size: 12.5px !important;
line-height: 1.375 !important;
}
/* Nagłówek sub-panelu formularza — przycisk "Wstecz" po lewej (ten sam
styl co "X", patrz .nc-modal-close), tytuł/podtytuł wypełniają resztę
miejsca (flex:1), zamknięcie zostaje przy prawej krawędzi. */
.nc-ask-form-header-text { flex: 1; min-width: 0; }
/* Typografia dokładnie wg zmierzonych wartości z referencji (Poppins,
wagi/rozmiary/tracking/kolor per element) — jawny font-family + weight,
bo Font Ninja wstrzykuje własne (ten sam powód co FIXUPS v18/v19 wyżej
w tym pliku). */
.nc-ask-modal .nc-modal-title {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 17px !important;
line-height: 21.3px !important;
letter-spacing: -0.3px !important;
color: #1F1F1F !important;
}
.nc-ask-modal .nc-modal-subtitle {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 17.2px !important;
letter-spacing: -0.1px !important;
color: #616161 !important;
}
.nc-ask-tiles {
padding: 0 24px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nc-ask-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: var(--nc-card);
text-align: left;
text-decoration: none;
color: inherit;
font-family: inherit;
width: 100%;
}
.nc-ask-tile--ctx {
background: var(--nc-card);
background-color: rgba(248, 245, 242, 0.5);
}
.nc-ask-tile--action {
cursor: pointer;
transition: border-color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) {
.nc-ask-tile--action:hover {
border-color: hsl(0 0% 55%);
background: hsl(36 20% 98%);
}
}
.nc-ask-tile-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
background: #f5f5f4;
display: grid;
place-items: center;
color: var(--nc-fg);
overflow: hidden;
}
.nc-ask-tile-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nc-ask-tile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nc-ask-tile-eyebrow {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: 10px !important;
line-height: 15px !important;
letter-spacing: 0.5px !important;
color: #616161 !important;
text-transform: uppercase;
}
.nc-ask-tile-title {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 700 !important;
color: #1F1F1F !important;
}
/* Nazwa produktu (kafelek kontekstu) — mniejsza niż tytuły kafelków akcji */
.nc-ask-tile--ctx .nc-ask-tile-title {
font-size: 13px !important;
line-height: 17.9px !important;
letter-spacing: -0.1px !important;
}
.nc-ask-tile--action .nc-ask-tile-title {
font-size: 14px !important;
line-height: 17.5px !important;
letter-spacing: -0.1px !important;
}
.nc-ask-tile-sub {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 17.2px !important;
letter-spacing: -0.1px !important;
color: #616161 !important;
}
.nc-ask-modal-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-top: 1px solid var(--nc-border);
font-size: 12.5px;
color: var(--nc-muted-fg);
}
.nc-ask-modal-footer svg { flex-shrink: 0; color: var(--nc-muted-fg); }
/* fill:none !important — ikony w tym modalu mają być czystym obrysem
(stroke), nie wypełnionym kształtem; sam atrybut fill="none" w markupie
nie zawsze wygrywa (patrz analogiczne fixupy przy .nc-chevron/.nc-delivery-icon
wyżej w tym pliku), więc dobijamy to jawnie w CSS z !important. */
.nc-modal-close svg,
.nc-ask-tile-icon svg,
.nc-ask-modal-footer svg {
fill: none !important;
}
#nc-ask-form-modal .nc-ask-form { padding: 1rem; display: flex; flex-direction: column; gap: 0.875rem; overflow-y: auto; flex: 1; }
/* Komunikat sukcesu/błędu po wysyłce (AJAX do sendtoafriend_ajax.php,
patrz initAskFormModal w nc-product.js) */
.nc-ask-form-status {
padding: 0.625rem 0.75rem;
border-radius: var(--nc-radius);
font-size: 13px;
line-height: 1.5;
}
.nc-ask-form-status--success {
background: hsl(142 55% 95%);
color: hsl(142 60% 25%);
border: 1px solid hsl(142 45% 80%);
}
.nc-ask-form-status--error {
background: hsl(4 90% 96%);
color: hsl(4 70% 35%);
border: 1px solid hsl(4 70% 85%);
}
@media (min-width: 640px) { #nc-ask-form-modal .nc-ask-form { padding: 1rem 1.25rem; } }
.nc-ask-product-ctx {
display: flex;
align-items: center;
gap: 0.75rem;
border-radius: 6px;
background: hsl(36 30% 96% / .5);
border: 1px solid var(--nc-border);
padding: 0.625rem;
}
.nc-ask-product-thumb {
flex-shrink: 0;
width: 4.25rem;
height: 4.25rem;
border-radius: 6px;
background: var(--nc-product-bg);
overflow: hidden;
border: 1px solid var(--nc-border);
}
.nc-ask-product-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nc-ask-product-ctx-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--nc-muted-fg); }
.nc-ask-product-ctx-name {
font-size: 13px;
font-weight: 700;
line-height: 1.375;
color: var(--nc-fg);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nc-form-field { display: flex; flex-direction: column; gap: 0.25rem; }
.nc-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--nc-fg); }
.nc-required { color: var(--nc-primary); }
.nc-optional { font-weight: 400; color: var(--nc-muted-fg); }
.nc-input,
.nc-textarea {
width: 100%;
padding-inline: 0.75rem;
border: 1px solid var(--nc-border);
border-radius: 6px;
background: var(--nc-bg);
font-size: 14px;
color: var(--nc-fg);
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.nc-input { height: 4.25rem; }
.nc-textarea { padding-block: 0.625rem; min-height: 6rem; resize: vertical; }
.nc-input:focus,
.nc-textarea:focus {
outline: none;
box-shadow: 0 0 0 2px hsl(283 76% 43.7% / .4);
}
/* iOS Safari auto-zoomuje CAŁĄ stronę po wejściu w focus na input/textarea
z font-size < 16px (ignoruje user-scalable=0 z meta viewport — to
ograniczenie dotyczy tylko pinch-zoomu, nie tego automatycznego). Efekt:
treść (w tym placeholder) "skacze" i powiększa się przy kliknięciu w
pole. 16px na mobile eliminuje to zjawisko u źródła; wygląd (14px)
zostaje bez zmian od 640px w górę. */
@media (max-width: 639px) {
.nc-input,
.nc-textarea {
font-size: 16px;
}
}
.nc-form-check {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
/* Font Ninja wstrzykuje własny font-family/weight (patrz FIXUPS v18/v19
wyżej w tym pliku) — jawne nadpisanie z !important, ten sam wzorzec. */
.nc-form-check span {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 1.4 !important;
color: var(--nc-muted-fg) !important;
}
/* Custom checkbox — natywny , wtyczka Uniform (autoload/15-jquery.
uniform-modified.js, globalnie owija WSZYSTKIE checkboxy w motywie we
własny i chowa oryginalny input) jest dla NIEGO
wyłączona wprost w tamtym pliku (selektor :not(.nc-check-input)) —
dlatego można to swobodne stylować przez appearance:none, bez walki z
DOM-em wstrzykiwanym przez uniform.js. */
.nc-check-input {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 16px;
height: 16px;
margin: 0;
margin-top: 2px;
border: 1.5px solid #6b7280;
border-radius: 4px;
background-color: #ffffff;
cursor: pointer;
transition: background-color .15s, border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
.nc-check-input:hover { border-color: #4b5563; }
}
.nc-check-input:checked {
background-color: var(--nc-primary);
border-color: var(--nc-primary);
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.nc-check-input:focus-visible {
outline: none;
box-shadow: 0 0 0 2px hsl(283 76% 43.7% / .3);
}
#nc-ask-form-submit {
width: 100%;
height: 4.75rem;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: .025em;
box-shadow: 0 1px 2px hsl(0 0% 0% / .06);
}
.nc-ask-alt-contacts { padding-top: 0.75rem; border-top: 1px solid var(--nc-border); }
.nc-ask-alt-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--nc-muted-fg); text-align: center; margin-bottom: 0.5rem; }
.nc-ask-alt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.nc-ask-alt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 2.5rem;
border-radius: var(--nc-radius);
border: 1px solid var(--nc-border);
background: var(--nc-card);
font-size: 13px;
font-weight: 600;
color: var(--nc-fg);
text-decoration: none;
transition: border-color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) {
.nc-ask-alt-btn:hover { border-color: hsl(0 0% 40%); background: var(--nc-secondary); }
}
.nc-ask-alt-hours { margin-top: 0.5rem; font-size: 11.5px; color: var(--nc-muted-fg); text-align: center; }
.nc-ask-alt-hours strong { font-weight: 600; color: var(--nc-fg); }
/* ─────────────────────────────────────────────
STICKY BARS
───────────────────────────────────────────── */
/* Mobile sticky */
.nc-sticky-mobile {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
background: var(--nc-bg);
border-top: 1px solid var(--nc-border);
box-shadow: var(--nc-shadow-sticky);
padding: 0.625rem 1rem;
padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
}
.nc-sticky-mobile[hidden] { display: none; }
@media (min-width: 1024px) { .nc-sticky-mobile { display: none !important; } }
.nc-sticky-mobile-inner {
display: flex;
align-items: center;
gap: 0.625rem;
}
.nc-sticky-mobile-thumb {
flex-shrink: 0;
width: 4.5rem;
height: 4.5rem;
border-radius: 8px;
overflow: hidden;
background: var(--nc-product-bg);
border: 1px solid var(--nc-border);
}
.nc-sticky-mobile-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nc-sticky-mobile-info { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
/* Pisownia (Sentence case zamiast ALL CAPS, z wyjątkami np. "LED") ustawiana
w JS na treści węzła — ncTitleCase/applyTitleCase w nc-product.js (nie
text-transform w CSS, nie umiałoby wyjątków). */
.nc-sticky-mobile-name { font-size: 11px; font-weight: 700; color: var(--nc-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-sticky-mobile-price-row { display: flex; align-items: baseline; gap: 0.375rem; }
.nc-sticky-mobile-price { font-size: 15px; font-weight: 700; color: var(--nc-fg); }
.nc-sticky-mobile-price-old { font-size: 11px; font-weight: 400; color: var(--nc-muted-fg); text-decoration: line-through; }
.nc-sticky-mobile-cta {
flex-shrink: 0;
padding-inline: 12px;
height: 4rem;
font-size: 12px;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
}
/* Desktop sticky — wsuwana od dołu belka "Dodaj do koszyka" (Lovable:
DesktopStickyBar.tsx), pojawia się gdy .nc-add-to-cart-row w prawej
kolumnie wychodzi z viewportu (patrz initStickyBars w nc-product.js).
Widoczność sterowana WYŁĄCZNIE klasą .is-visible (transform+opacity),
nie atrybutem [hidden] — [hidden] daje display:none, co uniemożliwiłoby
animację (nie da się animować przejścia OD display:none). Domyślny stan
(poza ekranem, translateY(100%)) i tak jest niewidoczny bez potrzeby
dodatkowego display:none; pointer-events:none na tym etapie zabezpiecza
przed przypadkowym fokusem/klikiem w element leżący poza viewportem. */
.nc-sticky-desktop {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: #FFFFFF;
border-top: 1px solid #E5E7EB;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
transform: translateY(100%);
opacity: 0;
pointer-events: none;
transition: transform .25s ease, opacity .25s ease;
}
.nc-sticky-desktop.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
@media (max-width: 1023px) { .nc-sticky-desktop { display: none !important; } }
.nc-sticky-desktop-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
/* Więcej przestrzeni niż poprzednio (0.875rem) — pasek ma "oddychać",
nie sprawiać wrażenia ściśniętego. */
padding-block: 1.125rem;
padding-inline: 42px;
}
.nc-sticky-desktop-thumb {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #E5E7EB;
}
.nc-sticky-desktop-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Tytuł + podtytuł (wariant/materiał + punkty światła) — hierarchia
ciemny/pogrubiony vs stonowany szary, jak w reszcie buy-boxa. */
.nc-sticky-desktop-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.nc-sticky-desktop-name {
font-family: 'Poppins', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 19.5px !important;
letter-spacing: -0.1px !important;
color: #1F1F1F !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nc-sticky-desktop-subtitle {
font-family: 'Poppins', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 16.5px !important;
letter-spacing: -0.1px !important;
color: #616161 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Cena — aktualna pogrubiona/duża, stara przekreślona obok, "cena
regularna" jako mały dopisek pod spodem. */
.nc-sticky-desktop-price-wrap {
display: flex;
align-items: baseline;
gap: 8px;
flex-shrink: 0;
white-space: nowrap;
}
.nc-sticky-desktop-price-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.nc-sticky-desktop-price {
font-family: 'Poppins', system-ui, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 30px !important;
letter-spacing: -0.1px !important;
color: #000000 !important;
}
.nc-sticky-desktop-price-old {
font-family: 'Poppins', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 19.5px !important;
letter-spacing: -0.1px !important;
color: #616161 !important;
text-decoration: line-through;
}
.nc-sticky-desktop-price-label {
font-family: 'Poppins', system-ui, sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 15.8px !important;
letter-spacing: -0.1px !important;
color: #616161 !important;
}
.nc-sticky-desktop-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* Wishlist — kwadratowy przycisk-obrys obok CTA, ten sam wzorzec co
.nc-tertiary-btn w głównym buy-boxie (serce, .is-wished wypełnia je
kolorem marki) — patrz initWishlist w nc-product.js, wspólny stan
[data-nc-wishlist] między tym przyciskiem a głównym. */
.nc-sticky-desktop-wishlist {
flex-shrink: 0;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: transparent;
color: var(--nc-muted-fg);
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) {
.nc-sticky-desktop-wishlist:hover { color: var(--nc-primary); border-color: hsl(0 0% 60%); }
}
.nc-sticky-desktop-wishlist .nc-heart-icon { fill: none !important; }
.nc-sticky-desktop-wishlist.is-wished { color: var(--nc-primary); }
.nc-sticky-desktop-wishlist.is-wished .nc-heart-icon { fill: var(--nc-primary) !important; }
#nc-sticky-desktop-cta {
flex: 0 0 auto;
padding: 12px 24px;
}
#nc-sticky-desktop-cta {
font-family: 'Poppins', system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 22.5px !important;
letter-spacing: -0.1px !important;
color: #FFFFFF !important;
}
/* ─────────────────────────────────────────────
BULBS DRAWER — szuflada doboru żarówek
───────────────────────────────────────────── */
.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;
}
@media (hover: hover) and (pointer: fine) {
.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;
}
@media (hover: hover) and (pointer: fine) {
.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"
(próbowane w dwóch wariantach, 45rem i 32rem) — stopka szuflady ma
`margin-top: auto !important` (patrz #bulb-sidebar-wrapper
.nc-bulbs-drawer-footer w FIXUPS v16 niżej), więc i tak zawsze przykleja
się do samego dołu szuflady, NIEZALEŻNIE od wysokości listy. Skoro lista
z max-height przestawała wypełniać flex:1, między jej skróconym dołem a
przyklejoną do dołu stopką powstawała pusta, nieuzasadniona przerwa
(zgłoszone jako "za duży margines" + zbędny dodatkowy scroll) — zamiast
spójnego, przewidywalnego wyglądu. Lista z powrotem wypełnia całą
dostępną wysokość (flex:1); jeśli żarówek jest dużo, przewija się
WEWNĄTRZ siebie (overflow-y:auto), ale bez sztucznego obcinania na
z góry ustaloną liczbę wierszy. */
.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 byłaby przycięta przez overflow:hidden wyżej.
Selektor celowo NIE sprawdza atrybutu [hidden] na samym panelu — stary
moduł bulbselection (#bulb-sidebar-wrapper, bulb-sidebar.js) przełącza
widoczność panelu inline stylem (style="display:none" / usunięty inline
style), NIGDY atrybutem hidden. ":not([hidden])" było więc PRAWDZIWE dla
KAŻDEGO wiersza przez cały czas (nie ma czego negować), przez co ta
reguła nadpisywała height/overflow bezwarunkowo, na wszystkich wierszach,
niezależnie od stanu — JS-owa wysokość wiersza (--nc-bulb-row-h,
bulb-drawer-rows.js) nigdy realnie nie obowiązywała (potwierdzone w
DevTools: reguła zawsze wygrywała, przekreślając height/overflow bazowej
.nc-bulb-row). aria-expanded na przycisku "Szczegóły" jest natomiast
niezawodne w OBU wariantach (na nim opiera się już działająca rotacja
chevronu wyżej w tym pliku), więc to jego używamy zamiast stanu panelu. */
.nc-bulb-row:has(.nc-bulb-details-toggle[aria-expanded="true"]) {
height: auto;
overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
.nc-bulb-row:hover { border-color: hsl(0 0% 60%); }
}
/* --nc-bulb-scale — jak bardzo wiersz jest wyższy niż jego naturalna
wysokość (105px na tej — new-card — wielkości kafelków; kompaktowa
wersja starej karty ma własny, mniejszy baseline, patrz override w
"#bulb-sidebar-wrapper .nc-bulb-row" w sekcji FIXUPS v16). 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.
(patrz calc(...* var(--nc-bulb-scale)) przy tych elementach niżej i w
sekcjach FIXUPS v16/v20). Mnożnik *0.9 i przedział 0,9–1,5 (zamiast
pierwotnego 1–1,8) — na wyraźne życzenie, żeby całość (zdjęcie, cena,
przycisk) była delikatnie mniejsza niż w pierwszej wersji, zarówno przy
naturalnej wysokości wiersza (0,9×), jak i przy maksymalnym powiększeniu
na bardzo wysokich ekranach (1,5× zamiast 1,8×). */
.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;
}
/* Bez paddingu tutaj — squareCropImage (nc-product.js, initBulbSidebarImageAutocrop)
wykrywa realny bounding-box żarówki na canvasie i sam dopełnia wynik do
kwadratu równym marginesem ze wszystkich stron. Zwykły, symetryczny CSS
padding tego nie potrafi: zdjęcie samo w sobie ma żarówkę przesuniętą
względem środka kadru (widać to na przycięciach producenta), więc nawet
równe odstępy pudełka wokół obrazka i tak dają nierówny odstęp od
faktycznej treści — potwierdzone zrzutem z podświetloną (czerwoną)
ramką pokazującym więcej miejsca u góry niż na dole mimo padding:0.5rem.
Tło samego ![]()
zostaje białe (fillColor przekazywany do squareCropImage,
patrz initBulbSidebarImageAutocrop) — to .nc-bulb-row-img (kafelek) ma
beżowe tło, nie treść samego zdjęcia po docięciu. */
.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; }
/* Dzieci treści wiersza nie mogą się zapadać przy ciasnej wysokości wiersza
(--nc-bulb-row-h). h3 z line-clamp ma overflow:hidden, więc jego min-height
w flexboksie wynosi 0 i przy za małym wierszu znikał cały tytuł, podczas gdy
meta/stopka (min-height:auto) zostawały na miejscu. */
.nc-bulb-row-body > * { flex-shrink: 0; }
.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: block;
/* Pisownia (pierwsza litera duża, reszta mała, z wyjątkami np. "LED")
ustawiana teraz w JS na treści węzła — ncTitleCase w nc-product.js,
wołane przy budowie wiersza w BulbsDrawer.buildRow — nie przez
text-transform w CSS (nie umiałoby wyjątków, patrz komentarz w JS). */
}
.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;
}
@media (hover: hover) and (pointer: fine) {
.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;
}
@media (hover: hover) and (pointer: fine) {
.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; }
/* ─────────────────────────────────────────────
DODATKOWE ELEMENTY — hooki i moduły
───────────────────────────────────────────── */
/* Seigi cross-sell w buy-boxie */
#nc-product-page .nc-purchase > div:empty { display: none; }
/* Extra left / załączniki */
.nc-extra-left { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--nc-border); }
.nc-attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.nc-attachments li a {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 13px;
font-weight: 500;
color: var(--nc-primary);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.nc-attachments li a:hover { text-decoration: underline; }
}
.nc-attachments li p { font-size: 12px; color: var(--nc-muted-fg); margin: 0.125rem 0 0 1.375rem; }
/* Zakładka pliki do pobrania */
.nc-attachments-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nc-attachments-list li { display: flex; flex-direction: column; }
.nc-attachments-list a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 14px;
font-weight: 600;
color: var(--nc-primary);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.nc-attachments-list a:hover { text-decoration: underline; }
}
.nc-attachments-list p { font-size: 13px; color: var(--nc-muted-fg); margin: 0.25rem 0 0 1.5rem; }
/* Opis krótki + długi (fallback bez PSE) */
.nc-description-short {
margin-bottom: 1.5rem;
padding: 1.5rem;
border: 1px dashed var(--nc-border);
border-radius: var(--nc-radius);
font-size: 15.5px;
line-height: 1.55;
color: hsl(0 0% 25%);
}
.nc-description-short strong,
.nc-description-short b {
font-weight: 600;
color: var(--nc-fg);
}
.nc-description-short ul {
list-style: disc;
padding-left: 1.25rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nc-description-short li {
padding-left: 0.25rem;
}
/* Product actions hook */
.nc-product-actions { margin-bottom: 1.5rem; }
/* PayU raty — ukryj sekcję gdy pusta */
#zakupy-na-raty.is-empty { display: none; }
/* ─────────────────────────────────────────────
FIXUPS — integracja z modułami PS
───────────────────────────────────────────── */
/* Revws — gwiazdki inline i małe */
#nc-product-page .revws-product-custom-placement {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
font-size: 14px !important;
}
#nc-product-page .revws-product-custom-placement b { font-weight: 600 !important; }
#nc-product-page .revws-product-custom-placement-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.375rem !important;
text-decoration: none !important;
color: var(--nc-fg) !important;
}
#nc-product-page .revws-grading-product {
display: inline-flex !important;
align-items: center !important;
}
#nc-product-page .revws-grade-wrap {
display: inline-flex !important;
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
#nc-product-page svg.revws-grade {
width: 16px !important;
height: 16px !important;
fill: hsl(38 95% 52%) !important;
}
#nc-product-page svg.revws-grade-off { fill: hsl(0 0% 85%) !important; }
#nc-product-page .revws-count-text {
color: var(--nc-muted-fg) !important;
font-size: 14px !important;
}
/* Ukryj duplikaty przycisków z HOOK_EXTRA_RIGHT — na damidomo.pl ten sam
hook (tam: blockwishlist) dublował się z przyciskiem już renderowanym
przez {hook h="CustomBelowName"}. Na luminadeco.pl $HOOK_EXTRA_RIGHT to
JEDYNE źródło serca "Dodaj do listy życzeń" (moduł nxtalwishlist, patrz
komentarz w purchase-panel.tpl) — bez wyjątku :not(:has(...)) ta sama
reguła chowała je całkowicie, bo moduł owija swój markup dokładnie w te
same klasy Bootstrapa (.col-xs-12.col-sm-6.col-md-12.col-lg-6, patrz
themes/modula/modules/nxtalwishlist/views/templates/front/1.6/html.tpl). */
#nc-product-page .nc-tertiary-actions .col-xs-12:not(:has(.nxtal-wishlist-icon)),
#nc-product-page .nc-tertiary-actions .col-sm-6:not(:has(.nxtal-wishlist-icon)),
#nc-product-page .nc-tertiary-actions .col-md-12:not(:has(.nxtal-wishlist-icon)),
#nc-product-page .nc-tertiary-actions .col-lg-6:not(:has(.nxtal-wishlist-icon)) {
display: none !important;
}
/* nxtalwishlist — wygląd 1:1 z resztą .nc-tertiary-actions (ikona + tekst,
stonowany szary, bordo na hover/aktywne) zamiast domyślnego,
zewnętrznego wyglądu modułu. Bootstrapowy wrapper (.col-xs-12 itp.,
patrz wyjątek :not(:has(...)) wyżej) i .wishlist_icon w środku są tylko
strukturalne — display:contents "spłaszcza" je, żeby .nxtal-wishlist-icon
trafił jako bezpośredni flex-item .nc-tertiary-actions, obok "Zapytaj
o produkt". */
#nc-product-page .nc-tertiary-actions > div:has(.nxtal-wishlist-icon),
#nc-product-page .nc-tertiary-actions .wishlist_icon {
display: contents;
}
/* #product .nxtal-wishlist-icon w autoload/cv_custom.css (stary wygląd —
obramowana "kafelkowa" belka) ma wyższą specyficzność niż zwykła klasa
.nc-tertiary-btn, więc trzeba jawnie zresetować border/background/width/
padding/letter-spacing, których nasza reguła wcześniej nie nadpisywała. */
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.375rem;
width: auto;
padding: 0.5rem 0.75rem;
border: none;
border-radius: var(--nc-radius);
background: transparent;
cursor: pointer;
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--nc-muted-fg);
transition: color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon:hover {
color: var(--nc-primary);
border-color: transparent;
}
}
/* Dwa SVG serca (pełne/puste) są w DOM-ie zawsze naraz — moduł przełącza
tylko klasę .active na rodzicu, nie podmienia zawartości. */
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon svg {
width: 16px;
height: 16px;
min-width: 0;
margin-right: 0;
flex-shrink: 0;
display: none;
}
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon .heart-empty { display: block; }
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon.active .heart-empty { display: none; }
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon.active .heart-filled { display: block; }
#nc-product-page .nc-tertiary-actions .nxtal-wishlist-icon .wishlist-title { white-space: nowrap; }
/* Social proof — usuń nadmiarowe wewnątrz */
#nc-product-page .nc-social-proof b { font-weight: inherit; }
/* nc-extra-left — ukryj ukryte formularze modułów (send_friend etc.) */
#nc-product-page .nc-extra-left > div[style*="display: none"] { display: none !important; }
/* ─────────────────────────────────────────────
FIXUPS v2 — dopracowanie wyglądu
───────────────────────────────────────────── */
/* Przycisk jako (Dobierz żarówki) — bez podkreślenia */
#nc-product-page a.nc-btn { text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) {
#nc-product-page a.nc-btn:hover { text-decoration: none !important; }
}
/* Etykiety modułu (BLACK FRIDAY itp.) w jednym rzędzie z badge */
#nc-product-page .nc-badges { align-items: center; }
#nc-product-page .cv-product-labels { display: inline-flex; gap: 0.375rem; margin: 0; }
/* Hook displayProductPriceBlock (patrz purchase-panel.tpl) łapie WSZYSTKIE
podpięte moduły naraz — oprócz etykiet (cv_product_label) także
gm_omniprice ("Najniższa cena z 30 dni przed promocją") — tę informację
już pokazujemy osobno, ładniej, w .nc-price-omnibus, więc tu jest tylko
niechcianym duplikatem. Ukrywamy TYLKO ten jeden moduł, zostawiając
resztę hooka (etykiety) bez zmian. */
#nc-product-page .nc-badges .gm_omniprice { display: none !important; }
#nc-product-page .cv-product-label {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: 11px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 0.25rem 0.5rem;
border-radius: 4px;
line-height: 1;
}
/* Separator pionowy między widgetem oceny a social proof — zawsze widoczny
(nie tylko desktop), minimalnie ciemniejszy szary niż --nc-border i z
trochę większym odstępem od obu elementów po bokach. */
#nc-product-page .nc-rating-row .nc-social-proof {
position: relative;
padding-left: 0.875rem;
}
/* Brak separatora, gdy nie ma czego oddzielać — widget ocen chowa się
w JS (initRcReviewsGate, nc-product.js) gdy produkt ma 0 opinii, ale
ta pionowa kreska sama w sobie nie zależy od CSS [hidden], więc bez
tej reguły "wisiałaby" osierocona przed social-proof. */
#nc-product-page .nc-rating-row .nc-rc-widget-wrap[hidden] + .nc-social-proof {
padding-left: 0;
}
#nc-product-page .nc-rating-row .nc-rc-widget-wrap[hidden] + .nc-social-proof::before {
content: none;
}
#nc-product-page .nc-rating-row .nc-social-proof::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1rem;
background: hsl(30 8% 72%);
}
/* Ikony dostawy — lżejsze, neutralne zamiast bordo */
#nc-product-page .nc-delivery-icon { color: hsl(0 0% 45%) !important; }
/* ─────────────────────────────────────────────
FIXUPS v3 — breadcrumbs, badge, oceny
───────────────────────────────────────────── */
/* Breadcrumbs — bliżej lewej + ciaśniejsze odstępy */
#nc-product-page .nc-breadcrumbs-wrap { padding-inline: 0; }
#nc-product-page .nc-breadcrumbs-wrap .breadcrumb {
margin: 0;
padding: 2px 8px 2px 0px;
background: none;
display: flex;
/* flex-wrap: wrap; */
align-items: center;
gap: 0.25rem;
overflow-y: hidden !important;
scrollbar-width: none;
/* Poppins Regular 12px/16px, -0.1px tracking, #616161 — patrz FIXUPS
Font Ninja: trzeba jawnie nadpisać font-family/weight, bo plugin
wstrzykuje własne. */
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 400 !important;
font-size: 12px !important;
line-height: 16px !important;
letter-spacing: -0.1px !important;
color: #616161 !important;
}
#nc-product-page .nc-breadcrumbs-wrap .breadcrumb a {
font-family: 'Poppins', system-ui, sans-serif !important;
font-weight: 400 !important;
color: var(--nc-muted-fg);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-breadcrumbs-wrap .breadcrumb a:hover { color: var(--nc-primary); }
}
#nc-product-page .nc-breadcrumbs-wrap .navigation-pipe {
margin: 0 0.125rem;
color: hsl(0 0% 70%);
}
@media (max-width: 767px) {
#nc-product-page .nc-breadcrumbs-wrap .navigation-pipe {
margin: 0 0.5rem;
color: hsl(0 0% 70%);
}
}
/* Mobile — dokładnie jak stara karta (patrz global.css: .breadcrumb tam ma
po prostu overflow:hidden, ŻADNEGO scrolla dotykowego). Wcześniejsza
wersja robiła z tego poziomy scroll (żeby nie zajmować miejsca w pionie),
ale niezależnie od kombinacji overflow/touch-action/overscroll-behavior
dawało się złapać i przeciągać pionowo — bo to w ogóle jest zbędna
komplikacja, której stara karta nie ma. Zamiast dalej gonić idealne
zablokowanie scrolla, wracamy do prostego zawijania (flex-wrap:wrap już
jest w bazowej regule .breadcrumb wyżej) — nie ma kontenera przewijalnego,
więc nie ma czego przeciągać, punkt. */
/* Etykiety BLACK FRIDAY / DARMOWA DOSTAWA — większe (szersze + wyższe) */
#nc-product-page .cv-product-label,
#nc-product-page .nc-badge {
font-size: 13px !important;
padding: 0.5rem 0.875rem !important;
border-radius: 6px !important;
letter-spacing: .04em !important;
}
/* Oceny — usuń słowo "Opinie:" i wyśrodkuj w pionie z social proof */
#nc-product-page .revws-product-custom-placement > b { display: none !important; }
#nc-product-page .nc-rating-row {
align-items: center !important;
}
#nc-product-page .revws-grading-product,
#nc-product-page .revws-grade-wrap,
#nc-product-page svg.revws-grade {
vertical-align: middle !important;
}
#nc-product-page .revws-product-custom-placement-link {
line-height: 1 !important;
}
/* ─────────────────────────────────────────────
FIXUPS v4 — oceny (poprawny selektor ID)
revws-product-custom-placement to ID, nie klasa!
───────────────────────────────────────────── */
#nc-product-page #revws-product-custom-placement {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
font-size: 14px !important;
}
/* Ukryj słowo "Opinie:" */
#nc-product-page #revws-product-custom-placement > b { display: none !important; }
/* Link z gwiazdkami + licznik — wyrównane w pionie */
#nc-product-page #revws-product-custom-placement .revws-product-custom-placement-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.375rem !important;
}
/* ─────────────────────────────────────────────
FIXUPS v5 — pionowe wyrównanie oceny (ostateczne)
───────────────────────────────────────────── */
#nc-product-page .nc-rating-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0.5rem 0.75rem !important;
}
/* Wszystkie wewnętrzne kontenery revws w jednej linii, wyśrodkowane */
#nc-product-page #revws-product-custom-placement,
#nc-product-page #revws-product-custom-placement .revws-product-custom-placement-link,
#nc-product-page #revws-product-custom-placement .revws-grading,
#nc-product-page #revws-product-custom-placement .revws-grading-product {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
}
/* Gwiazdki — wrap i svg dokładnie wyśrodkowane */
#nc-product-page #revws-product-custom-placement .revws-grade-wrap {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#nc-product-page #revws-product-custom-placement svg.revws-grade {
display: block !important;
vertical-align: middle !important;
}
/* Licznik "(2 opinie)" — wyśrodkowany, bez własnego marginesu */
#nc-product-page #revws-product-custom-placement .revws-count-text {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Social proof — zwykły inline tekst, NIE flex: .nc-social-proof zawiera
mieszankę elementu () i zwykłego tekstu (" wybrało ten model")
— w kontenerze inline-flex przeglądarka traktuje ten tekst jako osobny
anonimowy flex item i przycina jego wiodącą spację na granicy z ,
przez co "17 klientów" i "wybrało" sklejały się bez odstępu. Zwykły
inline (jak reszta tekstu w rating-row) nie ma tego problemu, a pionowe
wyrównanie z gwiazdkami i tak zapewnia line-height wspólny dla całego
.nc-rating-row. */
#nc-product-page .nc-rating-row .nc-social-proof {
display: inline !important;
}
/* ─────────────────────────────────────────────
FIXUPS v6 — wersja użytkownika (poprawiona)
Reguły 1+2 wg propozycji; reguła 3 zmieniona tak,
by NIE przywracała ukrytego "Opinie:".
───────────────────────────────────────────── */
/* 1. Link z gwiazdkami + tekst */
#nc-product-page .revws-product-custom-placement-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
/* 2. Same gwiazdki */
#nc-product-page .revws-grading-product {
display: inline-flex !important;
align-items: center !important;
}
/* 3. Tekst o zakupach trzyma linię — ALE "Opinie:" zostaje ukryte */
#nc-product-page .nc-rating-row span:not(.revws-count-text) {
/* display: inline-flex !important; */
align-items: center !important;
}
#nc-product-page #revws-product-custom-placement > b { display: none !important; }
/* Zeruj margin-top z product.css motywu (psuje wyrównanie rzędu ocen) */
#nc-product-page #revws-product-custom-placement { margin-top: 0 !important; }
/* ═══════════════════════════════════════════════
OPINIE — styl React (revws module override)
═══════════════════════════════════════════════ */
/* Ukryj sekcję revws — opinie obsługuje Rating Captain
TYMCZASOWO WYŁĄCZONE (2026-09) — powrót do natywnych opinii revws w
miejsce RC, patrz komentarz przy initRevwsMove w nc-product.js oraz
purchase-panel.tpl/product-tabs.tpl. Reguły restylujące markup revws
(poniżej w tym pliku, sekcja "OPINIE — styl React") NIE były usuwane
przy przejściu na RC, więc nie trzeba ich teraz przywracać osobno. */
/* #nc-product-page #revws-section { display: none !important; } */
/* Lista opinii */
/* #nc-product-page .revws-review-list {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
} */
/* Karta opinii — jeden wspólny wiersz: gwiazdki + imię + badge + tytuł
opinii, do lewej (tak jak na starej karcie produktu), treść i akcje
osobno pod spodem. Moduł revws zagnieżdża tytuł głęboko
(.revws-review-details > .revws-review-review > .revws-review-box >
.revws-review-title), więc te trzy pośrednie kontenery są spłaszczone
przez display:contents — dzięki temu .revws-review-title trafia jako
bezpośredni flex-item do TEGO SAMEGO wiersza co .revws-review-author
(też spłaszczony), zamiast lądować jako osobny blok pod spodem.
(Potwierdzone: to faktyczny markup revws, nie pozostałość po Rating
Captain — patrz odciski itemprop="review"/schema.org/Review.) */
/* #nc-product-page .revws-review {
border: 1px solid var(--nc-border) !important;
border-radius: var(--nc-radius) !important;
padding: 1.25rem !important;
background: var(--nc-card) !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 0.5rem !important;
row-gap: 0.5rem !important;
}
#nc-product-page .revws-review-author,
#nc-product-page .revws-review-details,
#nc-product-page .revws-review-review,
#nc-product-page .revws-review-box {
display: contents !important;
}
#nc-product-page .revws-review-title {
order: 4 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
margin: 0 !important;
}
#nc-product-page .revws-review-content {
order: 5 !important;
flex-basis: 100% !important;
width: 100% !important;
}
#nc-product-page .revws-actions {
order: 6 !important;
flex-basis: 100% !important;
width: 100% !important;
}
#nc-product-page .revws-review-author-name {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--nc-fg) !important;
order: 2 !important;
}
#nc-product-page .revws-review .revws-grading {
order: 1 !important;
display: inline-flex !important;
}
#nc-product-page .revws-review .revws-grade-wrap {
padding: 0 1px !important;
}
#nc-product-page .revws-review svg.revws-grade {
width: 16px !important;
height: 16px !important;
fill: hsl(38 95% 52%) !important;
} */
/* Badge "Zweryfikowany zakup" */
#nc-product-page .revws-verified-buyer-badge {
order: 3 !important;
font-size: 11px !important;
font-weight: 600 !important;
color: hsl(142 60% 30%) !important;
background: none !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
}
#nc-product-page .revws-verified-buyer-badge::before {
content: "✓" !important;
font-weight: 700 !important;
}
/* Treść opinii */
/* #nc-product-page .revws-review-details {
margin: 0 !important;
padding: 0 !important;
}
#nc-product-page .revws-review-box {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#nc-product-page .revws-review-content {
font-size: 14px !important;
line-height: 1.7 !important;
color: hsl(0 0% 20%) !important;
margin: 0 !important;
font-style: normal !important;
}
#nc-product-page .revws-review-content::before {
content: "\201E" !important;
}
#nc-product-page .revws-review-content::after {
content: "\201D" !important;
} */
/* Akcje: zachowujemy domyślny styl modułu revws */
/* Przycisk "Napisz swoją opinię" */
#nc-product-page #revws-portal-product-reviews .form-group {
margin-top: 1.5rem !important;
}
#nc-product-page #revws-portal-product-reviews .btn-primary {
background: var(--nc-primary) !important;
color: var(--nc-primary-fg) !important;
border: none !important;
border-radius: var(--nc-radius) !important;
padding: 0.75rem 1.5rem !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: 'Poppins', system-ui, sans-serif !important;
text-transform: none !important;
letter-spacing: normal !important;
cursor: pointer !important;
transition: background .15s !important;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page #revws-portal-product-reviews .btn-primary:hover {
background: var(--nc-primary-hover) !important;
}
}
/* ═══════════════════════════════════════════════
FIXUPS v8 — spacing, typografia ceny, przyciski
═══════════════════════════════════════════════ */
/* 1. SPACING — więcej powietrza między sekcjami */
/* #nc-product-page .nc-purchase { gap: 0.75rem !important; } */
#nc-product-page .nc-product-identity { gap: 1rem !important; }
#nc-product-page .nc-badges { margin-bottom: 0.25rem !important; }
#nc-product-page .nc-price-block { gap: 0.375rem !important; margin-top: 0.25rem !important; }
#nc-product-page #buy_block {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
margin: 0 !important;
}
#nc-product-page .nc-delivery { padding-top: 1.5rem !important; margin-top: 0.25rem !important; }
/* 2. CENA — większa, mocniejsza */
#nc-product-page .nc-price-current {
font-size: 3rem !important;
font-weight: 800 !important;
line-height: 1.1 !important;
color: hsl(0, 0%, 0%) !important;
}
#nc-product-page .nc-price-row { gap: 0.625rem !important; align-items: baseline !important; }
#nc-product-page .nc-price-old {
font-size: 1rem !important;
color: hsl(0 0% 60%) !important;
font-weight: 500 !important;
}
/* "Oszczędzasz" + omnibus — lżejsze, mniejsze */
#nc-product-page .nc-price-saving {
font-size: 13px !important;
font-weight: 600 !important;
color: hsl(142 45% 35%) !important;
margin: 0 !important;
}
#nc-product-page .nc-price-omnibus {
font-size: 11px !important;
color: hsl(0 0% 55%) !important;
font-weight: 400 !important;
margin: 0 !important;
}
/* 3. DOBIERZ ŻARÓWKI — minimalny outline */
#nc-product-page .nc-btn--bulbs {
background: transparent !important;
border: 1px solid var(--nc-border) !important;
color: hsl(0 0% 25%) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-btn--bulbs:hover {
background: hsl(0 0% 98%) !important;
border-color: hsl(0 0% 60%) !important;
}
}
#nc-product-page .nc-btn--bulbs svg { stroke: currentColor !important; fill: none !important; }
/* 4. ILOŚĆ + KOSZYK — równa wysokość, czyste krawędzie */
#nc-product-page .nc-add-to-cart-row { align-items: stretch !important; }
#nc-product-page .nc-qty {
height: 3.25rem !important;
border: 1px solid var(--nc-border) !important;
}
#nc-product-page .nc-btn--add-to-cart {
height: 3.25rem !important;
text-shadow: none !important;
box-shadow: none !important;
font-weight: 700 !important;
}
#nc-product-page .nc-btn--add-to-cart svg { stroke: currentColor !important; fill: none !important; }
#nc-product-page .nc-qty-btn svg { stroke: currentColor !important; fill: none !important; }
/* 5. AKCJE DOLNE — outline ikony, lżejszy tekst, większy odstęp */
#nc-product-page .nc-tertiary-actions { gap: 1rem !important; padding-top: 0.5rem !important; padding-bottom: 1.75rem !important;}
#nc-product-page .nc-tertiary-btn {
font-size: 13px !important;
color: hsl(0 0% 50%) !important;
}
#nc-product-page .nc-tertiary-btn svg { stroke: currentColor !important; fill: none !important; }
#nc-product-page .nc-tertiary-btn.is-wished .nc-heart-icon { fill: var(--nc-primary) !important; }
/* ═══════════════════════════════════════════════
FIXUPS v9 — dopasowanie 1:1 do projektu React
(cofa przesadę z v8, ustawia wartości jak w Lovable)
═══════════════════════════════════════════════ */
/* SPACING jak React: buy box space-y-5 (1.25rem), cluster space-y-3 (0.75rem) */
/* #nc-product-page .nc-purchase { gap: 1.25rem !important; } */
#nc-product-page .nc-product-identity { gap: 0.75rem !important; }
#nc-product-page #buy_block { gap: 1.25rem !important; }
/* CENA jak React: text-3xl (1.875rem) bold primary */
#nc-product-page .nc-price-current {
font-size: 1.875rem !important;
font-weight: 700 !important;
color: hsl(0, 0%, 0%) !important;
}
#nc-product-page .nc-price-row { gap: 0.75rem !important; }
#nc-product-page .nc-price-old {
font-size: 1rem !important;
color: var(--nc-muted-fg) !important;
font-weight: 400 !important;
}
/* "Oszczędzasz" — ciemnoszary (foreground/75), NIE zielony; pill obok w linii */
#nc-product-page .nc-price-saving {
display: inline-flex !important;
align-items: center !important;
gap: 0.625rem !important;
flex-wrap: wrap !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
color: hsl(0 0% 30%) !important;
margin: 0.25rem 0 0 !important;
}
#nc-product-page .nc-price-saving .nc-stock-urgency { font-weight: 600 !important; }
/* Omnibus jak React: text-xs muted */
#nc-product-page .nc-price-omnibus {
font-size: 12px !important;
color: var(--nc-muted-fg) !important;
margin: 0.375rem 0 0 !important;
}
#nc-product-page .nc-price-omnibus-val { font-weight: 500 !important; color: var(--nc-fg) !important; }
/* KOSZYK — szeroki (flex-1) jak React; stepper stała szerokość */
#nc-product-page .nc-add-to-cart-row { display: flex !important; align-items: stretch !important; }
#nc-product-page .nc-add-to-cart-cta { flex: 1 1 auto !important; display: flex !important; }
#nc-product-page .nc-btn--add-to-cart { flex: 1 1 auto !important; width: 100% !important; }
#nc-product-page .nc-qty { flex: 0 0 auto !important; }
/* ═══════════════════════════════════════════════
FIXUPS v10 — więcej powietrza + większe przyciski
(świadomie większe niż React: spacing + wysokości CTA)
═══════════════════════════════════════════════ */
/* 1. SPACING — więcej oddechu między sekcjami */
#nc-product-page .nc-purchase { gap: 0rem !important; }
#nc-product-page .nc-product-identity { gap: 1rem !important; }
#nc-product-page #buy_block { gap: 1rem !important; }
#nc-product-page .nc-delivery { padding-top: 1.75rem !important; }
#nc-product-page .nc-badges { margin-bottom: 0.25rem !important; }
/* 2. CENA — wyraźnie większa */
#nc-product-page .nc-price-current {
font-size: 2.15rem !important;
font-weight: 700 !important;
line-height: 1.05 !important;
color: hsl(0, 0%, 0%) !important;
}
#nc-product-page .nc-price-old { font-size: 1.6rem !important; }
/* 3. DOBIERZ ŻARÓWKI — wyższy (52px), minimal outline */
#nc-product-page .nc-btn--bulbs {
height: 3.25rem !important;
background: transparent !important;
border: 1px solid var(--nc-border) !important;
color: hsl(0 0% 22%) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-btn--bulbs:hover { background: hsl(0 0% 98%) !important; border-color: hsl(0 0% 55%) !important; }
}
/* 4. ILOŚĆ + KOSZYK — duże i równe (52px) */
#nc-product-page .nc-qty,
#nc-product-page .nc-btn--add-to-cart,
#nc-product-page .nc-add-to-cart-cta {
height: 3.25rem !important;
min-height: 3.25rem !important;
}
#nc-product-page .nc-btn--add-to-cart {
font-size: 14px !important;
font-weight: 700 !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* 5. AKCJE DOLNE — większy odstęp, lżejszy tekst (outline ikony już ustawione) */
#nc-product-page .nc-tertiary-actions { gap: 1.25rem !important; padding-top: 0.5rem !important; }
#nc-product-page .nc-tertiary-btn { font-size: 13px !important; color: hsl(0 0% 50%) !important; }
/* ═══════════════════════════════════════════════
FIXUPS v11 — dokładnie wg React (h-11 vs h-[52px])
═══════════════════════════════════════════════ */
/* DOBIERZ ŻARÓWKI — React h-11 (44px), bg-secondary/50, border 1.5px */
#nc-product-page .nc-btn--bulbs {
height: 4.5rem !important;
min-height: 2.75rem !important;
background: hsl(36 30% 97%) !important;
border: 1.5px solid hsl(0 0% 38% / .25) !important;
color: var(--nc-fg) !important;
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-btn--bulbs:hover { background: hsl(36 30% 92%) !important; }
}
/* ILOŚĆ + KOSZYK — React h-[52px] (3.25rem), większe niż żarówki */
#nc-product-page .nc-qty,
#nc-product-page .nc-btn--add-to-cart,
#nc-product-page .nc-add-to-cart-cta {
height: 5.25rem !important;
min-height: 3.25rem !important;
}
/* Mobile: React h-12 (48px) */
@media (max-width: 639px) {
#nc-product-page .nc-qty,
#nc-product-page .nc-btn--add-to-cart,
#nc-product-page .nc-add-to-cart-cta {
height: 4rem !important;
min-height: 3rem !important;
}
}
/* KOSZYK — React: font-bold, shadow-sm (subtelny cień ZOSTAJE), bez text-shadow */
#nc-product-page .nc-btn--add-to-cart {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
gap: 10px !important;
box-shadow: 0 1px 2px hsl(0 0% 0% / .08) !important;
text-shadow: none !important;
}
/* Stepper — delikatnie szerszy (kosztem koszyka) */
#nc-product-page .nc-qty { width: 12rem !important; }
@media (max-width: 639px) { #nc-product-page .nc-qty { width: 9rem !important; } }
#nc-product-page .nc-qty-btn { width: 4rem !important; }
@media (max-width: 639px) { #nc-product-page .nc-qty-btn { width: 2.75rem !important; } }
/* ═══════════════════════════════════════════════
FIXUPS v13 — badge "Ostatnie sztuki" wg React
jasny żółty #FFD054, ciemny tekst, bez ramki, rounded-md
═══════════════════════════════════════════════ */
#nc-product-page .nc-stock-urgency {
background: rgb(255 208 84) !important;
color: rgb(31 31 31) !important;
border: none !important;
border-radius: 6px !important;
padding: 0.25rem 0.5rem !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .03em !important;
line-height: 1 !important;
}
#nc-product-page .nc-stock-urgency svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; fill: none !important; }
/* ═══════════════════════════════════════════════
FIXUPS v14 — sekcja "Dostawa i zwroty"
═══════════════════════════════════════════════ */
/* Wiersze — więcej powietrza, wyśrodkowane w pionie */
#nc-product-page .nc-delivery-rows { gap: 0.25rem !important; }
#nc-product-page .nc-delivery-row {
align-items: center !important;
gap: 0.5rem !important;
padding: 0.625rem 0.5rem !important;
}
/* Ikony — outline, bordo (brand) */
#nc-product-page .nc-delivery-icon {
color: #000000 !important;
stroke: #000000 !important;
fill: none !important;
flex-shrink: 0 !important;
}
/* Tekst — jaśniejszy szary; NIE rozpycha się (chevron tuż obok) */
#nc-product-page .nc-delivery-row-text {
flex: 0 1 auto !important;
color: hsl(0 0% 40%) !important;
font-size: 13px !important;
}
#nc-product-page .nc-delivery-row-muted { color: hsl(0 0% 45%) !important; }
/* Pierwszy wiersz — data, ciemna */
#nc-product-page .nc-delivery-row-val {
font-weight: 600 !important;
color: hsl(0 0% 12%) !important;
}
/* Chevron — INLINE tuż po tekście, mały szary */
#nc-product-page .nc-delivery-row .nc-chevron {
flex-shrink: 0 !important;
width: 13px !important;
height: 13px !important;
color: hsl(0 0% 65%) !important;
stroke: hsl(0 0% 65%) !important;
margin-left: 0 !important;
}
/* Mobile: gdy tekst zawija się do 2. linii, strzałka ma iść od razu za
ostatnim słowem (naturalny text flow), a nie wisieć wyśrodkowana przy
prawej krawędzi całego wiersza (flex). Cała zawartość przycisku staje
się jednym ciągiem inline — ikona, tekst i chevron płyną jak akapit. */
@media (max-width: 767px) {
#nc-product-page .nc-delivery-row {
display: block !important;
}
#nc-product-page .nc-delivery-icon {
display: inline-block !important;
vertical-align: -2px !important;
margin-right: 0.5rem !important;
}
#nc-product-page .nc-delivery-row-text,
#nc-product-page .nc-delivery-row-muted,
#nc-product-page .nc-delivery-row-val {
display: inline !important;
}
/* Na mobile ta sekcja (dostawa/zwroty/pakowanie/płatności) ginęła —
13px/regular na jasnoszarym (hsl(0 0% 40%)) tle jest zbyt subtelne na
małym ekranie, w porównaniu z resztą karty. O jeden stopień grubsza
i ciemniejsza czcionka bez zmiany layoutu (tylko mobile — damidomo na
razie zostaje bez zmian, patrz reguła bazowa .nc-delivery-row-text
wyżej w pliku). */
#nc-product-page .nc-delivery-row-text {
font-size: 13.5px !important;
font-weight: 500 !important;
color: hsl(0 0% 28%) !important;
}
#nc-product-page .nc-delivery-row-muted {
font-weight: 500 !important;
color: hsl(0 0% 33%) !important;
}
#nc-product-page .nc-delivery-row-val {
font-weight: 700 !important;
}
/* Wartość (data) nie łamie się w środku — jeśli cały wiersz się nie
mieści, ma przejść w całości do 2. linii zaraz po etykiecie
"Przewidywana dostawa:", a nie łamać się np. między "czw., 06.08" a
"– ndz., 07.08". */
#nc-product-page .nc-delivery-row-val {
white-space: nowrap !important;
}
#nc-product-page .nc-delivery-row .nc-chevron {
display: inline-block !important;
vertical-align: middle !important;
margin-left: 0.375rem !important;
}
}
/* ═══════════════════════════════════════════════
FIXUPS v15 — galeria jako anchory fancybox
═══════════════════════════════════════════════ */
#nc-product-page a.nc-gallery-thumb {
display: block !important;
text-decoration: none !important;
color: inherit !important;
}
/* ═══════════════════════════════════════════════
FIXUPS v16 — sidebar żarówek (moduł bulbselection)
Mapowanie klasy .active (bulb-sidebar.js) na nc-bulbs-drawer
═══════════════════════════════════════════════ */
/* 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-img a { text-decoration: none !important; color: inherit !important; display: block; }
/* Line-clamp musi siedzieć na elemencie z TEKSTEM (a), nie na h3 — gdy dziecko
ma display:block, -webkit-line-clamp chowa je całkowicie (zostaje tylko
zarezerwowana, pusta przestrzeń po tytule). */
#bulb-sidebar-wrapper .nc-bulb-row-name {
display: block !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
box-sizing: content-box !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: none !important;
}
#bulb-sidebar-wrapper .nc-bulb-row-name a {
text-decoration: none !important;
color: inherit !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
}
#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 nc-product.css, 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.
flex:1 1 0 (poprzednio) dzieliło dostępną szerokość po równo między
FAKTYCZNIE wyrenderowane zakładki — przy 1-2 dostępnych barwach (nie
wszystkie produkty mają wszystkie 3) każda wychodziła szersza niż przy
3, zamiast zostać tej samej szerokości i wyrównać się do lewej. Stały
flex-basis liczony pod 3 kolumny (ten sam wzorzec co #nc-bsi-filter-tabs
niżej w tym pliku) naprawia to niezależnie od liczby zakładek. */
#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" (BULBS DRAWER 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 v17 — sticky panel zakupowy (StickySidebar, ta sama biblioteka co
stara karta — patrz footer.tpl, `new StickySidebar('#sidebar', {...})`).
Pozycjonowanie (fixed/absolute, przejścia między stanami) robi w całości
JS na .inner-wrapper-sticky wewnątrz .nc-col-purchase — patrz
initPurchaseStickySidebar w nc-product.js. Żadne CSS position tutaj nie
jest potrzebne; .nc-product-grid zostaje przy domyślnym align-items:stretch
(biblioteka liczy granice sama z containerSelector: '.nc-product-grid',
nie zależy od tego, czy komórki grida są rozciągnięte czy nie).
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
INSPIRACJE — sekcja z Doofinder (produkty podobne)
Styl wzorowany na React-owym designie
═══════════════════════════════════════════════ */
/* Sekcja wrapper — full-bleed na całą szerokość viewportu */
#nc-product-page .nc-inspiracje {
background: var(--nc-secondary);
padding-block: 2rem;
margin-top: 0;
margin-bottom: 2rem;
/* width: 100vw; */
max-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
/* Dokładnie ten sam padding co .nc-container (bez wyliczanego centrowania
"max(..., calc((100vw - max-width)/2 + ...))") — nic dodatkowego, ta
sekcja ma się wyrównywać identycznie jak reszta strony ("Lampy z tej
samej serii"/"Żarówki", obie w .nc-container). */
padding-inline: 5px;
box-sizing: border-box;
overflow-x: hidden !important;
}
@media (min-width: 640px) {
#nc-product-page .nc-inspiracje {
padding-block: 2.5rem;
padding-inline: 2rem;
}
}
@media (min-width: 1024px) {
#nc-product-page .nc-inspiracje {
padding-inline: 2.5rem;
}
}
/* Key-specs — zmniejsz dolny margines gdy Inspiracje tuż pod spodem */
#nc-product-page .nc-key-specs-wrap:has(+ .nc-inspiracje) {
/* margin-bottom: 0 !important; */
}
/* Eyebrow "ZOBACZ TAKŻE" — prosty czerwony tekst bez tła */
#nc-product-page .nc-inspiracje-eyebrow {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--nc-primary);
padding: 0;
background: none;
border: none;
margin-bottom: 0.25rem;
line-height: 1.2;
}
/* Nagłówek sekcji */
#nc-product-page .nc-inspiracje .nc-section-title {
font-size: 16px;
font-weight: 700;
color: var(--nc-fg);
margin: 0 0 0.25rem;
white-space: nowrap;
line-height: 1.3;
}
@media (min-width: 640px) {
#nc-product-page .nc-inspiracje .nc-section-title { font-size: 18px; }
}
#nc-product-page .nc-inspiracje .nc-section-subtitle {
font-size: 13px;
color: var(--nc-muted-fg);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
}
#nc-product-page .nc-inspiracje .nc-section-header {
margin-bottom: 1.25rem;
}
/* Zarezerwuj miejsce po prawej na 2 strzałki (5.25rem + 5.25rem + 1rem gap
+ odrobina zapasu), żeby jednoliniowy tytuł/opis nigdy nie wchodził pod
przyciski. */
@media (min-width: 640px) {
#nc-product-page .nc-inspiracje .nc-section-header {
padding-right: 12rem;
}
}
/* Doofinder host — reset */
#nc-product-page .dfwidget-host {
font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
/* Ukryj tytuł Doofindera — nagłówek jest w szablonie */
#nc-product-page .dfwidget-host .titleborderh5 {
display: none !important;
}
/* Carousel wrapper — reset starych styli; static żeby strzałki uciekły do .nc-inspiracje */
#nc-product-page .dfwidget-host .dfwidget-carousel {
width: 100% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
}
/* Carousel content — gap-based layout */
#nc-product-page .dfwidget-host .carousel-content {
gap: 0.75rem !important;
scroll-padding-left: 0.75rem;
cursor: grab;
/* scroll-snap widgetu Doofindera "odbijał" ręczne przewijanie (wheel/drag)
z powrotem do najbliższego punktu zaczepienia — trzeba było scrollować
kilka razy, żeby przełamać próg snapowania. Wyłączone na stałe, nie tylko
podczas przeciągania. */
scroll-snap-type: none !important;
}
/* Blokada natywnego przeciągania linków/obrazków (patrz dragstart w JS) */
#nc-product-page .dfwidget-host .carousel-content a,
#nc-product-page .dfwidget-host .carousel-content img {
-webkit-user-drag: none;
}
/* Przeciąganie myszą (bindDragScroll w nc-product.js) */
#nc-product-page .dfwidget-host .carousel-content.nc-dragging {
cursor: grabbing !important;
scroll-behavior: auto !important;
user-select: none;
}
#nc-product-page .dfwidget-host .carousel-content.nc-dragging * {
pointer-events: none;
}
/* Karty produktów — bez boxów, zlewane z tłem */
#nc-product-page .dfwidget-host .dfwidget-card {
background: transparent !important;
border-radius: var(--nc-radius) !important;
border: none !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
cursor: pointer !important;
transition: opacity .15s !important;
/* Container query dla cen (patrz .price-display .price/.old-price/.sale_price
niżej) — karta ma kilka różnych stałych szerokości zależnie od breakpointu
(20%/25%/33%/50%/2.5-w-rzędzie, patrz media queries wyżej), więc zwykłe
media query na font-size cen nie nadążałoby idealnie za każdą z nich.
inline-size pozwala fontowi cen skalować się płynnie względem RZECZYWISTEJ
szerokości KARTY, nie viewportu. */
container-type: inline-size;
}
#nc-product-page .dfwidget-host .dfwidget-card:not(:first-child) {
margin-left: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .dfwidget-host .dfwidget-card:hover {
box-shadow: none !important;
opacity: .92 !important;
}
}
/* Rozmiary kart — responsive */
@media (min-width: 1201px) {
#nc-product-page .dfwidget-host .dfwidget-card {
flex: 0 0 calc(20% - 12px) !important;
min-width: calc(20% - 12px) !important;
}
}
@media (min-width: 1025px) and (max-width: 1200px) {
#nc-product-page .dfwidget-host .dfwidget-card {
flex: 0 0 calc(25% - 12px) !important;
min-width: calc(25% - 12px) !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
#nc-product-page .dfwidget-host .dfwidget-card {
flex: 0 0 calc(33.33% - 12px) !important;
min-width: calc(33.33% - 12px) !important;
}
}
@media (min-width: 481px) and (max-width: 768px) {
#nc-product-page .dfwidget-host .dfwidget-card {
flex: 0 0 calc(33.33% - 8px) !important;
min-width: calc(33.33% - 8px) !important;
}
}
@media (max-width: 480px) {
#nc-product-page .dfwidget-host .dfwidget-card {
flex: 0 0 calc((100% - 18px) / 2.5) !important;
min-width: calc((100% - 18px) / 2.5) !important;
}
}
/* Zdjęcie produktu */
#nc-product-page .dfwidget-host .card-media {
aspect-ratio: 1 !important;
background: var(--nc-card) !important;
overflow: hidden !important;
}
#nc-product-page .dfwidget-host .card-media-thumbnail {
width: 100% !important;
height: 100% !important;
}
#nc-product-page .dfwidget-host .card-media-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
padding: 0.75rem !important;
}
/* Treść karty */
#nc-product-page .dfwidget-host .card-content {
padding: 0.75rem !important;
/* border-top: 1px solid var(--nc-border) !important; */
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
flex: 1 !important;
}
/* Tytuł produktu */
#nc-product-page .dfwidget-host .card-title {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--nc-fg) !important;
line-height: 1.4 !important;
text-align: left !important;
letter-spacing: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
/* Pisownia (pierwsza litera duża, reszta mała, z wyjątkami np. "LED",
"Lumina Deco") ustawiana teraz w JS na treści węzła — ncTitleCase w
nc-product.js, wołane przez applyTitleCase (initDoofinderMove) — nie
przez text-transform w CSS (nie umiałoby wyjątków). */
}
/* Opis — ukryty */
#nc-product-page .dfwidget-host .card-description {
display: none !important;
}
/* Flexible spacer */
#nc-product-page .dfwidget-host .card-content > .flexible {
flex: 1 !important;
}
/* Cena — ZAWSZE w jednej linii: aktualna + stara, bez obcinania. Zamiast
text-overflow:ellipsis (obcinało starą cenę na wąskich kartach) font-size
obu cen skaluje się płynnie razem z RZECZYWISTĄ szerokością karty przez
container query (container-type:inline-size na .dfwidget-card wyżej) —
clamp(min, baza_px + przyrost_cqw, max): 1cqw = 1% szerokości karty, więc
im węższa karta, tym mniejszy font, aż do dolnego limitu w clamp(). Druga
deklaracja font-size (px) PRZED clamp() to fallback dla przeglądarek bez
obsługi jednostek cqw — clamp() z nieznaną jednostką jest "guaranteed-
invalid" i cała deklaracja jest wtedy ignorowana, więc zostaje wcześniejsza,
stała wartość (ten sam wzorzec co inne fallbacki var()/@supports w tym
pliku). flex-wrap:nowrap + white-space:nowrap — obie ceny mają zostać w
jednym wierszu, nigdy nie łamać się do kolejnej linii. min-width:0 pozwala
elementom flex faktycznie się skurczyć (domyślne min-width:auto na
flex-item blokowałoby to niezależnie od font-size). */
#nc-product-page .dfwidget-host .price-display {
text-align: left !important;
margin: 0.25rem 0 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
gap: 0.375rem !important;
min-width: 0 !important;
width: 100% !important;
}
#nc-product-page .dfwidget-host .price-display .price {
font-size: 14px !important;
font-size: clamp(8px, calc(7cqw - 2px), 17px) !important;
font-weight: 700 !important;
color: var(--nc-primary) !important;
order: 1 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
#nc-product-page .dfwidget-host .price-display .old-price {
font-size: 12px !important;
font-size: clamp(7px, calc(5.6cqw - 1.4px), 14px) !important;
font-weight: 400 !important;
color: var(--nc-muted-fg) !important;
text-decoration: line-through !important;
order: 2 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
/* Wariant markupu widgetu Doofindera z klasami .price/.sale_price (zamiast
.price/.old-price wyżej) — role klas są tu ODWRÓCONE względem nazw: .price
to cena PRZED obniżką, .sale_price to cena PO obniżce. Te same reguły co
wyżej, ale zamienione: .sale_price dostaje styl, jaki wyżej ma .price
(wyróżniona, pogrubiona), a .price dostaje styl, jaki wyżej ma .old-price
(wyszarzona, przekreślona) — TYLKO gdy .sale_price faktycznie występuje
obok (produkt w promocji). Bez promocji Doofinder renderuje samo .price
(pusty albo brak go wcale) — wtedy .price
to JEDYNA cena i ma wyglądać jak zwykła, wyróżniona cena (tak jak
.sale_price przy przecenie), a nie jak wyszarzona/przekreślona "stara
cena" bez żadnej aktualnej obok. */
#nc-product-page .dfwidget-host .price-display:has(.sale_price:not(:empty)) .sale_price {
font-size: 14px !important;
font-size: clamp(8px, calc(7cqw - 2px), 17px) !important;
font-weight: 700 !important;
color: rgb(0, 0, 0) !important;
order: 1 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
#nc-product-page .dfwidget-host .price-display:has(.sale_price:not(:empty)) .price {
font-size: 12px !important;
font-size: clamp(7px, calc(5.6cqw - 1.4px), 14px) !important;
font-weight: 400 !important;
color: var(--nc-muted-fg) !important;
text-decoration: line-through !important;
order: 2 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
#nc-product-page .dfwidget-host .price-display:not(:has(.sale_price:not(:empty))) .price {
font-size: 14px !important;
font-size: clamp(8px, calc(7cqw - 2px), 17px) !important;
font-weight: 700 !important;
color: rgb(0, 0, 0) !important;
text-decoration: none !important;
order: 1 !important;
white-space: nowrap !important;
}
/* Link karty — pełne pokrycie */
#nc-product-page .dfwidget-host .card-link {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
}
/* Strzałki karuzeli — wyśrodkowane w pionie względem bloku nagłówka
(eyebrow + tytuł + jednoliniowy opis, ~66px wysokości przy zadeklarowanych
powyżej line-height). Padding sekcji 2.5rem (40px od 640px) + połowa
wysokości nagłówka (~33px) − połowa wysokości przycisku (48px) ≈ 25px. */
#nc-product-page .nc-inspiracje .dfwidget-host .carousel-arrow {
position: absolute !important;
top: 1.9rem !important;
transform: none !important;
z-index: 2 !important;
width: 4.5rem !important;
height: 4.5rem !important;
padding: 1rem !important;
border-radius: 8px !important;
background: var(--nc-card) !important;
border: 1px solid #f0f0f0 !important;
box-shadow: none !important;
display: grid !important;
place-items: center !important;
cursor: pointer !important;
transition: background .15s, border-color .15s !important;
opacity: 1 !important;
}
@media (min-width: 640px) {
#nc-product-page .nc-inspiracje .dfwidget-host .carousel-arrow { top: 1.9rem !important; }
}
@media (hover: hover) and (pointer: fine) {
#nc-product-page .nc-inspiracje .dfwidget-host .carousel-arrow:hover {
background: hsl(0 0% 97%) !important;
border-color: hsl(0 0% 88%) !important;
}
}
#nc-product-page .dfwidget-host .carousel-arrow svg {
width: 22px !important;
height: 22px !important;
fill: var(--nc-fg) !important;
}
/* Ikona strzałek Inspiracji — Doofinder wstrzykuje tu SWÓJ własny SVG
(grubszy kształt "papierowego samolotu", inny niż reszta karty), którego
ścieżki nie możemy podmienić w markupie (renderowane przez ich widget,
nie przez nasz szablon). Zamiast tego: chowamy wstrzyknięty