/*
 * Wspólne komponenty sekcji phx-* (ładowane raz: front + iframe edytora).
 * Kolory i branding wyłącznie z tokenów: presety (--wp--preset--*), decyzje (--wp--custom--*) i warstwa pochodna
 * (--wp--custom--derived--*, liczona przez motyw z decyzji). Tło sekcji ustawia kontekst (light | dark | brand) przez
 * zmienne --phx-*, z których korzystają wszystkie komponenty – blok nie musi wiedzieć, na jakim tle stoi.
 */

/* ---------- Kontekst kolorów sekcji ---------- */
/* ozdobniki SVG (Ornaments\Styles): adresy kopii per kontekst `--phx-orn-<slot>--<ctx>` → `--phx-orn-<slot>`; poza sekcją
   i w `.phx-bg-none` kontekst light (brak zmiennej = brak tła) */
:root,
.phx-bg-none {
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--light);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--light);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--light);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--light);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--light, currentColor);
}
/* tło „zdjęcie”: domyślnie jasna treść (kontekst dark); `phx-image-text-dark` – ciemna treść na jasnym zdjęciu (kontekst light);
   szuflada mini-koszyka (tło `base`) zawsze jasna – także w nagłówku z ciemnym tłem */
.phx-section,
.phx-ctx-light,
.wc-block-mini-cart__drawer,
.phx-bg-image.phx-image-text-dark,
.wp-block-group.is-style-phx-section,
.wp-block-group.is-style-phx-section-subtle,
.wp-block-group.is-style-phx-section-dark,
.wp-block-group.is-style-phx-section-brand {
  --phx-bg: var(--wp--preset--color--base);
  --phx-fg: var(--wp--preset--color--contrast);
  --phx-fg-muted: var(--wp--preset--color--muted);
  --phx-link: var(--wp--preset--color--brand-text);
  --phx-border: var(--wp--preset--color--border);
  --phx-btn-primary-bg: var(--wp--custom--derived--button--primary--light--bg);
  --phx-btn-primary-bg-image: var(--wp--custom--derived--button--primary--light--bg-image);
  --phx-btn-primary-fg: var(--wp--custom--derived--button--primary--light--fg);
  --phx-btn-primary-border: var(--wp--custom--derived--button--primary--light--border);
  --phx-btn-primary-bg-hover: var(--wp--custom--derived--button--primary--light--bg-hover);
  --phx-btn-primary-fg-hover: var(--wp--custom--derived--button--primary--light--fg-hover);
  --phx-btn-primary-border-hover: var(--wp--custom--derived--button--primary--light--border-hover);
  --phx-btn-secondary-bg: var(--wp--custom--derived--button--secondary--light--bg);
  --phx-btn-secondary-bg-image: var(--wp--custom--derived--button--secondary--light--bg-image);
  --phx-btn-secondary-fg: var(--wp--custom--derived--button--secondary--light--fg);
  --phx-btn-secondary-border: var(--wp--custom--derived--button--secondary--light--border);
  --phx-btn-secondary-bg-hover: var(--wp--custom--derived--button--secondary--light--bg-hover);
  --phx-btn-secondary-fg-hover: var(--wp--custom--derived--button--secondary--light--fg-hover);
  --phx-btn-secondary-border-hover: var(--wp--custom--derived--button--secondary--light--border-hover);
  --phx-eyebrow-fg: var(--wp--custom--derived--eyebrow--light--fg);
  --phx-eyebrow-bg: var(--wp--custom--derived--eyebrow--light--bg);
  --phx-hl-fg: var(--wp--custom--derived--highlight--light--fg);
  --phx-hl-bg: var(--wp--custom--derived--highlight--light--bg);
  --phx-hl-line: var(--wp--custom--derived--highlight--light--line);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--light);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--light);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--light);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--light);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--light, currentColor);
  --phx-icon-fg: var(--wp--custom--derived--icon--light--fg);
  --phx-icon-bg: var(--wp--custom--derived--icon--light--bg);
  --phx-icon-border: var(--wp--custom--derived--icon--light--border);
  --phx-card-bg: var(--wp--custom--derived--card--light--bg);
  --phx-card-border: var(--wp--custom--derived--card--light--border);
  --phx-card-shadow: var(--wp--custom--derived--card--light--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--light--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--light--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--light--bg);
  --phx-field-border: var(--wp--custom--derived--field--light--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--light--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--light--error);
  --phx-field-success: var(--wp--custom--derived--field--light--success);
  /* kolory niestandardowe sekcji (View\CustomColors, inline na wrapperze – wygrywa z tą regułą): reset w każdym kontekście
     zagnieżdżonym (karta z kolorem, karta wyróżniona `filled`, szuflada – także w subtle/dark/brand), żeby nie przechodziły do
     elementów z własnym schematem */
  --phx-section-fill: initial;
  --phx-heading-color: initial;
  --phx-heading-fill: initial;
  --phx-card-fg: initial;
  color: var(--phx-fg);
}
.phx-bg-subtle,
.phx-ctx-subtle,
.wp-block-group.is-style-phx-section-subtle {
  --phx-bg: var(--wp--preset--color--surface);
  --phx-fg: var(--wp--preset--color--on-surface);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--subtle);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--subtle);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--subtle);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--subtle);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--subtle, currentColor);
  --phx-card-bg: var(--wp--custom--derived--card--subtle--bg);
  --phx-card-border: var(--wp--custom--derived--card--subtle--border);
  --phx-card-shadow: var(--wp--custom--derived--card--subtle--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--subtle--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--subtle--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--subtle--bg);
  --phx-field-border: var(--wp--custom--derived--field--subtle--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--subtle--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--subtle--error);
  --phx-field-success: var(--wp--custom--derived--field--subtle--success);
  --phx-section-fill: initial;
  --phx-heading-color: initial;
  --phx-heading-fill: initial;
  --phx-card-fg: initial;
}
.phx-bg-dark,
.phx-bg-image,
.phx-ctx-dark,
.wp-block-group.is-style-phx-section-dark {
  --phx-bg: var(--wp--preset--color--inverse);
  --phx-fg: var(--wp--preset--color--on-inverse);
  --phx-fg-muted: var(--wp--preset--color--on-inverse);
  --phx-link: var(--wp--preset--color--on-inverse);
  --phx-border: color-mix(in srgb, var(--wp--preset--color--on-inverse) 28%, transparent);
  --phx-btn-primary-bg: var(--wp--custom--derived--button--primary--dark--bg);
  --phx-btn-primary-bg-image: var(--wp--custom--derived--button--primary--dark--bg-image);
  --phx-btn-primary-fg: var(--wp--custom--derived--button--primary--dark--fg);
  --phx-btn-primary-border: var(--wp--custom--derived--button--primary--dark--border);
  --phx-btn-primary-bg-hover: var(--wp--custom--derived--button--primary--dark--bg-hover);
  --phx-btn-primary-fg-hover: var(--wp--custom--derived--button--primary--dark--fg-hover);
  --phx-btn-primary-border-hover: var(--wp--custom--derived--button--primary--dark--border-hover);
  --phx-btn-secondary-bg: var(--wp--custom--derived--button--secondary--dark--bg);
  --phx-btn-secondary-bg-image: var(--wp--custom--derived--button--secondary--dark--bg-image);
  --phx-btn-secondary-fg: var(--wp--custom--derived--button--secondary--dark--fg);
  --phx-btn-secondary-border: var(--wp--custom--derived--button--secondary--dark--border);
  --phx-btn-secondary-bg-hover: var(--wp--custom--derived--button--secondary--dark--bg-hover);
  --phx-btn-secondary-fg-hover: var(--wp--custom--derived--button--secondary--dark--fg-hover);
  --phx-btn-secondary-border-hover: var(--wp--custom--derived--button--secondary--dark--border-hover);
  --phx-eyebrow-fg: var(--wp--custom--derived--eyebrow--dark--fg);
  --phx-eyebrow-bg: var(--wp--custom--derived--eyebrow--dark--bg);
  --phx-hl-fg: var(--wp--custom--derived--highlight--dark--fg);
  --phx-hl-bg: var(--wp--custom--derived--highlight--dark--bg);
  --phx-hl-line: var(--wp--custom--derived--highlight--dark--line);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--dark);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--dark);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--dark);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--dark);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--dark, currentColor);
  --phx-icon-fg: var(--wp--custom--derived--icon--dark--fg);
  --phx-icon-bg: var(--wp--custom--derived--icon--dark--bg);
  --phx-icon-border: var(--wp--custom--derived--icon--dark--border);
  --phx-card-bg: var(--wp--custom--derived--card--dark--bg);
  --phx-card-border: var(--wp--custom--derived--card--dark--border);
  --phx-card-shadow: var(--wp--custom--derived--card--dark--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--dark--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--dark--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--dark--bg);
  --phx-field-border: var(--wp--custom--derived--field--dark--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--dark--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--dark--error);
  --phx-field-success: var(--wp--custom--derived--field--dark--success);
  --phx-section-fill: initial;
  --phx-heading-color: initial;
  --phx-heading-fill: initial;
  --phx-card-fg: initial;
}
.phx-bg-brand,
.phx-ctx-brand,
.wp-block-group.is-style-phx-section-brand {
  --phx-bg: var(--wp--custom--derived--fill--brand);
  --phx-fg: var(--wp--custom--derived--on-brand);
  --phx-fg-muted: var(--wp--custom--derived--on-brand);
  --phx-link: var(--wp--custom--derived--on-brand);
  --phx-border: color-mix(in srgb, var(--wp--custom--derived--on-brand) 32%, transparent);
  --phx-btn-primary-bg: var(--wp--custom--derived--button--primary--brand--bg);
  --phx-btn-primary-bg-image: var(--wp--custom--derived--button--primary--brand--bg-image);
  --phx-btn-primary-fg: var(--wp--custom--derived--button--primary--brand--fg);
  --phx-btn-primary-border: var(--wp--custom--derived--button--primary--brand--border);
  --phx-btn-primary-bg-hover: var(--wp--custom--derived--button--primary--brand--bg-hover);
  --phx-btn-primary-fg-hover: var(--wp--custom--derived--button--primary--brand--fg-hover);
  --phx-btn-primary-border-hover: var(--wp--custom--derived--button--primary--brand--border-hover);
  --phx-btn-secondary-bg: var(--wp--custom--derived--button--secondary--brand--bg);
  --phx-btn-secondary-bg-image: var(--wp--custom--derived--button--secondary--brand--bg-image);
  --phx-btn-secondary-fg: var(--wp--custom--derived--button--secondary--brand--fg);
  --phx-btn-secondary-border: var(--wp--custom--derived--button--secondary--brand--border);
  --phx-btn-secondary-bg-hover: var(--wp--custom--derived--button--secondary--brand--bg-hover);
  --phx-btn-secondary-fg-hover: var(--wp--custom--derived--button--secondary--brand--fg-hover);
  --phx-btn-secondary-border-hover: var(--wp--custom--derived--button--secondary--brand--border-hover);
  --phx-eyebrow-fg: var(--wp--custom--derived--eyebrow--brand--fg);
  --phx-eyebrow-bg: var(--wp--custom--derived--eyebrow--brand--bg);
  --phx-hl-fg: var(--wp--custom--derived--highlight--brand--fg);
  --phx-hl-bg: var(--wp--custom--derived--highlight--brand--bg);
  --phx-hl-line: var(--wp--custom--derived--highlight--brand--line);
  --phx-orn-heading-divider: var(--phx-orn-heading-divider--brand);
  --phx-orn-eyebrow-side: var(--phx-orn-eyebrow-side--brand);
  --phx-orn-highlight-under: var(--phx-orn-highlight-under--brand);
  --phx-orn-highlight-behind: var(--phx-orn-highlight-behind--brand);
  --phx-orn-highlight-behind-text: var(--phx-orn-highlight-behind-text--brand, currentColor);
  --phx-icon-fg: var(--wp--custom--derived--icon--brand--fg);
  --phx-icon-bg: var(--wp--custom--derived--icon--brand--bg);
  --phx-icon-border: var(--wp--custom--derived--icon--brand--border);
  --phx-card-bg: var(--wp--custom--derived--card--brand--bg);
  --phx-card-border: var(--wp--custom--derived--card--brand--border);
  --phx-card-shadow: var(--wp--custom--derived--card--brand--shadow);
  --phx-card-featured-border: var(--wp--custom--derived--card--featured--brand--border);
  --phx-card-featured-shadow: var(--wp--custom--derived--card--featured--brand--shadow);
  --phx-field-bg: var(--wp--custom--derived--field--brand--bg);
  --phx-field-border: var(--wp--custom--derived--field--brand--border);
  --phx-field-border-focus: var(--wp--custom--derived--field--brand--border-focus);
  --phx-field-error: var(--wp--custom--derived--field--brand--error);
  --phx-field-success: var(--wp--custom--derived--field--brand--success);
  --phx-section-fill: initial;
  --phx-heading-color: initial;
  --phx-heading-fill: initial;
  --phx-card-fg: initial;
}

