/* =========================================================================
   Move Your Spine - tokeny, reset i komponenty bazowe

   Paleta v1.4 (uwagi klientki): rozjaśniona - biel, beż, lawenda.
   Grafit zostaje wyłącznie na tekst, stopkę i pojedyncze sekcje kontrastowe.
   Nazwy tokenów są te same co w v1.3, więc zmiana palety to jedno miejsce.
   ====================================================================== */

:root {
	/* Tła: biel -> ciepła biel -> beż -> lawenda */
	--mys-bg:            #FFFFFF;
	--mys-bg-alt:        #F6F1E9;
	--mys-bg-lav:        #F1EDFC;
	--mys-surface:       #FFFFFF;
	--mys-surface-2:     #FBF9F5;
	--mys-hero-img-bg:   #EFE9DE;

	/* Grafit z nutą fioletu */
	--mys-brand:         #1E1B2E;
	--mys-brand-2:       #292540;
	--mys-brand-3:       #322C4D;

	/* Akcent wiodący: lawenda */
	--mys-accent:        #7C5CE0;
	--mys-accent-2:      #9B82EA;
	--mys-accent-ink:    #5B3FC4;
	--mys-accent-soft:   #EBE5FC;
	--mys-accent-soft-2: #DCD2FA;
	--mys-on-accent:     #FFFFFF;

	/* Beż: drugi akcent, ociepla lawendę i działa na ciemnym tle */
	--mys-beige:         #E7D6C4;
	--mys-beige-soft:    #F7EEE4;
	--mys-beige-ink:     #9C7A57;

	/* Żywe kolory kategorii (kafle, badge, okładki) */
	--mys-c-ebook:       #6F4FD8;
	--mys-c-plan:        #1F7A6B;
	--mys-c-menu:        #D2622F;
	--mys-c-course:      #B5417A;

	--mys-text:          #1E1B2E;
	--mys-text-85:       rgba(30, 27, 46, .85);
	--mys-text-78:       rgba(30, 27, 46, .78);
	--mys-text-70:       rgba(30, 27, 46, .70);
	--mys-text-66:       rgba(30, 27, 46, .66);
	--mys-text-55:       rgba(30, 27, 46, .55);
	--mys-text-50:       rgba(30, 27, 46, .50);
	--mys-on-dark:       #F6F3EE;
	--mys-on-dark-82:    rgba(246, 243, 238, .82);
	--mys-on-dark-70:    rgba(246, 243, 238, .70);
	--mys-on-dark-60:    rgba(246, 243, 238, .60);

	--mys-border:        rgba(30, 27, 46, .10);
	--mys-border-strong: rgba(30, 27, 46, .17);
	--mys-border-dark:   rgba(246, 243, 238, .14);
	--mys-error:         #B4462F;

	--mys-font-head: 'Playfair Display', Georgia, serif;
	--mys-font-body: 'Poppins', system-ui, -apple-system, sans-serif;

	--mys-container:  1180px;
	--mys-section-y:  clamp(64px, 8vw, 120px);
	--mys-section-x:  clamp(22px, 5vw, 64px);
	--mys-head-h:     75px;

	--mys-radius-pill:  999px;
	--mys-radius-card:  20px;
	--mys-radius-lg:    24px;
	--mys-radius-input: 12px;
	--mys-radius-icon:  12px;

	--mys-ease: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------------------
   Reset - specyficzność 0,0,1 (:where), żeby NIE bić reguł komponentów
   ---------------------------------------------------------------------- */

:where(.mys-theme) *,
:where(.mys-theme) *::before,
:where(.mys-theme) *::after { box-sizing: border-box; }

:where(.mys-theme) img,
:where(.mys-theme) svg,
:where(.mys-theme) iframe { display: block; max-width: 100%; }

:where(.mys-theme) img { height: auto; }

:where(.mys-theme) h1,
:where(.mys-theme) h2,
:where(.mys-theme) h3,
:where(.mys-theme) h4,
:where(.mys-theme) h5,
:where(.mys-theme) h6,
:where(.mys-theme) p,
:where(.mys-theme) figure,
:where(.mys-theme) blockquote { margin: 0; }

:where(.mys-theme) button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	touch-action: manipulation;
}

:where(.mys-theme) a { color: var(--mys-accent-ink); text-decoration: none; }

/* `body.mys-theme` (0,1,1), bo Shoptimizer drukuje inline `:root :where(body)`
   (0,1,0) z fontem Inter i kolorem #444 PO naszych arkuszach. */
