/*
 * elspet.pl: wygląd według projektu Claude Design (29.09.2026), strona główna od motywu 0.4.0 według „Elspet Sklep v2”
 * z 18.10.2026 (dane strony: landing-v3/zbuduj.js). Sekcje strony to kontenery Elementora z klasami el-*; nowe sekcje
 * wyglądają tak samo, jeśli dostaną te same klasy (Elementor: Zaawansowane → Klasy CSS).
 * Projekt nie ma @media: od 1024 px układ 1:1 z projektem, węziej poprawki przy sekcjach, których dotyczą
 * (progi 524, 560, 600, 700, 768, 828, 976, 1004, 1016 px wynikają z siatek projektu).
 */

/* ---------- 1. Tokeny ---------- */
:root {
	--el-krem: #f5ede3;
	--el-krem-2: #ebe0d1;
	--el-atrament: #1c1714;
	--el-tekst-2: #4b423b;
	--el-tekst-3: #6b6058;
	--el-na-ciemnym: #e8dfd4;
	--el-na-ciemnym-2: #b3a898;
	--el-linia: #e6dccd;
	--el-linia-ciemna: #3a322c;
	--el-ramka-przerywana: #c9bba9;
	--el-ramka-chip: #cbbca8;
	--el-ramka-pole: #d3c6b4;
	--el-pomarancz: #e8472b;
	--el-pomarancz-ciemny: #b3341c; /* najechanie na pomarańczowe przyciski i linki (projekt v2) */
	--el-zolty: #f2b705;
	--el-zolty-ciemny: #e0a200;
	--el-fiolet: #8b6cf0;
	--el-mieta: #2bb39a;
	/* z projektu z 06.10.2026: różowa płyta i plakietka w „Dwa w jednym”, jasny tekst na czerwonym billboardzie */
	--el-roz: #f08fb0;
	--el-niebieski: #2f8fe0;
	--el-na-czerwonym: #ffe2d9;
	--el-tekst-4: #a3978a;
	--el-f-h1: 'Titan One', sans-serif;
	--el-f-display: 'Baloo 2', sans-serif;
	--el-f-tekst: 'Plus Jakarta Sans', sans-serif;
	--el-h1: clamp(46px, 6.2vw, 78px);
	--el-h2: clamp(34px, 4.4vw, 52px);
	--el-h3: clamp(30px, 3.6vw, 44px);
	--el-cien-naklejka: 0 8px 18px rgba(28, 23, 20, .18);
	--el-cien-karta: 0 10px 24px rgba(28, 23, 20, .18);
	--el-cien-karta-lekka: 0 10px 24px rgba(28, 23, 20, .10);
	--el-cien-podpis: 0 4px 10px rgba(28, 23, 20, .15);
	--el-max: 1180px;
	--el-bok: 24px;
}

/* ---------- 2. Podstawa ---------- */
/* Lepki nagłówek ma 65 px; sekcje dokładają scroll-margin-top jak w projekcie (64 / 72 / 80 px). */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.el-motyw {
	margin: 0;
	background: var(--el-krem);
	color: var(--el-atrament);
	font-family: var(--el-f-tekst);
	font-size: 16px;
	line-height: normal; /* jak w projekcie: odstęp wierszy tylko tam, gdzie projekt go podaje */
	-webkit-font-smoothing: antialiased;
}
body.el-motyw a { color: var(--el-pomarancz); }
body.el-motyw a:hover { color: var(--el-pomarancz-ciemny); }
body.el-motyw :focus-visible { outline: 2px solid var(--el-pomarancz); outline-offset: 2px; }
.el-main { overflow-x: clip; display: block; }
/* Safari poniżej 16 nie zna clip; hidden przycina tak samo (przyklejona karta konfiguratora i tak jest wyłączona poniżej 956 px). */
@supports not (overflow-x: clip) { .el-main { overflow-x: hidden; } }
.el-pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--el-atrament); color: #fff !important; padding: 10px 16px; border-radius: 999px; }
.el-pomin:focus { left: 16px; }
#miska, #galeria { scroll-margin-top: 8px; }
#oferta { scroll-margin-top: 16px; }

/* Elementor na stronach motywu: bez domyślnych odstępów i krojów zestawu, wygląd dają klasy el-*. */
body.el-motyw .elementor .e-con {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px;
	--flex-wrap: nowrap;
	--container-widget-width: auto; /* widżety w rzędach nie rozciągają się na całą szerokość */
}
body.el-motyw .elementor .elementor-widget:not(:last-child) { margin-block-end: 0; }
body.el-motyw .elementor .elementor-heading-title {
	font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
	text-transform: inherit; text-shadow: inherit; margin: 0; padding: 0;
}
body.el-motyw .elementor :is(p, h1, h2, h3, h4, figure, ul, ol) { margin: 0; }
body.el-motyw .elementor-widget-text-editor { font: inherit; color: inherit; }
body.el-motyw .elementor img { display: block; }

/* Elementor ogranicza widżety w kontenerach regułą .elementor.elementor .e-con > .elementor-widget { max-width: 100% };
   szerokości z projektu muszą mieć co najmniej taką wagę. */
body.el-motyw .elementor.elementor .e-con > .el-sekcja-opis { max-width: 300px; }
body.el-motyw .elementor.elementor .e-con > .el-sekcja-opis--szeroki { max-width: 340px; }
/* Elementor ma .elementor a { text-decoration: none }; linki w tekście są podkreślone jak w projekcie. */
body.el-motyw .elementor-widget-text-editor a { text-decoration: underline; }
body.el-motyw .elementor.elementor .e-con > .el-lead { max-width: 520px; }
body.el-motyw .elementor.elementor .e-con > .el-cta-dopisek { max-width: 230px; }
body.el-motyw .elementor.elementor .e-con > .el-naklejka-zolta { max-width: 190px; }
body.el-motyw .elementor.elementor .e-con > .el-fafik-podpis { max-width: min(344px, calc(24vw + 44px)); } /* projekt: 300 px treści + 2 × 22 px */
body.el-motyw .elementor.elementor .e-con > .el-kontra-h2 { max-width: 760px; }
body.el-motyw .elementor.elementor .e-con > .el-bb-opis { max-width: 480px; }
body.el-motyw .elementor.elementor .e-con > .el-bb-dymek { max-width: 278px; } /* projekt: 250 px treści + 2 × 14 px */
body.el-motyw .elementor.elementor .e-con > .el-kupon-opis { max-width: 400px; }
body.el-motyw .elementor.elementor .el-kafel--szeroki > .el-kafel-podpis { max-width: 260px; }