/* ---------- Sekcja i kontener ---------- */
/* sekcje stykają się ze sobą – bez odstępu blockGap WordPressa między blokami treści */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content, .wp-block-template-part) > .phx-section.phx-section { margin-block: 0; }
.phx-section {
  position: relative;
  isolation: isolate;
  background: var(--phx-section-fill, var(--phx-bg));
  padding-block: var(--wp--custom--derived--space--section);
}
.phx-bg-image { background: var(--wp--preset--color--inverse); }
.phx-bg-image.phx-image-text-dark { background: var(--wp--preset--color--base); }
/* dwie sąsiednie sekcje z tym samym jasnym tłem – bez podwójnego odstępu (także grupa w stylu sekcji obok sekcji);
   grupa z własnym kolorem tła (`has-background`, klasa koloru WP z !important) ma inne tło niż jej styl – zostaje
   z odstępami; sekcja z łącznikiem górnym też (miejsce na kształt) */
:is(.phx-bg-none, .is-style-phx-section:not(.has-background)) + :is(.phx-bg-none, .is-style-phx-section:not(.has-background)):not(.phx-has-divider-top),
:is(.phx-bg-subtle, .is-style-phx-section-subtle:not(.has-background)) + :is(.phx-bg-subtle, .is-style-phx-section-subtle:not(.has-background)):not(.phx-has-divider-top) { padding-top: 0; }
.phx-container {
  position: relative;
  max-width: var(--wp--custom--layout--wide-width);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--30);
}
/* jawnie i z wyższą specyficznością: wtyczki z globalnym resetem (np. Tutor LMS: `body.tutor-frontend * { box-sizing:
   border-box }`, 0,1,1) zwężałyby kontener o padding */
