/* ORNAMENT - style motywu.
   Czesc 1: uklad, naglowek, mega menu, szuflada mobilna, stopka.
   Wartosci wprost z ekranow Claude Design; tokeny z tokens/. */

/* ---------------------------------------------------------- uklad ogolny */

.orn-wrap { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }

.orn-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	padding: 12px 20px; background: var(--action); color: var(--text-inverse);
	border-radius: 0 0 var(--radius-input) 0; font-weight: 600;
}
.orn-skip:focus { left: 0; }

/* ------------------------------------------------------------- naglowek */

.orn-header {
	position: relative; z-index: 50;
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-divider);
}
.orn-header__inner {
	width: min(1280px, calc(100% - 48px)); margin-inline: auto;
	height: 88px; display: flex; align-items: center; gap: 40px;
}
.orn-header__logo { flex: none; display: block; padding: 4px 0; }
.orn-header__logo img { height: 26px; width: auto; }

.orn-nav { display: flex; align-items: center; gap: 28px; }

/* Nazwa dzialu jest odnosnikiem, strzalka osobnym przyciskiem, ale czytaja sie
   jako jedna pozycja menu. Bez tego span byl elementem liniowym, a oba dzieci
   blokami: strzalka spadala pod napis i naglowek sie rozjezdzal. */
.orn-nav__dzial { display: inline-flex; align-items: center; gap: 4px; }
.orn-nav__dzial:hover .orn-nav__link--dzial,
.orn-nav__dzial:hover .orn-nav__toggle { color: var(--action); }
.orn-nav__dzial .orn-nav__toggle { padding: 6px 0 6px 2px; }

.orn-nav__link,
.orn-nav__toggle {
	display: flex; align-items: center; gap: 6px;
	border: 0; background: transparent; cursor: pointer;
	font-family: var(--font-ui); font-size: 14px; font-weight: 600;
	color: var(--text-body); letter-spacing: .02em; padding: 6px 0;
	text-decoration: none;
}
.orn-nav__link:hover, .orn-nav__toggle:hover,
.orn-nav__toggle[aria-expanded="true"] { color: var(--action); text-decoration: none; }
.orn-nav__toggle svg { transition: transform var(--dur-fast) var(--ease); }
.orn-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* szukajka */
.orn-search {
	flex: 1; display: flex; align-items: center; gap: 10px;
	height: 44px; padding: 0 6px 0 16px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-pill);
	max-width: 360px; margin-left: auto;
}
.orn-search__label {
	flex: none; font-size: 11px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted);
}
.orn-search__input {
	flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
	font-family: var(--font-ui); font-size: 14px; color: var(--text-body); padding: 0;
}
.orn-search__submit {
	flex: none; width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: var(--radius-pill); background: var(--action); cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.orn-search__submit:hover { background: var(--action-hover); }

/* ikony po prawej */
.orn-header__icons { flex: none; display: flex; align-items: center; gap: 4px; }
.orn-iconbtn {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius-pill); color: var(--oberzyna);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-iconbtn:hover { background: var(--surface-tint); color: var(--action); text-decoration: none; }
.orn-cartlink {
	height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
	border-radius: var(--radius-pill); color: var(--oberzyna);
	font-size: 14px; font-weight: 600;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-cartlink:hover { background: var(--surface-tint); color: var(--action); text-decoration: none; }
.orn-cartlink__licznik {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: var(--radius-pill); background: var(--action);
	color: var(--text-inverse); font-size: 12px; font-weight: 600;
}

/* hamburger - widoczny tylko mobilnie */
.orn-burger {
	display: none;
	width: 44px; height: 44px; align-items: center; justify-content: center;
	border: 0; background: transparent; border-radius: var(--radius-pill);
	color: var(--oberzyna); cursor: pointer;
}
.orn-burger__close { display: none; }
.orn-burger[aria-expanded="true"] .orn-burger__open { display: none; }
.orn-burger[aria-expanded="true"] .orn-burger__close { display: block; }

/* ------------------------------------------------------------ mega menu */

.orn-mega {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-divider);
	box-shadow: var(--shadow-2);
}
.orn-mega__inner {
	width: min(1280px, calc(100% - 48px)); margin-inline: auto;
	padding: 40px 0 0;
	display: grid; grid-template-columns: repeat(4, 1fr) 264px; gap: 44px;
}
.orn-mega__eyebrow {
	font-size: 11px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted); margin: 0 0 12px;
}
.orn-mega__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.orn-mega__lista a {
	display: block; font-size: 14px; font-weight: 500;
	color: var(--text-body); padding: 8px 0;
}
.orn-mega__lista a:hover { color: var(--action); text-decoration: none; }
.orn-mega__extra {
	margin-top: 12px; padding-top: 12px;
	border-top: 1px solid var(--border-divider);
	display: flex; flex-direction: column;
}
.orn-mega__extra a {
	display: block; font-size: 14px; font-weight: 500;
	color: var(--text-body); padding: 8px 0;
}
.orn-mega__extra a:hover { color: var(--action); text-decoration: none; }
.orn-mega__wszystkie {
	display: inline-flex !important; align-items: center; gap: 8px;
	font-weight: 600 !important; color: var(--action) !important;
}
.orn-mega__wszystkie:hover { color: var(--action-hover) !important; }

.orn-mega__promo { display: flex; flex-direction: column; gap: 10px; color: var(--text-body); }
.orn-mega__promo:hover { color: var(--action); text-decoration: none; }
.orn-mega__promo-obraz { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; }
.orn-mega__promo-obraz img { width: 100%; aspect-ratio: 450 / 617; object-fit: cover; display: block; }
.orn-mega__promo-plakietka {
	position: absolute; left: 10px; top: 10px;
	display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
	border-radius: var(--radius-pill); background: var(--surface-cream);
	color: var(--text-brand); font-size: 11px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.orn-mega__promo-nazwa { display: block; font-size: 14px; font-weight: 500; line-height: 1.45; }
.orn-mega__promo-cena { display: block; font-size: 15px; font-weight: 600; color: var(--text-brand); }

.orn-mega__tagi {
	width: min(1280px, calc(100% - 48px)); margin: 32px auto 0;
	display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden;
	padding: 16px 0 20px; border-top: 1px solid var(--border-divider);
}
.orn-mega__tagi .orn-mega__eyebrow { margin: 0 6px 0 0; flex: none; }

.orn-tag {
	flex: none; display: inline-flex; align-items: center; white-space: nowrap;
	min-height: 36px; padding: 0 18px;
	border-radius: var(--radius-pill); background: var(--surface-paper);
	border: 1px solid var(--border-divider);
	font-size: 13px; font-weight: 600; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-tag:hover { border-color: var(--action); color: var(--action); text-decoration: none; }
.orn-tag--maly { min-height: 30px; padding: 0 14px; font-size: 12px; font-weight: 500; background: var(--surface-page); }

/* menu papeterii */
.orn-pap__inner {
	width: min(1280px, calc(100% - 48px)); margin-inline: auto;
	padding: 40px 0 44px;
	display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: stretch;
}
.orn-pap__kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.orn-pap__kafel {
	position: relative; overflow: hidden; display: flex; min-height: 168px;
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 22px 24px; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-pap__kafel:hover { border-color: var(--action); color: var(--action); text-decoration: none; }
.orn-pap__kolo {
	position: absolute; right: -38px; top: -46px; width: 150px; height: 150px;
	border-radius: 50%; background: var(--brzoskwinia); opacity: .4;
}
.orn-pap__arkada {
	position: absolute; right: 34px; top: -58px; width: 94px; height: 150px;
	border-radius: var(--radius-arch); background: var(--krem); opacity: .65;
}
.orn-pap__kafel-dol {
	position: relative; display: flex; align-items: center; justify-content: space-between;
	width: 100%; gap: 16px; margin-top: auto;
}
.orn-pap__nazwa {
	font-family: var(--font-display); font-size: 27px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading); line-height: 1.15;
}
.orn-pap__bok {
	border-left: 1px solid var(--border-divider); padding-left: 48px;
	display: flex; flex-direction: column; justify-content: center;
	align-items: flex-start; gap: 20px;
}
.orn-pap__bok p { font-size: 15px; line-height: 1.65; color: var(--text-body); margin: 0; }

/* ------------------------------------------------------ szuflada mobilna */

.orn-mobile {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
	background: rgba(77, 48, 63, .30);
	min-height: calc(100vh - 60px);
}
.orn-mobile__panel {
	width: min(336px, 88vw); min-height: calc(100vh - 60px);
	display: flex; flex-direction: column;
	background: var(--surface-page); box-shadow: var(--shadow-2);
	padding: 16px 16px 24px; overflow-y: auto;
}
.orn-search--mobile { max-width: none; margin: 0 0 8px; height: 48px; }
.orn-search--mobile .orn-search__submit { width: 36px; height: 36px; }

.orn-mobile__acc {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; min-height: 48px;
	border: 0; border-bottom: 1px solid var(--border-divider);
	background: transparent; cursor: pointer;
	font-family: var(--font-ui); font-size: 15px; font-weight: 600;
	color: var(--text-body); padding: 0 4px; text-align: left;
}
.orn-mobile__acc svg { transition: transform var(--dur-fast) var(--ease); }
.orn-mobile__acc[aria-expanded="true"] svg { transform: rotate(180deg); }

.orn-mobile__tresc {
	padding: 14px 4px 10px; border-bottom: 1px solid var(--border-divider);
	display: flex; flex-direction: column; gap: 16px;
}
.orn-mobile__grupa .orn-mega__eyebrow { margin-bottom: 2px; }
.orn-mobile__link {
	display: flex; align-items: center; min-height: 44px;
	font-size: 14px; font-weight: 500; color: var(--text-body); padding: 0 8px;
}
.orn-mobile__link:hover { color: var(--action); text-decoration: none; }
.orn-mobile__link--akcent { gap: 8px; font-weight: 600; color: var(--action); }
.orn-mobile__extra { border-top: 1px solid var(--border-divider); padding-top: 6px; display: flex; flex-direction: column; }
.orn-mobile__poziom {
	display: flex; align-items: center; min-height: 48px;
	border-bottom: 1px solid var(--border-divider);
	font-size: 15px; font-weight: 600; color: var(--text-body); padding: 0 4px;
}
.orn-mobile__poziom:hover { color: var(--action); text-decoration: none; }

/* blokada przewijania tla przy otwartej szufladzie */
body.orn-menu-otwarte { overflow: hidden; }

/* --------------------------------------------------------------- stopka */

.orn-footer { background: var(--surface-paper); border-top: 1px solid var(--border-divider); }
.orn-footer__siatka {
	width: min(1280px, calc(100% - 48px)); margin-inline: auto;
	padding: 64px 0 40px;
	display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px;
}
/* Znak w stopce ma byc podpisem marki, a nie przypisem. Logotyp na 22 px
   przy kolumnach linkow po 13 px ginal calkowicie, a tagline pod nim byl
   ledwie widoczny. Wieksza skala, wyrazniejszy kolor, wiecej powietrza. */
.orn-footer__logo { height: 40px; width: auto; margin-bottom: 18px; }
.orn-footer__tagline {
	font-family: var(--font-display); font-size: 17px; color: var(--text-brand);
	text-transform: uppercase; letter-spacing: var(--tracking-tagline);
	padding-left: var(--tracking-tagline); margin: 0 0 12px;
}
.orn-footer__kreska {
	display: block; width: 56px; height: 1px; background: var(--sliwka);
	opacity: .45; margin: 0 0 20px;
}
.orn-footer__opis { font-size: 13px; line-height: 1.7; color: var(--text-muted); max-width: 42ch; margin: 0; }
.orn-footer__kolumna h3 {
	font-family: var(--font-ui); font-size: 12px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted); margin: 0 0 16px;
}
.orn-footer__linki { display: flex; flex-direction: column; gap: 12px; }
.orn-footer__linki a { font-size: 14px; font-weight: 500; color: var(--text-body); }
.orn-footer__linki a:hover { color: var(--action); text-decoration: none; }
.orn-footer__tagi { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-footer__pasek {
	width: min(1280px, calc(100% - 48px)); margin-inline: auto;
	padding: 24px 0 32px; border-top: 1px solid var(--border-divider);
}
.orn-footer__pasek p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ------------------------------------------------------------ responsywnie */

@media (max-width: 1023px) {
	/* Naglowek jedzie z trescia. Na telefonie droga powrotna na gore strony
	   jest dluga, a menu, szukajka i koszyk to trzy najczestsze ruchy, wiec
	   pasek zostaje pod palcem. Na duzym ekranie nie przyklejamy: 88 px
	   paska zabieraloby wysokosc, ktora tam akurat pracuje na zdjecia.
	   z-index: 50 jest juz w regule bazowej, a szuflada menu wisi na
	   naglowku (top: 100%), wiec przykleja sie razem z nim. */
	.orn-header { position: sticky; top: 0; }
	/* Odnosnik "Przejdz do tresci" i kotwice nie moga wpasc pod pasek. */
	#tresc, :target { scroll-margin-top: 72px; }
	.orn-header__inner { height: 60px; gap: 0; justify-content: space-between; width: calc(100% - 24px); }
	.orn-burger { display: flex; }
	.orn-nav, .orn-header .orn-search { display: none; }
	.orn-header__logo img { height: 20px; }
	.orn-header__icons .orn-cartlink { padding: 0; width: 44px; justify-content: center; position: relative; }
	.orn-cartlink__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.orn-cartlink__licznik {
		position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px;
		padding: 0 4px; font-size: 10px; border: 2px solid var(--surface-page);
	}
	.orn-mega { display: none !important; } /* desktopowe panele nie graja na mobile */

	.orn-footer__siatka { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 32px; }
}

@media (min-width: 1024px) {
	.orn-mobile { display: none !important; }
}

/* Pasek administratora WordPressa jest przyklejony dopiero powyzej 782 px;
   nizej stoi w tresci i odjezdza razem z nia. Tylko w tym oknie naglowek
   musi zaczynac sie pod nim, inaczej wjezdza mu pod spod. */
@media (min-width: 783px) and (max-width: 1023px) {
	body.admin-bar .orn-header { top: 32px; }
}

/* ====================================================== strona glowna */

.orn-sekcja { padding: 96px 0; }
.orn-eyebrow {
	font-size: 12px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted); margin: 0 0 16px;
}

/* przyciski (odpowiedniki komponentow systemu) */
.orn-btn {
	display: inline-flex; align-items: center; justify-content: center;
	/* Motyw nie ma globalnego resetu box-sizing, a przycisk bywa rozciagany
	   na pelna szerokosc (koszyk, newsletter, kafle na telefonie). Bez tego
	   padding 28 px i obwodka doliczaja sie do 100% i przycisk wychodzi
	   poza karte. Ta sama regula jest w components.css. */
	box-sizing: border-box;
	min-height: 44px; padding: 0 28px; border-radius: var(--radius-pill);
	font-family: var(--font-ui); font-size: 14px; font-weight: 600;
	letter-spacing: var(--tracking-btn); cursor: pointer; text-decoration: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	border: 1.5px solid transparent;
}
.orn-btn--lg { min-height: 52px; padding: 0 32px; font-size: 15px; }

/* Warianty pisane podwojna klasa (.orn-btn.orn-btn--primary) celowo, nie przez
   pomylke. Pojedyncza klasa ma specyficznosc 0-1-0 i przegrywa z kazda regula
   typu `.kontener a { color: ... }`, ktorej w motywie jest kilkanascie. Tak
   wlasnie znikal napis na przycisku w koncie klienta: sliwkowy tekst na
   sliwkowym tle, bo `.woocommerce-MyAccount-content a` (0-1-1) bilo kolor
   wariantu. Podwojna klasa daje 0-2-0 i uodparnia przyciski wszedzie naraz. */
.orn-btn.orn-btn--primary { background: var(--action); color: var(--text-inverse); border-color: var(--action); }
.orn-btn.orn-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--text-inverse); text-decoration: none; }
.orn-btn.orn-btn--secondary { background: var(--surface-page); color: var(--action); border-color: var(--action); }
.orn-btn.orn-btn--secondary:hover { background: var(--surface-tint); color: var(--action-hover); border-color: var(--action-hover); text-decoration: none; }
.orn-btn.orn-btn--text {
	display: inline-flex; align-items: center; min-height: 44px;
	background: transparent; color: var(--action); padding: 0 var(--space-3);
	font-size: 15px; font-weight: 600; text-decoration: none; border-radius: var(--radius-pill);
}
.orn-btn--text::after { content: "\2192"; margin-left: var(--space-2); transition: transform var(--dur-fast) var(--ease); }
.orn-btn.orn-btn--text:hover { color: var(--action-hover); background: var(--surface-tint); text-decoration: none; }
.orn-btn--text:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.orn-btn--text::after { transition: none; }
	.orn-btn--text:hover::after { transform: none; }
}