/* ---------- 3. Nagłówek i stopka (projekt v2: header, footer) ---------- */
.el-naglowek {
	position: sticky; top: 0; z-index: 50;
	background: rgba(245, 237, 227, .94);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--el-linia);
}
.admin-bar .el-naglowek { top: 32px; }
@media (max-width: 782px) { .admin-bar .el-naglowek { top: 46px; } }
@media (max-width: 600px) { .admin-bar .el-naglowek { top: 0; } }
.el-naglowek-w { max-width: var(--el-max); margin: 0 auto; padding: 12px var(--el-bok); box-sizing: border-box; display: flex; align-items: center; gap: 20px; }
body.el-motyw .el-logo { display: flex; flex: none; text-decoration: none; color: var(--el-atrament); }
.el-logo img { height: 30px; width: auto; display: block; }
/* Menu do prawej (projekt: nawigacja flex 1, linki 15 px 500, odstęp 22 px), pigułka „Koszyk” na końcu. */
.el-menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 22px; white-space: nowrap; font-size: 15px; font-weight: 500; }
body.el-motyw .el-menu-link { color: var(--el-atrament); text-decoration: none; }
body.el-motyw .el-menu-link:hover { color: var(--el-pomarancz); }
body.el-motyw .el-koszyk { flex: none; display: inline-flex; align-items: center; gap: 10px; background: var(--el-atrament); color: #fff; text-decoration: none; padding: 9px 10px 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 800; margin-left: -2px; /* projekt: 20 px od menu */ }
body.el-motyw .el-koszyk:hover { color: #fff; background: var(--el-linia-ciemna); }
.el-koszyk-licznik { background: var(--el-pomarancz); border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
/* Telefon i wąski tablet: menu w drugim rzędzie pod logo i koszykiem (projekt przewija menu w poziomie z ukrytym paskiem,
   więc „Cennik” znikał za krawędzią), linki zawijają się przy 320 px. */
@media (max-width: 719px) {
	.el-naglowek-w { flex-wrap: wrap; row-gap: 4px; position: relative; padding-bottom: 8px; }
	.el-menu { order: 2; flex: 1 0 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0 18px; font-size: 14px; white-space: normal; }
	.el-menu-link { display: inline-block; padding-block: 6px; } /* cel dotyku co najmniej 24 px */
	body.el-motyw .el-koszyk { position: absolute; right: var(--el-bok); top: 12px; }
	html { scroll-padding-top: 104px; }
}
/* Do 389 px mniejsze menu, żeby 4 linki zmieściły się w jednym wierszu (od 360 px); węziej dwa wiersze i większy odstęp kotwic. */
@media (max-width: 389px) { .el-menu { font-size: 13px; column-gap: 12px; } }
@media (max-width: 359px) { html { scroll-padding-top: 124px; } }

.el-stopka { border-top: 1px solid var(--el-linia); }
.el-stopka-w { max-width: var(--el-max); margin: 0 auto; padding: 28px var(--el-bok) 40px; box-sizing: border-box; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.el-stopka-marka { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.el-stopka-marka img { height: 26px; width: auto; display: block; align-self: flex-start; }
.el-stopka-opis { margin: 0; font-size: 12px; line-height: 1.6; color: var(--el-tekst-3); }
/* Logotypy płatności (warunek zgłoszenia sklepu w Przelewy24); P24 wyżej, bo plik ma w sobie margines. */
.el-stopka-platnosci { margin: 2px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--el-tekst-3); }
.el-stopka-marka .el-stopka-platnosci img { align-self: center; }
.el-stopka-marka .el-stopka-p24 { height: 28px; }
.el-stopka-marka .el-stopka-blik { height: 24px; }
.el-stopka-menu { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 12px; }
body.el-motyw .el-stopka-menu a { color: var(--el-atrament); }
/* Pasek „Nasi partnerzy” nad stopką strony głównej (od 0.4.3, jak na haisberg.com). Podpis zawsze nad logo, bo w 1132 px
   treści razem się nie mieszczą; logo w jednym rzędzie od ok. 1060 px okna, węziej zawijają się według szerokości napisów.
   Kreska przed pierwszym logo w rzędzie jest ucięta (-17 px = 16 px odstępu + 1 px kreski, .el-partnerzy-obciecie).
   Damian 20.10.2026: tło jak strona („bez białego tła, kolor jednolity”), kreski zostają, pas prosto (pochylenie z 0.4.6–0.4.7
   cofnięte w 0.4.8): górna kreska tutaj, dolna to ramka stopki. */
.el-partnerzy { border-top: 1px solid var(--el-linia); }
.el-partnerzy-w { max-width: var(--el-max); margin: 0 auto; padding: 6px var(--el-bok); box-sizing: border-box; }
.el-partnerzy-tytul { margin: 0; padding: 6px 0 2px; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--el-pomarancz-ciemny); }
/* Prawe 6 px zapasu: obrys fokusu ostatniej domeny w rzędzie (5 px poza napis) nie jest ucinany. */
.el-partnerzy-obciecie { overflow: hidden; padding-right: 6px; margin-right: -6px; }
.el-partnerzy-lista { list-style: none; margin: 0 0 0 -17px; padding: 0; width: calc(100% + 17px); display: flex; flex-wrap: wrap; gap: 8px 16px; }
.el-partnerzy-lista > li { margin: 0; min-width: 0; flex: 1 1 auto; }
.el-partner { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 0 2px 16px; border-left: 1px solid var(--el-ramka-chip); font-size: 15px; font-weight: 700; white-space: nowrap; }
.el-partner img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.el-partner img[src$="/znak-elspet.svg"] { padding: 3px; box-sizing: border-box; } /* znak bez marginesu: 26 px jak na haisberg.com */
body.el-motyw :is(a, span).el-partner { color: var(--el-atrament); text-decoration: none; }
body.el-motyw a.el-partner:hover, body.el-motyw a.el-partner:focus-visible { color: var(--el-pomarancz-ciemny); }
/* Lewy pas linku jest ucięty, więc obrys fokusu wokół domeny, nie całego linku. */
body.el-motyw a.el-partner:focus-visible { outline: 0; }
body.el-motyw a.el-partner:focus-visible .el-partner-domena { outline: 2px solid var(--el-pomarancz-ciemny); outline-offset: 3px; border-radius: 3px; }

/* ---------- 4. Wspólne klocki sekcji ---------- */
body.el-motyw .e-con.el-sekcja {
	/* projekt v2: kontener 1180 px razem z odstępem 24 px po bokach, czyli 1132 px treści */
	max-width: var(--el-max); margin: 0 auto; box-sizing: border-box;
	padding: 88px var(--el-bok); display: flex; flex-direction: column; gap: 32px;
}
body.el-motyw .e-con.el-pas { width: 100%; }
body.el-motyw .e-con.el-pas--bez { background: var(--el-krem-2); }
body.el-motyw .e-con.el-pas--odstep { margin-top: 88px; }
body.el-motyw .e-con.el-pas--bez > .el-sekcja { padding: 88px var(--el-bok); }
/* Głowa sekcji: nagłówek po lewej, opis po prawej, do dołu (projekt: flex-wrap, space-between, align-items flex-end). */
body.el-motyw .e-con.el-sekcja-glowa { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; }
body.el-motyw .e-con.el-sekcja-glowa > .e-con { width: auto; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
body.el-motyw .el-h2 {
	font-family: var(--el-f-display); font-weight: 800; font-size: var(--el-h2); line-height: 1;
	text-shadow: 2px 2px 0 rgba(28, 23, 20, .12); color: var(--el-atrament); text-wrap: balance;
}
body.el-motyw .el-h2--plaski { text-shadow: none; }
body.el-motyw .el-h3 {
	font-family: var(--el-f-display); font-weight: 800; font-size: var(--el-h3); line-height: 1;
	text-shadow: 2px 2px 0 rgba(28, 23, 20, .12); text-wrap: balance;
}
body.el-motyw .el-h3--male { font-size: clamp(26px, 3vw, 36px); line-height: 1.05; }
body.el-motyw .el-h3--ciemne { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.02; color: #fff; text-shadow: none; text-wrap: wrap; }
body.el-motyw :is(.el-h2, .el-h3) span, body.el-motyw .el-akcent { color: var(--el-pomarancz); }
body.el-motyw .el-sekcja-opis { margin: 0; font-size: 14px; line-height: 1.55; color: var(--el-tekst-3); max-width: 300px; }
body.el-motyw .el-sekcja-opis--szeroki { max-width: 340px; }
body.el-motyw .el-nadtytul { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--el-pomarancz); }
body.el-motyw .el-nadtytul--zolty { color: var(--el-zolty); }

/* Naklejki: przekrzywione pigułki nad nagłówkami (projekt: 13 px 800, 7 × 14 px, −2°). */
body.el-motyw .el-naklejka {
	display: inline-flex; align-items: center; gap: 8px; width: auto;
	font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 999px; transform: rotate(-2deg);
}
body.el-motyw .el-naklejka .elementor-heading-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.el-motyw .el-naklejka--ciemna { background: var(--el-atrament); color: #fff; }
body.el-motyw .el-naklejka--ciemna .elementor-heading-title::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--el-zolty); margin-right: 2px; }
body.el-motyw .el-naklejka--pomarancz { background: var(--el-pomarancz); color: #fff; }
body.el-motyw .el-naklejka--fiolet { background: var(--el-fiolet); color: #fff; }
body.el-motyw .el-naklejka--mieta { background: var(--el-mieta); color: #fff; padding: 6px 14px; }
body.el-motyw .el-naklejka--ramka { background: #fff; color: var(--el-atrament); border: 1.5px solid var(--el-atrament); padding: 6px 14px; }
body.el-motyw .el-naklejka--roz { background: var(--el-roz); color: var(--el-atrament); padding: 6px 14px; }
body.el-motyw .el-naklejka--biala { background: #fff; color: var(--el-atrament); transform: rotate(-3deg); }
/* „fotoapka.pl” w naklejkach tym samym krojem, „.pl” na pomarańczowo. */
body.el-motyw .el-fotoapka { font: inherit; font-weight: 800; white-space: nowrap; }
body.el-motyw .el-fotoapka span { color: var(--el-pomarancz); }

/* Etykiety na kartach modeli zawieszek. */
body.el-motyw .el-etykieta { font-size: 11px; font-weight: 800; color: #fff; padding: 4px 10px; border-radius: 999px; width: auto; }
body.el-motyw .el-etykieta--pomarancz { background: var(--el-pomarancz); }
body.el-motyw .el-etykieta--fiolet { background: var(--el-fiolet); }
body.el-motyw .el-etykieta--mieta { background: var(--el-mieta); }
body.el-motyw .el-etykieta--ciemna { background: var(--el-atrament); }
body.el-motyw .el-etykieta--zolta { background: var(--el-zolty-ciemny); }

/* Przyciski (widżet Przycisk z klasą el-cta): pomarańczowe 16 px, 15 × 26 px; el-cta--duze 17 px (hero), el-cta--ciemne na billboardzie. */
body.el-motyw .el-cta .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; background: var(--el-pomarancz); color: #fff; font-family: var(--el-f-tekst);
	font-weight: 800; font-size: 16px; line-height: normal; padding: 15px 26px; border-radius: 999px; border: 0; text-decoration: none; transition: none;
}
body.el-motyw .el-cta .elementor-button:hover { background: var(--el-pomarancz-ciemny); color: #fff; }
body.el-motyw .el-cta--duze .elementor-button { font-size: 17px; padding: 16px 28px; }
body.el-motyw .el-cta--ciemne .elementor-button { background: var(--el-atrament); box-shadow: 0 8px 18px rgba(28, 23, 20, .25); }
body.el-motyw .el-cta--ciemne .elementor-button:hover { background: var(--el-linia-ciemna); }
body.el-motyw .el-przycisk { display: inline-block; background: var(--el-pomarancz); color: #fff; font-weight: 800; padding: 14px 24px; border-radius: 999px; text-decoration: none; }

/* Pasek z ceną pod sekcją (04 Miska, 05 Zawieszka): biała karta, tytuł z ceną, link „Dalej: … ↓”, przycisk. */
body.el-motyw .e-con.el-pasek {
	margin-top: 28px; background: #fff; border-radius: 24px; padding: 18px 18px 18px 26px; box-shadow: var(--el-cien-karta-lekka);
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px;
}
body.el-motyw .e-con.el-pasek-tekst { flex: 1 1 260px; width: auto; display: flex; flex-direction: column; gap: 2px; }
body.el-motyw .el-pasek-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: 24px; line-height: 1.1; }
body.el-motyw .el-pasek-opis { font-size: 14px; color: var(--el-tekst-3); }
body.el-motyw .el-pasek-dalej { font-size: 15px; font-weight: 800; }
body.el-motyw .el-pasek-dalej a { color: var(--el-atrament); text-decoration: none; }
body.el-motyw .el-pasek-dalej a:hover { color: var(--el-pomarancz); }
/* Telefon: przycisk na całą szerokość pod tekstem. */
@media (max-width: 599px) {
	body.el-motyw .e-con.el-pasek { padding: 18px; }
	body.el-motyw .el-pasek > .el-cta { flex: 1 1 100%; }
	body.el-motyw .el-pasek > .el-cta .elementor-button { width: 100%; box-sizing: border-box; }
}

/* Lista z krzyżykami i ptaszkami (Kontra, karty 07): ✕ pomarańczowy, ✓ morski, odstęp 10 px. */
body.el-motyw :is(.el-minus, .el-plus) { display: flex; gap: 10px; }
body.el-motyw :is(.el-minus, .el-plus)::before { flex: none; font-weight: 800; }
body.el-motyw .el-minus::before { content: '\2715'; color: var(--el-pomarancz); }
body.el-motyw .el-plus::before { content: '\2713'; color: var(--el-mieta); }
/* Lista z numerami w ciemnych kołach (06 „Twoja impreza”). */
body.el-motyw .el-numery { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: el-nr; }
body.el-motyw .el-numery li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; counter-increment: el-nr; }
body.el-motyw .el-numery li::before {
	content: counter(el-nr); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--el-atrament); color: var(--el-zolty);
	font-size: 13px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center;
}
/* Linie z kropką (dostawa pod paskiem zestawu). */
body.el-motyw .el-kropka { position: relative; padding-left: 16px; }
body.el-motyw .el-kropka::before { content: ''; position: absolute; left: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--el-mieta); }
body.el-motyw .el-kropka--zolta::before { background: var(--el-zolty); }
body.el-motyw .el-kropka b { color: var(--el-atrament); }

/* Karta-link (R15): jeden link w karcie, rozciągnięty na całą kartę przez a::after; pozostałe pudełka w karcie bez position. */
body.el-motyw .el-link-karty { position: static; }
body.el-motyw .el-link-karty a { color: inherit; text-decoration: none; }
body.el-motyw .el-link-karty a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
body.el-motyw .el-link-karty a:focus-visible { outline: 0; }
body.el-motyw :is(.el-hero-karta, .el-oferta-karta):has(.el-link-karty a:focus-visible) { outline: 2px solid var(--el-atrament); outline-offset: 3px; }

/* Obroty z projektu (kafle i podpisy pupili w 05): klasa el-obrot--{m2|m1|m05|05|1|2}, m = w lewo. */
body.el-motyw .el-obrot--m2 { transform: rotate(-2deg); }
body.el-motyw .el-obrot--m1 { transform: rotate(-1deg); }
body.el-motyw .el-obrot--m05 { transform: rotate(-.5deg); }
body.el-motyw .el-obrot--05 { transform: rotate(.5deg); }
body.el-motyw .el-obrot--1 { transform: rotate(1deg); }
body.el-motyw .el-obrot--2 { transform: rotate(2deg); }

/* Dopisek „Wizualizacja” na mediach z AI (klasa el-ai na widżecie Obrazek albo Wideo; art. 50 AI Act, decyzja z 06.10.2026).
   Odstępstwo od projektu: nakładka w rogu, więc nie zmienia wysokości sekcji. Na filmach u góry, bo na dole są kontrolki. */
body.el-motyw .el-ai::after {
	content: 'Wizualizacja'; position: absolute; right: 12px; bottom: 12px; z-index: 1; pointer-events: none;
	font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--el-tekst-3);
	background: rgba(255, 255, 255, .85); padding: 3px 8px; border-radius: 999px;
}
/* Na filmie u góry pośrodku: na iPhonie i iPadzie prawy górny róg zajmuje przycisk dźwięku, a lewy pełny ekran i PiP. */
body.el-motyw .el-film.el-ai::after { top: 12px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }

/* ---------- 5. 01 Hero ---------- */
body.el-motyw .e-con.el-hero {
	padding: 56px var(--el-bok) 64px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center;
}
body.el-motyw .e-con.el-hero-tekst { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
body.el-motyw .el-h1 {
	font-family: var(--el-f-h1); font-weight: 400; font-size: var(--el-h1); line-height: 1; letter-spacing: -.005em;
	text-shadow: 3px 3px 0 var(--el-atrament); transform: rotate(-1deg);
}
body.el-motyw .el-h1 .el-h1-a { color: var(--el-pomarancz); }
body.el-motyw .el-h1 .el-h1-b { color: var(--el-zolty); }
body.el-motyw .el-lead { font-size: 18px; line-height: 1.55; color: var(--el-tekst-2); max-width: 520px; text-wrap: pretty; }
.el-kolory { display: flex; flex-direction: column; gap: 10px; }
.el-kolory-tytul { font-size: 14px; font-weight: 700; }
.el-kolory-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.el-kolory input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.el-kolory label {
	cursor: pointer; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px;
	border: 1.5px solid var(--el-ramka-chip); background: transparent; color: var(--el-atrament);
	display: flex; align-items: center; gap: 8px;
}
.el-kolory label i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(28, 23, 20, .2); }
.el-kolory input:checked + label { background: var(--el-pomarancz); border-color: var(--el-pomarancz); color: #fff; }
.el-kolory input:focus-visible + label { outline: 2px solid var(--el-atrament); outline-offset: 2px; }
body.el-motyw .e-con.el-hero-cta { display: flex; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 6px; width: auto; }
body.el-motyw .el-cta-dopisek { font-size: 13px; line-height: 1.45; color: var(--el-tekst-3); max-width: 230px; }
body.el-motyw .e-con.el-hero-foto { position: relative; padding: 24px 24px 44px 12px; }
/* Stos: dwie białe karty pod zdjęciem to ::before i ::after kontenera (Elementor rysuje w ::before nakładkę tła,
   więc wszystkie jej właściwości są nadpisane), zdjęcie miski w kolorze zaznaczonego radia #el-k-{kolor} (:has). */
body.el-motyw .e-con.el-hero-stos { position: relative; isolation: isolate; width: 100%; max-width: 520px; margin: 0 auto; }
body.el-motyw .e-con.el-hero-stos::before, body.el-motyw .e-con.el-hero-stos::after {
	content: ''; display: block; position: absolute; inset: 0; width: auto; height: auto; z-index: -1;
	background: #fff; border: 1.5px solid var(--el-linia); border-radius: 28px; box-shadow: var(--el-cien-karta-lekka);
	transform-origin: 50% 120%; opacity: 1; mix-blend-mode: normal; transition: none;
}
body.el-motyw .e-con.el-hero-stos::before { transform: rotate(12deg) translateX(8%); }
body.el-motyw .e-con.el-hero-stos::after { transform: rotate(5deg) translateX(3%); }
body.el-motyw .e-con.el-hero-zdjecie {
	position: relative; aspect-ratio: 1; background: #fff; border-radius: 28px; overflow: hidden;
	box-shadow: 0 14px 30px rgba(28, 23, 20, .18); transform: rotate(-1.5deg);
}
body.el-motyw .el-hero-miska { position: absolute; inset: 0; display: none; }
body.el-motyw .el-hero-miska img { width: 100%; height: 100%; object-fit: cover; }
body.el-motyw .el-hero:not(:has(#el-k-szara:checked, #el-k-biala:checked, #el-k-rozowa:checked)) .el-hero-miska--niebieska,
body.el-motyw .el-hero:has(#el-k-szara:checked) .el-hero-miska--szara,
body.el-motyw .el-hero:has(#el-k-biala:checked) .el-hero-miska--biala,
body.el-motyw .el-hero:has(#el-k-rozowa:checked) .el-hero-miska--rozowa { display: block; }
/* Edytor Elementora: cztery miski obok siebie, żeby każdą dało się kliknąć i podmienić. */
body.elementor-editor-active .e-con.el-hero-zdjecie { aspect-ratio: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transform: none; }
body.elementor-editor-active .el-hero-miska { position: static; display: block; }
body.el-motyw .el-naklejka-zolta {
	position: absolute; left: -6px; top: 6px; z-index: 2; background: var(--el-zolty); padding: 12px 16px; border-radius: 12px;
	font-weight: 800; font-size: 15px; line-height: 1.25; transform: rotate(-6deg); box-shadow: var(--el-cien-naklejka); max-width: 190px;
	box-sizing: content-box; /* projekt: 190 px treści plus odstępy, łamie się „Proszę / bardzo.” */
}
body.el-motyw .el-hero-kolo {
	position: absolute; right: -4px; top: -14px; z-index: 2; width: 96px; height: 96px; border-radius: 50%;
	background: var(--el-pomarancz); color: #fff; transform: rotate(10deg); box-shadow: 0 8px 18px rgba(28, 23, 20, .22);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--el-f-display); font-weight: 800; font-size: 30px; line-height: 1;
}
body.el-motyw .el-hero-kolo .elementor-heading-title { display: flex; flex-direction: column; align-items: center; }
body.el-motyw .el-hero-kolo span { font-family: var(--el-f-tekst); font-size: 12px; line-height: normal; }
body.el-motyw .e-con.el-hero-karta {
	position: absolute; right: -8px; bottom: -22px; z-index: 2; width: auto; background: #fff; border-radius: 16px; padding: 12px 16px 12px 12px;
	display: flex; flex-direction: row; align-items: center; gap: 12px; transform: rotate(3deg); box-shadow: var(--el-cien-karta); color: var(--el-atrament);
}
body.el-motyw .e-con.el-hero-karta:hover { transform: rotate(1deg) translateY(-2px); }
body.el-motyw .el-hero-karta-foto img { width: 88px; height: auto; mix-blend-mode: multiply; } /* od 0.4.9 większa (Damian 24.10.2026, było 56 px) */
body.el-motyw .e-con.el-hero-karta-tekst { position: static; width: auto; display: flex; flex-direction: column; gap: 2px; }
body.el-motyw .el-hero-karta-tytul { font-weight: 800; font-size: 14px; }
body.el-motyw .el-hero-karta-opis { font-size: 12px; color: var(--el-tekst-3); }
/* Jedna kolumna (poniżej 1016 px): karty pod spodem obrócone mniej, żeby róg nie wychodził za ekran (projekt: obcięte). */
@media (max-width: 1015px) {
	body.el-motyw .e-con.el-hero-stos::before { transform: rotate(7deg) translateX(3%); }
	body.el-motyw .e-con.el-hero-stos::after { transform: rotate(3deg) translateX(1%); }
}
/* Telefon: mniejsze koło z ceną i naklejka, żeby nie zasłaniały się nawzajem na zdjęciu ok. 300 px. */
@media (max-width: 599px) {
	body.el-motyw .el-hero-kolo { width: 78px; height: 78px; font-size: 24px; right: -2px; top: -12px; }
	body.el-motyw .el-hero-kolo span { font-size: 11px; }
	body.el-motyw .el-naklejka-zolta { font-size: 14px; padding: 10px 14px; }
	body.el-motyw .elementor.elementor .e-con > .el-naklejka-zolta { max-width: 150px; }
	body.el-motyw .el-hero-karta-foto img { width: 68px; } /* 88 px zasłaniało logo na misce */
}
@media (max-width: 359px) { body.el-motyw .elementor.elementor .e-con > .el-naklejka-zolta { max-width: 130px; } } /* 320 px: nie wchodzi pod koło */

/* ---------- 6. Taśma (stoi jak w projekcie) ---------- */
body.el-motyw .e-con.el-tasma { width: 100%; overflow: hidden; padding: 20px 0; }
.el-tasma-pas { background: var(--el-atrament); transform: rotate(-1.6deg); margin: 0 -20px; overflow: hidden; padding: 16px 0; }
.el-tasma-tor { display: flex; width: max-content; gap: 26px; padding-left: 20px; font-weight: 800; font-size: 18px; color: #fff; text-transform: uppercase; white-space: nowrap; }
.el-tasma-el { display: flex; gap: 26px; }
.el-tasma-gw { font-style: normal; color: var(--el-zolty); }
.el-tasma-gw--2 { color: var(--el-pomarancz); }
.el-tasma-gw--3 { color: var(--el-fiolet); }
.el-tasma-gw--4 { color: var(--el-mieta); }

/* ---------- 7. 02 Zwykła miska kontra ElsPet (#porownanie) ---------- */
body.el-motyw .e-con.el-pas--bez > .el-kontra { padding: 72px var(--el-bok) 80px; gap: 24px; }
body.el-motyw .e-con.el-kontra-glowa { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; margin-bottom: 8px; }
body.el-motyw .e-con.el-kontra-karta {
	border: 1.5px dashed var(--el-ramka-przerywana); border-radius: 24px; padding: 24px;
	display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px 48px; align-items: center;
}
body.el-motyw .e-con.el-kontra-lista { flex: 1 1 320px; width: auto; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
body.el-motyw .el-kontra-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: 22px; }
body.el-motyw .el-kontra-wiersze { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--el-tekst-2); }
body.el-motyw .e-con.el-fafik { position: relative; flex: 0 1 360px; width: auto; margin-left: auto; }
body.el-motyw .el-fafik-foto { background: #fff; border-radius: 18px; overflow: hidden; aspect-ratio: 1; transform: rotate(2deg); }
body.el-motyw .el-fafik-foto img { width: 100%; height: 100%; object-fit: cover; }
body.el-motyw .el-fafik-podpis {
	position: absolute; right: calc(100% - 28px); top: 14%; z-index: 2; width: max-content; max-width: min(344px, calc(24vw + 44px));
	background: var(--el-atrament); color: #fff; font-family: var(--el-f-display); font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; line-height: 1.25;
	padding: 14px 22px; border-radius: 16px; transform: rotate(-3deg); box-shadow: var(--el-cien-naklejka);
}
body.el-motyw .el-kontra-przestroga { flex: 1 1 100%; font-size: 13px; line-height: 1.55; color: var(--el-tekst-3); }
/* Poniżej 828 px zdjęcie spada pod listę, a podpis (w projekcie przy 390 px 64 px za lewą krawędzią) idzie na zdjęcie. */
@media (max-width: 827px) {
	body.el-motyw .e-con.el-fafik { flex: 1 1 100%; max-width: 360px; margin: 0 auto; }
	body.el-motyw .el-fafik-podpis { right: auto; top: auto; left: 12px; bottom: 12px; font-size: clamp(18px, 5vw, 22px); padding: 10px 16px; }
	body.el-motyw .elementor.elementor .e-con > .el-fafik-podpis { max-width: 80%; }
	body.el-motyw .el-fafik-foto.el-ai::after { top: 12px; bottom: auto; }
}
@media (max-width: 599px) { body.el-motyw .e-con.el-kontra-karta { padding: 20px; } }
/* Film z miską między kartą Fafika a kaflami cech (od 0.4.1, prośba Damiana z 19.10.2026): pełna szerokość, 16:9 jak plik. */
body.el-motyw .el-film { width: 100%; border-radius: 24px; overflow: hidden; background: var(--el-atrament); aspect-ratio: 16 / 9; }
body.el-motyw .el-film .e-hosted-video, body.el-motyw .el-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 4 kafle cech: 4 od 720 px (kafel od 156 px), węziej 2 × 2 (projekt: 3 + 1 przy 740–975 px, przy 390 px jeden pod drugim). */
body.el-motyw .e-con.el-cechy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 720px) { body.el-motyw .e-con.el-cechy { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.el-motyw .e-con.el-cecha { background: #fff; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
body.el-motyw .el-cecha-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
body.el-motyw .e-con.el-cecha-podpis { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
body.el-motyw .el-cecha-liczba { font-family: var(--el-f-display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--el-pomarancz); }
body.el-motyw .el-cecha-opis { font-size: 13px; color: var(--el-tekst-3); }
body.el-motyw .e-con.el-cecha--wysoka { position: relative; background: transparent; min-height: 260px; }
body.el-motyw .el-cecha--wysoka .el-cecha-foto { position: absolute; inset: 0; }
body.el-motyw .el-cecha--wysoka .el-cecha-foto img { height: 100%; aspect-ratio: auto; }
body.el-motyw .el-cecha-naklejka {
	position: absolute; left: 14px; top: 14px; z-index: 2; width: auto; background: var(--el-zolty); color: var(--el-atrament);
	font-size: 13px; font-weight: 800; padding: 7px 12px; border-radius: 999px; transform: rotate(-3deg);
}
@media (max-width: 719px) { body.el-motyw .e-con.el-cecha--wysoka { min-height: 200px; } }
@media (max-width: 599px) {
	body.el-motyw .e-con.el-cechy { gap: 12px; }
	body.el-motyw .e-con.el-cecha-podpis { padding: 10px 12px 14px; }
	body.el-motyw .el-cecha-liczba { font-size: 22px; }
}
/* Węższe kafle: naklejka „Teodor pije…” łamie się w dwa wiersze, więc zaokrąglony prostokąt zamiast pigułki. */
@media (max-width: 1023px) { body.el-motyw .el-cecha-naklejka { left: 10px; top: 10px; right: 10px; width: fit-content; font-size: 12px; line-height: 1.3; border-radius: 10px; } }

/* ---------- 7b. 03 Dwa w jednym (#dwa-w-jednym) ---------- */
body.el-motyw .e-con.el-dwa {
	padding: 88px var(--el-bok) 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center;
}
/* Lewa kolumna: różowa płyta (::before kontenera, nakładka tła Elementora nadpisana), zdjęcie z karmą i czarna naklejka. */
body.el-motyw .e-con.el-dwa-foto { position: relative; padding: 20px 10px 10px 0; }
body.el-motyw .e-con.el-dwa-foto::before {
	content: ''; display: block; position: absolute; left: 0; top: 44px; bottom: -6px; width: 82%; height: auto;
	background: var(--el-roz); border: 0; border-radius: 28px; transform: rotate(-3deg); opacity: 1; mix-blend-mode: normal; transition: none;
}
body.el-motyw .el-dwa-zdjecie { background: #fff; border-radius: 24px; overflow: hidden; transform: rotate(1deg); box-shadow: 0 10px 24px rgba(28, 23, 20, .14); }
body.el-motyw .el-dwa-zdjecie img { width: 100%; height: auto; }
body.el-motyw .el-dwa-naklejka {
	position: absolute; right: 0; top: 0; z-index: 2; width: auto; background: var(--el-atrament); color: #fff;
	font-size: 13px; font-weight: 800; padding: 9px 14px; border-radius: 12px; transform: rotate(4deg); box-shadow: var(--el-cien-naklejka);
}
body.el-motyw .e-con.el-dwa-tekst { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
body.el-motyw .el-dwa-opis { font-size: 16px; line-height: 1.6; color: var(--el-tekst-2); text-wrap: pretty; }
/* Kroki: 3 w rzędzie od 560 px, węziej jeden pod drugim (projekt przy 390 px: 2 + 1). */
body.el-motyw .e-con.el-dwa-kroki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; }
@media (min-width: 560px) { body.el-motyw .e-con.el-dwa-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.el-motyw .e-con.el-dwa-krok { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
body.el-motyw .el-dwa-krok-nr { font-family: var(--el-f-display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--el-pomarancz); }
body.el-motyw .el-dwa-krok-tytul { font-weight: 800; font-size: 14px; }
body.el-motyw .el-dwa-krok-tekst { font-size: 12px; line-height: 1.45; color: var(--el-tekst-3); }
body.el-motyw .el-dwa-dopisek { font-size: 13px; color: var(--el-tekst-3); }

/* ---------- 8. 04 Miska (#miska): 4 kroki i pasek z ceną ---------- */
body.el-motyw .e-con.el-jak { padding: 88px var(--el-bok) 24px; gap: 0; }
body.el-motyw .el-jak .e-con.el-sekcja-glowa { gap: 12px 40px; margin-bottom: 28px; }
/* Kroki: 4 od 1016 px, 2 × 2 od 524 px, węziej jeden pod drugim (projekt: 3 + 1 przy 770–1015 px). */
body.el-motyw .e-con.el-kroki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 524px) { body.el-motyw .e-con.el-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1016px) { body.el-motyw .e-con.el-kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.el-motyw .e-con.el-krok { border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; color: #fff; }
body.el-motyw .e-con.el-krok:nth-child(4n+1) { background: var(--el-pomarancz); transform: rotate(-1deg); }
body.el-motyw .e-con.el-krok:nth-child(4n+2) { background: var(--el-zolty); color: var(--el-atrament); transform: rotate(.8deg); }
body.el-motyw .e-con.el-krok:nth-child(4n+3) { background: var(--el-fiolet); transform: rotate(-.5deg); }
body.el-motyw .e-con.el-krok:nth-child(4n) { background: var(--el-atrament); transform: rotate(1deg); }
body.el-motyw .e-con.el-krok:nth-child(4n) .el-krok-nr { color: var(--el-zolty); }
body.el-motyw .e-con.el-krok:nth-child(4n) .el-krok-tekst { color: var(--el-na-ciemnym); }
body.el-motyw .el-krok-nr { font-family: var(--el-f-display); font-weight: 800; font-size: 32px; line-height: 1; }
body.el-motyw .el-krok-tytul { font-weight: 800; font-size: 17px; }
body.el-motyw .el-krok-tekst { font-size: 14px; line-height: 1.5; }

/* ---------- 9. 05 Zawieszka (#zawieszka): kroki kodu QR, kształty zawieszek, zdjęcia pupili, pasek z ceną ---------- */
body.el-motyw .e-con.el-pas--bez > .el-zawieszka { padding: 88px var(--el-bok); gap: 0; }
body.el-motyw .el-zawieszka > .e-con.el-sekcja-glowa { margin-bottom: 32px; }
body.el-motyw .el-zawieszka > .el-sekcja-glowa > .e-con { max-width: 720px; }
body.el-motyw .el-zawieszka > .el-sekcja-glowa > .el-sekcja-opis { color: var(--el-tekst-2); }
/* Kroki kodu QR: 3 w rzędzie od 600 px, węziej jeden pod drugim (projekt: 2 + 1 przy 548–807 px). */
body.el-motyw .e-con.el-qr-kroki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 600px) { body.el-motyw .e-con.el-qr-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.el-motyw .e-con.el-qr-krok { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
body.el-motyw .el-qr-nr {
	flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--el-atrament); color: var(--el-zolty);
	font-family: var(--el-f-display); font-weight: 800; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
body.el-motyw .e-con.el-qr-tekst { flex: 1 1 auto; width: auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.el-motyw .el-qr-tytul { font-weight: 800; font-size: 16px; }
body.el-motyw .el-qr-opis { font-size: 14px; line-height: 1.5; color: var(--el-tekst-2); }
/* Rzędy pod krokami: głowa (H3 i dopisek po prawej), pod nią siatka. */
body.el-motyw .e-con:is(.el-zawieszki-rzad, .el-pupile-rzad) { margin-top: 64px; display: flex; flex-direction: column; gap: 0; }
body.el-motyw .e-con.el-pupile-rzad + .el-pupile-rzad { margin-top: 56px; }
body.el-motyw .e-con.el-pupile-glowa { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 40px; margin-bottom: 22px; }
body.el-motyw .el-pupile-uwaga { font-size: 13px; color: var(--el-tekst-3); }
/* Kształty zawieszek (O11, nasze modele): 6 od 1004 px jak zdjęcia pupili, potem 3 + 3, na telefonie 2 + 2 + 2; białe kwadraty jak kafle pupili. */
body.el-motyw .e-con.el-zawieszki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 600px) { body.el-motyw .e-con.el-zawieszki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1004px) { body.el-motyw .e-con.el-zawieszki { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
body.el-motyw .e-con.el-zaw-karta {
	position: relative; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 42px 16px 16px; box-sizing: border-box;
	display: flex; flex-direction: column; align-items: stretch; container-type: inline-size;
}
body.el-motyw .el-zaw-karta .el-etykieta { position: absolute; left: 12px; top: 12px; transform: rotate(-4deg); z-index: 1; }
/* Ukryta; wtyczka pokazuje ją przy modelach spoza sprzedaży (przelaczniki.php, <style id="elspet-wkrotce">). */
body.el-motyw .el-zaw-karta .el-wkrotce { display: none; position: absolute; right: 12px; top: 12px; z-index: 1; width: auto; background: var(--el-krem-2); color: var(--el-tekst-3); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; transform: rotate(4deg); }
/* „Wkrótce” pod etykietą, gdy karta ma do ok. 215 px (inaczej najeżdża na nazwę). */
@container (max-width: 215px) { body.el-motyw .el-zaw-karta .el-wkrotce { top: auto; bottom: 10px; } }
body.el-motyw .el-zaw-foto { flex: 1 1 0; min-height: 0; }
body.el-motyw .el-zaw-foto img { width: 100%; height: 100%; object-fit: contain; }
/* Zdjęcia pupili (AI, „Zdjęcia poglądowe.”): 5 w rzędzie od 1004 px, węziej pas przewijany w bok
   (projekt: 4 + 1, 3 + 2, 2 + 2 + 1; przy 390 px 10 kwadratów jeden pod drugim). */
body.el-motyw .e-con.el-pupile-siatka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
body.el-motyw .e-con.el-pupil { position: relative; aspect-ratio: 1; background: #fff; border-radius: 18px; overflow: hidden; }
body.el-motyw .el-pupil-foto { position: absolute; inset: 0; }
body.el-motyw .el-pupil-foto img { width: 100%; height: 100%; object-fit: cover; }
body.el-motyw .el-pupil .el-ai::after { top: 10px; bottom: auto; right: 10px; } /* podpis zajmuje dół */
body.el-motyw .el-pupil-podpis {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; width: fit-content;
	font-size: 12px; font-weight: 800; line-height: 1.3; padding: 6px 10px; border-radius: 10px; color: #fff; pointer-events: none;
}
body.el-motyw .el-podpis--zolty { background: var(--el-zolty); color: var(--el-atrament); }
body.el-motyw .el-podpis--pomarancz { background: var(--el-pomarancz); }
body.el-motyw .el-podpis--fiolet { background: var(--el-fiolet); }
body.el-motyw .el-podpis--ciemny { background: var(--el-atrament); }
body.el-motyw .el-podpis--mieta { background: var(--el-mieta); }
@media (max-width: 1003px) {
	body.el-motyw .e-con.el-pupile-siatka {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(42%, 220px);
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--el-bok); overscroll-behavior-x: contain;
		/* pas od krawędzi do krawędzi ekranu (Elementor daje kontenerom width: 100%, więc szerokość wprost) */
		width: calc(100% + 2 * var(--el-bok)); margin: -6px calc(-1 * var(--el-bok)) -10px; padding: 6px var(--el-bok) 10px; scrollbar-width: thin;
	}
	body.el-motyw .e-con.el-pupil { scroll-snap-align: start; }
}
/* Telefon: większe kafle (widać kawałek następnego), mniejszy podpis i dopisek, żeby nie zasłaniały pupila i zawieszki. */
@media (max-width: 599px) {
	body.el-motyw .e-con.el-pupile-siatka { grid-auto-columns: min(72%, 260px); }
	body.el-motyw .el-pupil-podpis { left: 8px; right: 8px; bottom: 8px; font-size: 11px; padding: 4px 8px; }
	body.el-motyw .el-pupil .el-ai::after { top: 8px; right: 8px; padding: 2px 6px; }
}

/* ---------- 10. 06 Galeria na imprezę (#galeria): billboard, „Twoja impreza”, wielkości galerii ---------- */
body.el-motyw .e-con.el-impreza { padding: 88px var(--el-bok) 24px; gap: 72px; }
body.el-motyw .e-con.el-billboard {
	position: relative; background: var(--el-pomarancz); color: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 56px); box-shadow: var(--el-cien-karta);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px; align-items: center;
}
body.el-motyw .e-con.el-billboard-tekst { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
body.el-motyw .el-bb-h2 { font-family: var(--el-f-display); font-weight: 800; font-size: clamp(36px, 4.8vw, 60px); line-height: .98; text-shadow: 3px 3px 0 rgba(28, 23, 20, .25); text-wrap: balance; color: #fff; }
body.el-motyw .el-bb-opis { font-size: 16px; line-height: 1.6; max-width: 480px; color: var(--el-na-czerwonym); text-wrap: pretty; }
body.el-motyw .e-con.el-bb-chipy { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
body.el-motyw .el-bb-chip { background: rgba(28, 23, 20, .22); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
body.el-motyw .e-con.el-bb-cta { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 4px; width: auto; }
body.el-motyw .el-bb-od { font-family: var(--el-f-display); font-weight: 800; font-size: 28px; line-height: 1.15; color: var(--el-zolty); }
body.el-motyw .el-bb-od .elementor-heading-title { display: flex; flex-direction: column; }
body.el-motyw .el-bb-od span { font-family: var(--el-f-tekst); font-size: 13px; font-weight: 700; color: var(--el-na-czerwonym); }
/* Prawa kolumna: biała karta zestawu (−3°) z kompozycją miska + zawieszka + karta kuponu, koło z ceną i dymek. */
body.el-motyw .e-con.el-billboard-foto { position: relative; padding: 28px 10px 48px; }
body.el-motyw .e-con.el-bb-zestaw {
	width: 100%; max-width: 436px; /* projekt: 400 px treści + 2 × 18 px */ margin: 0 auto; background: #fff; color: var(--el-atrament);
	border-radius: 24px; padding: 18px; transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(28, 23, 20, .25);
	display: flex; flex-direction: column; gap: 14px;
}
body.el-motyw .e-con.el-bb-kompozycja { position: relative; background: #fff; border-radius: 16px; aspect-ratio: 16 / 11; overflow: hidden; }
body.el-motyw :is(.el-bb-miska, .el-bb-zawieszka, .el-bb-kupon) { position: absolute; }
body.el-motyw :is(.el-bb-miska, .el-bb-zawieszka, .el-bb-kupon) img { width: 100%; height: auto; }
body.el-motyw .el-bb-miska { left: 0; top: 10%; width: 58%; }
/* Obrót i mnożenie na samym <img>: na opakowaniu widżetu (kontekst nakładania) wokół zdjęcia byłby biały prostokąt. */
body.el-motyw .el-bb-zawieszka { right: 13%; top: 7%; width: 23%; }
body.el-motyw .el-bb-zawieszka img { mix-blend-mode: multiply; transform: rotate(12deg); }
body.el-motyw .el-bb-kupon { right: 1%; bottom: 5%; width: 47%; }
body.el-motyw .el-bb-kupon img { mix-blend-mode: multiply; transform: rotate(5deg); }
body.el-motyw .el-bb-znak {
	position: absolute; left: 8px; top: 8px; z-index: 1; width: auto; background: var(--el-atrament); color: #fff;
	border: 1.5px dashed var(--el-zolty); border-radius: 10px; padding: 6px 10px; transform: rotate(-4deg);
	font-size: 15px; font-weight: 800; line-height: 1.15;
}
body.el-motyw .el-bb-znak .elementor-heading-title { display: flex; flex-direction: column; }
body.el-motyw .el-bb-znak small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--el-zolty); }
body.el-motyw .el-bb-zestaw-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: 18px; line-height: 1; }
body.el-motyw .el-bb-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: el-bb; }
body.el-motyw .el-bb-lista li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; counter-increment: el-bb; }
body.el-motyw .el-bb-lista li::before {
	content: counter(el-bb); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--el-pomarancz); color: #fff;
	font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
body.el-motyw .el-bb-lista li:nth-child(2)::before { background: var(--el-zolty); color: var(--el-atrament); }
body.el-motyw .el-bb-lista li:nth-child(3)::before { background: var(--el-mieta); }
body.el-motyw .el-bb-kolo {
	position: absolute; right: 0; top: 0; z-index: 2; width: 110px; height: 110px; border-radius: 50%; background: var(--el-zolty); color: var(--el-atrament);
	display: flex; align-items: center; justify-content: center; transform: rotate(10deg); box-shadow: 0 8px 18px rgba(28, 23, 20, .25);
	font-family: var(--el-f-display); font-weight: 800; font-size: 30px; line-height: 1;
}
body.el-motyw .el-bb-kolo .elementor-heading-title { display: flex; flex-direction: column; align-items: center; }
body.el-motyw .el-bb-kolo span { font-family: var(--el-f-tekst); font-size: 12px; line-height: normal; }
body.el-motyw .el-bb-dymek {
	position: absolute; right: 0; bottom: 6px; z-index: 2; max-width: 278px; background: var(--el-atrament); color: #fff;
	font-size: 13px; font-weight: 800; line-height: 1.3; padding: 10px 14px; border-radius: 12px; transform: rotate(3deg); box-shadow: 0 8px 18px rgba(28, 23, 20, .25);
}
/* Na czerwonej karcie pomarańczowa obwódka fokusu znika. */
body.el-motyw .el-billboard :focus-visible { outline-color: #fff; }
/* Telefon: dymek pod kartą zestawu (w projekcie przy wąskiej karcie zasłania punkt 3 listy), mniejsze koło z ceną. */
@media (max-width: 699px) {
	body.el-motyw .e-con.el-billboard-foto { display: flex; flex-direction: column; padding: 24px 6px 6px; }
	body.el-motyw .el-bb-dymek { position: relative; right: auto; bottom: auto; align-self: flex-end; margin-top: -10px; transform: rotate(2deg); }
}
@media (max-width: 599px) {
	body.el-motyw .el-bb-kolo { width: 88px; height: 88px; font-size: 24px; right: -6px; top: -6px; }
	body.el-motyw .el-bb-kolo span { font-size: 11px; }
}
@media (max-width: 359px) { body.el-motyw .el-bb-kolo { width: 76px; height: 76px; font-size: 21px; top: -18px; } } /* 320 px: koło nie zasłania naklejki kuponu */
/* „Twoja impreza”: tekst z krokami i przyciskiem, obok mozaika 3 zdjęć. */
body.el-motyw .e-con.el-impreza-org { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
body.el-motyw .e-con.el-impreza-tekst { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
body.el-motyw .el-impreza-opis { font-size: 16px; line-height: 1.6; color: var(--el-tekst-2); text-wrap: pretty; }
body.el-motyw .el-impreza-kroki { width: 100%; }
body.el-motyw .el-impreza-tekst > .el-cta { margin-top: 4px; }
body.el-motyw .e-con.el-mozaika { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.el-motyw .e-con.el-kafel { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3; }
body.el-motyw .e-con.el-kafel--szeroki { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 22px; transform: rotate(-1deg); }
body.el-motyw .e-con.el-kafel--tort { transform: rotate(1deg); }
body.el-motyw .e-con.el-kafel--kot { transform: rotate(-1deg); }
body.el-motyw .el-kafel-foto { position: absolute; inset: 0; }
body.el-motyw .el-kafel-foto img { width: 100%; height: 100%; object-fit: cover; }
body.el-motyw .el-kafel-podpis {
	position: absolute; left: 10px; bottom: 10px; z-index: 1; width: auto; max-width: calc(100% - 20px);
	font-size: 12px; font-weight: 800; line-height: 1.3; padding: 6px 10px; border-radius: 10px;
}
body.el-motyw .el-kafel--szeroki .el-kafel-podpis { left: 12px; bottom: 12px; background: var(--el-atrament); color: #fff; padding: 7px 12px; transform: rotate(-2deg); }
body.el-motyw .el-kafel--tort .el-kafel-podpis { background: var(--el-zolty); transform: rotate(-2deg); }
body.el-motyw .el-kafel--kot .el-kafel-podpis { background: var(--el-pomarancz); color: #fff; transform: rotate(2deg); }
/* Ciemna karta „Wybierz wielkość galerii”: karty el-galeria--{id} (wtyczka chowa galerię z pustą pulą kodów),
   cena z miską lub zawieszką i przekreślona cena tej galerii na fotoapka.pl (plakietka el-galeria-osobno „na fotoapka.pl 29 zł”;
   nazwa klasy została z czasów, gdy sklep sprzedawał samą galerię — do 25.10.2026). */
body.el-motyw .e-con.el-kupon { background: var(--el-atrament); color: var(--el-na-ciemnym); border-radius: 28px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 24px; }
body.el-motyw .e-con.el-kupon-gora { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 40px; }
body.el-motyw .e-con.el-kupon-tytul { width: auto; display: flex; flex-direction: column; gap: 10px; }
body.el-motyw .el-kupon-opis { max-width: 400px; font-size: 14px; line-height: 1.55; color: var(--el-na-ciemnym-2); }
/* Karty: 3 obok siebie od 700 px (projekt: 2 + 1 przy 700–869 px), węziej jedna pod drugą. */
body.el-motyw .e-con.el-galerie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { body.el-motyw .e-con.el-galerie { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
body.el-motyw .e-con.el-galeria { position: relative; background: #fff; color: var(--el-atrament); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
body.el-motyw .e-con.el-galeria:first-child { background: var(--el-zolty); }
/* Przykładowy voucher obok karty z ceną (od 0.4.14, jedna galeria): zdjęcie karty Kameralnie lekko przechylone, jak kupon na billboardzie. */
body.el-motyw .el-galeria-voucher { align-self: center; justify-self: center; width: min(100%, 420px); padding: 12px 0; }
body.el-motyw .el-galeria-voucher img { display: block; width: 100%; height: auto; border-radius: 16px; transform: rotate(-3deg); box-shadow: 0 16px 32px rgba(0, 0, 0, .35); }
@media (min-width: 700px) { body.el-motyw .e-con.el-galerie:has(.el-galeria-voucher) { align-items: center; } }
body.el-motyw .el-galeria-osobno {
	position: absolute; right: 14px; top: -10px; width: auto; background: var(--el-zolty); color: var(--el-atrament); border: 2px solid var(--el-atrament);
	font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; transform: rotate(4deg);
}
body.el-motyw .el-galeria-nazwa { font-weight: 800; font-size: 18px; }
body.el-motyw .el-galeria-nazwa small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--el-tekst-2); }
body.el-motyw .el-galeria-cena { display: flex; align-items: baseline; gap: 8px; }
body.el-motyw .el-galeria-cena b { font-family: var(--el-f-display); font-weight: 800; font-size: 42px; line-height: 1; }
body.el-motyw .el-galeria-cena s { font-size: 15px; color: var(--el-tekst-2); }
body.el-motyw .el-galeria-spec { padding-top: 10px; border-top: 1px solid rgba(28, 23, 20, .12); font-size: 13px; color: var(--el-tekst-2); }
body.el-motyw .el-kupon-przypis { font-size: 12px; line-height: 1.55; color: var(--el-na-ciemnym-2); }
body.el-motyw .el-kupon-przypis a { color: var(--el-zolty); }
/* Prezent niedostępny (klasa body z functions.php): bez sekcji 06, karty 3 w 07, zdań o galerii, pozycji taśmy, pytań FAQ i linku w menu. */
body.el-bez-prezentu :is(.el-billboard, .el-tylko-prezent), body.el-bez-prezentu .el-menu-link[href$="#galeria"] { display: none !important; }

/* ---------- 11. 07 Kup w zestawie (#oferta): 3 karty-linki, pasek zestawu, dostawa ---------- */
body.el-motyw .e-con.el-oferta { padding: 64px var(--el-bok) 24px; gap: 0; }
body.el-motyw .el-oferta > .e-con.el-sekcja-glowa { margin-bottom: 32px; }
/* Karty: tyle kolumn, ile widocznych kart, od 768 px (bez Prezentu 2), węziej jedna pod drugą ze zdjęciem 16 : 10. */
body.el-motyw .e-con.el-oferta-karty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) {
	body.el-motyw .e-con.el-oferta-karty { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	/* Bez Prezentu dwie karty o szerokości kart z projektu, na środku (inaczej kwadratowe zdjęcia po 556 px). */
	body.el-bez-prezentu .e-con.el-oferta-karty { grid-auto-columns: minmax(0, 364px); justify-content: center; }
}
body.el-motyw .e-con.el-oferta-karta {
	position: relative; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--el-cien-karta-lekka); color: var(--el-atrament);
	display: flex; flex-direction: column;
}
body.el-motyw .e-con.el-oferta-karta--1 { transform: rotate(-.6deg); }
body.el-motyw .e-con.el-oferta-karta--2 { transform: rotate(.5deg); }
body.el-motyw .e-con.el-oferta-karta--3 { transform: rotate(-.4deg); }
body.el-motyw .e-con.el-oferta-karta:hover { transform: translateY(-4px); }
body.el-motyw .e-con.el-oferta-foto { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; }
body.el-motyw .el-oferta-zdjecie { position: absolute; inset: 0; }
body.el-motyw .el-oferta-zdjecie img { width: 100%; height: 100%; object-fit: cover; }
body.el-motyw .el-oferta-karta--2 .el-oferta-zdjecie { inset: auto; left: 50%; top: 52%; width: 36%; transform: translate(-50%, -50%); }
body.el-motyw .el-oferta-karta--2 .el-oferta-zdjecie img { height: auto; mix-blend-mode: multiply; }
body.el-motyw .el-oferta-karta--3 .el-oferta-zdjecie img { object-fit: contain; }
body.el-motyw .el-oferta-nr {
	position: absolute; left: 16px; top: 16px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: var(--el-pomarancz); color: #fff;
	font-family: var(--el-f-display); font-weight: 800; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
body.el-motyw .el-oferta-karta--2 .el-oferta-nr { background: var(--el-fiolet); }
body.el-motyw .el-oferta-karta--3 .el-oferta-nr { background: var(--el-mieta); }
body.el-motyw .el-oferta-cena {
	position: absolute; right: 16px; bottom: 14px; z-index: 1; width: auto; background: var(--el-zolty); color: var(--el-atrament);
	font-size: 16px; font-weight: 800; padding: 7px 14px; border-radius: 999px; transform: rotate(-3deg); box-shadow: var(--el-cien-podpis);
}
body.el-motyw .e-con.el-oferta-tresc { position: static; flex: 1 1 auto; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
body.el-motyw .el-oferta-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: 26px; line-height: 1.05; }
body.el-motyw .el-oferta-lista { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; }
body.el-motyw .el-oferta-lista .el-minus { color: var(--el-tekst-3); }
body.el-motyw .el-oferta-lista .el-plus { font-weight: 600; }
body.el-motyw .el-oferta-link { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 800; color: var(--el-pomarancz); }
@media (max-width: 767px) {
	body.el-motyw .e-con.el-oferta-foto { aspect-ratio: 16 / 10; }
	/* kwadratowa miska w ramce 16 : 10 cała (białe tło zdjęcia jak karta), pigułka z ceną obok niej */
	body.el-motyw .el-oferta-karta--1 .el-oferta-zdjecie img { object-fit: contain; }
}
/* Ciemny pasek zestawu: dwie miniatury, opis, ~~90 zł~~ 67 zł, przycisk. */
body.el-motyw .e-con.el-zestaw-pasek {
	margin-top: 24px; background: var(--el-atrament); color: #fff; border-radius: 24px; padding: 20px 22px 20px 20px;
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; transform: rotate(.3deg); box-shadow: var(--el-cien-karta);
}
body.el-motyw .e-con.el-zestaw-miniatury { flex: none; width: auto; display: flex; flex-direction: row; align-items: center; }
body.el-motyw .el-zestaw-mini { width: 72px; height: 72px; border-radius: 18px; background: #fff; overflow: hidden; }
body.el-motyw .el-zestaw-mini--miska { transform: rotate(-4deg); }
body.el-motyw .el-zestaw-mini--miska img { width: 100%; height: 100%; object-fit: cover; }
body.el-motyw .el-zestaw-mini--zawieszka { display: flex; align-items: center; justify-content: center; margin-left: -14px; transform: rotate(5deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
body.el-motyw .el-zestaw-mini--zawieszka img { width: 76%; height: auto; mix-blend-mode: multiply; }
body.el-motyw .e-con.el-zestaw-tekst { flex: 1 1 260px; width: auto; display: flex; flex-direction: column; gap: 4px; }
body.el-motyw .el-zestaw-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: 26px; line-height: 1.05; }
body.el-motyw .el-zestaw-opis { font-size: 14px; line-height: 1.5; color: var(--el-na-ciemnym-2); }
body.el-motyw .el-zestaw-ceny .elementor-heading-title { display: flex; align-items: baseline; gap: 10px; }
body.el-motyw .el-zestaw-ceny s { font-size: 16px; color: var(--el-na-ciemnym-2); }
body.el-motyw .el-zestaw-ceny b { font-family: var(--el-f-display); font-weight: 800; font-size: 46px; line-height: 1; color: var(--el-zolty); }
@media (max-width: 599px) {
	body.el-motyw .el-zestaw-pasek > .el-cta { flex: 1 1 100%; }
	body.el-motyw .el-zestaw-pasek > .el-cta .elementor-button { width: 100%; box-sizing: border-box; }
}
body.el-motyw .el-oferta-dostawa { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--el-tekst-2); }

/* ---------- 12. 08 Skompletuj zamówienie (#zamow): ramka sekcji; konfigurator w sekcji 13 ---------- */
body.el-motyw .e-con.el-pas--bez > .el-zamow { padding: 80px var(--el-bok) 88px; gap: 32px; }

/* ---------- 13. Konfigurator (sekcja #zamow; wtyczka 0.15.0, projekt v2 „Skompletuj zamówienie” :343–502) ---------- */
/* Kroki w lewej kolumnie (numery liczy CSS po widocznych krokach), karta podsumowania po prawej, przyklejona od 956 px. */
body.el-motyw .e-con.el-zamow-glowa { display: flex; flex-direction: column; gap: 10px; }
.el-konf { --el-blad: #b3341c; --el-konf-gora: 84px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: start; }
.admin-bar .el-konf { --el-konf-gora: 116px; } /* pasek administratora 32 px przesuwa nagłówek */
.el-konf [hidden] { display: none !important; }
.el-konf input[type=radio], .el-konf-gal input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } /* checkbox: „Voucher na galerię” (wtyczka 0.15.5), kółko rysuje .el-konf-r */
.el-ukryte { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.el-konf-pola { display: flex; flex-direction: column; gap: 30px; min-width: 0; container-type: inline-size; counter-reset: el-krok; }
.el-konf-grupa { display: flex; flex-direction: column; gap: 12px; }
.el-konf-krok { counter-increment: el-krok; } /* ukryty krok (display: none) się nie liczy */
.el-konf-etykieta { font-size: 16px; font-weight: 800; }
.el-konf-krok > .el-konf-etykieta::before { content: counter(el-krok) '. '; }
.el-konf-wartosc { font-weight: 500; color: var(--el-tekst-3); }
.el-konf-pod { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; font-weight: 800; }
.el-konf-pod .el-konf-wartosc { font-size: 13px; font-weight: 400; }

/* Kafle wyboru: białe, ramka 2 px #e6dccd, zaznaczony pomarańczowa ramka i pełne kółko radia (projekt: packBd, galleryOpts, deliveries). */
.el-konf :is(.el-konf-pupil, .el-konf-sklad, .el-konf-kolor, .el-konf-zaw, .el-konf-gal, .el-konf-dost, .el-konf-platnosc) {
	position: relative; min-width: 0; box-sizing: border-box; cursor: pointer;
	background: #fff; color: var(--el-atrament); border: 2px solid var(--el-linia);
}
.el-konf :is(.el-konf-pupil, .el-konf-sklad, .el-konf-kolor, .el-konf-zaw, .el-konf-gal, .el-konf-dost):has(input:checked) { border-color: var(--el-pomarancz); }
.el-konf :is(.el-konf-pupil, .el-konf-sklad, .el-konf-kolor, .el-konf-zaw, .el-konf-gal, .el-konf-dost):has(input:focus-visible) { outline: 2px solid var(--el-atrament); outline-offset: 2px; }
.el-konf :is(.el-konf-sklad, .el-konf-kolor):has(input:disabled) { opacity: .5; cursor: not-allowed; }
.el-konf-r { flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--el-linia); background: #fff; box-shadow: inset 0 0 0 3px #fff; }
.el-konf :has(> input:checked) .el-konf-r, .el-konf-platnosc .el-konf-r { border-color: var(--el-pomarancz); background: var(--el-pomarancz); }

/* 1. Pupil: 3 karty (176 × 199 przy 1440), zdjęcie 4 : 3, nazwa Baloo 17 z kółkiem 16 px, opis 11 px. */
.el-konf-pupile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.el-konf-pupil { border-radius: 16px; padding: 6px 6px 10px; display: flex; flex-direction: column; gap: 6px; }
.el-konf-pupil-foto { display: block; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: #fff; }
body.el-motyw .el-konf-pupil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-konf-pupil-tekst { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.el-konf-pupil-nazwa { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--el-f-display); font-weight: 800; font-size: 17px; line-height: 1; }
.el-konf-pupil-nazwa .el-konf-r { width: 16px; height: 16px; box-shadow: inset 0 0 0 2px #fff; }
.el-konf-pupil-opis { font-size: 11px; line-height: 1.35; color: var(--el-tekst-3); text-wrap: pretty; }
@media (max-width: 374px) { /* „Średni” z kółkiem przy 320 px */
	.el-konf-pupil-tekst { padding: 0 2px; }
	.el-konf-pupil-nazwa { font-size: 15px; gap: 4px; }
}

/* 2. Co zamawiasz?: 4 kafle po 128 px (r 20, p 12), zdjęcie 92 px, nazwa 15 z kółkiem 20 px, cena Baloo 26.
   Kolumna węższa niż 4 kafle (548 px) dostaje 2 × 2 zamiast 3 + 1. */
.el-konf-sklady { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 12px; }
/* Od 0.4.10 trzy kafle (samej galerii nie ma, wtyczka 0.15.3): rząd od 408 px kontenera; węziej 2 + 1, nieparzysty ostatni
   (domyślny „Miska + zawieszka”) na całą szerokość. Reguła „zawsze 2 kolumny do 547 px” była pod 4 kafle (2 + 2 zamiast 3 + 1). */
@container (max-width: 407px) { .el-konf-sklad:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.el-konf-sklad { border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.el-konf-sklad-foto { height: 92px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
body.el-motyw .el-konf-sklad-foto img { flex: none; width: auto; height: 100%; aspect-ratio: 1; object-fit: cover; }
body.el-motyw .el-konf-sklad-foto .el-konf-sklad-zaw { height: 62%; aspect-ratio: auto; object-fit: contain; mix-blend-mode: multiply; }
body.el-motyw .el-konf-sklad-foto img + img { margin-left: -14px; }
body.el-motyw .el-konf-sklad-foto .el-konf-sklad-gal { flex: 0 1 auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain; }
.el-konf-sklad-nazwa { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.el-konf-sklad-nazwa .el-konf-r { width: 20px; height: 20px; }
.el-konf-sklad-cena, .el-konf-k-cena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.el-konf-sklad-cena b { font-family: var(--el-f-display); font-weight: 800; font-size: 26px; line-height: 1; }
.el-konf :is(.el-konf-sklad-cena, .el-konf-k-cena) s { font-size: 13px; color: var(--el-tekst-3); }
.el-konf-sklad-opis { font-size: 12px; color: var(--el-tekst-3); }

/* 3. Kolor miski: 4 kafle (r 16, ramka biała, zaznaczony pomarańczowa), zdjęcie 1 : 1 r 10, nazwa 12 px. */
.el-konf-kolory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.el-konf .el-konf-kolor { border-color: #fff; border-radius: 16px; padding: 6px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.el-konf .el-konf-kolor:has(input:checked) { border-color: var(--el-pomarancz); }
body.el-motyw .el-konf-kolor img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.el-konf-kolor span { font-size: 12px; font-weight: 700; }
.el-konf-kolor small { font-size: 11px; color: var(--el-tekst-3); }

/* 4. Zawieszka i grawer: biały panel (r 18, p 18), kafle kształtów z podpisem (minmax 96, r 14), kółka kolorów 32 px. */
.el-konf-panel { background: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.el-konf-opcja { display: flex; flex-direction: column; gap: 10px; }
.el-konf-zawieszki { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.el-konf-zaw { border-radius: 14px; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.el-motyw .el-konf-zaw img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply; }
.el-konf-zaw span { font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; text-wrap: balance; }
.el-konf-podpowiedz { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--el-tekst-3); }
.el-konf-podpowiedz button { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--el-pomarancz); text-decoration: underline; cursor: pointer; }
/* Kółko 32 px z białą obwódką 3 px, zaznaczone z ciemnym pierścieniem; pole kliknięcia 44 px. */
.el-konf-kolory-zaw { display: flex; flex-wrap: wrap; margin: -6px; }
.el-konf-kolory-zaw label { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.el-konf-kolory-zaw label::before { content: ''; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; background: var(--k); box-shadow: 0 0 0 2px transparent, inset 0 0 0 1px rgba(28, 23, 20, .15); }
.el-konf-kolory-zaw label:has(input:checked)::before { box-shadow: 0 0 0 2px var(--el-atrament), inset 0 0 0 1px rgba(28, 23, 20, .15); }
.el-konf-kolory-zaw label:has(input:focus-visible) { outline: 2px solid var(--el-pomarancz); outline-offset: -2px; border-radius: 50%; }
.el-konf-teksty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.el-konf-teksty label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.el-konf :is(.el-konf-teksty, .el-konf-pole) input { min-width: 0; font-family: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--el-ramka-pole); background: #fff; color: var(--el-atrament); }
.el-konf :is(.el-konf-teksty, .el-konf-pole) input:focus { border-color: var(--el-pomarancz); outline: 1px solid var(--el-pomarancz); outline-offset: 0; }
.el-konf input[aria-invalid=true] { border-color: var(--el-blad); outline: 2px solid var(--el-blad); outline-offset: 1px; }
.el-konf-notka { margin: 0; font-size: 12px; color: var(--el-tekst-3); }
.el-konf-notka[data-blad] { color: var(--el-blad); font-weight: 700; }
.el-konf-pakiety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--el-krem); padding: 5px; border-radius: 999px; }
.el-konf-pakiety label { position: relative; cursor: pointer; font-weight: 800; font-size: 13px; padding: 9px 10px; border-radius: 999px; text-align: center; }
.el-konf-pakiety label:has(input:checked) { background: var(--el-atrament); color: #fff; }
/* „Więcej opcji graweru” (blaszka t5; zawieszki z paczek mają jeden układ, więc całość jest ukryta). */
.el-konf-wiecej { border-top: 1px solid var(--el-linia); padding-top: 14px; }
.el-konf-wiecej summary { cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.el-konf-wiecej summary::-webkit-details-marker { display: none; }
.el-konf-wiecej summary::after { content: '+'; color: var(--el-pomarancz); font-size: 22px; line-height: .7; }
.el-konf-wiecej[open] summary::after { content: '\2212'; }
.el-konf-wiecej[open] { display: flex; flex-direction: column; gap: 16px; }
.el-konf-pastylki { display: flex; flex-wrap: wrap; gap: 6px; }
.el-konf-pastylki label { position: relative; cursor: pointer; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1.5px solid var(--el-ramka-chip); }
.el-konf-pastylki label:has(input:checked) { background: var(--el-pomarancz); border-color: var(--el-pomarancz); color: #fff; }
.el-konf :is(.el-konf-pakiety, .el-konf-pastylki) label:has(input:focus-visible) { outline: 2px solid var(--el-atrament); outline-offset: 2px; }
.el-konf-pole { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.el-konf-pole small, .el-konf-fakty { font-size: 12px; font-weight: 500; color: var(--el-tekst-3); margin: 0; }
.el-konf-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.el-konf-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--el-pomarancz); }

/* 5. Galeria na imprezę: karty tekstowe (minmax 150, r 16, p 12 × 14), cena Baloo 22 i przekreślona 12 px. */
.el-konf-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.el-konf-gal { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.el-konf-k-nazwa { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.el-konf-k-cena { gap: 0 6px; }
.el-konf-k-cena b { font-family: var(--el-f-display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.el-konf .el-konf-k-cena s { font-size: 12px; }
.el-konf-k-opis { font-size: 11px; line-height: 1.4; color: var(--el-tekst-3); }

/* 6. Dostawa i płatność: kafle z kółkiem z lewej (minmax 180), płatność jedna (online), podpis pod spodem. */
.el-konf-dostawy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.el-konf :is(.el-konf-dost, .el-konf-platnosc) { border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.el-konf .el-konf-platnosc { border-color: var(--el-pomarancz); cursor: default; }
.el-konf-dost-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.el-konf-dost-tekst b { font-size: 14px; font-weight: 800; }
.el-konf-dost-tekst small { font-size: 12px; color: var(--el-tekst-3); }
.el-konf-podpis { margin: 0; font-size: 12px; color: var(--el-tekst-3); }

/* Karta podsumowania (aside projektu): r 24, p 22, odstęp 16, cień .18; podgląd w kwadracie min(100 %, 46vh, 400 px). */
.el-konf-podsumowanie { position: sticky; top: var(--el-konf-gora); background: var(--el-atrament); color: var(--el-na-ciemnym); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--el-cien-karta); }
/* --el-podglad-max ustawia zestaw.js (przyklej(), wtyczka 0.15.6): kwadrat kurczy się, żeby cała karta mieściła się pod nagłówkiem. */
.el-konf-podglad { position: relative; width: min(100%, 46vh, 400px, var(--el-podglad-max, 400px)); aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; }
body.el-motyw .el-konf-podglad > .el-konf-miska { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Zestaw w widoku Miska: miska z lewej, z prawej miniatura zawieszki z grawerem (projekt :475–478). */
body.el-motyw .el-konf-podglad[data-sklad=zestaw] > .el-konf-miska { inset: auto; left: 2%; top: 15%; width: 70%; height: auto; aspect-ratio: 1; }
.el-konf-zaw-podglad { position: absolute; right: 4%; top: 50%; width: 30%; transform: translateY(-38%) rotate(8deg); cursor: pointer; mix-blend-mode: multiply; }
.el-konf-zaw-podglad :is(img, svg) { width: 100%; height: auto; display: block; }
.el-konf-zaw-podglad:focus-visible { outline: 2px solid var(--el-pomarancz); outline-offset: 2px; }
.el-konf :is(.el-konf-zaw-podglad, .el-konf-duzy) figure { margin: 0; }
.el-konf-duzy, .el-konf-scena { position: absolute; inset: 0; }
.el-konf-duzy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: center; padding: 52px 18px 18px; box-sizing: border-box; }
.el-konf-duzy figure { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; height: 100%; justify-content: center; }
.el-konf-duzy figcaption { font-size: 12px; font-weight: 800; color: var(--el-tekst-3); }
.el-konf-duzy svg { width: 100%; height: auto; max-height: calc(100% - 26px); filter: drop-shadow(0 6px 10px rgba(28, 23, 20, .18)); }
/* Zdjęcie kafla, zanim wczyta się silnik (projekt: sama zawieszka na środku, 58 %, obrót 6°). */
.el-konf-duzy .el-konf-zdj { grid-column: 1 / -1; }
body.el-motyw .el-konf-duzy .el-konf-zdj img { width: 58%; height: auto; mix-blend-mode: multiply; transform: rotate(6deg); }
.el-konf-scena canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.el-konf-podglad[data-widok=zawieszka] { background: radial-gradient(120% 90% at 50% 38%, #fcf7f0 0 30%, #e8dac8 100%); }
/* „Wizualizacja” w lewym górnym rogu widoku zawieszki (prośba Damiana z 16.10.2026), na wysokości przełącznika. */
.el-konf-podglad[data-widok=zawieszka]::before {
	content: 'Wizualizacja'; position: absolute; left: 12px; top: 18px; z-index: 1; pointer-events: none;
	font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--el-tekst-3);
	background: rgba(255, 255, 255, .85); padding: 3px 8px; border-radius: 999px;
}
/* Przełączniki: ciemna pigułka, zaznaczony biały (Miska / Zawieszka u góry z prawej, Przód / Tył / Obracaj na dole). */
.el-konf :is(.el-konf-przelacznik, .el-konf-widok) { position: absolute; z-index: 2; display: flex; gap: 4px; padding: 4px; background: var(--el-atrament); border-radius: 999px; }
.el-konf .el-konf-przelacznik { right: 10px; top: 10px; }
.el-konf .el-konf-widok { left: 50%; bottom: 10px; transform: translateX(-50%); }
.el-konf :is(.el-konf-przelacznik, .el-konf-widok) button { min-height: 24px; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--el-na-ciemnym); font-family: inherit; font-size: 12px; font-weight: 800; line-height: normal; cursor: pointer; }
.el-konf :is(.el-konf-przelacznik, .el-konf-widok) button[aria-pressed=true] { background: #fff; color: var(--el-atrament); }
.el-konf :is(.el-konf-przelacznik, .el-konf-widok) button:focus-visible { outline: 2px solid var(--el-pomarancz); outline-offset: 1px; }
.el-konf-uwaga-3d { margin: -6px 0 0; font-size: 12px; line-height: 1.45; color: var(--el-na-ciemnym-2); }
/* Wiersze: nazwa 14 px biała i podpis 12 px, kwota 15 px (rabat i dostawa 0 zł miętowe), linia #3a322c. */
.el-konf-wiersze { display: flex; flex-direction: column; }
.el-konf-wiersze > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--el-linia-ciemna); }
.el-konf-w-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.el-konf-w-tekst b { font-size: 14px; font-weight: 700; color: #fff; }
.el-konf-w-tekst small { font-size: 12px; color: var(--el-na-ciemnym-2); overflow-wrap: anywhere; }
.el-konf-kw { flex: none; display: flex; align-items: baseline; gap: 6px; }
.el-konf-kw s { font-size: 12px; color: var(--el-na-ciemnym-2); }
.el-konf-kw b { font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; }
.el-konf-wiersze .el-konf-0 .el-konf-kw b { color: var(--el-mieta); }
.el-konf-cena { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.el-konf-cena > span { font-size: 16px; font-weight: 800; color: #fff; }
.el-konf-cena b { font-family: var(--el-f-display); font-weight: 800; font-size: 48px; line-height: 1; color: #fff; white-space: nowrap; }
.el-konf-notka-ceny { margin: 0; font-size: 12px; line-height: 1.5; color: var(--el-na-ciemnym-2); }
.el-konf-cta { width: 100%; border: 0; cursor: pointer; background: var(--el-pomarancz); color: #fff; font-family: inherit; font-weight: 800; font-size: 17px; padding: 16px 24px; border-radius: 999px; transition: background .2s; }
.el-konf-cta:not(:disabled):hover { background: var(--el-pomarancz-ciemny); }
.el-konf-cta:disabled { opacity: .55; cursor: default; }
.el-konf-status { margin: 0; font-size: 13px; line-height: 1.45; color: var(--el-na-ciemnym); }
.el-konf-status:empty { display: none; }
.el-konf .added_to_cart { color: var(--el-zolty); font-weight: 800; }
.el-konf-zwrot { margin: 0; font-size: 11px; line-height: 1.5; color: var(--el-na-ciemnym-2); }
/* Tryb ciasny (klasa z zestaw.js, wtyczka 0.15.8): okno za niskie na kwadrat podglądu 240 px przy zwykłych odstępach (laptop 768 px,
   powiększenie strony w przeglądarce) — ciaśniejsza karta i bez uwagi o modelu poglądowym; zwrot i notka o cenie zostają. */
.el-konf.el-konf-ciasno .el-konf-podsumowanie { padding: 16px; gap: 10px; }
.el-konf.el-konf-ciasno .el-konf-wiersze > div { padding: 7px 0; }
.el-konf.el-konf-ciasno .el-konf-uwaga-3d { display: none; }
.el-konf.el-konf-ciasno .el-konf-cena b { font-size: 40px; }
.el-konf.el-konf-ciasno .el-konf-cta { padding: 13px 24px; }
.el-konf-zwrot:empty { display: none; }
@media (max-width: 955px) {
	.el-konf-podsumowanie { position: static; }
}

/* ---------- 14. (sekcja „Przestroga” weszła 18.10.2026 do Kontry, sekcja 7) ---------- */

/* ---------- 15. 09 Pytania (#faq): <details name="faq">, jedno otwarte naraz bez JS ---------- */
body.el-motyw .e-con.el-faq { max-width: 820px; padding: 88px var(--el-bok); gap: 32px; }
body.el-motyw .el-faq-h2 { text-align: center; }
body.el-motyw .e-con.el-faq-lista { display: flex; flex-direction: column; gap: 10px; }
.el-pytanie { background: #fff; border-radius: 16px; overflow: hidden; }
.el-pytanie summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; font-size: 15px; font-weight: 700; color: var(--el-atrament); }
.el-pytanie summary::-webkit-details-marker { display: none; }
.el-pytanie summary::after { content: '+'; flex: none; color: var(--el-pomarancz); font-size: 20px; font-weight: 800; line-height: 1; }
.el-pytanie[open] summary::after { content: '\2212'; }
.el-pytanie summary:focus-visible { outline-offset: -2px; border-radius: 16px; }
body.el-motyw .el-pytanie p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--el-tekst-2); text-wrap: pretty; }

/* ---------- 16. Zwykła treść (regulamin, koszyk, kasa) ---------- */
.el-tresc { max-width: 820px; margin: 0 auto; padding: 64px var(--el-bok) 96px; box-sizing: border-box; }
.el-tresc-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: var(--el-h2); line-height: 1; margin: 0 0 28px; }
.el-tresc :is(h2, h3) { font-family: var(--el-f-display); font-weight: 800; line-height: 1.1; margin: 32px 0 12px; }
.el-tresc p, .el-tresc li { line-height: 1.6; }
.el-sklep { max-width: var(--el-max); margin: 0 auto; padding: 56px var(--el-bok) 96px; box-sizing: border-box; }

/* ---------- 16b. Szuflada koszyka (projekt :443–557, zrzuty 1440/390-09-koszyk-*) ---------- */
/* <dialog> z footer.php, otwierany showModal() w projekt.js: panel 480 px z prawej, na telefonie cały ekran. */
.el-szuflada { position: fixed; inset: 0 0 0 auto; width: min(100%, 480px); max-width: 100%; height: auto; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--el-krem); color: var(--el-atrament); box-shadow: -20px 0 40px rgba(28, 23, 20, .25); }
.el-szuflada[open] { display: flex; flex-direction: column; }
.el-szuflada::backdrop { background: rgba(28, 23, 20, .5); }
html:has(.el-szuflada[open]) { overflow: hidden; } /* strona pod spodem stoi; panel przy prawej krawędzi okna jak w projekcie */
.el-szuflada :is(h2, p, ul, ol, dl, dd) { margin: 0; padding: 0; }
.el-szuflada button { font-family: inherit; cursor: pointer; }
.el-szuflada-gora { padding: 20px 24px 16px; border-bottom: 1px solid var(--el-linia); display: flex; flex-direction: column; gap: 14px; }
.el-szuflada-belka { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.el-szuflada-tytul { font-family: var(--el-f-display); font-weight: 800; font-size: 28px; line-height: 1; }
.el-szuflada .el-szuflada-x { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--el-ramka-chip); background: transparent; color: var(--el-atrament); font-size: 20px; line-height: 1; }
.el-szuflada-kroki { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 11px; font-weight: 800; color: var(--el-tekst-4); }
.el-szuflada-kroki li { display: flex; flex-direction: column; gap: 6px; }
.el-szuflada-kroki li::before { content: ''; height: 4px; border-radius: 4px; background: var(--el-linia); }
.el-szuflada-kroki [aria-current] { color: var(--el-atrament); }
.el-szuflada-kroki [aria-current]::before { background: var(--el-pomarancz); }
.el-szuflada-komunikat { padding: 12px 24px 0; font-size: 13px; color: var(--el-tekst-2); }
/* Pusty region role=status zostaje w drzewie dostępności (display:none sprawiał, że czytniki nie odczytywały komunikatu). */
.el-szuflada-komunikat:empty { padding: 0; }
.el-szuflada-tresc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.el-szuflada-lista { flex: 1; overflow-y: auto; padding: 20px 24px; }
.el-szuflada-pozycje { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.el-szuflada-pozycja { background: #fff; border-radius: 18px; padding: 12px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.el-szuflada-foto { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--el-krem); }
.el-szuflada-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.el-szuflada-opis { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.el-szuflada-wiersz { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 800; }
.el-szuflada-cena { white-space: nowrap; }
.el-szuflada-szczegol { font-size: 12px; line-height: 1.4; color: var(--el-tekst-3); overflow-wrap: anywhere; }
.el-szuflada-akcje { display: flex; justify-content: flex-end; padding-top: 6px; }
/* bez krokomierza ilości (B10): sam „Usuń”, z polem dotyku 24 px */
.el-szuflada .el-szuflada-usun { min-height: 24px; padding: 0 2px; border: 0; background: transparent; color: var(--el-atrament); font-size: 12px; font-weight: 700; text-decoration: underline; }
.el-szuflada .el-szuflada-usun:disabled { cursor: default; opacity: .6; }
.el-szuflada-pusto { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 12px; text-align: center; }
.el-szuflada-pusto img { width: 64px; height: 64px; object-fit: contain; opacity: .9; }
.el-szuflada-pusto p { max-width: 280px; font-size: 14px; color: var(--el-tekst-3); }
.el-szuflada .el-szuflada-pusto-tytul { max-width: none; font-family: var(--el-f-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--el-atrament); }
.el-szuflada .el-szuflada-cta, .el-szuflada .el-szuflada-cta:hover { background: var(--el-pomarancz); color: #fff; font-weight: 800; font-size: 15px; padding: 13px 22px; border-radius: 999px; text-decoration: none; }
.el-szuflada-stopka { border-top: 1px solid var(--el-linia); padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.el-szuflada-sumy { display: flex; flex-direction: column; gap: 10px; }
.el-szuflada-sumy div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--el-tekst-2); }
.el-szuflada-sumy dd { font-weight: 700; }
.el-szuflada-razem { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 800; }
.el-szuflada-razem b { font-family: var(--el-f-display); font-weight: 800; font-size: 34px; line-height: 1; }
.el-szuflada .el-szuflada-kasa { background: var(--el-pomarancz); color: #fff; font-weight: 800; font-size: 16px; padding: 16px; border-radius: 999px; text-align: center; text-decoration: none; transition: background .2s; }
.el-szuflada .el-szuflada-kasa:hover { background: var(--el-atrament); color: #fff; }
.el-szuflada .el-szuflada-dalej { border: 0; background: transparent; padding: 4px; color: var(--el-atrament); font-size: 13px; font-weight: 700; }

/* ---------- 17. Bardzo wąskie ekrany ---------- */
/* H1 hero przy 320 px: „Rozchlapana” wystaje poza ekran przy minimalnych 46 px. */
@media (max-width: 359px) { body.el-motyw .el-h1 { font-size: 40px; } }

/* ---------- 18. Baner zgód (Google Analytics, od 0.4.19) ---------- */
/* Oba przyciski jednakowe: odmowa nie może być mniej widoczna niż zgoda. Pod szufladą koszyka (dialog), nad przyklejonym nagłówkiem. */
.el-zgody { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto; padding: 18px 20px; border-radius: 16px; background: var(--el-atrament); color: var(--el-na-ciemnym); font-size: 13px; line-height: 1.5; box-shadow: 0 12px 32px rgba(28, 23, 20, .35); box-sizing: border-box; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.el-zgody[hidden] { display: none; }
.el-zgody-tytul { margin: 0 0 4px; font-family: var(--el-f-display); font-size: 17px; font-weight: 800; color: #fff; }
.el-zgody-tekst { margin: 0; }
body.el-motyw .el-zgody a { color: #fff; text-decoration: underline; }
.el-zgody-przyciski { display: flex; gap: 10px; margin-top: 14px; }
.el-zgody-przyciski button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: #fff; color: var(--el-atrament); font: inherit; font-weight: 800; cursor: pointer; }
.el-zgody-przyciski button:hover { background: var(--el-krem-2); }
.el-zgody-przyciski button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }