/* Karta produktu z generatorem według projektu Damiana z Claude Design (30.10.2026): kolory i odstępy z projektu, kroje
   z motywu (Cormorant, Poppins) i z plików graweru (ntg-*). Ładowany tylko na karcie z generatorem (karta.php). */

.ntg-karta {
  --ntg-pole: #23262c;
  --ntg-linia: #2f333b;
  --ntg-linia2: #3a3e46;
  --ntg-tekst: #f4f1eb;
  --ntg-tekst2: #e4e1da;
  --ntg-szary: #b4b7bd;
  --ntg-szary2: #8d929b;
  --ntg-akcent: #ff3e01;
  --ntg-akcent2: #e83800;
  --ntg-blad: #ff6a3d;
  --ntg-tytul: var(--title-font, "Cormorant", serif);
  --ntg-tresc: var(--body-font, "Poppins", sans-serif);
}

/* Motyw: bez pasa z tytułem (h1 jest w prawej kolumnie), bez „Udostępnij”; .main bez perspective i z overflow clip,
   inaczej przyklejony podgląd nie trzyma się ekranu. */
.ntg-karta .breadcumb-wrapper,
.ntg-karta .product_meta { display: none !important; }
.ntg-karta .main { overflow-x: clip; perspective: none; transform-style: flat; }
.ntg-karta [hidden] { display: none !important; }
/* Bez pasa z tytułem produkt zaczyna się bliżej nagłówka, jak w projekcie; pasek kategorii motywu (margines 130 px od
   produktu, „zlewa się”) oddzielają tu jeszcze okruszki. */
.ntg-karta .vs-product-wrapper.space-top { padding-top: 40px; }
.ntg-karta nav.ntg-kategorie { margin-bottom: 56px; }

.ntg-okruszki { margin: 0 0 24px; font-size: 13px; color: var(--ntg-szary2); }
.ntg-okruszki ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ntg-okruszki li { margin: 0; }
.ntg-okruszki li + li::before { content: "/"; margin-right: 10px; }
.ntg-okruszki a { color: var(--ntg-szary); }
.ntg-okruszki a:hover { color: var(--ntg-akcent); }

/* ---------------- Podgląd ---------------- */

/* Przyklejony podgląd pod paskiem menu Luxrio (#navbars, 122 px, pokazuje się po 600 px przewinięcia); okno mniejsze
   o tyle, żeby przyciski, miniatury i notka pod nim też mieściły się na ekranie (--ntg-pod: ich wysokość z grawer.js,
   bo zawijają się przy węższej kolumnie i większej liczbie zdjęć; 152 px to odstęp od góry ekranu i od dołu). Najmniej
   220 px: laptop FHD przy 150% (widok ok. 1280 × 560–600) mieści wtedy cały podgląd. */
@media (min-width: 992px) {
  .ntg-karta .product-details-img { position: sticky; top: 138px; }
  .ntg-karta .ntg-okno { max-width: max(220px, calc(100vh - 152px - var(--ntg-pod, 138px))); }
}
.ntg-podglad { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ntg-okno {
  position: relative;
  width: 100%;
  max-width: max(320px, calc(100vh - 210px));
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 1px solid #23262c;
  overflow: hidden;
}
.ntg-scena { position: absolute; inset: 0; width: 100%; height: 100%; }
.ntg-plotno { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.ntg-plotno:active { cursor: grabbing; }
.ntg-bez-3d .ntg-plotno { cursor: default; object-fit: contain; }
.ntg-plakietka {
  position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 10px;
  background: rgba(28, 30, 34, .8); border: 1px solid var(--ntg-linia); font: 500 12px/1.4 var(--ntg-tresc); color: var(--ntg-tekst2);
  pointer-events: none;
}
.ntg-kropka { width: 6px; height: 6px; border-radius: 50%; background: #d8d5ce; flex: none; }
.ntg-plakietka.ntg-aktywna .ntg-kropka { background: var(--ntg-akcent); }
/* Najwyżej do plakietki (do 130 px): dłuższy wymiar zawija się pod siebie zamiast na nią wchodzić. */
.ntg-wymiar { position: absolute; top: 18px; right: 16px; max-width: calc(100% - 150px); text-align: right; font: 12px/1.4 var(--ntg-tresc); color: #a3a7ae; pointer-events: none; }
/* Z tłem jak plakietka: napis stoi na samym przedmiocie, także białym albo srebrnym. */
.ntg-pusty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 80%; padding: 6px 12px;
  background: rgba(28, 30, 34, .8); border: 1px solid var(--ntg-linia); text-align: center; font: 14px/1.5 var(--ntg-tresc);
  color: var(--ntg-tekst2); pointer-events: none;
}
.ntg-skan {
  position: absolute; left: 4%; right: 4%; top: 8%; height: 2px; background: var(--ntg-akcent);
  box-shadow: 0 0 14px 3px rgba(255, 62, 1, .55); animation: ntg-skan 1.3s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes ntg-skan { from { top: 8%; } to { top: 90%; } }
.ntg-pole-podpis {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 12px/1.4 var(--ntg-tresc); color: #ff7a4d;
  pointer-events: none;
}
.ntg-nakladka { position: absolute; inset: 0; background: #1a1c1f; }
.ntg-nakladka img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; }
.ntg-nakladka-dol {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.ntg-nakladka-opis { padding: 5px 10px; background: rgba(28, 30, 34, .85); font: 12px/1.4 var(--ntg-tresc); color: var(--ntg-tekst2); }
.ntg-karta .ntg-wroc {
  height: 40px; padding: 0 14px; border: 1px solid var(--ntg-tekst); background: rgba(28, 30, 34, .85); color: var(--ntg-tekst);
  font: 500 13px var(--ntg-tresc); cursor: pointer;
}

.ntg-sterowanie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; container-type: inline-size; }
.ntg-widoki { display: flex; border: 1px solid var(--ntg-linia2); }
.ntg-karta .ntg-widoki button {
  height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ntg-tekst); font: 500 13px var(--ntg-tresc); cursor: pointer;
}
.ntg-karta .ntg-widoki button[aria-pressed="true"] { background: var(--ntg-tekst); color: #1c1e22; }
.ntg-karta .ntg-obrot,
.ntg-karta .ntg-pole {
  height: 42px; padding: 0 14px; border: 1px solid var(--ntg-linia2); background: transparent; color: var(--ntg-tekst);
  display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--ntg-tresc); cursor: pointer;
}
.ntg-obrot svg, .ntg-pole svg { width: 16px; height: 16px; }
.ntg-karta .ntg-obrot[aria-pressed="true"],
.ntg-karta .ntg-pole[aria-pressed="true"] { border-color: var(--ntg-akcent); }
/* Wskazówka zawsze w wierszu przycisków (podstawa 0, bez zawijania): w drugim wierszu zabierała 36 px oknu przyklejonego
   podglądu. Przy dłuższym rzeczowniku z paczki skraca się wielokropkiem. */
.ntg-wskazowka { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--ntg-szary2); }
/* „Przeciągnij, aby obrócić podkładkę” (216 px) obok trzech przycisków (390 px) mieści się od kolumny 620 px; w węższej
   (laptop 1024–1329 px) wskazówki nie ma, kursor „łapka” i „Obracaj” zostają. */
@container (max-width: 619px) { .ntg-wskazowka { display: none; } }

.ntg-miniatury { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ntg-karta .ntg-miniatura {
  width: 68px; height: 68px; padding: 0; border: 1px solid var(--ntg-linia); background: var(--ntg-pole); cursor: pointer;
  display: grid; place-items: center; overflow: hidden;
}
.ntg-karta .ntg-miniatura[aria-pressed="true"] { border-color: var(--ntg-akcent); }
.ntg-miniatura img { width: 100% !important; height: 100% !important; object-fit: cover; }
.ntg-miniatura-projekt span {
  width: 44px; height: 44px; border-radius: 50%; background: #38393c; box-shadow: 0 3px 0 #232427; display: grid; place-items: center;
  font: 600 11px var(--ntg-tytul); color: #d8d5ce;
}
.ntg-uwaga { flex: 1; min-width: 200px; margin: 0 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--ntg-szary2); }

/* ---------------- Nagłówek prawej kolumny ---------------- */

.ntg-naglowek { font-family: var(--ntg-tresc); }
.ntg-karta .ntg-tytul {
  margin: 0; font-family: var(--ntg-tytul); font-weight: 700; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; color: var(--ntg-tekst);
  text-transform: none; text-wrap: balance;
}
.ntg-cena-wiersz { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.ntg-cena { font-size: 24px; font-weight: 600; color: var(--ntg-tekst); }
.ntg-cena .woocommerce-Price-amount { color: inherit; }
.ntg-dostepnosc { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ntg-akcent); }
.ntg-dostepnosc .ntg-kropka { background: var(--ntg-akcent); }
.ntg-dostepnosc.ntg-niedostepny { color: var(--ntg-szary2); }
.ntg-krotki-opis { margin: 14px 0 0; max-width: 560px; font-size: 15px; line-height: 1.55; color: var(--ntg-szary); text-wrap: pretty; }
.ntg-krotki-opis p { margin: 0; }
/* Akapity z treści WooCommerce: kolor, wielkość i interlinia sekcji zamiast reguły p motywu (#d1d0d0, 1.9). */
.ntg-krotki-opis p, .ntg-szczegoly p, .ntg-pytanie-tresc p { color: inherit; font-size: inherit; line-height: inherit; }
/* Akapity karty z własną klasą bez interlinii: projektowa 1,55 zamiast p { line-height: 1.9 } motywu. */
.ntg-krok-streszczenie, .ntg-gotowe, .ntg-limit, .ntg-pods-etykieta, .ntg-polecane-nad, .ntg-czas { line-height: 1.55; }
.ntg-cechy { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ntg-cechy li { margin: 0; padding: 5px 10px; border: 1px solid var(--ntg-linia); font-size: 13px; color: #d9d6cf; }

/* ---------------- Kroki ---------------- */

.ntg-karta form.cart { display: block; margin: 0; }
.ntg-panel { margin-top: 28px; font-family: var(--ntg-tresc); font-size: 15px; line-height: 1.55; color: var(--ntg-tekst); }
.ntg-krok { border-top: 1px solid var(--ntg-linia); padding: 22px 0; }
.ntg-krok-glowa { display: flex; align-items: flex-start; gap: 14px; }
.ntg-krok-nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ntg-tekst);
  font-size: 13px; font-weight: 600; color: var(--ntg-tekst);
}
.ntg-krok-nr svg { display: none; width: 14px; height: 14px; }
.ntg-krok--gotowy .ntg-krok-nr { background: var(--ntg-akcent); border-color: var(--ntg-akcent); color: #fff; }
.ntg-krok--gotowy .ntg-krok-nr svg { display: block; }
.ntg-krok--gotowy .ntg-krok-cyfra { display: none; }
.ntg-krok--uwaga .ntg-krok-nr { border-color: var(--ntg-akcent); color: var(--ntg-akcent); }
.ntg-krok--zablokowany .ntg-krok-nr { border-color: var(--ntg-linia2); color: #7c818a; }
.ntg-krok-opis { flex: 1; min-width: 0; }
.ntg-karta .ntg-krok-tytul {
  margin: 0; font-family: var(--ntg-tytul); font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--ntg-tekst); text-transform: none;
}
.ntg-krok-tytul:focus { outline: none; }
.ntg-krok--zablokowany .ntg-krok-tytul { color: #7c818a; }
.ntg-krok-streszczenie { margin: 4px 0 0; font-size: 14px; color: var(--ntg-szary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntg-karta .ntg-krok-przelacz {
  flex: none; min-height: 36px; padding: 4px 0; background: none; border: 0; color: var(--ntg-tekst); font: 500 13px var(--ntg-tresc);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.ntg-krok-tresc { padding: 14px 0 0 44px; display: flex; flex-direction: column; gap: 12px; }
.ntg-pomoc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ntg-szary); text-wrap: pretty; }

.ntg-opis-pole { position: relative; }
.ntg-karta .ntg-panel textarea.ntg-opis {
  display: block; width: 100%; min-height: 100px; height: auto; resize: vertical; padding: 12px 14px 28px; background: var(--ntg-pole);
  border: 1px solid var(--ntg-linia); border-radius: 2px; color: var(--ntg-tekst); font: 16px/1.5 var(--ntg-tresc); outline: none;
}
.ntg-licznik { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: var(--ntg-szary2); pointer-events: none; }
.ntg-okazje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ntg-okazje > span { font-size: 13px; color: var(--ntg-szary2); margin-right: 2px; }
.ntg-karta .ntg-okazja {
  height: 34px; padding: 0 12px; border: 1px solid var(--ntg-linia2); border-radius: 2px; background: transparent; color: var(--ntg-tekst2);
  font: 13px var(--ntg-tresc); cursor: pointer;
}
.ntg-karta .ntg-okazja:hover { border-color: var(--ntg-tekst); }
.ntg-akcje { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 4px; }
.ntg-karta .ntg-generuj {
  height: 52px; padding: 0 26px; border: 0; background: var(--ntg-akcent); color: #fff; font: 600 14px var(--ntg-tresc); letter-spacing: .1em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
}
.ntg-karta .ntg-generuj:hover { background: var(--ntg-akcent2); }
.ntg-karta .ntg-generuj[aria-disabled="true"] { opacity: .55; cursor: not-allowed; background: var(--ntg-akcent); }
.ntg-laduje::before {
  content: ""; width: 14px; height: 14px; flex: none; border: 2px solid rgba(255, 255, 255, .35); border-top-color: currentColor;
  border-radius: 50%; animation: ntg-kolo .8s linear infinite;
}
@keyframes ntg-kolo { to { transform: rotate(360deg); } }
.ntg-karta .ntg-recznie {
  min-height: 44px; padding: 0; background: none; border: 0; color: var(--ntg-tekst2); font: 14px var(--ntg-tresc);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.ntg-limit { margin: 0; font-size: 13px; color: var(--ntg-szary2); }
.ntg-limit:empty { display: none; }
.ntg-demo { margin: 0; padding: 10px 14px; border-left: 2px solid var(--ntg-akcent); font-size: 13px; line-height: 1.6; color: var(--ntg-szary); background: #181a1e; }

.ntg-po-ai { margin: 14px 0 0 44px; }
.ntg-gotowe { margin: 0 0 12px; display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ntg-tekst); }
.ntg-gotowe-ok { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ntg-akcent); color: #fff; }
.ntg-gotowe-ok svg { width: 11px; height: 11px; }
.ntg-generuje .ntg-gotowe-ok { visibility: hidden; }
.ntg-propozycje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.ntg-pager { display: flex; align-items: center; border: 1px solid var(--ntg-linia2); }
.ntg-karta .ntg-pager button { width: 42px; height: 42px; border: 0; background: transparent; color: var(--ntg-tekst); font-size: 20px; line-height: 1; cursor: pointer; }
.ntg-karta .ntg-pager button[aria-disabled="true"] { opacity: .35; cursor: default; }
.ntg-pager-tekst { min-width: 122px; padding: 0 4px; text-align: center; font-size: 13px; font-weight: 500; }
.ntg-karta .ntg-inna {
  height: 44px; padding: 0 18px; border: 1px solid var(--ntg-tekst); background: transparent; color: var(--ntg-tekst); font: 600 13px var(--ntg-tresc);
  letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
}
.ntg-karta .ntg-inna:hover { background: rgba(244, 241, 235, .08); }
.ntg-karta .ntg-inna[aria-disabled="true"] { opacity: .55; cursor: not-allowed; background: transparent; }
.ntg-status { margin: 12px 0 0 44px; font-size: 14px; line-height: 1.5; color: var(--ntg-tekst); }
/* Pusty region na żywo zostaje w drzewie czytnika (Luxrio chowa p:empty, a region dodany razem z tekstem bywa
   pomijany), tylko bez wysokości. */
.ntg-karta p.ntg-status:empty,
.ntg-karta p.ntg-wymagania:empty { display: block; margin: 0; }
.ntg-status.ntg-blad { color: var(--ntg-blad); }

/* Krok 2: dedykacja, wielkość, mieszczenie */
.ntg-linie { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; }
.ntg-linie .ntg-linia-nr { font-size: 13px; color: var(--ntg-szary); margin: 0; }
.ntg-linia { position: relative; }
.ntg-karta .ntg-panel input.ntg-linia-pole {
  width: 100%; height: 48px; padding: 0 92px 0 14px; background: var(--ntg-pole); border: 1px solid var(--ntg-linia); border-radius: 2px;
  color: var(--ntg-tekst); font: 16px var(--ntg-tresc); outline: none;
}
.ntg-karta .ntg-panel input.ntg-linia-pole.ntg-za-dluga { border-color: var(--ntg-akcent); }
/* Podpowiedzi w polach szare także z fokusem (motyw: #4a4949, a z fokusem biały jak wpisany tekst). */
.ntg-karta .ntg-panel textarea::placeholder,
.ntg-karta .ntg-panel input::placeholder { color: var(--ntg-szary2); opacity: 1; }
.ntg-linia-stan { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--ntg-blad); pointer-events: none; }
.ntg-wielkosc { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-top: 4px; }
.ntg-wielkosc-etykieta { font-size: 14px; font-weight: 500; }
.ntg-stepper { display: flex; align-items: center; border: 1px solid var(--ntg-linia2); }
.ntg-karta .ntg-stepper button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ntg-tekst); font-size: 20px; cursor: pointer; }
.ntg-karta .ntg-stepper button:hover { background: rgba(244, 241, 235, .06); }
.ntg-karta .ntg-stepper button[aria-disabled="true"] { opacity: .35; cursor: default; background: transparent; }
.ntg-wartosc { min-width: 104px; text-align: center; font-size: 14px; font-weight: 500; line-height: 44px; border-left: 1px solid var(--ntg-linia2); border-right: 1px solid var(--ntg-linia2); }
.ntg-wielkosc.ntg-wyl .ntg-stepper { opacity: .5; }
.ntg-miesci {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; border: 1px solid var(--ntg-linia);
  font-size: 14px; line-height: 1.45;
}
.ntg-miesci.ntg-zle { background: rgba(255, 62, 1, .08); border-color: rgba(255, 62, 1, .55); }
.ntg-miesci-ikona { flex: none; display: flex; color: var(--ntg-tekst); }
.ntg-miesci-ikona:empty { display: none; }
.ntg-miesci-ikona svg { width: 16px; height: 16px; }
.ntg-zle .ntg-miesci-ikona { color: var(--ntg-blad); }
.ntg-zle .ntg-miesci-ikona svg { width: 18px; height: 18px; }
.ntg-miesci-tekst { flex: 1; min-width: 180px; }
.ntg-karta .ntg-dopasuj { height: 38px; padding: 0 14px; border: 1px solid var(--ntg-tekst); background: transparent; color: var(--ntg-tekst); font: 600 13px var(--ntg-tresc); cursor: pointer; }

/* Krok 3: symbol. Kafelki i kroje to grupy radio (strzałki, jeden przystanek Tab), pole wyboru przykryte kafelkiem. */
.ntg-ai-karta, .ntg-symbol, .ntg-kroj, .ntg-ramka { position: relative; margin: 0; cursor: pointer; }
.ntg-karta .ntg-panel .ntg-ai-karta input,
.ntg-karta .ntg-panel .ntg-symbol input,
.ntg-karta .ntg-panel .ntg-kroj input,
.ntg-karta .ntg-panel .ntg-ramka input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; display: block; visibility: visible;
}
.ntg-ai-wnetrze {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; background: var(--ntg-pole);
  border: 1px solid var(--ntg-linia); border-radius: 2px;
}
.ntg-ai-mini, .ntg-symbol-mini { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--ntg-tekst); }
.ntg-ai-mini svg { width: 78%; height: 78%; }
.ntg-ai-opis { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ntg-ai-tytul { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ntg-tekst); }
.ntg-ai-plakietka { padding: 3px 7px; border: 1px solid #6e7178; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #d9d6cf; }
.ntg-ai-grafika { font-size: 13px; line-height: 1.45; color: var(--ntg-szary); }
.ntg-kategorie-symboli, .ntg-ramki { display: flex; flex-wrap: wrap; gap: 8px; }
.ntg-karta .ntg-kategoria-symboli,
.ntg-ramka span {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--ntg-linia2); border-radius: 2px;
  background: transparent; color: var(--ntg-tekst2); font: 13px var(--ntg-tresc); cursor: pointer;
}
.ntg-karta .ntg-kategoria-symboli[aria-pressed="true"],
.ntg-ramka input:checked + span { background: var(--ntg-tekst); color: #1c1e22; border-color: var(--ntg-tekst); }
.ntg-symbole-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ntg-symbol-wnetrze {
  display: flex; flex-direction: column; gap: 7px; padding: 6px 6px 8px; background: var(--ntg-pole); border: 1px solid var(--ntg-linia);
  border-radius: 2px; text-align: center; height: 100%;
}
.ntg-symbol-mini svg { width: 74%; height: 74%; }
.ntg-symbol-nazwa { font-size: 12px; line-height: 1.3; color: #d9d6cf; text-wrap: balance; }
.ntg-symbol:hover .ntg-symbol-wnetrze { border-color: #6e7178; }
.ntg-ai-karta input:checked + .ntg-ai-wnetrze,
.ntg-symbol input:checked + .ntg-symbol-wnetrze,
.ntg-kroj input:checked + .ntg-kroj-wnetrze { border-color: var(--ntg-akcent); box-shadow: 0 0 0 1px var(--ntg-akcent); }

/* Krok 4: krój pisma, próbka z pierwszej linii klienta */
.ntg-kroje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ntg-kroj-wnetrze {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 16px 8px 12px; background: var(--ntg-pole);
  border: 1px solid var(--ntg-linia); border-radius: 2px;
}
.ntg-kroj-wzor { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ntg-tekst); }
.ntg-kroj-nazwa { font-size: 12px; font-weight: 500; color: var(--ntg-szary); }
.ntg-kroj-cormorant { font-family: "ntg-cormorant", var(--ntg-tytul); font-weight: 600; font-size: 28px; line-height: 1.15; }
.ntg-kroj-marcellus { font-family: "ntg-marcellus", serif; font-size: 22px; line-height: 1.45; }
.ntg-kroj-greatvibes { font-family: "ntg-greatvibes", cursive; font-size: 32px; line-height: 1; padding: 2px 0 3px; }

/* ---------------- Podsumowanie „Sprawdź i zamów” ---------------- */

.ntg-podsumowanie {
  margin: 6px 0 30px; padding: clamp(18px, 3vw, 26px); background: var(--ntg-pole); border: 1px solid var(--ntg-linia);
  font-family: var(--ntg-tresc); font-size: 15px; line-height: 1.55; color: var(--ntg-tekst);
}
.ntg-karta .ntg-pods-tytul { margin: 0; font-family: var(--ntg-tytul); font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--ntg-tekst); text-transform: none; }
.ntg-pods-etykieta { margin: 16px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ntg-szary); }
.ntg-pisownia {
  padding: 18px 16px; background: #1c1e22; border: 1px solid var(--ntg-linia); text-align: center; line-height: 1.3; color: var(--ntg-tekst);
  overflow-wrap: anywhere;
}
.ntg-pisownia.ntg-kroj-cormorant { font-size: 28px; }
.ntg-pisownia.ntg-kroj-marcellus { font-size: 21px; }
.ntg-pisownia.ntg-kroj-greatvibes { font-size: 34px; }
.ntg-pisownia-pusto { font: 14px var(--ntg-tresc); color: var(--ntg-szary); }
.ntg-pods-lista { margin: 14px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; font-size: 14px; }
.ntg-pods-lista dt { color: var(--ntg-szary); font-weight: 400; }
.ntg-pods-lista dd { margin: 0; }
.ntg-pods-brak { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ntg-szary); text-wrap: pretty; }
.ntg-pods-ilosc {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--ntg-linia);
}
.ntg-ilosc { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ntg-szary); }
/* Pole ilości Luxrio (.quantity > .quantity__field z polem i strzałkami); grawer.js układa strzałki jako „− 1 +”. */
.ntg-karta .ntg-ilosc .quantity { flex: none; width: auto; margin: 0; }
.ntg-karta .ntg-ilosc .quantity__field { display: flex; align-items: center; border: 1px solid var(--ntg-linia2); }
.ntg-karta .ntg-ilosc .quantity input.qty {
  width: 48px; min-width: 0; height: 44px; min-height: 0; padding: 0; border: 0; border-left: 1px solid var(--ntg-linia2);
  border-right: 1px solid var(--ntg-linia2); background: transparent; color: var(--ntg-tekst); font: 600 15px var(--ntg-tresc); text-align: center;
  -moz-appearance: textfield;
}
.ntg-ilosc .quantity input.qty::-webkit-outer-spin-button,
.ntg-ilosc .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ntg-karta .ntg-ilosc .quantity .qty-btn {
  width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ntg-tekst); font: 20px/1 var(--ntg-tresc);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ntg-karta .ntg-ilosc .quantity .qty-btn:hover { background: rgba(244, 241, 235, .06); color: var(--ntg-tekst); }