/* ------------------------------------------------------------------ hero */

.orn-hero { position: relative; overflow: hidden; min-height: min(812px, 92vh); display: flex; align-items: center; }
.orn-hero__tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orn-hero__maska { position: absolute; inset: 0; background: rgba(251, 247, 242, .55); }
.orn-hero__inner {
	position: relative; width: min(1280px, calc(100% - 48px)); margin-inline: auto;
	display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: center;
	padding: 64px 0;
}
.orn-hero__tytul {
	font-size: clamp(40px, 5vw, 64px); line-height: 1.14;
	letter-spacing: var(--tracking-tagline); margin: 0 0 28px; white-space: nowrap;
}
.orn-hero__zdanie { font-size: 21px; line-height: 1.6; color: var(--text-body); margin: 0 0 40px; }

.orn-hero__karta { position: relative; height: 640px; }
.orn-hero__kolo {
	position: absolute; right: -24px; bottom: -8px; width: 150px; height: 150px;
	border-radius: 50%; border: 1.5px solid var(--gliniany); opacity: .35;
}
/* Pas slajdow w ksztalcie arkady. Przewijanie natywne: overflow-x razem
   ze scroll-snap. Palec dostaje systemowy rozped i wyhamowanie, a snap
   zatrzymuje pas rowno na slajdzie. To ten sam mechanizm, co w wierszach
   produktow na dole strony. */
.orn-hero__pas {
	position: absolute; right: 0; top: 12px;
	width: 490px; height: 608px; max-width: 100%;
	border-radius: var(--radius-arch);
	display: flex;
	overflow: hidden;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* strzalki i kropki przewijaja pas plynnie tym samym ruchem, co palec */
	scroll-behavior: smooth;
}
.orn-hero__pas::-webkit-scrollbar { display: none; }
.orn-hero__pas:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.orn-hero__slajd { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.orn-hero__slajd img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
	.orn-hero__pas { scroll-behavior: auto; }
}
.orn-hero__kategoria {
	position: absolute; left: 0; bottom: 88px;
	display: flex; align-items: center; gap: 20px; max-width: 320px;
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); box-shadow: var(--shadow-2);
	padding: 20px 26px; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity 220ms var(--ease);
}
.orn-hero__kategoria:hover { border-color: var(--action); color: var(--action); text-decoration: none; }
.orn-hero__eyebrow {
	display: block; font-size: 11px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted); margin-bottom: 6px;
}
.orn-hero__nazwa {
	display: block; font-family: var(--font-display); font-size: 24px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading); line-height: 1.2;
}
.orn-hero__strzalki { position: absolute; left: 0; bottom: 16px; display: flex; gap: 10px; }
.orn-hero__strzalki button {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-input); border-radius: 50%;
	background: var(--surface-page); color: var(--oberzyna); cursor: pointer;
	box-shadow: var(--shadow-1);
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-hero__strzalki button:hover { color: var(--action); border-color: var(--action); }

/* Zaslepka kategorii bez zdjecia: papier i monogram zamiast pustej arkady. */
.orn-hero__slajd--zaslepka {
	display: grid; place-items: center;
	background:
		radial-gradient(circle at 72% 26%, rgba(226,177,157,.5), transparent 60%),
		var(--krem);
}
.orn-hero__monogram {
	display: block; font-family: var(--font-znak); font-size: 120px; font-weight: 500;
	letter-spacing: var(--tracking-heading); color: var(--sliwka); opacity: .22;
}

/* Plakietka z nazwa kategorii stoi poza pasem (nachodzi na zdjecie), wiec
   jej tresc podmienia JS w chwili, gdy pas mija polowe slajdu. Krotkie
   pojawienie zamiast twardego przeskoku liter. */
@keyframes orn-hero-nazwa {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}
.orn-hero__kategoria--zmiana .orn-hero__nazwa { animation: orn-hero-nazwa 220ms var(--ease); }

/* Kropki: ile kategorii i gdzie jestesmy. Bez nich strzalki prowadza w ciemno. */
.orn-hero__kropki {
	position: absolute; left: 118px; bottom: 30px;
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap; max-width: 260px;
}
.orn-hero__kropka {
	width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
	background: var(--gliniany); opacity: .5; cursor: pointer;
	transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
}
.orn-hero__kropka:hover { opacity: .9; }
.orn-hero__kropka--aktywna { width: 22px; border-radius: var(--radius-pill); background: var(--sliwka); opacity: 1; }

/* ---------------------------------------------------------- dwie sciezki */

.orn-sciezki { padding: 96px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.orn-sciezka {
	display: flex; flex-direction: column;
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); overflow: hidden; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease);
}
.orn-sciezka:hover { border-color: var(--action); text-decoration: none; color: var(--text-body); }
.orn-sciezka--krem { background: var(--surface-cream); }
.orn-sciezka__obraz { display: block; height: 400px; overflow: hidden; }
.orn-sciezka__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.orn-sciezka:hover .orn-sciezka__obraz img { transform: scale(1.03); }
.orn-sciezka__dol {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 26px 28px; background: var(--surface-page);
}
.orn-sciezka__tytul {
	display: block; font-family: var(--font-display); font-size: 30px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	line-height: 1.15; margin-bottom: 6px;
}
.orn-sciezka__podpis { display: block; font-size: 14px; color: var(--text-muted); }

/* -------------------------------------------------------- pasek zaufania */

.orn-zaufanie { background: var(--surface-paper); border-block: 1px solid var(--border-divider); }
.orn-zaufanie__siatka { padding: 26px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.orn-zaufanie__tytul {
	font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase; color: var(--text-body); margin: 0 0 4px;
}
.orn-zaufanie__opis { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------- produkty */

.orn-produkty { padding: 88px 0 96px; }
.orn-produkty__tytul { font-size: var(--size-h1); margin: 0 0 32px; text-align: center; }
.orn-produkty__wiecej { display: flex; justify-content: center; margin-top: 44px; }

.orn-chipy { position: relative; margin-bottom: 44px; }
.orn-chipy__pas {
	display: flex; gap: 10px; overflow-x: auto;
	padding: 2px 88px 8px 2px; scrollbar-width: none; scroll-behavior: smooth;
}
.orn-chipy__pas::-webkit-scrollbar { display: none; }
.orn-chip {
	flex: none; display: inline-flex; align-items: center; white-space: nowrap;
	min-height: 44px; padding: 0 24px; border-radius: var(--radius-pill);
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-chip:hover { border-color: var(--action); color: var(--action); text-decoration: none; }
.orn-chip--aktywny { background: var(--action); border-color: var(--action); color: var(--text-inverse); }
.orn-chip--aktywny:hover { color: var(--text-inverse); border-color: var(--action); }
.orn-chipy__cien {
	position: absolute; right: 0; top: 0; bottom: 8px; width: 96px;
	background: linear-gradient(to right, rgba(255,255,255,0), var(--surface-page) 65%);
	pointer-events: none;
}
.orn-chipy__dalej {
	position: absolute; right: 2px; top: 2px; width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-input); border-radius: 50%;
	background: var(--surface-page); color: var(--oberzyna); cursor: pointer;
	box-shadow: var(--shadow-2);
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-chipy__dalej:hover { color: var(--action); border-color: var(--action); }

/* -------------------------- kartki: wiersze produktow z naglowkiem kategorii */

/* Jeden wiersz na kategorie, kazdy przesuwany w bok osobno. Przewijanie
   jest natywne: overflow-x razem ze scroll-snap. Dzieki temu gest ma
   systemowy rozped i wyhamowanie, dziala z bezwladnoscia na iOS i nie
   zjada klatek, czego nie da zaden odpowiednik pisany w JavaScripcie.
   Kafel produktu to ten sam li.product, co w sklepie, wiec zdjecie, cena
   i "Dodaj do koszyka" wygladaja i dzialaja tak samo w obu miejscach. */
.orn-katrzedy { padding: 88px 0 96px; }
.orn-katrzedy__tytul { font-size: var(--size-h1); margin: 0 0 32px; text-align: center; }
.orn-katrzedy__wiecej { display: flex; justify-content: center; margin-top: 44px; }

.orn-katrzad { position: relative; }
.orn-katrzad + .orn-katrzad { margin-top: 48px; }

/* Naglowek wiersza jest odnosnikiem do kategorii: to jedyna droga z tego
   bloku na strone kategorii, bo kafle prowadza do produktow. */
.orn-katrzad__tytul { margin: 0 0 16px; font-size: 0; }
.orn-katrzad__link {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 44px;
	font-family: var(--font-display); font-size: 24px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	line-height: 1.2; color: var(--text-brand);
	transition: color var(--dur-fast) var(--ease);
}
.orn-katrzad__link:hover { color: var(--action); text-decoration: none; }
.orn-katrzad__link svg { flex: none; }
.orn-katrzad__ile {
	font-family: var(--font-ui); font-size: 12px; font-weight: 600;
	letter-spacing: 0; text-transform: none; color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.orn-katrzad__pas {
	display: flex; gap: 20px;
	list-style: none; margin: 0; padding: 0;
	overflow-x: auto;
	/* mandatory, bo kafle sa rownej szerokosci: pas zawsze zatrzymuje sie
	   na krawedzi kafla, nigdy w polowie zdjecia */
	scroll-snap-type: x mandatory;
	/* przesuwanie w bok na koncu listy nie ma cofac calej strony */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.orn-katrzad__pas::-webkit-scrollbar { display: none; }
.orn-katrzad__pas:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: var(--radius-card); }

/* Cztery kafle na ekran przy gapie 20 px, czyli trzy przerwy w widoku.
   ul.products z woo.css jest siatka, wiec selektor musi byc mocniejszy;
   stad nazwa klasy przy znaczniku. */
ul.products.orn-katrzad__pas { display: flex; }
ul.products.orn-katrzad__pas > li.product {
	flex: 0 0 calc((100% - 60px) / 4);
	box-sizing: border-box;
	scroll-snap-align: start;
	margin: 0;
}

.orn-katrzad__strzalka {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-input); border-radius: 50%;
	background: var(--surface-page); color: var(--oberzyna); cursor: pointer;
	box-shadow: var(--shadow-2);
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-katrzad__strzalka:hover { color: var(--action); border-color: var(--action); }
.orn-katrzad__strzalka--wstecz { left: -22px; }
.orn-katrzad__strzalka--dalej { right: -22px; }
/* Strzalki sa dla myszy. Palec przesuwa pas wprost, a przycisk zaslanialby
   wtedy kafel na waskim ekranie. */
@media (hover: none), (max-width: 1023px) {
	.orn-katrzad__strzalka { display: none !important; }
}

/* siatka produktow (wspolna dla strony glownej i archiwow przez woo.css) */
.orn-siatka-produktow {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}

/* ------------------------------------------------------- papeteria sekcja */

.orn-papsekcja {
	position: relative; background: var(--surface-paper);
	border-block: 1px solid var(--border-divider); overflow: hidden; padding: 96px 0;
}
.orn-papsekcja__gora {
	display: grid; grid-template-columns: 1fr 560px; gap: 96px;
	align-items: center; margin-bottom: 72px;
}
.orn-papsekcja__tytul { font-size: var(--size-h1); margin: 0 0 24px; max-width: 20ch; }
.orn-papsekcja__lead { font-size: 17px; line-height: 1.65; max-width: 46ch; margin: 0 0 28px; }
.orn-papsekcja__okazje { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.orn-papsekcja__okazje a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
	border-radius: var(--radius-pill); background: var(--surface-cream);
	font-size: 14px; font-weight: 600; color: var(--text-brand);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-papsekcja__okazje a:hover { background: var(--krem); color: var(--action); text-decoration: none; }
.orn-papsekcja__elementy { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 44ch; }
.orn-papsekcja__kolaz { display: flex; flex-direction: column; gap: 16px; }
.orn-papsekcja__kolaz img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); display: block; }
.orn-papsekcja__kolaz-dol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.orn-kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.orn-krok { border-top: 1px solid var(--border-input); padding: 20px 4px 0; }
.orn-krok__numer {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--action); color: var(--text-inverse);
	font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.orn-krok h3 { font-size: var(--size-h4); margin: 0 0 10px; }
.orn-krok p { font-size: 15px; line-height: 1.6; margin: 0; }

.orn-papsekcja__konkrety {
	margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-divider);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.orn-papsekcja__konkrety p { font-size: 15px; line-height: 1.6; margin: 0; }
.orn-papsekcja__konkrety strong { font-weight: 600; }
.orn-papsekcja__akcje { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* ---------------------------------------------------------------- opinie */

.orn-opinie { padding: 88px 0 96px; }
.orn-opinie__tytul { font-size: var(--size-h2); margin: 0 0 40px; text-align: center; }
.orn-opinie__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.orn-opinia {
	display: flex; flex-direction: column; gap: 14px;
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 26px;
}
.orn-opinia__tekst { font-size: 14px; line-height: 1.65; margin: 0; }
.orn-opinia__imie { font-size: 13px; font-weight: 600; color: var(--text-body); margin: auto 0 0; }
.orn-plakietka--uwaga {
	align-self: flex-start; display: inline-flex; align-items: center;
	height: 22px; padding: 0 10px; border-radius: var(--radius-pill);
	background: var(--uwaga-tlo); border: 1px solid var(--uwaga-obwodka);
	color: var(--uwaga); font-size: 10px; font-weight: 700;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

/* ------------------------------------------------------------------ o nas */

.orn-onas { position: relative; overflow: hidden; }
.orn-onas__siatka {
	padding: 8px 0 96px;
	display: grid; grid-template-columns: 540px 1fr; gap: 96px; align-items: center;
}
.orn-onas__wizual { position: relative; height: 560px; }
.orn-onas__kolo-tlo {
	position: absolute; left: -24px; top: -8px; width: 200px; height: 200px;
	border-radius: 50%; background: var(--krem); opacity: .8;
}
.orn-onas__zdjecie {
	position: absolute; left: 60px; top: 24px;
	width: 420px; height: 500px; max-width: calc(100% - 60px);
	object-fit: cover; object-position: center 62%;
	border-radius: var(--radius-arch);
}
.orn-onas__znak {
	position: absolute; left: 8px; bottom: 0;
	display: flex; align-items: center; justify-content: center;
	width: 150px; height: 150px; border-radius: 50%;
	background: var(--sliwka); border: 10px solid var(--surface-page);
}
.orn-onas__znak span { font-family: var(--font-znak); font-size: 64px; color: var(--krem); line-height: 1; transform: translateY(-4px); }
.orn-onas__tytul { font-size: var(--size-h2); margin: 0 0 24px; max-width: 22ch; }
.orn-onas__akapit { font-size: 17px; line-height: 1.7; max-width: 46ch; margin: 0 0 32px; }

/* ----------------------------------------------------------------- okazje */

.orn-okazje { background: var(--surface-paper); border-block: 1px solid var(--border-divider); }
.orn-okazje .orn-wrap { padding: 80px 0 88px; }
.orn-okazje__tytul { font-size: var(--size-h2); margin: 0 0 36px; }
.orn-okazje__siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.orn-okazja {
	display: flex; flex-direction: column;
	/* Motyw nie ma globalnego resetu, a kafel ma obwodke. W przesuwanym
	   rzedzie szerokosc zadaje flex-basis, wiec bez tego kafel wychodzil
	   o 2 px szerszy niz mu przydzielono i dwa kafle nie miescily sie
	   w ekranie: drugi konczyl sie 5 px za krawedzia. */
	box-sizing: border-box;
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); overflow: hidden; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-okazja:hover { border-color: var(--action); color: var(--action); text-decoration: none; }
.orn-okazja__obraz { position: relative; display: block; height: 200px; overflow: hidden; background: var(--surface-cream); }
.orn-okazja__obraz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.orn-okazja:hover .orn-okazja__obraz img { transform: scale(1.03); }
.orn-okazja__kolo1 { position: absolute; left: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--brzoskwinia); opacity: .7; }
.orn-okazja__kolo2 { position: absolute; right: -30px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid var(--sliwka); opacity: .3; }
.orn-okazja__arkada { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); width: 110px; height: 170px; border-radius: var(--radius-arch); background: var(--surface-page); opacity: .6; }
.orn-okazja__dol {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	min-height: 68px; padding: 10px 20px;
	font-family: var(--font-display); font-size: 22px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading); line-height: 1.2;
}
.orn-okazje__przycisk { display: flex; justify-content: center; margin-top: 36px; }

/* ------------------------------------------------------------------- blog */

.orn-blogsekcja { padding: 88px 0 96px; }
.orn-blogsekcja__tytul { font-size: var(--size-h2); margin: 0 0 36px; text-align: center; }
.orn-blogsekcja__siatka, .orn-blog__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.orn-wpiskarta {
	display: flex; flex-direction: column;
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); overflow: hidden;
	transition: border-color var(--dur-fast) var(--ease);
}
.orn-wpiskarta:hover { border-color: var(--action); }
.orn-wpiskarta__obraz { display: block; height: 250px; overflow: hidden; }
.orn-wpiskarta__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.orn-wpiskarta:hover .orn-wpiskarta__obraz img { transform: scale(1.03); }
.orn-wpiskarta__dol { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: 26px 28px 22px; }
.orn-wpiskarta__dol h3 {
	font-family: var(--font-ui); font-size: 18px; font-weight: 600;
	text-transform: none; letter-spacing: 0; line-height: 1.45; margin: 0;
}
.orn-wpiskarta__dol h3 a { color: var(--text-body); }
.orn-wpiskarta__dol h3 a:hover { color: var(--action); text-decoration: none; }
.orn-wpiskarta__zajawka { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.orn-wpiskarta__dalej {
	margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; font-size: 14px; font-weight: 600; color: var(--action);
}
.orn-wpiskarta__dalej:hover { color: var(--action-hover); text-decoration: none; }

/* -------------------------------------------------------------- newsletter */

.orn-newsletter { padding: 0 0 88px; }
.orn-newsletter__karta {
	position: relative; max-width: 880px; margin: 0 auto;
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); overflow: hidden;
	padding: 56px 72px; text-align: center;
}
/* Fala jest dekoracja tla, nie ikonka w rogu: duza i przygaszona,
   tak jak litera O w strefie SEO. */
.orn-newsletter__fala {
	position: absolute; left: -80px; bottom: -120px;
	width: 420px; height: auto; opacity: .3; pointer-events: none;
}
.orn-newsletter__tresc { position: relative; }
.orn-newsletter__tresc h2 { font-size: var(--size-h3); line-height: 1.15; margin: 0 0 12px; }
.orn-newsletter__kreska { display: block; width: 48px; height: 1px; background: var(--sliwka); opacity: .4; margin: 0 auto 16px; }
.orn-newsletter__tresc > p { font-size: 16px; line-height: 1.6; margin: 0 0 28px; }
.orn-newsletter__form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.orn-newsletter__form > label { font-size: 13px; font-weight: 600; color: var(--text-body); }
.orn-newsletter__rzad { display: flex; gap: 12px; }
/* Pole na e-mail: trzy rzeczy naraz, kazda konieczna. Ten sam rzad jest
   wierszem na duzym ekranie i kolumna na telefonie, wiec musi dzialac w obu.

   1. `flex: 1` to skrot od `1 1 0`. W KOLUMNIE os glowna jest pionowa, wiec
      basis:0 rzadzi wysokoscia i unieważnia `height` - pole miało 21 px
      zamiast 52 i wygladalo jak cienki pasek obok wysokiego przycisku.
      `flex: 1 1 auto` bierze basis z wlasciwosci wymiaru: w wierszu z width,
      w kolumnie z height.
   2. `width: 100%` - w kolumnie flex nie rozciaga juz pola w poziomie, wiec
      bez tego zostaje domyslna szerokosc pola tekstowego (~20 znakow).
   3. `box-sizing: border-box` - motyw nie ma globalnego resetu, wiec samo
      width:100% przy padding 18px i obwodce 1,5px robi pole szersze od karty
      o 39 px i wychodzi ono poza jej prawa krawedz.

   Ten sam blad mialy cztery bloki: newsletter "Zostan z nami", karta rabatu
   w pustym koszyku, "Powiadom mnie" przy wyprzedanej kartce, pas na blogu
   oraz wyszukiwarka na 404 i w wynikach (woo.css). Poprawione we wszystkich. */
.orn-newsletter__rzad input {
	flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; height: 52px; padding: 0 18px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page); font-family: var(--font-ui);
	font-size: 15px; color: var(--text-body); outline: none;
}
.orn-newsletter__rzad input:focus { border-color: var(--action); }
/* Checkbox marki: fabryczny kwadrat systemowy nie ma nic wspolnego z reszta
   strony. Wlasny kwadrat z zaokragleniem i ptaszkiem rysowanym obwodka.
   Pole zostaje prawdziwym <input>, wiec walidacja i klawiatura dzialaja. */
