/* Motyw Astra ustawia dla tego typu podstrony (osobny kontener) szarawo-
   niebieskie tło <body> (#F0F5FA) - inne niż na stronie "Kolekcje" (biały
   Elementor page), stąd wizualna niespójność. Nadpisujemy z powrotem na
   biały tylko na tej podstronie (enqueue tego pliku i tak działa wyłącznie
   dla is_singular('nl_lampa') - patrz single-lampa.php). */
body.single-nl_lampa {
    background-color: #ffffff;
}

/* Ten element to <main id="main" class="site-main nl-lampa-page ...">.
   Astra ma własną regułę dla samego "#main" (selektor ID) narzucającą
   padding górny/dolny - ID w CSS wygrywa z naszą zwykłą klasą ".nl-lampa-page",
   więc samo nadpisanie na tej klasie nie wystarczało. Selektor "#main.nl-lampa-page"
   (ID + klasa) ma wyższą specyficzność niż samo "#main" u Astry, więc tym
   razem faktycznie wygrywa. */
#main.nl-lampa-page {
    max-width: 1280px;
    margin: 0 auto;
    /* Padding z góry i z dołu wyzerowany na wyraźne życzenie - zostają tylko
       boczne 24px, żeby treść nie dotykała krawędzi ekranu. */
    padding: 0 24px;
}

/* ------------------------------------------------------------------
   Górna sekcja: galeria (lewo) + informacje (prawo)
   ------------------------------------------------------------------ */
.nl-lampa-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    /* "center" zamiast "start" - przy krótszym zdjęciu (patrz max-height
       wyżej) panel z informacjami nie "przyklejał się" do góry, zostawiając
       dużo pustej przestrzeni obok - teraz obie kolumny są wyśrodkowane
       względem siebie, więc wygląda to spójniej. */
    align-items: center;
}

/* Zerujemy pionowy padding, jaki ten element dostaje "w spadku" po klasie
   ".cet-wrapper" (patrz ".cet-wrapper" w custom-text-block.css -
   "padding: clamp(24px, 5vw, 64px) 0") - ta reguła jest myślana dla
   Eleganckiego Bloku Tekstowego (gdzie faktycznie ma dawać oddech nad/pod
   tekstem), a NIE dla tej siatki zdjęcie+informacje, która i tak ma już
   własny odstęp od nagłówka strony i własny "gap" między kolumnami.
   Podwójna klasa (".nl-lampa-top.cet-wrapper") podnosi specyficzność na
   tyle, żeby nasze zero wygrało niezależnie od kolejności wczytywania
   arkuszy CSS - bez tego strona zaczynała się dużą, pustą przestrzenią
   zaraz pod menu. */
.nl-lampa-top.cet-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Galeria: duże zdjęcie to zawsze zdjęcie główne (nie da się go zmienić
   klikając w podgląd, ale na wyraźną prośbę klienta JEST teraz klikalne -
   samo powiększa się w pełnoekranowej galerii, dokładnie tak samo jak
   kliknięcie w podgląd pod spodem) + pasek małych podglądów pod nim. --- */
.nl-lampa-gallery-main {
    display: flex;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--ast-global-color-5, #F0F5FA);
    /* div z role="button" (patrz komentarz w single-lampa.php) - celowo NIE
       natywny <button>, żeby uniknąć globalnego, narzuconego przez motyw/
       WooCommerce wyglądu przycisków (który przy tym elemencie objawiał się
       jako wielki czarny prostokąt wokół zdjęcia). Jedyna różnica względem
       poprzedniego, statycznego stanu ma być kursor "zoom-in" + lekkie
       przyciemnienie na hover/focus. */
    cursor: zoom-in;
}

.nl-lampa-gallery-main:hover .nl-lampa-gallery-main-image,
.nl-lampa-gallery-main:focus-visible .nl-lampa-gallery-main-image {
    opacity: 0.88;
}