body.mys-theme {
	margin: 0;
	background: var(--mys-bg);
	color: var(--mys-text);
	font-family: var(--mys-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* UWAGA: Shoptimizer drukuje inline `h1..h5 { color:#111; font-family:Inter }`
   PO naszych arkuszach, więc bazowa reguła musi mieć wyższą specyficzność niż
   sam element. Nagłówki na CIEMNYCH sekcjach dostają własne reguły z prefiksem
   `.mys-theme` w type.css (ładowanym na końcu) - inaczej wracają do grafitu. */
.mys-theme h1,
.mys-theme h2,
.mys-theme h3,
.mys-theme h4 { font-family: var(--mys-font-head); color: var(--mys-text); }

.mys-theme a:focus-visible,
.mys-theme button:focus-visible,
.mys-theme input:focus-visible,
.mys-theme select:focus-visible,
.mys-theme textarea:focus-visible {
	outline: 2px solid var(--mys-accent-ink);
	outline-offset: 2px;
	border-radius: 8px;
}

.mys-theme ::selection { background: var(--mys-brand); color: var(--mys-on-dark); }

.mys-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--mys-brand);
	color: var(--mys-on-dark);
	padding: 12px 20px;
	border-radius: 0 0 12px 0;
}
.mys-skip:focus { left: 0; }

/* Pasek postępu czytania (CSS-only; bez wsparcia po prostu się nie pokazuje) */
.mys-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 70;
	background: var(--mys-accent-ink);
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
}
@supports (animation-timeline: scroll(root block)) {
	@keyframes mys-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	.mys-progress {
		animation: mys-progress linear;
		animation-timeline: scroll(root block);
	}
}

/* -------------------------------------------------------------------------
   Układ
   ---------------------------------------------------------------------- */

.mys-container {
	width: 100%;
	max-width: var(--mys-container);
	margin-inline: auto;
	padding-inline: var(--mys-section-x);
}

.mys-section { padding-block: var(--mys-section-y); }

.mys-main { display: block; }

.mys-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-hidden { display: none !important; }

/* -------------------------------------------------------------------------
   Typografia komponentów
   ---------------------------------------------------------------------- */

.mys-eyebrow {
	display: block;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mys-accent-ink);
}
.mys-eyebrow--accent  { color: var(--mys-accent); }
.mys-eyebrow--accent2 { color: var(--mys-accent-2); }

.mys-h2 {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.06;
	letter-spacing: -.025em;
	margin: 0;
}
.mys-h2--sm { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; }
.mys-h2--md { font-size: clamp(28px, 3.8vw, 48px); }
.mys-h2--xs { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }

/* Treść z edytora */
.mys-rte { font-size: 16px; line-height: 1.65; color: var(--mys-text-78); }
.mys-rte p { margin: 0 0 18px; }
.mys-rte p:last-child { margin-bottom: 0; }
.mys-rte h2,
.mys-rte h3 { font-family: var(--mys-font-head); font-weight: 700; color: var(--mys-text); margin: 32px 0 12px; }
.mys-rte h2 { font-size: 28px; }
.mys-rte h3 { font-size: 21px; }
.mys-rte ul,
.mys-rte ol { margin: 0 0 18px; padding-left: 22px; }
.mys-rte li { margin-bottom: 8px; }
.mys-rte a { color: var(--mys-accent-ink); border-bottom: 1px solid rgba(124, 92, 224, .35); }
.mys-rte strong { color: var(--mys-text); font-weight: 600; }
.mys-rte--lg { font-size: 16px; line-height: 1.7; color: var(--mys-text-85); }
.mys-rte--lg p { margin-bottom: 20px; }
.mys-rte--legal { line-height: 1.7; color: rgba(30, 27, 46, .74); }
.mys-rte--legal p { margin-bottom: 18px; }

/* -------------------------------------------------------------------------
   Przyciski
   ---------------------------------------------------------------------- */

.mys-theme .mys-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: none;
	border-radius: var(--mys-radius-pill);
	padding: 15px 28px;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition: filter .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mys-theme .mys-btn svg { flex: none; }

/* UWAGA: kazdy wariant MUSI ustawiac `background-color` takze na :hover.
   Shoptimizer drukuje wlasne `button:hover { background-color: ... }` (zielen)
   PO naszych arkuszach; dopoki nie podamy tla jawnie, ono wygrywa. */