.orn-zgoda { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; cursor: pointer; text-align: left; }
.orn-zgoda input {
	appearance: none; -webkit-appearance: none;
	width: 22px; height: 22px; margin: 1px 0 0; flex: none;
	border: 1.5px solid var(--border-input); border-radius: 6px;
	background: var(--surface-page); cursor: pointer;
	display: grid; place-content: center;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-zgoda input::before {
	content: ""; width: 11px; height: 6px;
	border-left: 2px solid var(--text-inverse); border-bottom: 2px solid var(--text-inverse);
	transform: rotate(-45deg) translate(1px, -1px) scale(.4);
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.orn-zgoda input:hover { border-color: var(--action); }
.orn-zgoda input:checked { background: var(--action); border-color: var(--action); }
.orn-zgoda input:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.orn-zgoda input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.orn-zgoda span { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.orn-newsletter__wynik { font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.orn-newsletter__wynik.orn-ok { color: var(--sukces); }
.orn-newsletter__wynik.orn-nie { color: var(--blad); }

/* -------------------------------------------------------------- instagram */

.orn-insta { padding: 88px 0 96px; }
.orn-insta__naglowek { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.orn-insta__naglowek h2 { font-size: var(--size-h2); margin: 0 0 16px; }
.orn-insta__naglowek p { font-size: 15px; line-height: 1.65; color: var(--text-body); margin: 0; }
.orn-insta__siatka { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.orn-insta__kafel { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; }
.orn-insta__kafel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); }
.orn-insta__kafel:hover img { transform: scale(1.03); }

/* Kanal ze Smash Balloon. Wtyczka wnosi wlasny naglowek z awatarem i nazwa
   profilu, a my mamy juz nad nia @ornament.concept z leadem, wiec jej naglowek
   chowamy zamiast powtarzac to samo dwa razy. Reszta to dociagniecie kafli
   i przyciskow do jezyka sklepu: zaokraglenia, odstepy, kolory marki.
   Czesc wartosci wtyczka wpisuje inline z ustawien, stad !important. */
.orn-insta__feed #sb_instagram { padding-bottom: 0 !important; width: 100% !important; }
.orn-insta__feed .sb_instagram_header { display: none !important; }
.orn-insta__feed #sbi_images { gap: 12px; padding: 0 !important; }
.orn-insta__feed #sbi_images .sbi_item { padding: 0 !important; }
.orn-insta__feed .sbi_photo_wrap,
.orn-insta__feed .sbi_photo {
	border-radius: var(--radius-card); overflow: hidden;
}
.orn-insta__feed .sbi_photo { transition: transform var(--dur-base) var(--ease); }
.orn-insta__feed .sbi_item:hover .sbi_photo { transform: scale(1.03); }
.orn-insta__feed #sbi_load { margin-top: 28px; }
.orn-insta__feed .sbi_load_btn,
.orn-insta__feed .sbi_follow_btn a {
	border-radius: var(--radius-pill) !important;
	background: var(--action) !important; color: var(--text-inverse) !important;
	border: 0 !important; box-shadow: none !important;
	font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 600 !important;
	padding: 12px 26px !important; min-height: 46px;
}
.orn-insta__feed .sbi_load_btn:hover,
.orn-insta__feed .sbi_follow_btn a:hover { background: var(--action-hover) !important; }
.orn-insta__feed .sbi_follow_btn a svg,
.orn-insta__feed .sbi_load_btn svg { fill: currentColor; }

/* ------------------------------------------------- strona glowna: mobile */

@media (max-width: 1023px) {
	.orn-sekcja, .orn-sciezki, .orn-produkty, .orn-katrzedy, .orn-opinie,
	.orn-blogsekcja, .orn-insta { padding-block: 64px; }
	/* Dwa kafle na ekran, jedna przerwa w widoku. Kafel siega dokladnie
	   krawedzi tresci, wiec wiersz czyta sie jak wiersz, a nie jak urwana
	   tasma; ze scroll-snap kolejna para wjezdza rowno na to samo miejsce. */
	.orn-katrzad__pas { gap: 12px; }
	ul.products.orn-katrzad__pas > li.product { flex: 0 0 calc((100% - 12px) / 2); }
	.orn-katrzad + .orn-katrzad { margin-top: 32px; }
	.orn-katrzad__tytul { margin-bottom: 12px; }
	.orn-katrzad__link { font-size: 18px; gap: 8px; }
	.orn-katrzedy__tytul { margin-bottom: 24px; }
	.orn-papsekcja { padding: 64px 0; }
	.orn-okazje .orn-wrap { padding: 56px 0 64px; }

	.orn-hero { min-height: 0; }
	.orn-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
	.orn-hero__tytul { white-space: normal; }
	.orn-hero__karta { height: auto; min-height: 480px; }
	.orn-hero__pas { position: relative; top: 0; right: auto; width: min(400px, 100%); height: auto; aspect-ratio: 490 / 608; margin-inline: auto; }
	.orn-hero__kategoria { position: relative; bottom: auto; margin-top: -64px; }
	.orn-hero__strzalki { position: relative; bottom: auto; margin-top: 16px; }
	.orn-hero__kropki { position: relative; left: auto; bottom: auto; margin-top: 16px; max-width: none; }
	.orn-hero__kolo { display: none; }
	.orn-hero__monogram { font-size: 80px; }

	.orn-sciezki { grid-template-columns: 1fr; }
	.orn-sciezka__obraz { height: 260px; }
	.orn-zaufanie__siatka { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
	.orn-siatka-produktow { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.orn-papsekcja__gora { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
	.orn-kroki, .orn-papsekcja__konkrety { grid-template-columns: 1fr; }
	.orn-opinie__siatka { grid-template-columns: 1fr; }
	.orn-onas__siatka { grid-template-columns: 1fr; gap: 48px; padding-bottom: 64px; }
	.orn-onas__wizual { height: auto; min-height: 420px; }
	.orn-onas__zdjecie { position: relative; left: 24px; top: 0; width: min(340px, calc(100% - 24px)); height: 420px; }
	.orn-onas__znak { width: 110px; height: 110px; }
	.orn-onas__znak span { font-size: 46px; }
	.orn-okazje__siatka { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.orn-blogsekcja__siatka, .orn-blog__siatka { grid-template-columns: 1fr; }
	.orn-newsletter__karta { padding: 36px 20px; }
	.orn-newsletter__fala { width: 260px; left: -60px; bottom: -80px; }
	.orn-newsletter__rzad { flex-direction: column; }
	.orn-insta__siatka { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================== archiwum kategorii */

.orn-archiwum {
	padding: 24px 0 88px;
	display: grid;
	grid-template-columns: 288px 1fr;
	column-gap: 56px;
	grid-template-areas:
		"breadcrumb breadcrumb"
		"naglowek   naglowek"
		"notices    notices"
		"filtry     pasek"
		"filtry     produkty";
}
.orn-archiwum .woocommerce-breadcrumb { grid-area: breadcrumb; font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.orn-archiwum .woocommerce-breadcrumb a { color: var(--action); font-weight: 600; }
.orn-archiwum .woocommerce-products-header { grid-area: naglowek; margin-bottom: 10px; }
.orn-archiwum .page-title { font-size: 40px; margin: 0 0 10px; }
.orn-archiwum .term-description p { margin: 0; font-size: 16px; line-height: 1.6; max-width: 82ch; color: var(--text-body); }
.orn-archiwum .woocommerce-notices-wrapper { grid-area: notices; }

.orn-archiwum__pasek {
	grid-area: pasek;
	display: flex; align-items: center; justify-content: space-between;
	min-height: 44px;
}
.orn-archiwum .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--text-muted); }
.orn-archiwum .woocommerce-ordering { margin: 0; }
.orn-archiwum .woocommerce-ordering select.orderby {
	appearance: none;
	height: 44px; padding: 0 42px 0 18px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-pill);
	background-color: var(--surface-page);
	background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2212%22%20height=%228%22%3E%3Cpath%20d=%22M1%201l5%205%205-5%22%20fill=%22none%22%20stroke=%22%234D303F%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E');
	background-repeat: no-repeat; background-position: right 16px center;
	font-family: var(--font-ui); font-size: 14px; font-weight: 600;
	color: var(--text-body); cursor: pointer;
}

.orn-archiwum__produkty { grid-area: produkty; margin-top: 20px; }
.orn-archiwum__produkty ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* filtry */
.orn-archiwum__bok { grid-area: filtry; align-self: start; }
.orn-filtry { align-self: start; }
.orn-filtry__naglowek {
	font-size: 12px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted); margin: 0; line-height: 44px;
}
.orn-filtry__grupa { padding: 16px 0 20px; border-top: 1px solid var(--border-divider); }
.orn-filtry__tytul {
	font-size: 12px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-body); margin: 0 0 12px;
}
.orn-filtry__cena { display: flex; gap: 10px; }
.orn-filtry__cena > div { flex: 1; }
.orn-filtry__cena label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.orn-filtry__cena input {
	width: 100%; height: 44px; box-sizing: border-box;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	padding: 0 12px; font-family: var(--font-ui); font-size: 14px;
	color: var(--text-body); background: var(--surface-page);
}
.orn-filtry__lista { display: flex; flex-direction: column; }
.orn-filtry__pozycja {
	display: flex; align-items: center; gap: 10px;
	min-height: 36px; cursor: pointer;
	font-size: 14px; color: var(--text-body);
}
.orn-filtry__pozycja input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--sliwka); cursor: pointer; }
.orn-filtry__kropka {
	width: 16px; height: 16px; border-radius: 50%; flex: none;
	border: 1px solid var(--border-divider);
}
.orn-filtry__ile { margin-left: auto; font-size: 13px; color: var(--text-muted); }
/* Mozaika tagow tuz nad przyciskiem Zastosuj. Te same pigulki co w stopce,
   tyle ze przelaczane: aria-pressed niesie stan, nie klasa. */
.orn-filtry__tagi { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-filtry__grupa--tagi .orn-filtry__tytul { margin-bottom: 12px; }
.orn-filtry__tag { cursor: pointer; font-family: var(--font-ui); }

.orn-filtry__zastosuj {
	width: 100%; height: 40px; margin-top: 12px;
	border: 1.5px solid var(--action); border-radius: var(--radius-pill);
	background: transparent; color: var(--action);
	font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-filtry__zastosuj:hover { background: var(--surface-tint); color: var(--action-hover); border-color: var(--action-hover); }
.orn-filtry__wyczysc {
	display: block; text-align: center; margin-top: 10px;
	font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.orn-filtry__wyczysc:hover { color: var(--action); }

/* stronicowanie z projektu: aktywna pigulka pelna, "Nastepna" z obwodka */
.orn-archiwum .woocommerce-pagination { margin-top: 48px; }
ul.page-numbers .next.page-numbers,
ul.page-numbers .prev.page-numbers {
	padding: 0 18px; border: 1.5px solid var(--action); color: var(--action);
}
ul.page-numbers .next.page-numbers:hover,
ul.page-numbers .prev.page-numbers:hover { background: var(--surface-tint); color: var(--action-hover); border-color: var(--action-hover); }
ul.page-numbers .dots { border: 0; background: none; color: var(--text-muted); min-width: 32px; }

/* strefa SEO pod siatka */
.orn-seo {
	position: relative;
	background: var(--surface-paper);
	border-top: 1px solid var(--border-divider);
	overflow: hidden;
}
.orn-seo__litera {
	position: absolute; top: -48px; right: 72px;
	font-family: var(--font-znak); font-size: 300px; line-height: 1;
	color: var(--krem); opacity: .6; pointer-events: none; user-select: none;
}
.orn-seo__inner { position: relative; padding: 88px 0 96px; }
.orn-seo__tytul { font-size: var(--size-h2); margin: 0 0 44px; max-width: 26ch; }
.orn-seo__kolumny {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: 88px; row-gap: 44px; align-items: start;
}
.orn-seo__kolumny p { font-size: 16px; line-height: 1.7; max-width: 62ch; margin: 0 0 14px; }
.orn-seo__kolumny a { color: var(--action); font-weight: 600; }
.orn-seo__zdjecie {
	width: 260px; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: var(--radius-arch); margin-top: 40px;
}
.orn-seo__pokrewne { margin-top: 64px; }

/* Dlugi opis SEO: wszystko od pierwszego <h3> w opisie kategorii renderuje
   sie tak, jak zostalo napisane. To jedyne miejsce na sklepie, gdzie da sie
   wstawic rozbudowany tekst pod produktami. */
.orn-seo__dlugi { margin-top: 56px; max-width: 74ch; }
.orn-seo__dlugi h3 {
	font-family: var(--font-display); font-size: 26px; font-weight: 500;
	letter-spacing: var(--tracking-heading); color: var(--text-brand);
	margin: 40px 0 14px;
}
.orn-seo__dlugi h4 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: var(--text-body); }
.orn-seo__dlugi p { font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.orn-seo__dlugi ul, .orn-seo__dlugi ol { margin: 0 0 20px; padding-left: 22px; }
.orn-seo__dlugi li { font-size: 16px; line-height: 1.75; margin-bottom: 8px; }
.orn-seo__dlugi a { color: var(--action); font-weight: 600; }
.orn-seo__dlugi > *:first-child { margin-top: 0; }

.orn-kafel {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 24px 26px;
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card);
	transition: background var(--dur-fast) var(--ease);
}
.orn-kafel:hover { background: var(--surface-tint); text-decoration: none; }
.orn-kafel > span:first-child {
	font-family: var(--font-display); font-size: 20px; font-weight: 500;
	letter-spacing: .06em; text-transform: uppercase; color: var(--text-brand);
}
.orn-kafel > span:last-child { color: var(--sliwka); font-size: 18px; }
.orn-kafel--duzy { padding: 28px 30px; }
.orn-kafel--duzy > span:first-child { font-size: 24px; }
.orn-kafel--duzy > span:last-child { font-size: 20px; }

/* Pusta kategoria: kafle i karta zapisu w jednej siatce, wiec krawedzie
   leza w jednej linii. Wczesniej byly to dwie kolumny obok siebie i karta
   zapisu wisiala nierowno wzgledem kafli. */
.orn-pusta { grid-column: auto; }
.orn-pusta__wstep {
	font-size: 16px; line-height: 1.7; color: var(--text-body);
	max-width: 62ch; margin: 0 0 28px;
}
.orn-pusta__siatka {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px; align-items: stretch;
}
.orn-pusta__siatka .orn-kafel-kat { height: 100%; }
.orn-powiadomienie--kafel {
	display: flex; flex-direction: column;
	background: var(--surface-cream); border-color: transparent;
}
.orn-powiadomienie--kafel .orn-powiadomienie__form { margin-top: auto; }
.orn-powiadomienie--kafel .orn-powiadomienie__rzad { flex-direction: column; }
.orn-powiadomienie--kafel .orn-powiadomienie__rzad .orn-btn { width: 100%; min-height: 48px; }

/* Filtr bez trafien: inny problem niz pusta kategoria, wiec inny ekran. */
.orn-bezwynikow {
	text-align: center; padding: 56px 24px;
	border: 1px solid var(--border-divider); border-radius: var(--radius-card);
	background: var(--surface-paper);
}
.orn-bezwynikow__monogram {
	display: block; font-family: var(--font-znak); font-size: 64px; font-weight: 500;
	letter-spacing: var(--tracking-heading); color: var(--sliwka); opacity: .25; line-height: 1;
}
.orn-bezwynikow__tytul { font-size: 26px; margin: 16px 0 10px; }
.orn-bezwynikow__tekst { font-size: 15px; line-height: 1.7; color: var(--text-muted); max-width: 46ch; margin: 0 auto 24px; }
.orn-powiadomienie {
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 28px;
}
.orn-powiadomienie__tytul { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text-body); }
.orn-powiadomienie__opis { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
/* :not(.orn-zgoda) jest tu konieczne. Etykieta zgody tez jest <label>, a ta
   regula ma wyzsza specyficznosc niz .orn-zgoda, wiec zamieniala ja w blok
   i checkbox ladowal NAD tekstem zamiast obok niego. */
.orn-powiadomienie__form > label:not(.orn-zgoda) { display: block; font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; }
.orn-powiadomienie__rzad { display: flex; gap: 10px; }
.orn-powiadomienie__rzad input {
	flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; height: 48px; padding: 0 14px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 14px; color: var(--text-body); outline: none;
}
.orn-powiadomienie__rzad input:focus { border-color: var(--action); }
.orn-powiadomienie__wynik { font-size: 13px; font-weight: 600; margin: 10px 0 0; }
.orn-powiadomienie__wynik.orn-ok { color: var(--sukces); }
.orn-powiadomienie__wynik.orn-nie { color: var(--blad); }

/* pasek zaufania z ikonami */
.orn-zaufanie-ikony { background: var(--surface-page); border-top: 1px solid var(--border-divider); }
.orn-zaufanie-ikony__siatka { padding: 44px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.orn-zaufanie-ikony__pozycja { display: flex; align-items: flex-start; gap: 14px; }
.orn-zaufanie-ikony__pozycja svg { flex: none; margin-top: 2px; }
.orn-zaufanie-ikony__tytul { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-zaufanie-ikony__opis { margin: 0; font-size: 14px; color: var(--text-muted); }

@media (max-width: 1023px) {
	.orn-archiwum {
		grid-template-columns: 1fr;
		grid-template-areas:
			"breadcrumb"
			"naglowek"
			"notices"
			"pasek"
			"filtry"
			"produkty";
		padding: 16px 0 64px;
	}
	.orn-archiwum .page-title { font-size: 32px; }
	/* Grid nie ma row-gap, wiec po zlozeniu do jednej kolumny naglowek
	   "Kategorie" siadal wprost pod przyciskiem sortowania (0 px odstepu)
	   i czytalo sie to jak podpis tego przycisku. Na duzym ekranie bok stoi
	   w osobnej kolumnie rowno z paskiem, wiec odstep tylko tutaj. */
	.orn-archiwum__bok { margin-top: 28px; }
	.orn-archiwum__produkty ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.orn-filtry { border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 0 16px 16px; margin-top: 16px; }
	.orn-seo__kolumny { grid-template-columns: 1fr; }
	.orn-seo__litera { font-size: 200px; right: -24px; }
	.orn-zaufanie-ikony__siatka { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
}

/* ========================================================= karta produktu */

.orn-produkt-strona { padding: 20px 0 96px; }
.orn-produkt-strona .woocommerce-breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.orn-produkt-strona .woocommerce-breadcrumb a { color: var(--action); font-weight: 600; }

.orn-produkt-siatka {
	display: grid;
	grid-template-columns: 560px 1fr;
	column-gap: 80px;
	align-items: start;
}

/* galeria: pierwsze zdjecie duze, miniatury w rzedzie po 4 */
.orn-galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.orn-galeria__pole--glowne { grid-column: 1 / -1; }
.orn-galeria__pole--glowne img {
	width: 100%; height: auto; aspect-ratio: 450 / 617;
	object-fit: cover; display: block; border-radius: var(--radius-card);
}
.orn-galeria__pole button {
	display: block; width: 100%; padding: 0; border: 2px solid transparent;
	border-radius: var(--radius-input); overflow: hidden;
	background: none; cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.orn-galeria__pole button:hover { opacity: .88; }
.orn-galeria__pole button.orn-aktywna { border-color: var(--action); }
.orn-galeria__pole button img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* podsumowanie */
.orn-produkt-siatka .summary { padding-top: 4px; }
.orn-produkt-siatka .product_title {
	font-family: var(--font-ui); font-weight: 500; font-size: 30px; line-height: 1.3;
	text-transform: none; letter-spacing: 0; color: var(--text-body); margin: 0 0 12px;
}
.orn-produkt__cena-rzad { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.orn-produkt-siatka .summary .price { margin: 0; font-size: 24px; font-weight: 600; color: var(--text-brand); }
.orn-produkt-siatka.outofstock .summary .price { color: var(--text-muted); }
.orn-produkt-siatka .stock.out-of-stock {
	margin: 0; display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
	border-radius: var(--radius-pill); background: var(--uwaga-tlo);
	border: 1px solid var(--uwaga-obwodka); color: var(--uwaga);
	font-size: 13px; font-weight: 600;
}
.orn-produkt-siatka .woocommerce-product-details__short-description { max-width: 52ch; }
.orn-produkt-siatka .woocommerce-product-details__short-description p { font-size: 17px; line-height: 1.6; margin: 0; }

.orn-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0; }
.orn-spec__pigulka {
	display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 15px;
	border-radius: var(--radius-pill); background: var(--surface-paper);
	border: 1px solid var(--border-divider);
	font-size: 13px; font-weight: 500; color: var(--text-body);
}
.orn-spec__kropka { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-input); }

/* fabryczny formularz koszyka */
.orn-produkt-siatka form.cart { display: flex; gap: 12px; margin: 28px 0 0; }
.orn-produkt-siatka form.cart .quantity .qty {
	width: 84px; height: 52px; box-sizing: border-box;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	text-align: center; font-family: var(--font-ui); font-size: 16px;
	color: var(--text-body); background: var(--surface-page);
}
.orn-produkt-siatka form.cart .single_add_to_cart_button {
	flex: 1; max-width: 320px; height: 52px; border: 0;
	border-radius: var(--radius-pill); background: var(--action);
	color: var(--text-inverse); font-family: var(--font-ui);
	font-size: 15px; font-weight: 600; cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.orn-produkt-siatka form.cart .single_add_to_cart_button:hover { background: var(--action-hover); }
.orn-produkt-siatka form.cart .single_add_to_cart_button:active { background: var(--action-pressed); transform: translateY(1px); }

.orn-produkt__zaufanie {
	display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 4px;
	margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted);
}
.orn-powiadomienie--produkt { margin-top: 28px; padding: 24px; }

.orn-produkt__stopka-podsumowania {
	margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-divider);
	display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.orn-lista-zyczen {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
	border: 0; background: none; padding: 0; cursor: pointer;
	font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--action);
	transition: color var(--dur-fast) var(--ease);
}
.orn-lista-zyczen:hover { color: var(--action-hover); }
.orn-lista-zyczen[aria-pressed="true"] svg { fill: currentColor; }
.orn-produkt-siatka .product_meta { font-size: 13px; color: var(--text-muted); }
.orn-produkt-siatka .product_meta a { color: var(--action); font-weight: 600; }
.orn-produkt-siatka .product_meta > span { display: block; }
.orn-produkt-siatka .sku_wrapper { display: none !important; } /* SKU nie gra roli u klienta */

/* jeden przeplyw zamiast zakladek */
.orn-przeplyw {
	grid-column: 1 / -1;
	margin-top: 80px; padding-top: 64px;
	border-top: 1px solid var(--border-divider);
	display: grid; grid-template-columns: 1fr 420px;
	column-gap: 96px; row-gap: 56px; align-items: start;
}
.orn-przeplyw .wc-tabs { display: none; }
.orn-przeplyw__opis { grid-row: 1 / span 2; }
.orn-przeplyw__opis h2 { font-size: 26px; margin: 0 0 20px; }
.orn-przeplyw__opis p { font-size: 16px; line-height: 1.7; max-width: 62ch; margin: 0 0 14px; }
.orn-przeplyw__specyfikacja {
	background: var(--surface-paper); border-radius: var(--radius-card);
	padding: 28px 32px 14px;
}
.orn-przeplyw__specyfikacja h2 { font-size: 22px; margin: 0 0 8px; }
.orn-przeplyw__specyfikacja table.shop_attributes { width: 100%; border-collapse: collapse; }
.orn-przeplyw__specyfikacja table.shop_attributes tr { border-bottom: 1px solid var(--border-divider); }
.orn-przeplyw__specyfikacja table.shop_attributes tr:last-child { border-bottom: 0; }
.orn-przeplyw__specyfikacja table.shop_attributes th {
	text-align: left; padding: 14px 16px 14px 0;
	font-size: 14px; font-weight: 600; color: var(--text-muted);
	white-space: nowrap; vertical-align: top; width: 120px;
}
.orn-przeplyw__specyfikacja table.shop_attributes td { padding: 14px 0; }
.orn-przeplyw__specyfikacja table.shop_attributes td p { margin: 0; font-size: 15px; color: var(--text-body); }

.orn-dostawa { border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); }
.orn-przeplyw__dostawa { grid-column: 2; }
.orn-dostawa > button {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; min-height: 56px; border: 0; background: transparent; cursor: pointer;
	font-family: var(--font-ui); font-size: 16px; font-weight: 600;
	color: var(--text-body); padding: 0 4px; text-align: left;
}
.orn-dostawa > button svg { flex: none; transition: transform var(--dur-fast) var(--ease); }
.orn-dostawa > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.orn-dostawa__tresc { padding: 2px 4px 22px; display: flex; flex-direction: column; gap: 8px; }
.orn-dostawa__tresc p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.orn-dostawa__zwroty { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.orn-dostawa__zwroty p { font-size: 14px; color: var(--text-muted); }

/* pasek papeterii */
.orn-pasek-papeterii {
	grid-column: 1 / -1; margin-top: 72px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px 24px;
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 18px 24px;
}
.orn-pasek-papeterii p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.orn-pasek-papeterii a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	font-size: 14px; font-weight: 600; color: var(--action); white-space: nowrap;
}
.orn-pasek-papeterii a:hover { color: var(--action-hover); text-decoration: none; }

/* powiazane */
.orn-produkt-siatka .related.products { grid-column: 1 / -1; margin-top: 88px; }
.orn-produkt-siatka .related.products > h2 { font-size: 28px; margin: 0 0 28px; }
.orn-produkt-siatka .related.products ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1023px) {
	.orn-produkt-strona { padding: 16px 0 64px; }
	.orn-produkt-siatka { grid-template-columns: 1fr; row-gap: 32px; }
	.orn-produkt-siatka .product_title { font-size: 24px; }
	.orn-przeplyw { grid-template-columns: 1fr; margin-top: 56px; padding-top: 44px; row-gap: 40px; }
	.orn-przeplyw__opis { grid-row: auto; }
	.orn-przeplyw__dostawa { grid-column: auto; }
	.orn-produkt-siatka .related.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.orn-produkt-siatka form.cart .single_add_to_cart_button { max-width: none; }
}

/* panele przeplywu zawsze widoczne - zadna wtyczka nie ma prawa ich schowac */
.orn-przeplyw .wc-tab { display: block !important; }

/* ================================================================== blog */

.orn-blognagl { padding: 72px 0 56px; }
.orn-blognagl h1 { font-size: 56px; margin: 0 0 16px; }
.orn-blognagl p { font-size: 17px; line-height: 1.6; color: var(--text-body); max-width: 60ch; margin: 0; }

.orn-blogsiatka {
	padding-bottom: 96px;
	display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start;
}

.orn-badge-kat {
	display: inline-flex; align-self: flex-start; align-items: center;
	height: 26px; padding: 0 12px; border-radius: var(--radius-pill);
	background: var(--surface-tint); color: var(--action);
	font-size: 11px; font-weight: 700;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	text-decoration: none;
}
.orn-wpis-data { font-size: 13px; color: var(--text-muted); }

/* wyrozniony wpis */
.orn-wyrozniony {
	display: grid; grid-template-columns: 1.1fr 1fr;
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); overflow: hidden; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease);
}
.orn-wyrozniony:hover { border-color: var(--action); text-decoration: none; color: var(--text-body); }
.orn-wyrozniony__obraz { display: block; min-height: 420px; overflow: hidden; }
.orn-wyrozniony__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orn-wyrozniony__tresc { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px 44px; }
.orn-wyrozniony__meta { display: flex; align-items: center; gap: 12px; }
.orn-wyrozniony__tytul {
	font-family: var(--font-display); font-size: 34px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	line-height: 1.25; color: var(--text-brand);
}
.orn-wyrozniony__zajawka { font-size: 15px; line-height: 1.7; }
.orn-wyrozniony__dalej { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--action); }

/* karta wpisu (nowa struktura <a>) */
.orn-blog__siatka { margin-top: 28px; }
a.orn-wpiskarta { color: var(--text-body); }
a.orn-wpiskarta:hover { text-decoration: none; color: var(--text-body); }
.orn-blog__siatka .orn-wpiskarta__obraz { height: 210px; }
.orn-wpiskarta__dol .orn-badge-kat { height: 24px; font-size: 10px; }
.orn-wpiskarta__tytul {
	font-family: var(--font-display); font-size: 22px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	line-height: 1.3; color: var(--text-brand);
}
.orn-wpiskarta__zajawka { font-size: 14px; line-height: 1.65; }
.orn-wpiskarta__stopka {
	margin-top: auto; display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding-top: 8px;
}
.orn-wpiskarta__dalej { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--action); }
a.orn-wpiskarta .orn-wpiskarta__dol { gap: 12px; padding: 24px 24px 28px; }

.orn-blogsiatka__stronicowanie { display: flex; justify-content: center; margin-top: 56px; }
.orn-blogsiatka__stronicowanie .nav-links { display: flex; gap: 8px; }
.orn-blogsiatka__stronicowanie .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	border: 1px solid var(--border-divider); border-radius: var(--radius-pill);
	background: var(--surface-page);
	font-size: 14px; font-weight: 600; color: var(--text-body); text-decoration: none;
}
.orn-blogsiatka__stronicowanie a.page-numbers:hover { border-color: var(--action); color: var(--action); }
.orn-blogsiatka__stronicowanie .page-numbers.current { background: var(--action); border-color: var(--action); color: var(--text-inverse); }

/* kategorie w bocznej */
.orn-blogkategorie {
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 28px 26px;
	position: sticky; top: 24px;
}
.orn-blogkategorie h2 {
	font-family: var(--font-ui); font-size: 12px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
	color: var(--text-muted); margin: 0 0 18px;
}
.orn-blogkategorie__lista { display: flex; flex-direction: column; }
.orn-blogkategorie__lista a {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 44px; padding: 4px 0;
	border-bottom: 1px solid var(--border-divider);
	color: var(--text-body); font-size: 14px; font-weight: 500;
}
.orn-blogkategorie__lista a:hover { color: var(--action); text-decoration: none; }
.orn-blogkategorie__lista a span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 28px; height: 22px; padding: 0 8px;
	border-radius: var(--radius-pill); background: var(--surface-tint);
	color: var(--text-muted); font-size: 12px; font-weight: 600;
}