.phx-container.phx-container { box-sizing: content-box; }
.phx-container--narrow { max-width: var(--wp--custom--layout--content-width); }
@media (min-width: 782px) {
  .phx-container { padding-inline: var(--wp--preset--spacing--40); }
}
/* Grupa core/group w stylu sekcji (Blocks\GroupStyles): pełna szerokość jak sekcja phx (także w layoucie constrained
   treści strony), rytm pionowy i marginesy boczne kontenera, dzieci w szerokości kontenera */
:where(.wp-site-blocks, .wp-block-post-content, .entry-content, .wp-block-template-part) > .wp-block-group[class*="is-style-phx-section"] { margin-block: 0; }
.wp-block-group.wp-block-group:is(.is-style-phx-section, .is-style-phx-section-subtle, .is-style-phx-section-dark, .is-style-phx-section-brand) {
  --phx-group-max: none;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  max-width: var(--phx-group-max);
  background: var(--phx-bg);
  padding-block: var(--wp--custom--derived--space--section);
  padding-inline: var(--wp--preset--spacing--30);
}
.wp-block-group:is(.is-style-phx-section, .is-style-phx-section-subtle, .is-style-phx-section-dark, .is-style-phx-section-brand) > * {
  max-width: var(--wp--custom--layout--wide-width);
  margin-inline: auto;
}
@media (min-width: 782px) {
  .wp-block-group.wp-block-group:is(.is-style-phx-section, .is-style-phx-section-subtle, .is-style-phx-section-dark, .is-style-phx-section-brand) { padding-inline: var(--wp--preset--spacing--40); }
}
/* <main> szablonów dla treści spoza sekcji (page, singular, index – strony wtyczek, konto klienta, wpisy): szerokość
   i marginesy boczne jak .phx-container (szerokość daje layout constrained grupy), odstęp w pionie jak sekcja */
.phx-main {
  padding-block: var(--wp--custom--derived--space--section);
  padding-inline: var(--wp--preset--spacing--30);
}
@media (min-width: 782px) {
  .phx-main { padding-inline: var(--wp--preset--spacing--40); }
}
.phx-section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.phx-section__bg .phx-image,
.phx-section__bg img { width: 100%; height: 100%; object-fit: cover; }
.phx-section__bg::after { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--inverse); opacity: 0.6; }
.phx-image-text-dark .phx-section__bg::after { background: var(--wp--preset--color--base); }
.phx-overlay-none .phx-section__bg::after { content: none; }
.phx-overlay-light .phx-section__bg::after { opacity: 0.4; }
.phx-overlay-strong .phx-section__bg::after { opacity: 0.75; }
/* powolne przybliżanie zdjęcia tła (pole `background_zoom` / hero `media_zoom`); z JS (html.phx-motion, motion.js) start po wejściu
   sekcji w widok (is-zooming), bez JS od załadowania; przy reduced-motion wyłączone regułą dostępności */
