/*
 * NAORI – strona główna (szablon templates/template-naori-home.php)
 * Wszystkie reguły są zawężone do :is(#naori, .naori-foot), żeby nie wpływać na Elementor/Astrę na innych podstronach
 * i żeby style globalne (Astra, Elementor Kit) nie nadpisywały projektu.
 *
 * Breakpointy (jak w Elementorze): tablet ≤ 1024px, mobile ≤ 767px.
 */

/* ------------------------------------------------------------------ Fonty (lokalnie) */
@font-face {
	font-family: "NAORI DM Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "NAORI DM Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/dm-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "NAORI Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "NAORI Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ Tokeny */
:is(#naori, .naori-foot) {
	--n-ink: #1e1f1f;
	--n-ink2: #303635;
	--n-mid: #616161;
	--n-gold: #8c846c;
	--n-line: #e0e0e0;
	--n-ph: #e4e2dd;
	--n-sand: #f4f3f0;
	--n-dark: #161717;
	--n-sans: "NAORI DM Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--n-ui: "NAORI Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--n-max: 1440px;
	--n-pad: 56px;
	--n-sec: 100px; /* v11: mniejsze odstępy między sekcjami (było 130) */
	--n-edge: calc(max(0px, (100vw - var(--n-max)) / 2) + var(--n-pad));
	--n-ease: cubic-bezier(.2, .7, .3, 1);

	/*
	 * Szkło (v9) – jeden system wg referencji: przestrzenna tafla, a nie płaski prostokąt z blur.
	 * Wspólne: gradient powierzchni (światło od lewej góry), jasna krawędź i highlight u góry,
	 * delikatna poświata wewnątrz, miękki cień pod spodem. Intensywność zależy od tła:
	 * "dark" – na zdjęciach, pod białym tekstem; "light" – pod ciemnym tekstem.
	 * Hover (elementy klikalne): więcej światła, jaśniejsza krawędź, uniesienie, głębszy cień.
	 */
	--n-r: var(--naori-radius, 8px);
	--n-glass-dark: linear-gradient(150deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .09) 42%, rgba(255, 255, 255, .04) 100%);
	--n-glass-dark-fx: blur(18px) saturate(165%) brightness(.78);
	--n-glass-dark-edge: rgba(255, 255, 255, .3);
	/* "liquid glass" (v11): miękka poświata przy brzegach + załamanie światła na krawędziach (góra-lewo jaśniej) */
	--n-glass-dark-inset: inset 2px 2px 4px -2px rgba(255, 255, 255, .55), inset -2px -2px 4px -2px rgba(255, 255, 255, .22), inset 0 0 18px rgba(255, 255, 255, .08);
	--n-glass-dark-inset-hover: inset 2px 2px 5px -2px rgba(255, 255, 255, .75), inset -2px -2px 5px -2px rgba(255, 255, 255, .36), inset 0 0 24px rgba(255, 255, 255, .16);
	--n-glass-light: linear-gradient(150deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .58) 48%, rgba(255, 255, 255, .5) 100%);
	--n-glass-light-fx: blur(22px) saturate(180%);
	--n-glass-light-edge: rgba(255, 255, 255, .85);
	--n-glass-light-inset: inset 2px 2px 4px -2px #fff, inset -2px -2px 4px -2px rgba(255, 255, 255, .7), inset 0 0 16px rgba(255, 255, 255, .4);
	/* Obwódka "soczewki": jasna przy lewym górnym i prawym dolnym rogu, zanika po bokach */
	--n-glass-rim: linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .2) 26%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .16) 74%, rgba(255, 255, 255, .6) 100%);
	--n-glass-shadow: 0 2px 4px -2px rgba(0, 0, 0, .16), 0 18px 30px -18px rgba(0, 0, 0, .42);
	--n-glass-shadow-hover: 0 4px 8px -4px rgba(0, 0, 0, .2), 0 30px 44px -24px rgba(0, 0, 0, .52);
	/* zgodność wstecz (starsze reguły) */
	--n-glass-edge: var(--n-glass-dark-edge);
	--n-glass-shine: var(--n-glass-dark-inset);
	--n-shadow-soft: var(--n-glass-shadow);

	position: relative;
	background: #fff;
	color: var(--n-ink);
	font-family: var(--n-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.55;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* ------------------------------------------------------------------ Reset (tylko w :is(#naori, .naori-foot)) */
:is(#naori, .naori-foot) *,
:is(#naori, .naori-foot) *::before,
:is(#naori, .naori-foot) *::after { box-sizing: border-box; }
:is(#naori, .naori-foot) h1, :is(#naori, .naori-foot) h2, :is(#naori, .naori-foot) h3, :is(#naori, .naori-foot) h4, :is(#naori, .naori-foot) p, :is(#naori, .naori-foot) ul, :is(#naori, .naori-foot) ol, :is(#naori, .naori-foot) dl, :is(#naori, .naori-foot) dd, :is(#naori, .naori-foot) figure, :is(#naori, .naori-foot) address {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
:is(#naori, .naori-foot) ul, :is(#naori, .naori-foot) ol { list-style: none; }
:is(#naori, .naori-foot) address { font-style: normal; }
:is(#naori, .naori-foot) a { color: inherit; text-decoration: none; box-shadow: none; }
:is(#naori, .naori-foot) a:hover, :is(#naori, .naori-foot) a:focus { color: inherit; }
:is(#naori, .naori-foot) button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	line-height: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
:is(#naori, .naori-foot) button:hover, :is(#naori, .naori-foot) button:focus { background: none; color: inherit; }
:is(#naori, .naori-foot) img, :is(#naori, .naori-foot) video { display: block; max-width: 100%; height: auto; }
:is(#naori, .naori-foot) :focus-visible { outline: 2px solid var(--n-gold); outline-offset: 3px; }
:is(#naori, .naori-foot) sup.n-reg { font-size: .45em; vertical-align: top; position: relative; top: .1em; margin-left: 1px; line-height: 1; }
:is(#naori, .naori-foot) .n-gold { color: var(--n-gold); }
:is(#naori, .naori-foot) .n-skip {
	position: absolute; left: 16px; top: -100px; z-index: 1000;
	background: #fff; color: var(--n-ink); padding: 10px 16px;
}
:is(#naori, .naori-foot) .n-skip:focus { top: 16px; }

/* ------------------------------------------------------------------ Layout */
:is(#naori, .naori-foot) .n-wrap {
	width: 100%;
	max-width: var(--n-max);
	margin: 0 auto;
	padding-left: var(--n-pad);
	padding-right: var(--n-pad);
}
/* v14: jeden rytm odstępów – sekcja ma odstęp tylko od góry, więc między dwiema sekcjami jest zawsze --n-sec.
   Dolny odstęp mają tylko sekcje przed pasem w kolorze (lokalizacje) i ostatnia przed stopką. */
:is(#naori, .naori-foot) .n-sec { padding: var(--n-sec) 0 0; }
:is(#naori, .naori-foot) .n-art,
:is(#naori, .naori-foot) .n-contact { padding-bottom: var(--n-sec); }

/* Media / placeholdery */
:is(#naori, .naori-foot) .n-media { position: relative; overflow: hidden; background: var(--n-ph); }
:is(#naori, .naori-foot) .n-media > .n-img,
:is(#naori, .naori-foot) .n-media > picture,
:is(#naori, .naori-foot) .n-media > .n-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(#naori, .naori-foot) .n-img { width: 100%; height: 100%; object-fit: cover; }
:is(#naori, .naori-foot) .n-ph { display: block; background: var(--n-ph); }

/* ------------------------------------------------------------------ Typografia */
:is(#naori, .naori-foot) .n-eyebrow {
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px; /* v14: było 14 */
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--n-gold);
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-eyebrow--s { font-size: 11px; }
:is(#naori, .naori-foot) .n-eyebrow--light { color: rgba(255, 255, 255, .8); }
:is(#naori, .naori-foot) .n-nocase { text-transform: none; }
:is(#naori, .naori-foot) .n-num {
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--n-gold);
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-h52 { font-weight: 300; font-size: 42px; line-height: 1.1; letter-spacing: -.6px; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-h40 { font-weight: 300; font-size: 34px; line-height: 1.12; letter-spacing: -.5px; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-h32 { font-weight: 300; font-size: 27px; line-height: 1.18; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-h21 { font-weight: 400; font-size: 21px; line-height: 1.28; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-lead26 { font-weight: 300; font-size: 21px; line-height: 1.45; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-lead22 { font-weight: 300; font-size: 19px; line-height: 1.5; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-body18 { font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--n-ink2); }
:is(#naori, .naori-foot) .n-body16 { font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-body16--dark { color: var(--n-ink2); }

/* ------------------------------------------------------------------ Przyciski */
/* System przycisków NAORI (tokeny --naori-btn-* w style.css – wspólne z podstronami i banerem cookies). */
:is(#naori, .naori-foot) .n-btn {
	--b-fill: var(--naori-btn-black-fill);
	--b-fill-hover: var(--naori-btn-black-fill-hover);
	--b-bg: var(--naori-btn-black-bg);
	--b-border: var(--naori-btn-black-border);
	--b-border-hover: var(--naori-btn-black-border-hover);
	--b-text: var(--naori-btn-black-text);
	--b-shadow: var(--naori-btn-black-shadow);
	--b-shadow-hover: var(--naori-btn-black-shadow-hover);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 28px;
	border: 1px solid var(--b-border);
	border-radius: var(--n-r);
	background: var(--b-fill) var(--b-bg) 0 100% / 100% 200% no-repeat;
	color: var(--b-text);
	font-family: var(--n-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .2px;
	white-space: nowrap;
	box-shadow: var(--b-shadow);
	transition: var(--naori-btn-transition);
}
:is(#naori, .naori-foot) .n-btn:hover,
:is(#naori, .naori-foot) .n-btn:focus-visible {
	background-color: var(--b-fill-hover);
	background-position: 0 0;
	border-color: var(--b-border-hover);
	color: var(--b-text);
	box-shadow: var(--b-shadow-hover);
	transform: translateY(-3px);
}
:is(#naori, .naori-foot) .n-btn:active { transform: translateY(0); box-shadow: var(--b-shadow); }
:is(#naori, .naori-foot) .n-btn--light {
	-webkit-backdrop-filter: var(--naori-btn-white-fx);
	backdrop-filter: var(--naori-btn-white-fx);
	--b-fill: var(--naori-btn-white-fill);
	--b-fill-hover: var(--naori-btn-white-fill-hover);
	--b-bg: var(--naori-btn-white-bg);
	--b-border: var(--naori-btn-white-border);
	--b-border-hover: var(--naori-btn-white-border-hover);
	--b-text: var(--naori-btn-white-text);
	--b-shadow: var(--naori-btn-white-shadow);
	--b-shadow-hover: var(--naori-btn-white-shadow-hover);
}
/* Header: na hero wariant biały, po przewinięciu (jasne szkło) – czarny */
:is(#naori, .naori-foot) .n-header.is-light .n-header__cta {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	--b-fill: var(--naori-btn-black-fill);
	--b-fill-hover: var(--naori-btn-black-fill-hover);
	--b-bg: var(--naori-btn-black-bg);
	--b-border: var(--naori-btn-black-border);
	--b-border-hover: var(--naori-btn-black-border-hover);
	--b-text: var(--naori-btn-black-text);
	--b-shadow: var(--naori-btn-black-shadow);
	--b-shadow-hover: var(--naori-btn-black-shadow-hover);
}
/* Większy wariant – główne CTA w hero i w headerze */
:is(#naori, .naori-foot) .n-btn--primary { min-height: 52px; padding: 0 34px; font-size: 16px; }
:is(#naori, .naori-foot) .n-header__cta.n-btn--primary { min-height: 46px; padding: 0 28px; font-size: 15px; }
:is(#naori, .naori-foot) .n-btn--sm { min-height: 44px; padding: 0 24px; }

/*
 * Link tekstowy (bez strzałek – v9): stałe podkreślenie, na hover linia "przewija się"
 * (znika w prawo i wraca od lewej) – wyraźny sygnał klikalności, bez ciężkiego efektu.
 */
:is(#naori, .naori-foot) .n-cta2,
:is(#naori, .naori-foot) .n-ulink {
	display: inline-block;
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
}
:is(#naori, .naori-foot) .n-cta2 { font-size: 16px; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-cta2--s { font-size: 15px; }
:is(#naori, .naori-foot) .n-cta2:hover,
:is(#naori, .naori-foot) .n-cta2:focus-visible,
:is(#naori, .naori-foot) .n-ulink:hover,
:is(#naori, .naori-foot) .n-ulink:focus-visible,
:is(#naori, .naori-foot) a:hover .n-ulink,
:is(#naori, .naori-foot) a:focus-visible .n-ulink { animation: naori-underline .7s var(--n-ease); }
@keyframes naori-underline {
	0% { background-size: 100% 1px; background-position: 100% 100%; }
	45% { background-size: 0 1px; background-position: 100% 100%; }
	46% { background-size: 0 1px; background-position: 0 100%; }
	100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Pasek sekcji: nadtytuł + link */
:is(#naori, .naori-foot) .n-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--n-line);
	margin-bottom: 48px;
}
:is(#naori, .naori-foot) .n-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}
:is(#naori, .naori-foot) .n-sechead__l { display: flex; flex-direction: column; gap: 14px; }
:is(#naori, .naori-foot) .n-sechead__r { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; }
:is(#naori, .naori-foot) .n-cta2--light { color: #fff; }

/* Strzałki slidera */
:is(#naori, .naori-foot) .n-arrows { display: flex; gap: 10px; }
/* Strzałki slidera – okrągłe przyciski w białym wariancie systemu */
:is(#naori, .naori-foot) .n-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--naori-btn-white-border);
	border-radius: 50%;
	background: var(--naori-btn-white-fill) var(--naori-btn-white-bg) 0 100% / 100% 200% no-repeat;
	-webkit-backdrop-filter: var(--naori-btn-white-fx);
	backdrop-filter: var(--naori-btn-white-fx);
	color: var(--n-ink);
	font-size: 17px;
	line-height: 1;
	box-shadow: var(--naori-btn-white-shadow);
	transition: background-position .45s var(--n-ease), transform .45s var(--n-ease), box-shadow .45s var(--n-ease), opacity .3s ease;
}
:is(#naori, .naori-foot) .n-arrow:hover:not(:disabled),
:is(#naori, .naori-foot) .n-arrow:focus-visible { color: var(--n-ink); background: var(--naori-btn-white-fill-hover) var(--naori-btn-white-bg) 0 0 / 100% 200% no-repeat; transform: translateY(-3px); box-shadow: var(--naori-btn-white-shadow-hover); }
:is(#naori, .naori-foot) .n-arrow:active:not(:disabled) { transform: translateY(0); }
:is(#naori, .naori-foot) .n-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }

/* Szkło – tafla na zdjęciu (patrz tokeny). ::before – miękkie światło z lewej góry, mocniejsze na hover. */
:is(#naori, .naori-foot) .n-glass {
	position: relative;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--n-r);
	background: var(--n-glass-dark);
	box-shadow: var(--n-glass-dark-inset), var(--n-glass-shadow);
	-webkit-backdrop-filter: var(--n-glass-dark-fx);
	backdrop-filter: var(--n-glass-dark-fx);
	color: #fff;
}
:is(#naori, .naori-foot) .n-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 60%);
	opacity: .7;
	pointer-events: none;
	transition: opacity .5s var(--n-ease);
}
/* Obwódka szkła (pseudo-element z maską – działa z zaokrągleniem) */
:is(#naori, .naori-foot) .n-glass::after,
:is(#naori, .naori-foot) .n-hero__tile::after,
:is(#naori, .naori-foot) .n-strip__body::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 1px;
	border-radius: inherit;
	background: var(--n-glass-rim);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .8;
	pointer-events: none;
	transition: opacity .5s var(--n-ease);
}
:is(#naori, .naori-foot) .n-glass--light {
	border-color: var(--n-glass-light-edge);
	background: var(--n-glass-light);
	box-shadow: var(--n-glass-light-inset), 0 2px 4px -2px rgba(20, 20, 18, .1), 0 18px 30px -20px rgba(20, 20, 18, .34);
	-webkit-backdrop-filter: var(--n-glass-light-fx);
	backdrop-filter: var(--n-glass-light-fx);
	color: var(--n-ink);
}

/* Animacja wejścia przy przewijaniu */
:is(#naori, .naori-foot).is-js .n-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s var(--n-ease); }
:is(#naori, .naori-foot).is-js .n-rv.is-in { opacity: 1; transform: none; }

/* ================================================================== 00/01 HEADER (tryb szkicu) */
body.naori-draft { margin: 0; background: #fff; }
:is(#naori, .naori-foot) .n-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	color: #fff;
	transition: transform .4s var(--n-ease);
}
body.admin-bar :is(#naori, .naori-foot) .n-header { top: 32px; }
:is(#naori, .naori-foot) .n-topbar {
	height: 24px; /* v9: węższy pasek – lżejszy, mniej miejsca */
	background: rgba(36, 37, 37, .66);
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	overflow: hidden;
	font-variation-settings: normal;
	transition: height .35s var(--n-ease);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Nieskończony slider: JS powiela grupę, ścieżka przesuwa się o połowę swojej szerokości */
:is(#naori, .naori-foot) .n-topbar__track {
	display: flex;
	width: max-content;
	height: 100%;
	will-change: transform;
}
:is(#naori, .naori-foot) .n-topbar__track.is-running { animation: naori-marquee var(--n-marquee, 45s) linear infinite; }
:is(#naori, .naori-foot) .n-topbar:hover .n-topbar__track { animation-play-state: paused; }
:is(#naori, .naori-foot) .n-topbar__group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 120px;
	height: 100%;
	padding-right: 120px;
	white-space: nowrap;
}
:is(#naori, .naori-foot) .n-topbar__item a:hover { color: #fff; }
@keyframes naori-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Pasek headera – na górze: przeszklenie na zdjęciu hero */
/*
 * Tło i rozmycie paska są na ::before (nie na samym pasku), bo zagnieżdżony backdrop-filter
 * w Chrome nie działa – dzięki temu przezroczyste mega menu (dziecko paska) też rozmywa tło.
 */
:is(#naori, .naori-foot) .n-header__bar {
	position: relative;
	height: 84px;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px -20px rgba(0, 0, 0, .4);
	transition: border-color .4s ease, box-shadow .4s ease, color .4s ease;
}
:is(#naori, .naori-foot) .n-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	transition: background-color .4s ease;
}
:is(#naori, .naori-foot) .n-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
	max-width: var(--n-max);
	margin: 0 auto;
	padding: 0 var(--n-pad);
}
:is(#naori, .naori-foot) .n-header__logo { position: relative; display: block; }
:is(#naori, .naori-foot) .n-header__logo img { width: 168px; height: auto; aspect-ratio: 4018.7 / 1042.9; transition: opacity .4s ease; }
:is(#naori, .naori-foot) .n-logo--dark { position: absolute; left: 0; top: 0; opacity: 0; }
:is(#naori, .naori-foot) .n-nav { display: flex; gap: 36px; font-weight: 400; font-size: 16px; line-height: 1; }
:is(#naori, .naori-foot) .n-nav a { position: relative; display: block; padding: 6px 0; color: #fff; transition: color .4s ease; }
:is(#naori, .naori-foot) .n-mega-trigger > a { cursor: default; }
:is(#naori, .naori-foot) .n-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--n-ease);
}
:is(#naori, .naori-foot) .n-nav a:hover::after,
:is(#naori, .naori-foot) .n-nav .current-menu-item > a::after,
:is(#naori, .naori-foot) .n-nav .n-mega-trigger.is-open > a::after { transform: scaleX(1); }
:is(#naori, .naori-foot) .n-header__burger { display: none; }
:is(#naori, .naori-foot) .n-mnav { display: none; }
:is(#naori, .naori-foot) .n-header__zab,
:is(#naori, .naori-foot) .n-mzab { display: none; }

/*
 * Po przewinięciu (header widoczny przy scrollu w górę) i przy otwartym mega menu:
 * przejrzyste jasne szkło – wyraźny blur i światło zamiast mlecznego panelu.
 */
:is(#naori, .naori-foot) .n-header.is-scrolled .n-topbar { height: 0; }
:is(#naori, .naori-foot) .n-header.is-light .n-header__bar {
	border-bottom-color: rgba(255, 255, 255, .7);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(30, 31, 31, .06), 0 14px 28px -22px rgba(20, 20, 18, .34);
}
:is(#naori, .naori-foot) .n-header.is-light .n-header__bar::before {
	background: var(--n-glass-light);
	-webkit-backdrop-filter: var(--n-glass-light-fx);
	backdrop-filter: var(--n-glass-light-fx);
}
:is(#naori, .naori-foot) .n-header.is-light .n-nav a { color: var(--n-ink); }
:is(#naori, .naori-foot) .n-header.is-light .n-logo--light { opacity: 0; }
:is(#naori, .naori-foot) .n-header.is-light .n-logo--dark { opacity: 1; }
:is(#naori, .naori-foot) .n-header.is-hidden { transform: translateY(-100%); }

/* Mega menu "Zabiegi" – siatka 3×2 */
:is(#naori, .naori-foot) .n-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	color: var(--n-ink);
	/* v11: delikatnie przezroczyste jasne szkło (rozmycie działa, bo pasek ma blur na ::before) */
	background: linear-gradient(180deg, rgba(252, 251, 249, .84) 0%, rgba(248, 247, 244, .76) 100%);
	border-top: 1px solid rgba(255, 255, 255, .6);
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	backdrop-filter: blur(28px) saturate(180%);
	box-shadow: 0 30px 60px -36px rgba(20, 20, 18, .45);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .3s ease, transform .35s var(--n-ease);
}
:is(#naori, .naori-foot) .n-mega.is-open { opacity: 1; transform: none; }
:is(#naori, .naori-foot) .n-mega__in { max-width: var(--n-max); margin: 0 auto; padding: 44px var(--n-pad) 52px; }
:is(#naori, .naori-foot) .n-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; }
:is(#naori, .naori-foot) .n-mega__col { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--n-line); }
:is(#naori, .naori-foot) .n-mega__cat { font-weight: 400; font-size: 21px; line-height: 1.28; color: var(--n-ink); }
:is(#naori, .naori-foot) a.n-mega__cat:hover { color: var(--n-gold); }
:is(#naori, .naori-foot) .n-mega__list { display: flex; flex-direction: column; gap: 4px; font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-mega__list a { transition: color .25s ease, padding-left .3s var(--n-ease); }
:is(#naori, .naori-foot) .n-mega__list a:hover { color: var(--n-ink); padding-left: 4px; }

/* ================================================================== 02 HERO */
:is(#naori, .naori-foot) .n-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100svh;
	min-height: 680px;
	max-height: 1200px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(90deg, #32312f 0%, #a8a69c 55%, #ccc9c2 100%);
}
:is(#naori, .naori-foot) .n-hero__bgs { position: absolute; inset: 0; z-index: 0; }
:is(#naori, .naori-foot) .n-hero__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .7s ease;
}
:is(#naori, .naori-foot) .n-hero__bg.is-active { opacity: 1; }
:is(#naori, .naori-foot) .n-hero__bg picture,
:is(#naori, .naori-foot) .n-hero__bg .n-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(#naori, .naori-foot) .n-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(20, 20, 18, calc(.22 + var(--n-overlay, .1))) 0%, rgba(20, 20, 18, calc(.1 + var(--n-overlay, .1) * .6)) 40%, rgba(20, 20, 18, 0) 68%);
}
:is(#naori, .naori-foot) .n-hero__in {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 60px;
	padding-top: 84px; /* header w Astrze/Elementorze nie nachodzi; w trybie szkicu wyrównuje środek */
}
body:not(.naori-draft) :is(#naori, .naori-foot) .n-hero__in { padding-top: 0; }
body.naori-draft :is(#naori, .naori-foot) .n-hero__in { padding-top: 108px; }
:is(#naori, .naori-foot) .n-hero__copy {
	flex: 0 0 auto;
	width: min(790px, 58%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
:is(#naori, .naori-foot) .n-hero__title {
	max-width: 780px; /* v11: szerszy, bardziej poziomy blok nagłówka */
	font-weight: 300;
	font-size: 48px; /* v14: było 58 */
	line-height: 1.06;
	letter-spacing: -.8px;
	color: #fff;
}
:is(#naori, .naori-foot) .n-hero__lead {
	max-width: 580px;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}
:is(#naori, .naori-foot) .n-hero__swap { transition: opacity .35s ease, transform .5s var(--n-ease); text-shadow: 0 1px 28px rgba(20, 20, 18, .18); }
:is(#naori, .naori-foot) .n-hero__swap.is-out { opacity: 0; transform: translateY(4px); }
:is(#naori, .naori-foot) .n-hero__cta .n-hero__swap { display: inline-block; text-shadow: none; }

/* Karty nieaktywnych stanów: lekkie szklane tafle nad zdjęciem (system .n-glass), mała typografia, dużo oddechu */
:is(#naori, .naori-foot) .n-hero__tiles {
	flex: 1 1 0;
	min-width: 0;
	max-width: 380px;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
:is(#naori, .naori-foot) .n-hero__tile {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	padding: 24px 68px 24px 24px;
	text-align: left;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--n-r);
	background: var(--n-glass-dark);
	box-shadow: var(--n-glass-dark-inset), var(--n-glass-shadow);
	-webkit-backdrop-filter: var(--n-glass-dark-fx);
	backdrop-filter: var(--n-glass-dark-fx);
	transition: transform .55s var(--n-ease), box-shadow .55s var(--n-ease), border-color .45s ease;
}
/* Światło na tafli: na hover jaśniej i szerzej (jak w referencji) */
:is(#naori, .naori-foot) .n-hero__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 30%);
	opacity: .55;
	pointer-events: none;
	transition: opacity .55s var(--n-ease);
}
:is(#naori, .naori-foot) .n-hero__tile:hover,
:is(#naori, .naori-foot) .n-hero__tile:focus-visible {
	color: #fff;
	background: var(--n-glass-dark);
	border-color: rgba(255, 255, 255, .24);
	transform: translateY(-4px);
	box-shadow: var(--n-glass-dark-inset-hover), var(--n-glass-shadow-hover);
}
:is(#naori, .naori-foot) .n-hero__tile:hover::before,
:is(#naori, .naori-foot) .n-hero__tile:focus-visible::before { opacity: 1; }
/* Treści wszystkich stanów w jednej komórce siatki – wysokość = najdłuższa, przenikanie bez skoków */
:is(#naori, .naori-foot) .n-hero__tile-stack { display: grid; }
:is(#naori, .naori-foot) .n-hero__tile-in {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .45s ease, transform .5s var(--n-ease);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}
:is(#naori, .naori-foot) .n-hero__tile[data-slide="0"] [data-i="0"],
:is(#naori, .naori-foot) .n-hero__tile[data-slide="1"] [data-i="1"],
:is(#naori, .naori-foot) .n-hero__tile[data-slide="2"] [data-i="2"] { opacity: 1; transform: none; transition-delay: .15s; }
:is(#naori, .naori-foot) .n-hero__tile-title { font-weight: 400; font-size: 17px; line-height: 1.3; color: #fff; }
:is(#naori, .naori-foot) .n-hero__tile-text {
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .74);
	font-variation-settings: normal;
}
/* Zachęta do kliknięcia: strzałka w kółku po prawej */
:is(#naori, .naori-foot) .n-hero__tile-arw {
	position: absolute;
	top: 50%;
	right: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	transition: transform .45s var(--n-ease), background-color .3s ease, border-color .3s ease;
}
:is(#naori, .naori-foot) .n-hero__tile:hover .n-hero__tile-arw { transform: translateX(3px); background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .8); }
:is(#naori, .naori-foot) .n-hero__tile:hover::after,
:is(#naori, .naori-foot) .n-hero__tile:focus-visible::after { opacity: 1; }

/* ================================================================== 03 POZNAJ NAORI */
:is(#naori, .naori-foot) .n-about__r1 {
	display: grid;
	grid-template-columns: 804fr 418fr;
	gap: 106px;
	align-items: center;
}
:is(#naori, .naori-foot) .n-about__wide { aspect-ratio: 804 / 512; }
:is(#naori, .naori-foot) .n-about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
:is(#naori, .naori-foot) .n-about__copy .n-body18 { max-width: 420px; }
:is(#naori, .naori-foot) .n-about__r2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-top: 96px;
}
:is(#naori, .naori-foot) .n-about__copy--pad { padding-right: 106px; }
:is(#naori, .naori-foot) .n-about__copy .n-btn { margin-top: 0; }
:is(#naori, .naori-foot) .n-about__square { aspect-ratio: 1 / 1; }

/* ================================================================== 04 DLACZEGO NAORI */
:is(#naori, .naori-foot) .n-why__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 80px; }
:is(#naori, .naori-foot) .n-why__head .n-h52 { max-width: 1000px; }
:is(#naori, .naori-foot) .n-why__head .n-why__lead { max-width: 640px; }
:is(#naori, .naori-foot) .n-why__split { display: flex; gap: 60px; align-items: stretch; }
:is(#naori, .naori-foot) .n-why__pillars { flex: 0 0 520px; display: flex; flex-direction: column; }
:is(#naori, .naori-foot) .n-why__pillar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 30px 0;
	border-top: 1px solid var(--n-line);
}
:is(#naori, .naori-foot) .n-why__pillar:first-child { padding-top: 0; border-top: 0; }
:is(#naori, .naori-foot) .n-why__pillar:last-child { padding-bottom: 0; }
:is(#naori, .naori-foot) .n-why__pillar .n-body16 { max-width: 480px; }
:is(#naori, .naori-foot) .n-why__film {
	flex: 1 1 auto;
	min-height: 420px;
	margin-right: calc(-1 * var(--n-edge));
}
:is(#naori, .naori-foot) .n-why__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .6s ease;
}
:is(#naori, .naori-foot) .n-why__video.is-ready { opacity: 1; }

/* ================================================================== 05 TWOJA SKÓRA */
:is(#naori, .naori-foot) .n-skin__head { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 52px; }
:is(#naori, .naori-foot) .n-skin__head-l { flex: 0 1 838px; display: flex; flex-direction: column; gap: 12px; }
:is(#naori, .naori-foot) .n-skin__head-l .n-h40 { max-width: 490px; }
:is(#naori, .naori-foot) .n-skin__head-r { flex: 1 1 0; max-width: 450px; padding-top: 6px; }
:is(#naori, .naori-foot) .n-skin__duo { display: flex; gap: 48px; align-items: stretch; }
:is(#naori, .naori-foot) .n-skin__needs { flex: 0 0 538px; border-top: 1px solid var(--n-line); }
:is(#naori, .naori-foot) .n-skin__need { border-bottom: 1px solid var(--n-line); }
:is(#naori, .naori-foot) .n-skin__need > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 18px 0;
	text-align: left;
	color: var(--n-mid);
	transition: color .3s ease, padding-left .4s var(--n-ease);
}
:is(#naori, .naori-foot) .n-skin__need-label { display: flex; align-items: baseline; gap: 14px; }
:is(#naori, .naori-foot) .n-skin__need .n-num { color: inherit; }
:is(#naori, .naori-foot) .n-skin__need-name { font-weight: 300; font-size: 20px; line-height: 1.25; }
/* Wskaźnik aktywnej pozycji: krótka linia (desktop); na tablecie/telefonie: plus/minus akordeonu */
:is(#naori, .naori-foot) .n-skin__need-ind {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 1px;
	background: var(--n-ink);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--n-ease);
}
:is(#naori, .naori-foot) .n-skin__need > button:hover { color: var(--n-ink); padding-left: 12px; }
:is(#naori, .naori-foot) .n-skin__need > button:hover .n-skin__need-ind { transform: scaleX(.5); }
:is(#naori, .naori-foot) .n-skin__need.is-active > button { color: var(--n-ink); padding-left: 0; }
:is(#naori, .naori-foot) .n-skin__need.is-active .n-skin__need-ind { transform: scaleX(1); }
:is(#naori, .naori-foot) .n-skin__panel {
	position: relative;
	flex: 1 1 auto;
	min-height: 450px;
	margin-right: calc(-1 * var(--n-edge));
	overflow: hidden;
	background: var(--n-ph);
}
:is(#naori, .naori-foot) .n-skin__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}
:is(#naori, .naori-foot) .n-skin__slide[hidden] { display: block; }
:is(#naori, .naori-foot) .n-skin__slide.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
:is(#naori, .naori-foot) .n-skin__media { position: absolute; inset: 0; }
:is(#naori, .naori-foot) .n-skin__card {
	position: absolute;
	left: 36px;
	bottom: 40px;
	width: min(480px, calc(100% - 72px));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 26px 28px 26px;
}
:is(#naori, .naori-foot) .n-skin__card .n-h21 { color: #fff; }
:is(#naori, .naori-foot) .n-skin__text { max-width: 420px; font-weight: 300; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
:is(#naori, .naori-foot) .n-skin__card,
:is(#naori, .naori-foot) .n-skin__card .n-skin__text { text-shadow: 0 1px 16px rgba(0, 0, 0, .18); }
/* Zabiegi: linki z podkreśleniem (bez strzałek); pozycje bez podstrony – zwykły tekst */
:is(#naori, .naori-foot) .n-skin__sol {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-top: 8px;
	padding-top: 16px;
	align-self: stretch;
	border-top: 1px solid rgba(255, 255, 255, .24);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
}
:is(#naori, .naori-foot) .n-skin__sol li { display: flex; align-items: center; }
:is(#naori, .naori-foot) .n-skin__sol-a { display: inline-block; color: #fff; }
:is(#naori, .naori-foot) .n-skin__sol-a:hover,
:is(#naori, .naori-foot) .n-skin__sol-a:focus-visible { color: #fff; }
:is(#naori, .naori-foot) .n-skin__sol-txt { color: rgba(255, 255, 255, .72); }
:is(#naori, .naori-foot) .n-skin__card .n-cta2 { margin-top: 12px; }

/* ================================================================== 06 POPULARNE ZABIEGI */
:is(#naori, .naori-foot) .n-treat .n-sechead { margin-bottom: 44px; }
:is(#naori, .naori-foot) .n-treat__lead { max-width: 620px; color: var(--n-mid); }
/* Strony po 5 kafli: każda strona to osobny akordeon, strzałki przewijają o stronę */
:is(#naori, .naori-foot) .n-strips {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
:is(#naori, .naori-foot) .n-strips::-webkit-scrollbar { display: none; }
:is(#naori, .naori-foot) .n-strips > .n-strip { flex: 0 0 100%; scroll-snap-align: start; }
/*
 * Kafel tylko "odsłania" treść: zdjęcie i teksty mają stałą szerokość (liczoną od szerokości paska),
 * więc w trakcie rozwijania nic się nie przeskalowuje ani nie łamie na nowo (brak migotania).
 * Proporcje z projektu: zwykły kafel 1, rozwinięty 2.7, lewy sąsiad 0.54 → suma 6.24.
 */
:is(#naori, .naori-foot) .n-strip {
	--n-strip-w: calc(min(100vw, var(--n-max)) - 2 * var(--n-pad)); /* fallback bez container queries */
	display: flex;
	gap: 0;
	height: clamp(440px, 36.9vw, 531px);
	container-type: inline-size;
}
@supports (width: 1cqw) {
	:is(#naori, .naori-foot) .n-strip { --n-strip-w: 100cqw; }
}
:is(#naori, .naori-foot) .n-strip__li {
	flex: 1 1 0;
	min-width: 0;
	padding-right: 6px; /* odstęp w obrębie kafla – brak martwej strefy przy przesuwaniu kursora */
	transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1);
}
:is(#naori, .naori-foot) .n-strip__li:last-child { padding-right: 0; }
/*
 * Stany kafla (v9, wg uwag Tomka): nieaktywny – zdjęcie przyciemnione, cała typografia biała;
 * aktywny/hover – zdjęcie w oryginalnych kolorach i jasności, cała typografia czarna.
 */
:is(#naori, .naori-foot) .n-strip__item {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	background: #3a3a38;
	color: #fff;
	outline-offset: -2px;
	transition: color .5s ease;
}
:is(#naori, .naori-foot) .n-strip__media { position: absolute; inset: 0; }
:is(#naori, .naori-foot) .n-strip__media .n-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(#naori, .naori-foot) .n-strip__media .n-img {
	position: absolute;
	top: 0;
	left: 50%;
	width: max(100%, calc(var(--n-strip-w) * 2.7 / 6.24));
	max-width: none;
	height: 100%;
	object-fit: cover;
	transform: translateX(-50%);
}
/* Przyciemnienie zdjęcia w stanie nieaktywnym (mocniej u dołu, pod tekstem) */
:is(#naori, .naori-foot) .n-strip__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 14, 13, .62) 0%, rgba(14, 14, 13, .44) 40%, rgba(14, 14, 13, .34) 100%);
	transition: opacity .55s ease;
}
:is(#naori, .naori-foot) .n-strip__no {
	position: absolute;
	left: 24px;
	top: 12px;
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 1px;
	color: inherit;
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-strip__no::before {
	content: "";
	position: absolute;
	left: -4px;
	top: -12px;
	width: 1px;
	height: 32px;
	background: currentColor;
}
:is(#naori, .naori-foot) .n-strip__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 40px 26px 26px;
	isolation: isolate;
	transition: opacity .3s ease;
}
/* Aktywny kafel (v11): czarny tekst na szklanym panelu – czytelny na każdym zdjęciu (jak w "Twoja skóra") */
:is(#naori, .naori-foot) .n-strip__body::before {
	content: "";
	position: absolute;
	inset: 24px 12px 12px;
	z-index: -1;
	border-radius: var(--n-r);
	/* v12: przejrzyste szkło (mniej bieli, słabszy blur, bez wewnętrznej poświaty) – nie mleczne */
	background: linear-gradient(150deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .2) 100%);
	box-shadow: inset 2px 2px 4px -2px #fff, inset -2px -2px 4px -2px rgba(255, 255, 255, .5), 0 16px 28px -18px rgba(0, 0, 0, .4);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	backdrop-filter: blur(10px) saturate(180%);
	opacity: 0;
	transition: opacity .5s ease;
}
:is(#naori, .naori-foot) .n-strip__body::after { inset: 24px 12px 12px; border-radius: var(--n-r); opacity: 0; } /* v14: rogi obwódki = rogi szkła */
:is(#naori, .naori-foot) .n-strip__name {
	display: block;
	width: calc(var(--n-strip-w) / 6.24 - 58px);
	font-weight: 300;
	font-size: 21px;
	line-height: 1.2;
}
:is(#naori, .naori-foot) .n-strip__desc {
	display: block;
	width: min(500px, calc(var(--n-strip-w) * 2.7 / 6.24 - 58px));
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.4;
	transform: translateY(8px);
	transition: max-height .45s var(--n-ease), opacity .35s ease, transform .35s ease;
}
:is(#naori, .naori-foot) .n-strip__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 1px;
	color: inherit;
	white-space: nowrap;
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-strip__price b { font-weight: 500; color: inherit; }
:is(#naori, .naori-foot) .n-strip__go { font-size: 14px; }

/*
 * v15: rozwijanie kafla tylko myszką (pointer: fine), nie w trakcie przewijania paska (.is-scrolling)
 * i nie dla kafla widocznego tylko częściowo (.is-clipped) – klasy nadaje JS (initStrip).
 * Wcześniej kafel wjeżdżający pod kursor/palec przy przewijaniu zmieniał kolor i rozszerzał się, zanim był w pełni widoczny.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:not(.is-clipped):is(:hover, :focus-within) { flex-grow: 2.7; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:has(+ .n-strip__li:not(.is-clipped):is(:hover, :focus-within)) { flex-grow: .54; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:has(+ .n-strip__li:not(.is-clipped):is(:hover, :focus-within)) .n-strip__body { opacity: 0; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:not(.is-clipped):is(:hover, :focus-within) .n-strip__item { color: var(--n-ink); transition-delay: .1s; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:not(.is-clipped):is(:hover, :focus-within) .n-strip__media::after { opacity: 0; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:not(.is-clipped):is(:hover, :focus-within) .n-strip__body::before { opacity: 1; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:not(.is-clipped):is(:hover, :focus-within) .n-strip__body::after { opacity: .8; }
	:is(#naori, .naori-foot) .n-strips:not(.is-scrolling) .n-strip__li:not(.is-clipped):is(:hover, :focus-within) .n-strip__desc { max-height: 6em; opacity: 1; transform: none; transition-delay: .12s; }
}

/* ================================================================== 07 ARTYKUŁY */
:is(#naori, .naori-foot) .n-art__cats { display: flex; flex-wrap: wrap; align-items: center; padding-top: 14px; font-weight: 400; font-size: 16px; line-height: 1; }
:is(#naori, .naori-foot) .n-art__cat { color: var(--n-mid); transition: color .25s ease; }
:is(#naori, .naori-foot) .n-art__cat + .n-art__cat::before { content: "|"; margin: 0 14px; color: var(--n-gold); font-weight: 300; }
:is(#naori, .naori-foot) .n-art__cat:hover,
:is(#naori, .naori-foot) .n-art__cat.is-active { color: var(--n-ink); }
:is(#naori, .naori-foot) .n-art__results { padding-top: 46px; transition: opacity .3s ease; }
:is(#naori, .naori-foot) .n-art__results.is-loading { opacity: .4; pointer-events: none; }
/*
 * Układ 1 + 2 (v9): obie kolumny zaczynają się i kończą na tych samych liniach – razem z tytułami
 * i treścią. Wysokość wyznacza prawa kolumna; zdjęcie dużego artykułu wypełnia resztę miejsca.
 */
:is(#naori, .naori-foot) .n-art__grid { display: grid; grid-template-columns: 756fr 520fr; gap: 56px; align-items: stretch; }
:is(#naori, .naori-foot) .n-art__big { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
:is(#naori, .naori-foot) .n-art__big-media { position: relative; display: block; flex: 1 1 auto; width: 100%; min-height: 340px; overflow: hidden; background: var(--n-ph); }
:is(#naori, .naori-foot) .n-art__big-media .n-img,
:is(#naori, .naori-foot) .n-art__big-media .n-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--n-ease); }
:is(#naori, .naori-foot) .n-art__big:hover .n-art__big-media .n-img { transform: scale(1.04); }
:is(#naori, .naori-foot) .n-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--n-gold);
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-meta__sep { letter-spacing: 0; line-height: 1; }
:is(#naori, .naori-foot) .n-art__big-title { max-width: 560px; font-weight: 300; font-size: 28px; line-height: 1.2; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-art__big-excerpt { max-width: 560px; font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-art__side { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-width: 0; }
:is(#naori, .naori-foot) .n-art__item { display: flex; flex-direction: column; gap: 14px; }
:is(#naori, .naori-foot) .n-art__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--n-ph); }
:is(#naori, .naori-foot) .n-art__thumb .n-img,
:is(#naori, .naori-foot) .n-art__thumb .n-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--n-ease); }
:is(#naori, .naori-foot) .n-art__item:hover .n-art__thumb .n-img { transform: scale(1.05); }
:is(#naori, .naori-foot) .n-art__item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
:is(#naori, .naori-foot) .n-art__item-title { font-weight: 300; font-size: 21px; line-height: 1.28; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-art__item-go { margin-top: 4px; font-size: 15px; color: var(--n-ink); }
:is(#naori, .naori-foot) .n-art__topics {
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--n-mid);
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-art__lead { max-width: 640px; color: var(--n-mid); }
/* Mniej pustej przestrzeni przed lokalizacjami */
:is(#naori, .naori-foot) .n-art__empty { color: var(--n-mid); }

/* ================================================================== 08 LOKALIZACJE */
:is(#naori, .naori-foot) .n-loc { background: var(--n-sand); padding: var(--n-sec) 0; }
:is(#naori, .naori-foot) .n-loc__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 48px; }
:is(#naori, .naori-foot) .n-loc__lead { max-width: 640px; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-loc__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
:is(#naori, .naori-foot) .n-loc__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--n-r);
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 20, 18, .05), 0 22px 40px -30px rgba(20, 20, 18, .3);
}
:is(#naori, .naori-foot) .n-loc__photo { aspect-ratio: 16 / 10; }
:is(#naori, .naori-foot) .n-loc__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; padding: 36px 40px 40px; }
/*
 * Desktop: obie karty jako jeden moduł – wiersze (nazwa, adres, opis, mapa, telefony, godziny, przyciski)
 * dzielone przez subgrid, więc odpowiadające sobie elementy leżą na tych samych liniach,
 * mapy zaczynają się i kończą na tej samej wysokości, a przyciski są w jednym rzędzie.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 1025px) {
		:is(#naori, .naori-foot) .n-loc__panels { grid-template-rows: repeat(8, auto); row-gap: 0; }
		:is(#naori, .naori-foot) .n-loc__card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
		:is(#naori, .naori-foot) .n-loc__body { display: contents; }
		:is(#naori, .naori-foot) .n-loc__photo { grid-row: 1; }
		:is(#naori, .naori-foot) .n-loc__body > * { margin-left: 40px; margin-right: 40px; justify-self: start; }
		:is(#naori, .naori-foot) .n-loc__name { grid-row: 2; margin-top: 36px; }
		:is(#naori, .naori-foot) .n-loc__addr { grid-row: 3; }
		:is(#naori, .naori-foot) .n-loc__desc { grid-row: 4; }
		:is(#naori, .naori-foot) .n-loc__map { grid-row: 5; justify-self: stretch; width: auto; }
		:is(#naori, .naori-foot) .n-loc__rows { grid-row: 6; }
		:is(#naori, .naori-foot) .n-loc__hours { grid-row: 7; }
		:is(#naori, .naori-foot) .n-loc__acts { grid-row: 8; align-self: end; margin-bottom: 40px; }
	}
}
:is(#naori, .naori-foot) .n-loc__name .n-gold { margin: 0 2px; }
:is(#naori, .naori-foot) .n-loc__addr { margin-top: 6px; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--n-ink2); }
:is(#naori, .naori-foot) .n-loc__desc { margin-top: 14px; }
/* Mapa – element drugorzędny: czarno-biała, na hover płynnie w kolorze */
:is(#naori, .naori-foot) .n-loc__map {
	position: relative;
	width: 100%;
	height: 240px;
	margin: 24px 0;
	overflow: hidden;
	border-radius: calc(var(--n-r) - 2px);
	background: var(--n-ph);
}
:is(#naori, .naori-foot) .n-loc__card.has-photo .n-loc__map { height: 170px; }
:is(#naori, .naori-foot) .n-loc__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(1.15) brightness(1.02);
	transition: filter .8s ease;
}
:is(#naori, .naori-foot) .n-loc__map:hover iframe,
:is(#naori, .naori-foot) .n-loc__map:focus-within iframe { filter: grayscale(0) contrast(1) brightness(1); }
/* Mapa zablokowana przez Complianz (brak zgody): zaślepka w tym samym stylu (cz-b) + przycisk zgody */
:is(#naori, .naori-foot) .n-loc__map .cmplz-placeholder-parent { position: absolute; inset: 0; height: 100%; background-size: cover; background-position: center; }
:is(#naori, .naori-foot) .n-loc__map .cmplz-placeholder-parent::before { content: ""; position: absolute; inset: 0; background: inherit; filter: grayscale(1) contrast(1.05) brightness(1.04); }
:is(#naori, .naori-foot) .n-loc__map .cmplz-blocked-content-notice {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--n-r);
	background: rgba(30, 31, 31, .78);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-family: var(--n-sans);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	transform: translate(-50%, -50%);
	cursor: pointer;
	box-shadow: 0 14px 30px -16px rgba(20, 20, 18, .6);
	transition: background-color .3s ease;
}
:is(#naori, .naori-foot) .n-loc__map .cmplz-blocked-content-notice:hover { background: rgba(30, 31, 31, .92); }
:is(#naori, .naori-foot) .n-loc__rows { display: flex; flex-direction: column; font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--n-ink2); }
:is(#naori, .naori-foot) .n-loc__rows a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--n-ease), color .3s ease; }
:is(#naori, .naori-foot) .n-loc__rows a:hover { color: var(--n-ink); background-size: 100% 1px; }
:is(#naori, .naori-foot) .n-loc__hours { margin-top: 6px; font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-sep { margin: 0 3px; color: var(--n-gold); }
:is(#naori, .naori-foot) .n-loc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }

/* ================================================================== 09 KONTAKT + FORMULARZ */
:is(#naori, .naori-foot) .n-contact__grid { display: grid; grid-template-columns: 526px 1fr; gap: 90px; align-items: start; }
:is(#naori, .naori-foot) .n-contact__info { display: flex; flex-direction: column; align-items: flex-start; }
:is(#naori, .naori-foot) .n-contact__info .n-h40 { margin-top: 14px; }
:is(#naori, .naori-foot) .n-contact__sub { margin-top: 28px; }
:is(#naori, .naori-foot) .n-contact__info .n-lead22 { max-width: 440px; margin-top: 10px; }
:is(#naori, .naori-foot) .n-social { display: flex; gap: 12px; margin-top: 28px; }
:is(#naori, .naori-foot) .n-social__a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--n-ink);
	color: #fff;
	overflow: hidden;
	box-shadow: var(--naori-btn-black-shadow);
	transition: transform .4s var(--n-ease), background-color .3s ease, box-shadow .4s var(--n-ease);
}
:is(#naori, .naori-foot) .n-social__a:hover,
:is(#naori, .naori-foot) .n-social__a:focus-visible { background: var(--n-gold); transform: translateY(-3px); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 16px -9px rgba(0, 0, 0, .4); }
:is(#naori, .naori-foot) .n-social__a img { width: 18px; height: 18px; }
:is(#naori, .naori-foot) .n-social__txt { font-weight: 700; font-size: 18px; line-height: 1; }
:is(#naori, .naori-foot) .n-contact__dl { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
:is(#naori, .naori-foot) .n-contact__dl > div { display: flex; flex-direction: column; gap: 6px; }
:is(#naori, .naori-foot) .n-contact__loc { color: var(--n-mid); }
:is(#naori, .naori-foot) .n-contact__loc::after { content: ":"; }
:is(#naori, .naori-foot) .n-contact__dl dd { font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--n-ink2); }
:is(#naori, .naori-foot) .n-contact__dl a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--n-ease), color .3s ease; }
:is(#naori, .naori-foot) .n-contact__dl a:hover { color: var(--n-ink); background-size: 100% 1px; }
:is(#naori, .naori-foot) .n-notice { margin: 12px 0 0; padding: 10px 14px; background: var(--n-sand); border-left: 2px solid var(--n-gold); font-size: 14px; color: var(--n-mid); }

/* Formularz – układ z projektu (Contact Form 7 + podgląd) */
:is(#naori, .naori-foot) .n-form { margin-top: 22px; }
:is(#naori, .naori-foot) .n-form form, :is(#naori, .naori-foot) .n-form .wpcf7 { margin: 0; }
:is(#naori, .naori-foot) .n-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
:is(#naori, .naori-foot) .n-form__row + .n-form__row,
:is(#naori, .naori-foot) .n-form__row + .n-field,
:is(#naori, .naori-foot) .n-form .n-field--area { margin-top: 22px; }
:is(#naori, .naori-foot) .n-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 12px;
	border-bottom: 1px solid var(--n-line);
	transition: border-color .3s ease;
	cursor: text;
}
:is(#naori, .naori-foot) .n-field:focus-within { border-bottom-color: var(--n-ink); }
:is(#naori, .naori-foot) .n-field__label {
	font-family: var(--n-ui);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--n-mid);
	font-variation-settings: normal;
}
:is(#naori, .naori-foot) .n-field .wpcf7-form-control-wrap { display: block; }
:is(#naori, .naori-foot) .n-field input,
:is(#naori, .naori-foot) .n-field textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 4px 0 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	font-family: var(--n-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.4;
	color: var(--n-ink);
	font-optical-sizing: auto;
}
:is(#naori, .naori-foot) .n-field input { height: auto; min-height: 0; }
:is(#naori, .naori-foot) .n-field textarea { height: 70px; min-height: 70px; resize: vertical; }
:is(#naori, .naori-foot) .n-field input:focus,
:is(#naori, .naori-foot) .n-field textarea:focus { border: 0; box-shadow: none; outline: 0; background: transparent; }
:is(#naori, .naori-foot) .n-form__agree { margin-top: 22px; font-weight: 300; font-size: 14px; line-height: 1.45; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-form__agree label,
:is(#naori, .naori-foot) .n-form__agree .wpcf7-list-item-label { display: inline; }
:is(#naori, .naori-foot) .n-form__agree .wpcf7-list-item { display: flex; gap: 12px; margin: 0; }
:is(#naori, .naori-foot) .n-form__agree label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
:is(#naori, .naori-foot) .n-form__agree a { color: var(--n-ink); text-decoration: underline; text-underline-offset: 2px; }
:is(#naori, .naori-foot) .n-form__agree input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid #c9c9c9;
	border-radius: 0;
	background: #fff;
	cursor: pointer;
}
:is(#naori, .naori-foot) .n-form__agree input[type="checkbox"]:checked {
	background: var(--n-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 18px no-repeat;
	border-color: var(--n-ink);
}
/* Informacja o przetwarzaniu danych (zamiast checkboxa zgody – v9) */
:is(#naori, .naori-foot) .n-form__info { margin-top: 22px; font-weight: 300; font-size: 14px; line-height: 1.5; color: var(--n-mid); }
:is(#naori, .naori-foot) .n-form__info a { color: var(--n-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(#naori, .naori-foot) .n-form__info a:hover { text-decoration-color: var(--n-gold); }
:is(#naori, .naori-foot) .n-form__submit { position: relative; margin-top: 28px; }
/* Przycisk CF7 – czarny wariant systemu (input nie ma pseudo-elementów, więc wszystko w tle i cieniu) */
:is(#naori, .naori-foot) .n-form input[type="submit"],
:is(#naori, .naori-foot) .n-form .wpcf7-submit {
	display: inline-flex;
	width: auto;
	min-height: 46px;
	padding: 0 28px;
	border: 1px solid var(--naori-btn-black-border);
	border-radius: var(--n-r);
	background: var(--naori-btn-black-fill) var(--naori-btn-black-bg) 0 100% / 100% 200% no-repeat;
	color: var(--naori-btn-black-text);
	font-family: var(--n-sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .2px;
	text-transform: none;
	cursor: pointer;
	box-shadow: var(--naori-btn-black-shadow);
	transition: var(--naori-btn-transition), opacity .3s ease;
}
:is(#naori, .naori-foot) .n-form input[type="submit"]:hover,
:is(#naori, .naori-foot) .n-form .wpcf7-submit:hover,
:is(#naori, .naori-foot) .n-form input[type="submit"]:focus-visible,
:is(#naori, .naori-foot) .n-form .wpcf7-submit:focus-visible {
	background-color: var(--naori-btn-black-fill-hover);
	background-position: 0 0;
	border-color: var(--naori-btn-black-border-hover);
	color: var(--naori-btn-black-text);
	transform: translateY(-3px);
	box-shadow: var(--naori-btn-black-shadow-hover);
}
:is(#naori, .naori-foot) .n-form .wpcf7-submit:active { transform: translateY(0); box-shadow: var(--naori-btn-black-shadow); }
/* Przed zaznaczeniem zgody CF7 blokuje przycisk (gdy formularz nadal ma pole akceptacji) */
:is(#naori, .naori-foot) .n-form .wpcf7-submit:disabled,
:is(#naori, .naori-foot) .n-form .wpcf7-submit:disabled:hover { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
:is(#naori, .naori-foot) .n-form .wpcf7-spinner { position: absolute; margin: 0 0 0 16px; top: 50%; transform: translateY(-50%); }
:is(#naori, .naori-foot) .n-form .wpcf7-not-valid-tip { margin-top: 4px; padding-bottom: 6px; font-size: 13px; color: #b3261e; }
:is(#naori, .naori-foot) .n-form .wpcf7-response-output { margin: 22px 0 0; padding: 12px 16px; border: 1px solid var(--n-line); font-size: 14px; color: var(--n-ink2); }
:is(#naori, .naori-foot) .n-form .wpcf7 form.invalid .wpcf7-response-output,
:is(#naori, .naori-foot) .n-form .wpcf7 form.unaccepted .wpcf7-response-output { border-color: #d9a441; }
:is(#naori, .naori-foot) .n-form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--n-gold); }
:is(#naori, .naori-foot) .n-form--preview { pointer-events: none; }
:is(#naori, .naori-foot) .n-form--preview input:disabled,
:is(#naori, .naori-foot) .n-form--preview textarea:disabled { background: transparent; opacity: 1; }

/* ================================================================== 10 STOPKA (tryb szkicu) */
:is(#naori, .naori-foot) .n-footer { background: var(--n-dark); color: rgba(255, 255, 255, .82); padding: 76px 0 36px; }
:is(#naori, .naori-foot) .n-footer__grid { display: flex; gap: 44px; align-items: flex-start; }
:is(#naori, .naori-foot) .n-footer__brand { flex: 0 0 450px; display: flex; flex-direction: column; gap: 16px; }
:is(#naori, .naori-foot) .n-footer__brand img { width: 152px; height: 39px; }
:is(#naori, .naori-foot) .n-footer__brand p { max-width: 260px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .6); }
:is(#naori, .naori-foot) .n-footer__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
:is(#naori, .naori-foot) .n-footer__locs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 18px; }
:is(#naori, .naori-foot) .n-footer__loc { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .65); }
:is(#naori, .naori-foot) .n-footer__brand .n-footer__loc p { max-width: none; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .65); }
:is(#naori, .naori-foot) .n-footer__brand .n-footer__loc .n-footer__loc-name { font-size: 16px; color: #fff; }
:is(#naori, .naori-foot) .n-footer__loc a { transition: color .25s ease; }
:is(#naori, .naori-foot) .n-footer__loc a:hover { color: #fff; }
:is(#naori, .naori-foot) .n-footer__go { align-self: flex-start; margin-top: 2px; color: #fff; }
:is(#naori, .naori-foot) .n-footer__go:hover { color: #fff; }
:is(#naori, .naori-foot) .n-footer__list { font-size: 16px; line-height: 1.8; }
:is(#naori, .naori-foot) .n-footer__list a { transition: color .25s ease; }
:is(#naori, .naori-foot) .n-footer__list a:hover { color: #fff; }
:is(#naori, .naori-foot) .n-footer__cookies {
	display: block;
	margin-top: 2px;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
	color: rgba(255, 255, 255, .82);
	transition: color .25s ease;
}
:is(#naori, .naori-foot) .n-footer__list + .n-footer__cookies { margin-top: -20px; }
:is(#naori, .naori-foot) .n-footer__cookies:hover,
:is(#naori, .naori-foot) .n-footer__cookies:focus-visible { color: #fff; }
:is(#naori, .naori-foot) .n-footer__bot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 70px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 13px;
	line-height: 1;
	color: rgba(255, 255, 255, .55);
}
:is(#naori, .naori-foot) .n-footer__bot a:hover { color: #fff; }

/* ================================================================== Pośrednie szerokości desktopu */
@media (max-width: 1360px) {
	:is(#naori, .naori-foot) .n-hero__title { font-size: clamp(42px, 3.6vw, 48px); }
	:is(#naori, .naori-foot) .n-about__r1 { gap: 64px; }
	:is(#naori, .naori-foot) .n-about__copy--pad { padding-right: 64px; }
	:is(#naori, .naori-foot) .n-why__pillars { flex-basis: 440px; }
	:is(#naori, .naori-foot) .n-skin__needs { flex-basis: 440px; }
	:is(#naori, .naori-foot) .n-skin__need-name { font-size: 19px; }
	:is(#naori, .naori-foot) .n-contact__grid { grid-template-columns: 440px 1fr; gap: 64px; }
	:is(#naori, .naori-foot) .n-footer__grid { gap: 32px; }
	:is(#naori, .naori-foot) .n-footer__brand { flex-basis: 360px; }
	:is(#naori, .naori-foot) .n-footer__locs { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
	:is(#naori, .naori-foot) .n-nav { gap: 24px; }
	:is(#naori, .naori-foot) .n-h52 { font-size: 38px; }
	:is(#naori, .naori-foot) .n-skin__needs { flex-basis: 400px; }
	:is(#naori, .naori-foot) .n-skin__need-name { font-size: 18px; }
}

/* ================================================================== TABLET ≤ 1024px */
@media (max-width: 1024px) {
	:is(#naori, .naori-foot) { --n-pad: 32px; --n-sec: 72px; }

	:is(#naori, .naori-foot) .n-h52 { font-size: 33px; }
	:is(#naori, .naori-foot) .n-h40 { font-size: 29px; }
	:is(#naori, .naori-foot) .n-h32 { font-size: 24px; }
	:is(#naori, .naori-foot) .n-lead26 { font-size: 18px; }
	:is(#naori, .naori-foot) .n-lead22 { font-size: 17px; }
	:is(#naori, .naori-foot) .n-body18 { font-size: 17px; }

	/* Header */
	:is(#naori, .naori-foot) .n-topbar { height: 22px; font-size: 11px; }
	:is(#naori, .naori-foot) .n-topbar__group { gap: 80px; padding-right: 80px; }
	:is(#naori, .naori-foot) .n-mega { display: none; }
	:is(#naori, .naori-foot) .n-header__bar { height: 68px; }
	:is(#naori, .naori-foot) .n-header__nav,
	:is(#naori, .naori-foot) .n-header__cta { display: none; }
	:is(#naori, .naori-foot) .n-header__logo img { width: 132px; height: auto; }
	:is(#naori, .naori-foot) .n-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0 10px;
	}
	:is(#naori, .naori-foot) .n-header__burger span { display: block; height: 1px; background: #fff; transition: transform .35s var(--n-ease), background-color .4s ease; }
	:is(#naori, .naori-foot) .n-header.is-light .n-header__burger span { background: var(--n-ink); }
	:is(#naori, .naori-foot) .n-header.is-open .n-header__burger span,
	:is(#naori, .naori-foot) .n-header.is-zab .n-header__burger span { background: #fff; }
	:is(#naori, .naori-foot) .n-header:is(.is-open, .is-zab) .n-logo--light { opacity: 1; }
	:is(#naori, .naori-foot) .n-header:is(.is-open, .is-zab) .n-logo--dark { opacity: 0; }
	:is(#naori, .naori-foot) .n-header.is-open .n-header__burger span:first-child { transform: translateY(4px) rotate(45deg); }
	:is(#naori, .naori-foot) .n-header.is-open .n-header__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
	:is(#naori, .naori-foot) .n-header:is(.is-open, .is-zab) .n-header__bar { border-bottom-color: transparent; box-shadow: none; }
	:is(#naori, .naori-foot) .n-header:is(.is-open, .is-zab) .n-header__bar::before { background: var(--n-dark); -webkit-backdrop-filter: none; backdrop-filter: none; }

	/* v15: przycisk "Zabiegi" w pasku (obok hamburgera) + panel z listą zabiegów */
	/* v17: "Zabiegi" w tym samym systemie przycisków co "Umów wizytę" – na hero biały (szkło), po przewinięciu czarny */
	:is(#naori, .naori-foot) .n-header__zab {
		display: inline-flex;
		gap: 9px;
		min-height: 38px;
		height: 38px;
		margin-left: auto;
		margin-right: 8px;
		padding: 0 16px;
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
	}
	:is(#naori, .naori-foot) .n-header__zab:is(:hover, :focus-visible, :active) { transform: none; } /* bez uniesienia – na dotyku zostawało po tapnięciu */
	:is(#naori, .naori-foot) .n-header.is-light:not(.is-open, .is-zab) .n-header__zab {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		--b-fill: var(--naori-btn-black-fill);
		--b-fill-hover: var(--naori-btn-black-fill-hover);
		--b-bg: var(--naori-btn-black-bg);
		--b-border: var(--naori-btn-black-border);
		--b-border-hover: var(--naori-btn-black-border-hover);
		--b-text: var(--naori-btn-black-text);
		--b-shadow: var(--naori-btn-black-shadow);
		--b-shadow-hover: var(--naori-btn-black-shadow-hover);
	}
	:is(#naori, .naori-foot) .n-header__zab-ic {
		width: 7px;
		height: 7px;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .3s var(--n-ease);
	}
	:is(#naori, .naori-foot) .n-header__zab[aria-expanded="true"] .n-header__zab-ic { transform: translateY(2px) rotate(-135deg); }
	:is(#naori, .naori-foot) .n-mzab {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 36px;
		padding: 132px var(--n-pad) 36px;
		background: var(--n-dark);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility 0s linear .35s;
	}
	:is(#naori, .naori-foot) .n-mzab[hidden] { display: flex; }
	:is(#naori, .naori-foot) .n-header.is-zab .n-mzab { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
	:is(#naori, .naori-foot) .n-mzab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; align-content: start; }
	:is(#naori, .naori-foot) .n-mzab__col { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
	:is(#naori, .naori-foot) .n-mzab__cat { font-weight: 400; font-size: 18px; line-height: 1.3; color: #fff; }
	:is(#naori, .naori-foot) .n-mzab__list { display: flex; flex-direction: column; gap: 4px; font-weight: 300; font-size: 15px; line-height: 1.5; }
	:is(#naori, .naori-foot) .n-mzab__list a { color: rgba(255, 255, 255, .7); }
	:is(#naori, .naori-foot) .n-mzab__list a:hover { color: #fff; }
	:is(#naori, .naori-foot) .n-mzab .n-mnav__cta { align-self: flex-start; }
	:is(#naori, .naori-foot) .n-mnav {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 36px;
		padding: 132px var(--n-pad) 36px;
		background: var(--n-dark);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility 0s linear .35s;
	}
	:is(#naori, .naori-foot) .n-mnav[hidden] { display: flex; }
	:is(#naori, .naori-foot) .n-header.is-open .n-mnav { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
	:is(#naori, .naori-foot) .n-mnav__list { display: flex; flex-direction: column; gap: 4px; font-weight: 300; font-size: 30px; line-height: 1.3; }
	:is(#naori, .naori-foot) .n-mnav__list a { color: #fff; }
	:is(#naori, .naori-foot) .n-mnav__list .n-mega-trigger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	:is(#naori, .naori-foot) .n-mnav__toggle { position: relative; width: 44px; height: 44px; margin-right: -10px; }
	:is(#naori, .naori-foot) .n-mnav__toggle span,
	:is(#naori, .naori-foot) .n-mnav__toggle span::after { position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: #fff; transform: translate(-50%, -50%); }
	:is(#naori, .naori-foot) .n-mnav__toggle span::after { content: ""; transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--n-ease); }
	:is(#naori, .naori-foot) .n-mnav__toggle[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(0deg); }
	:is(#naori, .naori-foot) .n-mnav__sub { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 10px 0 18px; }
	:is(#naori, .naori-foot) .n-mnav__sub[hidden] { display: none; }
	:is(#naori, .naori-foot) .n-mnav__sub .n-mega__col { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
	:is(#naori, .naori-foot) .n-mnav__sub .n-mega__cat { font-weight: 400; font-size: 16px; line-height: 1.3; color: #fff; }
	:is(#naori, .naori-foot) .n-mnav__sub .n-mega__list { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.6; }
	:is(#naori, .naori-foot) .n-mnav__sub .n-mega__list a { color: rgba(255, 255, 255, .65); }
	/* Na ciemnym tle menu przezroczysty biały wyglądałby na szary – tu pełna biel */
	:is(#naori, .naori-foot) .n-mnav__cta { align-self: flex-start; --b-fill: var(--naori-btn-white-fill-hover); }
	body.naori-menu-open { overflow: hidden; }

	/* Hero */
	:is(#naori, .naori-foot) .n-hero { height: auto; min-height: 100svh; max-height: none; }
	:is(#naori, .naori-foot) .n-hero__in { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 36px; padding-bottom: 44px; }
	body.naori-draft :is(#naori, .naori-foot) .n-hero__in { padding-top: 140px; }
	body:not(.naori-draft) :is(#naori, .naori-foot) .n-hero__in { padding-top: 110px; }
	:is(#naori, .naori-foot) .n-hero__copy { width: 100%; max-width: 600px; gap: 20px; }
	:is(#naori, .naori-foot) .n-hero__title { font-size: 40px; letter-spacing: -.6px; }
	:is(#naori, .naori-foot) .n-hero__lead { font-size: 16px; }
	:is(#naori, .naori-foot) .n-hero__tiles { flex-direction: row; flex: 0 0 auto; max-width: none; margin-left: 0; gap: 12px; }
	:is(#naori, .naori-foot) .n-hero__tile { flex: 1 1 0; padding: 18px 54px 18px 18px; }
	:is(#naori, .naori-foot) .n-hero__tile-arw { right: 16px; }
	:is(#naori, .naori-foot) .n-hero__tile-title { font-size: 16px; }
	:is(#naori, .naori-foot) .n-hero__veil { background: linear-gradient(0deg, rgba(20, 20, 18, calc(.3 + var(--n-overlay, .1))) 0%, rgba(20, 20, 18, calc(.12 + var(--n-overlay, .1) * .6)) 55%, rgba(20, 20, 18, .08) 100%); }

	/* Poznaj NAORI */
	:is(#naori, .naori-foot) .n-about__r1 { grid-template-columns: 1fr; gap: 28px; }
	:is(#naori, .naori-foot) .n-about__r2 { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
	:is(#naori, .naori-foot) .n-about__r2 .n-about__square { order: -1; }
	:is(#naori, .naori-foot) .n-about__copy--pad { padding-right: 0; }
	:is(#naori, .naori-foot) .n-about__copy .n-body18 { max-width: 620px; }

	/* Dlaczego NAORI */
	:is(#naori, .naori-foot) .n-why__head { margin-bottom: 44px; }
	:is(#naori, .naori-foot) .n-why__split { flex-direction: column; gap: 44px; }
	:is(#naori, .naori-foot) .n-why__pillars { flex-basis: auto; }
	:is(#naori, .naori-foot) .n-why__pillar .n-body16 { max-width: 620px; }
	:is(#naori, .naori-foot) .n-why__film { min-height: 0; aspect-ratio: 16 / 10; margin-left: calc(-1 * var(--n-pad)); margin-right: calc(-1 * var(--n-pad)); }

	/* Twoja skóra */
	:is(#naori, .naori-foot) .n-skin__head { flex-direction: column; gap: 18px; margin-bottom: 36px; }
	:is(#naori, .naori-foot) .n-skin__head-l { flex-basis: auto; }
	:is(#naori, .naori-foot) .n-skin__head-r { max-width: 620px; padding-top: 0; }
	:is(#naori, .naori-foot) .n-skin__duo { flex-direction: column; gap: 0; }
	:is(#naori, .naori-foot) .n-skin__needs { flex-basis: auto; }
	:is(#naori, .naori-foot) .n-skin__need > button { padding: 16px 0; }
	:is(#naori, .naori-foot) .n-skin__need-name { font-size: 18px; }
	:is(#naori, .naori-foot) .n-skin__need > button:hover { padding-left: 0; }
	/* Akordeon: plus / minus zamiast linii */
	:is(#naori, .naori-foot) .n-skin__need-ind,
	:is(#naori, .naori-foot) .n-skin__need > button:hover .n-skin__need-ind,
	:is(#naori, .naori-foot) .n-skin__need.is-active .n-skin__need-ind { width: 14px; background: currentColor; transform: none; }
	:is(#naori, .naori-foot) .n-skin__need-ind::after {
		content: "";
		position: absolute;
		inset: 0;
		background: currentColor;
		transform: rotate(90deg);
		transition: transform .35s var(--n-ease);
	}
	:is(#naori, .naori-foot) .n-skin__need.is-active .n-skin__need-ind::after { transform: rotate(0deg); }
	/* Panel rozwijany pod aktywną pozycją (JS przenosi go do listy) */
	:is(#naori, .naori-foot) .n-skin__panel {
		flex: none;
		min-height: 0;
		margin: 0 calc(-1 * var(--n-pad)) 20px;
		background: transparent;
	}
	:is(#naori, .naori-foot) .n-skin__slide,
	:is(#naori, .naori-foot) .n-skin__slide[hidden] { position: relative; inset: auto; display: none; opacity: 1; visibility: visible; }
	:is(#naori, .naori-foot) .n-skin__slide.is-active { display: block; animation: naori-fade .45s ease; }
	:is(#naori, .naori-foot) .n-skin__media { position: relative; aspect-ratio: 16 / 10; }
	/* Karta pod zdjęciem: jasne szkło (ten sam system, wariant pod ciemny tekst) */
	:is(#naori, .naori-foot) .n-skin__card {
		position: relative;
		left: auto;
		bottom: auto;
		width: auto;
		margin: -60px var(--n-pad) 0;
		color: var(--n-ink);
		border-color: var(--n-glass-light-edge);
		background: var(--n-glass-light);
		box-shadow: var(--n-glass-light-inset), 0 2px 4px -2px rgba(20, 20, 18, .1), 0 22px 34px -24px rgba(20, 20, 18, .4);
		-webkit-backdrop-filter: var(--n-glass-light-fx);
		backdrop-filter: var(--n-glass-light-fx);
		text-shadow: none;
	}
	:is(#naori, .naori-foot) .n-skin__card::before { opacity: 0; }
	:is(#naori, .naori-foot) .n-skin__card .n-h21,
	:is(#naori, .naori-foot) .n-skin__sol-a,
	:is(#naori, .naori-foot) .n-skin__sol-a:hover { color: var(--n-ink); }
	:is(#naori, .naori-foot) .n-skin__card .n-skin__text { color: var(--n-ink2); text-shadow: none; }
	:is(#naori, .naori-foot) .n-skin__sol { border-top-color: var(--n-line); }
	:is(#naori, .naori-foot) .n-skin__sol-txt { color: var(--n-mid); }
	:is(#naori, .naori-foot) .n-skin__card .n-cta2--light { color: var(--n-ink); }

	/* Popularne zabiegi – przewijanie poziome */
	:is(#naori, .naori-foot) .n-treat .n-sechead { margin-bottom: 28px; }
	:is(#naori, .naori-foot) .n-strip { display: contents; }
	:is(#naori, .naori-foot) .n-strips {
		height: auto;
		gap: 10px;
		margin: 0 calc(-1 * var(--n-pad));
		padding: 0 var(--n-pad) 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--n-pad);
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	:is(#naori, .naori-foot) .n-strip__li { flex: 0 0 40%; padding-right: 0; scroll-snap-align: start; transition: none; }
	:is(#naori, .naori-foot) .n-strip__item { height: auto; aspect-ratio: 3 / 4; }
	:is(#naori, .naori-foot) .n-strip__name { width: auto; font-size: 19px; }
	:is(#naori, .naori-foot) .n-strip__desc { width: auto; max-height: none; opacity: 1; transform: none; font-size: 14px; }
	:is(#naori, .naori-foot) .n-strip__media .n-img { left: 0; width: 100%; transform: none; }
	/* v17: telefon/tablet – bez stanów aktywnych; zawsze biały tekst na jednakowym, mocniejszym przyciemnieniu u dołu
	   (na jasnych zdjęciach biały tekst wyglądał inaczej niż na ciemnych) */
	:is(#naori, .naori-foot) .n-strip__item { color: #fff; transition: none; }
	:is(#naori, .naori-foot) .n-strip__media::after {
		opacity: 1;
		background: linear-gradient(to top, rgba(14, 14, 13, .84) 0%, rgba(14, 14, 13, .7) 45%, rgba(14, 14, 13, .36) 75%, rgba(14, 14, 13, .22) 100%);
		transition: none;
	}
	:is(#naori, .naori-foot) .n-strip__body::before,
	:is(#naori, .naori-foot) .n-strip__body::after { display: none; }

	/* Artykuły */
	:is(#naori, .naori-foot) .n-art__grid { grid-template-columns: 1fr; gap: 44px; }
	:is(#naori, .naori-foot) .n-art__big-media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
	:is(#naori, .naori-foot) .n-art__side { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
	:is(#naori, .naori-foot) .n-art__big-title,
	:is(#naori, .naori-foot) .n-art__big-excerpt { max-width: 680px; }
	:is(#naori, .naori-foot) .n-art__big-title { font-size: 25px; }

	/* Lokalizacje */
	:is(#naori, .naori-foot) .n-loc__panels { grid-template-columns: 1fr; gap: 24px; }
	:is(#naori, .naori-foot) .n-sechead__r { gap: 20px; }

	/* Kontakt */
	:is(#naori, .naori-foot) .n-contact__grid { grid-template-columns: 1fr; gap: 52px; }

	/* Stopka */
	:is(#naori, .naori-foot) .n-footer { padding: 64px 0 28px; }
	:is(#naori, .naori-foot) .n-footer__grid { flex-wrap: wrap; gap: 36px 32px; }
	:is(#naori, .naori-foot) .n-footer__brand { flex: 0 0 100%; }
	:is(#naori, .naori-foot) .n-footer__col { flex: 1 1 calc(33% - 22px); }
	:is(#naori, .naori-foot) .n-footer__locs { grid-template-columns: 1fr 1fr; max-width: 560px; }
	:is(#naori, .naori-foot) .n-footer__bot { margin-top: 44px; }
}

/* ================================================================== MOBILE ≤ 767px */
/*
 * v9: wyraźnie mniejsza skala całego interfejsu (typografia, przyciski, karty, odstępy),
 * z zachowaniem hierarchii desktopu – nagłówek nadal najważniejszy, CTA zachowuje rangę.
 */
@media (max-width: 767px) {
	:is(#naori, .naori-foot) { --n-pad: 20px; --n-sec: 50px; font-size: 15px; }

	:is(#naori, .naori-foot) .n-eyebrow { font-size: 10.5px; }
	:is(#naori, .naori-foot) .n-eyebrow--s,
	:is(#naori, .naori-foot) .n-num,
	:is(#naori, .naori-foot) .n-meta { font-size: 10.5px; }
	:is(#naori, .naori-foot) .n-h52 { font-size: 25px; letter-spacing: -.3px; line-height: 1.16; }
	:is(#naori, .naori-foot) .n-h40 { font-size: 23px; letter-spacing: -.2px; line-height: 1.18; }
	:is(#naori, .naori-foot) .n-h32 { font-size: 20px; }
	:is(#naori, .naori-foot) .n-h21 { font-size: 18px; }
	:is(#naori, .naori-foot) .n-lead26 { font-size: 16px; }
	:is(#naori, .naori-foot) .n-lead22 { font-size: 16px; line-height: 1.5; }
	:is(#naori, .naori-foot) .n-body18 { font-size: 15.5px; }
	:is(#naori, .naori-foot) .n-body16 { font-size: 15px; }
	:is(#naori, .naori-foot) .n-cta2 { font-size: 15px; }

	:is(#naori, .naori-foot) .n-btn { min-height: 44px; padding: 0 22px; font-size: 14.5px; }
	:is(#naori, .naori-foot) .n-btn--primary { min-height: 48px; padding: 0 28px; font-size: 15px; }

	:is(#naori, .naori-foot) .n-bar { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
	:is(#naori, .naori-foot) .n-sechead { flex-direction: column; align-items: flex-start; gap: 16px; }
	:is(#naori, .naori-foot) .n-sechead__l { gap: 10px; }

	/* Header */
	:is(#naori, .naori-foot) .n-topbar { height: 22px; font-size: 10px; }
	:is(#naori, .naori-foot) .n-topbar__group { gap: 56px; padding-right: 56px; }
	:is(#naori, .naori-foot) .n-header__bar { height: 58px; }
	:is(#naori, .naori-foot) .n-header__logo img { width: 112px; }
	:is(#naori, .naori-foot) .n-mnav,
	:is(#naori, .naori-foot) .n-mzab { padding-top: 112px; }
	:is(#naori, .naori-foot) .n-mzab__grid { gap: 22px 16px; }
	:is(#naori, .naori-foot) .n-mzab__cat { font-size: 16px; }
	:is(#naori, .naori-foot) .n-mzab__list { font-size: 14px; }
	:is(#naori, .naori-foot) .n-header__zab { min-height: 36px; height: 36px; padding: 0 14px; font-size: 13.5px; }
	:is(#naori, .naori-foot) .n-mnav__list { font-size: 25px; }

	/* Hero */
	:is(#naori, .naori-foot) .n-hero { min-height: 100svh; }
	:is(#naori, .naori-foot) .n-hero__in { gap: 24px; padding-bottom: 28px; }
	body.naori-draft :is(#naori, .naori-foot) .n-hero__in { padding-top: 120px; }
	body:not(.naori-draft) :is(#naori, .naori-foot) .n-hero__in { padding-top: 88px; }
	:is(#naori, .naori-foot) .n-hero__copy { gap: 15px; }
	:is(#naori, .naori-foot) .n-hero__title { font-size: 31px; letter-spacing: -.5px; line-height: 1.08; }
	:is(#naori, .naori-foot) .n-hero__lead { font-size: 15px; line-height: 1.5; }
	:is(#naori, .naori-foot) .n-hero__tiles { gap: 8px; }
	:is(#naori, .naori-foot) .n-hero__tile { padding: 13px 13px 12px; }
	:is(#naori, .naori-foot) .n-hero__tile-arw { display: none; }
	:is(#naori, .naori-foot) .n-hero__tile-title { font-size: 13.5px; line-height: 1.3; }
	:is(#naori, .naori-foot) .n-hero__tile-text { display: none; }

	/* Poznaj NAORI */
	:is(#naori, .naori-foot) .n-about__r1,
	:is(#naori, .naori-foot) .n-about__r2 { gap: 20px; }
	:is(#naori, .naori-foot) .n-about__r2 { margin-top: 40px; }
	:is(#naori, .naori-foot) .n-about__wide { aspect-ratio: 4 / 3; }
	:is(#naori, .naori-foot) .n-about__copy { gap: 12px; }

	/* Dlaczego NAORI */
	:is(#naori, .naori-foot) .n-why__head { gap: 12px; margin-bottom: 28px; }
	:is(#naori, .naori-foot) .n-why__split { gap: 32px; }
	:is(#naori, .naori-foot) .n-why__pillar { gap: 6px; padding: 20px 0; }
	:is(#naori, .naori-foot) .n-why__film { aspect-ratio: 5 / 4; margin-left: 0; margin-right: 0; }

	/* Twoja skóra */
	:is(#naori, .naori-foot) .n-skin__head { margin-bottom: 24px; }
	:is(#naori, .naori-foot) .n-skin__need > button { padding: 13px 0; }
	:is(#naori, .naori-foot) .n-skin__need-label { gap: 10px; }
	:is(#naori, .naori-foot) .n-skin__need-name { font-size: 15.5px; }
	:is(#naori, .naori-foot) .n-skin__media { aspect-ratio: 4 / 3; }
	:is(#naori, .naori-foot) .n-skin__panel { margin: 0 0 16px; }
	:is(#naori, .naori-foot) .n-skin__card { margin: -36px 12px 0; padding: 16px 16px 15px; gap: 8px; }
	:is(#naori, .naori-foot) .n-skin__text { font-size: 14.5px; }
	:is(#naori, .naori-foot) .n-skin__sol { flex-direction: column; gap: 6px; padding-top: 12px; font-size: 15px; }
	:is(#naori, .naori-foot) .n-skin__sol li + li::before { content: none; }

	/* Popularne zabiegi */
	:is(#naori, .naori-foot) .n-strip__li { flex-basis: 70%; }
	:is(#naori, .naori-foot) .n-strip__item { aspect-ratio: 3 / 4.1; }
	:is(#naori, .naori-foot) .n-strip__body { gap: 8px; padding: 28px 14px 14px; }
	:is(#naori, .naori-foot) .n-strip__name { font-size: 17px; }
	:is(#naori, .naori-foot) .n-strip__desc { font-size: 13.5px; }
	:is(#naori, .naori-foot) .n-strip__no { left: 18px; }
	:is(#naori, .naori-foot) .n-sechead__r { width: 100%; justify-content: space-between; }
	:is(#naori, .naori-foot) .n-arrow { width: 40px; height: 40px; font-size: 15px; }

	/* Artykuły */
	:is(#naori, .naori-foot) .n-art__results { padding-top: 24px; }
	:is(#naori, .naori-foot) .n-art__grid { gap: 32px; }
	:is(#naori, .naori-foot) .n-art__big { gap: 10px; }
	:is(#naori, .naori-foot) .n-art__big-title { font-size: 20px; }
	:is(#naori, .naori-foot) .n-art__big-excerpt { font-size: 15px; }
	:is(#naori, .naori-foot) .n-art__side { grid-template-columns: 1fr; gap: 28px; }
	:is(#naori, .naori-foot) .n-art__item { gap: 10px; }
	:is(#naori, .naori-foot) .n-art__item-title { font-size: 17px; }

	/* Lokalizacje */
	:is(#naori, .naori-foot) .n-loc__panels { gap: 16px; }
	:is(#naori, .naori-foot) .n-loc__head { gap: 10px; margin-bottom: 24px; }
	:is(#naori, .naori-foot) .n-loc__body { padding: 24px 20px 26px; }
	:is(#naori, .naori-foot) .n-loc__addr { font-size: 15px; }
	:is(#naori, .naori-foot) .n-loc__desc { margin-top: 10px; }
	:is(#naori, .naori-foot) .n-loc__map { height: 180px; margin: 18px 0; }
	:is(#naori, .naori-foot) .n-loc__card.has-photo .n-loc__map { height: 150px; }
	:is(#naori, .naori-foot) .n-loc__rows { font-size: 15px; }
	:is(#naori, .naori-foot) .n-loc__hours { font-size: 14px; }
	:is(#naori, .naori-foot) .n-loc__acts { gap: 14px 24px; margin-top: 20px; }

	/* Kontakt */
	:is(#naori, .naori-foot) .n-contact__grid { gap: 40px; }
	:is(#naori, .naori-foot) .n-contact__info .n-h40 { margin-top: 10px; }
	:is(#naori, .naori-foot) .n-contact__sub { margin-top: 20px; }
	:is(#naori, .naori-foot) .n-social { gap: 10px; margin-top: 20px; }
	:is(#naori, .naori-foot) .n-social__a { width: 40px; height: 40px; }
	:is(#naori, .naori-foot) .n-contact__dl { gap: 18px; margin-top: 26px; }
	:is(#naori, .naori-foot) .n-contact__dl dd { font-size: 15px; }
	:is(#naori, .naori-foot) .n-form { margin-top: 14px; }
	:is(#naori, .naori-foot) .n-form__row { grid-template-columns: 1fr; gap: 16px; }
	:is(#naori, .naori-foot) .n-form__row + .n-form__row,
	:is(#naori, .naori-foot) .n-form__row + .n-field,
	:is(#naori, .naori-foot) .n-form .n-field--area { margin-top: 16px; }
	:is(#naori, .naori-foot) .n-field input,
	:is(#naori, .naori-foot) .n-field textarea { font-size: 15px; }
	:is(#naori, .naori-foot) .n-form__info { font-size: 13px; }
	:is(#naori, .naori-foot) .n-form input[type="submit"],
	:is(#naori, .naori-foot) .n-form .wpcf7-submit { min-height: 44px; padding: 0 22px; font-size: 14.5px; }

	/* Stopka */
	:is(#naori, .naori-foot) .n-footer { padding: 48px 0 24px; }
	:is(#naori, .naori-foot) .n-footer__grid { gap: 32px 24px; }
	:is(#naori, .naori-foot) .n-footer__brand { gap: 14px; }
	:is(#naori, .naori-foot) .n-footer__brand img { width: 132px; height: auto; }
	:is(#naori, .naori-foot) .n-footer__col { flex-basis: 100%; gap: 12px; }
	:is(#naori, .naori-foot) .n-footer__list + .n-footer__cookies { margin-top: -12px; }
	:is(#naori, .naori-foot) .n-footer__locs { grid-template-columns: 1fr; gap: 18px; margin-top: 10px; }
	:is(#naori, .naori-foot) .n-footer__loc,
	:is(#naori, .naori-foot) .n-footer__brand .n-footer__loc p { font-size: 14px; }
	:is(#naori, .naori-foot) .n-footer__list,
	:is(#naori, .naori-foot) .n-footer__cookies { font-size: 15px; line-height: 1.75; }
	:is(#naori, .naori-foot) .n-footer__col:nth-child(2),
	:is(#naori, .naori-foot) .n-footer__col:nth-child(3) { flex-basis: calc(50% - 12px); }
	:is(#naori, .naori-foot) .n-footer__bot { flex-direction: column; margin-top: 36px; line-height: 1.5; }
}
@media (max-width: 782px) {
	body.admin-bar :is(#naori, .naori-foot) .n-header { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar :is(#naori, .naori-foot) .n-header { top: 0; }
}

@keyframes naori-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================== Ograniczony ruch */
@media (prefers-reduced-motion: reduce) {
	:is(#naori, .naori-foot) *,
	:is(#naori, .naori-foot) *::before,
	:is(#naori, .naori-foot) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	:is(#naori, .naori-foot).is-js .n-rv { opacity: 1; transform: none; }
}

/* ================================================================== Integracja z Astrą (tylko ta strona) */
body.naori-home-template #ast-scroll-top { background-color: #1e1f1f; color: #fff; border-radius: 0; }
body.naori-home-template .site-content > .ast-container { max-width: none; padding: 0; display: block; }
body.naori-home-template #primary { margin: 0; padding: 0; width: 100%; }

/* ================================================================== v18: header i stopka na podstronach (inc/naori-site.php) */
/* Wrapper headera nie zasłania treści Elementora; odstęp = wysokość przypiętego headera (pasek + header). */
#naori.naori--site { background: transparent; overflow: visible; }
#naori.naori--site .n-header-spacer { height: 108px; }
@media (max-width: 1024px) {
	#naori.naori--site .n-header-spacer { height: 90px; }
}
@media (max-width: 767px) {
	#naori.naori--site .n-header-spacer { height: 80px; }
}