/* pas newslettera */
.orn-nlpas { background: var(--surface-cream); border-top: 1px solid var(--border-divider); }
.orn-nlpas__siatka {
	padding: 80px 0;
	display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: center;
}
.orn-nlpas h2 { font-size: 36px; margin: 0 0 12px; }
.orn-nlpas p { font-size: 16px; line-height: 1.6; color: var(--text-body); margin: 0; }
.orn-nlpas form { display: flex; flex-direction: column; gap: 8px; }
.orn-nlpas form > label { font-size: 13px; font-weight: 600; color: var(--text-body); }
.orn-nlpas__rzad { display: flex; gap: 12px; }
.orn-nlpas__rzad input {
	flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; height: 48px; padding: 0 18px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 14px; color: var(--text-body); outline: none;
}
.orn-nlpas__rzad input:focus { border-color: var(--action); }

/* ------------------------------------------------------------- pojedynczy wpis */

.orn-wpis__gora { max-width: 760px; margin: 0 auto; padding: 72px 24px 48px; text-align: center; }
.orn-wpis__gora .orn-badge-kat { margin-bottom: 24px; }
.orn-wpis__gora h1 { font-size: 46px; line-height: 1.22; margin: 0 0 24px; }
.orn-wpis__meta {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	font-size: 14px; color: var(--text-muted); margin: 0;
}
.orn-kropka { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gliniany); }
.orn-wpis__hero { width: min(1080px, calc(100% - 48px)); margin: 0 auto 64px; }
.orn-wpis__hero img { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: var(--radius-card); }