@media (prefers-reduced-motion: no-preference) {
  .phx-bg-zoom .phx-section__bg-image { animation: phx-bg-zoom 10s ease-out both; transform-origin: 50% 50%; will-change: transform; }
  .phx-motion .phx-bg-zoom:not(.is-zooming) .phx-section__bg-image { animation-play-state: paused; }
}
@keyframes phx-bg-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}
/* kolor nakładki z palety (po regule phx-image-text-dark, więc wygrywa także przy ciemnej treści) */
.phx-overlay-color-primary .phx-section__bg::after { background: var(--wp--preset--color--primary); }
.phx-overlay-color-secondary .phx-section__bg::after { background: var(--wp--preset--color--secondary); }
.phx-overlay-color-accent .phx-section__bg::after { background: var(--wp--preset--color--accent); }
/* ---------- Grafika tła sekcji (decoration_*) ---------- */
/* warstwy w izolowanej sekcji: tło (-1) < grafika (0) < cała treść za nią (1) – kontener, pas nagłówka strony, figura
   phx-media na pełną szerokość; :where() bez specyficzności, więc własne `position` bloku (absolute, sticky, fixed) wygrywa.
   Wymiary i pozycje to literały układu */
.phx-section__decor { position: absolute; z-index: 0; pointer-events: none; line-height: 0; width: 280px; }
.phx-section__decor img { display: block; width: 100%; height: auto; }
:where(.phx-section > .phx-section__decor) ~ * { position: relative; z-index: 1; }
.phx-decor--s { width: 160px; }
.phx-decor--l { width: 420px; }
.phx-decor--top-left { top: 0; left: 0; }
.phx-decor--top-right { top: 0; right: 0; }
.phx-decor--bottom-left { bottom: 0; left: 0; }
.phx-decor--bottom-right { bottom: 0; right: 0; }
/* wystawanie o połowę wysokości grafiki; sekcja nad tłem sąsiadów (późniejsza sekcja malowałaby się na grafice) */
.phx-decor--overhang:is(.phx-decor--top-left, .phx-decor--top-right) { translate: 0 -50%; }
.phx-decor--overhang:is(.phx-decor--bottom-left, .phx-decor--bottom-right) { translate: 0 50%; }
.phx-section.phx-has-overhang { z-index: 1; }
/* bez przewijania w poziomie; clip (nie hidden) zostawia overflow-y widoczny dla wystawania */
.phx-section:has(> .phx-section__decor) { overflow-x: clip; }
@media (max-width: 781px) {
  .phx-decor-m--scale { width: 154px; }
  .phx-decor-m--scale.phx-decor--s { width: 88px; }
  .phx-decor-m--scale.phx-decor--l { width: 231px; }
  .phx-decor-m--hide { display: none; }
}
.phx-stack > * + * { margin-top: var(--wp--custom--derived--space--stack); }
.phx-empty { padding: var(--wp--preset--spacing--30); border: 1px dashed var(--wp--preset--color--muted); color: var(--wp--preset--color--muted); }

/* ---------- Łączniki sekcji (View\Dividers) ---------- */
/* kształt presetu (assets/dividers, viewBox 1440×120, kształt przy dolnej krawędzi) jako maska – liczy się alfa, warstwy
   `fill-opacity` dają odcienie; tło = kolor albo gradient z pola. Łącznik górny = preset odbity w pionie. -1px – bez szczeliny
   subpikselowej na styku sekcji. Warstwa jak grafika dekoracyjna (0): nad tłem i zdjęciem, pod treścią. */
.phx-divider {
  position: absolute;
  inset-inline: 0;
  z-index: 0;
  height: var(--phx-divider-h);
  pointer-events: none;
  background: var(--phx-divider-fill);
  -webkit-mask: var(--phx-divider-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--phx-divider-mask) 0 0 / 100% 100% no-repeat;
}
.phx-divider--top { top: -1px; transform: scaleY(-1); }
.phx-divider--top.is-flipped { transform: scale(-1, -1); }
.phx-divider--bottom { bottom: -1px; }
.phx-divider--bottom.is-flipped { transform: scaleX(-1); }
/* wysokości S/M/L – maleją z szerokością ekranu (telefon bez osobnego ustawienia) */
:root {
  --phx-divider-h-s: clamp(24px, 3vw, 48px);
  --phx-divider-h-m: clamp(40px, 6vw, 96px);
  --phx-divider-h-l: clamp(56px, 10vw, 160px);
}
.phx-divider--s { --phx-divider-h: var(--phx-divider-h-s); }
.phx-divider--m { --phx-divider-h: var(--phx-divider-h-m); }
.phx-divider--l { --phx-divider-h: var(--phx-divider-h-l); }
:where(.phx-section > .phx-divider) ~ * { position: relative; z-index: 1; }
/* odstęp treści od kształtu – na kontenerze (bloki nadpisują padding sekcji); phx-media bez kontenera – kształt na zdjęciu */
.phx-has-divider-top-s > .phx-container { padding-top: var(--phx-divider-h-s); }
.phx-has-divider-top-m > .phx-container { padding-top: var(--phx-divider-h-m); }
.phx-has-divider-top-l > .phx-container { padding-top: var(--phx-divider-h-l); }
.phx-has-divider-bottom-s > .phx-container { padding-bottom: var(--phx-divider-h-s); }
.phx-has-divider-bottom-m > .phx-container { padding-bottom: var(--phx-divider-h-m); }
.phx-has-divider-bottom-l > .phx-container { padding-bottom: var(--phx-divider-h-l); }
.phx-divider--wave { --phx-divider-mask: url("../dividers/wave.svg"); }
.phx-divider--waves { --phx-divider-mask: url("../dividers/waves.svg"); }
.phx-divider--curve { --phx-divider-mask: url("../dividers/curve.svg"); }
.phx-divider--curve-asym { --phx-divider-mask: url("../dividers/curve-asym.svg"); }
.phx-divider--tilt { --phx-divider-mask: url("../dividers/tilt.svg"); }
.phx-divider--triangle { --phx-divider-mask: url("../dividers/triangle.svg"); }
.phx-divider--zigzag { --phx-divider-mask: url("../dividers/zigzag.svg"); }
.phx-divider--clouds { --phx-divider-mask: url("../dividers/clouds.svg"); }
@media (forced-colors: active) {
  .phx-divider { display: none; }
}

/* ---------- Okruszki (Seo\Breadcrumbs: hero strony, archiwa) ---------- */
.phx-breadcrumbs { margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xs); color: var(--phx-fg-muted); }
.phx-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin: 0; padding: 0; list-style: none; }
.phx-breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: var(--wp--preset--spacing--10); color: var(--phx-fg-muted); }
.phx-breadcrumbs a { color: var(--phx-link); }

/* ---------- Typografia ---------- */
.phx-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: var(--wp--custom--type--heading--weight);
  line-height: var(--wp--custom--type--heading--line-height);
  letter-spacing: var(--wp--custom--type--heading--letter-spacing);
  text-transform: var(--wp--custom--type--heading--transform);
  color: var(--phx-heading-color, currentColor);
  text-wrap: balance;
}
.phx-heading--jumbo-2 { font-size: var(--wp--custom--derived--type--jumbo--2); }
.phx-heading--jumbo-1 { font-size: var(--wp--custom--derived--type--jumbo--1); }
.phx-heading--display { font-size: var(--wp--preset--font-size--xxxl); }
.phx-heading--hero { font-size: var(--wp--preset--font-size--xxl); }
.phx-heading--section { font-size: var(--wp--preset--font-size--xl); }
.phx-heading--item { font-size: var(--wp--preset--font-size--l); }
.phx-heading--small { font-size: var(--wp--preset--font-size--m); }
.phx-lead { font-size: var(--wp--preset--font-size--m); }
.phx-muted { color: var(--phx-fg-muted); }

.phx-hl {
  color: var(--phx-hl-fg);
  background: linear-gradient(var(--phx-hl-line), var(--phx-hl-line)) 0 100% / 100% var(--wp--custom--derived--highlight--thickness) no-repeat, var(--phx-hl-bg);
  padding-inline: var(--wp--custom--derived--highlight--padding-inline);
  border-radius: var(--wp--custom--derived--highlight--radius);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.phx-eyebrow {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--custom--derived--eyebrow--size);
  font-weight: var(--wp--custom--type--eyebrow--weight);
  letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing);
  text-transform: var(--wp--custom--type--eyebrow--transform);
  color: var(--phx-eyebrow-fg);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
}
.phx-eyebrow__text {
  background: var(--phx-eyebrow-bg);
  padding-block: var(--wp--custom--derived--eyebrow--padding-block);
  padding-inline: var(--wp--custom--derived--eyebrow--padding-inline);
  border-radius: var(--wp--custom--derived--eyebrow--radius);
}
.phx-eyebrow::before {
  content: "";
  display: var(--wp--custom--derived--eyebrow--line);
  width: 2.5rem;
  height: 2px;
  background: currentColor;
}

/* ---------- Nagłówek sekcji ---------- */
.phx-section-header { max-width: var(--wp--custom--layout--content-width); margin-bottom: var(--wp--custom--derived--space--gap); }
.phx-section-header:last-child { margin-bottom: 0; }
.phx-section-header.phx-align-center { margin-inline: auto; text-align: center; }
.phx-section-header.phx-align-center .phx-eyebrow { justify-content: center; }
.phx-section-header.phx-align-center .phx-buttons { justify-content: center; }
.phx-section-header__intro { margin: var(--wp--preset--spacing--20) 0 0; font-size: var(--wp--preset--font-size--m); color: var(--phx-fg-muted); }
/* intro z max-width (np. hero) – przy wyśrodkowaniu sam akapit też na środku, nie tylko tekst */
.phx-section-header.phx-align-center .phx-section-header__intro { margin-inline: auto; }
.phx-section-header .phx-buttons { margin-top: var(--wp--preset--spacing--30); }

/* ---------- Przyciski ---------- */
.phx-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); align-items: center; }
.phx-button,
.phx-embed .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  box-sizing: border-box; /* min-height = pełna wysokość przycisku (z paddingiem i obramowaniem) */
  min-height: var(--wp--custom--derived--button--min-height);
  padding-block: var(--wp--custom--derived--button--padding-block);
  font-family: var(--wp--custom--derived--button--font);
  font-size: var(--wp--custom--derived--button--font-size);
  font-weight: var(--wp--custom--type--button--weight);
  letter-spacing: var(--wp--custom--type--button--letter-spacing);
  text-transform: var(--wp--custom--type--button--transform);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--wp--custom--derived--radius--button);
  /* gradient wypełnienia od krawędzi obramowania: przy domyślnym padding-box powtarza się pod przezroczystym
     borderem i na zaokrągleniach widać paski z przeciwnego końca gradientu */
  background-origin: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.phx-button--primary,
.phx-embed .wpcf7-submit {
  padding-inline: var(--wp--custom--derived--button--primary--padding-inline);
  background-color: var(--phx-btn-primary-bg);
  background-image: var(--phx-btn-primary-bg-image);
  color: var(--phx-btn-primary-fg);
  border-color: var(--phx-btn-primary-border);
  text-decoration: var(--wp--custom--derived--button--primary--decoration);
}
.phx-button--primary:hover,
.phx-embed .wpcf7-submit:hover:not(:disabled) {
  background-color: var(--phx-btn-primary-bg-hover);
  background-image: none;
  color: var(--phx-btn-primary-fg-hover);
  border-color: var(--phx-btn-primary-border-hover);
}
.phx-button--secondary {
  padding-inline: var(--wp--custom--derived--button--secondary--padding-inline);
  background-color: var(--phx-btn-secondary-bg);
  background-image: var(--phx-btn-secondary-bg-image);
  color: var(--phx-btn-secondary-fg);
  border-color: var(--phx-btn-secondary-border);
  text-decoration: var(--wp--custom--derived--button--secondary--decoration);
}
.phx-button--secondary:hover {
  background-color: var(--phx-btn-secondary-bg-hover);
  background-image: none;
  color: var(--phx-btn-secondary-fg-hover);
  border-color: var(--phx-btn-secondary-border-hover);
}
.phx-button__arrow { display: none; }
.phx-button--primary .phx-button__arrow { display: var(--wp--custom--derived--button--primary--arrow); }
.phx-button--secondary .phx-button__arrow { display: var(--wp--custom--derived--button--secondary--arrow); }
.phx-button__arrow .phx-svg { width: 1.1em; height: 1.1em; transition: transform 0.15s ease; }
.phx-button:hover .phx-button__arrow .phx-svg { transform: translateX(2px); }

