/* =========================================================================
   Move Your Spine - skala typograficzna (arkusz ładowany JAKO OSTATNI)
   Przy równej specyficzności decyduje kolejność wczytania, dlatego docelowe
   rozmiary trzymamy tutaj, a nie rozsiane po plikach komponentów.
   ====================================================================== */

body.mys-theme,
.mys-theme input,
.mys-theme select,
.mys-theme textarea,
.mys-theme button { font-family: var(--mys-font-body); }
body.mys-theme { color: var(--mys-text); font-size: 16px; line-height: 1.6; }

.mys-theme h1,
.mys-theme h2,
.mys-theme h3,
.mys-theme h4,
.mys-theme .mys-h2,
.mys-theme .mys-hero__title,
.mys-theme .mys-hero__slogan,
.mys-theme .mys-pagehero__title,
.mys-theme .mys-legalhead__title,
.mys-theme .mys-page__title { font-family: var(--mys-font-head); }

/* Nagłówki główne */
.mys-theme .mys-hero__title   { font-size: clamp(46px, 7.4vw, 96px); font-weight: 800; line-height: .94; letter-spacing: -.03em; }
.mys-theme .mys-hero__slogan  { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; line-height: 1.22; letter-spacing: -.015em; }
.mys-theme .mys-pagehero__title { font-size: clamp(38px, 5.5vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.mys-theme .mys-legalhead__title { font-size: clamp(34px, 5vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.mys-theme .mys-page__title   { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.mys-theme .mys-shophero__title { font-size: clamp(38px, 5.4vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.mys-theme .mys-kalkhero__title { font-size: clamp(34px, 5.2vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }

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

/* Tekst */
.mys-theme .mys-rte,
.mys-theme .mys-hero__intro,
.mys-theme .mys-steps__lead,
.mys-theme .mys-test__lead { font-size: 16px; }

.mys-theme .mys-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* Przyciski */
.mys-theme .mys-btn      { font-size: 15px; font-weight: 600; line-height: 1; }
.mys-theme .mys-btn--sm  { font-size: 13.5px; }
.mys-theme .mys-btn--head { font-size: 14px; }

/* -------------------------------------------------------------------------
   Nagłówki na CIEMNYM tle - muszą mieć prefiks `.mys-theme` (0,2,0), bo bazowa
   reguła `.mys-theme h1..h4 { color: grafit }` ma 0,1,1 i wygrywa z klasami.
   ---------------------------------------------------------------------- */
.mys-theme .mys-hero__title,
.mys-theme .mys-quiz__title,
.mys-theme .mys-quiz__question,
.mys-theme .mys-quiz__restitle,
.mys-theme .mys-tiles__head .mys-h2,
.mys-theme .mys-tile__title,
.mys-theme .mys-pagehero__title,
.mys-theme .mys-booksycard__title,
.mys-theme .mys-ctabanner__title,
.mys-theme .mys-footer__name,
.mys-theme .mys-footer h1,
.mys-theme .mys-footer h2,
.mys-theme .mys-footer h3,
.mys-theme .mys-kalkbanner__text .mys-h2,
.mys-theme .mys-newsletter__text .mys-h2,
.mys-theme .mys-shopinfo strong,
.mys-theme .mys-nlform__donetitle { color: var(--mys-on-dark); }

/* Hero produktowy jest JASNY - nagłówek musi zostać grafitowy. */
.mys-theme .mys-shophero__title,
.mys-theme .mys-kalkhero__title { color: var(--mys-text); }
.mys-theme .mys-kalkhero__title em { color: var(--mys-accent); }

.mys-theme .mys-hero__slogan { color: var(--mys-accent); }

/* Teksty na ciemnym (Shoptimizer wstawia #444 przez `:root :where(body)`). */
.mys-theme .mys-hero__intro { color: rgba(246, 243, 238, .86); }
.mys-theme .mys-quiz__restext { color: var(--mys-on-dark-82); }
.mys-theme .mys-tile__text { color: rgba(246, 243, 238, .62); }
.mys-theme .mys-tile--accent .mys-tile__text { color: rgba(246, 243, 238, .78); }
.mys-theme .mys-pagehero__lead { color: rgba(246, 243, 238, .92); }
.mys-theme .mys-kalkbanner__lead,
.mys-theme .mys-newsletter__lead { color: var(--mys-on-dark-70); }
.mys-theme .mys-shophero__lead,
.mys-theme .mys-kalkhero__lead { color: var(--mys-text-70); }
.mys-theme .mys-booksycard__text { color: var(--mys-on-dark-70); }
.mys-theme .mys-ctabanner__text p { color: var(--mys-on-dark-82); }
.mys-theme .mys-footer__desc { color: var(--mys-on-dark-60); }
.mys-theme .mys-drawer__title,
.mys-theme .mys-modal__title,
.mys-theme .mys-formcard__title { color: var(--mys-text); }

/* Shoptimizer potrafi narzucić własne rozmiary nagłówkom w treści Woo. */
.mys-theme .mys-page__content h1,
.mys-theme .mys-page__content h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; }
.mys-theme .mys-page__content h3 { font-size: 21px; font-weight: 700; }