/* Główne CTA na jasnym tle: lawenda + biel (4,7:1, przechodzi AA). */
.mys-theme .mys-btn--primary { background-color: var(--mys-accent); color: var(--mys-on-accent); }
.mys-theme .mys-btn--primary:hover,
.mys-theme .mys-btn--primary:focus-visible {
	background-color: var(--mys-accent-ink);
	color: var(--mys-on-accent);
	transform: translateY(-1px);
	opacity: 1;
}

/* Wariant grafitowy - drugorzędne CTA i przyciski na lawendowych tłach. */
.mys-theme .mys-btn--dark { background-color: var(--mys-brand); color: var(--mys-on-dark); }
.mys-theme .mys-btn--dark:hover,
.mys-theme .mys-btn--dark:focus-visible {
	background-color: var(--mys-brand-3);
	color: var(--mys-on-dark);
	opacity: 1;
}

/* Beż - CTA na sekcjach ciemnych (stopka, newsletter, kafle). */
.mys-theme .mys-btn--accent { background-color: var(--mys-beige); color: var(--mys-brand); }
.mys-theme .mys-btn--accent:hover,
.mys-theme .mys-btn--accent:focus-visible {
	background-color: var(--mys-beige-soft);
	color: var(--mys-brand);
	transform: translateY(-1px);
	opacity: 1;
}

/* Lawenda na jasnym, ale w wersji „miękkiej" (tło soft, tekst akcentowy). */
.mys-theme .mys-btn--soft { background-color: var(--mys-accent-soft); color: var(--mys-accent-ink); }
.mys-theme .mys-btn--soft:hover,
.mys-theme .mys-btn--soft:focus-visible {
	background-color: var(--mys-accent-soft-2);
	color: var(--mys-accent-ink);
	opacity: 1;
}

.mys-theme .mys-btn--ghost {
	background-color: transparent;
	color: var(--mys-text);
	border: 1px solid rgba(30, 27, 46, .2);
}
.mys-theme .mys-btn--ghost:hover,
.mys-theme .mys-btn--ghost:focus-visible {
	background-color: var(--mys-accent-soft);
	border-color: var(--mys-accent);
	color: var(--mys-accent-ink);
	opacity: 1;
}

.mys-theme .mys-btn--ghost-light {
	background-color: transparent;
	color: var(--mys-on-dark);
	border: 1px solid rgba(246, 243, 238, .4);
}
.mys-theme .mys-btn--ghost-light:hover,
.mys-theme .mys-btn--ghost-light:focus-visible {
	background-color: rgba(246, 243, 238, .12);
	color: var(--mys-on-dark);
	opacity: 1;
}

/* Woo/Shoptimizer koloruja `.button:hover` - nasze warianty podaja tlo jawnie. */
.mys-theme .mys-btn--primary.button:hover,
.mys-theme .mys-btn--primary.add_to_cart_button:hover { background-color: var(--mys-accent-ink); }
.mys-theme .mys-btn--accent.button:hover { background-color: var(--mys-beige-soft); }

.mys-theme .mys-btn { white-space: nowrap; }
.mys-theme .mys-btn--block { white-space: normal; }

.mys-theme .mys-btn--sm { padding: 12px 18px; font-size: 13.5px; }
.mys-theme .mys-btn--head { padding: 12px 22px; font-size: 14px; }
.mys-theme .mys-btn--block { width: 100%; }

/* Link tekstowy ze strzałką („Czytaj dalej") */
.mys-theme .mys-textlink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: var(--mys-text);
	padding: 11px 0;
	transition: gap .2s ease;
}
.mys-theme .mys-textlink span { border-bottom: 2px solid var(--mys-accent-ink); padding-bottom: 3px; }
.mys-theme .mys-textlink:hover { gap: 14px; opacity: 1; }

/* Okrągłe przyciski ikonowe */
.mys-theme .mys-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--mys-radius-pill);
	background: rgba(30, 27, 46, .05);
	border: 1px solid rgba(30, 27, 46, .12);
	color: var(--mys-text);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.mys-theme .mys-iconbtn:hover { background: rgba(30, 27, 46, .09); }
.mys-theme .mys-iconbtn--sm { width: 36px; height: 36px; background: none; border-color: rgba(30, 27, 46, .14); }
.mys-theme .mys-iconbtn--nav { width: 46px; height: 46px; background: none; border-color: rgba(30, 27, 46, .2); }
.mys-theme .mys-iconbtn--nav:hover { background: rgba(30, 27, 46, .06); }

/* -------------------------------------------------------------------------
   Formularze
   ---------------------------------------------------------------------- */