/* Element ma teraz role="button" + tabindex, więc może dostać klawiaturowy
   focus - dajemy mu własny, widoczny outline (zamiast żadnego), żeby dało się
   zobaczyć, że jest aktywnie zaznaczony przy nawigacji Tabem. */
.nl-lampa-gallery-main:focus-visible {
    outline: 2px solid #b8974f;
    outline-offset: 2px;
}

/* Przy jednym zdjęciu wiersz miniaturek istnieje w kodzie tylko po to, żeby
   dać PhotoSwipe element do otwarcia po kliknięciu w duże zdjęcie (patrz
   single-lampa.php/.js) - wizualnie nic się tu nie zmienia, więc zostaje
   ukryty. */
.nl-lampa-gallery-thumbs-single {
    display: none;
}

.nl-lampa-gallery-main-link {
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nl-lampa-gallery-main-image {
    display: block;
    transition: opacity 0.2s ease;
    /* Zdjęcia produktowe bywają bardzo pionowe (wysokie, wąskie kadry) -
       przy samym "height: auto" potrafiły zajmować ogromną część ekranu.
       Ograniczamy więc tylko WYSOKOŚĆ (max-height) - kształt/proporcje
       zdjęcia zostają bez zmian (bez kadrowania), szerokość po prostu
       zmniejsza się razem z wysokością. Pełne, oryginalne zdjęcie i tak
       można zobaczyć w pełnoekranowej galerii po kliknięciu w podgląd. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(320px, 42vw, 560px);
}

/* Pasek małych podglądów pod dużym zdjęciem. Wyśrodkowany (justify-content),
   bo główne zdjęcie ma teraz ograniczoną wysokość (max-height) i przy
   pionowych/wąskich kadrach samo jest węższe niż cała kolumna - bez tego
   miniaturki (domyślnie do lewej) nie leżały pod zdjęciem, tylko obok, co
   wyglądało niechlujnie przy niewielu zdjęciach w galerii.

   UWAGA na przyszłość: próba zamiany tego na siatkę (grid) o stałej liczbie
   kolumn została cofnięta - ostatni, niepełny rząd równał się wtedy do lewej
   zamiast być wyśrodkowany i układ wyglądał gorzej, nie lepiej. */
.nl-lampa-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.nl-lampa-gallery-thumb {
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.nl-lampa-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block;
}

.nl-lampa-gallery-thumb:hover,
.nl-lampa-gallery-thumb:focus-visible {
    opacity: 1;
    border-color: #D3C6BE;
}

.nl-lampa-gallery-empty .nl-lampa-gallery-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    background-color: var(--ast-global-color-5, #F0F5FA);
}

/* --- Informacje --- */
.nl-lampa-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: var(--ast-global-color-6, #111111);
}

/* Mały akcent pod tytułem - ten sam język wizualny (kolor #D3C6BE), co
   przycisk "Zapytaj o produkt" niżej - spina całość, zamiast tytułu
   "wiszącego" samotnie nad ceną. */
.nl-lampa-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 18px;
    background-color: #D3C6BE;
}

.nl-lampa-price {
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 0 28px;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 75%, transparent);
}

.nl-lampa-short-desc {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 300;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 85%, transparent);
    margin-bottom: 32px;
}

.nl-lampa-short-desc p {
    margin: 0 0 16px;
}

.nl-lampa-short-desc p:last-child {
    margin-bottom: 0;
}

.nl-lampa-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Odrobinę szerzej niż wcześniej (320px) - szerszy padding przycisku
       (patrz .nl-pill-btn niżej) zostawiał za mało miejsca na najdłuższą
       etykietę ("Zapytaj o produkt") w jednej linii. */
    max-width: 360px;
}