.orn-wpis__tresc { max-width: 65ch; margin: 0 auto; padding: 0 24px 64px; }
.orn-wpis__tresc h2 { font-size: 27px; line-height: 1.3; margin: 0 0 20px; }
.orn-wpis__tresc p { font-size: 17px; line-height: 1.8; color: var(--text-body); margin: 0 0 48px; }
.orn-wpis__tresc p + h2 { margin-top: 0; }
.orn-wpis__tresc img { border-radius: var(--radius-card); }
.orn-wpis__tresc ul, .orn-wpis__tresc ol { font-size: 17px; line-height: 1.8; margin: 0 0 48px; padding-left: 24px; }

.orn-produkt-we-wpisie {
	display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 24px 32px 24px 24px; margin: 0 0 48px;
}
.orn-produkt-we-wpisie__obraz { display: block; aspect-ratio: 450 / 617; overflow: hidden; border-radius: var(--radius-card); }
.orn-produkt-we-wpisie__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orn-produkt-we-wpisie__tresc { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.orn-produkt-we-wpisie__tresc .orn-eyebrow { margin: 0; font-size: 11px; }
.orn-produkt-we-wpisie__nazwa { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text-brand); }
.orn-produkt-we-wpisie__cena { font-size: 18px; font-weight: 600; color: var(--text-body); }

.orn-czytajtakze { background: var(--surface-paper); border-top: 1px solid var(--border-divider); }
.orn-czytajtakze .orn-wrap { padding: 80px 0 96px; }
.orn-czytajtakze h2 { font-size: 32px; margin: 0 0 40px; }
.orn-czytajtakze .orn-blog__siatka { margin-top: 0; }
.orn-czytajtakze__przycisk { display: flex; justify-content: center; margin-top: 56px; }

@media (max-width: 1023px) {
	.orn-blognagl { padding: 40px 0 32px; }
	.orn-blognagl h1 { font-size: 40px; }
	.orn-blogsiatka { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
	.orn-blogkategorie { position: static; }
	.orn-wyrozniony { grid-template-columns: 1fr; }
	.orn-wyrozniony__obraz { min-height: 0; height: 240px; }
	.orn-wyrozniony__tresc { padding: 24px; }
	.orn-wyrozniony__tytul { font-size: 26px; }
	.orn-nlpas__siatka { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
	.orn-wpis__gora { padding-top: 40px; }
	.orn-wpis__gora h1 { font-size: 30px; }
	.orn-wpis__hero img { height: 260px; }
	.orn-produkt-we-wpisie { grid-template-columns: 120px 1fr; padding: 16px; gap: 16px; }
}

/* ================================================================== o nas */

.orn-onas-otwarcie {
	padding: 96px 0;
	display: grid; grid-template-columns: 1fr 490px; gap: 80px; align-items: center;
}
.orn-onas-otwarcie h1 { font-size: 64px; line-height: 1.1; margin: 0 0 36px; }
.orn-onas-otwarcie__motto {
	font-family: var(--font-display); font-size: 27px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	line-height: 1.55; color: var(--text-body); max-width: 23em; margin: 0;
}
.orn-onas-otwarcie__wizual { position: relative; }
.orn-onas-otwarcie__kolo {
	position: absolute; left: -36px; bottom: -24px; width: 150px; height: 150px;
	border-radius: 50%; border: 1.5px solid var(--gliniany); opacity: .35;
}
.orn-onas-otwarcie__wizual img {
	position: relative; display: block; width: 100%; max-width: 490px; height: 608px;
	object-fit: cover; border-radius: var(--radius-arch);
}

.orn-wartosci { background: var(--surface-paper); border-block: 1px solid var(--border-divider); }
.orn-wartosci__siatka { padding: 48px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.orn-wartosc { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.orn-kreska { display: block; width: 32px; height: 1.5px; background: var(--gliniany); }
.orn-wartosc p {
	font-family: var(--font-display); font-size: 22px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	color: var(--text-brand); margin: 0;
}

.orn-pracownia { padding: 96px 0; }
.orn-pracownia__tekst { max-width: 880px; margin: 0 auto 64px; text-align: center; }
.orn-pracownia__tekst h2 { font-size: 34px; line-height: 1.35; margin: 0 0 28px; }
.orn-pracownia__tekst p { font-size: 16px; line-height: 1.75; color: var(--text-body); max-width: 62ch; margin: 0 auto; }
.orn-pracownia__kolaz { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 28px; align-items: end; }
.orn-pracownia__kolaz img { display: block; width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-card); }
.orn-pracownia__kolaz .orn-pracownia__arkada { height: 520px; border-radius: var(--radius-arch); }

.orn-poznaj { background: var(--surface-cream); }
.orn-poznaj .orn-wrap { padding: 96px 0; }
.orn-poznaj h2 { font-size: 40px; text-align: center; margin: 0 0 64px; }
.orn-poznaj__osoby { display: flex; justify-content: center; gap: 120px; }
.orn-osoba { display: flex; flex-direction: column; align-items: center; text-align: center; }
.orn-osoba__kolo {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 240px; height: 240px; border-radius: 50%;
	border: 10px solid var(--surface-page); overflow: hidden;
	box-shadow: var(--shadow-2); margin-bottom: 24px;
	background: var(--sliwka);
}
.orn-osoba__kolo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orn-osoba__monogram { font-family: var(--font-znak); font-size: 84px; color: var(--krem); line-height: 1; transform: translateY(-6px); }
.orn-osoba h3 { font-size: 26px; margin: 0 0 8px; }
.orn-osoba p { font-size: 14px; color: var(--text-muted); margin: 0; }

.orn-wiecej { padding: 96px 0; }
.orn-wiecej h2 { font-size: 40px; text-align: center; margin: 0 0 64px; }
/* Trzy rowne prostokaty nie mowily, ktore zdanie jest wazne. Pierwsza karta
   jest wyznaniem wiary marki, wiec bierze cala lewa kolumne, sliwkowe tlo
   i znak w tle; dwie pozostale stoja jedna pod druga po prawej. */
.orn-wiecej__siatka {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px;
	grid-template-areas: "glowna druga" "glowna trzecia";
}
.orn-wiecej__karta {
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 36px 34px;
	display: flex; flex-direction: column; gap: 14px;
}
.orn-wiecej__karta:nth-child(2) { grid-area: druga; }
.orn-wiecej__karta:nth-child(3) { grid-area: trzecia; }
.orn-wiecej__karta--glowna {
	grid-area: glowna; position: relative; overflow: hidden;
	justify-content: center; padding: 56px 48px;
	background: var(--sliwka); border-color: var(--sliwka);
}
.orn-wiecej__znak {
	position: absolute; right: -24px; bottom: -64px;
	font-family: var(--font-znak); font-size: 220px; line-height: 1;
	color: var(--text-inverse); opacity: .1; pointer-events: none; user-select: none;
}
.orn-wiecej__karta--glowna .orn-kreska { background: var(--krem); opacity: .7; }
.orn-wiecej__karta--glowna .orn-wiecej__tytul { color: var(--text-inverse); position: relative; }
.orn-wiecej__tytul {
	font-family: var(--font-display); font-size: 24px; font-weight: 500;
	letter-spacing: var(--tracking-heading); text-transform: uppercase;
	color: var(--text-brand); margin: 0;
}
.orn-wiecej__karta--glowna .orn-wiecej__tytul { font-size: 30px; }
.orn-wiecej__karta p { font-size: 15px; line-height: 1.75; color: var(--text-body); margin: 0; }
/* Kolor tekstu w bordowej karcie musi stac PO regule ogolnej: obie maja
   te sama specyficznosc (0-1-1), wiec decyduje kolejnosc. */
.orn-wiecej__karta--glowna p { font-size: 17px; line-height: 1.7; color: var(--text-inverse); position: relative; }

/* Trzy osoby zamiast dwoch: 120 px odstepu rozjezdzalo je na krance ekranu. */
.orn-poznaj__osoby { gap: 72px; flex-wrap: wrap; }

.orn-klienci { background: var(--surface-paper); border-block: 1px solid var(--border-divider); }
.orn-klienci .orn-wrap { padding: 96px 0; }
.orn-klienci h2 { font-size: 40px; text-align: center; margin: 0 0 64px; }
.orn-klienci__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.orn-klient {
	position: relative; background: var(--surface-page);
	border: 1px solid var(--border-divider); border-radius: var(--radius-card);
	padding: 32px 30px; margin: 0;
	display: flex; flex-direction: column; gap: 18px;
}
.orn-klient__plakietka { position: absolute; right: 16px; top: 16px; }
.orn-klient blockquote { font-size: 14px; line-height: 1.7; color: var(--text-body); margin: 0; }
.orn-klient figcaption { margin-top: auto; }
.orn-klient figcaption span { font-size: 14px; font-weight: 600; color: var(--text-brand); }

.orn-zamkniecie { padding: 96px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.orn-zamkniecie__karta {
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); overflow: hidden;
	display: flex; flex-direction: column;
}
.orn-zamkniecie__karta--krem { background: var(--surface-cream); }
.orn-zamkniecie__obraz { display: block; height: 340px; overflow: hidden; }
.orn-zamkniecie__obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orn-zamkniecie__dol { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; }
.orn-zamkniecie__tytul {
	font-family: var(--font-display); font-size: 28px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	color: var(--text-brand);
}

/* ====================================================== projekty na zamowienie */

.orn-projekty-otwarcie { padding: 80px 0 72px; text-align: center; }
.orn-projekty-otwarcie h1 { font-size: 52px; margin: 0 0 24px; }
.orn-projekty-otwarcie p { font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 64ch; margin: 0 auto; }

.orn-proces { background: var(--surface-paper); border-block: 1px solid var(--border-divider); }
.orn-proces .orn-wrap { padding: 80px 0 96px; }
.orn-proces h2 { font-size: 34px; text-align: center; margin: 0 0 56px; }
.orn-proces__kroki { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; }
.orn-proces__kroki li {
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 32px 30px;
	display: flex; flex-direction: column; gap: 14px;
}
.orn-proces__nr { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--brzoskwinia); line-height: 1; }
.orn-proces__tytul {
	font-family: var(--font-display); font-size: 22px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading);
	line-height: 1.3; color: var(--text-brand);
}
.orn-proces__opis { font-size: 14px; line-height: 1.7; color: var(--text-body); }

.orn-sciezki-projekty { padding: 96px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.orn-sciezka-projekt {
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 48px 44px;
	display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.orn-sciezka-projekt--krem { background: var(--surface-cream); }
.orn-sciezka-projekt h2 { font-size: 30px; margin: 0; }
.orn-sciezka-projekt p { font-size: 15px; line-height: 1.7; color: var(--text-body); margin: 0; }
.orn-sciezka-projekt .orn-btn { margin-top: auto; }

.orn-formularz-zapytania { background: var(--surface-cream); border-block: 1px solid var(--border-divider); }
.orn-formularz-zapytania__inner { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0 96px; }
.orn-formularz-zapytania h2 { font-size: 34px; text-align: center; margin: 0 0 12px; }
.orn-formularz-zapytania > .orn-formularz-zapytania__inner > p { font-size: 15px; line-height: 1.7; color: var(--text-body); text-align: center; margin: 0 0 40px; }
.orn-formularz-zapytania__karta {
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); box-shadow: var(--shadow-1);
	padding: 48px 44px;
}
.orn-formularz-zapytania__brak { margin: 0; text-align: center; font-size: 15px; }

/* formularz CF7 w duchu systemu */
.wpcf7 form { display: flex; flex-direction: column; gap: 24px; }
.wpcf7 label { display: block; font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; }
.wpcf7 .wpcf7-text, .wpcf7 .wpcf7-select, .wpcf7 .wpcf7-textarea, .wpcf7 .wpcf7-date {
	width: 100%; box-sizing: border-box;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 15px; color: var(--text-body);
}
.wpcf7 .wpcf7-text, .wpcf7 .wpcf7-select, .wpcf7 .wpcf7-date { height: 48px; padding: 0 16px; }
.wpcf7 .wpcf7-textarea { min-height: 160px; padding: 12px 16px; }
.wpcf7 .wpcf7-text:focus, .wpcf7 .wpcf7-select:focus, .wpcf7 .wpcf7-textarea:focus { border-color: var(--action); outline: none; }
.wpcf7 .wpcf7-submit {
	align-self: flex-end;
	min-height: 52px; padding: 0 32px; border: 0; border-radius: var(--radius-pill);
	background: var(--action); color: var(--text-inverse);
	font-family: var(--font-ui); font-size: 15px; font-weight: 600; cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.wpcf7 .wpcf7-submit:hover { background: var(--action-hover); }
.wpcf7 .wpcf7-not-valid { border-color: var(--blad-obwodka) !important; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; font-weight: 600; color: var(--blad); margin-top: 6px; }
.wpcf7 .wpcf7-response-output {
	margin: 0; padding: 14px 18px; border-radius: var(--radius-notice);
	font-size: 14px; border: 1px solid var(--info-obwodka);
	background: var(--info-tlo); color: var(--info);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--sukces-obwodka); background: var(--sukces-tlo); color: var(--sukces); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--blad-obwodka); background: var(--blad-tlo); color: var(--blad); }

.orn-faq { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding: 96px 0; }
.orn-faq h2 { font-size: 34px; text-align: center; margin: 0 0 48px; }
.orn-faq__lista { border-top: 1px solid var(--border-divider); }
.orn-faq details { border-bottom: 1px solid var(--border-divider); }
.orn-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	min-height: 64px; padding: 16px 4px; cursor: pointer;
	font-size: 16px; font-weight: 600; color: var(--text-brand); list-style: none;
}
.orn-faq summary::-webkit-details-marker { display: none; }
.orn-faq summary svg { flex: none; transition: transform var(--dur-fast) var(--ease); }
.orn-faq details[open] summary svg { transform: rotate(180deg); }
.orn-faq details p { font-size: 15px; line-height: 1.75; color: var(--text-body); margin: 0; padding: 0 4px 24px; max-width: 60ch; }

.orn-projekty-zamkniecie { background: var(--surface-paper); border-top: 1px solid var(--border-divider); }
.orn-projekty-zamkniecie__siatka {
	padding: 96px 0;
	display: grid; grid-template-columns: 490px 1fr; gap: 80px; align-items: center;
}
.orn-projekty-zamkniecie__siatka img {
	display: block; width: 100%; max-width: 490px; height: 480px;
	object-fit: cover; border-radius: var(--radius-arch);
}
.orn-projekty-zamkniecie h2 { font-size: 34px; line-height: 1.3; margin: 0 0 20px; }
.orn-projekty-zamkniecie p { font-size: 16px; line-height: 1.7; color: var(--text-body); max-width: 48ch; margin: 0 0 32px; }

@media (max-width: 1023px) {
	.orn-onas-otwarcie { grid-template-columns: 1fr; gap: 40px; padding: 56px 0; }
	.orn-onas-otwarcie h1 { font-size: 44px; }
	.orn-onas-otwarcie__motto { font-size: 20px; }
	.orn-onas-otwarcie__wizual img { height: 440px; }
	.orn-wartosci__siatka { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; }
	.orn-pracownia { padding: 64px 0; }
	.orn-pracownia__kolaz { grid-template-columns: 1fr; }
	.orn-pracownia__kolaz img, .orn-pracownia__kolaz .orn-pracownia__arkada { height: 300px; }
	.orn-poznaj__osoby { flex-direction: column; align-items: center; gap: 48px; }
	.orn-wiecej__siatka { grid-template-columns: 1fr; grid-template-areas: "glowna" "druga" "trzecia"; }
	.orn-klienci__siatka { grid-template-columns: 1fr; }
	.orn-wiecej__karta--glowna { padding: 40px 28px; }
	.orn-wiecej__znak { font-size: 150px; }
	.orn-zamkniecie { grid-template-columns: 1fr; padding: 64px 0; }
	/* Nazwa i przycisk staly w jednym rzedzie z justify-content: space-between.
	   Na telefonie przycisk nie miescil sie obok napisu, wiec lamal sie na dwie
	   linie, a w drugiej karcie wychodzil poza jej prawa krawedz. Na waskim
	   ekranie ida jedno pod drugim, przycisk na pelna szerokosc. */
	.orn-zamkniecie__dol { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 20px; }
	.orn-zamkniecie__dol .orn-btn { width: 100%; }
	.orn-zamkniecie__tytul { font-size: 24px; }
	.orn-zamkniecie__obraz { height: 240px; }
	.orn-projekty-otwarcie h1 { font-size: 36px; }
	.orn-proces__kroki { grid-template-columns: 1fr; }
	.orn-sciezki-projekty { grid-template-columns: 1fr; padding: 64px 0; }
	.orn-formularz-zapytania__karta { padding: 24px 16px; }
	.orn-projekty-zamkniecie__siatka { grid-template-columns: 1fr; gap: 40px; padding: 64px 0; }
	.orn-projekty-zamkniecie__siatka img { height: 360px; }
}

/* ============================================================ konfigurator */

.orn-konf-hero {
	position: relative; overflow: hidden;
	background: var(--surface-paper); border-bottom: 1px solid var(--border-divider);
}
/* Figury zostaly, ale nie sa juz same: na arkadzie lezy zdjecie okazji,
   wiec hero pokazuje papeterie, a nie trzy kolorowe ksztalty. Wizual jest
   wlasna kolumna siatki, nie warstwa absolutna nad tekstem. */
.orn-konf-hero__inner {
	position: relative; padding: 48px 0 56px;
	display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center;
}
.orn-konf-hero__wizual { position: relative; height: 420px; }
.orn-konf-hero__arkada {
	position: absolute; right: 0; bottom: 0; width: 330px; height: 430px;
	border-radius: var(--radius-arch); background: var(--krem); overflow: hidden;
	box-shadow: var(--shadow-1);
}
/* Zdjecia okazji sa poziome (1920 x 1080), a arkada jest pionowa, wiec
   kadr trzeba przesunac na lewo od srodka: tam lezy zaproszenie, a nie
   samo tlo z monogramem. */
.orn-konf-hero__arkada img { width: 100%; height: 100%; object-fit: cover; object-position: 32% center; display: block; }
.orn-konf-hero__kolo1 { position: absolute; left: 10px; top: 40px; width: 140px; height: 140px; border-radius: 50%; background: var(--brzoskwinia); opacity: .72; }
.orn-konf-hero__kolo2 { position: absolute; left: 128px; top: 4px; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--sliwka); opacity: .5; }
.orn-konf-hero__nadtytul {
	margin: 0 0 16px; font-family: var(--font-display); font-size: 15px;
	color: var(--text-brand); text-transform: uppercase; letter-spacing: var(--tracking-brand);
}
.orn-konf-hero__inner h1 { font-size: var(--size-h1); margin: 0 0 18px; max-width: 16ch; }
.orn-konf-hero__lead { font-size: 17px; line-height: 1.65; max-width: 52ch; margin: 0 0 36px; }
/* Fakty jako karty z ikona, nie dwie kreski z tekstem pod spodem. */
.orn-konf-hero__fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px; }
.orn-konf-fakt {
	display: flex; gap: 14px; align-items: flex-start;
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 16px 18px;
}
.orn-konf-fakt__ikona {
	flex: none; width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--surface-tint); color: var(--sliwka);
}
.orn-konf-fakt__tresc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orn-konf-fakt__wart { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-konf-fakt__opis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.orn-konf-brak { padding: 56px 0 96px; }

.orn-konf { padding: 56px 0 96px; }
.orn-konf__form {
	display: grid; grid-template-columns: 1fr 432px;
	column-gap: 88px; align-items: start; margin: 0;
}
.orn-konfigurator { display: flex; flex-direction: column; gap: 56px; min-width: 0; }

.orn-konf-krok__naglowek { display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; }
.orn-konf-krok__naglowek span:first-child { flex: none; font-family: var(--font-display); font-size: 22px; color: var(--text-brand); }
.orn-konf-krok__naglowek h2 { font-size: 24px; margin: 0; }
.orn-konf-krok__opis { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.orn-konf-opcjonalne {
	display: inline-flex; align-items: center; padding: 4px 12px;
	border: 1px solid var(--border-input); border-radius: var(--radius-pill);
	font-size: 11px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
}

/* krok 01: wzory */
.orn-wzory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.orn-wzor {
	position: relative; display: flex; flex-direction: column; gap: 10px;
	min-height: 120px; padding: 16px;
	background: var(--surface-page); border: 1.5px solid var(--border-divider);
	border-radius: var(--radius-card); cursor: pointer;
	font-family: var(--font-ui); text-align: left;
	transition: border-color var(--dur-fast) var(--ease);
}
.orn-wzor:hover { border-color: var(--sliwka); }
.orn-wzor--wybrany { border-color: var(--action); background: var(--surface-tint); }
.orn-wzor__znacznik {
	position: absolute; right: 10px; top: 10px;
	display: none; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--action); color: var(--text-inverse); font-size: 12px; font-weight: 700;
}
.orn-wzor--wybrany .orn-wzor__znacznik { display: flex; }
.orn-wzor__deko { position: relative; display: block; height: 44px; }
.orn-wzor__deko span:first-child { position: absolute; left: 0; top: 0; width: 34px; height: 44px; border-radius: var(--radius-arch); background: var(--krem); }
.orn-wzor__deko span:last-child { position: absolute; left: 24px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--brzoskwinia); opacity: .7; }
.orn-wzor__nazwa { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--text-body); }

/* krok 02 */
.orn-konf-liczby { display: flex; gap: 24px; max-width: 440px; }
.orn-konf-liczby > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.orn-konf-liczby label { font-size: 14px; font-weight: 600; color: var(--text-body); }
.orn-konf-liczby input {
	height: 52px; padding: 0 16px; box-sizing: border-box; width: 100%;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	font-family: var(--font-ui); font-size: 16px; color: var(--text-body);
	background: var(--surface-page);
}

/* krok 03: elementy */
.orn-element { display: flex; gap: 16px; align-items: flex-start; padding: 18px 2px; border-bottom: 1px solid var(--border-divider); }
.orn-element--staly {
	background: var(--surface-paper); border-radius: var(--radius-card);
	border-bottom: 0; padding: 16px 18px; margin: 0 0 10px;
}
/* Ten sam checkbox marki co przy zgodzie w newsletterze: fabryczny kwadrat
   systemowy nie ma nic wspolnego z reszta sklepu. */
.orn-element input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
	border: 1.5px solid var(--border-input); border-radius: 6px;
	background: var(--surface-page);
	display: grid; place-content: center;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-element input[type="checkbox"]::before {
	content: ""; width: 11px; height: 6px;
	border-left: 2px solid var(--text-inverse); border-bottom: 2px solid var(--text-inverse);
	transform: rotate(-45deg) translate(1px, -1px) scale(.4);
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.orn-element input[type="checkbox"]:hover { border-color: var(--action); }
.orn-element input[type="checkbox"]:checked { background: var(--action); border-color: var(--action); }
.orn-element input[type="checkbox"]:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.orn-element input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.orn-element__tresc { flex: 1; min-width: 0; }
.orn-element__nazwa { display: block; margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--text-body); cursor: pointer; }
.orn-element__meta { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.orn-element__blad { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--blad); font-weight: 600; }
.orn-element__ilosc { flex: none; }
.orn-element__ilosc input {
	width: 92px; height: 44px; padding: 0 8px 0 14px; box-sizing: border-box;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	font-family: var(--font-ui); font-size: 15px; color: var(--text-body);
	background: var(--surface-page); text-align: center;
}
.orn-element__ilosc input:disabled { opacity: .45; background: var(--surface-disabled); }
.orn-element__kwota { flex: none; min-width: 92px; text-align: right; font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-element__cena { margin: 0; flex: none; font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-element__cena span { font-weight: 400; font-size: 13px; color: var(--text-muted); }

/* krok 04: plik */
.orn-konf-plik {
	border: 1.5px dashed var(--border-input); border-radius: var(--radius-card);
	padding: 24px; display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.orn-konf-plik__tytul { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--text-body); }
.orn-konf-plik__opis { margin: 0; font-size: 13px; color: var(--text-muted); }
.orn-konf-plik__ok { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--sukces); }
.orn-konf-plik__przycisk {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 24px;
	border: 1.5px solid var(--action); border-radius: var(--radius-pill);
	color: var(--action); font-size: 14px; font-weight: 600; cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.orn-konf-plik__przycisk:hover { background: var(--surface-tint); }
.orn-konf-info {
	display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
	padding: 14px 16px; background: var(--info-tlo);
	border: 1px solid var(--info-obwodka); border-radius: var(--radius-card);
}
.orn-konf-info span {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--info); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; font-family: var(--font-display);
}
.orn-konf-info p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }

/* podsumowanie */
.orn-podsumowanie { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.orn-podsumowanie__karta { background: var(--surface-paper); border-radius: var(--radius-card); padding: 28px; }
.orn-podsumowanie__nazwa { margin: 0 0 2px; font-size: 17px; font-weight: 600; color: var(--text-body); }
.orn-podsumowanie__wzor { margin: 0 0 18px; font-size: 13px; color: var(--text-muted); }
.orn-podsumowanie__pozycje { display: flex; flex-direction: column; border-top: 1px solid var(--border-divider); }
.orn-podsumowanie__wiersz {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--border-divider);
}
.orn-podsumowanie__wiersz--rabat span { font-size: 14px; font-weight: 600; color: var(--sukces); }
.orn-podsumowanie__poz-nazwa { display: block; font-size: 14px; font-weight: 500; color: var(--text-body); }
.orn-podsumowanie__poz-sub { display: block; font-size: 12px; color: var(--text-muted); }
.orn-podsumowanie__poz-kwota { flex: none; font-size: 14px; font-weight: 600; color: var(--text-body); }
.orn-podsumowanie__razem {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--len);
}
.orn-podsumowanie__razem span:first-child { font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-podsumowanie__razem span:last-child { font-size: 24px; font-weight: 600; color: var(--text-brand); }
.orn-konf-blad {
	display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
	padding: 14px 16px; background: var(--blad-tlo);
	border: 1px solid var(--blad-obwodka); border-radius: var(--radius-card);
}
.orn-konf-blad span {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--blad); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700;
}
.orn-konf-blad p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--blad); }
.orn-podsumowanie__przycisk {
	width: 100%; height: 52px; margin-top: 16px; border: 0;
	border-radius: var(--radius-pill); background: var(--action);
	color: var(--text-inverse); font-family: var(--font-ui);
	font-size: 15px; font-weight: 600; cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.orn-podsumowanie__przycisk:hover { background: var(--action-hover); }
.orn-podsumowanie__przycisk:disabled { opacity: .5; cursor: default; }
.orn-podsumowanie__przycisk:disabled:hover { background: var(--action); }
.orn-podsumowanie__stopka { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

.orn-probnik { position: relative; overflow: hidden; background: var(--surface-cream); border-radius: var(--radius-card); padding: 28px; }
.orn-probnik__kolo { position: absolute; right: -24px; top: -24px; width: 110px; height: 110px; border-radius: 50%; background: #fff; opacity: .4; }
.orn-probnik h3 { position: relative; font-size: 22px; margin: 0 0 10px; }
.orn-probnik p { position: relative; margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.orn-probnik a {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 24px;
	border: 1.5px solid var(--action); border-radius: var(--radius-pill);
	color: var(--action); font-size: 14px; font-weight: 600;
	transition: background var(--dur-fast) var(--ease);
}
.orn-probnik a:hover { background: rgba(255, 255, 255, .5); color: var(--action-hover); text-decoration: none; }

@media (max-width: 1023px) {
	/* Hero: kolumna 420 px nie miesci sie obok tekstu, a sekcja ma
	   overflow hidden, wiec zdjecie znikalo za prawa krawedzia i zostawal
	   sam rabek kola. Jedna kolumna: tekst, pod nim wizual na srodku. */
	.orn-konf-hero__inner { grid-template-columns: 1fr; gap: 36px; padding: 36px 0 48px; }
	.orn-konf-hero__wizual { height: 400px; width: min(330px, 100%); margin-inline: auto; }
	.orn-konf-hero__arkada { right: auto; left: 50%; transform: translateX(-50%); width: 100%; max-width: 330px; height: 400px; }
	.orn-konf-hero__kolo1 { left: -12px; top: 20px; width: 110px; height: 110px; }
	.orn-konf-hero__kolo2 { left: 86px; top: -8px; width: 52px; height: 52px; }
	.orn-konf-hero__fakty { grid-template-columns: 1fr; gap: 16px; }
	.orn-konf { padding: 40px 0 64px; }
	.orn-konf__form { grid-template-columns: 1fr; row-gap: 40px; }
	.orn-podsumowanie { position: static; }
	.orn-wzory { grid-template-columns: repeat(2, 1fr); }
	.orn-konf-liczby { flex-direction: column; max-width: none; }
	.orn-element { flex-wrap: wrap; }
	.orn-element__kwota { min-width: 0; margin-left: auto; }
}

/* siatka pol formularzy CF7 (dwa pola w rzedzie) */
.orn-cf7-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.orn-cf7-siatka p { margin: 0; }
.orn-cf7-pomoc { font-size: 13px; color: var(--text-muted); margin: 0 0 6px !important; }
.wpcf7 .wpcf7-file { font-size: 14px; padding: 10px 0; }
.wpcf7 .wpcf7-list-item { margin: 0; }
@media (max-width: 1023px) { .orn-cf7-siatka { grid-template-columns: 1fr; } }


/* ==================================================== strony informacyjne

   Kontakt, Dostawa i zwroty, Probnik i strony prawne dziela jeden zestaw
   komponentow: naglowek z leadem, sekcje, tabela stawek, kroki i blok
   sprzedawcy. Jeden wzorzec zamiast czterech osobnych ukladow. */

.orn-info__naglowek { max-width: 62ch; margin-bottom: 48px; }
.orn-info__lead { font-size: 18px; line-height: 1.65; color: var(--text-muted); margin: 12px 0 0; }
.orn-info__akcje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.orn-info__sekcja { margin: 0 0 56px; }
.orn-info__tytul { font-size: 26px; margin: 0 0 20px; }
.orn-info__podtytul { font-size: 15px; font-family: var(--font-ui); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-body); margin: 0 0 8px; }
.orn-info__tekst { font-size: 16px; line-height: 1.7; color: var(--text-body); margin: 0 0 16px; max-width: 68ch; }
.orn-info__uwaga { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 16px 0 0; }
.orn-info__pary { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* Darmowa dostawa to argument sprzedazowy, wiec stoi osobno i duzo. */
.orn-info__wyroznik {
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	background: var(--surface-cream); border-radius: var(--radius-card);
	padding: 20px 24px; margin: 0 0 24px;
}
.orn-info__wyroznik-etykieta { font-size: 14px; font-weight: 600; color: var(--text-body); }
.orn-info__wyroznik-kwota { font-size: 26px; font-weight: 600; color: var(--text-brand); font-variant-numeric: tabular-nums; }
.orn-info__wyroznik-opis { font-size: 13px; color: var(--text-muted); }

/* Ostrzezenie o braku prawa zwrotu: mowione wprost i wczesnie, nie w drobnym
   druku. Uczciwosc tutaj dziala na korzysc sklepu. */
.orn-info__ostrzezenie {
	background: var(--uwaga-tlo); border: 1px solid var(--uwaga-obwodka);
	border-radius: var(--radius-card); padding: 18px 22px; margin: 0 0 24px;
	font-size: 15px; line-height: 1.65; color: var(--text-body); max-width: 68ch;
}
.orn-info__ostrzezenie strong { color: var(--uwaga); display: block; margin-bottom: 6px; }

.orn-tabela { width: 100%; border-collapse: collapse; max-width: 640px; }
.orn-tabela th {
	text-align: left; padding: 0 16px 12px 0;
	font-family: var(--font-ui); font-size: 11px; font-weight: 600;
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
	border-bottom: 1px solid var(--border-divider);
}
.orn-tabela td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border-divider); font-size: 15px; color: var(--text-body); }
.orn-tabela th:last-child, .orn-tabela td:last-child { text-align: right; padding-right: 0; }
.orn-tabela__kwota { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.orn-info__czasy { display: flex; gap: 20px; flex-wrap: wrap; }
.orn-czas {
	flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px;
	border: 1px solid var(--border-divider); border-radius: var(--radius-card); padding: 20px 24px;
}
.orn-czas__co { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.orn-czas__ile { font-size: 22px; font-weight: 600; color: var(--text-brand); font-variant-numeric: tabular-nums; }
.orn-czas__opis { font-size: 13px; color: var(--text-muted); }

.orn-kroki { list-style: none; counter-reset: krok; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.orn-kroki li {
	counter-increment: krok; position: relative; padding-left: 44px;
	display: flex; flex-direction: column; gap: 4px;
}
.orn-kroki li::before {
	content: counter(krok); position: absolute; left: 0; top: 0;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--surface-cream); color: var(--action);
	font-size: 13px; font-weight: 700; line-height: 28px; text-align: center;
}
.orn-kroki__tytul { font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-kroki__opis { font-size: 15px; line-height: 1.65; color: var(--text-muted); }

.orn-lista-ptaszki { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.orn-lista-ptaszki li { display: flex; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.orn-lista-ptaszki li::before {
	content: "\2713"; flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--surface-cream); color: var(--action);
	font-size: 11px; font-weight: 700; line-height: 22px; text-align: center;
}

.orn-koperty { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.orn-koperty li {
	padding: 6px 14px; border: 1px solid var(--border-divider); border-radius: var(--radius-pill);
	font-size: 13px; color: var(--text-body); background: var(--surface-page);
}

.orn-probnik__uklad { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* dane sprzedawcy */
.orn-sprzedawca { border-top: 1px solid var(--border-divider); padding-top: 28px; margin-top: 16px; }
.orn-sprzedawca__uklad { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 720px; margin-top: 14px; }
.orn-adres-firmy { font-style: normal; font-size: 15px; line-height: 1.75; color: var(--text-body); }
.orn-dane { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 10px; }
.orn-dane dt { font-size: 13px; color: var(--text-muted); }
/* min-width: 0 zdejmuje domyslne "nie wezej niz tresc" z kolumny 1fr.
   Bez tego adres pracownia@ornamentconcept.pl, ktory nie ma gdzie sie
   zlamac, rozpychal siatke i cala strona "Dostawa i zwroty" jechala
   w bok o 4 px przy szerokosci 360 px. */
.orn-dane dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 15px; color: var(--text-body); }
.orn-dane dd a { color: var(--action); font-weight: 600; }

/* Kontakt wedlug ekranu z Claude Design: dane w dwoch kartach po lewej,
   formularz w karcie po prawej. Wczesniej lewa kolumna byla gola lista
   definicji z duzymi odstepami i nie trzymala sie niczego. */
.orn-kontakt { padding-bottom: 96px; }
.orn-kontakt__naglowek { max-width: 60ch; margin-bottom: 48px; }
.orn-kontakt__naglowek .entry-title { font-size: 44px; line-height: 1.12; margin: 0 0 16px; }
.orn-kontakt__lead { font-size: 17px; line-height: 1.7; color: var(--text-body); margin: 0; }
.orn-kontakt__uklad { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.orn-kontakt__dane { display: flex; flex-direction: column; gap: 28px; }

.orn-kontakt__karta {
	border: 1px solid var(--border-divider); border-radius: var(--radius-card);
	padding: 28px; background: var(--surface-page);
}
.orn-kontakt__karta--papier { background: var(--surface-paper); }
.orn-kontakt__karta .orn-eyebrow { margin: 0 0 18px; }

.orn-kontakt__pozycje { display: flex; flex-direction: column; gap: 16px; }
.orn-kontakt__etykieta { font-size: 12px; color: var(--text-muted); margin: 0 0 4px; }
.orn-kontakt__wartosc { font-size: 16px; font-weight: 600; color: var(--action); word-break: break-all; }
.orn-kontakt__wartosc--calosc { word-break: normal; white-space: nowrap; }
.orn-kontakt__wartosc:hover { color: var(--action-hover); }
.orn-kontakt__nota {
	font-size: 14px; line-height: 1.6; color: var(--text-body);
	margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border-divider);
}
.orn-kontakt__adres { font-style: normal; font-size: 15px; line-height: 1.75; color: var(--text-body); }
.orn-kontakt__nr { display: block; white-space: nowrap; }
.orn-kontakt__nr:first-of-type { margin-top: 10px; }

/* Formularz jest karta rowna kartom po lewej, wiec ma wlasna ramke,
   a nie wisi w powietrzu obok nich. */
.orn-kontakt__formularz {
	border: 1px solid var(--border-divider); border-radius: var(--radius-card);
	padding: 36px; background: var(--surface-page);
}
.orn-kontakt__tytul { font-size: 26px; margin: 0 0 24px; }

/* strony prawne */
.orn-prawna__naglowek { margin-bottom: 40px; }
.orn-prawna__data { font-size: 14px; color: var(--text-muted); margin: 10px 0 0; }
.orn-prawna__uklad { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.orn-prawna__spis { position: sticky; top: 24px; }
.orn-prawna__spis ol { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.orn-prawna__spis a { font-size: 14px; color: var(--text-body); }
.orn-prawna__spis a:hover { color: var(--action); }
.orn-prawna__tresc { max-width: 70ch; }
.orn-prawna__tresc h2 { font-size: 24px; margin: 44px 0 16px; scroll-margin-top: 24px; }
.orn-prawna__tresc h2:first-child { margin-top: 0; }
.orn-prawna__tresc h3 { font-size: 16px; font-family: var(--font-ui); font-weight: 600; text-transform: none; letter-spacing: 0; margin: 24px 0 8px; }
.orn-prawna__tresc p, .orn-prawna__tresc li { font-size: 16px; line-height: 1.75; color: var(--text-body); }
.orn-prawna__tresc ol, .orn-prawna__tresc ul { padding-left: 22px; margin: 0 0 18px; }

@media (max-width: 980px) {
	.orn-kontakt__uklad, .orn-prawna__uklad, .orn-probnik__uklad,
	.orn-info__pary, .orn-sprzedawca__uklad { grid-template-columns: 1fr; gap: 32px; }
	.orn-kontakt__naglowek .entry-title { font-size: 32px; }
	.orn-kontakt__formularz { padding: 24px 20px; }
	.orn-cf7 .wpcf7-form { grid-template-columns: 1fr; }
	.orn-cf7 .orn-cf7__pole--polowa { grid-column: 1 / -1; }
	.orn-prawna__spis { position: static; }
}


/* ------------------------------------------------ formularz kontaktowy CF7

   Markup daje wtyczka, wiec ubieramy jej klasy zamiast przebudowywac DOM.
   Komunikaty CF7 (sukces, blad walidacji) pojawiaja sie po przeladowaniu
   nad formularzem i biora ten sam jezyk co komunikaty WooCommerce. */
.orn-cf7__pole { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.orn-cf7__pole label { font-size: 14px; font-weight: 600; color: var(--text-body); }
.orn-cf7 input[type="text"],
.orn-cf7 input[type="email"],
.orn-cf7 select,
.orn-cf7 textarea {
	width: 100%; box-sizing: border-box; padding: 0 16px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 15px; color: var(--text-body);
}
.orn-cf7 input[type="text"],
.orn-cf7 input[type="email"],
.orn-cf7 select { height: 48px; }
.orn-cf7 textarea { padding: 14px 16px; line-height: 1.6; resize: vertical; min-height: 150px; }
.orn-cf7 input:focus,
.orn-cf7 select:focus,
.orn-cf7 textarea:focus { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.orn-cf7 .wpcf7-form-control-wrap { display: block; }

.orn-cf7__zgoda { margin: 4px 0 24px; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.orn-cf7__zgoda .wpcf7-list-item { margin: 0; }
.orn-cf7__zgoda label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 400; }
/* Ten sam checkbox marki co w newsletterze i w konfiguratorze. */
.orn-cf7__zgoda input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
	border: 1.5px solid var(--border-input); border-radius: 6px;
	background: var(--surface-page);
	display: grid; place-content: center;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.orn-cf7__zgoda input[type="checkbox"]::before {
	content: ""; width: 11px; height: 6px;
	border-left: 2px solid var(--text-inverse); border-bottom: 2px solid var(--text-inverse);
	transform: rotate(-45deg) translate(1px, -1px) scale(.4);
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.orn-cf7__zgoda input[type="checkbox"]:hover { border-color: var(--action); }
.orn-cf7__zgoda input[type="checkbox"]:checked { background: var(--action); border-color: var(--action); }
.orn-cf7__zgoda input[type="checkbox"]:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.orn-cf7__zgoda input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Imie i adres obok siebie, tak jak w projekcie. CF7 nie da siatki
   samo z siebie, wiec robi to CSS na dwoch pierwszych polach. */
.orn-cf7 .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.orn-cf7 .wpcf7-form > * { grid-column: 1 / -1; }
.orn-cf7 .orn-cf7__pole--polowa { grid-column: span 1; }

/* Strzalka w polu wyboru: fabryczna strzalka systemowa nie pasuje do reszty. */
.orn-cf7 select {
	appearance: none; -webkit-appearance: none;
	padding-right: 42px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 49%, var(--border-input) 50%, var(--border-input) 62%, transparent 63%),
	                  linear-gradient(-45deg, transparent 49%, var(--border-input) 50%, var(--border-input) 62%, transparent 63%);
	background-size: 9px 9px, 9px 9px;
	background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
	background-repeat: no-repeat;
}
.orn-cf7__akcje { margin: 0; }
.orn-cf7__akcje .orn-btn { min-height: 52px; padding: 0 32px; font-size: 15px; border: 0; cursor: pointer; }

/* komunikaty wtyczki */
.wpcf7 form .wpcf7-response-output {
	margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-notice);
	font-size: 14px; line-height: 1.6; border-width: 1px; border-style: solid;
}
.wpcf7 form.sent .wpcf7-response-output { background: var(--sukces-tlo); border-color: var(--sukces-obwodka); color: var(--sukces); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: var(--blad-tlo); border-color: var(--blad-obwodka); color: var(--blad); }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; color: var(--blad); }
.wpcf7-not-valid { border-color: var(--blad-obwodka) !important; }

/* ============================================ konfigurator: podglad wzoru */

/* Kafel wzoru dostaje drugi przycisk: sam wybor nie mowil nic o tym,
   jak kolekcja wyglada. Wyglad okna projektujemy w Claude Design,
   tutaj jest dzialajacy mechanizm z zaslepkami. */
/* Przycisk podgladu wszedl do srodka kafla. Nie da sie go zagniezdzic
   w przycisku wyboru (button w buttonie jest niedozwolony i przegladarka
   rozbija taki DOM), wiec kafel jest kontenerem pozycjonowanym: wybor
   wypelnia go w calosci, a podglad lezy nad nim w prawym dolnym rogu. */
.orn-wzor-kafel { position: relative; display: flex; flex-direction: column; }
.orn-wzor-kafel .orn-wzor { width: 100%; padding-bottom: 56px; }
.orn-wzor__podglad {
	position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 36px; padding: 0 14px; cursor: pointer;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-pill);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 13px; font-weight: 600;
	color: var(--text-body); text-decoration: none;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.orn-wzor__podglad:hover { border-color: var(--action); color: var(--action); background: var(--surface-tint); text-decoration: none; }
.orn-wzor__podglad:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.orn-wzor-kafel--wybrany .orn-wzor__podglad { border-color: var(--action); color: var(--action); }
@media (max-width: 640px) {
	/* W kaflu ~160 px ikona z napisem lamala przycisk na dwie linie. */
	.orn-wzor__podglad { white-space: nowrap; padding: 0 8px; left: 10px; right: 10px; bottom: 10px; }
	.orn-wzor__podglad svg { display: none; }
	.orn-wzor-kafel .orn-wzor { padding-bottom: 52px; }
}

body.orn-modal-otwarty { overflow: hidden; }
.orn-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.orn-modal__tlo { position: absolute; inset: 0; background: rgba(45, 26, 30, .55); }
.orn-modal__okno {
	position: relative; width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
	background: var(--surface-page); border-radius: var(--radius-card);
	box-shadow: var(--shadow-2); padding: 40px;
}
.orn-modal__x {
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: none; border: 1px solid var(--border-divider); border-radius: 50%;
	color: var(--text-body); cursor: pointer;
}
.orn-modal__x:hover { color: var(--action); border-color: var(--action); }
.orn-modal__tytul { font-size: 32px; margin: 8px 0 12px; }
.orn-modal__lead { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 28px; max-width: 54ch; }
.orn-modal__galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.orn-modal__kadr {
	aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: var(--radius-card);
	background: radial-gradient(circle at 74% 26%, rgba(226,177,157,.45), transparent 60%), var(--krem);
}
.orn-modal__monogram {
	font-family: var(--font-znak); font-size: 40px; font-weight: 500;
	letter-spacing: var(--tracking-heading); color: var(--sliwka); opacity: .3;
}
.orn-modal__nota { font-size: 13px; line-height: 1.65; color: var(--text-muted); margin: 20px 0 0; }
.orn-modal__nota a { color: var(--action); font-weight: 600; }
.orn-modal__akcje { margin-top: 28px; display: flex; gap: 12px; }

/* Zmiana wzoru: wybor, nie pozycja stala, wiec wyglada jak reszta elementow. */
/* Pusta przegrodka w miejscu ilosci: kwota "Zmiany wzoru" stoi w tym
   samym pionie, co kwoty pozostalych pozycji zestawu. */
.orn-element__ilosc--pusta { width: 92px; height: 44px; }

@media (max-width: 640px) {
	.orn-modal__okno { padding: 28px 20px; }
	.orn-modal__tytul { font-size: 26px; }
	.orn-modal__galeria { grid-template-columns: 1fr; }
}

/* ==================================================== papeteria: strona ogolna */

/* WERSJA ROBOCZA. Docelowy projekt tej strony przyjdzie z Claude Design. */
.orn-papogolna__naglowek { max-width: 68ch; margin: 0 0 56px; }
.orn-papogolna__naglowek .entry-title { font-size: 44px; line-height: 1.12; margin: 10px 0 16px; }
.orn-papogolna__lead { font-size: 17px; line-height: 1.75; color: var(--text-body); margin: 0; }
.orn-papogolna__sekcja { margin-bottom: 72px; }
.orn-papogolna__tytul { font-size: var(--size-h3); margin: 0 0 28px; }
.orn-papogolna__tekst { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0; max-width: 54ch; }
.orn-papogolna__nota { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin: 20px 0 0; max-width: 74ch; }

.orn-papogolna__okazje { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.orn-papkafel {
	display: flex; gap: 20px; align-items: stretch;
	border: 1px solid var(--border-divider); border-radius: var(--radius-card);
	background: var(--surface-page); color: var(--text-body); overflow: hidden;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.orn-papkafel:hover { border-color: var(--action); text-decoration: none; box-shadow: var(--shadow-1); }
.orn-papkafel__obraz {
	flex: none; width: 130px; display: grid; place-items: center;
	background: radial-gradient(circle at 70% 30%, rgba(226,177,157,.45), transparent 62%), var(--krem);
}
.orn-papkafel__monogram {
	font-family: var(--font-znak); font-size: 38px; font-weight: 500;
	letter-spacing: var(--tracking-heading); color: var(--sliwka); opacity: .3;
}
.orn-papkafel__tresc { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 24px 0; min-width: 0; }
.orn-papkafel__nazwa {
	font-family: var(--font-display); font-size: 26px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tracking-heading); color: var(--text-brand);
}
.orn-papkafel__opis { font-size: 14px; line-height: 1.6; color: var(--text-muted); font-weight: 400; }
.orn-papkafel__cta { margin-top: auto; align-self: flex-start; }
.orn-papkafel:hover .orn-papkafel__cta {
	background: var(--action); border-color: var(--action); color: var(--text-inverse);
}

.orn-papogolna__probnik {
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	background: var(--surface-paper); border-radius: var(--radius-card);
	padding: 40px 44px; margin-bottom: 88px;
}
.orn-papogolna__probnik .orn-papogolna__tytul { margin-bottom: 10px; }

@media (max-width: 760px) {
	.orn-papogolna__naglowek .entry-title { font-size: 32px; }
	.orn-papogolna__okazje { grid-template-columns: 1fr; }
	.orn-papkafel__obraz { width: 96px; }
	.orn-papogolna__probnik { padding: 28px 20px; }
}
.orn-tabela__meta { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* CF7 wstawia <br> miedzy etykieta a polem. W kolumnie flex ten <br> jest
   osobnym elementem siatki, wiec etykieta odrywala sie od pola o dwa odstepy. */
.orn-cf7__pole br { display: none; }

/* Cennik elementow na stronie ogolnej papeterii jest jedyna trescia sekcji,
   wiec 640 px zostawialo pol ekranu pustego pod pelnej szerokosci naglowkiem. */
.orn-papogolna .orn-tabela { max-width: 860px; }
.orn-papogolna__sekcja .orn-papogolna__nota { max-width: 860px; }

@media (max-width: 760px) {
	.orn-modal { padding: 12px; }
	.orn-wzory { grid-template-columns: 1fr 1fr; }
	.orn-papogolna .orn-tabela { max-width: none; }
	.orn-papogolna__probnik .orn-btn { width: 100%; }
}

/* ================================================================ kontakt: hero

   Strona zaczynala sie od bieli i dwoch akapitow. Zdjecie pracowni z ciemna
   maska daje jej poczatek i ten sam jezyk co hero na stronie glownej. */
.orn-kontakt-hero { position: relative; overflow: hidden; margin-bottom: 64px; }
.orn-kontakt-hero__tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orn-kontakt-hero__maska {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(45,26,30,.78) 0%, rgba(45,26,30,.55) 46%, rgba(45,26,30,.2) 100%);
}
.orn-kontakt-hero__inner { position: relative; padding: 96px 0 88px; max-width: 60ch; }
.orn-kontakt-hero__eyebrow { color: var(--brzoskwinia); }
.orn-kontakt-hero .entry-title { font-size: 52px; line-height: 1.1; margin: 0 0 18px; color: var(--text-inverse); }
.orn-kontakt-hero__lead { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.86); margin: 0; }

.orn-kontakt__karta-tytul {
	font-family: var(--font-display); font-size: 24px; line-height: 1.2;
	margin: 0 0 18px; color: var(--text-body);
}

/* ===================================================== wlasna lista wyboru

   Natywny <select> otwiera systemowa liste: kwadratowa, z niebieskim
   podswietleniem, bez zwiazku z reszta sklepu. CSS tego nie siega, wiec
   liste rysujemy sami, a oryginalny <select> zostaje w DOM i to on niesie
   wartosc do formularza. Bez JavaScriptu dziala fabryczny select. */
.orn-select { position: relative; }
.orn-select__natywny { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.orn-select__przycisk {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; height: 48px; box-sizing: border-box; padding: 0 16px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page); cursor: pointer; text-align: left;
	font-family: var(--font-ui); font-size: 15px; color: var(--text-body);
	transition: border-color var(--dur-fast) var(--ease);
}
.orn-select__przycisk:hover { border-color: var(--action); }
.orn-select__przycisk[aria-expanded="true"] { border-color: var(--action); }
.orn-select__przycisk:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.orn-select__przycisk svg { flex: none; color: var(--gliniany); transition: transform var(--dur-fast) var(--ease); }
.orn-select__przycisk[aria-expanded="true"] svg { transform: rotate(180deg); }
.orn-select__lista {
	position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
	margin: 0; padding: 6px; list-style: none;
	max-height: 280px; overflow-y: auto;
	background: var(--surface-page);
	border: 1px solid var(--border-divider); border-radius: var(--radius-card);
	box-shadow: var(--shadow-2);
}
.orn-select__lista[hidden] { display: none; }
.orn-select__opcja {
	padding: 10px 12px; border-radius: 10px; cursor: pointer;
	font-size: 15px; line-height: 1.4; color: var(--text-body);
}
.orn-select__opcja:hover,
.orn-select__opcja.orn-select__opcja--aktywna { background: var(--surface-tint); color: var(--action); }
.orn-select__opcja[aria-selected="true"] { background: var(--action); color: var(--text-inverse); font-weight: 600; }

/* ============================================== papeteria: rabat pod hero

   Kafelek "Rabat do -15%" siedzial w hero obok "dwoch tygodni", wiec czytal
   sie jak trzeci fakt do przelecenia wzrokiem. Tutaj ma miejsce na zdanie
   i pokazuje oba mechanizmy naliczania. */
.orn-rabat { background: var(--surface-paper); border-bottom: 1px solid var(--border-divider); }
.orn-rabat__inner { display: grid; grid-template-columns: 380px 1fr; gap: 56px; padding: 64px 0; align-items: start; }
.orn-rabat__tytul { font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
.orn-rabat__tekst { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0; }
.orn-rabat__karty { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.orn-rabat__karta {
	background: var(--surface-page); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 28px;
}
.orn-rabat__naglowek { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; color: var(--text-body); }
.orn-rabat__opis { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.orn-rabat__opis strong { color: var(--text-body); font-weight: 600; }
.orn-rabat__progi { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.orn-rabat__progi li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 8px 0; border-top: 1px solid var(--border-divider);
}
.orn-rabat__prog { font-size: 14px; color: var(--text-muted); }
.orn-rabat__procent { font-size: 15px; font-weight: 700; color: var(--action); }

/* ================================================ papeteria na wlasny wzor */
.orn-wlasny { padding: 88px 0; border-top: 1px solid var(--border-divider); }
.orn-wlasny__naglowek { max-width: 72ch; margin: 0 0 48px; }
.orn-wlasny__tytul { font-size: 34px; line-height: 1.2; margin: 0 0 18px; }
.orn-wlasny__lead { font-size: 16px; line-height: 1.75; color: var(--text-muted); margin: 0; }
.orn-wlasny__kroki {
	list-style: none; margin: 0 0 48px; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.orn-wlasny__krok {
	display: flex; flex-direction: column; gap: 8px;
	padding-top: 18px; border-top: 2px solid var(--brzoskwinia);
}
.orn-wlasny__nr { font-family: var(--font-display); font-size: 13px; letter-spacing: var(--tracking-brand); color: var(--text-brand); }
.orn-wlasny__krok-tytul { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-body); }
.orn-wlasny__krok-opis { font-size: 13px; line-height: 1.65; color: var(--text-muted); }
.orn-wlasny__formularz { max-width: 760px; }
.orn-wlasny__formularz-tytul { font-size: 24px; margin: 0 0 10px; }
.orn-wlasny__formularz-opis { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 24px; }
.orn-wlasny__karta {
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 32px;
}
.orn-wlasny__brak { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.orn-wlasny__odsylacz {
	background: var(--surface-paper); border: 1px solid var(--border-divider);
	border-radius: var(--radius-card); padding: 28px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.orn-wlasny__odsylacz p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); max-width: 60ch; }
.orn-wlasny__akcje { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================ konfigurator: wasze materialy */
.orn-materialy { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.orn-material {
	display: grid; grid-template-columns: 220px 1fr; gap: 4px 20px;
	padding: 16px 2px; border-bottom: 1px solid var(--border-divider);
}
.orn-material__co { font-size: 15px; font-weight: 600; color: var(--text-body); }
.orn-material__po { font-size: 13px; line-height: 1.5; color: var(--text-muted); grid-column: 1; }
.orn-material__przyklad {
	grid-column: 2; grid-row: 1 / span 2;
	font-size: 13px; line-height: 1.65; color: var(--text-muted);
	background: var(--surface-paper); border-radius: var(--radius-input); padding: 12px 14px;
}
.orn-material__etykieta { font-weight: 600; color: var(--text-body); }

@media (max-width: 1023px) {
	.orn-kontakt-hero__inner { padding: 64px 0 56px; }
	.orn-kontakt-hero .entry-title { font-size: 34px; }
	.orn-rabat__inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
	.orn-rabat__karty { grid-template-columns: 1fr; }
	.orn-wlasny { padding: 56px 0; }
	.orn-wlasny__kroki { grid-template-columns: 1fr 1fr; }
	.orn-wlasny__tytul { font-size: 26px; }
	.orn-material { grid-template-columns: 1fr; }
	.orn-material__przyklad { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
	.orn-wlasny__kroki { grid-template-columns: 1fr; }
}

/* Progi rabatowe pod tabela cen na stronie ogolnej papeterii. */
.orn-papogolna__rabaty { margin-top: 24px; }
.orn-papogolna__progi {
	list-style: none; margin: 18px 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.orn-papogolna__progi li {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 16px; background: var(--surface-paper);
	border-radius: var(--radius-card);
}
.orn-papogolna__prog { font-size: 13px; color: var(--text-muted); }
.orn-papogolna__procent { font-size: 20px; font-weight: 700; color: var(--action); font-family: var(--font-display); }
.orn-papogolna__nota strong { color: var(--text-body); font-weight: 600; }

@media (max-width: 1023px) {
	.orn-papogolna__progi { grid-template-columns: repeat(2, 1fr); }
}

/* Pola daty, telefonu i pliku w formularzach CF7. Kontaktowy ich nie mial,
   wiec wczesniej nie bylo czego ubierac; formularz papeterii na wlasny wzor
   ma wszystkie trzy i bez tego wygladaly jak surowe kontrolki przegladarki. */
.orn-cf7 input[type="tel"],
.orn-cf7 input[type="date"] {
	width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px;
	border: 1.5px solid var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 15px; color: var(--text-body);
}
.orn-cf7 input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.orn-cf7 input[type="file"] {
	width: 100%; box-sizing: border-box; padding: 12px 14px;
	border: 1.5px dashed var(--border-input); border-radius: var(--radius-input);
	background: var(--surface-page);
	font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); cursor: pointer;
}
.orn-cf7 input[type="file"]::file-selector-button {
	margin-right: 14px; padding: 8px 18px; cursor: pointer;
	border: 1.5px solid var(--action); border-radius: var(--radius-pill);
	background: transparent; color: var(--action);
	font-family: var(--font-ui); font-size: 13px; font-weight: 600;
}
.orn-cf7 input[type="file"]:hover { border-color: var(--action); }
.orn-cf7__pomoc { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.orn-cf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--blad); }

/* Karta formularza jest waska, wiec siatka dwukolumnowa dziala dopiero
   od szerszych ekranow; nizej wszystko idzie jedna kolumna. */
.orn-wlasny__karta .orn-cf7__pole--polowa { grid-column: 1 / -1; }
@media (min-width: 720px) {
	.orn-wlasny__karta .orn-cf7__pole--polowa { grid-column: span 1; }
}

/* Wlasna lista wyboru zastepuje tez select sortowania: przycisk dziedziczy
   ksztalt pigulki, lista wyjezdza pod nim. Select zostaje w DOM z wartoscia. */
.orn-archiwum .woocommerce-ordering .orn-select { min-width: 220px; }
.orn-archiwum .woocommerce-ordering .orn-select__przycisk {
	height: 44px; border-radius: var(--radius-pill);
	font-size: 14px; font-weight: 600;
}

/* ==================================================== mobile: szczelnosc

   Znaleziska audytu na 375 px. Kazda poprawka ma zmierzona przyczyne. */

/* Naglowek kanalu Instagrama to jedno nielamliwe slowo "@ornament.concept".
   Przy fabrycznym --size-h2 mialo 437 px i rozpychalo caly uklad strony
   do 461 px: to bylo zrodlo przesuwania prawo-lewo na telefonie. */
.orn-insta__naglowek h2 { overflow-wrap: anywhere; }
@media (max-width: 640px) {
	.orn-insta__naglowek h2 { font-size: clamp(20px, 6.6vw, 30px); letter-spacing: .04em; }
}

/* Nazwy kategorii w kaflach okazji ("GRATULACYJNE") nie miescily sie
   w polowie ekranu i byly uciete w polowie slowa. */
@media (max-width: 640px) {
	.orn-okazja__dol { font-size: 16px; gap: 8px; padding: 10px 14px; min-height: 56px; }
}

/* Pasek nad siatka sklepu: licznik wynikow i sortowanie obok siebie
   potrzebowaly ~400 px, wiec caly grid archiwum rozjezdzal strone o 31 px.
   Na telefonie jedno pod drugim, sortowanie na pelna szerokosc. */
@media (max-width: 640px) {
	.orn-archiwum__pasek { flex-direction: column; align-items: stretch; gap: 10px; }
	.orn-archiwum .woocommerce-ordering,
	.orn-archiwum .woocommerce-ordering .orn-select { width: 100%; min-width: 0; }
	.orn-archiwum .woocommerce-ordering select.orderby { width: 100%; }
}
@media (max-width: 1023px) {
	/* minmax(0,1fr): kolumna grida nie moze byc szersza niz ekran przez
	   min-content dziecka (to wlasnie robil pasek sortowania) */
	.orn-archiwum { grid-template-columns: minmax(0, 1fr); }
}

/* Dlugie slowa w tytulach kafli produktow ("podziękowaniem") nie moga
   poszerzac karty; lamiemy w razie potrzeby. */
ul.products li.product .woocommerce-loop-product__title { overflow-wrap: break-word; }

/* Dymek cookies na waskim ekranie nie moze byc szerszy niz okno. */
.orn-cookies { max-width: min(560px, calc(100vw - 32px)); }

/* Pas newslettera na blogu: kolumna 480 px nie miesci sie na telefonie
   i rozpychala strone o 26 px. */
@media (max-width: 1023px) {
	.orn-nlpas__siatka { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
	.orn-nlpas h2 { font-size: 28px; }
}
@media (max-width: 640px) {
	.orn-nlpas__rzad { flex-direction: column; }
	.orn-nlpas__rzad .orn-btn { width: 100%; min-height: 48px; }
}

/* Kolo dekoracyjne kafla okazji wystawalo 5 px poza prawa krawedz. */
.orn-okazja { overflow: hidden; }

/* Kanal Instagrama: wtyczka potrafi wypchnac przycisk Obserwuj o wlos
   poza ekran; nic z jej srodka nie ma prawa poszerzac strony. */
.orn-insta__feed { overflow-x: hidden; }
.orn-insta__feed #sb_instagram .sbi_follow_btn a { max-width: calc(100vw - 48px); box-sizing: border-box; }

/* Surowe pole pliku CF7 (formularz "Projekty na zamowienie" siedzi w tresci
   strony, poza .orn-cf7) mialo naturalna szerokosc 374 px i rozpychalo
   strone o 40 px. Zaden formant nie moze byc szerszy niz kontener. */
.wpcf7 input[type="file"] { max-width: 100%; box-sizing: border-box; }
.wpcf7 input, .wpcf7 select, .wpcf7 textarea { max-width: 100%; box-sizing: border-box; }

/* Cele dotykowe: odnosniki w stopce i dane kontaktowe sa czystym tekstem
   13-16 px, wiec palcem trafia sie w nie na styk. Dokladamy pole dotyku
   bez zmiany wygladu (padding zamiast wiekszej czcionki). */
@media (max-width: 1023px) {
	.orn-footer__linki a { display: inline-block; padding-block: 8px; }
	.orn-kontakt__wartosc { display: inline-block; padding-block: 8px; }
}

/* Adres e-mail pracowni lamal sie na "...concept.p / l": o wlos za szeroki
   dla karty. Mniejszy stopien na telefonie miesci go w jednej linii. */
@media (max-width: 640px) {
	.orn-kontakt__wartosc { font-size: 15px; }
}

/* Zdjecie okazji w kaflu papeterii zamiast monogramu. Kadr pionowy,
   bo kolumna zdjecia ma 130 px szerokosci przy pelnej wysokosci kafla. */
/* Zdjecia okazji sa poziome (1920 x 1080), a kolumna kafla ma 130 px przy
   pelnej wysokosci, wiec kadr domyslny wypadal na srodku obrazu, czyli na
   duzym monogramie. Przesuwamy go na lewo, gdzie lezy zaproszenie. */
.orn-papkafel__obraz img { width: 100%; height: 100%; object-fit: cover; object-position: 28% center; display: block; }
@media (max-width: 640px) {
	.orn-papkafel__obraz { width: 104px; }
}