/**
 * Komponenty wspoldzielone miedzy sekcjami.
 * Klasy dodawane sa do widgetow Elementora przez pole "CSS Classes".
 */

/* Link/przycisk z ukosna strzalka (Figma: "Icon / Arrow Right").
   Strzalka jest maska CSS, wiec dziedziczy kolor tekstu i nie wymaga
   wlaczania uploadu SVG w WordPressie. */
.kora-arrow-link .elementor-button-content-wrapper::after {
	content: '';
	display: inline-block;
	inline-size: 14px;
	block-size: 14px;
	margin-inline-start: 10px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--kora-arrow) no-repeat center / contain;
	mask: var(--kora-arrow) no-repeat center / contain;
	transition: transform .2s ease;
}

.kora-arrow-link:hover .elementor-button-content-wrapper::after {
	transform: translate(2px, -2px);
}

.kora-arrow-link .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
}

/* Przyciski tekstowe ze strzałką nie mają w makiecie wcięcia poziomego -
   etykieta zaczyna się dokładnie na lewej krawędzi (wypełnione przyciski
   mają 20px, te nie mają go wcale). W pionie 9px daje wysokość 43px przy
   interlinii 25px, jak w makiecie. */
.kora-arrow-link .elementor-button {
	padding: 9px 0;
}

:root {
	--kora-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M14.3 14.99V.687H0' stroke='%23000' stroke-width='1.375' fill='none'/%3E%3Cpath d='M.622 14.514l.486.486L14.787 1.32 14.3.835 13.815.35.136 14.027z' fill='%23000'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.kora-arrow-link .elementor-button-content-wrapper::after { transition: none; }
	.kora-arrow-link:hover .elementor-button-content-wrapper::after { transform: none; }
}

/* Kolumna tresci w hero.
   Nagłówek ma w projekcie 520px przy kolumnie 501px i twarde łamanie wierszy,
   wiec jego min-content rozpychalby wiersz flex i wypychal tekst poza karte.
   min-width:0 pozwala kolumnie trzymac przydzielona szerokosc, a naglowek
   wychodzi na padding dokladnie tak jak w Figmie. */
.kora-hero__content {
	min-width: 0;
	/* Kontrolki grupy _flex (Flex Grow / Shrink) nie generuja CSS-u w tej
	   wersji Elementora, a domyslnie kontener-dziecko ma --flex-grow: 0.
	   Ustawiamy zmienne wprost, zeby kolumna wypelniala reszte karty. */
	--flex-grow: 1;
	--flex-shrink: 1;
}

/* Kolumna ze zdjeciem trzyma proporcje 49.08% (587/1196 z Figmy). */
.kora-hero__media {
	--flex-grow: 0;
	--flex-shrink: 0;
}

/* Zdjęcie hero nie ma wysokości w pikselach - wynika z proporcji makiety
   (desktop 602x701, mobilka 350x250), więc skaluje się razem z kolumną. */
.kora-hero__image img {
	inline-size: 100%;
	aspect-ratio: 602 / 701;
	object-fit: cover;
}

/* Panel certyfikatow ma stale 282px - kurczy sie kolumna tekstowa obok. */
.kora-certs {
	--flex-grow: 0;
	--flex-shrink: 0;
}

/* Linki na ciemnym tle.
   Zestaw Elementora ustawia globalnie ".elementor-kit-8 a { color: <zielen> }".
   Jest to regula nalozona wprost na <a>, wiec bije kolor dziedziczony
   z widgetu - linki w footerze wychodzily ciemnozielone na ciemnozielonym tle.
   Ponizsze selektory maja wyzsza specyficznosc i przywracaja kolor rodzica,
   czyli wartosc ustawiona na widgecie w edytorze. */
.kora-footer .elementor-widget a:not(.elementor-button),
.kora-links-inherit .elementor-widget a:not(.elementor-button) {
	color: inherit;
	text-decoration: none;
	transition: opacity .2s ease;
}

.kora-footer .elementor-widget a:not(.elementor-button):hover,
.kora-links-inherit .elementor-widget a:not(.elementor-button):hover {
	color: inherit;
	opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
	.kora-footer .elementor-widget a:not(.elementor-button) { transition: none; }
}

/* ── Header: kolejnosc elementow na mobilce ──────────────────────────
   Na desktopie: logo | nawigacja + CTA.
   W Figmie na mobilce: logo | CTA | hamburger.
   Widget nav-menu renderuje hamburger, wiec przesuwamy go za przycisk. */
@media (max-width: 1024px) {
	.kora-header__nav { order: 3; }
	.kora-header__cta-short { order: 2; }
}

/* ── Sekcje 04 + 05: siatka ──────────────────────────────────────────
   Desktop (Figma): zdjecie szerokie 797 + detal 393, odstep 10,
   pod nimi akapit na calej szerokosci.
   Mobile (Figma): zdjecie szerokie, akapit, detal.

   Swiadomie uzywamy Gridu zamiast flexa. Kontener Elementora z
   flex-grow dostaje takze flex-shrink:0, a zdjecie ma naturalna
   szerokosc ~1600px - przez co kolumna nie mogla sie zwezic i
   zajmowala cala linie. Grid przydziela szerokosci wprost. */
.kora-gallery > .e-con-inner {
	/* Elementor czyta display i odstepy ze zmiennych. Ustawione wprost na
	   .e-con-inner bija wartosci dziedziczone z kontenera, bez walki o
	   specyficznosc selektorow. */
	--display: grid;
	--column-gap: 10px;
	--row-gap: 48px;
	grid-template-columns: minmax(0, 797fr) minmax(0, 393fr);
}

.kora-gallery__wide      { grid-area: 1 / 1 / 2 / 2; }
.kora-gallery__detail    { grid-area: 1 / 2 / 2 / 3; }
.kora-gallery__statement { grid-area: 2 / 1 / 3 / 3; }

@media (max-width: 1024px) {
	.kora-gallery > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		--column-gap: 0px;
		--row-gap: 32px;
	}
	.kora-gallery__wide      { grid-area: 1 / 1 / 2 / 2; }
	.kora-gallery__statement { grid-area: 2 / 1 / 3 / 2; }
	.kora-gallery__detail    { grid-area: 3 / 1 / 4 / 2; }
}

/* ── Hero: naglowek ze stalymi lamaniami wierszy ─────────────────────
   W projekcie naglowek ma 520px przy kolumnie 501px i twarde <br>,
   wiec nie moze sie zawinac. Ponizej 1440px skalujemy go proporcjonalnie
   do szerokosci karty (40px przy karcie 1196px), zeby nie wychodzil
   poza zaokraglona krawedz. */
@media (min-width: 1025px) and (max-width: 1439px) {
	.kora-hero__content .elementor-heading-title {
		font-size: calc((100vw - 244px) * 0.03344);
		line-height: 1.225;
	}
}

/* Samodzielna ikona ukosnej strzalki (naglowek panelu certyfikatow).
   Ten sam ksztalt co w .kora-arrow-link, ale jako osobny element. */
.kora-arrow-icon {
	position: relative;
}

.kora-arrow-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--kora-arrow) no-repeat center / contain;
	mask: var(--kora-arrow) no-repeat center / contain;
	/* W Figmie strzałka przy "Certyfikaty" to wariant "Icon / Arrow",
	   obrócony o 180° względem strzałki z przycisków ("Icon / Arrow Right").
	   Kształt bazowy obu jest identyczny, różni się tylko obrót. */
	transform: rotate(180deg);
}

/* ── Szerokosci kontenerow w zakresie tabletowym ─────────────────────
   Kontrolka "width" kontenera Elementora ma min_affected_device: jej
   wartosc tabletowa trafia do tego samego bloku @media(min-width:768px)
   co desktopowa i nadpisuje ja. Dlatego szerokosci tabletowe ustawiamy
   tutaj - tablet ma pokazywac uklad mobilny. */