/* ------------------------------------------------------------------
   Przycisk "pill" (patrz nesslighting_pill_button() w single-lampa.php) -
   w pełni zaokrąglony, z etykietą po lewej i strzałką po prawej. Celowo
   NIC poza samą strzałką nie zmienia się przy najechaniu myszką (patrz
   ".nl-pill-btn:hover .nl-pill-btn-arrow" niżej) - ani tło, ani obramowanie,
   ani kolor tekstu - żeby "przejście dalej" sygnalizował wyłącznie ruch
   strzałki, bez dodatkowego "migotania" całego przycisku.
   ------------------------------------------------------------------ */
.nl-pill-btn,
.nl-pill-btn:hover,
.nl-pill-btn:focus,
.nl-pill-btn:active,
.nl-pill-btn:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wariant "4" z prezentowanych propozycji - ten sam rozmiar strzałki co
       wcześniej, ale szerszy przycisk (większy padding poziomy) i większy
       odstęp od etykiety, dzięki czemu strzałka spoczywa bliżej prawej
       krawędzi, wyraźnie oddzielona od tekstu. */
    gap: 26px;
    padding: 17px 34px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none !important;
    border: 1px solid color-mix(in srgb, var(--ast-global-color-6, #111111) 45%, transparent);
    border-radius: 999px;
    color: var(--ast-global-color-6, #111111);
    background-color: #ffffff;
}

.nl-pill-btn--accent,
.nl-pill-btn--accent:visited {
    border-color: #D3C6BE;
    background-color: #D3C6BE;
}

.nl-pill-btn-label {
    /* Żeby długa etykieta nigdy nie "podepchnęła" strzałki poza przycisk -
       to strzałka ma stałą szerokość (flex: none niżej), a etykieta oddaje
       jej miejsce w razie potrzeby. */
    min-width: 0;
}

.nl-pill-btn-arrow {
    flex: none;
    /* Wydłużona wersja (dłuższa "kreska" przed grotem) - patrz też
       zaktualizowany SVG (viewBox 42x10) w single-lampa.php. */
    width: 42px;
    height: 10px;
    /* SVG dziedziczy kolor przez "stroke: currentColor" (patrz znacznik w
       single-lampa.php) - ustawiamy go tu jawnie, żeby nie polegać na
       domyślnym dziedziczeniu "color" przez element <svg>. */
    color: currentColor;
    /* Cała animacja przesunięta w lewo: to, co wcześniej było pozycją
       SPOCZYNKOWĄ, jest teraz pozycją PO najechaniu (patrz reguła
       ":hover" niżej - tam transform się zeruje). Dystans startowy
       zwiększony razem z długością strzałki (10px -> 14px), żeby ruch
       pozostał proporcjonalny do jej nowego rozmiaru. */
    transform: translateX(-14px);
    transition: transform 0.22s ease;
}

.nl-pill-btn:hover .nl-pill-btn-arrow {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .nl-pill-btn-arrow {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Pełny opis
   ------------------------------------------------------------------ */
.nl-lampa-full-description {
    max-width: 860px;
    /* Margin z góry zmniejszony z clamp(56px, 8vw, 96px) - razem z
       "padding-top" niżej dawało bardzo duży odstęp od galerii do "PEŁNY
       OPIS". Zostaje mniejszy, ale wciąż widoczny odstęp między sekcjami. */
    margin: clamp(24px, 3vw, 40px) auto 0;
    padding-top: clamp(40px, 6vw, 64px);
    border-top: 1px solid color-mix(in srgb, var(--ast-global-color-6, #111111) 12%, transparent);
    scroll-margin-top: 32px;
}

.nl-lampa-full-description-heading {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: var(--ast-global-color-6, #111111);
}

.nl-lampa-full-description-content {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 300;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 85%, transparent);
}

.nl-lampa-full-description-content h1,
.nl-lampa-full-description-content h2,
.nl-lampa-full-description-content h3,
.nl-lampa-full-description-content h4 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    font-size: 0.95rem;
    margin: 28px 0 8px;
    color: var(--ast-global-color-6, #111111);
}

.nl-lampa-full-description-content ul,
.nl-lampa-full-description-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.nl-lampa-full-description-content p {
    margin: 0 0 16px;
}

/* Pola takie jak "WARIANTY:", "MATERIAŁ:", "TERMIN REALIZACJI:" wpisywane są
   ręcznie jako pogrubiony tekst (nie prawdziwe nagłówki h1-h4 wyżej) - bez
   tego wtapiały się w zwykły akapit. Delikatny akcent koloru + odstęp nad
   nimi porządkuje ten fragment bez zmiany samej treści. */
.nl-lampa-full-description-content strong {
    color: var(--ast-global-color-6, #111111);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
   Podobne lampy
   ------------------------------------------------------------------ */
.nl-lampa-related {
    margin-top: clamp(56px, 8vw, 96px);
    padding-top: clamp(40px, 6vw, 64px);
    border-top: 1px solid color-mix(in srgb, var(--ast-global-color-6, #111111) 12%, transparent);
}

.nl-lampa-related-heading {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 16px;
    color: var(--ast-global-color-6, #111111);
}

/* Ten sam mały akcent (48x2px), co pod tytułem lampy wyżej i na stronie
   "Kolekcje" - spójny język wizualny między nagłówkami sekcji. */
.nl-lampa-related-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin: 14px auto 0;
    background-color: #D3C6BE;
}

.nl-lampa-related-grid {
    --nlk-columns: 4;
}

/* Pełnoekranowa galeria po kliknięciu w podgląd to gotowa biblioteka
   PhotoSwipe (patrz single-lampa.js) - jej własny wygląd (przyciemnienie,
   strzałki, licznik, przybliżanie) ładuje się z CSS-a PhotoSwipe (enqueue w
   single-lampa.php), więc nic tu nie trzeba dodatkowo stylować. Wbudowana
   animacja otwierania/zamykania PhotoSwipe jest wyłączona w JS (powodowała
   "skaczące" zdjęcie) - zamiast niej całość pojawia się/znika WYŁĄCZNIE
   przez zmianę przezroczystości (opacity), sterowaną klasą "pswp--open",
   którą sam PhotoSwipe dodaje przy otwarciu i usuwa przy zamknięciu. */
.pswp {
    /* Domyślnie niewidoczne - dopóki single-lampa.js nie ustawi
       "opacity: 1" (patrz komentarz przy lightbox.on('afterInit', ...)),
       zapobiega to "mignięciu" w pełni widoczną galerią przed
       przenikaniem. */
    opacity: 0;
}

/* ------------------------------------------------------------------
   Naprawa kolizji z WooCommerce (sprawdzona na żywo w przeglądarce).

   Główny arkusz WooCommerce (woocommerce.css - ładowany na CAŁEJ stronie,
   nie tylko w sklepie) stylizuje elementy PhotoSwipe pod SWOJĄ, starą
   wersję 4 tej biblioteki:

   1) "button.pswp__button" dostaje tam grafikę-sprite z ikonami wersji 4
      (default-skin.png) - i to z "!important". Nasza wersja 5 rysuje własne
      ikony jako SVG w środku przycisku, więc na wierzchu SVG-a wychodził
      jeszcze kawałek tamtej grafiki: "podwójne", dziwne znaczki (fragmenty
      ikon udostępniania, pełnego ekranu itd.).
   2) ".woocommerce .pswp__bg" nadpisuje tło galerii, przez co zamiast
      przyciemnienia robiło się jasne tło.

   Stąd te nadpisania. Selektory CELOWO są bardziej szczegółowe niż
   WooCommerce'owe (".pswp button.pswp__button" zamiast samego
   "button.pswp__button"), bo tamte mają "!important" - inaczej nasze reguły
   by przegrały. Dequeue nie wystarczy: te reguły siedzą w GŁÓWNYM arkuszu
   WooCommerce, którego usunąć się nie da.
   ------------------------------------------------------------------ */
.pswp button.pswp__button,
.pswp button.pswp__button--arrow--prev,
.pswp button.pswp__button--arrow--next {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.pswp .pswp__bg {
    background-color: #111111 !important;
    background-image: none !important;
}

/* Przybliżanie jest wyłączone w JS (patrz "zoom: false" w single-lampa.js),
   więc kursor nie powinien już sugerować lupki. To zabezpieczenie na wypadek,
   gdyby PhotoSwipe mimo wszystko dodał klasę "pswp--zoom-allowed". */
.pswp img.pswp__img,
.pswp--zoom-allowed img.pswp__img,
.pswp--zoomed-in img.pswp__img {
    cursor: default !important;
}

/* ------------------------------------------------------------------
   Modal "Zapytaj o produkt" (patrz nesslighting_lampa_inquiry_modal() w
   single-lampa.php + initInquiryModal() w single-lampa.js). Sam formularz
   w środku korzysta z tych samych klas ".ncf-*", co formularz kontaktowy
   ze strony głównej (custom-contact-form.css/.js, ładowane i tak na każdej
   stronie) - tutaj stylujemy WYŁĄCZNIE "ramkę" modala (przyciemnione tło +
   wyśrodkowany panel + animacja pojawienia/zniknięcia).
   ------------------------------------------------------------------ */
.nl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* "display: none" jawnie (a nie poleganie na domyślnym stylu atrybutu
       "hidden") - inaczej ta reguła (pochodząca z arkusza AUTORA) wygrałaby
       z domyślnym stylem przeglądarki dla "[hidden]" (pochodzącym z arkusza
       USER AGENTA), bo w kaskadzie CSS reguły autora zawsze biją reguły
       przeglądarki, niezależnie od specyficzności selektora. */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(17, 17, 17, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.nl-modal-overlay:not([hidden]) {
    display: flex;
}

.nl-modal-overlay.is-open {
    opacity: 1;
}

.nl-modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(17, 17, 17, 0.25);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.nl-modal-overlay.is-open .nl-modal-panel {
    transform: translateY(0) scale(1);
}

.nl-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--ast-global-color-6, #111111);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.nl-modal-close:hover {
    background-color: color-mix(in srgb, var(--ast-global-color-6, #111111) 8%, transparent);
}

.nl-modal-close svg {
    width: 18px;
    height: 18px;
}

/* Wewnętrzny "oddech" formularza w modalu. Celowo WŁASNA klasa
   (".nl-inquiry-wrapper"), a NIE ".ncf-wrapper"/".ncf-row"/".ncf-form-col"
   (tak jak w pełnym formularzu na stronie głównej) - patrz obszerny komentarz
   w nesslighting_lampa_inquiry_modal() w single-lampa.php: te trzy klasy mają
   gdzieś w panelu Elementora niescopowane reguły CSS (m.in. "width: 100vw" +
   ujemne marginesy na ".ncf-wrapper"), które wyciekają na CAŁĄ stronę i
   rozwalały układ modala. */
.nl-inquiry-wrapper {
    padding: 44px clamp(20px, 5vw, 40px) 32px;
}

/* Nagłówek "Zapytaj o produkt" nad formularzem - domyślnie (".ncf-form-heading"
   w custom-contact-form.css) wyrównany do lewej, co miało sens w szerokiej,
   dwukolumnowej sekcji na stronie głównej. W wąskim, wyśrodkowanym modalu
   wygląda to niespójnie (przycisk zamknięcia jest w rogu, ale sam napis
   "wisi" po lewej) - tutaj wyśrodkowujemy go, tylko w obrębie tego modala. */
.nl-inquiry-wrapper .ncf-form-heading {
    text-align: center;
}

/* Niestandardowy, delikatny pasek przewijania pola "Treść wiadomości" - w
   kolorze ciemniejszego beżu (przyciemniona wersja akcentu #D3C6BE, tego
   samego, co np. przycisk "Zapytaj o produkt" i kropka pod tytułem lampy),
   zamiast domyślnego, szarego paska przeglądarki. "scrollbar-width"/
   "scrollbar-color" obsługuje Firefoksa, a "::-webkit-scrollbar-*" resztę
   przeglądarek (Chrome/Edge/Safari) - oba warianty razem pokrywają wszystkie
   popularne przeglądarki. Scope tylko do tego modala (".nl-inquiry-wrapper"),
   żeby nie zmieniać wyglądu paska przewijania w innych polach tekstowych na
   stronie. */
.nl-inquiry-wrapper .ncf-textarea {
    /* Bez tego pole "Treść wiadomości" miało inny (mniejszy, asymetryczny)
       padding niż pozostałe pola formularza - gdzieś w panelu Elementora
       jest niescopowana reguła CSS wprost na ".ncf-input, .ncf-textarea"
       (ten sam problem, co wcześniej z ".ncf-wrapper"/".ncf-row" - patrz
       komentarz w nesslighting_lampa_inquiry_modal() w single-lampa.php),
       która wygrywa akurat dla <textarea> (bo tam nie ma pomagającego
       selektora "input[type=...]" o wyższej specyficzności, tak jak przy
       zwykłych polach <input>). Wymuszamy z powrotem ten sam padding, co w
       reszcie pól (patrz ".ncf-input, .ncf-textarea" w custom-contact-form.css).
       Scope tylko do tego modala - nie ruszamy pola na stronie głównej. */
    padding: 13px 16px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, #D3C6BE 70%, black 15%) transparent;
}

.nl-inquiry-wrapper .ncf-textarea::-webkit-scrollbar {
    width: 8px;
}

.nl-inquiry-wrapper .ncf-textarea::-webkit-scrollbar-track {
    background: transparent;
}

.nl-inquiry-wrapper .ncf-textarea::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, #D3C6BE 70%, black 15%);
    border-radius: 999px;
}

.nl-inquiry-wrapper .ncf-textarea::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, #D3C6BE 55%, black 22%);
}

/* Kolor obramowania pól przy fokusie - z tego samego powodu, co przy
   paddingu ".ncf-textarea" wyżej: gdzieś w motywie/Elementorze jest reguła
   "input[type='text']:focus, ... { border-color: niebieski }", która akurat
   dla zwykłych pól <input> (nie <textarea>) ma WYŻSZĄ specyficzność niż nasza
   własna ".ncf-input:focus" z custom-contact-form.css (przez selektor
   atrybutu "[type='text']"), więc wygrywa i pokazuje niebieską ramkę zamiast
   beżowo-złotawej (#b8974f), jaką i tak już poprawnie ma pole "Treść
   wiadomości" (tam nasza klasa ".ncf-textarea:focus" jest specyficzniejsza
   niż sam typ "textarea:focus"). Doklejenie ".nl-inquiry-wrapper" podnosi
   specyficzność na tyle, żeby wygrać też dla zwykłych pól, bez potrzeby
   używania "!important". */
.nl-inquiry-wrapper .ncf-input:focus,
.nl-inquiry-wrapper .ncf-textarea:focus {
    border-color: #b8974f;
    box-shadow: 0 0 0 3px rgba(184, 151, 79, 0.12);
}

/* Pole "Temat" jest "readonly" (patrz komentarz w single-lampa.php) - lekkie
   przyciemnienie tła i kursor "default" (zamiast tekstowego "I-belka")
   sygnalizują na pierwszy rzut oka, że pola nie da się edytować, zanim
   użytkownik w ogóle spróbuje w nie kliknąć. Fokus (obramowanie) zostaje bez
   zmian, żeby dalej było widać, że to wciąż aktywne pole formularza. */
.nl-inquiry-wrapper .ncf-input--readonly {
    background-color: #f4f1ee;
    cursor: default;
}

/* Przycisk "Wyślij zapytanie" domyślnie (z custom-contact-form.css) ma
   "align-self: flex-start", czyli trzyma się lewej krawędzi formularza
   (kolumna flex) - w modalu ma być wyśrodkowany. */
.nl-inquiry-wrapper .ncf-submit {
    align-self: center;
}

/* ------------------------------------------------------------------
   Modal "Jak zamówić lampę?" (patrz nesslighting_how_to_order_modal() w
   single-lampa.php). Ramka modala (przyciemnione tło, wyśrodkowany panel,
   przycisk X) jest w 100% współdzielona z modalem "Zapytaj o produkt"
   (".nl-modal-overlay"/".nl-modal-panel"/".nl-modal-close" wyżej) - tutaj
   stylujemy WYŁĄCZNIE treść w środku (nagłówek, kreskę, akapit wstępu i
   listę kroków), tak żeby wyglądem zbliżyć się do dostarczonego wzoru
   (serifowy nagłówek, cienka złota kreska, złote numery kroków "01"-"05").
   Celowo NIE ustawiamy "font-family" na nagłówku (".nl-howto-title") - tak
   jak wszystkie inne nagłówki w tym motywie, dziedziczy on serifowy krój z
   globalnych ustawień Astry (patrz komentarz przy ".ncf-form-heading" w
   custom-contact-form.css) zamiast dublować go tutaj na sztywno.
   ------------------------------------------------------------------ */
.nl-howto-panel {
    max-width: 600px;
}

.nl-howto-wrapper {
    padding: 48px clamp(24px, 6vw, 56px) 40px;
    text-align: center;
}

.nl-howto-title {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    font-weight: 600;
    color: var(--ast-global-color-6, #111111);
}

/* Cienka złota kreska pod tytułem - ten sam akcent (#b8974f), co numery
   kroków niżej i mailowy link we wstępie, żeby całość trzymała się jednej
   palety. Osobny element (a nie "border-bottom" na tytule), żeby dało się
   swobodnie sterować jej szerokością i odstępami niezależnie od tekstu. */
.nl-howto-title-line {
    display: block;
    width: 48px;
    height: 2px;
    margin: 18px auto 24px;
    background-color: #b8974f;
}

.nl-howto-intro {
    margin: 0 0 32px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 70%, transparent);
}

.nl-howto-intro a {
    color: #b8974f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nl-howto-intro a:hover {
    text-decoration: none;
}

.nl-howto-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

/* Tekst-link do pełnego FAQ pod listą kroków - świadomie NIE przycisk-pigułka
   (".nl-pill-btn", jak reszta CTA na stronie), tylko zwykły klikalny tekst,
   żeby wizualnie nie konkurował z żadnym z kroków 01-05 powyżej. Ten sam
   kolor akcentu i styl podkreślenia, co mailowy link we wstępie modala
   (".nl-howto-intro a" wyżej), żeby trzymać się jednego wzorca linków
   tekstowych w całym modalu. */
.nl-howto-faq-link {
    margin: 28px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.nl-howto-faq-link a {
    color: #b8974f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nl-howto-faq-link a:hover {
    text-decoration: none;
}

.nl-howto-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #E7E1D8;
}

.nl-howto-step:first-child {
    border-top: none;
    padding-top: 0;
}

.nl-howto-step:last-child {
    padding-bottom: 0;
}

/* Duży, serifowy numer kroku ("01"-"05") - tak jak nagłówek, celowo bez
   "font-family": dziedziczy serifowy krój Astry, tylko w większym rozmiarze
   i w kolorze akcentu, żeby wizualnie "wystawał" przed treścią kroku, tak
   jak na wzorze.
   "font-variant-numeric: lining-nums" + fallback "font-feature-settings"
   (dla starszych przeglądarek, które nie znają jeszcze skróconej właściwości)
   wymuszają tzw. cyfry liniowe - bez tego krój Astry domyślnie rysował "3",
   "4" i "5" jako tzw. cyfry nieliniowe (starostylowe), czyli z częścią
   znaku schodzącą POD linię bazową - tak jak "wąsy" liter "g" czy "y" - przez
   co w pionowej liście wyglądały na "dłuższe"/przesunięte względem "01",
   "02". Cyfry liniowe stoją wszystkie na tej samej wysokości, tak jak w
   większości krojów bezszeryfowych. */
.nl-howto-step-number {
    flex: none;
    width: 44px;
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 600;
    /* Na wyraźną prośbę klientki cyfry NIE mają być złote - mimo że złoto
       jest już użyte na kresce pod tytułem i w linku e-mail w tym samym
       modalu, cyfry mają zamiast tego wtapiać się w resztę kolorystyki
       strony (ten sam ciemny odcień co tytuły kroków/nagłówek modala),
       zamiast się z niej wybijać. */
    color: var(--ast-global-color-6, #111111);
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

.nl-howto-step-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.nl-howto-step-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ast-global-color-6, #111111);
}

.nl-howto-step-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 65%, transparent);
}

@media (max-width: 600px) {
    .nl-howto-wrapper {
        padding: 40px 20px 32px;
    }

    .nl-howto-step-number {
        width: 36px;
        font-size: 1.5rem;
    }
}

/* Blokada przewijania strony pod spodem, gdy modal jest otwarty - dokładana/
   zdejmowana z JS na elemencie <html> (patrz initInquiryModal()). */
html.nl-modal-locked,
html.nl-modal-locked body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .nl-modal-overlay,
    .nl-modal-panel {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Potwierdzenie wysyłki (toast) - pokazuje się PO zamknięciu modala
   (patrz initInquiryModal() w single-lampa.js), więc nie musi konkurować
   z jego z-index - i tak nigdy nie są widoczne jednocześnie. "position:
   fixed" + wyśrodkowanie u dołu ekranu, ten sam trik animacji (opacity +
   przesunięcie), co przy modalu wyżej.
   ------------------------------------------------------------------ */
.nl-inquiry-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 48px);
    padding: 16px 22px;
    background-color: #ffffff;
    border: 1px solid #D3C6BE;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.18);
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* WAŻNE (poprawka błędu): "display: flex" wyżej wygrywa z wbudowaną w
   przeglądarkę regułą "[hidden] { display: none }", więc SAM atrybut
   "hidden" NIE ukrywał toasta - po zniknięciu (opacity: 0) zostawał on
   niewidocznym, ale wciąż klikalnym prostokątem na środku dołu ekranu
   (z-index: 10000), przechwytującym kliknięcia w to, co jest pod nim.
   Dotyczyło to obu toastów korzystających z tych klas: potwierdzenia
   wysyłki formularza i potwierdzenia dodania do koszyka. */
.nl-inquiry-toast[hidden] {
    display: none;
}

.nl-inquiry-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.nl-inquiry-toast-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: #b8974f;
}

.nl-inquiry-toast-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #1c1c1c;
}

@media (prefers-reduced-motion: reduce) {
    .nl-inquiry-toast {
        transition: none;
    }
}

@media (max-width: 600px) {
    .nl-inquiry-toast {
        left: 24px;
        right: 24px;
        bottom: 16px;
        transform: translateY(12px);
        max-width: none;
    }

    .nl-inquiry-toast.is-visible {
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .nl-modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .nl-modal-panel {
        max-height: calc(100vh - 24px);
        border-radius: 8px 8px 0 0;
    }
}

/* ------------------------------------------------------------------
   Responsywność
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .nl-lampa-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nl-lampa-related-grid {
        --nlk-columns: 2;
    }

    /* Na wąskim ekranie zdjęcie zajmuje niemal całą szerokość, więc "vw" ze
       stylu bazowego liczyłby się od CAŁEGO ekranu, nie od kolumny galerii -
       dlatego osobna, większa wartość dla tego układu. */
    .nl-lampa-gallery-main-image {
        max-height: clamp(300px, 90vw, 460px);
    }
}

@media (max-width: 600px) {
    .nl-lampa-actions {
        max-width: none;
    }

    .nl-lampa-related-grid {
        --nlk-columns: 1;
    }
}