/* ---------- Ikony ---------- */
.phx-svg { width: 1.5rem; height: 1.5rem; flex: none; }
.phx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--phx-icon-fg);
  background: var(--phx-icon-bg);
  border: 2px solid var(--phx-icon-border);
  border-radius: var(--wp--custom--derived--icon--radius);
  padding: var(--wp--custom--derived--icon--padding);
}
.phx-icon .phx-svg { width: var(--wp--custom--derived--icon--size); height: var(--wp--custom--derived--icon--size); }

/* ---------- Karta ---------- */
.phx-card { display: flex; flex-direction: column; gap: var(--wp--custom--derived--space--stack); min-width: 0; }
.phx-card.is-boxed {
  background: var(--phx-card-bg);
  border: 1px solid var(--phx-card-border);
  box-shadow: var(--phx-card-shadow);
  border-radius: var(--wp--custom--derived--radius--element);
  padding: var(--wp--custom--derived--space--card);
}
/* kolory niestandardowe sekcji: tekst wszystkiego, co ma tło karty (`--phx-card-bg`: karty, ramka formularza, karta media-text,
   karty produktów), i nagłówki w nim (bez `card_fg` – kolor i nagłówki jak w sekcji) */
:is(.phx-card.is-boxed, .phx-contact__form, .phx-media-text--boxed .phx-media-text__layout, .phx-product-grid .wc-block-product) { color: var(--phx-card-fg, var(--phx-fg)); }
:is(.phx-card.is-boxed, .phx-contact__form, .phx-media-text--boxed .phx-media-text__layout, .phx-product-grid .wc-block-product) :is(.phx-heading, h2, h3, h4) { color: var(--phx-card-fg, var(--phx-heading-color, currentColor)); }
/* nagłówki w gradiencie (`phx-heading-fill`); wyróżnienie ==…== zachowuje własny kolor; karty (tło karty, nie sekcji) i zagnieżdżone
   konteksty (karta z kolorem, wyróżniona `filled`) – bez gradientu */
.phx-heading-fill .phx-heading {
  background: var(--phx-heading-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.phx-heading-fill .phx-heading .phx-hl { -webkit-text-fill-color: var(--phx-hl-fg); }
.phx-heading-fill :is(.phx-card, .phx-ctx-light, .phx-ctx-subtle, .phx-ctx-dark, .phx-ctx-brand) .phx-heading { background: none; -webkit-text-fill-color: currentColor; }
@media (forced-colors: active) {
  .phx-heading-fill .phx-heading { background: none; -webkit-text-fill-color: CanvasText; }
}
/* wąski ekran: wypełnienie karty co najwyżej kroku 30 skali (przy 40 i marginesie kontenera tekst ma ~260 px szerokości) */
@media (max-width: 599px) {
  .phx-card.is-boxed { padding: min(var(--wp--custom--derived--space--card), var(--wp--preset--spacing--30)); }
}
/* karta wyróżniona (token card.featured): obrys i cień z warstwy pochodnej; `filled` – render nadaje karcie kontekst brand/dark */
.phx-card.is-featured {
  border-color: var(--phx-card-featured-border);
  border-width: var(--wp--custom--derived--card--featured--border-width);
  box-shadow: var(--phx-card-featured-shadow);
}
.phx-card.is-featured-filled {
  background: var(--phx-bg);
  color: var(--phx-fg);
}
/* kolor karty wybrany w bloku (View\Cards `color`): karta z własnym kontekstem `phx-ctx-light phx-ctx-<kolor>` – tło i treść
   z tego kontekstu, obrys i cień jak karta na nim */
.phx-card.phx-card--color {
  background: var(--phx-bg);
  color: var(--phx-fg);
}
@media (min-width: 600px) {
  .phx-card.is-featured-raised { transform: translateY(-4px); }
}
.phx-card__media { order: 0; }
.phx-card__media img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--derived--radius--element); }
.phx-card__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); flex: 1 1 auto; }
.phx-card__eyebrow { margin: 0; font-size: var(--wp--custom--derived--eyebrow--size); font-weight: var(--wp--custom--type--eyebrow--weight); letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing); text-transform: var(--wp--custom--type--eyebrow--transform); color: var(--phx-eyebrow-fg); }
.phx-card .phx-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--10); }