@media (max-width: 1024px) {
	/* Elementor wypisuje szerokosc desktopowa regula o specyficznosci (0,3,0)
	   w bloku @media(min-width:768px), ktory obowiazuje takze na tablecie.
	   Powtorzona klasa podnosi nas do (0,4,0) - bez tego kolumny trzymalyby
	   procenty desktopowe w zakresie 768-1024px. */
	.elementor-element.elementor-element.e-con.kora-fluid,
	.elementor-element.elementor-element.e-con.kora-hero__media,
	.elementor-element.elementor-element.e-con.kora-gallery__detail {
		--width: 100%;
	}
}

/* ── Header przyklejany ──────────────────────────────────────────────
   Elementor Pro dokłada .elementor-sticky--effects po przewinięciu
   poza próg. Zmniejszamy wtedy wysokość i dokładamy subtelny cień. */
.elementor-element.e-con.kora-header.elementor-sticky--effects {
	/* Cztery klasy, żeby przebić regułę paddingu generowaną przez
	   Elementor dla konkretnego elementu (specyficzność 0,3,0). */
	--padding-top: 16px;
	--padding-bottom: 16px;
	box-shadow: 0 1px 0 rgba(0, 20, 12, .08), 0 6px 24px rgba(0, 20, 12, .06);
	transition: box-shadow .25s ease;
}

.kora-header {
	transition: box-shadow .25s ease;
}

/* ── Cechy produktu: ikona jako maska ────────────────────────────────
   Ikony pochodzą z Figmy i leżą w assets/icons/features/. Maska
   dziedziczy kolor tekstu, więc działa na każdym tle karty. */
.kora-feat .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kora-feat .elementor-heading-title::before {
	content: '';
	flex: 0 0 auto;
	inline-size: 24px;
	block-size: 24px;
	background-color: currentColor;
	-webkit-mask: var(--kora-feat-icon) no-repeat center / contain;
	mask: var(--kora-feat-icon) no-repeat center / contain;
}