.mys-field { display: block; }
.mys-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--mys-text);
}
.mys-theme .mys-field__input {
	width: 100%;
	background: #fff;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	padding: 13px 15px;
	font-family: var(--mys-font-body);
	font-size: 15px;
	color: var(--mys-text);
	transition: border-color .2s ease;
}
.mys-theme .mys-field__input::placeholder { color: var(--mys-text-50); }
.mys-theme .mys-field__input:focus { outline: none; border-color: var(--mys-brand); }
.mys-theme .mys-field__input--area { resize: vertical; min-height: 110px; line-height: 1.55; }

.mys-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mys-form__error { margin: 0; color: var(--mys-error); font-size: 13.5px; font-weight: 600; }

/* -------------------------------------------------------------------------
   Animacje wejścia sekcji
   ---------------------------------------------------------------------- */

.mys-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--mys-ease), transform .8s var(--mys-ease);
}
.mys-reveal.is-in { opacity: 1; transform: none; }

/* Kafelki/karty wchodzą kaskadowo w obrębie odsłanianej sekcji. */
@media (prefers-reduced-motion: no-preference) {
	.mys-reveal .mys-stats__grid > *,
	.mys-reveal .mys-situations__grid > *,
	.mys-reveal .mys-philo__grid > *,
	.mys-reveal .mys-steps__list > *,
	.mys-reveal .mys-test__items > *,
	.mys-reveal .mys-tiles__grid > *,
	.mys-reveal .mys-faq__list > *,
	.mys-reveal ul.products.mys-grid > li {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .55s var(--mys-ease), transform .55s var(--mys-ease);
	}
	.mys-reveal.is-in .mys-stats__grid > *,
	.mys-reveal.is-in .mys-situations__grid > *,
	.mys-reveal.is-in .mys-philo__grid > *,
	.mys-reveal.is-in .mys-steps__list > *,
	.mys-reveal.is-in .mys-test__items > *,
	.mys-reveal.is-in .mys-tiles__grid > *,
	.mys-reveal.is-in .mys-faq__list > *,
	.mys-reveal.is-in ul.products.mys-grid > li { opacity: 1; transform: none; }

	.mys-reveal.is-in :is(.mys-stats__grid, .mys-situations__grid, .mys-philo__grid, .mys-steps__list, .mys-test__items, .mys-tiles__grid, .mys-faq__list, ul.products.mys-grid) > *:nth-child(1) { transition-delay: .04s; }
	.mys-reveal.is-in :is(.mys-stats__grid, .mys-situations__grid, .mys-philo__grid, .mys-steps__list, .mys-test__items, .mys-tiles__grid, .mys-faq__list, ul.products.mys-grid) > *:nth-child(2) { transition-delay: .1s; }
	.mys-reveal.is-in :is(.mys-stats__grid, .mys-situations__grid, .mys-philo__grid, .mys-steps__list, .mys-test__items, .mys-tiles__grid, .mys-faq__list, ul.products.mys-grid) > *:nth-child(3) { transition-delay: .16s; }
	.mys-reveal.is-in :is(.mys-stats__grid, .mys-situations__grid, .mys-philo__grid, .mys-steps__list, .mys-test__items, .mys-tiles__grid, .mys-faq__list, ul.products.mys-grid) > *:nth-child(4) { transition-delay: .22s; }
	.mys-reveal.is-in :is(.mys-stats__grid, .mys-situations__grid, .mys-philo__grid, .mys-steps__list, .mys-test__items, .mys-tiles__grid, .mys-faq__list, ul.products.mys-grid) > *:nth-child(5) { transition-delay: .28s; }
	.mys-reveal.is-in :is(.mys-stats__grid, .mys-situations__grid, .mys-philo__grid, .mys-steps__list, .mys-test__items, .mys-tiles__grid, .mys-faq__list, ul.products.mys-grid) > *:nth-child(n+6) { transition-delay: .34s; }

	/* Zdjęcia „oddychają" na hover (karty produktów i kadry sekcyjne). */
	.mys-card__media img,
	.mys-about__media img,
	.mys-steps__media img,
	.mys-aboutpage__frame img { transition: transform .7s var(--mys-ease); }
	.mys-card:hover .mys-card__media img,
	.mys-about__media:hover img,
	.mys-steps__media:hover img,
	.mys-aboutpage__frame:hover img { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
	.mys-theme *,
	.mys-theme *::before,
	.mys-theme *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.mys-reveal { opacity: 1; transform: none; }
	.mys-progress { animation: none; }
}

/* Sekcja doklejona do poprzedniej - bez podwojnego odstepu miedzy blokami. */
.mys-section--flush { padding-block-start: 0; }