.ntg-ilosc .qty-btn i { display: none; }
.ntg-ilosc .quantity-plus::before { content: "+"; }
.ntg-ilosc .quantity-minus::before { content: "−"; }
.ntg-razem { display: flex; align-items: baseline; gap: 10px; }
.ntg-razem > span { font-size: 13px; color: var(--ntg-szary); }
.ntg-razem-kwota { font-size: 24px; font-weight: 600; }
.ntg-ilosc-uwaga { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ntg-szary); }
.ntg-karta .ntg-pods-przycisk .single_add_to_cart_button {
  width: 100%; min-height: 56px; margin: 16px 0 0; padding: 10px 16px; border: 0; background: var(--ntg-akcent); color: #fff;
  font: 600 14px var(--ntg-tresc); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.ntg-karta .ntg-pods-przycisk .single_add_to_cart_button:hover { background: var(--ntg-akcent2); }
/* Warstwy .vs-btn motywu (tło #23262c, przy najechaniu zakrywają przycisk) barwi pomarańczem tylko .actions, skąd
   przycisk przeszedł do podsumowania. */
.ntg-karta .ntg-pods-przycisk .single_add_to_cart_button::before,
.ntg-karta .ntg-pods-przycisk .single_add_to_cart_button::after { display: none; }
.ntg-karta .ntg-pods-przycisk .single_add_to_cart_button.ntg-zablokowany,
.ntg-karta .ntg-pods-przycisk .single_add_to_cart_button[disabled] { background: #353941; color: #a3a7ae; opacity: 1; cursor: not-allowed; }
.ntg-wymagania { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ntg-szary); }
.ntg-pods-notka { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ntg-szary); text-wrap: pretty; }
.ntg-pods-notka + .ntg-pods-notka { margin-top: 6px; }
.ntg-zaufanie {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ntg-linia); display: flex; flex-wrap: wrap;
  gap: 10px 22px; font-size: 13px; color: #d9d6cf;
}
.ntg-zaufanie li { display: flex; align-items: center; gap: 8px; margin: 0; }
.ntg-zaufanie svg { width: 20px; height: 20px; fill: none; stroke: var(--ntg-akcent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Pola wyboru: Luxrio chowa input[type=checkbox] (display: none), tu muszą być widoczne i dostępne z klawiatury. */
.ntg-zgody { margin: 16px 0 0; }
.ntg-zgoda { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #d1d0d0; cursor: pointer; }
.ntg-karta .ntg-zgoda input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; display: inline-block; visibility: visible; opacity: 1; flex: 0 0 20px; width: 20px; height: 20px;
  margin: 2px 0 0; padding: 0; border: 1px solid #7d7c7c; border-radius: 0; background: transparent; cursor: pointer; position: relative;
}
.ntg-karta .ntg-zgoda input[type="checkbox"]:checked { background: var(--ntg-akcent); border-color: var(--ntg-akcent); }
.ntg-karta .ntg-zgoda input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------------- Szczegóły i polecane ---------------- */

.ntg-szczegoly { margin: 80px 0 0; padding: 56px 0 0; border-top: 1px solid #2a2d33; font-family: var(--ntg-tresc); font-size: 15px; line-height: 1.55; color: #c9cbcf; }
.ntg-szczegoly-kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 56px; }
.ntg-karta .ntg-szczegoly h2 { margin: 0 0 12px; font-family: var(--ntg-tytul); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--ntg-tekst); text-transform: none; }
.ntg-szczegoly p { margin: 0 0 12px; text-wrap: pretty; }
/* Odnośniki w opisie (e-mail i telefon producenta, Regulamin) widać jako odnośniki, także na telefonie bez najechania.
   Z .ntg-karta, bo a:hover, a:focus { text-decoration: none } motywu ładuje się później i zdejmował podkreślenie. */
.ntg-karta .ntg-szczegoly a { color: var(--ntg-tekst); text-decoration: underline; text-decoration-color: rgba(244, 241, 235, .45); text-underline-offset: 3px; }
.ntg-karta .ntg-szczegoly a:hover { color: var(--ntg-akcent); text-decoration-color: currentColor; }
/* Film z oEmbed: Luxrio daje ramce szerokość 100%, a wysokość zostawała z atrybutu (396 × 563). Osadzenie wpisu
   WordPressa (wp-embedded-content) ustawia wysokość samo. */
.ntg-szczegoly iframe:not(.wp-embedded-content) { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
.ntg-szczegoly ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; counter-reset: ntg; }
.ntg-szczegoly ol li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; counter-increment: ntg; }
.ntg-szczegoly ol li::before {
  content: counter(ntg); width: 24px; height: 24px; border: 1px solid #6e7178; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--ntg-tekst);
}
.ntg-tabela { margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); font-size: 14px; }
.ntg-tabela dt { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ntg-linia); color: #a3a7ae; font-weight: 400; }
.ntg-tabela dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ntg-linia); color: var(--ntg-tekst2); }
.ntg-pytania { margin-top: 48px; border-top: 1px solid var(--ntg-linia); }
.ntg-pytania details { border-bottom: 1px solid var(--ntg-linia); }
.ntg-pytania summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer;
  font-family: var(--ntg-tytul); font-weight: 700; font-size: 21px; color: var(--ntg-tekst);
}
.ntg-pytania summary::-webkit-details-marker { display: none; }
.ntg-pytania summary span { font-family: var(--ntg-tresc); font-weight: 400; font-size: 22px; color: var(--ntg-akcent); transition: transform .2s; }
.ntg-pytania details[open] summary span { transform: rotate(45deg); }
.ntg-pytanie-tresc { max-width: 760px; padding: 0 0 20px; }
.ntg-pytanie-tresc > :last-child { margin-bottom: 0; }

.ntg-polecane { margin: 80px 0 0; font-family: var(--ntg-tresc); }   /* szerokość i odstępy z .container motywu (karta.php) */
.ntg-polecane-nad { margin: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ntg-akcent); }
.ntg-karta .ntg-polecane h2 { margin: 6px 0 28px; text-align: center; font-family: var(--ntg-tytul); font-weight: 700; font-size: 34px; line-height: 1.15; color: var(--ntg-tekst); }
.ntg-polecane ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 24px; }
/* Od 992 px cztery kolumny (ntg_polecane() daje najwyżej cztery): auto-fill robiło od 1300 px pięć z pustą z prawej,
   a przy 1024–1199 px trzy i osieroconą czwartą kartę. */
@media (min-width: 992px) { .ntg-polecane ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ntg-polecane li { margin: 0; }
.ntg-polecane a { display: flex; flex-direction: column; gap: 10px; color: var(--ntg-tekst); }
.ntg-polecane-zdjecie { display: block; aspect-ratio: 218 / 240; background: var(--ntg-pole); overflow: hidden; }
.ntg-polecane-zdjecie img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .4s; }
.ntg-polecane a:hover img { transform: scale(1.04); }
.ntg-polecane-nazwa { font-size: 15px; font-weight: 500; line-height: 1.35; }
.ntg-polecane-cena { font-weight: 600; color: var(--ntg-akcent); }
.ntg-polecane-cena .woocommerce-Price-amount { color: inherit; }

/* ---------------- Pasek na telefonie i komunikat po dodaniu ---------------- */

/* Pole z fokusem z klawiatury nie chowa się pod przyklejonym menu Luxrio (#navbars do 122 px, jak przewin() w grawer.js)
   ani pod paskiem na dole (65 px). Arkusz jest tylko na karcie z generatorem. */
html { scroll-padding-top: 138px; }
.ntg-pasek-dol {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px;
  padding: 10px clamp(16px, 4vw, 32px); background: var(--ntg-pole, #23262c); border-top: 1px solid #3a3e46; font-family: var(--body-font, "Poppins", sans-serif);
}
.ntg-pasek-dol button { height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font: 600 13px var(--body-font, "Poppins", sans-serif); }
.ntg-pasek-podglad { padding: 0 12px; border: 1px solid #3a3e46; background: transparent; color: #f4f1eb; font-weight: 400 !important; }
.ntg-pasek-podglad svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ntg-pasek-kwota { margin-left: auto; font-size: 17px; font-weight: 600; color: #f4f1eb; }
.ntg-pasek-zamow { padding: 0 18px; border: 0; background: #ff3e01; color: #fff; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 991px) {
  html { scroll-padding-bottom: 80px; }
  .ntg-karta .ntg-pasek-dol { display: flex; }
  .ntg-karta { padding-bottom: 72px; }
  .ntg-karta .xoo-wsc-basket { bottom: 84px !important; }
  .ntg-karta .scrollToTop { bottom: 160px !important; }
}

/* Przy dużym powiększeniu (mała wysokość widoku) komunikat od góry ekranu i z własnym przewijaniem: inaczej przyciski
   leżały pod dolną krawędzią, a elementu fixed nie da się przewinąć. */
.ntg-toast {
  position: fixed; top: 138px; right: clamp(12px, 3vw, 32px); z-index: 99999; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 150px);
  overflow-y: auto; padding: 18px;
  background: #23262c; border: 1px solid #3a3e46; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font-family: var(--body-font, "Poppins", sans-serif); color: #f4f1eb;
}
@media (max-height: 480px) { .ntg-toast { top: 8px; max-height: calc(100vh - 16px); } }
.ntg-toast[hidden] { display: none; }
.ntg-toast-gora { display: flex; align-items: flex-start; gap: 12px; }
.ntg-toast-ok { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff3e01; color: #fff; }
.ntg-toast-ok svg { width: 13px; height: 13px; }
.ntg-toast-tresc { flex: 1; min-width: 0; }
.ntg-toast-tresc p { margin: 0; }
.ntg-toast-tytul { font-family: var(--title-font, "Cormorant", serif); font-weight: 700; font-size: 21px; line-height: 1.2; color: #f4f1eb; }
.ntg-toast-ilosc { margin-top: 4px !important; font-size: 13px; line-height: 1.5; color: #b4b7bd; }
.ntg-toast-dedykacja { margin-top: 2px !important; font-size: 13px; line-height: 1.5; color: #e4e1da; overflow-wrap: anywhere; }
.ntg-toast-zamknij { flex: none; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; background: none; color: #b4b7bd; font-size: 20px; cursor: pointer; }
.ntg-toast-akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Odstęp 4 px: na komputerze napisy w jednym wierszu jak w projekcie (154 px w 157), na telefonie dwa wyśrodkowane wiersze
   w przycisku, który wtedy rośnie ponad 44 px. */
.ntg-toast-akcje > * {
  flex: 1; min-width: 140px; min-height: 44px; padding: 4px; display: grid; place-items: center; text-align: center;
  font: 600 12.5px/1.35 var(--body-font, "Poppins", sans-serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.ntg-toast-koszyk { background: #ff3e01; color: #fff !important; }
.ntg-toast-kolejna { border: 1px solid #f4f1eb; background: transparent; color: #f4f1eb; }

/* ---------------- Prezent ze zdjęciem (src/zdjecie.js): panel z suwakami w miejscu kroków ---------------- */

.ntg-panel .ntg-krok > .ntg-etykieta,
.ntg-panel .ntg-wynik .ntg-etykieta { display: block; margin: 0 0 6px; font-family: var(--ntg-tytul); font-size: 25px; font-weight: 700; line-height: 1.2; color: var(--ntg-tekst); }
.ntg-panel .ntg-wynik { margin-top: 10px; }
.ntg-grupa { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.ntg-karta .ntg-panel .vs-btn.ntg-foto-wybierz { height: 52px; padding: 0 26px; border: 0; background: var(--ntg-akcent); color: #fff; letter-spacing: .1em; }
.ntg-postep { position: relative; height: 2px; margin-top: 18px; overflow: hidden; background: var(--ntg-linia); }
.ntg-postep-pasek { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--ntg-akcent); animation: ntg-postep 1.6s ease-in-out infinite; }
@keyframes ntg-postep { to { left: 100%; } }
.ntg-panel .ntg-krok > .ntg-status { margin-left: 0; }
.ntg-czas { margin: 2px 0 0; font-size: 12px; color: var(--ntg-szary2); }
.ntg-czas:empty { display: none; }
.ntg-rozmiar { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.ntg-rozmiar .ntg-linia-nr { flex: 0 0 72px; font-size: 13px; color: var(--ntg-szary); }
.ntg-panel input.ntg-rozmiar-suwak { flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--ntg-akcent); cursor: pointer; }
.ntg-rozmiar-wartosc { flex: 0 0 auto; min-width: 82px; font-size: 13px; text-align: right; color: var(--ntg-szary); }
.ntg-panel .ntg-odstapienie { display: none; }   /* ta sama informacja stoi w podsumowaniu pod przyciskiem */
.ntg-foto-tlo { margin: 4px 0 0; }
.ntg-foto-laser { margin: 0 0 24px; }
.ntg-foto-laser img { display: block; width: 100%; max-width: 320px; height: auto; background: #fff; border: 1px solid var(--ntg-linia); }
.ntg-foto-laser.ntg-kolo img { border-radius: 50%; }
.ntg-foto-laser.ntg-negatyw img { filter: invert(1); }
.ntg-foto-laser figcaption { margin: 8px 0 0; }

/* Fokus z klawiatury: motyw wyłącza obramowania, więc wracają tutaj. */
.ntg-karta .ntg-panel textarea:focus,
.ntg-karta .ntg-panel input[type="text"]:focus { border-color: var(--ntg-akcent); }
.ntg-karta .ntg-panel textarea:focus-visible,
.ntg-karta .ntg-panel input[type="text"]:focus-visible,
.ntg-karta .ntg-panel button:focus-visible,
.ntg-karta .ntg-podglad button:focus-visible,
.ntg-karta .ntg-podsumowanie button:focus-visible,
.ntg-karta .ntg-podsumowanie input:focus-visible,
.ntg-pasek-dol button:focus-visible,
.ntg-toast :focus-visible,
.ntg-karta .ntg-pods-tytul:focus-visible,
.ntg-okruszki a:focus-visible,
.ntg-szczegoly a:focus-visible,
.ntg-pytania summary:focus-visible,
.ntg-polecane a:focus-visible,
.ntg-karta .ntg-panel input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ntg-ai-karta input:focus-visible + .ntg-ai-wnetrze,
.ntg-symbol input:focus-visible + .ntg-symbol-wnetrze,
.ntg-kroj input:focus-visible + .ntg-kroj-wnetrze,
.ntg-ramka input:focus-visible + span,
.ntg-karta .ntg-zgoda input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Scena po „Podgląd” z paska: obwódka do środka, bo .ntg-okno ucina wszystko poza sobą (overflow: hidden). */
.ntg-karta .ntg-scena:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

@media (max-width: 575px) {
  .ntg-krok-tresc { padding-left: 0; }
  .ntg-po-ai, .ntg-status { margin-left: 0; }
  .ntg-karta .ntg-krok-tytul { font-size: 23px; }
  .ntg-linie { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; }
  .ntg-kroj-cormorant { font-size: 22px; }
  .ntg-kroj-marcellus { font-size: 17px; }
  .ntg-kroj-greatvibes { font-size: 26px; }
  .ntg-wskazowka { display: none; }
  .ntg-karta .ntg-generuj { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ntg-skan { animation: none; top: 50%; }
  .ntg-laduje::before { animation-duration: 2.4s; }
  .ntg-postep-pasek { animation-duration: 4s; }
  .ntg-polecane a:hover img { transform: none; }
}

/* Tekst tylko dla czytników ekranu (np. „Projekt gotowy” w polu statusu, gdy to samo widać w wierszu z ✓). */
.ntg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }