/* Krok 3: podglad wgranego pliku w kafelku galerii (.product-cover) */

/* "Dodaj do koszyka" powiekszony NA TEJ STRONIE (scoped przez :has, nie
   edytujemy globalnej #product .btn-primary.add-to-cart w
   bento-product.css - ta regula jest sitewide, na kazdej stronie produktu,
   nie tylko tu) - bylo 48px/12px, teraz wyrozniony jako glowne CTA nad
   reszta kontrolek (ktore sa 44px).
   "#product" na poczatku selektora KONIECZNY - bez niego przegrywalo z
   #product .btn-primary.add-to-cart w tierze 992-1440px (bento-product.css),
   ktore ma ID w selektorze (wyzsza specyficznosc niz same klasy). */
/* 2026-09-25 UIKit v2 (jak "Dodaj do koszyka" w kreatorze pieczatek,
   .btx-stamp-cta): prostokat --btx-radius-control, 40px, bez cienia -
   zamiast 54px pigulki. */
#product .btx-buy-controls:has(.btx-print-options) .btn-primary.add-to-cart,
#product .btx-buy-controls:has(.btx-print-options) .btx-btn-primary.add-to-cart {
    width: 100% !important;
    height: 40px !important;
    border-radius: var(--btx-radius-control, 16px) !important;
    box-shadow: none !important;
    font-size: var(--btx-text-sm, 12px) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Pelna szerokosc + ciasny odstep pod paskiem ceny (jak w kreatorze:
   "Zatwierdz" -> zaraz pod nim "Dodaj do koszyka"). Natywny stepper .qty
   jest ukryty, wiec .add przejmuje caly rzad. */
#product .btx-buy-controls:has(.btx-print-options) .product-add-to-cart {
    margin-top: 16px !important;
}

#product .btx-buy-controls:has(.btx-print-options) .product-quantity {
    gap: 0 !important;
    margin-bottom: 0 !important;
}

/* Pusty kontener wariantow (produkty druku nie maja kombinacji) mial
   margin-bottom:32px - zjadal sie z margin-top powyzej i dawal 32px zamiast
   16px miedzy paskiem ceny a "Dodaj do koszyka". */
#product .btx-buy-controls:has(.btx-print-options) .product-variants {
    margin-bottom: 0 !important;
}

/* #product-availability (id uzywany przez AJAX PS - NIE usuwamy) chowany
   tylko gdy pusty: komunikat PS zawsze zawiera ikone <i>. Pusty dokladal
   ~22px pod "Dodaj do koszyka" (inline-block + margin-top:10px). */
#product .btx-buy-controls:has(.btx-print-options) #product-availability:not(:has(*)) {
    display: none !important;
}

/* Tytul "Parametry druku" -> pierwsza grupa opcji: 16px jak sekcje kreatora. */
#product .btx-tile-buybox:has(.btx-print-options) .btx-product-title-row {
    margin-bottom: 16px !important;
}

#product .btx-buy-controls:has(.btx-print-options) .product-quantity .add {
    flex: 1 1 auto;
    width: 100%;
}

/* --- UIKit v2: tokeny promieni SCOPED do konfiguratora (jak
   .btx-stamp-cockpit w kreatorze - nie na :root, zeby nie ruszac reszty
   sklepu). Compact 992-1700 jak w kreatorze. --- */
#product .btx-bento-grid:has(.btx-print-options),
.btx-print-pricing-tile {
    --btx-radius-control: 16px;
    --btx-radius-sm: 10px;
    --btx-radius-md: 14px;
}

@media (min-width: 992px) and (max-width: 1700px),
       (min-width: 992px) and (max-height: 820px) {
    #product .btx-bento-grid:has(.btx-print-options),
    .btx-print-pricing-tile {
        --btx-radius-control: 14px;
        --btx-radius-sm: 9px;
        --btx-radius-md: 13px;
    }
}

/* Natywna cena PrestaShopa ukryta na stronach konfiguratora - cene
   biezacego pliku pokazuje pasek na dole (#btx_print_line_price), jak w
   kreatorze. Element zostaje w DOM (AJAX PS go podmienia/odswieza). */
#product .btx-tile-buybox:has(.btx-print-options) .product-prices {
    display: none !important;
}

/* Wiecej oddechu na TEJ stronie (na zyczenie uzytkownika - "wszystko
   najebane ciasno") - podbite z 24px (--btx-tile-padding, standard w
   calym sklepie) do 32px, TYLKO tu, nie globalnie. Lewy kafelek
   (.btx-tile-media) ma wlasny system marginesow zamiast padding (patrz
   .btx-print-surface/-panel-title/-file-info/-upload-status nizej w tym
   pliku, tez podbite do 32px) - tu tylko prawy kafelek (buybox), ktory
   uzywa generycznego .btx-tile.
   TODO (uzytkownik, na pozniej): to samo podbicie na CALYM sklepie, gdy
   bedzie czas - na razie priorytet to inne moduly/produkty. */
/* 2026-09-25 UIKit v2: 24px jak kafle kreatora pieczatek (--btx-tile-padding) -
   wczesniejsze podbicie do 32px ("wiecej oddechu") zastapione rytmem kreatora. */
#product .btx-tile-buybox:has(.btx-print-options) {
    padding: 24px !important;
}

/* 2026-09-25: buybox konfiguratora wg TRESCI, nie "flex: 1" (bento-product.css).
   .btx-tile ma overflow:hidden -> min-height:auto = 0, wiec przy flex:1 buybox
   dzielil wysokosc kolumny z kafelkiem trust i ucinal dolne opcje + "Dodaj do
   koszyka" (wyszlo po dodaniu oprawy/laminowania i przy CAD). Trust tile
   (flex:1) zabiera reszte miejsca, rzad gridu rosnie do wysokosci opcji. */
#product .btx-col-right > .btx-tile-buybox:has(.btx-print-options) {
    flex: 0 0 auto;
}

.btx-print-pricing-tile {
    padding: 24px !important;
}

/* Krok 5 (rewizja 3): dla produktu 860 stepper ilosci w koszyku jest
   usuwany calkowicie z .tpl (kopie licza sie per plik, nie per linia -
   patrz cart-job-details.tpl), a cena+kosz przenoszone pod tresc linii
   zamiast obok niej.
   Na zyczenie uzytkownika: bez kolumny na obraz/ikone (usunieta tez z
   .tpl) - tresc rozciaga sie na cala szerokosc kafelka linii, do jego
   wlasnego paddingu, bez fantomowej pustej kolumny po lewej. */
body#cart .btx-cart-line-print {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "body"
        "actions" !important;
    align-items: start !important;
    row-gap: 12px !important;
}

body#cart .btx-cart-line-print .btx-cart-line-body {
    grid-area: body !important;
}

body#cart .btx-cart-line-print .btx-cart-line-actions {
    grid-area: actions !important;
    margin-left: 0 !important;
    justify-content: flex-end !important;
}

/* Krok 5: szczegoly configu druku pod nazwa produktu w koszyku/checkout.
   Karta 1:1 jak .btx-print-queue-item w konfiguratorze (ten sam border/
   radius/padding/gap) - na zyczenie uzytkownika, zeby kolejka w koszyku
   wygladala dokladnie tak samo jak przy skladaniu zamowienia. */