.kora-feat--aesthetics { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M0 10.5115V9.48792H5.11795V10.5115H0ZM6.16125 6.88569L4.32672 5.05116L5.05116 4.32672L6.88569 6.16125L6.16125 6.88569ZM9.48792 5.11795V0H10.5115V5.11795H9.48792ZM13.8382 6.88569L13.1137 6.16125L14.9483 4.32672L15.6727 5.05116L13.8382 6.88569ZM14.8815 10.5115V9.48792H19.9994V10.5115H14.8815ZM8.54314 11.4563C8.1494 11.0627 7.95253 10.5772 7.95253 9.99971C7.95253 9.42224 8.1494 8.93671 8.54314 8.54314C8.93671 8.1494 9.42224 7.95253 9.99971 7.95253C10.5772 7.95253 11.0627 8.1494 11.4563 8.54314C11.85 8.93671 12.0469 9.42224 12.0469 9.99971C12.0469 10.5772 11.85 11.0627 11.4563 11.4563C11.0627 11.85 10.5772 12.0469 9.99971 12.0469C9.42224 12.0469 8.93671 11.85 8.54314 11.4563ZM14.9483 15.6727L13.1137 13.8382L13.8382 13.1137L15.6727 14.9483L14.9483 15.6727ZM5.05116 15.6727L4.32672 14.9483L6.16125 13.1137L6.88569 13.8382L5.05116 15.6727ZM9.48792 19.9994V14.8815H10.5115V19.9994H9.48792Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--care { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M3.5 12.5H4.5V3.5H3.5V12.5ZM11.5 10.5H12.5V3.5H11.5V10.5ZM7.5 7.5H8.5V3.5H7.5V7.5ZM1.6155 16C1.15517 16 0.770833 15.8458 0.4625 15.5375C0.154167 15.2292 0 14.8448 0 14.3845V1.6155C0 1.15517 0.154167 0.770833 0.4625 0.4625C0.770833 0.154167 1.15517 0 1.6155 0H14.3845C14.8448 0 15.2292 0.154167 15.5375 0.4625C15.8458 0.770833 16 1.15517 16 1.6155V14.3845C16 14.8448 15.8458 15.2292 15.5375 15.5375C15.2292 15.8458 14.8448 16 14.3845 16H1.6155ZM1.6155 15H14.3845C14.5385 15 14.6796 14.9359 14.8077 14.8077C14.9359 14.6796 15 14.5385 15 14.3845V1.6155C15 1.4615 14.9359 1.32042 14.8077 1.19225C14.6796 1.06408 14.5385 1 14.3845 1H1.6155C1.4615 1 1.32042 1.06408 1.19225 1.19225C1.06408 1.32042 1 1.4615 1 1.6155V14.3845C1 14.5385 1.06408 14.6796 1.19225 14.8077C1.32042 14.9359 1.4615 15 1.6155 15Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--durability { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2212%22 height=%2210%22 viewBox=%220 0 12 10%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M1.9384 10C1.4 10 0.942333 9.82297 0.5654 9.46891C0.188467 9.11497 0 8.68508 0 8.17922C0 7.67349 0.188467 7.2436 0.5654 6.88954C0.942333 6.53547 1.4 6.35844 1.9384 6.35844C2.47693 6.35844 2.93467 6.53547 3.3116 6.88954C3.68853 7.2436 3.877 7.67349 3.877 8.17922C3.877 8.68508 3.68853 9.11497 3.3116 9.46891C2.93467 9.82297 2.47693 10 1.9384 10ZM10.0616 10C9.52307 10 9.06533 9.82297 8.6884 9.46891C8.31147 9.11497 8.123 8.68508 8.123 8.17922C8.123 7.67349 8.31147 7.2436 8.6884 6.88954C9.06533 6.53547 9.52307 6.35844 10.0616 6.35844C10.6 6.35844 11.0577 6.53547 11.4346 6.88954C11.8115 7.2436 12 7.67349 12 8.17922C12 8.68508 11.8115 9.11497 11.4346 9.46891C11.0577 9.82297 10.6 10 10.0616 10ZM4.6308 3.11046C4.25133 2.7564 4.0616 2.32651 4.0616 1.82078C4.0616 1.31492 4.25133 0.885028 4.6308 0.531092C5.01027 0.177031 5.46667 0 6 0C6.53333 0 6.98973 0.177031 7.3692 0.531092C7.74867 0.885028 7.9384 1.31492 7.9384 1.82078C7.9384 2.32651 7.74867 2.7564 7.3692 3.11046C6.98973 3.46452 6.53333 3.64156 6 3.64156C5.46667 3.64156 5.01027 3.46452 4.6308 3.11046Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--eco { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2214%22 height=%2218%22 viewBox=%220 0 14 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M1 17.731V16.731H6.5V12H4C2.88583 12 1.94067 11.6119 1.1645 10.8358C0.388167 10.0594 0 9.11417 0 8C0 7.1155 0.287833 6.3325 0.8635 5.651C1.43917 4.96967 2.14233 4.45017 2.973 4.0925C3.11017 2.77833 3.54383 1.76775 4.274 1.06075C5.00417 0.353583 5.91283 0 7 0C8.08717 0 8.99583 0.353583 9.726 1.06075C10.4562 1.76775 10.8898 2.77833 11.027 4.0925C11.8705 4.4245 12.5769 4.93758 13.1462 5.63175C13.7154 6.32608 14 7.1155 14 8C14 9.11417 13.6118 10.0594 12.8355 10.8358C12.0593 11.6119 11.1142 12 10 12H7.5V16.731H13V17.731H1ZM4 11H10C10.8333 11 11.5417 10.7083 12.125 10.125C12.7083 9.54167 13 8.83333 13 8C13 7.31033 12.7747 6.70592 12.324 6.18675C11.8733 5.66742 11.3153 5.27825 10.65 5.01925L10.1 4.8L10.027 4.15C9.91417 3.10517 9.58817 2.319 9.049 1.7915C8.51 1.26383 7.827 1 7 1C6.173 1 5.49 1.26383 4.951 1.7915C4.41183 2.319 4.08583 3.10517 3.973 4.15L3.9 4.8L3.19625 5.09625C2.58208 5.35525 2.0625 5.73792 1.6375 6.24425C1.2125 6.75075 1 7.336 1 8C1 8.83333 1.29167 9.54167 1.875 10.125C2.45833 10.7083 3.16667 11 4 11Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--format { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2213%22 height=%2216%22 viewBox=%220 0 13 16%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M5.19225 16C4.98575 16 4.80592 15.9234 4.65275 15.7703C4.49958 15.6171 4.423 15.4373 4.423 15.2308V3H0C0.192167 2.11667 0.644333 1.39583 1.3565 0.8375C2.06883 0.279167 2.88583 0 3.8075 0H8.423V2.8845L11.3075 0H12.3075V6.76925H11.3075L8.423 3.8845V15.2308C8.423 15.4373 8.34642 15.6171 8.19325 15.7703C8.03992 15.9234 7.86008 16 7.65375 16H5.19225ZM5.423 15H7.423V8.51925H5.423V15ZM5.423 7.5H7.423V1H3.8075C3.36967 1 2.957 1.08433 2.5695 1.253C2.182 1.4215 1.84658 1.6705 1.56325 2H5.423V7.5Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--hardness { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M7 18V11H0V10H7V8H0V7H7V0H8V7H10V0H11V7H18V8H11V10H18V11H11V18H10V11H8V18H7ZM8 10H10V8H8V10Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--longevity { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2214%22 height=%2218%22 viewBox=%220 0 14 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M7 17.8845C4.991 17.2883 3.32208 16.0713 1.99325 14.2335C0.664417 12.3957 0 10.3255 0 8.023V2.61525L7 0L14 2.61525V8.023C14 10.3255 13.3356 12.3957 12.0068 14.2335C10.6779 16.0713 9.009 17.2883 7 17.8845ZM7 16.823C8.73333 16.273 10.1667 15.173 11.3 13.523C12.4333 11.873 13 10.0397 13 8.023V3.298L7 1.06725L1 3.298V8.023C1 10.0397 1.56667 11.873 2.7 13.523C3.83333 15.173 5.26667 16.273 7 16.823Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--stability { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2218%22 height=%2214%22 viewBox=%220 0 18 14%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M11.5 11.5H15.5V7.5H14.5V10.5H11.5V11.5ZM2.5 6.5H3.5V3.5H6.5V2.5H2.5V6.5ZM1.6155 14C1.15517 14 0.770833 13.8458 0.4625 13.5375C0.154167 13.2292 0 12.8448 0 12.3845V1.6155C0 1.15517 0.154167 0.770833 0.4625 0.4625C0.770833 0.154167 1.15517 0 1.6155 0H16.3845C16.8448 0 17.2292 0.154167 17.5375 0.4625C17.8458 0.770833 18 1.15517 18 1.6155V12.3845C18 12.8448 17.8458 13.2292 17.5375 13.5375C17.2292 13.8458 16.8448 14 16.3845 14H1.6155ZM1.6155 13H16.3845C16.5385 13 16.6796 12.9359 16.8078 12.8077C16.9359 12.6796 17 12.5385 17 12.3845V1.6155C17 1.4615 16.9359 1.32042 16.8078 1.19225C16.6796 1.06408 16.5385 1 16.3845 1H1.6155C1.4615 1 1.32042 1.06408 1.19225 1.19225C1.06408 1.32042 1 1.4615 1 1.6155V12.3845C1 12.5385 1.06408 12.6796 1.19225 12.8077C1.32042 12.9359 1.4615 13 1.6155 13Z%22 fill=%22white%22/%3E %3C/svg%3E"); }
.kora-feat--water { --kora-feat-icon: url("data:image/svg+xml,%3Csvg width=%2216%22 height=%2218%22 viewBox=%220 0 16 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M2.20764 15.8497C0.735881 14.4157 0 12.6421 0 10.5288C0 9.52872 0.202839 8.58056 0.608517 7.6843C1.0142 6.78803 1.54724 5.98139 2.20764 5.26438L7.58524 0L12.9628 5.26438C13.6232 5.98139 14.1563 6.78803 14.562 7.6843C14.9676 8.58056 15.1705 9.52872 15.1705 10.5288C15.1705 12.6421 14.4346 14.4157 12.9628 15.8497C11.4911 17.2838 9.69854 18.0008 7.58524 18.0008C5.47194 18.0008 3.67941 17.2838 2.20764 15.8497ZM0.877397 11.5477H14.2931C14.5195 10.1891 14.3874 9.01926 13.8968 8.03809C13.4062 7.05691 12.9062 6.32103 12.3968 5.83044L7.58524 1.07552L2.77371 5.83044C2.26425 6.32103 1.76895 7.05691 1.28779 8.03809C0.806639 9.01926 0.669841 10.1891 0.877397 11.5477Z%22 fill=%22white%22/%3E %3C/svg%3E"); }

/* ── Sekcja 08: odznaki na kartach zalet ─────────────────────────────
   Ilustracje dwukolorowe (baza + limonkowy akcent), więc nie da się ich
   zrobić maską - wstawiamy jako obraz tła. */
.kora-badge {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.kora-badge--dostepnosc        { background-image: url('../icons/benefits/dostepnosc.svg'); }
.kora-badge--import            { background-image: url('../icons/benefits/bezposredni-import.svg'); }
.kora-badge--realizacja        { background-image: url('../icons/benefits/szybka-realizacja.svg'); }
.kora-badge--transport         { background-image: url('../icons/benefits/transport-krajowy.svg'); }
.kora-badge--odpowiedzialnosc  { background-image: url('../icons/benefits/odpowiedzialnosc.svg'); }

/* Siatka kart zalet: 3 kolumny x 2 wiersze, na tablecie i mobilce jedna. */
/* Kontener siatki jest typu "full", więc NIE ma wewnętrznego .e-con-inner -
   karty leżą bezpośrednio w nim. Celujemy w sam element, a że Elementor
   ustawia na nim --display:flex regułą o specyficzności (0,3,0), potrzebne
   są cztery klasy, żeby ją przebić. */
.elementor-element.e-con.e-flex.kora-benefits {
	--display: grid;
	--column-gap: 23px;
	--row-gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Na mobilce Figma pokazuje karty zalet jako karuzelę (348px, odstęp 36),
   a nie stos - stąd przejście na przewijaną kolumnę siatki. */
@media (max-width: 1024px) {
	.elementor-element.e-con.e-flex.kora-benefits {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(348px, 86vw);
		--column-gap: 36px;
		--row-gap: 0px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.kora-benefits > * { scroll-snap-align: start; }
	.kora-benefits::-webkit-scrollbar { display: none; }
}

/* ── Sekcja 09: oś procesu ───────────────────────────────────────────
   Linia jest rysowana RAZ na wierszu kroku i biegnie przez calą jego
   wysokość. Wiersze stykają się (odstęp kolumny = 0, całe światło siedzi
   w paddingu środkowego wiersza), więc kolejne odcinki dochodzą do siebie
   krawędź w krawędź - nie ma czego zszywać ujemnymi wcięciami. */
.elementor-element.kora-step {
	position: relative;
}

/* UWAGA: ::before na kontenerze to u Elementora warstwa nakładki tła.
   Ustawia m.in. "height: max(100% + var(--border-top-width) + ..., 100%)",
   a ".e-con" definiuje te zmienne jako 0px, więc deklaracja jest poprawna
   i daje height:100%. Przy zadanych jednocześnie top, bottom i height
   przeglądarka ignoruje bottom - linia w pierwszym i ostatnim wierszu
   wyjeżdżałaby poza kropkę. Dlatego jawnie zerujemy wysokość i obramowanie,
   a selektor ma dwie klasy, żeby nie zależeć od kolejności arkuszy. */
.elementor-element.kora-step::before {
	content: '';
	position: absolute;
	/* szerokość etykiety "Krok N" + odstęp wiersza; kropka ma 10px,
	   więc jej środek wypada 5px dalej */
	inset-inline-start: calc(82px + 58px + 5px);
	inset-block: 0;
	inline-size: 1px;
	block-size: auto;
	border: 0;
	border-radius: 0;
	opacity: 1;
	mix-blend-mode: normal;
	transform: translateX(-50%);
	background: rgba(3, 50, 34, .18);
}

/* Linia nie jest przycinana do skrajnych kropek - biegnie przez pełną
   wysokość kolumny kroków, czyli dokładnie tyle, co zdjęcie obok. Wystaje
   więc ponad pierwszą i pod ostatnią kropkę, a oba końce trzymają się
   krawędzi bloku tekstu. */

/* Kropka: znacznik jest zwykłym dzieckiem wiersza, więc padding wiersza
   spycha go razem z treścią i kropka zawsze trafia w nagłówek kroku. */
.kora-step__marker {
	position: relative;
}

.kora-step__marker::after {
	content: '';
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 50%;
	inline-size: 10px;
	block-size: 10px;
	margin-inline-start: -5px;
	border-radius: 50%;
	background: var(--e-global-color-secondary, #C8F250);
}

@media (max-width: 1024px) {
	/* Makieta mobilna zmienia układ kroku: oś czasu zostaje widoczna przy
	   lewej krawędzi (kolumna 10px), a etykieta „Krok N" i tekst układają
	   się jedno pod drugim w kolumnie obok - nie w jednym wierszu jak na
	   desktopie. Siatka odwzorowuje to wprost: znacznik obejmuje oba
	   wiersze, etykieta siedzi w pierwszym, treść w drugim.
	   Wymiary z makiety: kolumna osi 10px, odstęp do treści 40px
	   (treść zaczyna się na x=70 przy paddingu sekcji 20), odstęp
	   etykieta/tekst 16px. */
	/* Elementor wypisuje "--display: flex" dla konkretnego elementu regułą
	   o specyficzności (0,3,0), więc siatka potrzebuje czterech klas. */
	.elementor-element.e-con.e-flex.kora-step {
		--display: grid;
		grid-template-columns: 10px minmax(0, 1fr);
		--column-gap: 40px;
		--row-gap: 16px;
		--gap: 16px 40px;
	}

	.kora-step__marker {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.elementor-element.kora-step > :first-child {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	.elementor-element.kora-step > :last-child {
		grid-column: 2;
		grid-row: 2;
	}

	/* Linia przesuwa się na środek kolumny osi (10px / 2). */
	.elementor-element.kora-step::before {
		inset-inline-start: 5px;
	}
}

/* Zdjecie obok osi procesu nie ma wlasnej wysokosci - dociaga sie do
   wysokosci kolumny z krokami, dzieki czemu obie kolumny koncza sie
   rowno niezaleznie od dlugosci tekstow. */
/* Zdjęcie przy 379px szerokości ma 515px naturalnej wysokości, a kolumna
   kroków 492px - to ono, jako wyższe, narzucało wysokość całego wiersza
   i samo "align-self: stretch" nic nie dawało. Wyjmujemy je z przepływu:
   nieobecne w układzie nie wpływa na wysokość wiersza, a rozciągnięty
   kontener podaje mu wysokość kolumny kroków. */
@media (min-width: 1025px) {
	.elementor-element.kora-process__media {
		--align-self: stretch;
		position: relative;
	}

	.kora-process__media > .elementor-widget-image {
		position: absolute;
		inset: 0;
	}

	.kora-process__media .elementor-widget-image img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

/* Na tablecie i mobilce proporcja kadru wprost z makiety (379 x 576). */
@media (max-width: 1024px) {
	.kora-process__media .elementor-widget-image img {
		inline-size: 100%;
		aspect-ratio: 379 / 576;
		object-fit: cover;
	}
}

/* Sekcje 10 i 12 korzystają teraz z widgetu "karuzela" Elementora
   (nested-carousel) - przewijanie, strzałki i kropki obsługuje Swiper,
   a stylowanie odbywa się w ustawieniach widgetu. Dawne reguły
   przewijania CSS zostały usunięte jako zbędne. */

/* ── Sekcja 11: karta z cytatem na zdjęciu ───────────────────────────
   Karta stoi przy lewej krawędzi zdjęcia, nachodzi na nie i wystaje pod
   jego dolną krawędź. Zamiast pozycjonowania absolutnego zostaje w
   przepływie i wchodzi na zdjęcie ujemnym marginesem - dzięki temu jej
   dolna część sama rezerwuje sobie miejsce i nic nie nachodzi na kolejny
   blok. Margines jest ustawiony w kontrolce kontenera, w procentach, więc
   skaluje się razem z kolumną.

   Wysokość zdjęcia wynika z proporcji z makiety, nie ze sztywnych pikseli:
   446x425 na desktopie i 344x328 na mniejszych ekranach. Dzięki temu
   procentowy margines karty (liczony od szerokości) trzyma stałą relację
   do wysokości zdjęcia. */
.kora-promo__image img {
	inline-size: 100%;
	aspect-ratio: 446 / 425;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.kora-promo__image img {
		aspect-ratio: 344 / 328;
	}
}

/* Znacznik przy wyróżnikach w sekcji 11. W makiecie to nie ptaszek w kółku,
   tylko sama biała ukośna strzałka 19x19 w ramce 27x26 - ten sam kształt, co
   w przyciskach, więc korzystamy z gotowej maski --kora-arrow. */
.elementor-element.kora-diff-icon {
	/* ikona trzyma się pierwszej linii tekstu, nie środka całego wiersza */
	--align-self: flex-start;
	align-items: center;
	justify-content: center;
}

.kora-diff-icon::before {
	content: '';
	inline-size: 19px;
	block-size: 19px;
	background-color: #FFFFFF;
	-webkit-mask: var(--kora-arrow) no-repeat center / contain;
	mask: var(--kora-arrow) no-repeat center / contain;
}

/* ── Sekcja 03: nagłówek "O nas" ─────────────────────────────────────
   Proporcja z Figmy: blok nagłówka zajmuje 686 z 793px kolumny, czyli
   ok. 86,5%. Liczone względem kolumny, nie w sztywnych pikselach - dzięki
   temu skaluje się razem z układem. */
.kora-about__heading .elementor-heading-title {
	max-width: 86.5%;
}

@media (max-width: 1024px) {
	.kora-about__heading .elementor-heading-title { max-width: none; }
}

/* Panel certyfikatów: w Figmie jego treść jest wyśrodkowana w pionie.
   Zamiast stałej wysokości 340px rozciągamy panel na wysokość wiersza
   i centrujemy zawartość - efekt ten sam, wysokość wynika z treści obok. */
@media (min-width: 1025px) {
	.elementor-element.kora-certs {
		--align-self: stretch;
		--justify-content: center;
	}
}

/* ── Odstęp akapitów nie dotyczy nagłówków ───────────────────────────
   Zestaw ustawia margin-block-end:25px dla każdego <p>, a widget
   "heading" z rozmiarem "p" też renderuje akapit. Przez to 38 etykiet
   dostawało dolny margines i rozjeżdżało się w pionie. */
.elementor-widget-heading .elementor-heading-title {
	margin-block-end: 0;
}

/* ── Etykieta sekcji (kwadracik + tekst) ─────────────────────────────
   Jeden element zamiast pustego kontenera obok nagłówka: kwadrat jest
   pseudo-elementem, więc linia bazowa tekstu i znacznik nie mogą się
   rozjechać niezależnie od wysokości linii. */
.kora-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.kora-eyebrow .elementor-heading-title::before {
	content: '';
	flex: 0 0 auto;
	inline-size: 6px;
	block-size: 6px;
	background-color: var(--e-global-color-secondary, #C8F250);
}

/* ── Sekcja 14: okrągłe ikony przy metodach kontaktu ─────────────────
   W Figmie każda metoda ma kontener 76×76 z obrysem 1px i ikoną 26px.
   Ikona jako maska, więc dziedziczy kolor tekstu. */
.kora-contact-icon {
	border: 1px solid var(--e-global-color-korabglt, #F7F7F7);
	border-radius: 50%;
	position: relative;
	color: var(--e-global-color-korabglt, #F7F7F7);
}

.kora-contact-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--kora-contact-icon) no-repeat center;
	mask: var(--kora-contact-icon) no-repeat center;
	-webkit-mask-size: 26px auto;
	mask-size: 26px auto;
}

.kora-contact-icon--phone { --kora-contact-icon: url('../icons/phone.svg'); }
.kora-contact-icon--email { --kora-contact-icon: url('../icons/email.svg'); }

/* Blok wyśrodkowany w kolumnie (sekcja 10 - "Nasze produkty trafiają...").
   W makiecie ma 590 z 1204 i równe marginesy po obu stronach. */
.kora-center-block {
	margin-inline: auto;
}

/* Sekcja 13: pozycje FAQ mają w makiecie 890 z 1192 szerokości sekcji
   (74,66%) i są wyrównane do lewej. Akordeon to widget, więc szerokości
   nie da się ustawić kontrolką kontenera - robimy to tutaj. */
/* Elementor wymusza max-width:100% na widgetach regula o specyficznosci
   (0,4,0): ".e-con.e-con > .e-con-inner > .elementor-widget". Zeby ja przebic,
   potrzeba piatej klasy - stad ten dlugi selektor. */
.e-con.e-con > .e-con-inner > .elementor-widget.kora-faq {
	max-width: 74.66%;
}

@media (max-width: 1024px) {
	.e-con.e-con > .e-con-inner > .elementor-widget.kora-faq { max-width: 100%; }
}

/* ── Karuzele: kropki paginacji i odstęp od toru ─────────────────────
   Dotyczy obu karuzel (opinie i grupy odbiorców).

   Kolory: Swiper wygasza nieaktywne kropki do 20% krycia, a widget karuzeli
   nie ma kontrolki koloru aktywnej kropki - jego reguła "background:
   var(--e-n-carousel-dots-normal-color)" malowała wszystkie na ten sam
   #EFEFEF. Jak w makiecie: nieaktywne #EFEFEF w pełnym kryciu, aktywna
   #C8F250.

   Odstęp: Elementor trzyma kropki absolutnie ("top: 100%", "transform:
   translate(-50%)"), więc odstęp od toru dałoby się ustawić tylko zapasem
   paddingu w samym torze. W przepływie jest wprost marginesem. Transform
   trzeba zdjąć, bo działa również na elemencie statycznym i przesuwałby
   kropki o pół szerokości w lewo; wyśrodkowanie bierze na siebie
   "text-align: center" Swipera na pełnej szerokości.

   Selektor ma powtórzoną klasę, żeby wyjść na (0,4,0) i przebić regułę
   Elementora ".elementor-element.elementor-pagination-position-outside
   .swiper" - bez tego decydowałaby kolejność arkuszy. */
.elementor-widget.kora-carousel-widget.kora-carousel-widget .swiper-pagination-bullet {
	opacity: 1;
}

.elementor-widget.kora-carousel-widget.kora-carousel-widget .swiper-pagination-bullet-active {
	background: var(--e-global-color-secondary, #C8F250);
}

.elementor-widget.kora-carousel-widget.kora-carousel-widget .swiper {
	padding-block-end: 0;
}

.elementor-widget.kora-carousel-widget.kora-carousel-widget .swiper ~ .swiper-pagination {
	position: static;
	transform: none;
	inline-size: 100%;
	margin-block-start: var(--kora-dots-gap, 48px);
}

/* Odstępy z makiety: opinie 48px (karty kończą się na 639, blok paginacji
   zaczyna na 687), grupy odbiorców 32px (707 -> 739). */
.kora-carousel-audiences {
	--kora-dots-gap: 32px;
}

@media (max-width: 1024px) {
	.elementor-widget.kora-carousel-widget.kora-carousel-widget {
		--kora-dots-gap: 32px;
	}
}

/* ── Kolejność sterowania na tablecie i mobilce ──────────────────────
   Strzałki są osobnym widgetem stojącym w wierszu nagłówka, obok tytułu -
   układają się zwykłym flexem, więc nic tu nie pozycjonujemy ani nie
   przebijamy specyficzności Swipera (w karuzelach wbudowane strzałki są po
   prostu wyłączone).

   W makiecie mobilnej sterowanie stoi w osobnym rzędzie pod wstępem.
   Zamiast przenosić element, rozpuszczamy wiersz nagłówka przez
   "display: contents" - jego dzieci stają się pozycjami kontenera wyżej -
   i przestawiamy strzałki kolejnością. */
@media (max-width: 1024px) {
	/* Opinie: strzałki siedzą w wierszu nagłówka razem z tytułem, a mają
	   zejść pod wstęp. Rozpuszczamy wiersz przez "display: contents" - jego
	   dzieci stają się pozycjami kontenera wyżej - i przestawiamy strzałki
	   kolejnością. */
	.e-con.kora-reviews-headline {
		display: contents;
	}

	.kora-reviews-arrows {
		order: 1;
		inline-size: 100%;
	}

	/* Grupy odbiorców: wiersz nagłówka jest rodzeństwem karuzeli, więc
	   wystarczy przestawić go na kolumnę (robi to kontrolka kontenera) -
	   strzałki same lądują pod blokiem tekstu, nad karuzelą. */
	/* W makiecie mobilnej sterowanie stoi przy prawej krawędzi, obok
	   siebie, z odstępem 16px - nie rozsunięte na całą szerokość. */
	.kora-reviews-arrows .kora-carousel-arrows,
	.kora-audiences-arrows .kora-carousel-arrows {
		justify-content: flex-end;
	}
}

/* ── Sekcja 13: FAQ ──────────────────────────────────────────────────
   W makiecie pozycja to: pytanie, 32px, linia #BEC0CB, 32px, kolejne
   pytanie. Znacznik rozwijania stoi przy prawej krawędzi listy i jest
   cienkim krzyżykiem 21x21 z kresek 1px - nie ciężkim glifem
   FontAwesome, który Elementor wstawia domyślnie. Glif chowamy, a kreski
   rysujemy sami; znaczniki ikony muszą zostać włączone w widgecie, bo bez
   nich Elementor nie wyrenderuje kontenera. */
.kora-faq .elementor-accordion .elementor-accordion-item {
	border: 0;
	border-block-end: 1px solid #BEC0CB;
	padding-block-end: 32px;
}

.kora-faq .elementor-accordion .elementor-accordion-item + .elementor-accordion-item {
	margin-block-start: 32px;
}

/* Wiersz pytania: tekst z lewej, znacznik dosunięty do prawej krawędzi.
   Zamiast float-a Elementora używamy flexa - inaczej znacznik nie da się
   wyrównać w pionie do linii tekstu. */
.kora-faq .elementor-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0;
	font-weight: inherit;
	line-height: inherit;
}

/* Znacznik jest w znacznikach PRZED tekstem pytania - dlatego Elementor
   przesuwa go float-em. W układzie flex trzeba go przestawić kolejnością,
   inaczej "margin-inline-start: auto" spycha w prawo także tekst.

   Selektor powtarza klasę wyrównania, bo reguła Elementora z "float: right"
   ma specyficzność (0,4,0) - bez tego decydowałaby kolejność arkuszy. */
.kora-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right,
.kora-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	float: none;
	order: 1;
	flex: 0 0 auto;
	margin-inline-start: auto;
	inline-size: 21px;
	block-size: 21px;
}

.kora-faq .elementor-accordion-icon svg {
	display: none;
}

.kora-faq .elementor-accordion-icon-closed,
.kora-faq .elementor-accordion-icon-opened {
	position: relative;
	inline-size: 21px;
	block-size: 21px;
}

.kora-faq .elementor-accordion-icon-closed::before,
.kora-faq .elementor-accordion-icon-closed::after,
.kora-faq .elementor-accordion-icon-opened::before {
	content: '';
	position: absolute;
	background: #363E3B;
}

/* kreska pozioma - wspólna dla „+" i „−" */
.kora-faq .elementor-accordion-icon-closed::before,
.kora-faq .elementor-accordion-icon-opened::before {
	inset-block-start: 10px;
	inset-inline: 0;
	block-size: 1px;
}

/* kreska pionowa - tylko w „+" */
.kora-faq .elementor-accordion-icon-closed::after {
	inset-inline-start: 10px;
	inset-block: 0;
	inline-size: 1px;
}

/* Odpowiedź: bez kreski od Elementora, wcięcie tylko od góry - linia pod
   pozycją zostaje na samym dole, pod rozwiniętą treścią. */
.kora-faq .elementor-accordion .elementor-tab-content {
	border: 0;
	padding: 16px 0 0;
}

/* ── Sekcja 14: kontakt ──────────────────────────────────────────────
   Numer telefonu i adres e-mail są odnośnikami, a zestaw stylów nadaje
   odnośnikom kolor "primary" (#033222) - dokładnie taki, jak tło sekcji,
   więc znikały. Reguła na samym odnośniku bije dziedziczenie koloru z
   widgetu niezależnie od specyficzności, dlatego trzeba ją nadpisać
   wprost. */
.kora-footer-contact a {
	color: inherit;
}

/* W makiecie pole to sama kreska pod spodem - bez ramki, tła i wcięcia
   poziomego. Placeholder siedzi wprost nad linią, wcięcie 10px od góry
   i dołu. Wysokości: wiadomość 105px, pozostałe 45px. */
.kora-form .elementor-field-textual {
	padding-inline: 0;
	padding-block: 10px;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	block-size: 45px;
}

.kora-form .elementor-field-textual::placeholder {
	color: #033222;
	opacity: 1;
}

/* Fokus: Elementor Pro rysuje wtedy wewnętrzną ramkę (box-shadow inset 1px)
   dookoła pola - zbędna przy samej kresce. Aktywne pole sygnalizuje
   ciemnozielona dolna linia zamiast szarej. */
.kora-form .elementor-field-group .elementor-field-textual:focus {
	box-shadow: none;
	outline: none;
}

/* kolor ramki ustawia widget regułą (0,6,0) - stąd dłuższy selektor */
.elementor-element.elementor-widget-form.kora-form .elementor-field-group .elementor-field.elementor-field-textual:focus {
	border-block-end-color: var(--kora-zielen, #033222);
}

.kora-form textarea.elementor-field-textual {
	block-size: 105px;
	min-block-size: 105px;
	resize: none;
}

/* Zgoda RODO zostaje, choć w makiecie jej nie ma - jest wymagana. Trzymamy
   ją dyskretnie: mniejszy tekst i odstęp 32px przed przyciskiem, jak w
   makiecie między ostatnim polem a przyciskiem (16px z row_gap + 16px). */
.kora-form .elementor-field-type-acceptance {
	font-size: 15px;
	line-height: 22px;
}

.kora-form .elementor-field-type-submit {
	margin-block-start: 16px;
	justify-content: flex-start;
}

/* W makiecie przycisk ma 87x43 przy etykiecie 47px - czyli szerokość
   treści plus 20px z każdej strony, nie pełną szerokość formularza.
   Kontrolka "button_align" nie wygenerowała żadnej reguły, więc robimy to
   wprost. */
.kora-form .elementor-field-type-submit .elementor-button {
	inline-size: auto;
	flex: 0 0 auto;
	padding: 9px 20px;
}

/* ── Widok mobilny: poprawki wobec makiety 390px ─────────────────────*/
@media (max-width: 1024px) {
	/* Nagłówek: w makiecie kolejność to logo, przycisk „Zadzwoń", hamburger.
	   W znacznikach menu stoi przed przyciskiem, więc przestawiamy je
	   kolejnością zamiast ruszać strukturę. */
	.kora-header__cta-short {
		order: -1;
	}

	/* Zdjęcie hero: proporcja z makiety (350x250) zamiast sztywnej
	   wysokości - kadr skaluje się z szerokością ekranu. Zaokrąglenie
	   nadajemy wprost zdjęciu (góra) i blokowi treści (dół), jak w
	   makiecie - nie polegamy na przycinaniu przez kontener, bo obraz z
	   własną proporcją potrafi się spod niego wysunąć. */
	.kora-hero__image img {
		aspect-ratio: 350 / 250;
		border-start-start-radius: 12px;
		border-start-end-radius: 12px;
	}

	.elementor-element.e-con.kora-hero__content {
		border-end-start-radius: 12px;
		border-end-end-radius: 12px;
	}

	/* Hamburger: Elementor daje mu domyślnie szare tło i zaokrąglenie 3px.
	   W makiecie to sama ikona na białym. */
	.kora-header__nav .elementor-menu-toggle,
	.kora-header__nav .elementor-menu-toggle:hover,
	.kora-header__nav .elementor-menu-toggle:focus {
		background-color: transparent;
		border-radius: 0;
		padding: 0;
	}

	/* Nagłówek łamał się na dwa wiersze. Elementor przy ≤767px wymusza
	   KAŻDEMU kontenerowi "--width: 100%" i "flex-wrap: wrap" regułą
	   ".e-con.e-flex" (0,2,0), a szerokość "fit-content" grupy przycisków
	   trafia - przez min_affected_device - do @media(min-width:768px),
	   więc na mobilce nie obowiązuje. Grupa brała wtedy pełną szerokość
	   i spychała się pod logo. Przywracamy jej szerokość treści i blokujemy
	   zawijanie samego nagłówka. */
	.elementor-element.e-con.kora-header {
		--flex-wrap: nowrap;
	}

	.elementor-element.e-con.kora-header__actions {
		--width: auto;
		flex: 0 0 auto;
	}

	/* Rozwijane menu: z włączonym "full_width" Elementor nadaje mu
	   "position: absolute", więc nie rozpycha już nagłówka.

	   Panel wisi na widgecie menu (Elementor daje każdemu widgetowi
	   "position: relative"), a nie na nagłówku - i nie da się tego
	   przenieść, bo skrypt rozciągający liczy poziome przesunięcie
	   względem bieżącego bloku zawierającego. Odstęp do dolnej krawędzi
	   nagłówka zmienia się przy przewijaniu, bo przyklejony nagłówek
	   zmniejsza padding z 25 na 16px - stały margines zostawiał wtedy
	   widoczną szparę.

	   Dlatego zamiast marginesu panel dostaje stałe odsunięcie od góry
	   widgetu - 56px trafia w dolną krawędź nagłówka. */
	.kora-header__nav .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		inset-block-start: 56px;
		margin-block-start: 0;
		padding-block: 16px;
		background-color: #FFFFFF;
		box-shadow: 0 16px 32px rgba(3, 50, 34, .12);
	}

	.kora-header__nav .elementor-nav-menu--dropdown .elementor-item {
		padding-inline: 20px;
	}
}

/* ── Karuzela opinii na mobilce: zapowiedź kolejnej karty ────────────
   W makiecie karta ma 282 z 350px szerokości treści, a kolejna wystaje
   zza prawej krawędzi (odstęp 24px). Elementor pozwala ustawić tylko
   całkowitą liczbę kart na widok, więc zapowiedź robimy wcięciem toru:
   Swiper liczy szerokość karty z pola treści, a przycina dopiero na
   krawędzi pudełka - kolejna karta wchodzi więc w to wcięcie.
   68 / 350 = 19,43%, żeby proporcja trzymała się na każdej szerokości. */
@media (max-width: 767px) {
	.elementor-widget.kora-carousel-reviews.kora-carousel-reviews .swiper {
		padding-inline-end: 19.43%;
	}
}

/* ══ Strona główna w Elementorze V4 ══════════════════════════════════
   Elementy V4 renderują się bez wrapperów (nagłówek to samo <h2>,
   przycisk to samo <a>), a klasy globalne trafiają do HTML pod swoją
   nazwą. Tu zostają wyłącznie pseudoelementy - wszystko inne (układ,
   kolory, typografia, ikony jako zmienne) siedzi w klasach i stylach
   elementów V4, edytowalnych w panelu Elementora. */

/* Etykieta sekcji: kwadracik przed tekstem. */
.kora-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	inline-size: 6px;
	block-size: 6px;
	background-color: var(--kora-limonka, #C8F250);
}

/* Przycisk tekstowy z ukośną strzałką (kolor = kolor tekstu).
   15px = odstęp 10px z makiety + 5px, które V3 dokładał między etykietą
   a ikoną - szerokość przycisku zostaje taka jak dotąd. */
.kora-btn--arrow::after {
	content: '';
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 14px;
	margin-inline-start: 15px;
	background-color: currentColor;
	-webkit-mask: var(--kora-arrow) no-repeat center / contain;
	mask: var(--kora-arrow) no-repeat center / contain;
	transition: transform .2s ease;
}

.kora-btn--arrow:hover::after {
	transform: translate(2px, -2px);
}

/* Cechy produktu: ikona z klasy kora-feat--* (zmienna --kora-feat-icon). */
.kora-feat::before {
	content: '';
	flex: 0 0 auto;
	inline-size: 24px;
	block-size: 24px;
	background-color: currentColor;
	-webkit-mask: var(--kora-feat-icon) no-repeat center / contain;
	mask: var(--kora-feat-icon) no-repeat center / contain;
}

@media (prefers-reduced-motion: reduce) {
	.kora-btn--arrow::after { transition: none; }
	.kora-btn--arrow:hover::after { transform: none; }
}

/* ── Podstrona Accoya (V4) ───────────────────────────────────────────── */

/* Wyróżnienie na początku punktu listy (limonkowe pogrubienie z makiety). */
.kora-highlight strong {
	color: var(--kora-limonka, #C8F250);
	font-weight: 700;
}

.kora-highlight a,
.kora-table-cell a,
.kora-benefit a,
.kora-underline-links a,
.kora-contact-link a {
	/* zestaw nadaje każdemu <a> typografię tekstu (17px) - link ma
	   dziedziczyć krój z akapitu, np. 20px w danych kontaktowych */
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* FAQ na natywnym akordeonie V4 (<details>/<summary>): cienki plus 21x21
   zamiast domyślnego szewronu; po rozwinięciu zostaje sama pozioma kreska. */
.kora-faq-v4__header {
	list-style: none;
}

.kora-faq-v4__header::-webkit-details-marker {
	display: none;
}

.kora-faq-v4__icon > * {
	display: none;
}

.kora-faq-v4__icon::before,
.kora-faq-v4__icon::after {
	content: '';
	position: absolute;
	background: var(--kora-tekst-pomocniczy, #363E3B);
}

.kora-faq-v4__icon::before {
	inset-block-start: 10px;
	inset-inline: 0;
	block-size: 1px;
}

.kora-faq-v4__icon::after {
	inset-inline-start: 10px;
	inset-block: 0;
	inline-size: 1px;
}

.elementor details[open] .kora-faq-v4__icon {
	transform: none;
}

details[open] > .kora-faq-v4__header .kora-faq-v4__icon::after {
	display: none;
}

/* ── Podstrona Kontakt (V4) ──────────────────────────────────────────── */

/* Numery telefonów w tabeli działu sprzedaży i w adresie - bez
   podkreślenia, w kolorze akapitu (nadpisuje .kora-table-cell a). */
.kora-plain-links a {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

/* Pinezka nad adresem: dwukolorowa (limonkowa kropka), więc tło, nie maska.
   W makiecie ramka ikony ma 51x75, kontur zaczyna się 10px od góry. */
.kora-address-icon {
	background: url('../icons/pin.svg') no-repeat center / contain;
}

/* Mapa dojazdu (widget google_maps V3 w kolumnie V4): proporcje
   i zaokrąglenie zrzutu z Figmy (578x400) zamiast stałej wysokości. */
.elementor-widget-google_maps.kora-map .elementor-custom-embed {
	border-radius: 12px;
	overflow: hidden;
}

.elementor-widget-google_maps.kora-map iframe {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 578 / 400;
}

/* ── Podstrona Elewacja z drewna (V4) ───────────────────────────────── */

/* Cechy gatunku na białej karcie: ikony w zieleni marki, tekst czarny. */
.kora-callout .kora-feat::before {
	background-color: var(--kora-zielen, #033222);
}

/* ── Produkt Kantówka (V4): tabela przekrojów i dostępności ───────────
   Widget HTML V3 w kolumnie V4. Na wąskich ekranach tabela przewija się
   w poziomie wewnątrz białej karty, strona nie dostaje poziomego paska. */
.kora-avail__scroll {
	overflow-x: auto;
	border-radius: 12px;
	background-color: var(--kora-bialy, #FFFFFF);
}

.kora-avail .kora-avail__table {
	inline-size: 100%;
	min-inline-size: 760px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 17px;
	line-height: 25px;
	color: var(--kora-czarny, #000000);
}

.kora-avail__table caption {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.kora-avail .kora-avail__table th,
.kora-avail .kora-avail__table td {
	padding: 14px 12px;
	border: 0;
	border-block-end: 1px solid var(--kora-linia, #D9D9D9);
	background: none;
	text-align: center;
	vertical-align: middle;
}

.kora-avail .kora-avail__table th {
	font-weight: 500;
	white-space: nowrap;
}

.kora-avail .kora-avail__table tbody th {
	text-align: start;
	padding-inline-start: 24px;
}

.kora-avail .kora-avail__table tbody tr:last-child > * {
	border-block-end: 0;
}

.kora-avail__x {
	color: var(--kora-zielen, #033222);
}

.kora-avail__o {
	color: var(--kora-tekst-pomocniczy, #363E3B);
}

.kora-avail .kora-avail__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--kora-tekst-pomocniczy, #363E3B);
}

/* Nazwa gatunku zostaje na miejscu przy poziomym przewijaniu tabeli. */
.kora-avail .kora-avail__table tbody th,
.kora-avail .kora-avail__table thead tr:first-child th:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background-color: var(--kora-bialy, #FFFFFF);
}

/* ── Produkt Deska tarasowa (V4) ─────────────────────────────────────── */

/* Strzałka listy na jasnym tle (bazowa .kora-diff-icon jest biała). */
.kora-diff-icon--dark::before {
	background-color: var(--kora-zielen, #033222);
}

/* Krótka tabela (3 kolumny) - mieści się na telefonie bez przewijania. */
.kora-avail--compact .kora-avail__table {
	min-inline-size: 0;
}

@media (max-width: 767px) {
	.kora-avail--compact .kora-avail__table th,
	.kora-avail--compact .kora-avail__table td {
		padding: 12px 8px;
		white-space: normal;
		font-size: 15px;
		line-height: 22px;
	}

	.kora-avail--compact .kora-avail__table tbody th {
		padding-inline-start: 16px;
	}
}

/* ── Karuzela przewijana na mobilce (kora-snap) ─────────────────────
   Siatka kart staje się poziomym torem z przyciąganiem (karta 348px,
   odstęp 36px - makieta mobilna Accoya 596:3073). Kropki dokłada
   script.js (.kora-snap-dots) i podświetla kartę przy lewej krawędzi.
   Klasa jest powtórzona, żeby przebić lokalny styl siatki elementu V4. */
@media (max-width: 767px) {
	.kora-snap.kora-snap {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(348px, 89vw);
		gap: 36px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.kora-snap.kora-snap > * { scroll-snap-align: start; }
	.kora-snap::-webkit-scrollbar { display: none; }
}

.kora-snap-dots {
	display: none;
	justify-content: center;
	gap: 10px;
}

@media (max-width: 767px) {
	.kora-snap-dots { display: flex; }
}

.kora-snap-dots button,
.kora-snap-dots button:hover,
.kora-snap-dots button:focus {
	inline-size: 11px;
	block-size: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--kora-obramowanie, #EFEFEF);
	cursor: pointer;
}

.kora-snap-dots button[aria-current="true"] {
	background-color: var(--kora-limonka, #C8F250);
}

/* Kropki karuzel Elementora na mobilce: 11px co 21px jak w makiecie -
   przy domyślnym odstępie 12 kropek opinii nie mieściło się w wierszu. */
@media (max-width: 767px) {
	.elementor-widget.kora-carousel-widget.kora-carousel-widget .swiper-pagination-bullet {
		margin-inline: 5px;
	}
}

/* ── Stopka: listy linków ────────────────────────────────────────────
   W makietach (Gatunki 520:1656, Accoya mobile 596:3073) pozycje list
   idą co 29px (wiersz 25 + 4), a nie z 25px marginesem akapitu V3.
   Dział sprzedaży zostaje z pełnym odstępem między osobami. */
.kora-footer .elementor-element-k000007 p,
.kora-footer .elementor-element-k00000c p,
.kora-footer .elementor-element-k00000f p {
	margin-block-end: 4px;
}

/* Telefon i e-mail mają w makiecie 20/24 jak akapit widgetu, a zestaw
   nadaje każdemu <a> typografię tekstu (17px). Imiona handlowców są
   limonkowe, numery pod nimi białe (pierwsza linia akapitu). Kreska nad
   stopką oddziela ją od ciemnej sekcji kontaktowej. */
.kora-footer .elementor-element-k000007 a {
	font: inherit;
}

.kora-footer .elementor-element-k000009 p::first-line {
	color: var(--kora-limonka, #C8F250);
}

.kora-footer {
	border-block-start: 1px solid rgba(247, 247, 247, 0.2);
}

/* „Elewacja drewniana” ma w makiecie dokładnie szerokość kolumny (159px) -
   przy minimalnie innym renderze czcionki zawijała się do dwóch linii. */
.kora-footer .elementor-element-k00000f p {
	white-space: nowrap;
}

/* Na tablecie i mobilce „Menu” i „Produkty” stoją obok siebie (makieta
   mobilna: Produkty od 198px, czyli Menu 40% + odstęp 40px). Reguła
   kora-fluid wyżej ustawia kolumnom 100% z (0,4,0) - stąd id elementów. */
@media (max-width: 1024px) {
	.kora-footer .elementor-element.elementor-element.e-con.kora-fluid.elementor-element-k00000e {
		--width: 40%;
	}

	.kora-footer .elementor-element.elementor-element.e-con.kora-fluid.elementor-element-k000011 {
		--width: auto;
		--flex-grow: 1;
		flex: 1 1 0;
	}
}

/* Łamanie wiersza tylko na większych ekranach (np. „O firmie / Kora Timber”,
   nazwy kafelków) - w makietach mobilnych te teksty idą jednym wierszem. */
@media (max-width: 767px) {
	.kora-br-desktop br { display: none; }
}

/* Mapa na mobilce: proporcje z makiety Kontakt 602:6441 (338 x 322). */
@media (max-width: 767px) {
	.elementor-widget-google_maps.kora-map iframe {
		aspect-ratio: 338 / 322;
	}
}

/* ── Nagłówek: rozwijane podmenu (np. Produkty) ──────────────────────
   Bez makiety - dopasowane do stylu strony: biała karta 12px z cieniem
   jak panel menu mobilnego, pozycje z jasnym tłem i limonkowym
   kwadracikiem etykiet (kora-eyebrow) po najechaniu / na bieżącej stronie.
   Elementor Pro maluje hover na #3F444B regułą (0,2,1), a kolor pozycji
   ustawia widget regułą (0,4,1) - stąd dłuższe selektory. */
.kora-header__nav .sub-arrow .e-font-icon-svg {
	display: none;
}

.kora-header__nav .sub-arrow::after {
	content: '';
	inline-size: 10px;
	block-size: 6px;
	margin-inline-start: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .2s ease;
}

.kora-header__nav .elementor-item.highlighted .sub-arrow::after,
.kora-header__nav .elementor-nav-menu--main .menu-item-has-children:hover > .elementor-item .sub-arrow::after {
	transform: rotate(180deg);
}

/* Karta podmenu na desktopie */
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
	min-inline-size: 260px;
	padding: 8px;
	border: 1px solid var(--kora-obramowanie, #EFEFEF);
	border-radius: 12px;
	background-color: var(--kora-bialy, #FFFFFF);
	box-shadow: 0 16px 32px rgba(3, 50, 34, .12);
	/* odsunięcie od menu; SmartMenus ustawia pozycję i marginesy w stylu
	   inline, dlatego przesunięcie idzie osobną właściwością translate */
	translate: 0 14px;
}

/* niewidoczny mostek nad kartą - kursor przechodzący przez szczelinę
   nie opuszcza podmenu, więc lista się nie zamyka */
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	block-size: 16px;
}

.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item {
	gap: 10px;
	padding: 10px 16px;
	border-inline-start: 0;
	border-radius: 8px;
	color: var(--kora-tekst, #00140C);
	font-size: 17px;
	line-height: 25px;
	transition: background-color .2s ease, color .2s ease;
}

.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item::before {
	content: '';
	flex: 0 0 auto;
	inline-size: 6px;
	block-size: 6px;
	background-color: var(--kora-limonka, #C8F250);
	opacity: 0;
	transition: opacity .2s ease;
}

.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
	background-color: var(--kora-tlo-jasne, #F7F7F7);
	color: var(--kora-zielen, #033222);
}

.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item:hover::before,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible::before,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active::before {
	opacity: 1;
}

/* Menu mobilne (hamburger): podpozycje bez karty, z wcięciem pod rodzicem */
@media (max-width: 1024px) {
	.kora-header__nav .elementor-nav-menu--dropdown .sub-menu {
		padding-block-end: 8px;
	}

	.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
		margin-inline: 12px;
		padding-inline: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kora-header__nav .sub-arrow::after,
	.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item,
	.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item::before {
		transition: none;
	}
}

/* Menu mobilne: rozwinięty / wskazany rodzic bez szarego tła Elementora */
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:hover,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus-visible,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item.highlighted,
.kora-header__nav.elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
	background-color: transparent;
	color: var(--kora-zielen, #033222);
}

/* ── Przewijanie do kotwic (np. /#produkty) ──────────────────────────
   Przyklejony nagłówek zasłaniał początek sekcji - na desktopie cel
   zatrzymuje się 100px niżej. Elementor przewija do kotwic natywnie,
   więc wystarcza scroll-padding (działa też przy wejściu z innej strony). */
@media (min-width: 1025px) {
	html {
		scroll-padding-top: 100px;
	}
}