/* ---------- Siatka kart (View\Cards: sekcja phx-cards, element phx-card-grid) ---------- */
.phx-cards__grid {
  --phx-cols: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--custom--derived--space--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.phx-cards--cols-1 .phx-cards__grid { --phx-cols: 1; }
.phx-cards--cols-2 .phx-cards__grid { --phx-cols: 2; }
.phx-cards--cols-4 .phx-cards__grid { --phx-cols: 4; }
/* szeroko: flex z szerokością kolumny jak w siatce – niepełny ostatni rząd wyśrodkowany (np. 3 + 2) */
.phx-cards__grid > .phx-card { box-sizing: border-box; min-width: 0; }
/* sekcja: kolumny wg szerokości ekranu */
@media (min-width: 600px) {
  .phx-cards .phx-cards__grid { grid-template-columns: repeat(min(2, var(--phx-cols)), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .phx-cards .phx-cards__grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .phx-cards .phx-cards__grid > .phx-card { flex: 0 0 calc((100% - (var(--phx-cols) - 1) * var(--wp--custom--derived--space--gap)) / var(--phx-cols)); }
}
/* element: kolumny wg szerokości kontenera (kolumna, grupa) – w wąskiej kolumnie mniej kart w rzędzie */
.phx-card-grid { container-type: inline-size; }
@container (min-width: 520px) {
  .phx-card-grid .phx-cards__grid { grid-template-columns: repeat(min(2, var(--phx-cols)), minmax(0, 1fr)); }
}
@container (min-width: 820px) {
  .phx-card-grid .phx-cards__grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .phx-card-grid .phx-cards__grid > .phx-card { flex: 0 0 calc((100% - (var(--phx-cols) - 1) * var(--wp--custom--derived--space--gap)) / var(--phx-cols)); }
}

/* położenie mediów */
.phx-cards--media-bottom .phx-card__media { order: 2; }
@media (min-width: 600px) {
  .phx-cards--media-side .phx-card.has-media { flex-direction: row; align-items: flex-start; }
  .phx-cards--media-side .phx-card__media { flex: 0 0 auto; }
  .phx-cards--media-side .phx-card__media .phx-media-frame { width: 7rem; }
}
.phx-card__media .phx-media-frame { width: 100%; }

/* wyrównanie */
.phx-cards--align-center .phx-card { text-align: center; align-items: center; }
.phx-cards--align-center .phx-card__body { align-items: center; }
.phx-cards--align-center .phx-buttons { justify-content: center; }
.phx-cards--align-center .phx-prose { margin-inline: auto; }
.phx-cards--align-center.phx-cards--media-side .phx-card.has-media { text-align: start; align-items: flex-start; }

/* ---------- Formularze (Contact Form 7) ---------- */
/* zakres .phx-embed (+ .wpcf7) – specyficzność wyższa niż arkusz CF7 ładowany po motywie; kolory z kontekstu tła (--phx-field-*) */
.phx-embed .wpcf7-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.phx-embed .wpcf7-form > p,
.phx-embed .wpcf7-form fieldset { margin: 0; }
.phx-embed .wpcf7-form label,
.phx-embed .wpcf7-form legend {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--s);
  font-weight: 600;
}
.phx-embed .wpcf7-form label > br { display: none; }
.phx-embed .wpcf7-form-control-wrap { display: block; }
.phx-embed .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding-block: var(--wp--preset--spacing--10);
  padding-inline: var(--wp--preset--spacing--20);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--s);
  font-weight: 400;
  line-height: 1.4;
  color: var(--phx-fg);
  background-color: var(--phx-field-bg);
  border: 1px solid var(--phx-field-border);
  border-radius: var(--wp--custom--derived--radius--element);
  transition: border-color 0.15s ease;
}
.phx-embed .wpcf7-form textarea { height: 10rem; min-height: 6rem; resize: vertical; }
.phx-embed .wpcf7-form :is(input, textarea)::placeholder { color: var(--phx-fg-muted); opacity: 1; }
.phx-embed .wpcf7-form :is(input, textarea, select):hover { border-color: var(--phx-field-border-focus); }
.phx-embed .wpcf7-form :is(input, textarea, select):focus { border-color: var(--phx-field-border-focus); }

/* grupy pól wyboru i zgoda */
.phx-embed .wpcf7-form fieldset { padding: 0; border: 0; min-width: 0; }
.phx-embed .wpcf7-form legend { padding: 0; margin-bottom: var(--wp--preset--spacing--10); }
.phx-embed .wpcf7-checkbox,
.phx-embed .wpcf7-radio { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.phx-embed .wpcf7-list-item { display: block; margin: 0; }
.phx-embed .wpcf7-form .wpcf7-list-item label { flex-direction: row; align-items: baseline; font-weight: 400; cursor: pointer; }
.phx-embed .wpcf7-list-item input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--phx-field-border-focus); cursor: pointer; }
.phx-embed .wpcf7-acceptance .wpcf7-list-item-label { font-size: var(--wp--preset--font-size--xs); color: var(--phx-fg-muted); }

/* wysyłka: wygląd przycisku głównego (reguły .phx-button / .phx-button--primary) */
.phx-embed .wpcf7-form > p:has(.wpcf7-submit) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); }
.phx-embed .wpcf7-submit { align-self: flex-start; }
.phx-embed .wpcf7-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.phx-embed .wpcf7-spinner { margin: 0; }

/* walidacja i komunikat po wysyłce */
/* błąd: obrys pogrubiony obwódką wewnętrzną (bez zmiany rozmiaru pola); przy fokusie zostaje globalny pierścień :focus-visible */
.phx-embed .wpcf7-form .wpcf7-not-valid { border-color: var(--phx-field-error); }
.phx-embed .wpcf7-form .wpcf7-not-valid:not(:focus-visible) { outline: 1px solid var(--phx-field-error); outline-offset: -2px; }
.phx-embed .wpcf7-not-valid-tip { margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--phx-field-error); }
.phx-embed .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding-block: var(--wp--preset--spacing--10);
  padding-inline: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--s);
  color: var(--phx-fg);
  border: 2px solid var(--phx-field-border);
  border-radius: var(--wp--custom--derived--radius--element);
}
.phx-embed .wpcf7 form.sent .wpcf7-response-output { border-color: var(--phx-field-success); }
.phx-embed .wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--phx-field-error); }

/* ---------- Treść (rich text) ---------- */
.phx-prose { max-width: var(--wp--custom--layout--content-width); }
/* nagłówki w treści – kolor nagłówków sekcji (kolory niestandardowe), bez niego jak tekst */
.phx-prose :is(h2, h3, h4) { color: var(--phx-heading-color, currentColor); }
.phx-prose > :first-child { margin-top: 0; }
.phx-prose > :last-child { margin-bottom: 0; }
.phx-prose p,
.phx-prose ul,
.phx-prose ol,
.phx-prose blockquote,
.phx-prose table { margin-block: 0 var(--wp--preset--spacing--20); }
.phx-prose h3,
.phx-prose h4 { margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10); font-family: var(--wp--preset--font-family--heading); font-weight: var(--wp--custom--type--heading--weight); line-height: var(--wp--custom--type--heading--line-height); }
.phx-prose h3 { font-size: var(--wp--preset--font-size--l); }
.phx-prose h4 { font-size: var(--wp--preset--font-size--m); }
.phx-prose a { color: var(--phx-link); text-decoration: underline; text-underline-offset: 0.2em; }
.phx-prose a:hover { text-decoration-thickness: 2px; }
.phx-prose ul { list-style: var(--wp--custom--derived--list--style); padding-inline-start: var(--wp--preset--spacing--30); }
.phx-prose ul li { position: relative; }
.phx-prose ul li::before {
  content: var(--wp--custom--derived--list--symbol);
  display: var(--wp--custom--derived--list--symbol-display);
  position: absolute;
  inset-inline-start: -1.25em;
  color: var(--phx-link);
  font-weight: 700;
}
.phx-prose ul li::marker,
.phx-prose ol li::marker { color: var(--phx-link); }
.phx-prose ol { padding-inline-start: var(--wp--preset--spacing--30); }
.phx-prose li + li { margin-top: var(--wp--preset--spacing--10); }
.phx-prose blockquote { margin-inline: 0; padding-inline-start: var(--wp--preset--spacing--30); border-inline-start: 3px solid var(--phx-link); font-size: var(--wp--preset--font-size--m); }
.phx-prose table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--s); }
.phx-prose caption { text-align: start; padding-bottom: var(--wp--preset--spacing--10); color: var(--phx-fg-muted); }
.phx-prose th,
.phx-prose td { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border-bottom: 1px solid var(--phx-border); text-align: start; vertical-align: top; }
.phx-prose th { font-weight: 700; }
.phx-prose-scroll { overflow-x: auto; }

/* ---------- Media ---------- */
.phx-image { display: block; max-width: 100%; height: auto; }
.phx-picture { display: contents; }
.phx-media-frame { overflow: hidden; border-radius: var(--wp--custom--derived--radius--element); }
.phx-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* zdjęcie w naturalnych proporcjach: nie szersze niż oryginał (--phx-img-w z View\Image – powiększenie traci jakość),
   ramka opina zdjęcie i jest wyśrodkowana; bez wymiarów (SVG) fallback 100vw = cała szerokość jak dotąd */
.phx-media-frame--natural { width: fit-content; max-width: 100%; margin-inline: auto; }
.phx-media-frame--natural img { width: var(--phx-img-w, 100vw); max-width: 100%; height: auto; }
.phx-ratio-landscape { aspect-ratio: 3 / 2; }
.phx-ratio-square { aspect-ratio: 1 / 1; }
.phx-ratio-portrait { aspect-ratio: 3 / 4; }
.phx-ratio-video { aspect-ratio: 16 / 9; }

.phx-video { position: relative; overflow: hidden; background: var(--wp--preset--color--inverse); }
.phx-video--inline { aspect-ratio: 16 / 9; border-radius: var(--wp--custom--derived--radius--element); }
.phx-video__poster,
.phx-video__poster img,
.phx-video__frame,
.phx-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.phx-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--inverse);
  color: var(--wp--preset--color--on-inverse);
  cursor: pointer;
}
.phx-video__play .phx-svg { width: 2rem; height: 2rem; }
.phx-video--background { position: absolute; inset: 0; background: transparent; }
.phx-video__toggle {
  position: absolute;
  inset: auto var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) auto;
  z-index: 2;
  display: inline-flex;
  padding: var(--wp--preset--spacing--10);
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--inverse);
  color: var(--wp--preset--color--on-inverse);
  cursor: pointer;
}
.phx-video__icon-play { display: none; }
.phx-video.is-paused .phx-video__icon-play { display: block; }
.phx-video.is-paused .phx-video__icon-pause { display: none; }

.phx-embed { width: 100%; }

/* ---------- Ruch (motion.style, View\Motion) ---------- */
/* stan ukryty tylko pod html.phx-motion (assets/js/motion.js; bez JS i przy reduced-motion treść widoczna); animation zamiast
   transition – nie nadpisuje przejść hover elementów; kolejne elementy bloku co 80 ms (do 5.) */
@media (prefers-reduced-motion: no-preference) {
  .phx-motion [data-phx-reveal]:not(.is-revealed) { opacity: 0; }
  .phx-motion [data-phx-reveal="fade"].is-revealed {
    animation: phx-reveal-fade 600ms ease-out backwards;
    animation-delay: calc(min(var(--phx-reveal-i, 0), 5) * 80ms);
  }
}
@media print {
  .phx-motion [data-phx-reveal] { opacity: 1; animation: none; }
}
@keyframes phx-reveal-fade {
  from { opacity: 0; transform: translateY(1rem); }
}

/* ---------- Dostępność ---------- */
.phx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:where(.phx-section, .phx-header, .phx-footer) :focus-visible {
  outline: 2px solid var(--phx-link);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .phx-section *,
  .phx-section *::before,
  .phx-section *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pas nagłówka strony (fragment page-header, rdzenie szablonów sklepu) ---------- */
/* pas na pełną szerokość sekcji, przed kontenerem; odstęp od treści jak odstęp sekcji */
.phx-section--page-header { padding-top: 0; }
.phx-page-header {
  background: var(--phx-bg);
  color: var(--phx-fg);
  padding-block: var(--wp--custom--derived--space--section);
  margin-bottom: var(--wp--custom--derived--space--section);
}
.phx-page-header__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.phx-page-header__content > * { margin-block: 0; }
.phx-page-header a:where(:not(.phx-button)) { color: var(--phx-link); }