.btx-cart-job-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.btx-cart-job-file {
    border: 1px solid var(--btx-neutral-300, #d4d4d8);
    border-radius: var(--btx-radius-control, 16px);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btx-cart-job-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sama nazwa pliku jako tytul karty (bez etykiety "Plik") - ten sam
   wzorzec co .btx-print-queue-item-name w konfiguratorze. */
.btx-cart-job-file-name {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Jedna linia meta - ten sam wzorzec co .btx-print-queue-item-meta w
   konfiguratorze (12px, kolor drugorzedny). */
.btx-cart-job-meta {
    font-size: 12px;
    color: var(--btx-text-secondary, #6b7280);
}

/* Przycisk usuwania pojedynczego pliku z poziomu koszyka - 1:1 jak
   .btx-print-queue-item-remove w konfiguratorze. */
.btx-cart-job-file-remove,
.btx-print-queue-item-remove {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: calc(var(--btx-radius-control, 16px) - 4px);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--btx-text-secondary, #6b7280);
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .btx-cart-job-file-remove:hover,
    .btx-print-queue-item-remove:hover {
        background: var(--btx-bg-input, #f4f4f5);
        color: var(--btx-text-primary, #18181b);
    }
}

.btx-cart-job-file-remove:active,
.btx-print-queue-item-remove:active {
    background: var(--btx-border-hover, #d4d4d8);
    transform: scale(0.9);
}

/* Wiersz tytul+cena nad lista wgranych plikow - ukryty domyslnie (:has(),
   juz sprawdzone zywo w tym projekcie przy wariantach produktu), pokazuje
   sie dopiero gdy w .btx-print-queue jest realnie co najmniej 1 pozycja -
   inaczej wisialby pusty naglowek zaraz po wejsciu na strone, przed
   pierwszym zatwierdzeniem pliku. Ten sam wzorzec co
   #product .btx-product-title-row (tytul lewo, cena prawo) u gory strony. */
.btx-print-queue-title-row {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid var(--btx-neutral-300, #d4d4d8);
}

.btx-print-options:has(.btx-print-queue:not(:empty)) .btx-print-queue-title-row {
    display: flex;
}

/* Typografia zrownana z .btx-print-panel-title/-right (ten sam wzorzec co
   H1 produktu w bento-product.css) - spojny wyglad wszystkich naglowkow
   na tej stronie, nie tylko dwoch gornych. */
.btx-print-queue-title {
    font-size: var(--btx-text-sm, 12px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: var(--btx-text-tertiary, #71717a);
    margin: 0;
}

/* Krok 5 (rewizja 2): lista wgranych plikow (pakiet) + "Dodaj kolejny
   plik", w prawej kolumnie pod selektorami. */
.btx-print-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

.btx-print-queue:empty {
    display: none;
}

/* border-color: --btx-neutral-300 (nie domyslny --btx-border-color =
   --btx-neutral-200) - ten kafelek stoi na tle --btx-bg-tile (#ececed),
   niemal identycznym z --btx-neutral-200 (#e4e4e7) - ramka byla ledwo
   widoczna. */
.btx-print-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--btx-border-input, #d4d4d8);
    border-radius: var(--btx-radius-control, 16px);
    background: #ffffff;
    padding: 8px 8px 8px 14px;
}

.btx-print-queue-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btx-print-queue-item-name {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btx-print-queue-item-meta {
    font-size: 12px;
    color: var(--btx-text-secondary, #6b7280);
}

/* border-color nadpisany lokalnie (nie w globalnym .btx-btn-secondary) -
   ten sam problem co .btx-print-queue-item: domyslny --btx-border-color
   ledwo widoczny na tle --btx-bg-tile tego przycisku. */
.btx-print-add-another {
    width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    border: 1px solid var(--btx-border-input, #d4d4d8) !important;
    border-radius: var(--btx-radius-control, 16px) !important;
    background: #ffffff !important;
    color: var(--btx-text-secondary, #52525b) !important;
    box-shadow: none !important;
    font-size: var(--btx-text-sm, 12px) !important;
}

@media (hover: hover) {
    .btx-print-add-another:hover {
        background: var(--btx-bg-input, #f4f4f5) !important;
        border-color: var(--btx-border-hover, #d4d4d8) !important;
    }
}

/* Krok 5 (rewizja 5): widoczny dopiero po zatwierdzeniu biezacego pliku -
   patrz print-configurator.js (klasa dodawana/usuwana w markDirty /
   confirm-success / resetEditorToEmpty).
   !important konieczny - .btx-btn-secondary ma "display: inline-flex
   !important" w bento-uikit.css, ktory inaczej wygrywa niezaleznie od
   specyficznosci (ten sam mechanizm co bug z hamburgerem w custom.css). */
.btx-print-add-another.is-hidden {
    display: none !important;
}

/* Wieksza przerwa od listy zapisanych plikow nad nim (rodzic .btx-print-options
   ma tylko gap:8px, za malo dla tego konkretnego odstepu). */
.btx-print-add-another {
    margin-top: 0;
}

/* Krok 5 (rewizja 3): przycisk zatwierdzenia konfiguracji - musi wygladac
   inaczej niz "Dodaj kolejny plik" (primary vs secondary), zeby bylo jasne
   ktory krok jest teraz wymagany. Bez wlasnej wysokosci - 44px domyslne z
   grupy .btx-btn-primary/.btx-btn-secondary (bento-uikit.css) wystarcza.
   margin-top wiekszy niz reszta rzedow (gap:8px z rodzica) - ten przycisk
   to inny "krok" niz pola nad nim, zasluguje na wyrazniejszy odstep. */
/* 2026-09-25 UIKit v2: pasek jak w kreatorze (.btx-stamp-bar) - duza
   pomaranczowa cena biezacego pliku po lewej, "Zapisz" po prawej. */
.btx-print-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid var(--btx-neutral-300, #d4d4d8);
}

.btx-print-bar-price {
    min-width: 0;
}

.btx-print-bar-price .btx-print-price-label {
    text-align: left;
}

.btx-print-line-price {
    font-size: 40px;
    font-weight: 900;
    color: var(--btx-color-warning, #f59e0b);
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1700px),
       (min-width: 992px) and (max-height: 820px) {
    .btx-print-line-price {
        font-size: 30px;
    }
}

/* "Zapisz" = .btx-stamp-confirm: ciemny prostokat 40px; disabled szary jak
   "Zatwierdz" w kreatorze przed wpisaniem tresci. */
.btx-print-options .btx-print-confirm {
    flex-shrink: 0;
    width: auto !important;
    min-width: 120px;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: var(--btx-radius-control, 16px) !important;
    background: var(--btx-color-primary, #18181b) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: var(--btx-text-sm, 12px) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.btx-print-options .btx-print-confirm:disabled {
    background: var(--btx-neutral-400, #a1a1aa) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

@media (hover: hover) {
    .btx-print-options .btx-print-confirm:not(:disabled):hover {
        background: var(--btx-color-primary-hover, #27272a) !important;
    }
}

/* Krok: ujednolicenie wysokosci kontrolek w prawej kolumnie (pigulki,
   select papieru, input kopii) do 44px - tyle ile domyslnie maja juz oba
   przyciski (Zatwierdz/Dodaj kolejny, grupa .btx-btn-primary/-secondary w
   bento-uikit.css) - bylo 48px, zbyt duze przy tylu rzedach w waskiej
   kolumnie. Natywny "Dodaj do koszyka" zostaje na swoich 48px (sitewide
   standard) - 4px roznicy jest juz niezauwazalne. */
/* Natywny select papieru - ukryty, zrodlo prawdy dla dropdownu v2. */
.btx-print-options .btx-print-native-select {
    display: none !important;
}

/* Etykiety pol jak w kreatorze pieczatek (.btx-stamp-section-label):
   male, WERSALIKI, pogrubione, trzeciorzedny kolor. */
.btx-print-options .btx-form-label {
    display: block;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: var(--btx-text-xs, 11px) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--btx-text-tertiary, #71717a) !important;
}

/* Stepper kopii (.btx-stepper z bento-uikit-new.css) - input zamiast
   <span>: bez ramki/tla, bez strzalek number. */
.btx-print-copies-stepper .btx-print-copies-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0;
    text-align: center;
    font-size: var(--btx-text-md, 15px);
    font-weight: 800;
    -moz-appearance: textfield;
    appearance: textfield;
    cursor: text;
}

.btx-print-copies-stepper .btx-print-copies-input::-webkit-outer-spin-button,
.btx-print-copies-stepper .btx-print-copies-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btx-print-copies-stepper .btx-print-copies-input:focus {
    outline: none;
}

.btx-print-copies-stepper:has(.btx-print-copies-input:disabled) {
    opacity: 0.5;
}

.btx-print-paper-dropdown .btx-ui2-dropdown-trigger:disabled {
    opacity: 0.5;
}

.btx-print-confirm-status {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

/* Pusty status nie zabiera miejsca miedzy paskiem a "Dodaj do koszyka". */
.btx-print-confirm-status:empty {
    display: none;
}

.btx-print-confirm-status.is-success {
    color: var(--btx-color-success, #16a34a);
}

.btx-print-confirm-status.is-dirty {
    color: var(--btx-text-secondary, #6b7280);
}

/* Native stepper ilosci nieprzydatny tutaj - "kopie" liczy sie per plik
   (wlasne pole btx_print_copies), nie per linia koszyka. Chowamy TYLKO
   sam stepper (.qty) - .product-quantity zawiera tez .add z przyciskiem
   "Dodaj do koszyka", ktory musi zostac widoczny. */
#product .product-quantity .qty {
    display: none !important;
}

/* Krok 4: selektory Format/Kolor/Dwustronnie/Papier w prawej kolumnie.
   gap:8px (bylo 16px) + reset marginesu .btx-form-group ponizej - inaczej
   odstep miedzy wierszami sie DUBLOWAL (gap flexa + wlasny margin-bottom
   kazdego .btx-form-group z bento-uikit.css, ktore i tak nie sa juz
   potrzebne skoro rodzic ustawia gap). Cel: caly prawy kafelek miesci sie
   na ekranie bez przewijania. */
/* Rytm kreatora pieczatek: 16px miedzy sekcjami (gap), linie podzialu
   16px nad (gap) i 16px pod (padding-top). */
.btx-print-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
}

.btx-print-options > .btx-form-group {
    margin-bottom: 0 !important;
}

.btx-print-options-radio-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Krok 5 (rewizja 7): Papier + Kopie w jednym wierszu, 70%/30% - oba
   .btx-form-group tracą wlasny margin-bottom z bento-uikit.css (gap
   wiersza go zastepuje), zeby nie sumowac odstepu podwojnie. */
.btx-print-paper-copies-row {
    display: flex;
    gap: 16px;
}

.btx-print-paper-copies-row .btx-form-group {
    margin-bottom: 0 !important;
}

.btx-print-paper-copies-row .btx-form-group:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.btx-print-paper-copies-row .btx-form-group:last-child {
    flex: 0 0 132px;
    min-width: 0;
}

/* 2026-09-28: wiersz Kolor (+ Kopie po prawej, gdy format nie ma papierow
   - CAD; JS placeCopiesGroup()). Te same proporcje co wiersz papieru. */
.btx-print-color-row {
    display: flex;
    gap: 16px;
}

.btx-print-color-row .btx-form-group {
    margin-bottom: 0 !important;
}

.btx-print-color-row .btx-form-group:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.btx-print-color-row .btx-print-copies-group {
    flex: 0 0 132px;
    min-width: 0;
}

/* CAD bez papieru: sam stepper na cala szerokosc wiersza (juz nieuzywane -
   stepper przenoszony do .btx-print-color-row, regula jako zabezpieczenie). */
.btx-print-paper-copies-row:has(.btx-print-paper-group[style*="none"]) .btx-form-group:last-child {
    flex: 1 1 auto;
}

/* Radio jako pigulki-przyciski zamiast kolek - ukrywamy natywny input,
   caly .btx-radio-wrap staje sie klikalnym przyciskiem.
   flex:1 (bylo auto-width) - pigulki rozciagaja sie na cala szerokosc
   wiersza zamiast byc malymi, stloczonymi przyciskami - analogicznie do
   tego jak elementy na stronie glownej wypelniaja swoje kontenery.
   Skalowanie per-breakpoint dodane niznej (tier 992-1440px), wartosci
   ×0.75 tak samo jak sasiedni #product .product-variants label w
   bento-product.css:1255 (ten sam wzorzec co reszta strony - nawigacja,
   kafle kategorii, stopka). Ponizej 992px BEZ osobnej regulki - tak samo
   jak .product-variants label: kolumna staje sie pelnoszerokosciowa
   (#product .btx-bento-grid -> 1fr, bento-product.css:353), wiec bazowy
   rozmiar wystarcza bez dodatkowego skalowania. */
/* 2026-09-25 UIKit v2: segmenty jak "Cala pieczatka / Sama gumka" w
   kreatorze (.btx-stamp-variant-btn) - prostokat --btx-radius-control,
   40px, aktywny = ciemne wypelnienie + bialy tekst (NIE pigulka z
   obrysem). Ten sam HTML (label.btx-radio-wrap > input + span), tylko CSS. */
.btx-print-options-radio-row {
    gap: 6px !important;
    margin-top: 0 !important;
}

.btx-print-options-radio-row .btx-radio-wrap {
    /* 2026-09-28: punkt odniesienia dla ukrytego radio (position:absolute
       nizej) - bez tego jego "containing block" byl caly kafel buyboxa i
       fokus na klikniety radio przewijal kafel (overflow:hidden, ale
       przewijalny programowo) -> tresc wyjezdzala w gore, pusty dol panelu
       (user: po kliknieciu "Z lewej" przy symbolu). */
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    padding: 0 10px !important;
    border: 1px solid var(--btx-border-color, #e4e4e7);
    border-radius: var(--btx-radius-control, 16px);
    background: #ffffff;
    box-shadow: none !important;
    cursor: pointer;
    font-size: var(--btx-text-sm, 12px) !important;
    font-weight: 700 !important;
    line-height: 1.15;
    text-align: center;
    color: var(--btx-text-secondary, #52525b) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .btx-print-options-radio-row .btx-radio-wrap:not(:has(.btx-radio:checked)):not(:has(.btx-radio:disabled)):hover {
        background: var(--btx-bg-input, #f4f4f5);
        border-color: var(--btx-border-hover, #d4d4d8);
    }
}

.btx-print-options-radio-row .btx-radio-wrap:not(:has(.btx-radio:checked)):not(:has(.btx-radio:disabled)):active {
    background: var(--btx-border-hover, #d4d4d8);
    transform: scale(0.95);
}

.btx-print-options-radio-row .btx-radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.btx-print-options-radio-row .btx-radio-wrap:has(.btx-radio:checked) {
    background: var(--btx-color-primary, #18181b);
    color: #ffffff !important;
    border-color: var(--btx-color-primary, #18181b);
}

/* Krok 5 (rewizja 6): pigulki wizualnie przygaszone, gdy caly formularz
   jest zablokowany (zatwierdzona konfiguracja - patrz setFormLocked() w
   print-configurator.js). Blokada faktycznego klikania to natywny atrybut
   disabled na ukrytym inpucie - to tylko warstwa wizualna. */
.btx-print-options-radio-row .btx-radio-wrap:has(.btx-radio:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pigulka "Wybierz plik" - to samo przygaszenie, gdy input jest disabled. */
.custom-file:has(.file-input:disabled) {
    opacity: 0.5;
}

.custom-file .file-input:disabled {
    cursor: not-allowed !important;
}

/* Wciety panel (margines od krawedzi kafelka) - .product-cover ponizej
   ma background:transparent, wiec margines to PRAWDZIWE biale tlo kafelka
   (.btx-tile-media), a nie osobny, innobarwny .product-cover.
   Top:0 celowo - .images-container juz ma padding-top nad calym
   .product-cover z bazowego bento-product.css (24px w bazie, 18px w tierze
   1440 - patrz media query nizej), wiec dokladanie wlasnego inset-u na
   gorze zdublowaloby margines. Zweryfikowane realnymi wartosciami z
   DevTools, nie zgadywane. */
/* Wzor kropek pozyczony z kreatora pieczatek (btxstampcreator) - user
   uznal go tam za udany i poprosil o dolozenie tu tez. Rysowany jako
   background-image NAD bazowym "--btx-neutral-300" (nie zamiast niego). */
.btx-print-surface {
    position: absolute;
    inset: 0 24px 24px 24px;
    border-radius: 12px;
    background-color: var(--btx-neutral-300, #d4d4d8);
    background-image: radial-gradient(var(--btx-neutral-400, #a1a1aa) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Tier 1440 (patrz bento-product.css): promien kafla skalowany do 21px
   (#product .btx-tile) - kontener PDF musi trzymac sie tej samej wartosci.
   Gora insetu zostaje 0 (korzysta z .images-container padding-top, ktory
   w tym tierze faktycznie ma 18px - to niezalezna, natywna sprawa). Boki i
   dol NIE skaluja sie razem z gora - wczesniej byly (×0.75, 24->18px), ale
   to tworzylo mismatch z prawym kaflem buybox (.btx-tile-buybox), ktory ma
   staly `padding:24px` (--btx-tile-padding) na tej szerokosci, bez zadnej
   redukcji do 767px. Zauwazone przez uzytkownika ("lewy kafelek ma za male
   marginesy") - zmierzone w DevTools (18px vs 24px), teraz oba 24px. */
@media (min-width: 992px) and (max-width: 1440px) {
    .btx-print-surface {
        border-radius: 9px;
    }
}

.product-cover {
    background: transparent !important;
}

/* Wiekszosc wydrukow (A4/A3) jest pionowa - kwadratowy .product-cover
   (bento-product.css, sitewide dla WSZYSTKICH zdjec produktow) za mocno
   przycinal wysokosc podgladu PDF. Nadpisanie scoped tylko do tej strony
   przez :has(.btx-print-surface) (ten sam wzorzec co przycisk "Dodaj do
   koszyka" wyzej w tym pliku) - nie dotyka galerii innych produktow.
   Cala kolumna miniatur (.btx-print-pdf-thumbs) i duzy podglad
   (.btx-print-pdf-preview) sa juz zbudowane na flex:1/min-height:0, wiec
   automatycznie rozciagaja sie na nowa wysokosc bez dodatkowych zmian. */
#product .images-container:has(.btx-print-surface) .product-cover {
    aspect-ratio: 3 / 4 !important;
    max-height: 760px !important;
    margin-bottom: 0 !important;
}

@media (min-width: 992px) and (max-width: 1440px) {
    #product .images-container:has(.btx-print-surface) .product-cover {
        max-height: 570px !important;
    }
}

/* Natywny pasek miniatur galerii (.js-qv-mask > .product-images) - na tej
   stronie zawsze pusty (nie ma zwyklych zdjec produktu, .btx-print-surface
   zastepuje cala galerie), a mimo to dostawal wlasny padding+border-top z
   bento-product.css (~40px pustej przestrzeni z linia) pod nasza karta
   pliku - psulo to odstep na dole ustawiony w .btx-print-file-info. */
#product .images-container:has(.btx-print-surface) .js-qv-mask {
    display: none !important;
}

.btx-print-surface.is-dragover {
    outline: 2px dashed var(--btx-text-primary, #1f2937);
    outline-offset: -2px;
}

.btx-print-surface-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}

.btx-print-surface-icon {
    font-size: 64px !important;
    color: var(--btx-text-secondary, #6b7280);
}

.btx-print-surface-hint {
    font-size: 13px;
    font-weight: 500;
    color: var(--btx-text-secondary, #6b7280);
}

.btx-print-surface-or {
    font-size: 12px;
    color: var(--btx-text-secondary, #6b7280);
}

.btx-print-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

/* Krok 3 (rewizja 2): przegladarka PDF - lista miniatur (lewo, pionowo,
   przewijana) + duzy podglad wybranej strony (prawo). Wypelnia cala
   wysokosc .btx-print-surface (flex:1 - rodzic jest column, wiec to
   rozciaga sie na reszte dostepnej wysokosci ponizej pustego stanu). */
.btx-print-pdf-viewer {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 12px;
    padding: 16px;
    box-sizing: border-box;
}

/* Kolumna: strzalka gora, lista miniatur, strzalka dol. */
.btx-print-pdf-thumbs-col {
    flex: 0 0 84px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Outline (nie wypelnienie) - poprzednia wersja z tlem --btx-neutral-200
   na hover zmienialaby sie na --btx-neutral-300, czyli DOKLADNIE ten sam
   kolor co tlo .btx-print-surface - przycisk wizualnie znikal. */
.btx-print-pdf-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    background: transparent;
    border: 1px solid var(--btx-text-secondary, #6b7280);
    border-radius: 6px;
    color: var(--btx-text-secondary, #6b7280);
    font-size: 9px;
    cursor: pointer;
}

@media (hover: hover) {
    .btx-print-pdf-nav:hover {
        border-color: var(--btx-text-primary, #1f2937);
        color: var(--btx-text-primary, #1f2937);
    }
}

.btx-print-pdf-thumbs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--btx-neutral-400, #a1a1aa) transparent;
    /* 2026-09-25: suwak jak w kreatorze pieczatek (.btx-stamp-scroll) -
       tor 13px / kciuk 11px, fade 10px gora/dol (maska bez toru paska). */
    scrollbar-gutter: stable;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
        linear-gradient(#000, #000);
    -webkit-mask-size: calc(100% - 13px) 100%, 13px 100%;
    -webkit-mask-position: left top, right top;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-image:
        linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
        linear-gradient(#000, #000);
    mask-size: calc(100% - 13px) 100%, 13px 100%;
    mask-position: left top, right top;
    mask-repeat: no-repeat, no-repeat;
}

.btx-print-pdf-thumbs::-webkit-scrollbar {
    width: 13px;
}

.btx-print-pdf-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.btx-print-pdf-thumbs::-webkit-scrollbar-thumb {
    background: var(--btx-neutral-400, #a1a1aa);
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: 999px;
}

.btx-print-pdf-thumb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px;
    background: transparent;
    cursor: pointer;
}

.btx-print-pdf-thumb-item.is-active {
    border-color: var(--btx-text-primary, #1f2937);
    background: #ffffff;
}

.btx-print-pdf-thumb-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--btx-text-secondary, #6b7280);
}

.btx-print-pdf-thumb-item.is-active .btx-print-pdf-thumb-num {
    color: var(--btx-text-primary, #1f2937);
}

.btx-print-page-thumb {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--btx-border-color, #e5e7eb);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btx-print-page-more {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: 1px dashed var(--btx-border-color, #e5e7eb);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--btx-text-secondary, #6b7280);
}

.btx-print-pdf-preview {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.btx-print-pdf-preview-canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Krok 3 (rewizja): kafelek ZDJĘCIA -> pilotażowy produkt to nie fotki,
   tylko druk - podmieniamy badge na piktogram drukarki (stan pusty). */
.btx-badge-media {
    display: none !important;
}

/* Info-box pod panelem PDF: 3 NIEZALEZNE kolumny grida - nazwa pliku
   (lewo), liczba stron (SRODEK calej karty, nie zgrupowana z nazwa), "x"
   (prawo). Skrajne kolumny maja rowna szerokosc (1fr/1fr), zeby srodkowa
   kolumna byla naprawde wypoziomowana na srodku calej karty, niezaleznie
   od dlugosci nazwy pliku. Boczny margines (24px) i dolny (24px) zrownany
   z insetem .btx-print-surface powyzej - info-box jest OSTATNIM elementem
   w .btx-tile-media (ktory ma padding:0), wiec sam odpowiada za odstep od
   dolnej krawedzi kafla. */
.btx-print-file-info {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 24px;
    padding: 10px 12px;
    border: 1px solid var(--btx-neutral-300, #d4d4d8);
    border-radius: var(--btx-radius-md, 12px);
    box-sizing: border-box;
}

.btx-print-file-info-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--btx-text-primary, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
}

.btx-print-file-info-name:empty {
    display: none;
}

.btx-print-file-info-meta {
    font-size: 12px;
    color: var(--btx-text-secondary, #6b7280);
    text-align: center;
    white-space: nowrap;
}

.btx-print-file-info-remove {
    width: 28px;
    height: 28px;
    justify-self: end;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--btx-text-secondary, #6b7280);
    transition: background-color 0.15s, color 0.15s, transform 0.05s;
}

@media (hover: hover) {
    .btx-print-file-info-remove:hover {
        background: var(--btx-neutral-200, #e4e4e7);
        color: var(--btx-text-primary, #1f2937);
    }
}

.btx-print-file-info-remove:active {
    background: var(--btx-neutral-300, #d4d4d8);
    transform: scale(0.9);
}

/* Staly naglowek panelu - ZAWSZE widoczny (w przeciwienstwie do statusu i
   karty pliku ponizej, ktore chowaja sie/pokazuja w zaleznosci od stanu).
   Rozmiar zrownany 1:1 z H1 nazwy produktu w prawej kolumnie
   (#product .btx-product-title w bento-product.css) - ten sam wzorzec
   typograficzny co "Parametry druku" nizej w tym pliku. */
/* margin-top:8px - .images-container (bento-product.css, natywne, NIE
   ruszane - dotyczy galerii WSZYSTKICH produktow) daje tylko 24px
   padding-top, a .btx-tile-buybox obok ma teraz 32px (patrz scoped
   override nizej) - te 8px doklada brakujaca roznice, zeby oba tytuly
   nadal siedzialy w jednej linii mimo wiekszego paddingu po prawej. */
.btx-print-panel-title {
    margin-top: 0;
    margin-bottom: 16px;
    margin-left: 24px;
    margin-right: 24px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--btx-text-primary, #1f2937);
}

/* .images-container ma w tym tierze natywnie zmniejszony padding-top
   (18px zamiast 24px, patrz komentarz przy .btx-print-surface wyzej) - ale
   .btx-tile-buybox (prawy kafel, H1/"Parametry druku") NIE ma tej redukcji
   (staly padding, teraz 32px). Bez kompensacji lewy tytul siadal wyzej niz
   prawy mimo identycznego font-size - zauwazone przez uzytkownika,
   zmierzone w DevTools. margin-top: 14px = 32 (buybox padding) - 18
   (images-container padding-top w tym tierze). */
@media (min-width: 992px) and (max-width: 1440px) {
    .btx-print-panel-title {
        font-size: 21px;
        /* 24 (padding buyboxa) - 18 (padding-top .images-container w tym tierze) */
        margin-top: 6px;
    }
}

/* Zastepuje wizualnie ukryte H1 nazwy produktu w prawej kolumnie (patrz JS
   - productTitle.style.display='none' + insertBefore). Typografia
   skopiowana 1:1 z #product .btx-product-title (bento-product.css),
   zeby wyglad prawej kolumny sie nie zmienil - tylko tekst inny. */
.btx-print-panel-title-right {
    font-size: 28px;
    font-weight: 800;
    color: var(--btx-text-primary, #1f2937);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

@media (min-width: 992px) and (max-width: 1440px) {
    .btx-print-panel-title-right {
        font-size: 21px;
    }
}

.btx-print-upload-status {
    text-align: left;
    margin-top: 4px;
    margin-left: 24px;
    margin-right: 24px;
    font-size: 12px;
    color: var(--btx-text-secondary, #6b7280);
}

/* Pole "Wybierz plik" siedzi TERAZ wewnatrz .btx-print-surface-empty, pod
   napisem "lub" (patrz JS) - grupowany wizualnie z hintem "Przeciagnij
   plik tutaj", znika razem z calym stanem pustym po wybraniu pliku
   (podmiana pliku pozniej przez "x" w .btx-print-file-info). Etykieta/hint
   (".pdf .jpg .png") i nazwa pliku sa tu zbedne - nazwa pokazuje sie juz
   osobno pod panelem (.btx-print-file-info-name), wiec obie ukryte,
   zostaje tylko sam przycisk. Wlasna klasa (NIE .btx-customization-inner -
   ta jest zarezerwowana dla natywnej Personalizacji, patrz komentarz w
   print-upload.tpl). */
.btx-print-upload-inner ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.btx-print-upload-inner label,
.btx-print-upload-inner small,
.btx-print-upload-inner .js-file-name {
    display: none !important;
}

.btx-print-upload-inner .custom-file {
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0 !important;
    width: auto !important;
}

.btx-print-upload-inner .custom-file .btx-btn-secondary {
    position: static !important;
    transform: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 20px !important;
    border-radius: var(--btx-radius-control, 16px) !important;
    box-shadow: none !important;
    font-size: var(--btx-text-sm, 12px) !important;
}

/* Guzik ma "pointer-events: none" z bazowej .custom-file button (zeby klik
   trafial w niewidoczny .file-input pod spodem, nie w sam przycisk) - przez
   to nigdy nie dostaje wlasnego :hover/:active. Efekty podpiete wiec pod
   stan rodzica .custom-file (ktory pointer-events NIE ma wylaczonych i
   pokrywa dokladnie ten sam obszar co niewidoczny input), zeby wizualnie
   nadal wygladalo jak hover/klik na przycisku. */
@media (hover: hover) {
    .btx-print-upload-inner .custom-file:hover .btx-btn-secondary {
        background: var(--btx-color-primary-hover, #3f3f46) !important;
        transform: translateY(-1px) !important;
    }
}

.btx-print-upload-inner .custom-file:active .btx-btn-secondary {
    transform: scale(0.94) !important;
    transition-duration: 0.05s !important;
}

/* Dwie osobne ceny: natywna .current-price u gory pokazuje TERAZ cene
   BIEZACO edytowanego/konfigurowanego pliku (lineTotalFormatted, patrz
   saveJob() w JS - aktualizuje sie po kazdej zmianie Format/Kolor/
   Dwustronnie/Papier/Kopie). Suma calej kolejki (totalFormatted) przeniesiona
   tutaj, obok "Twoja kolejka drukowania". Widoczna dopiero gdy w kolejce
   jest cos realnie do zsumowania - ten sam wzorzec :has() co
   .btx-print-queue-title obok. Maly opis ("Suma zamowienia") nad cena -
   ten sam wzorzec co .btx-print-price-label nad .current-price u gory,
   zeby obie ceny mialy jasny kontekst czego dotycza. */
.btx-print-queue-total-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.btx-print-price-label {
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--btx-text-secondary, #6b7280);
    margin-bottom: 2px;
}

.btx-print-queue-total {
    font-size: var(--btx-text-lg, 18px);
    font-weight: 800;
    color: var(--btx-text-primary, #18181b);
    line-height: 1;
    white-space: nowrap;
}

/* Nowy kafelek cennika - pelna szerokosc (poza siatka .btx-bento-grid, ta
   sama zasada co .btx-accessories-section - zwykly blok w .container, bez
   wlasnego ograniczenia szerokosci). Reuzywa bazowego .btx-tile (padding/
   tlo/ramka/promien/cien) i .btx-section-title (naglowek) - zero nowego
   CSS na sam kontener, tylko na tabelke w srodku. */
.btx-print-pricing-tile {
    margin-bottom: 40px;
}

/* Audyt szerokosci 2026-09-25: usuniety dawny "full-bleed" 85vw/92.5vw
   kafla cennika - siatka .btx-bento-grid od 2026-09-02 NIE jest juz
   vw-based (dziedziczy szerokosc #product .container), wiec cennik
   wystawal poza kafle nad nim (1211 vs 1158px na 1440, 2163px na 2560).
   Teraz dziedziczy te sama szerokosc co siatka. */

/* Tytul kafelka - ta sama typografia co "Twoj plik do druku"/"Parametry
   druku" (.btx-print-panel-title-right), NIE .btx-section-title (ta ma
   inny, mniejszy/capsowy wzorzec uzywany np. przy "Mozesz takze
   potrzebowac" - zle pasowal tutaj, zauwazone przez uzytkownika). */
.btx-print-pricing-title {
    margin-bottom: 24px;
}

/* Dwie tabelki (Kolor/Czarno-bialy) obok siebie na desktopie, pod soba
   gdy brakuje miejsca - kazda tabelka ma WLASNE kolumny (table-layout:
   fixed), bo A4/A3 maja rozne progi stron (patrz komentarz w PHP), wiec
   nie da sie ich zlac w jedna wspolna siatke kolumn. */
.btx-print-pricing-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.btx-print-pricing-group {
    flex: 1;
    min-width: 280px;
}

.btx-print-pricing-group-title {
    margin: 0 0 10px;
    font-size: var(--btx-text-sm, 12px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--btx-text-tertiary, #71717a);
    text-align: left;
}

.btx-print-pricing-table-wrap {
    overflow-x: auto;
}

/* 2026-09-25 UIKit v2: tabele jak w nowych stronach CMS (bento-cms.css) -
   zaokraglona ramka (border-collapse: separate, inaczej radius ignorowany),
   jasne tlo, naglowek WERSALIKAMI. */
.btx-print-pricing-table {
    width: 100%;
    table-layout: fixed;
    border: 1px solid var(--btx-border-color, #e4e4e7);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--btx-radius-control, 16px);
    overflow: hidden;
    background: var(--btx-bg-input, #f4f4f5);
}

.btx-print-pricing-table th,
.btx-print-pricing-table td {
    padding: 10px 14px;
    text-align: left;
    font-size: var(--btx-text-body, 14px);
    border-bottom: 1px solid var(--btx-border-color, #e4e4e7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.btx-print-pricing-table th {
    background: var(--btx-bg-tile, #ececed);
    font-size: var(--btx-text-sm, 12px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--btx-text-primary, #18181b);
}

/* Naglowki moga sie zawijac (CAD ma 5 kolumn: "Skladanie maszynowe"...). */
.btx-print-pricing-table th {
    white-space: normal;
    line-height: 1.25;
}

.btx-print-pricing-table td {
    color: var(--btx-text-primary, #1f2937);
}

.btx-print-pricing-table tbody tr:last-child td {
    border-bottom: none;
}

/* Trzecia tabelka (doplaty za papier), POD dwiema kolorowymi (nie w ich
   flexie) - stad ten sam odstep gora co gap miedzy tamtymi dwiema (32px w
   .btx-print-pricing-groups), zeby rytm pionowy sie nie rozjechal. Naglowek
   reuzywa .btx-print-pricing-group-title (wysrodkowanie + linia separatora),
   zero wlasnego CSS na sam tytul. */
.btx-print-pricing-papers {
    margin-top: 32px;
}

.btx-print-pricing-note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--btx-text-secondary, #6b7280);
}


/* ==========================================================================
   2026-09-25: strona konfiguratora jak kreator pieczatek (user: "ukryj
   cenniki calkowicie i newslettery, zablokuj scrolla, dodaj chevrona i
   zastosuj taki mechanizm stopki jak na stronie kreatora pieczatek").
   Scope: body:has(.btx-print-options) = TYLKO strony produktow-konfiguratorow
   (860 A4-A3, 996 CAD, kolejne z profili) - bez wpisanych na sztywno id.
   Wzorzec: stamp-creator.css (body.product-id-862, .btx-stamp-scroll-footer).
   ========================================================================== */

/* Wszedzie (mobile + desktop): bez cennika, akcesoriow i newslettera.
   Cennik jest na stronach uslug/CMS, tu tylko konfigurator. */
body:has(.btx-print-options) .btx-print-pricing-tile,
body:has(.btx-print-options) .btx-accessories-section,
body:has(.btx-print-options) .btx-footer-before {
    display: none !important;
}

/* Strzalka widoczna tylko na desktopie (nizej). */
.btx-print-scroll-footer {
    display: none;
}

/* Mobile/tablet (<992px): normalny scroll przez konfigurator, stopki brak
   (decyzja usera - jak kreator na mobile, ale bez blokady scrolla, bo
   konfigurator ma ~2 ekrany wysokosci). */
@media (max-width: 991px) {
    body:has(.btx-print-options) #footer {
        display: none !important;
    }

    /* odstep od dolu ekranu po zniknieciu stopki = odstep sekcji */
    body:has(.btx-print-options) #main {
        padding-bottom: var(--btx-gap-section, 32px);
    }
}

@media (min-width: 992px) {
    /* Blokada scrolla + ukryty pasek (kreator: html/body.product-id-862). */
    body:has(.btx-print-options) {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html:has(.btx-print-options) {
        overflow: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html:has(.btx-print-options)::-webkit-scrollbar,
    body:has(.btx-print-options)::-webkit-scrollbar {
        display: none;
    }

    /* Siatka wypelnia ekran: te same liczby co kokpit kreatora (127px gora
       nad pelnym navem + 35px dolu pod strzalke; <=1440 compact nav, #wrapper
       bez padding-top -> 102px + 35px). */
    #product .btx-bento-grid:has(.btx-print-options) {
        height: calc(100vh - 162px);
        height: calc(100dvh - 162px);
        grid-template-rows: minmax(0, 1fr) !important;
        margin-bottom: 35px !important;
    }

    #product .btx-bento-grid:has(.btx-print-options) > .btx-col-left,
    #product .btx-bento-grid:has(.btx-print-options) > .btx-col-right {
        min-height: 0;
        height: 100%;
    }

    /* Lewy kafel: podglad pliku dopasowuje sie do wysokosci (zamiast
       sztywnego 3/4 + max-height 760/570). */
    #product .btx-bento-grid:has(.btx-print-options) .btx-tile-media,
    #product .btx-bento-grid:has(.btx-print-options) .images-container {
        min-height: 0;
        height: 100%;
    }

    #product .images-container:has(.btx-print-surface) .product-cover {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        max-height: none !important;
    }

    /* Prawa kolumna: buybox bierze reszte i scrolluje W SRODKU, gdy opcje
       sie nie mieszcza (niskie okna laptopow); trust tile wg tresci. */
    #product .btx-col-right > .btx-tile-buybox:has(.btx-print-options) {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        /* clip = w ogole nieprzewijalny (tez programowo / przez fokus);
           hidden zostaje jako fallback dla starszych przegladarek. */
        overflow: clip !important;
    }

    /* Suwak 1:1 z kreatora (.btx-stamp-scroll, stamp-creator.css - tam pelne
       wyprowadzenie liczb): pasek 13px w polowie 24px paddingu kafla
       (margin-right -18.5px / padding-right 5.5px, gutter stable), kciuk
       11px, fade 10px u gory/dolu maska. Ujemne marginesy pionowe = fade
       wchodzi w padding kafla, tresc zostaje na granicy 24px. */
    .btx-print-buybox-scroll {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-gutter: stable;
        /* lewy zapas 4 px (w paddingu kafla) - obwodki aktywnych elementow
           (np. probka koloru tabliczki: outline 2 + offset 2) nie sa
           przycinane przez krawedz przewijanej listy; tresc zostaje na 24 px. */
        margin: -10px -18.5px -10px -4px;
        padding: 10px 5.5px 10px 4px;
        scrollbar-width: thin;
        scrollbar-color: var(--btx-neutral-400, #9ca3af) transparent;
    }

    /* 2026-09-28: wygaszenie gora/dol przyklejonymi gradientami zamiast
       mask-image - maska na PRZEWIJANYM kontenerze w Chrome (GPU) potrafila
       nie odrysowac sie po zmianie tresci (user: po wyborze symbolu z boku
       "wywalilo polowe panelu" - pusty obszar, suwak niepasujacy do tresci).
       Ten sam efekt 10 px, kolor tla kafla, bez klikania w gradient. */
    .btx-print-buybox-scroll::before,
    .btx-print-buybox-scroll::after {
        content: '';
        position: sticky;
        z-index: 3;
        display: block;
        height: 10px;
        pointer-events: none;
    }

    .btx-print-buybox-scroll::before {
        top: 0;
        margin-top: -10px;
        margin-bottom: 0;
        background: linear-gradient(to bottom, var(--btx-bg-tile, #ececed), rgba(236, 236, 237, 0));
    }

    .btx-print-buybox-scroll::after {
        bottom: 0;
        margin-top: 0;
        margin-bottom: -10px;
        background: linear-gradient(to top, var(--btx-bg-tile, #ececed), rgba(236, 236, 237, 0));
    }

    .btx-print-buybox-scroll::-webkit-scrollbar {
        width: 13px;
    }

    .btx-print-buybox-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .btx-print-buybox-scroll::-webkit-scrollbar-thumb {
        background: var(--btx-neutral-400, #9ca3af);
        background-clip: padding-box;
        border: 1px solid transparent;
        border-radius: 999px;
    }

    #product .btx-bento-grid:has(.btx-print-options) .btx-tile-trust {
        flex: 0 0 auto !important;
    }

    /* Strzalka-chevron do stopki (1:1 .btx-stamp-scroll-footer). */
    .btx-print-scroll-footer {
        position: fixed;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        z-index: 601;
        width: 48px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: transparent;
        color: #ffffff;
        opacity: 0.35;
        cursor: pointer;
    }

    .btx-print-scroll-footer-icon {
        width: 40px;
        height: 12px;
        stroke: currentColor;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transform: rotate(0deg);
        transition: transform 0.6s ease;
    }

    .btx-print-scroll-footer.is-open .btx-print-scroll-footer-icon {
        transform: rotate(180deg);
    }

    @media (hover: hover) {
        .btx-print-scroll-footer:hover {
            opacity: 1;
        }
    }

    .btx-print-scroll-footer:active {
        opacity: 1;
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    #product .btx-bento-grid:has(.btx-print-options) {
        height: calc(100vh - 137px);
        height: calc(100dvh - 137px);
    }

    body:has(.btx-print-options) #wrapper {
        padding-top: 0 !important;
    }
}